/*
 * @autor : dynamic creative
 * @date : 2016
 */

/* ---------------------------- */
/*	   Mise en page générale	*/
/* ---------------------------- */

section { position:relative; }
.row { margin-left: -10px;  margin-right: -10px; }
.container {position: relative; margin: 0 auto; max-width: 1280px; width:100%; text-align:center; overflow: hidden;}

.zindex {z-index: 20000;}


.bebas {font-family: 'bebas_neueregular', sans-serif;}
.proxima-light {font-family: 'proxima_nova_light', sans-serif;}
.proxima-med {font-family: 'proxima_nova_regular', sans-serif;}
.proxima-semibold {font-family: 'proxima_nova_semibold', sans-serif;}
.proxima-extrabold {font-family: 'proxima_nova_extrabold', sans-serif;}
.proxima-extrabold span {letter-spacing: -0.1em}

/* ------------ HEADER ---------------- */
#global > header {position:relative; text-align: center; height: 120px; padding: 20px; background: #fff; z-index: 5000; overflow: hidden;}
#global > header > p, #global > header > h1 {text-transform: uppercase;}
#global > header > p {font-size: 30px; line-height: 20px;}
#global > header > h1 {font-size: 60px;}

.nav {position: absolute; height: 40px; top: 20px; right: 20px;}
.nav li {display: inline-block; margin-left: 10px; vertical-align: middle;}
.nav a {display:block; height:40px;  line-height:40px; font-size: 16px; text-transform: uppercase; }
.nav a:hover {color: #1867a2;}
.nav i {font-size: 40px; line-height: 40px;}


/* ------------ Section HOME ---------------- */
#section-home {position:relative; background: url(../img/bg-home.jpg) no-repeat center center; background-size: cover; text-align: center; padding: 17.5% 0%;}
#section-home h2 {font-size: 100px; text-transform: uppercase; line-height: 90px;}
#section-home div p {font-size: 30px; line-height: 30px; text-transform: uppercase;}

.container2 { position: relative; margin: 0 auto; max-width: 1280px; width:100%; min-height:290px; text-align:center; padding-left: 10px; padding-right: 10px; overflow: hidden;}

#txt-01 {position: absolute; top: 0%; left: 15%; text-align: right;}
#txt-02 {position: absolute; top: 50%; left: 59%; text-align: left; color: #1867a2;}

#home-img {position: absolute; top: 20%; left: 50%; margin-left:-80px; max-width: 160px; width:100%; height: 160px;}

#home-img img {position: absolute; top:0px; left: 0px;}
#section-home > p {position:absolute; bottom:20px; left:20px; font-size: 14px; color:#605f5f; text-align: left;}

.icon-scroll {font-size:80px; color:#fff;}
.btscroll {position:absolute; left:0; width:100%; height: 80px; text-align:center; animation: bound .5s ease-in-out infinite alternate;}
@keyframes bound {
  from{bottom:50px;}
  to{bottom:60px;}
}
.icon-scroll:visited {color:#fff;}

/* ------------ Navigation ---------------- */
nav {position:relative; width:100%; height:80px; padding: 20px; background:#fff;}
#nav-left {float: left;}
#nav-left h3 {text-transform: uppercase; font-size: 30px; line-height: 28px; transition: all .5s;}
#nav-left p {font-size: 16px; line-height: 16px; transition: all .5s;}

#nav-right {float: right;}
nav li:nth-child(1), nav li:nth-child(2), nav li:nth-child(3) {border-right: 1px solid #f2f2f2; padding: 0px 20px; margin-left: 0px !important;}

nav li:nth-child(5) a {display: inline-block;}
nav li:nth-child(5) a:first-child {margin-right: 15px;}
/*MENU*/
.btresp {display:none; position: absolute; right:10px; top:20px; width:40px;height:40px;padding:8px 5px;cursor: pointer; z-index: 16000;}
.lines { display: inline-block; width: 30px; height: 6px; background-color: #263C4A; border-radius: 2px; transition: all 0.3s ease 0s; position: relative; }
.lines::before, .lines::after { display: inline-block; width: 30px; height: 6px; background-color: #263C4A; border-radius: 2px; transition: all 0.3s ease 0s; position: absolute; left: 0px; content: ""; transform-origin: 15px center 0px;}
.lines::before { top: 10px; }
.lines::after { top: -10px; }
.sb-active-head .lines, .sb-active-menu .lines { background: transparent; }
.sb-active-head .lines:before, .sb-active-head .lines:after, .sb-active-menu .lines:before, .sb-active-menu .lines:after {-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;top: 0;width: 30px;}
.sb-active-head .lines:before , .sb-active-menu .lines:before {-webkit-transform: rotate3d(0, 0, 1, 45deg);transform: rotate3d(0, 0, 1, 45deg);}
.sb-active-head .lines:after, .sb-active-menu .lines:after {-webkit-transform: rotate3d(0, 0, 1, -45deg);transform: rotate3d(0, 0, 1, -45deg);}

.site-cache {display: none;}
.with--sidebar .site-cache { position:fixed; display:block; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.6); z-index: 10000;}


/* ------------ Section HEADER ---------------- */
section header {position:relative; background-color: #263c4a; height: 140px; text-align: center;}
section header h4 {font-family: 'bebas_neueregular', sans-serif; font-size:60px; color: #fff; line-height: 120px;}

section header:before, section header:after {box-sizing: border-box; content: " "; position: absolute; top:0; display: block; width: 50%; height: 100%; border-bottom: 20px solid #fff;}
section header:before {left: 0; border-right: 20px solid transparent; border-left: 0;}
section header:after {right: 0; border-left: 20px solid transparent; border-right: 0;}

section .container {padding: 30px 0px;}


/* ------------ Section POSITIONNEMENT ---------------- */
#section-positionnement header {background: url(../img/bg-header.png) no-repeat center center #263c4a;}
#section-positionnement header:before, #section-positionnement header:after { border-bottom: 20px solid #f2f2f2;}
#section-positionnement {background:#f2f2f2;}

#section-positionnement h5 {font-size: 40px; text-transform: uppercase; padding-bottom: 15px;}
#section-positionnement .container > p {font-size: 20px;}
#section-positionnement .container > p span {display: block;}

.visuel {position:relative; max-width: 960px; height:230px; margin: 50px auto 0 auto;}
.visuel div {float: left; vertical-align: top;}

.visuel div:nth-child(1), .visuel div:nth-child(3) {max-width: calc(50% - 160px); width: 100%;}
.visuel div:nth-child(2) {max-width: 320px; width: 100%;}

.visuel p {font-size: 40px; line-height: 30px;}
.visuel span {display: block; font-size: 80px; line-height: 65px;}
.visuel .left {text-align: right; padding-top: 5px;}
.visuel .right {text-align: left; color: #1867a2; padding-top: 30px;}


.list > div {float: left; width: 50%; margin-top: 20px;}
.list > div > div {margin-top: 20px;}
.list .left {text-align: right; padding-right: 3%;}
.list .right {text-align: left; padding-left: 3%; color: #1867a2;}

.list p {font-size: 30px; display: inline-block;}
.list span {display: block; font-size: 60px; text-transform: uppercase; line-height: 40px;}

.list i {font-size: 80px; margin: 0px 20px;}

.mention p {font-size: 14px; color: #888888; text-align: left; margin: 20px 0px 60px 14%;}


/* ------------ Section MARQUES ---------------- */
#section-marques .container {position:relative; margin: 40px auto; min-height:645px; background:url(../img/bg-marques-01.png) no-repeat 7% 3%, url(../img/bg-marques-02.png) no-repeat 90% 3%}
#section-marques h4 > span {font-family: 'Open Sans', sans-serif !important; font-weight: 300 !important;}

#section-marques li {font-size: 30px; color: #263c4a;}
#section-marques li {position: absolute;}

#section-marques .list01 li:nth-child(1) {top:10%; left: 8%;}
#section-marques .list01 li:nth-child(2) {top:23%; right: 3%;}
#section-marques .list01 li:nth-child(3) {top:36.7%; left: 2%;}
#section-marques .list01 li:nth-child(4) {top:20%; left:29%;}
#section-marques .list01 li:nth-child(5) {top:66%; left:4%;}
#section-marques .list01 li:nth-child(6) {top:74.4%; left:26.4%;}
#section-marques .list01 li:nth-child(7) {top:72.5%; right:1%;}
#section-marques .list01 li:nth-child(8) {top:43.1%; left:0px; right: 0px;}


#section-marques .list02 li:nth-child(1) {top:12.4%; left: 58.5%;}
#section-marques .list02 li:nth-child(2) {top:30.6%; right: 34%;}
#section-marques .list02 li:nth-child(3) {top:32.4%; left:25%;}
#section-marques .list02 li:nth-child(4) {top:37.2%; right: 3%;}
#section-marques .list02 li:nth-child(5) {top:48.3%; left: 13.5%;}
#section-marques .list02 li:nth-child(6) {top:58.9%; left:23.4%;}
#section-marques .list02 li:nth-child(7) {top:61.2%; left:53.9%;}
#section-marques .list02 li:nth-child(8) {top:53.9%; right:14.9%;}
#section-marques .list02 li:nth-child(9) {top:85.2%; left:12.5%;}
#section-marques .list02 li:nth-child(10) {top:85.1%; left:62.1%;}

#marques-tablette, #marques-mobile {display: none;}

/* ------------ Section REFERENCES ---------------- */
#section-references .container {padding-bottom: 40px;}

#section-references ul { margin:0 auto; max-width: 750px;}
#section-references li {display: inline-block; border: 1px solid #d6d6d6; margin: 10px;}
#section-references li:hover {opacity: 0.9;}


/* ------------ Section CONTACT ---------------- */
#section-contact .container {padding-bottom: 40px;}

#section-contact header:before, #section-contact header:after { border-bottom: 20px solid #f2f2f2;}
#section-contact {background:#f2f2f2;}
.bloc-ct {float: left; width: 50%; text-align: left; padding: 0px 30px;}

.bloc-ct p, .bloc-ct h5, .bloc-ct a {font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 400;}
.semi {font-weight: 600 !important;}

.bloc-ct .picto {font-size: 20px; margin-right: 20px;}
.bloc-ct .ctc {padding-top: 30px;}
.bloc-ct li {line-height: 20px; margin-top: 20px;}
.bloc-ct li p, .bloc-ct li a {display: inline-block; vertical-align: top;}
.bloc-ct li:nth-child(2) a, .bloc-ct li:nth-child(3) p {font-size: 16px;}
.bloc-ct li:nth-child(3) p {line-height: 25px;}


/* ---------------------------- */
/*	    Element Formulaire  	*/
/* ---------------------------- */

/*BOUTON*/
.bouton { text-align:center;  color:#ffffff; position:relative; background:#065a90; width:200px; color:#fff; font-size:14px; font-weight:bold; margin-top: 15px; }
a.bouton { color:#fff; display:inline-block; }
.bt_1 { position:relative; color:#fff; line-height:50px; height:50px; border-radius: 4px; font-weight:normal; font-size:20px;}

.bouton:hover { opacity:0.9; }
button > span { display:none; }
button { border:none; cursor:pointer; margin:0;  text-transform: uppercase;}
button:hover, button:focus, button:active { opacity:0.9; }


input[type=text], input[type=email], input[type=password], input[type=tel], select, textarea { width:100%; border:1px solid #d6d6d6; height:40px; margin-bottom:10px; background:#ffffff; border-radius:3px; color:#263c4a; font-size:16px; padding:5px 10px;
   font-family: 'Open Sans', sans-serif; font-weight: normal;
}
textarea { height:200px; } 


.form-control {display:block; }
.form-group {position:relative; }

.form-inline {margin-right:-10px;margin-left:-10px;}
.form-inline .form-group {position:relative; float:left; padding:0 10px; margin-top:0; width:50%;}
.form-inline .form-group .form-inline .form-group:first-child {margin-left:0; }
.form-inline .form-group .form-inline .form-group {margin-left:10px; }
.form-inline .form-group.esp_1 {margin-left:80px; }

.col_f1 {width:50%; }
.form-inline .form-group.col_f1:first-child {padding:0 10px 0 0; }
.form-inline .form-group.col_f1 {margin-left:0; padding:0 0 0 10px; }

.ast { position:relative; /*margin-top:10px;*/ font-size:12px; text-align:right; color:#b8b8b8;}


/*ERROR*/
#errors { margin-top:10px; text-align:center; color:red; }
#errors.valid { color:green; }

#error-message h2 { font-size: 26px; font-weight: normal; text-transform:uppercase; }
input.error, select.error, textarea.error { /*border: 2px solid red;*/ background:#eb4c27;color:#fff;border:none;}
label.error,
#form_home label.error,
#form_mobile label.error { display: none !important;}
input.error[type="radio"] {
    box-shadow: 0 0 5px #ff0000;
}
/**********/


/* ------------ FOOTER ---------------- */
footer {background:#263c4a;}
footer h3 {text-transform: uppercase; font-size: 40px; line-height: 35px;}
footer .container {text-align: left; padding: 40px 0px;}

footer ul, footer .container div {display: inline-block; vertical-align: top;}
footer a, footer p, footer h3, footer a:visited {color: #7c8b95;}

footer ul {width: 320px;}
footer ul p {font-size: 20px; text-transform: uppercase;}

.f-right {float: right; text-align: right;}
.f-right p {font-size: 20px; margin-bottom: 15px;}
.f-right a {font-size: 16px;}



/* ------------ POPUP ---------------- */
.white-popup { position: relative; background: #FFF; padding: 20px; width:auto; max-width: 1200px; margin: 20px auto; }
.white-popup h2 {margin-bottom:20px;}
.white-popup h3 {margin-bottom:10px;color:#FC7261;}
.white-popup h4 {margin-bottom:20px;font-style: italic;}
.white-popup p, .white-popup ul {margin:10px 0 20px 0;}
.white-popup ul li {position:relative; margin-bottom: 2px;padding-left:15px;}
.white-popup a {text-decoration: underline;}