/*STRUCTURE*/ 

body{color:#073a59; font-family: 'Poppins', sans-serif; background-color: #FFFFFF; padding: 0; margin: 0; font-size: 14px;}

.wrapper{width: 100%; margin:0 auto;}
.spacer{clear: both;}

.topfix{width: 100%; height: 40px; background-color: #111111; position: fixed; top: 0; z-index: 2000;}
.bottomfix{width: 100%; height: 40px; background-color: #111111; position: fixed; bottom: 0; z-index: 1999;}
.leftfix{width: 40px; height: 100%; background-color: #111111; position: fixed; left: 0; z-index: 1999;}
.rightfix{width: 40px; height: 100%; background-color: #111111; position: fixed; right: 0; z-index: 1999;}
.uptext{width: 500px; font-family: "Oswald", sans-serif; font-weight: 300; color: #9b8449; font-size: 18px; padding: 5px 0; letter-spacing: 3px; text-transform: uppercase; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); position: relative; top: 47%; height: 40px; margin-left: -225px;}

.mid{width: 50%; float: left;}
.double{width: 64.666%; float: left; margin-left: 2%;}
.tri{width: 33.333%; float: left;}
.quart{width: 23%; float: left; margin-left: 2%;}
.cinq{width: 18%; float: left; margin-left: 2%;}

.full img,
.mid img,
.double img,
.tri img,
.quart img,
.cinq img{width: 100%; height: auto; display: block;}

.globalheader .double{width: 66.666%; float: left; margin: 0;}
.globalheader .tri{width: 33.333%; float: left; margin: 0;}

.wrapper .mid:first-child,
.wrapper .double:first-child,
.wrapper .tri:first-child,
.wrapper .quart:first-child,
.wrapper .cinq:first-child{margin: 0;}

.wrapper li.tri{width: 28.333%; float: left; margin-right: 3%;}
.wrapper li.tri:first-child{margin-right: 3%;}

.deuxcol {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
} 

article.panorama{padding: 0; margin: 0; text-align: center;}
article.panorama img{width: 100%; padding: 0; display: block;}

.hidden{display: none;}

#scrollToTop {bottom: 5px; opacity: 0.8; position: fixed; right: 5px; z-index: 3000; transition: all 0.2s ease 0s;}
#scrollToTop:hover{opacity: 1;}
#scrollToTop img{width: 30px;}

.logo{font-family: "Oswald", sans-serif; color: #9b8449; font-size: 18px; padding: 5px 0 5px 40px; letter-spacing: 4px; text-transform: uppercase;}
.logo span{font-weight: 300;}

/*TYPO*/ 

h1, h2, h3, h4{margin: 0; font-family: 'Playfair Display', serif; letter-spacing: 2px;}
h1{font-weight: 700; text-align: center; color: white; font-size: 60px; width: 100%;}
h2{font-weight: 700; text-align: center; color: #073a59; font-size: 50px; width: 100%; display: block;}
h3{margin-bottom: 20px; font-weight: 700; text-align: center; color: #073a59; font-size: 35px; width: 100%; display: block;}
h4{margin:0 auto 20px; font-weight: 700; letter-spacing: 2px; text-align: center; color: white; font-size: 32px; width: 100%; display: block;}
h4:after{content: ""; border-bottom: 1px solid #9b8449; width: 50px; height: 1px; display: block; margin: 20px auto;}

h5{font-weight: 700; text-transform: uppercase; letter-spacing: -1px; text-align: center; color: #930e0f; font-size: 20px; width: 100%; display: block; margin: 10px 0;}
#Marques h5{font-weight: 700; text-transform: uppercase; letter-spacing: 0; text-align: left; color: #930e0f; font-size: 16px; width: 100%; display: block; margin: 15px 0 5px;}
footer h5{border-bottom: 1px dotted rgba(255, 255, 255, 0.2); color: #ddd; font-weight: normal; letter-spacing: 0; padding-bottom: 5px; text-align: left;}
h6 { font-size: 16px; margin: 0 0 10px;}

.BigText{text-transform: uppercase;}

h1 span, h2 span, h3 span, h3.BigText span{color:#9b8449;}

.CallOut h4{text-align: center; margin: 0; font-size: 34px; color: #FFF;}

p{color: #9b8449; line-height: 26px; margin: 15px;}
.CenterText{margin: 0 auto 20px; text-align: center; width: 80%;}
p.CenterText{margin: 20px auto 30px; text-align: center; width: 80%; font-size: 16px;}
.signature {color: #555; font-style: italic; font-weight: 700; margin: 0;}

.blur{overflow: hidden;}

em{font-weight: 300; display: block; font-size: 20px;}

a{text-decoration: none; color:#073a59;}
a:hover{color: #c00c1a;}

ul{list-style: none; margin: 0; padding:0;}
li{color: #666666; line-height: 26px;}
li h3{display: block; font-size: 19px; color:#073a59; margin: 10px 0 5px;}
li span{text-align: justify; display: inline-block;}
li span strong{display: inline; font-size: inherit; color:inherit; margin: 0;}
li strong{font-size: 16px;}

.compare p{font-size: 18px; color:#073a59; margin: 20px;}

.marques{text-transform: uppercase; letter-spacing: 1px;}

/*CONTENU*/

article{padding: 0 40px; clear: both; position: relative;}
article.nopadding{padding: 0; clear: both;}

iframe{width: 100%; border:5px solid #FFFFFF;}

.grey{background-color: #e8e5dd;}
.white{background-color: #ffffff;}

#start{width: 100%; height: 100vh; background:url("../images/accueil2.jpg") no-repeat center center transparent; background-size: cover; overflow: hidden;}
#start h1{padding-top: 42vh; padding-bottom: 25px; font-style: italic; border-bottom: 1px solid #FFF; max-width: 740px; width: 80%; line-height: 65px; margin: 0 auto; text-shadow: 0px 0px 20px rgba(0,0,0,0.2);}
#start h1 span{color:#fff; text-transform: uppercase; font-size: 80px; letter-spacing: -6px; font-weight: 100;}
#start h2{font-family: "Oswald", sans-serif; font-weight: 300; color: #FFF; font-size: 22px; letter-spacing: 20px; text-transform: uppercase; margin:25px 0 0; text-shadow: 0px 0px 20px rgba(0,0,0,1);}
#start .doublev{font-family: 'Playfair Display', serif; font-size: 60em; position: absolute; bottom: -280px; left: -30px; opacity: 0.2; z-index: 200; color: white;}
#start .tagline {font-family: 'Playfair Display', serif; font-size: 20px; position: absolute; bottom: 55px; opacity: 0.9; z-index: 200; font-weight: 300; color: white; letter-spacing: 1px; font-style: italic; width: 100%; text-align: center; text-shadow: 0px 0px 20px rgba(0,0,0,1);}

#concept {width: 100%; height: 100vh; background:url("../images/bgwood.jpg") no-repeat center center transparent; background-size: cover; overflow: hidden; border-top: 2px solid #9b8449; border-bottom: 5px solid #9b8449;}
#concept .whitebox{display: block; height: 80vh; width: 80vw; margin: 10vh auto; padding: 0; background-color: rgba(255,255,255,0.15); overflow: hidden;}
#concept .whitebox ul{border-top: 10px solid #9b8449; border-bottom: 10px solid #9b8449; padding: 10px 0 5px; margin: 30vh 50px;}
#concept .whitebox ul li{font-family: "Oswald", sans-serif; font-weight: 400; color: #9b8449; text-align: right; text-transform: uppercase; font-size: 50px; margin: 25px 0;}
#concept .whitebox ul li.left{float: left; font-family: 'Playfair Display', serif; font-style: italic; color: #FFF; text-transform: none; font-size: 42px; letter-spacing: 1px; margin:80px 0;}

#presentation .photo{background: no-repeat center center; background-size: cover; height: 400px; position: relative;} 
#presentation .arrow:before{content:""; position: absolute; background-color: #f0f0f0; width: 40px; height: 40px; left: 50%; margin: -20px 0 0 -20px;
-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
#presentation .middletext{height: 400px; display: table; width: 100%; text-align: center;}
#presentation .middletext span{display: table-cell; vertical-align: middle; font-size: 22px; padding: 40px}
#presentation .middletext span strong{font-family: 'Playfair Display', serif; font-style: italic; letter-spacing: 1px; font-size: 24px;}

#experience{padding: 200px 40px; border-bottom: 5px solid #9b8449; margin: 0; background:url("../images/label.jpg") no-repeat center center transparent;}

#designed{width: 100%; height: 75vh; background:url("../images/bgdesigned.jpg") no-repeat center bottom transparent; background-size: cover; border-top: 5px solid #9b8449;}
#designed h3{color: white; text-align: right; padding: 25vh 100px 0 0; display: block; max-width: 650px; width: 80%; float: right;}

#vision{padding: 150px 40px; border-top: 5px solid #9b8449; border-bottom: 5px solid #9b8449; margin: 0;}
#vision p{max-width: 700px; width: 90%; margin: 0 auto; text-align: left; font-size: 24px; color: #444444; font-style: italic; line-height: 42px; font-family: 'Playfair Display', serif; letter-spacing: 1px;}
#vision p.founder{display: block; text-align: right; border-top: 1px solid #9b8449; padding-top: 8px; margin-top: 18px; font-size: 16px; font-family: 'Oswald', serif; font-weight: 100; font-style: normal;}

#wow{border-bottom: 5px solid #9b8449;}
#wow .photo{background: no-repeat left bottom; background-size: cover; height: 100vh; position: relative;} 
#wow .surtexte{position: absolute; z-index: 100; max-width: 500px; width: 85%; left: 50%; margin: 0 0 0 -250px; margin-top: 45vh;}
#wow .surtexte:before{content:""; position: absolute; background-color: #073a59; opacity: 0.8; width: 500px; height: 500px; left: 50%; margin: -180px 0 0 -250px; z-index: -1;
-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
#wow .surtexte p{text-align: center; font-size: 15px; color: #e4e0d6; letter-spacing: 0.5px;}

#products{border-bottom: 5px solid #9b8449;}

#footer {margin-bottom: 40px;}
#footer .photo{background: no-repeat center center; background-size: cover; height: 400px; position: relative;}
#footer .middletext{height: 400px; display: table; width: 100%; text-align: center;}
#footer .middletext span{display: table-cell; vertical-align: middle; font-size: 14px; padding: 40px; color: #FFF;}
#footer .middletext span strong{font-family: 'Playfair Display', serif; font-style: italic; letter-spacing: 1px; font-size: 24px; color: #9b8449;}
#footer .middletext span strong:after{content: ""; border-bottom: 1px solid #fff; width: 40px; height: 1px; display: block; margin: 20px auto 0;}

/********************************************/
/**********Shit Just Got Real !*************/
/******************************************/

/****************/
/*MEDIA QUERIES*/
/**************/

@media screen and (max-width: 920px) {
	.mid,
	.tri,
	.double,
	.cinq,
	.wrapper li.tri{width: 100%; float: none; margin: 0;}

	.doublev,
	.uptext{display: none;}

	.topfix{height: 35px;}
	.bottomfix{height: 15px;}
	.leftfix{width: 15px;}
	.rightfix{width: 15px;}
	.logo {font-size: 16px; padding: 5px 0 5px 15px;}
	#footer {margin-bottom: 15px;}

	#designed h3 {padding: 50px 50px 0 0;}

	#wow .photo {height: 600px; background-position: center bottom;}
	#wow .surtexte{background-color: rgba(7, 58, 89, 0.7); padding: 10px 0; margin-top: 490px; width: 90%; max-width: 100%; left: 50%; margin-left: -45%; }
	#wow .surtexte::before{content: none;}

	article {padding: 0 15px;}

	#start h1,
	#start h1 span {font-size: 50px;}
	#start h2 {font-size: 20px; letter-spacing: 12px;}

	h3 {font-size: 28px;}

	#concept .whitebox {height: 90vh; width: 90vw; margin: 5vh auto;}
	#concept .whitebox ul {margin: 34vh 50px;}
	#concept .whitebox ul li {text-align: center; font-size: 35px; margin: 20px 0; line-height: 40px;}
	#concept .whitebox ul li.left {float: none; margin: 20px 0 30px; font-size: 35px;}

	.wrapper .quart{width: 48%; float: left; margin-left: 2%;}
	.wrapper .quart:nth-child(3n+1){clear: both;}

}


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

	h3 {font-size: 24px;}

	#designed {height: 450px;}
	#designed h3 {padding: 20px 30px 0 0; font-size: 20px;}
	#vision {padding: 60px 30px;}
	#vision p {font-size: 20px; line-height: 34px;}

	#wow .photo {height: 600px; background-position: center center}

	#experience {padding: 100px 25px;}

	#start .tagline{text-align: center; padding: 0; width: 90%; right: 5%; bottom: 20px; font-size: 14px;}

	#wow .surtexte{margin-top: 490px;}

	#presentation .photo,
	#presentation .middletext {height: 300px;}
	#presentation .middletext span {font-size: 18px; padding: 20px;}
	#presentation .middletext span strong {font-size: 20px;}

	#concept {height: auto;}
	#concept .whitebox {height: auto; width: 80%; margin: 25px auto;}
	#concept .whitebox ul {margin: 15px;}
	#concept .whitebox ul li {text-align: center; font-size: 24px; margin: 20px 0; line-height: 34px;}
	#concept .whitebox ul li.left {float: none; margin: 20px 0 30px; font-size: 24px;}

}