@font-face {
    font-family: 'CaviarDreams';
    src: url('../fonts/CaviarDreams.ttf'); 
}

@font-face {
    font-family: 'LemonMilk-light';
    src: url('../fonts/LemonMilklight.otf'); 
}

@font-face {
    font-family: 'LemonMilk';
    src: url('../fonts/LemonMilk.otf'); 
}

@font-face {
    font-family: 'GeosansLight';
    src: url('../fonts/GeosansLight.ttf'); 
}

@font-face {
    font-family: 'GeosansLight-oblique';
    src: url('../fonts/GeosansLight-Oblique.ttf'); 
}

* {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

body {
	background-color: black;
	color: white;
	background-image: url('../img/banner.jpg');
	background-repeat: no-repeat;
	background-size: 100% auto;
	/*background-attachment: fixed;*/
}

header {
	display: block;
	min-height: 100px;
	line-height: 100px;
	background-color: black;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 1;
}

header a {
	color: white;
	text-decoration: none;
	font-family: 'LemonMilk-light';
	font-size: 1.4em;
	padding-bottom: 3px;
	color: #7d7d7d;
}

header a:hover {
	border-bottom: 2px solid white;
	color: #ffffff
}

.active {
	color: #ffffff;
	opacity: 1;
}

.nav-separator {
	color: #c6162c;
}

li {
	list-style: none;
}

#logo {
	width: 20%;
	float: left;
	margin-left: 5%;
	margin-top : auto;
	margin-bottom : auto;
}

#logo p {
	font-family: 'CaviarDreams';
	font-size: 1.5em;
	float: left;
}

#logo img {
	vertical-align: middle;
	width: 50%;
	height: 50%;
	margin-left: 20%;
}

#menu {
	width: 67%;
	float: left;
	margin-left: 8%;
	line-height: 97px;
}

@media screen and (max-width: 1700px) {

	#banner {
		height: 920px !important;
	}
}


@media screen and (max-width: 1500px) {

	#banner {
		height: 800px !important;
	}
}


@media screen and (max-width: 1250px) {
	#menu {
		width: 50%;
	}

	#logo {
		width: 30%;
	}

	#banner {
		height: 670px !important;
	}
}

@media screen and (max-width: 900px) {
	
	#portfolio img {
		max-width: 260px !important;
		height: auto !important;
	}

	#banner {
		height: 530px !important;
	}

}

@media screen and (max-width: 800px) {
	#menu {
		width: 60%;
		margin-left: 0;
	}

	#banner {
		height: 460px !important;
	}
}

@media screen and (max-width: 670px) {

	#banner {
		min-height: 445px !important;
	}

	#menu {
		width: 100%;
		margin-left: 0;
	}

	#logo {
		width: 163px;
		margin-left: 40%;
		margin-right: 40%;
	}

	nav li {
		clear: both;
		float: none !important;
		width: 100%;
		display: inline-block;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center;
		background-color: black;
	}

	nav li a {
		width: 100%;
		display: block;
		font-size: 1.5em !important;
	}

	nav li a:hover {
		background-color: white;
		color: black;
		border: none;
	}

	header {
		position: relative;
	}

	#title {
		display: none;
	}

	#banner {
		min-height: 200px;
	}

	body {
		background-position: 0px 480px !important;
	}

	h1 {
		line-height: 1em !important;
		margin-bottom: 6%;
	}

	#content nav ul {
		width: 100% !important;
	}

	#content nav {
		margin-bottom: 10% !important;
	}

	#content nav li {
		width: 25%;
		font-size: 1.2em !important;
		padding: 5px 5px !important;
	}

	#content nav .nav-separator {
		width: 5%;
	}

	#portfolio img {
		max-width: 250px !important;
		height: auto !important;
	}

	#portfolio nav li a:hover {
		background-color: black;
		color: white;
	}

	#banner {
		min-height: 700px !important;
	}

	#prestations .prestations-item-left, #prestations .prestations-item-right  {
		/*max-width: 400px !important;
		min-width: 400px !important;*/
	}
}

@media screen and (max-width: 650px) {
	#portfolio img {
		max-width: 200px !important;
		height: auto !important;
	}
}

nav li {
	float: left;
	margin-right: 5%;
}

.separator {
	clear: both;
}

#banner {
	height: 1100px;
	width: 100%;
}

#banner #title {
	width: 305px;
	margin-left: 10%;
	border-bottom: 3px solid white;
	padding-top: 21.5%;
	padding-bottom: 0.5%;
	/*background-attachment: fixed;*/
}

@media screen and (max-width: 1400px) {

	body {
		background-position: 0px 50px
	}
}


#banner #title #title-name {
	padding-top: 2.5%;
	border-top: 3px solid white;
	font-family: 'LemonMilk-light';
	font-size: 3em;
}

#banner #title #title-baseline {
	font-family: 'GeosansLight-oblique';
	color: #c6152c;
	font-size: 2.2em;
	text-align: center;
}

#content {
	background-color: black;
}

section {
	padding-top: 5%;
	min-height: 500px;
}

h1 {
	font-family: 'LemonMilk-light';
	font-size: 3em;
	line-height: 3em;
	font-weight: lighter;
	color: white;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

h1 span {
	font-size: 2em;
	position: relative;
	top: 0.15em;
}


#portfolio nav {
	/*min-height: 100px;
	line-height: 100px;
	width: 30%;
	margin-left: auto;
	margin-right: auto;*/
	margin-top: 3%;
	margin-bottom: 5%;
	text-align: center; 
}

#portfolio nav ul {
/*	height: 100%;
    line-height: 100%;*/
    /*width: 500px;*/
    /*margin: auto;*/
    /*white-space: nowrap;*/
    display: inline-block;
    margin: 0;
    padding: 0;
    /* For IE, the outcast */
    zoom:1;
    *display: inline;
}

#portfolio a {
	color: white;
	text-decoration: none;
	color: #7d7d7d;
}

#portfolio a:hover {
	color: #ffffff
}


#portfolio nav li {
	/*display: inline-block;*/
	font-family: 'GeosansLight';
	font-size: 2em;
	/*opacity: 0.6;*/
	float: left;
    padding: 15px 15px;
    margin: 0;
}

#portfolio .active {
	color: white;
}

#portfolio .pictures {
	max-width: 85%;
	margin-left: auto;
	margin-right: auto;
	z-index: 0;
}

#portfolio img {
	margin-right: 10px !important;
    margin-bottom: 35px !important;
}

#portfolio #picture_wrapper {
	text-align: center !important;
}

#prestations h1 {
	margin-bottom: 6%;
}

#prestations h2 {
	font-family: 'GeosansLight';
	font-size: 2.3em;
	margin-bottom: 7%;
	padding-bottom: 2%;
	border-bottom: 3px solid white;
	width: 84%;
	margin-top:	9%;
	margin-left: 9%;
}


#prestations p {
	font-family: 'GeosansLight-oblique';
	font-size: 1.4em;
	margin-left: 10%;
	margin-right: 10%;
}

#prestations {
	margin-top: 6%;
	margin-bottom: 20%;
}

#prestations .prestations-item {
	width: 100%;
}

#prestations .prestations-item-left, #prestations .prestations-item-right {
	min-height: 450px;
	max-height: 450px;
	float: left;
	width: 50%;
}

.prestations-img {
	background-color: white;
/*	width: 40%;
	padding: 5%;*/
}

#prestations .prestations-item img {
/*	min-height: 450px;
	max-height: 450px;
	position: relative;
	left: 16%;
	min-width: 630px;*/
	width: 100%;
}

#mariages-img {
	background-image: url("../img/mariages.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
}

#soirees-img {
	background-image: url("../img/soirees.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.prestations-txt {
	background-color: #0a0b0b;
/*	padding: 5%;
	width: 40%;*/
}

#prestations a {
	width: 200px;
	height: 50px;
	line-height: 50px;
	display: inline-block;
	float: right;
	margin-right: 10%;
	margin-top: 5%;
}

#prestations .contact_button {
	display: inline-block;
	font-family: 'LemonMilk-light';
/*	position: relative;
	width: 200px;
	height: 50px;
	left: 60%;
	top: 65px;*/
	margin: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	color: black;
	padding: 5%;
	text-align: center;
}

#prestations .contact_button:hover {
	background-color: black;
	color: white;
	border: 2px solid white;
}

#prestations .contact_button_down {
	margin-top: 8% !important;
}



.separator {
	clear: both;
}

#contact {
	margin-top: 5%;
	width: 100%;
	min-height: 800px;
}

#contact form {
	text-align: center;
	margin-top: 5%;
	margin-bottom: 15%;
}

#contact p {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.2%;
}

#contact input {
	width: 80%;
	line-height: 50px;
	font-family: 'GeosansLight';
	font-size: 1.6em;
	padding-left: 15px;
	padding-right: 15px;
}

#contact textarea {
	width: 80%;
	height: 170px;
	padding-left: 15px;
	padding-right: 17px;
	padding-top: 15px;
	font-family: 'GeosansLight';
	font-size: 1.6em;
}

textarea, input {
  outline-color: #c6172c;
}

#contact #submit {
	margin-top: 6%;
	width: 260px;
	height: 60px;
	background-color: black;
	border: 2px solid white;
	color: white;
	line-height: 55px;
	v/*e*/rtical-align: center;
	font-family: "LemonMilk-light";
	/*font-style: 0.5em;*/
}

#contact #submit:hover {
	background-color: white;
	color: black;
}

footer {
	margin-top: 0%;
	min-height: 200px;
	width: 100%;
	background-color: #0a0b0b;
}

footer #links {
	width: 150px;
	padding-top: 5%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


footer #links p {

}

footer #links img {
	
}

footer #fb {
	float: left;
}

footer #insta {
	float: right;
}


footer #copyright {
	padding-top: 4%;
	padding-bottom: 1%;
	font-family: 'GeosansLight-oblique';
	font-size: 1.1em;
	color: #7b7d7d;
	text-align: center;
}

@media screen and (max-width: 1280px) {

	#logo p {
		font-size: 1.1em;	
	}

	#menu a {
		font-size: 1.1em;
	}

	#portfolio nav {

	}

	#contact {
		min-height: 500px;
	}

}

@media screen and (min-width: 1400px) and  (max-width: 1500px) {

	#prestations a {
		margin-right: 10%;
		margin-top: 15%;
	}


	#prestations .contact_button_down {
		margin-top: 10% !important;
	}

}

@media screen and (min-width: 950px) and  (max-width: 1200px) {

	#prestations a {
		margin-right: 10%;
		margin-top: 15%;
	}
}

@media screen and (max-width: 950px) {

	#prestations .contact_button_down {
		margin-top: 18% !important;
	}
}

/*
@media screen and (max-width: 1500px) {

	#prestations a {
		margin-right: 10%;
		margin-top: 15%;
	}


	#prestations .contact_button_down {
		margin-top: 10% !important;
	}

}*/

@media screen and (min-width: 1500px) and (max-width: 1600px) {

	#prestations a {
		margin-right: 10%;
		margin-top: 8%;
	}


	#prestations .contact_button_down {
		margin-top: 12% !important;
	}

}


@media screen and (max-width: 1900px) {

	#portfolio nav {
		/*width: 35%;*/
	}
}



/* Sur tous types d'écrans orientés verticalement */
@media all and (orientation: portrait) {

}