/* --- Déclarations générales --- */
body {font-family:'light'; font-size:13px; color:white; background:url(../img/shadow-wrapper.png) center top repeat-y #313a3d;}

/* Liens */
a {color:#57ddff;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;}
a:hover {color:white;}
.clearfix {clear:both;}

/* Titres */
h1 {position:absolute; width:390px; left:50%; margin-left:-190px; height:430px; top:50%; margin-top:-320px; z-index:10;}
h1 img {display:block;}
h2 {font-size:24px; text-transform: uppercase; text-align:center; margin:0 0 10px 0; font-family:'regular';}
h3 {font-size:14px; color:#c2c2c2; text-align:center; font-style:italic;margin:0 0 30px 0;}
h4 {font-size:18px; font-style:italic; color:#c7c7c7; margin: 0 0 25px 0;}
h5 {font-size:18px; color:white;}

p {margin: 0 0 20px 0; line-height:18px; text-align:justify;padding:0 20px;}

/* Conteneurs */
.wrapper {max-width:960px; margin:0 auto;}
.separator {width:248px; height:30px; background:url(../img/separator.png) no-repeat center bottom; margin:140px auto 0 auto;}
.columns {width:920px; margin:0 auto;}
.left {float:left; width:450px;}
.right {float:right; width:450px;}
header {height:100%; position:relative; overflow:hidden;}

/* Nav Bar */
nav {background:rgba(0,0,0,0.45); position:absolute; height:100px; width:100%; left:0;z-index:7;}
nav ul {max-width:960px; margin:0 auto; text-align:center; padding:7px 0 0 0;}
nav li {display:inline-block; vertical-align: middle; padding:0 12px 0 6px;}
nav li:last-child {padding:0 0 0 6px;}
.li-hop {background:url(../img/separator-bullet.png) no-repeat right center; padding:0 12px 0 0;}
.li-procedes {background:url(../img/separator-bullet.png) no-repeat right center;}
nav a {color:white; text-decoration:none;text-transform:uppercase;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;}
nav a:hover {color:#57ddff;}

/* Sections */
section {position:relative; padding:20px 0;}
section.hop {z-index:6; padding:140px 0 0 0;}
section.realisations {z-index:5; padding-top:140px;}
section.procedes {z-index:4;padding-top:140px;}
section.contact {z-index:3; padding-top:140px;}

section.hop img {margin:0 auto 40px auto; display:block; width:920px;}

.title-img {position:relative;}
.title-img img {display:block; margin: 0 0 20px 0;}
.title-img h5 {position:absolute; bottom:0; right:0; padding:7px 10px; background:rgba(0,0,0,0.70);}

/* Réalisation */ 
section.realisations ul {overflow:hidden; margin:0 0 0 20px;}
section.realisations li {text-align:center; width:215px; float:left; margin:0 20px 0 0;}
section.realisations li.last {margin:0;}
section.realisations img {display:block;background:rgba(0,0,0,0.7);}
section.realisations li span {padding:20px 0; display:inline-block; font-size:14px; color:#c2c2c2; text-transform: uppercase;}
section.realisations li a {width:215px; height:215px; overflow:hidden;position:relative; display:block;}
.enlarge {width:215px; height:215px; position:absolute; bottom:-215px;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;}
section.realisations li a:hover .enlarge {bottom:0;}

/* Contact */
section.contact .left {text-align:center;}
section.contact img {margin:30px 0;}
section.contact ul {width:250px; margin:0 auto; font-family:'regular'; font-size:18px;}
section.contact li {text-align:left; margin:0 0 20px 0;}
section.contact .zone {text-transform:uppercase; line-height:30px;}
section.contact .tel-mail {width:50px; display:inline-block;}

/* Footer */
footer {position:absolute; width:1294px; left:50%; margin-left:-649px; height:45px; background:#212425; color:#a2a2a2;}
footer a {color:#a2a2a2;}
footer ul {text-align:center;}
footer li {display:inline-block; line-height:45px;} 

/* Video */


.know-more {position:absolute; width:200px; height:50px; left:50%; margin-left:-100px; top:50%; z-index:10; margin-top:200px; text-align:center; border:3px white solid; line-height:50px;font-size:16px; font-family:'regular'; text-transform: uppercase; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
.know-more span {color:#57ddff;}
.know-more b {opacity:0.7;}
.lien-know-more {color:white;}
.lien-know-more:hover .know-more {background:rgba(0,0,0,0.8); width:250px; height:70px; line-height:70px; margin-left:-125px;}
video#bgvid {min-width: 100%; min-height: 100%;width: auto; height: auto; z-index: -100;background: url(polina.jpg) no-repeat;background-size: cover;}
body, html {height:100%;}
.trame {background:url(../img/trame.png); position:absolute;height:100%; width:100%; top:0; left:0; z-index:9;}

/* Adresse permanente */
.perm-adresse {position:fixed; z-index:100; right:20px; bottom:20px; border:3px white solid; padding:10px;background:rgba(0,0,0,0.5);}

@media screen and (max-width: 1024px) {
	html, body {height:auto;}
	header {height:auto;}
	.perm-adresse, video, .trame, .know-more, h1 {display:none;}
	.columns {width:100%;}
	.left, .right {float:none; width:100%;}
	img {max-width:100%;}
	section {width:95%; margin: 0 auto;}
	section.realisations li, section.realisations li.last {float:none; margin: 0 auto;}
	.title-img {max-width:450px; margin:0 auto;}
	section.hop {padding: 110px 0 0 0;}
	section.contact .right {text-align:center;}
	footer {position:static; width:100%; margin-left:0;}
}

@media screen and (max-width: 650px) {
	nav ul {padding: 0;}
	nav {height:50px; line-height:50px;}
	.li-logo {display:none;}	
}
@media screen and (max-width: 550px) {
	nav {font-size:10px;}
}
@media screen and (max-width: 450px) {
	nav {height: auto; line-height:25px;}
	nav li {display:block;}
	nav li:last-child {padding:0;}
	.li-hop, .li-procedes {background:none;}

}