@blue: #3d8196;



@font-face {

font-family: 'Exo2';

src: url('../font/Exo2.eot');

src: url('../font/Exo2.otf') format('truetype'),

     url('../font/Exo2.woff') format('woff'),

     url('../font/Exo2.eot?#iefix') format('embedded-opentype'),

     url('../font/Exo2.svg#QuadrantaBold') format('svg');

font-weight: normal;

font-style: normal;

}



body{

	background-color:#3d8196;

	color: white;

	height:100%;

	width:100%;

	font-family: Arial, Sans-Serif;

}

h1, h2, a{

	text-decoration:none;

	color:white;

	font-family: 'Exo2', Arial, Sans-Serif;

}

h2{



}



div#wrapper{

	width: 100%;

	max-width: 1000px;

	margin:0 auto;

	height:100%;

	position:relative;

}



/* HEADER */



header{

	overflow: hidden;

	min-height:7vh;

	height:auto;

	line-height: 7vh;

}

header h1{

	font-size:2em;

	float:left;

	margin-bottom: 10px;



}

header h1 a{

	color: #3d8196;

}

header nav{

	float: right;

}

header nav ul li{

	float:left;

	margin-left: 20px;

}

header nav ul li:nth-last-of-type(2){

	padding-left: 40px;

}

header>nav a{

	opacity:0.8;

	text-transform: uppercase;

}

header>nav a:hover,header>nav a:active{

	opacity:1;

}

a:active{

	color: #3d8196;

}

/* MAIN */



main{

	font-size: 1.1em;

	margin: 5vh 0;

	overflow: hidden;

	min-height:53vh;

	height:auto;

	text-align: justify;

}

main h2{

	font-size: 1.3em;

	margin-bottom: 25px;

	color:#3d8196;

}

main ul li img.portrait{

	float:left;

	height:50vh;

	margin-right: 20px;

}

main p{

	margin-top:10px;

}





/* CREATIONS */



ul.active{

	width: 100%;

	margin-top:7vh;

}

li#creations ul li{

	width:19%;

	min-width: 100px;

	height:auto;

	margin-left:1.2%;

	float:left;

	border-radius: 5px;

	position:relative;

}

li#creations ul li p{

	position:absolute;

	top:95%;

	width: 100%;

	text-align: center;

}

li#creations ul li a{

	opacity: 0.8;

}

li#creations ul li p, li#creations ul li p a{

	font-size:12px;

	font-family: Arial, Sans-Serif;

}

li#creations ul li a:hover{

	opacity: 1;

}

li#creations ul li a:active{

	color: #3d8196;

}

li#creations ul li img{

	width:100%;

	border-radius: 5px;

}

li#creations ul li:first-child{

	margin-left:0;

}

li#creations ul#links a{

	opacity:0.8;

}

li#creations ul#links a:hover{

	opacity:1;

}

li#creations ul#links a:active{

	color:#3d8196;

}

li#creations ul#links{

	width:80%;

	clear:both;

	margin-left:10%;

	margin-top:20px;

	padding-top:30px;

}

li#creations ul#links li{

	width: 16%;

	border-top: 2px solid white;

	padding-top:30px;

	border-radius: 0;

	margin:0;

	text-align: center;

	position:relative;

	min-width: 85px;

}

li#creations ul#links li:nth-child(2), li#creations ul#links li:nth-child(3), li#creations ul#links li:nth-child(4), li#creations ul#links li:nth-child(5){

	padding-left: 5%;

	padding-top:30px;

}

ul#links>li.active:before{

	content:"";

	display:block;

	width:20px;

	height:20px;

	background:url(../img/tringle.png) no-repeat;

	background-size: cover;

	position:absolute;

	top:0;

	left:50%;

}

ul#links>li:first-child.active:before{

	margin-left:-10px;

}





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

	li#creations ul#links li{

	clear: both;

	width: 100%;

	margin:0;

	border: none;

	padding:10px;

	}

	li#creations ul#links li:first-child{

		margin-left:2%;

	}

	ul#links>li.active:before{

	content:"";

	display:none;

	}

	li#creations ul li p {

	display: none;

	}

}

/* CONTACT */

li#contact ul li{

	width:39%;

	float:left;

}

li#contact ul li:first-child{

	width:55%;

	margin-right:5%;

}



form#contact input{

	float:left;

	margin-top:20px;

	height:25px;

}

input.first-contact{

	width:45%;

}

input.first-contact:first-child{

	margin-right: 7%;

}



p.succes{

	color:#3d8196;

}



/* RESPONSIVE FORM */

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

	input.first-contact{

		width:98%;

	}

}



textarea#message{

	width:98%;

	height: 160px;

	margin-top:20px;

	resize:none;

}

button#envoi{

	margin-top:20px;

	clear: both;

}

p.contactcv{

	text-align: left;

	margin-top:40px;

}

p.contactcv a img{

	float: right;

	width:50px;

	margin-left: 10px;

	opacity: 0.8;

}

p.contactcv:nth-child(even) a img{

	float:left;

	margin-left: 0;

	margin-right: 10px;

}

p.contactcv a:hover img{opacity: 1;}

/* FOOTER */



footer{

	min-height:10vh;

	height:auto;

	text-align: center;

}

footer h2{

	color:#3d8196;

	font-size: 1.3em;

}

footer a{

	text-transform: uppercase;

}

footer p{

	margin-top:5px;

}



/* STYLISER */



.black{

	background:url(../img/bg.png) repeat;

	padding:20px;

	border-radius: 4px;

}

footer.black{

	padding-bottom: 7px;

	border-radius:4px 4px 0px 0px;

}

header.black{

	border-radius:0px 0px 4px 4px;

}

span.nom{

	text-transform: uppercase;

}

/* ANIMATIONS + CLASSES DE DISPLAY */

.nothere,.passive{

	display: none;

}





/*responsive très petit*/

@media all and (max-width:588px){

    li#creations ul li {

        width: 45%;

	}

}

@media all and (max-width: 390px){



	header nav ul li{

		text-align: center;

		padding:auto;

		margin:auto;

		width:100%;

	}

	header nav ul li:nth-last-of-type(1){

		padding-left: 20px;

	}

	li#creations ul li {

        width: 100%;



	}

}

@media all and (max-width: 550px){

    li#contact ul li, li#contact ul li:first-child {

        float:none;

        width:100%;

    }

}

@media all and (min-width: 495px){

	ul#textes{

		position: relative;

		left: 19%;

	}

}