@import url('reset.css');
@import url('fonts.css');


/* --------------- */
	
/*  GENERAL        */

/* --------------- */


* { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


::-webkit-input-placeholder { font-family: 'Brandon Grotesque Regular Italic', 'sans-serif'; color:rgba(255,255,255,.5); }
::-moz-placeholder { font-family: 'Brandon Grotesque Regular Italic', 'sans-serif'; color:rgba(255,255,255,.5); } /* firefox 19+ */
input:-moz-placeholder { font-family: 'Brandon Grotesque Regular Italic', 'sans-serif'; color:rgba(255,255,255,.5); }
input:-ms-input-placeholder { font-family: Helvetica !important;font-size:15px;font-style:italic; color:rgba(255,255,255,.5); } /* ie */
textarea:-ms-input-placeholder { font-family: Helvetica !important;font-size:15px;font-style:italic; color:rgba(255,255,255,.5); } /* ie */
input:invalid { -moz-box-shadow: none; }
textarea:invalid { -moz-box-shadow: none; }



html{height:100%;width: 100%;-webkit-transform : translateZ(0); }
body {height:100%;width: 100%;overflow: hidden;position: relative;font-family:'Brandon Grotesque Regular', 'Helvetica', 'sans-serif'; font-size: 62.5%; text-align: center; }
section {padding: 130px 0;position: relative;overflow: hidden;}
section::after {content:'';}
h2 { margin-bottom: 14px; font-family:'Brandon Grotesque Medium', 'Helvetica', 'sans-serif'; font-size: 5em; letter-spacing: 3px;}
h4, h5 { font-family:'Brandon Grotesque Medium', 'Helvetica', 'sans-serif'; font-size: 1.8em;}
p {font-size: 1.8em;}
.subtitle { font-family: 'ArnhemPro Blond', 'serif';font-size: 1.8em; color:#ffa800;text-align: center !important; }
a {text-decoration: none;}
svg {position: absolute;opacity: 0;top:-9999px;}
div.transition {width: 100%;height:50px;left:0;z-index:-1;position: absolute;bottom:0;background: url('../img/line-section.svg') center bottom no-repeat;-webkit-background-size: cover;background-size: cover;}
div.transition-yellow {bottom: -1px;background: url('../img/line-section-yellow.svg') center bottom no-repeat;-webkit-background-size: cover;background-size: cover;}
div.transition-white {z-index: 2;bottom: -1px;background: url('../img/line-section-white.svg') center bottom no-repeat;-webkit-background-size: cover;background-size: cover;}
html[data-useragent*='MSIE 10.0'] div.transition {width: 100%;height:50px;left:0;z-index:-1;position: absolute;bottom:0;background: url('../img/line-section.svg') center bottom no-repeat;}
@-moz-document url-prefix() {
	div.transition {width: 100%;height:50px;left:0;z-index:-1;position: absolute;bottom:0;background: url('../img/line-section.svg') center bottom no-repeat;}
}
.iScrollIndicator {
	border:0 !important;
	cursor: pointer;
}
/* --------------- */
	
/*  Loader         */

/* --------------- */

.loader {position: fixed;width: 100%;height: 100%;z-index:2000;background: #fff;}
.loaderBloc {display: block;width: 244px;height: 62px;position: absolute;top:50%;left:50%;margin-top: -50px;margin-left: -122px;}
.loaderBlocContainer {display: inline-block;height: 100%;width: 100%;position: relative;text-align: center;}
.bloc {display: block;position: absolute;width:61px;height: 37.5px;background:url('../img/bloc-loader.svg') center center;-webkit-background-size: 100% 100%;
background-size: 100% 100%;opacity: 0;}
#bloc1 {top:29px;left:0px;}
#bloc2 {top:29px;left:59px;}
#bloc3 {top:29px;left:118px;}
#bloc4 {top:29px;left:177px;}
#bloc5 {top:0;left:177px;}
#bloc6 {top:0;left:118px;}
#bloc7 {top:0;left:59px;}
#bloc8 {top:0;left:0px;}
#bloc1, #bloc2, #bloc7, #bloc8 {
	-webkit-transform: rotate(-35deg);
	-moz-transform: rotate(-35deg);
	-o-transform: rotate(-35deg);
	transform: rotate(-35deg);
	-webkit-transform-origin: -450px 42px;
	-moz-transform-origin: -450px 42px;
	-ms-transform-origin: -450px 42px;
	-o-transform-origin: -450px 42px;
	transform-origin: -450px 42px;
}
#bloc3, #bloc4, #bloc5, #bloc6 {
	-webkit-transform: rotate(35deg);
	-moz-transform: rotate(35deg);
	-o-transform: rotate(35deg);
	transform: rotate(35deg);
	-webkit-transform-origin: 518px 42px;
	-moz-transform-origin: 518px 42px;
	-ms-transform-origin: 518px 42px;
	-o-transform-origin: 518px 42px;
	transform-origin: 518px 42px;
}

#bg-logo {position: relative;top:-65px;height: 110%;width: 0;display: inline-block;background:#5a6771;border-radius:6px;overflow: hidden;}
#logo-loader {width: 90%;height: 100%;margin: 0 auto;background: url('../img/logo-loader.svg') center center no-repeat;-webkit-background-size: 100% 100%;background-size: 100% 100%;}
#logo-copy {width: 10px;height: 10px;position: absolute;right:20px;top:13px;background: url('../img/logo-loader-copy.svg') center center no-repeat;-webkit-background-size: 100% 100%;background-size: 100% 100%;}
#back-logo {position: absolute;opacity: 0;z-index: -1;left: 50%;margin-left: -103px;width: 206px;height: 108px;background: url('../img/logo-loader-back.svg') center center no-repeat;-webkit-background-size: cover;background-size: cover;top: 50%;margin-top: -49px;}
#mes {font-size: 1.8em;color: rgb(172, 171, 171);opacity:0;}

/* --------------- */
	
/*  Home           */

/* --------------- */

#header {width: 100%;position: absolute;top:23%;z-index:200;left: 0;}
#header h1 {width: 100%;height: 73px;top:23%;margin-bottom: 10px;text-indent: -9999px;background: url('../img/logo-bigbloc-nb.svg') center center no-repeat;-webkit-background-size:auto 100%;background-size:auto 100%;}
#header .subtitle {font-family:'Brandon Grotesque Regular', 'Helvetica', 'sans-serif';color:#2c2c2c;font-size: 1.6em;width: 470px;margin: 0 auto;line-height: 1.25;}

#home {background: #fff;width: 100%;height: 100%;z-index:100;padding: 0 !important;-webkit-mask: url(../img/mask-header.svg) top center / cover;}
html[data-useragent*='MSIE 10.0'] #home {width: 6960px;left:50%;margin-left:-3480px;top:0;position: fixed;height: 100%;z-index:100;padding: 0;}
@-moz-document url-prefix() {
	#home {width: 6960px;position:relative;left:50%;margin-left:-3480px;height: 100%;padding: 0;}}
#video {z-index: -1;width: 100vw;margin-left:-50vw;position: absolute;left:50%;top:0;}
#home>div {height: 100%;width: 100vw;margin: 0 auto;text-align: center;}
#logo { display: inline-block;width: 158px;height: 13px;position: absolute;top:6%;left:50%;margin-left:-79px;text-indent: -9999px;background: url('../img/logo-pradier_beton-nb.svg') center center; -webkit-background-size: cover;background-size: cover; }
#discover {pointer-events:auto;display: inline-block;width: 186px;position: absolute;top:80%;left:50%;margin-left:-93px;font-family:'Brandon Grotesque Medium', 'Helvetica', 'sans-serif';color:#ffffff;height: 39px;border-radius: 10px;font-size: 1.8em;border:none;cursor:pointer;line-height: 39px;background: #2c2c2c;-webkit-transition: background .4s ease-out;-o-transition: background .4s ease-out;transition: background .4s ease-out;}
#discover:hover {background: rgba(44,44,44,.7)}
#controller {display: inline-block;overflow: hidden;opacity: 0;-webkit-transform: scale(.5);-ms-transform: scale(.5);-o-transform: scale(.5);transform: scale(.5);position: absolute;top:50%;left:50%;margin-left:-86px;width: 172px;padding:0 27px;height: 172px;border-radius:100%; font-family: 'Brandon Grotesque Bold', Helvetica, sans-serif;line-height: 172px;text-transform: uppercase;color:#ffffff;background: #2c2c2c;}
#prev, #next {pointer-events:auto;color:#ffd600;font-size: 3.1em;float: left;-webkit-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;}
#next {float: right;}
#next:hover, #prev:hover {color:white; -webkit-transform: matrix(1.15,0,0,1.15,0,0) !important;
	-ms-transform: matrix(1.15,0,0,1.15,0,0) !important;
	-o-transform: matrix(1.15,0,0,1.15,0,0) !important;
	transform: matrix(1.15,0,0,1.15,0,0) !important;}
#controller>div:first-child {position: absolute;left: 50%;margin-left: -79px;top: 50%;margin-top: -79px;pointer-events:none;}
#controller div {display: inline-block;line-height: 1;vertical-align: middle;}
#controller>div>p {font-size: 1.8em;position: relative;}
#controller div>p::after {content:'';display: block;position: absolute;background: #ffffff;height: 1px;width: 54px;top:-5px;left:50%;margin-left:-27px;}
#controller .nbr {display: inline-block;overflow: hidden;height: 63px;width: 80px;position: relative;margin-bottom: 10px;}
#controller .nbr p {float: left;width: 50%;font-size: 7em;width: 40px;background:url('../img/bg-nbr.png') repeat-y;height:7000px;}



/* --------------- */
	
/*  Adventage      */

/* --------------- */

#scroller {position: absolute;z-index: 1;width: 100%;-webkit-overflow-scrolling: touch;}
#adventage {position: relative;}
#adventage ul {min-width: 960px;width:70%;display: inline-block;margin: 90px auto 0;text-align: center;}
#adventage li {display: block;width: 20%;float: left;}
#adventage li i {display: block;overflow: hidden;height: 122px;width: 122px;line-height: 110px;margin: 0 auto 15px;border-radius: 100%; border:6px solid #fed002;}
#adventage li i img {display: inline-block;vertical-align: middle;}
#adventage li:nth-child(1) i img {width: 126px;margin-left: -6px;}
#adventage li:nth-child(2) i img {width: 70px;}
#adventage li:nth-child(3) i img {width: 60px;}
#adventage li:nth-child(4) i img {width: 56px;}
#adventage li p {font-size: 2.2em;line-height: 1.3;}


/* --------------- */
	
/*  Usage          */

/* --------------- */

#usage {overflow: hidden;}
#usage>div {height: 400px;max-width:100%;margin: 0 auto;}
#usage>div:first-of-type {margin-top: 100px;}
#usage>div>div {float: left;width: 50%;height: 100%;}
#usage i {display: inline-block;position: relative;width: 62px;height: 62px;line-height: 54px;border-radius:100%;border:4px solid #333333;margin-bottom: 37px;overflow: hidden;}
#usage i img {vertical-align: middle;}
#usage p {width: 67%;margin: 0 auto;line-height: 1.7;text-align: justify;-moz-text-align-last:center;-webkit-text-align-last: center;text-align-last: center; }
#usage p span { color:#ffa800; }
#usage>div>div div.strut { height: 100%;}
#usage>div>div div,
#usage>div>div div.strut { display: inline-block; vertical-align: middle; }


#usage>div:nth-of-type(1) .illustration { background: url('../img/usage-1.jpg') center;-webkit-background-size: cover;background-size: cover; }
#usage>div:nth-of-type(1) i img { width: 61px;margin-left: -2px; }
#usage>div:nth-of-type(2) .illustration { background: url('../img/usage-2.jpg') center;-webkit-background-size: cover;background-size: cover; }
#usage>div:nth-of-type(2) i img { width: 36px;margin-top: -5px;}
#usage>div:nth-of-type(3) .illustration { background: url('../img/usage-3.jpg') center;-webkit-background-size: cover;background-size: cover; }
#usage>div:nth-of-type(3) i img { vertical-align: middle;width: 36px;margin-top: -2px; position: relative;}
#usage>div:nth-of-type(3) i::after {content:'';position: absolute;height: 20px;width: 60px;bottom: -10px;background: #333;left: 0;}
#usage>div:nth-of-type(4) .illustration { background: url('../img/usage-4.jpg') center;-webkit-background-size: cover;background-size: cover; }
#usage>div:nth-of-type(4) i img { width: 66%;margin-top: -5px; }
#usage>div:nth-of-type(4) i::after {content:'';position: absolute;height: 20px;width: 60px;bottom: -8px;background: #333;left: 0;}


/* --------------- */
	
/*  Blog       	   */

/* --------------- */

#blog {	background:#ffd600; }
#blog .subtitle { color:white; }
#discoverBlog {position:relative; z-index: 50;pointer-events:auto;display: inline-block;width: 235px;font-family:'Brandon Grotesque Medium', 'Helvetica', 'sans-serif';color:#ffffff;margin-top:50px; height: 39px;border-radius: 10px;font-size: 1.8em;border:none;cursor:pointer;line-height: 39px;background: #2c2c2c;-webkit-transition: background .4s ease-out;-o-transition: background .4s ease-out;transition: background .4s ease-out;}
#discoverBlog:hover {background: rgba(44,44,44,.7)}
#discoverBlog i {display:inline-block; vertical-align:middle; height:8px; width:10px; margin-top: -3px; margin-right:8px;  background:url('../img/icon-arrow-left.svg') center no-repeat; -webkit-background-size:cover; background-size:cover;  }
.list-article {margin:90px auto 0; min-width:990px; width:75%; position: relative; z-index: 50; }
#blog article { display:inline-block; position:relative; padding-bottom:20px; max-width:360px; width:30%; height:330px; background:#fff;}
#blog .list-article article:first-of-type { float:left; }
#blog .list-article article:last-of-type { float:right; }
#blog .article-title {display:inline-block; width:100%; height: 150px; line-height: 150px; }
#blog article h3 { display:inline-block; vertical-align:middle; padding:0 25px;font-family:'Brandon Grotesque Medium', 'Helvetica', 'sans-serif'; font-size:1.8em; line-height:1.7;  }
#blog .article-img { height:132px; width:100%; overflow:hidden; background-position:center; -webkit-background-size:cover; background-size:cover;  }
#blog article a { width:100%; position:absolute; left:0; bottom:25px; text-align:center; font-family:'Brandon Grotesque Medium', 'Helvetica', 'sans-serif'; font-size:1.8em; color:#ffd600;  }
#blog article a i { display:inline-block; background:url('../img/icon-arrow-left-yellow.svg') center no-repeat; width:10px; height:8px; vertical-align:middle; margin-top:-3px; margin-right:7px; -webkit-background-size:cover; background-size:cover;   }


/* --------------- */
	
/*  Product        */

/* --------------- */

#product>ul {min-width: 960px;width:75%;margin: 115px auto 0;overflow: hidden;clear: both;text-align: center;}
#product>ul>li {display: inline-block;width: 300px;float:right;text-align: left;}
#product>ul>li:first-of-type {margin-left: 0;float: left;}
#product>ul>li:last-of-type {float: none;}
#product>ul li p.legend {margin-top: 9px;font-size: 1.4em;}
#product .header {height:66px;margin-bottom: 66px;border-bottom:2px solid #ffa800;}
#product>ul li li { height: 127px; }
#product>ul li li .info-product {height: 100%;float: left;width: 100px;}
#product>ul li li .info-product h5 {margin-bottom: 4px;}
#product>ul li li .info-product span {display: block;font-size: 1.4em;line-height: 1.8;}
#product>ul li:nth-of-type(1) ul {background: url('../img/product_size-40.jpg') 95px top no-repeat;}
#product>ul li:nth-of-type(2) ul {background: url('../img/product_size-80.jpg') 95px top no-repeat;}
#product>ul li:nth-of-type(3) ul {background: url('../img/product_size-60.jpg') 95px top no-repeat;}
#product .colors {width: 960px;margin: 70px auto -25px;text-align: left;overflow: hidden;}
#product .colors p {float: left;line-height: 82px;}
#product .colors ul {float: right;}
#product .colors ul li {float: left;margin: 0 0 0 85px;}

/* --------------- */
	
/*  footer         */

/* --------------- */

footer {overflow: hidden;background: url('../img/bg-footer.jpg');}
.footer-wrap {width: 1200px;margin: 0 auto;text-align: left;padding-top:67px;}
.footer-wrap div {float: left;}
.footer-wrap>div:first-child a:first-child {display: block;width: 122px;height: 52px;margin-bottom: 43px;background: url('../img/logo-bigbloc.svg') center center; -webkit-background-size: cover;background-size: cover;text-indent: -9999px;}
.footer-wrap>div:first-child a:last-child {display: block;width: 123px;height: 22px;background: url('../img/logo-pradier_beton.svg') center center no-repeat; -webkit-background-size: 100%;background-size: 100%;text-indent: -9999px;}
form {width: 385px;float: left;margin: 0 120px;}
form h3 {font-family:'Brandon Grotesque Medium', 'Helvetica', 'sans-serif';font-size: 2.5em;color:#ffd401;margin-bottom: 5px;}
form input {width: 47.5%;height: 31px;border-radius:0;padding: 0;margin: 0 4% 0 0;line-height: 31px;color:#fff;font-family: 'Brandon Grotesque Regular', 'sans-serif';outline:none;font-size: 1.8em;border:none;border-bottom: 1px solid #444444;background: none;}
#email-form {margin-right: 0;}
form textarea {height: 94px;overflow: auto;width: 100%;margin: 22px 0 30px;color:#fff;font-family: 'Brandon Grotesque Regular', 'sans-serif';font-size: 1.8em;line-height: 1.7;border:none;background: url('../img/bg-textarea.png') transparent;outline:none;resize:none;}
form button {padding:0 20px 0 37px;outline:none;font-family:'Brandon Grotesque Medium', 'Helvetica', 'sans-serif';color:#2c2c2c;height: 39px;border-radius: 10px;font-size: 1.8em;border:none;cursor:pointer;line-height: 39px;background: url('../img/icon-arrow.svg') 15px center no-repeat  #ffd401;-webkit-background-size: 11px;background-size: 11px;}
#message {display:none;color: rgb(42, 87, 13);padding-bottom: 27px;font-size: 1.6em;}
#phone {display: none;}
.contact-info {font-size: 1.6em;line-height: 1.9;color:#ffffff;overflow: hidden;width: 450px;}
.style-rgpd {border-top: 1px solid #ffd401;margin-top:10px;font-size: 1.6em;line-height: 1.9;color:#ffffff;overflow: hidden;width: 450px;}
.style-rgpd a {color:#ffffff;}
.style-rgpd a:hover {color:#ffd401;}
.contact-info div {width: 210px;border-bottom:1px solid #ffd401;float: right;padding-bottom: 30px;margin-bottom: 30px;margin-left: 30px;}
.contact-info div:nth-child(even) {margin-left: 0;}
.contact-info div a,
.contact-info div span {color:#fff;display: block;padding-left:21px;}
.contact-info div span.phone {background: url('../img/icon-phone.svg') -4px 3px no-repeat;-webkit-background-size: auto 21px;background-size: auto 21px;}
.contact-info div span.fax {background: url('../img/icon-fax.svg') -1px 4px no-repeat;-webkit-background-size: auto 18px;background-size: auto 18px;}
.contact-info div:nth-child(3) {border:none;}
.contact-info div:last-child {border-bottom: none;position: relative;}
.contact-info div:last-child::after {content:'';display: block;height: 1px;width: 50%;position: absolute;bottom:-28px;left:0;background: #ffd401;}
.contact-info div:last-child a {background: url('../img/icon-mail.svg') 0 center no-repeat;-webkit-background-size: 15px auto;background-size: 15px auto;}
.contact-info div:last-child a:last-child {background: url('../img/icon-home.svg') 0px center no-repeat;-webkit-background-size: auto 13px;background-size: auto 13px;}
.contact-info div a:hover {color:#ffd401;}

@media screen and (max-width: 1200px) {
	footer .footer-wrap {width: 100%;}
	footer .footer-wrap>div:first-child {display: none;}
	footer form {width: 385px;float: left;margin: 0 80px 0 40px;}
}