/*
 * Script: style.css
 * Author: Charles Lauzon
 * Date:   1 Janvier 2021
 */
 
/* Reset CSS - Default Value */
*{ margin:0; padding:0 }
html, body, div, form, fieldset, ul, ol, table, p, input, textarea, select{ font:normal normal normal 100%/120% Myriad Pro, sans-serif; }
html, body, div{ width:100%; height:100%; color:#000 }
div{ box-sizing:border-box }
img{ border:0; vertical-align:bottom }
a{ color:#fff; text-decoration:none; cursor:pointer }
h1, h2{ line-height:100%; padding:10px; box-sizing:border-box }
h1{ font-size:52px }
h2{ font-size:36px }
h1, h2, h3{ /*text-shadow:4px 4px 10px rgba(150, 150, 150, 1)*/ }
td{ padding:10px }
label{ cursor:pointer }
body{ height:100%; background:#fff }
@font-face{ font-family:'Droid Sans'; src:url('fonts/droidsans-webfont.eot'); src:url('fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/droidsans-webfont.woff') format('woff'), url('fonts/droidsans-webfont.ttf') format('truetype'), url('fonts/droidsans-webfont.svg#droid_sansregular') format('svg'); font-weight:normal; font-style:normal }
@font-face{ font-family:'KIONA'; src:url('fonts/Kiona-Regular.ttf') }
@font-face{ font-family:'Anton'; src:url('fonts/Anton-Regular.ttf') }
/* Header */
#slideshowHeader{ position:relative; width:100%; height:898px; background-image:url('/assets/img/slideshow/BioTechLube Excavator Operator.jpg'); background-size:cover; background-position:center; transition:1s opacity }
header{ min-width:auto; width:75%; height:100%; margin:0 auto; overflow:hidden; box-sizing:border-box }
#slogan_lang{ position:relative; float:left; width:100%; height:auto; line-height:42px; background:#0003; padding:0 20px; box-sizing:border-box; border-bottom:1px solid #fff; z-index:5 }
#slogan{ float:left; width:35%; color:#fff; box-sizing:border-box }
#slogan span{ color:#0f0 }
#email{ float:left; width:30%; color:#fff; box-sizing:border-box }
#followus{ float:left; width:25%; color:#fff; box-sizing:border-box }
#followus i{ width:16px; padding:4px; margin:2px; text-align:center; border:1px solid #fff; border-radius:50px }
#lang{ float:right; width:10%; color:#fff; text-align:right }
/* Logo Menu */
#logo_menu{ height:auto; position:relative; float:left; z-index:6; padding:10px 20px 20px; border-radius:0 0 10px 10px; background:#0003; box-sizing:border-box }
#logo_menu.stuck{ position:fixed; width:75%; background:#0009 }
#logo{ position:relative; float:left; width:20%; height:71px; background-image:url('/assets/img/biotechlub_logo5.png'); background-size:contain; background-repeat:no-repeat; z-index:2 }
#logo a{ display:inline-block; width:100%; height:100% }
#menu{ float:left; width:64%; height:73px }
#menu ul{ list-style:none }
#menu li{ display:inline; float:left; margin:0 2% 10px; font-size:16px; color:#fff }
#menu a{ color:#fff }
#menu li:nth-of-type(3) ul{ display:none; position:absolute; width:35%; background:#fffffff2; border-radius:0 0 10px 10px; z-index:3 }
#menu li:nth-of-type(3) li{ float:left; width:33.333%; margin:0; padding:5px; box-sizing:border-box }
#menu li:nth-of-type(3) li:hover{ background:#0f0 }
#menu li:nth-of-type(3) a{ color:#000 }
#menu li:nth-of-type(3):hover ul{ display:block }
#menu a.mActive{ color:#000 }
#menuMobile, #nav, #contact_mobile, #soumission_mobile{ display:none }
#search{ position:relative; float:left; width:5%; height:73px; color:#fff; font-size:16px; display:flex; justify-content:left; align-items:flex-start }
#search span{ padding-top:4px }
#contact{ position:relative; float:left; width:9.5%; height:73px; margin-right:0.5%; display:flex; justify-content:center; align-items:center; color:#fff; background:#2e715f; font-size:18px; font-family:Anton; z-index:2 }
#soumission{ position:relative; float:left; width:11%; height:73px; display:flex; justify-content:center; align-items:flex-end;  box-sizing:border-box }
#soumission div{ width:auto; height:auto; padding:0 8%; line-height:34px; text-align:center; color:#fff; background:#88845f; border:1px solid #fff; border-radius:13px; font-size:16px; z-index:2; box-sizing:border-box }
/* Nav */
#nav{ display:none; position:fixed; width:100%; background-color:#fff; text-align:center; padding-top:96px; z-index:4 }
#nav li{ list-style:none; font-size:16px; line-height:24px; color:#2e715f }
#nav a{ color:#2e715f; border-bottom:2px solid #3cc142 }
#nav li:nth-of-type(3) span{ border-bottom:2px solid #3cc142 }
#nav li:nth-of-type(3) ul{ display:none; border-top:2px solid #3cc142; border-bottom:2px solid #3cc142; overflow:hidden }
#nav li:nth-of-type(3) li{ float:left; width:33.333%; margin:0; padding:2px; box-sizing:border-box }
#nav li:nth-of-type(3):hover ul{ display:block }
#nav a.nActive{ color:#000 }
/* Animation Slide Down */
.slidedown{ -webkit-transition:-webkit-transform .3s ease; -moz-transition:-moz-transform .3s ease; -ms-transition:-ms-transform .3s ease; transition:transform .3s ease }
.slidedown.opened{ -webkit-transform:translate(0, 0%); -moz-transform:translate(0, 0%); -ms-transform:translate(0, 0%); transform:translate(0, 0%) }
.slidedown.closed{ -webkit-transform:translate(0, -100%); -moz-transform:translate(0, -100%); -ms-transform:translate(0, -100%); transform:translate(0, -100%) }
/* SlideShow Header */
#slideshowContent{ position:relative; height:auto; display:block; overflow:hidden; padding-top:50px }
#slideshowContent figure{ position:absolute; width:100%; height:auto; opacity:0 }
#slideshowContent figure.show{ position:static; opacity:1; transition:1s opacity }
#slideshowContent figure > div:first-child{ float:right; width:75%; text-align:center }
#slideshowContent figure img{ width:100%; height:100%; object-fit:cover }
#slideshowContent figure > div:last-child{ float:left; width:100%; display:flex; align-items:center; justify-content:center }
#slideshowContent figure p{ font-size:52px; line-height:100%; float:none; padding:20px; color:#fff; text-align:left; /*background:#0003;*/ border-radius:10px; display:inline-block; max-width:100%; text-shadow:0px 2px 5px rgb(0 0 0 / 80%) }
#ss2 div p{ text-shadow:0px 2px 5px rgb(0 0 0) }
/* SlideShowButton */
#ssbi{ position:absolute; top:16.6%; right:14.5%; width:auto; height:auto; text-align:center }
#ssb{ /*position:absolute; bottom:9%; right:18.15%;*/ width:auto; height:36px; font-size:14px }
#ssb span{ font-family:"Font Awesome 5 Free"; float:left; display:inline-block; width:16px; height:16px; text-align:center; color:#fff; line-height:16px; padding:10px; border-radius:50%; opacity:0.7; font-weight:bold; background:#0003 }
#ssb span:hover{ cursor:pointer; opacity:1 }
.next:before{ content:"\f054" }
.prev:before{ content:"\f053" }
.play:before{ content:"\f04b" }
.pause:before{ content:"\f04c" }
/* SlideShowItem */
#ssi{ /*position:absolute; bottom:6%; right:18%;*/ width:auto; height:26px; font-size:18px; z-index:2 }
#ssi span{ font-family:"Font Awesome 5 Free"; color:#fff; display:inline-block }
#ssi span:hover{ cursor:pointer; opacity:1 }
.circle:before{ content:"\f111" }
.circleFull:before{ content:"\f192" }
#dAccesRapide{ position:absolute; bottom:10%; left:12.5%; width:auto; height:auto; padding:10px 40px; font-size:30px; display:flex; justify-content:center; align-items:center; color:#fff; background:#88845f; border:1px solid #fff; border-radius:20px }
#dAccesRapide a{ color:#fff }
/* Section Contain */
section{ height:auto !important; margin:0 auto }
/* Array Data for PHP/Javascript System Message/Error */
#dData{ position:fixed; top:0; left:0; width:100%; height:auto; padding:10px 2%; text-align:center; color:#000; cursor:default; z-index:6; display:none }
#dData p{ margin:0 10px }
#dData.anim_hide{ -moz-animation:anim_hide 5s ease-in 5s forwards; -webkit-animation:anim_hide 5s ease-in 5s forwards; -o-animation:anim_hide 5s ease-in 5s forwards; animation:anim_hide 5s ease-in 5s forwards; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; display:block }
.bgGreen{ background:rgba(120,188,232,0.9) }
.bgRed{ background:rgba(255,0,0,0.9) }
@keyframes anim_hide{ to{ top:-1000px } }
@-webkit-keyframes anim_hide{ to{ top:-1000px } }
/* Description */
#pDescription{ width:75%; margin:0 auto; padding:0 20px; text-align:justify; box-sizing:border-box }
/* Eprouvette */
#dEprouvette{ height:784px; background:url('/assets/img/BioTech-Lube Biodegradable GEAR Lubricant.jpg'); background-blend-mode:lighten; background-color:rgba(255,255,255,0.7); border-top:30px solid #fff; background-size:cover; background-repeat:no-repeat; background-position:center }
#dEprouvette > div{ display:flex; width:100%; max-width:1440px; margin:0 auto }
#imgEprouvette{ float:left; border:1px solid #ccc; margin:2.084% 7% 2.084% 0; box-shadow:-2px -2px 5px #ccc, 2px 2px 5px #ccc; width:auto; height:auto; max-width:673px; max-height:673px }
#dEprouvette span:nth-of-type(1){ display:block; margin-top:9.723%; color:#2d715e; font-size:36px; line-height:100% }
#dEprouvette span:nth-of-type(2){ display:block; margin-top:20px; text-align:justify }
#dEprouvette span:nth-of-type(3){ display:block; margin-top:20px; text-align:justify }
#dEprouvette span:nth-of-type(4){ width:auto; height:50px; padding:5px 20px; font-size:24px; display:inline-flex; justify-content:center; align-items:center; color:#fff; background:#88845f; border:1px solid #fff; border-radius:30px; z-index:2; margin-top:80px }
/* Offres */
#dOffres{ height:340px; background:url('/assets/img/Losanges2.png'); background-size:cover; background-repeat:no-repeat; background-position:center; overflow:hidden }
#dOffres > div:nth-of-type(1){ width:auto; height:auto; border-left:12px solid #998878; color:#2d715e; font-size:42px; font-weight:bold; padding:10px 0 10px 15px; box-sizing:border-box; margin:50px 0 0 20% }
#dOffres > div:nth-of-type(2){ height:auto; text-align:center }
#dOffres > div:nth-of-type(2) > div{ display:inline-block; width:auto; height:auto; text-align:left; color:#3cc142; font-size:52px; padding-top:40px; font-weight:bold }
/* SlideShow Categorie */
#slideshowCategorie{ position:relative; height:384px; display:block; background-image:url(/assets/img/slideshow/slideshow1.jpg); background-size:cover; background-position:center; transition:1s opacity; overflow:hidden }
#slideshowCategorie figure{ position:absolute; width:100%; height:100%; opacity:0; transition:1s opacity }
#slideshowCategorie figure.show{ position:static; opacity:1; transition:1s opacity }
#slideshowCategorie figure > div:first-child{ float:right; width:75%; text-align:center }
#slideshowCategorie figure img{ width:100%; height:100%; object-fit:cover }
#slideshowCategorie figure > div:last-child{ float:left; width:100%; display:flex; align-items:flex-end; justify-content:center }
#slideshowCategorie figure p{ font-size:52px; float:none; padding:10px; margin-bottom:50px; color:#fff; text-align:left; display:inline-block; max-width:100%; background:none; font-weight:bold; text-shadow:0px 2px 5px rgb(0 0 0 / 80%) }
/* SlideShowButton */
#ssbC{ position:absolute; bottom:6%; right:1%; width:auto; height:36px }
#ssbC span{ font-family:"Font Awesome 5 Free"; float:left; display:inline-block; width:16px; height:16px; text-align:center; color:#fff; line-height:16px; padding:10px; border-radius:50%; opacity:0.7; font-weight:bold }
#ssbC span:hover{ cursor:pointer; opacity:1 }
.next:before{ content:"\f054" }
.prev:before{ content:"\f053" }
.play:before{ content:"\f04b" }
.pause:before{ content:"\f04c" }
/* SlideShowItem */
#ssiC{ position:absolute; bottom:3%; right:1%; width:108px; height:16px; font-size:20px; text-align:center }
#ssiC span{ font-family:"Font Awesome 5 Free"; color:#fff; display:inline-block }
#ssiC span:hover{ cursor:pointer; opacity:1 }
.circle:before{ content:"\f111" }
.circleFull:before{ content:"\f192" }
/* Services */
#dServices{ position:relative; padding-bottom:50px }
#dServices:before{ content:""; position:absolute; bottom:0; left:0; width:100%; height:300px; background:url('/assets/img/Losanges2.png'); background-size:cover; background-repeat:no-repeat; background-position:top center; z-index:1 }
#dServices > div{ position:relative; top:-40px; background:#fff; width:75%; margin:0 auto; overflow:hidden }
#dServices > div div{ float:left; display:flex; position:relative; width:22%; margin:1.5% 1.5% 0; border-radius:0 0 10px 10px; background-position:center; background-size:cover; background-repeat:no-repeat; z-index:2 }
#dServices > div div:before{ content:""; display:block; margin-top:100% }
#dServices > div span{ position:absolute; left:0; bottom:0; width:100%; height:48px; line-height:48px; font-size:32px; font-family:Anton; color:#fff; background:linear-gradient(0.25turn, rgb(51 80 84 / 99%), rgb(51 80 84 / 60%)); padding-left:5px; border-top:1px solid #fff; border-radius:0 0 10px 10px; box-sizing:border-box }
/*#dServices > div a:last-child{ display:none }*/
/* Eolienne */
#dEolienne{ padding-bottom:130px; background:url('/assets/img/Losanges2.png'); background-size:cover; background-repeat:no-repeat; background-position:top center }
#dEolienne > div{ min-width:auto; width:1198px; height:173px; margin:0 auto; box-sizing:border-box }
#dEolienne > div > div{ display:flex; position:relative; border:2px solid #2c5477; border-radius:0 0 20px 20px; box-sizing:border-box }
#dEolienne > div > div div{ position:relative; background-repeat:no-repeat; background-size:contain; box-sizing:border-box }
#dEolienne > div > div div:first-child{ float:left; width:597px; background-image:url(/assets/img/eolienne_left.jpg); border-right:1px solid #fff; border-radius:0 0 0 16px }
#dEolienne > div > div div:last-child{ display:flex; flex:1; float:right; width:100%; background-image:url(/assets/img/eolienne_right.jpg); border-left:1px solid #fff;     border-radius:0 0 16px 0 }
#dEolienne > div > div span{ position:absolute; width:auto; font-size:28px; line-height:40px }
#dEolienne > div > div div:first-child span{ top:10px; left:1%; color:#294457 }
#dEolienne > div > div div:last-child span{ top:58px; left:1.5%; color:#fff }
#dEolienneM{ display:none }
/* Votre Marque & Provenance */
#dVotreMarqueProvenance{ position:relative; height:898px; background:url('/assets/img/BioTech Superior BioDegradable Lubricants Droplet.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center }
/*#dVotreMarqueProvenance > .contentVMP:nth-of-type(1){ position:absolute; top:0 }*/
#dVotreMarqueProvenance > .contentVMP{ display:none }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(1){ position:relative; float:left; width:50%; text-align:center; display:flex; justify-content:center; align-items:center; box-sizing:border-box }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(1) img{ width:100%; height:auto; max-width:881px; max-height:592px; opacity:0; transition:opacity 1s ease-in-out }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(1) img.show{ opacity:1; animation:animate 1.5s linear; }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2){ float:left; width:50% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1){ height:50%; overflow:hidden; padding:4.256% 0; box-sizing:border-box }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1){ position:relative; float:left; width:70%; box-sizing:border-box }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) p{ color:#327a64; font-size:52px; text-align:right; font-weight:bold; padding-right:3.04% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) img{ position:absolute; bottom:0; left:6px; width:154px; height:259px }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2){ float:right; width:30%; border-left:2px solid red; box-sizing:border-box; padding:2% 0 2% 20px }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) img{ height:32% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) img:nth-of-type(2){padding:2% 0 }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(2){ width:100%; height:auto; padding:30px 80px 0 20px; box-sizing:border-box }
#dVotreMarqueProvenance > #dSlideProvenance > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) p{ color:#f00 }
#dVotreMarqueProvenance > .contentVMP.show{ display:block }
/* SlideShowButton */
#ssbiVMP{ position:absolute; top:46%; right:0%; width:15%; height:auto; text-align:center }
#ssbVMP{ /*position:absolute; bottom:9%; right:18.15%;*/ width:auto; height:36px; font-size:14px }
#ssbVMP span{ font-family:"Font Awesome 5 Free"; display:inline-block; width:16px; height:16px; text-align:center; color:#fff; line-height:16px; padding:10px; border-radius:50%; opacity:0.7; font-weight:bold; background:#0003 }
#ssbVMP span:hover{ cursor:pointer; opacity:1 }
.next:before{ content:"\f054" }
.prev:before{ content:"\f053" }
.play:before{ content:"\f04b" }
.pause:before{ content:"\f04c" }
/* SlideShowItem */
#ssiVMP{ /*position:absolute; bottom:6%; right:18%;*/ width:auto; height:26px; font-size:18px; z-index:2 }
#ssiVMP span{ font-family:"Font Awesome 5 Free"; color:#fff; display:inline-block }
#ssiVMP span:hover{ cursor:pointer; opacity:1 }
.circle:before{ content:"\f111" }
.circleFull:before{ content:"\f192" }
/* Nous Joindre */
#dNousJoindre{ display:flex; height:663px; background:url('/assets/img/BioTech-Lube BioDegradable Lubricants Contact US.jpg'); background-blend-mode:lighten; background-color:rgba(255,255,255,0.5); background-size:cover; background-position:center; margin-bottom:50px }
#dNousJoindre > div:nth-of-type(1){ flex-grow:1; position:relative; float:left; width:70%; height:auto; font-size:24px; padding:1% 20% 4% 10%; box-sizing:border-box }
#dNousJoindre > div:nth-of-type(1) > b{ position:absolute; left:1%; font-size:32px }
#dNousJoindre > div:nth-of-type(1) > b a{ color:#176c8b }
#dNousJoindre > div:nth-of-type(1) > div{ padding-top:140px }
#dNousJoindre > div:nth-of-type(1) > div > input[type=text]{ background:#fff; width:40%; height:40px; border:1px solid #fff; margin-bottom:10px; padding-left:5px; outline:none }
#dNousJoindre > div:nth-of-type(1) > div > textarea{ background:#fff; width:100%; height:250px; border:1px solid #fff; margin-bottom:10px; padding-left:5px; outline:none }
#dNousJoindre > div:nth-of-type(1) > div > input[type=button]{ background:#999; color:#fff; width:25%; height:40px; border:2px solid #fff; border-radius:15px; outline:none }
#dNousJoindre > div:nth-of-type(1) > div:nth-of-type(2){ display:none; padding-top:260px; text-align:center }
#dNousJoindre > div:nth-of-type(1) > div:nth-of-type(2) p{ text-align:center }
#dNousJoindre > div:nth-of-type(1) > div:nth-of-type(2) p+p{ font-size:10px; display:none }
#dNousJoindre > div:nth-of-type(2){ flex-shrink:0; position:relative; float:right; width:30%; height:100%; background:#0009; padding:150px 0 0 5.3199%; color:#fff; font-size:18px; box-sizing:border-box }
#dNousJoindre > div:nth-of-type(2) > b{ font-size:24px }
#dNousJoindre > div:nth-of-type(2) > p:nth-of-type(1){ padding:30px 0 20px 0 }
#dNousJoindre > div:nth-of-type(2) > p:nth-of-type(1) > span{ color:#0f0 }
#dNousJoindre > div:nth-of-type(2) > img:nth-of-type(1){ position:absolute; bottom:10px; right:10px; width:210px }
#dNousJoindre > div:nth-of-type(2) > img:nth-of-type(2){ position:absolute; top:10px; right:10px; width:150px }
/* Footer */
footer{ float:left; position:relative; width:100%; height:auto; color:#000; border-top:5px solid #000; font-size:14px; overflow:hidden }
/* Box Contact Us */
#msgFixToBottom{ position:fixed; bottom:5px; right:5%; width:auto; height:auto; text-align:center; z-index:4 }
#msgIcon{ width:auto; height:auto; font-size:36px; color:#000; background:#fff; padding:10px; border:2px solid #000; border-radius:50px; cursor:pointer }
#msgIcon:hover{ background:#78bce8 }
#msglbl{ /*display:block;*/ font-size:1.375em; color:#545454; line-height:40px; text-align:center; cursor:pointer }
#msgBox{ position:absolute; bottom:0px; right:-18px; /*top:-358px; left:-19px;*/ width:262px; height:auto; background:#fff; border:3px solid #000; border-radius:10px 10px 0 0; /*border-radius:10px;*/ display:none; padding:10px; z-index:2 }
#msgBox p{ color:#666; font-size:16px; text-align:left; margin:6px }
#msgBox input, #msgBox textarea{ width:100%; height:36px; border:1px solid #000; border-radius:10px; margin:4px 0; padding:8px 4px; color:#000; font-size:18px; text-align:center; font-family:arial; outline:none; box-sizing:border-box }
#msgBox label{ font-size:24px; line-height:24px; cursor:pointer }
#msgBox textarea{ height:100px }
#msgCB{ position:absolute; top:-14px; right:-14px; width:30px; height:30px; color:#000; border:3px solid #000; padding:3px; border-radius:10px; font-family:arial; font-size:32px; line-height:14px; background:#fff; cursor:pointer }
#msgCB:hover{ background:#6fbada }
#msgBtnSend{ cursor:pointer }
#msgBtnSend:hover{ background:#6fbada }
#msgLoad{ margin:0 auto; display:none }
#msgLoad p{ text-align:center }
#msgLoad p+p{ font-size:10px; display:none }
/* Expertise */
#dExpertise{ height:auto; font-size:24px; text-align:center; cursor:default }
#copy{ height:auto; font-size:14px; text-align:center; line-height:30px; padding:10px 0 25px; cursor:default }
#copy a{ color:#000; cursor:pointer }

/* Expertise2 */
#dExpertise2{ position:relative; height:0; padding-top:8.175%; text-align:center; color:#fff; font-size:24px; background:url('/assets/img/FOOTER BIOTECH-LUBE LUBRIFIANT BIODEDRADABLE LUBRICANT.jpg'); background-size:cover; background-position:center }
#dExpertise2 span{ position:absolute; top:15%; left:50%; transform:translateX(-50%); width:100% }
#sign{ position:absolute; left:2.5%; bottom:0; width:auto; height:auto }
#sign img{ width:100px; height:55px }

/* Page Produit */
#h1_produit{ padding:20px 0 20px 1.5% }

.lblErr{ display:none; color:#f00; line-height:24px; font-weight:normal }

#err{ float:left; width:100%; height:25px; font-size:16px; text-align:center; padding-top:10px }
#err span{ color:#f00; font-weight:bold; text-align:center; cursor:default }
#imgE{ width:15px; height:15px; background:url(images/error.png) }
#fSpacer{ float:left; width:100%; height:30px }
#image{ width:100%; text-align:center /*height:1273px; background-image:url(/assets/img/bg1.jpg); background-size:cover; background-position:center; background-repeat:no-repeat*/ }

/* Line = un DIV qui a les fields: span & text/combobox.. */
.line{ position:relative; height:auto; margin-bottom:5px; overflow:hidden }
.line:last-child{ margin:0 }
.line span{ display:inline-block; width:40%; vertical-align:middle }
.line input[type=text], .line select, .line input[type=button], .line input[type=password], .line input[type=date], .line input[type=time], .line textarea{ width:60%; height:40px; border:2px solid #333; /*border-radius:5px;*/ padding-left:5px; box-sizing:border-box; outline:none }
.line select{ padding-left:2px }
.line input[type=button]{ padding-left:0 }
.line textarea{ padding:5px }
.borderRed{ border:2px solid #f00 !important }
.center{ text-align:center }
/* Line Full */
.lineFull{ position:relative; height:auto; margin-bottom:5px; overflow:hidden }
.lineFull:last-child{ margin:0 }
.lineFull input[type=text], .lineFull select, .lineFull input[type=button], .lineFull input[type=password], .lineFull input[type=date], .lineFull input[type=time], .lineFull input[type=datetime-local], .lineFull textarea{ width:100%; height:40px; border:2px solid #333; /*border-radius:5px;*/ padding-left:5px; box-sizing:border-box; outline:none }
.lineFull select{ padding-left:2px }
.lineFull input[type=button]{ padding-left:0 }
.lineFull input[type=date], .lineFull input[type=time]{ font-size:16px }
.lineFull textarea{ padding:5px }
/* Line Full Center */
.lineFC{ position:relative; height:auto; text-align:center; margin-bottom:5px; overflow:hidden }
.lineFC input[type=text], .lineFC select, .lineFC input[type=button], .lineFC input[type=password], .lineFC input[type=date], .lineFC input[type=time], .lineFC textarea{ width:60%; height:40px; border:2px solid #333; /*border-radius:5px;*/ padding-left:5px; box-sizing:border-box; outline:none }
.lineFC input[type=button]{ padding-left:0 }
.lineFC span{ width:100% }
/* Line Full Icon */
.lineFI{ position:relative; height:auto; margin-bottom:5px; overflow:hidden }
.lineFI:last-child{ margin:0 }
.lineFI input[type=text], .lineFI select, .lineFI input[type=button], .lineFI input[type=password], .lineFI input[type=date], .lineFI input[type=time], .lineFI input[type=datetime-local], .lineFI textarea, .lineFI label{ width:100%; height:40px; line-height:40px; border:1px solid #fff; border-radius:5px; padding-left:10%; box-sizing:border-box }
.lineFI input[type=button]{ padding:0 }
.lineFI textarea{ padding:10px 0 10px 10%; line-height:20px; vertical-align:top; resize:none }
.lineFI input[type=file]{ position:absolute; left:-99999rem }
.lineFI label{ display:inline-block; color:#999; background:#fff; text-align:left }
.lineFI input[type=text]:placeholder{ color:#f00 }
.lineFI input[type=text]:hover ~ i, .lineFI select:hover ~ i, .lineFI input[type=password]:hover ~ i, .lineFI textarea:hover ~ i{ color:#333 }
.lineFI input[type=text]:focus ~ i, .lineFI select:focus ~ i, .lineFI input[type=password]:focus ~ i, .lineFI textarea:focus ~ i{ color:#27aae1 }
.lineFI input[type=text]:focus, .lineFI select:focus, .lineFI input[type=password]:focus, .lineFI textarea:focus{ outline:none }
.lineFI input[type=text]::-moz-placeholder, .lineFI textarea::-moz-placeholder{ color:#999; opacity:1 }
.lineFI input[type=text]:-ms-input-placeholder, .lineFI textarea:-ms-input-placeholder{ color:#999 }
.lineFI input[type=text]::-webkit-input-placeholder, .lineFI textarea::-webkit-input-placeholder{ color:#999 }

input[type=text], input[type=button], input[type=password], .line input[type=date], .line input[type=time], select, textarea, label{ font-size:0.889em }
input[type=button]{ cursor:pointer }

/* Font Awesome - Icons */
.faI:hover ~ i{ color:#333 }
.faI:focus ~ i{ color:#27aae1 }
.faI:focus{ outline:none }
[class^="input-fa"]{ position:absolute; left:0; top:0; display:inline-block; width:8%; height:40px; border-right:1px solid #ccc; color:#666; text-align:center; line-height:40px !important; transition:all 0.3s ease-out; pointer-events:none }
[class^="input-fa"]:before{ font-family:"Font Awesome 5 Free"; /*font-weight:normal;*/ font-style:normal; text-decoration:inherit; pointer-events:none }
[class^="span-fa"]:before{ font-family:"Font Awesome 5 Free"; }

#dLogin input[type=text], #dLogin input[type=password]{ padding:5px 2% 5px 12%; line-height:120% }

/* Animation Slide Down */
/*
.slidedown{ -webkit-transition:-webkit-transform .3s ease; -moz-transition:-moz-transform .3s ease; -ms-transition:-ms-transform .3s ease; transition:transform .3s ease }
.slidedown.opened{ -webkit-transform:translate(0, 0%); -moz-transform:translate(0, 0%); -ms-transform:translate(0, 0%); transform:translate(0, 0%) }
.slidedown.closed{ -webkit-transform:translate(0, -100%); -moz-transform:translate(0, -100%); -ms-transform:translate(0, -100%); transform:translate(0, -100%) }
*/
@keyframes animate{
  0%{ opacity:0 }
  100%{ opacity:1 }
}

/* Floating Box */
#shadow, #floatB{ position:fixed; top:0; left:0; width:100%; height:100%; visibility:hidden }
#shadow{ filter:alpha(opacity=50); opacity:0.5; background-color:#3f351d; z-index:5 }
#floatB{ z-index:5 }
.fbBox{ position:fixed; /*top:0; bottom:0; left:0; right:0;*/ max-width:520px; /*max-height:580px;*/ width:85%; height:auto; margin:auto; background:#fff; border:10px solid #398fcc; border-radius:10px; box-sizing:border-box; display:none; left:50%; top:50%; transform:translate(-50%, -50%); z-index:5 } /*transform:translateX(-50%) translateY(calc(-50% - .5px));*/
.fbClose{ position:absolute; top:-22px; right:-22px; width:34px; height:34px; color:#f00; text-align:center; font-size:26px; line-height:32px; background:#398fcc; border-radius:50px; cursor:pointer; z-index:5 }
/*.fbBox form{ height:100%; max-height:500px; overflow:auto }*/
.fbBox form{ position:relative }
.fbBox p{ margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #398fcc; font-size:18px; text-align:center }
.fbContent{ width:auto; height:auto; max-height:500px; position:relative; padding:20px; overflow:auto }
.fbLoad{ width:auto; text-align:center; padding:20px; display:none }
.fbLoad p+p{ font-size:10px; display:none }

/* Media Query - Dynamic Design POWER!! */
/* Screen Resolution */
/* 1440 x 1280 x 960 x 760 x 720 x 480 */
/*                      >           >  */
/* 3 Modes Design
	1. Desktop = @media screen{ }
	2. Tablet  = @media screen and (max-width:760px){ }
	3. Mobile  = @media screen and (max-width:480px){ }
 */
@media screen{ 
/* Header */
/* Logo Menu */
/* SlideShow Header */
/* Section Contain */
/* Eprouvette */
/* Offres */
/* SlideShow Categorie */
/* Services */
/* Eolienne */
/* Spacer Losanges */
/* Votre Marque & Provenance */
/* Nous Joindre */
/* Expertise */
}
@media screen and (max-width:1440px){
h1{ font-size:48px }
h2{ font-size:32px }
/* Header */
/* Logo Menu */
#menu li{ font-size:16px }
#menu li:nth-of-type(3) ul{ width:40% }
/* SlideShow Header */
#slideshowContent figure p{ font-size:48px }
#ssbi{ right:14% }
#dAccesRapide{ font-size:28px }
/* Section Contain */
/* Eprouvette */
#dEprouvette > div{ width:90% }
#imgEprouvette{ max-width:40% }
/* Offres */
#dOffres{ height:350px }
#dOffres > div:nth-of-type(1){ font-size:36px; margin-top:45px }
#dOffres > div:nth-of-type(2) > div{ font-size:46px; padding-top:35px }
/* SlideShow Categorie */
#slideshowCategorie figure p{ font-size:46px }
/* Services */
#dServices > div{ width:80% }
#dServices > div span{ font-size:30px }
/* Eolienne */
/* Spacer Losanges */
/* Votre Marque & Provenance */
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(1){ padding-left:2% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div{  }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) p{ font-size:46px }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(2){ padding:30px 30px 0 20px }
/* Nous Joindre */
/* Expertise */


}
@media screen and (max-width:1280px){
h1{ font-size:42px }
h2{ font-size:28px }
/* Header */
#slideshowHeader{ height:749px }
header{ width:80% }
#slogan{ width:32% }
#email{ width:30%}
#followus{ width:28% }
#lang{ width:10% }
/* Logo Menu */
#logo_menu.stuck{ width:80% }
#menu li:nth-of-type(3) ul{ width:48% }
/* SlideShow Header */
#slideshowContent figure p{ font-size:42px }
#ssbi{ top:20%; right:10.7% }
#dAccesRapide{ font-size:26px }
/* Description */
#pDescription{ width:80%; padding:0 20px }
/* Eprouvette */
#imgEprouvette{ font-size:24px }
/* Offres */
#dOffres{ height:320px }
#dOffres > div:nth-of-type(1){ font-size:32px; margin-top:40px }
#dOffres > div:nth-of-type(2) > div{ font-size:42px; padding-top:30px }
/* SlideShow Categorie */
#slideshowCategorie figure p{ font-size:42px }
/* Services */
#dServices > div{ width:85% }
#dServices > div span{ font-size:22px }
/* Eolienne */
#dEolienne > div{ width:100%; max-width:1198px; height:183px; padding:0 10px 10px }
#dEolienne > div > div{ flex-wrap:wrap }
#dEolienne > div > div div:last-child{ background-size:cover }
/* Spacer Losanges */
/* Votre Marque & Provenance */
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(1){ width:35% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(1) img{ position:absolute; right:10px; width:auto }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1){ height:40%; padding:3% 0; }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2){ width:65% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) p{ font-size:42px }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) img{ width:auto; height:75% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(2){ padding:25px 30px 0 20px }
#ssbiVMP{ top:36%; width:20% }
/* Nous Joindre */
#dNousJoindre > div:nth-of-type(2) > img:nth-of-type(1){ width:165px }
#dNousJoindre > div:nth-of-type(2) > img:nth-of-type(2){ width:100px }
/* Expertise */
#dExpertise{ font-size:22px }


}
@media screen and (max-width:960px){
h1{ font-size:24px }
h2{ font-size:20px }
/* Header */
#slideshowHeader{ height:600px }
header{ width:90% }
#slogan{ width:32% }
#email{ width:30%}
#followus{ width:32% }
#lang{ width:6% }
/* Logo Menu */
#logo{ width:25% }
#logo_menu.stuck{ width:90% }
#menu{ width:59% }
#menu li{ font-size:14px }
#contact, #soumission{ font-size:16px }
/* SlideShow Header */
#slideshowContent figure p{ font-size:24px }
#ssbi{ top:25%; right:5% }
#dAccesRapide{ left:5%; bottom:6%; font-size:24px }
/* Description */
#pDescription{ width:90% }
/* Eprouvette */
#imgEprouvette{ font-size:32px }
/* Offres */
#dOffres{ height:300px }
#dOffres > div:nth-of-type(1){ font-size:30px; margin-top:38px }
#dOffres > div:nth-of-type(2) > div{ font-size:40px; padding-top:28px }
/* SlideShow Categorie */
#slideshowCategorie figure p{ font-size:40px; margin-bottom:30px }
#ssiC{ bottom:25px }
/* Services */
#dServices > div{ width:90%; top:-20px }
#dServices > div div{ width:29.3333%; margin:1.5% 2% 20px }
#dServices > div span{ font-size:22px }
/* Eolienne */
/* Spacer Losanges */
/* Votre Marque & Provenance */
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(1){ width:0; padding-left:0 }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(1) img{ right:-240px }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2){ width:100% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1){ height:32% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1){ width:80% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) p{ font-size:36px }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) img{ left:250px; height:50% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2){ width:20% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(2){ padding:10px 0 0 250px }
#ssbiVMP{ top:27%; width:20% }
/* Nous Joindre */
/* Expertise */
#dExpertise{ font-size:20px }

}
@media screen and (max-width:760px){ /* Tablet */
h1{ font-size:20px }
h2{ font-size:16px }
/* Header */
#slideshowHeader{ height:500px }
header{ width:100% }
#slogan_lang{ padding:0 2%; line-height:24px }
#slogan{ display:block; float:none; width:100% }
#email{ display:none }
#followus{ display:none }
#lang{ position:absolute; top:0; right:0; width:10% }
/* Logo Menu */
#logo_menu{ padding:10px 2% }
#logo_menu.stuck{ width:100% }
#logo{ width:50%; height:51px }
#menu{ display:none }
#menuMobile{ position:relative; float:left; width:50%; height:51px; font-size:50px; color:#fff; display:flex; justify-content:flex-end; align-items:center; z-index:2 }
#search, #contact_mobile, #soumission_mobile{ width:12%; height:51px }
#nav{ display:block }
#nav.stuck_nav{ padding-top:71px }
#contact, #soumission{ display:none }
#contact_mobile, #soumission_mobile{ float:left; display:flex; height:51px; font-size:36px; justify-content:center; align-items:center }
#contact_mobile{ color:#2e715f }
#soumission_mobile{ color:#c6a933 }
#search, #soumission_mobile{ display:none }
/* SlideShow Header */
#slideshowContent{ height:285px; padding-top:20px }
#slideshowContent figure p{ font-size:20px; padding:5px }
#ssbi{ top:unset; bottom:2%; right:0 }
#ssi{ font-size:20px }
#dAccesRapide{ left:2%; bottom:2%; font-size:20px }
/* Description */
#pDescription{ width:100%; padding:0 2% }
/* Eprouvette */
#imgEprouvette{ font-size:14px }
#dEprouvette span:nth-of-type(4){ margin-top:25px }
/* Offres */
#dOffres{ height:280px }
#dOffres > div:nth-of-type(1){ font-size:28px; margin:35px 0 0 10% }
#dOffres > div:nth-of-type(2) > div{ font-size:38px; padding-top:25px }
/* SlideShow Categorie */
#slideshowCategorie{ height:296px }
#slideshowCategorie figure p{ font-size:38px; margin-bottom:10px }
#ssiC{ bottom:2px }
/* Services */
#dServices > div{ width:100%; top:0 }
#dServices > div div{ width:40%; margin:1.5% 5% 20px }
#dServices > div span{ font-size:20px }
/* Eolienne */
#dEolienne > div{ width:100%; max-width:597px }
#dEolienne > div > div div:first-child{ border:0; background-size:cover; border-radius:0 0 16px 16px }
#dEolienne > div > div div:last-child{ display:none }
/* Spacer Losanges */
/* Votre Marque & Provenance */
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(1){ width:0; padding-left:0 }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(1) img{ right:-190px }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2){ width:100% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1){ width:75% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) p{ font-size:28px }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) img{ left:200px; height:50% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2){ width:25%; padding:2% 0 2% 10px }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(2){ font-size:14px; padding:10px 0 0 200px }
/* Nous Joindre */
#dNousJoindre{ flex-direction:column }
#dNousJoindre > div:nth-of-type(1){ float:none; width:100%; height:50%; font-size:18px }
#dNousJoindre > div:nth-of-type(1) > div{ padding-top:40px }
#dNousJoindre > div:nth-of-type(1) > div > input[type=text]{ height:30px; margin-bottom:5px }
#dNousJoindre > div:nth-of-type(1) > div > textarea{ height:100px; margin-bottom:5px }
#dNousJoindre > div:nth-of-type(1) > div > input[type=button]{ width:40% }
#dNousJoindre > div:nth-of-type(2){ display:flex; flex-direction:column; align-items:center; justify-content:center; float:none; width:100%; height:50%; padding:0 }
#dNousJoindre > div:nth-of-type(2) > img:nth-of-type(1){ width:95px }
#dNousJoindre > div:nth-of-type(2) > img:nth-of-type(2){ width:60px }
#ssbiVMP{ top:unset; right:unset; bottom:5%; left:5%; width:auto }
/* Expertise */
#dExpertise{ font-size:18px }

.bg1{ background-position:-50px 0 !important }
.bg2{ background-position:center !important }
#msgFixToBottom{ right:5px }
#msg{ right:0; width:100%; height:auto; border-radius:0; border:0; border-top:2px solid #454344; margin:20px 0 0 0 }
#msgBox{ display:none; right:0px }
#msgBox p{ font-size:14px }
#msgCB{ top:-17px; right:-6px }
#sign{ left:50%; bottom:18px; transform:translateX(-50%) }
#sign img{ width:50px; height:27.54px }
}
@media screen and (max-width:480px){ /* Mobile */
/* Header */
#slideshowHeader{ height:450px }
/* Logo Menu */
#menuMobile, #contact_mobile, #soumission_mobile{ font-size:50px }
#nav li:nth-of-type(3) li{ width:50% }
/* SlideShow Header */
#slideshowContent{ height:265px }
#ssi{ font-size:18px }
#dAccesRapide{ font-size:14px; padding:10px 25px }
/* Eprouvette */
#dEprouvette{ height:650px }
#imgEprouvette{  margin:5% 7% 2.084% 0; }
#dEprouvette p{ font-size:14px }
#dEprouvette span:nth-of-type(1){ margin-top:5%; font-size:20px }
#dEprouvette span:nth-of-type(2){ margin-top:20px }
#dEprouvette span:nth-of-type(3){ margin-top:20px }
#dEprouvette span:nth-of-type(4){ height:30px; font-size:14px; margin-top:30px }
/* Offres */
#dOffres{ height:230px }
#dOffres > div:nth-of-type(1){ font-size:24px; margin:35px 0 0 5% }
#dOffres > div:nth-of-type(2) > div{ font-size:28px; padding-top:25px }
/* SlideShow Categorie */
#slideshowCategorie{ height:248px }
#slideshowCategorie figure p{ font-size:28px }
/* Services */
#dServices > div div{ width:40%; margin:1.5% 5% 20px }
#dServices > div span{ font-size:16px }
/*#dServices > div a:last-child{ display:block }*/
/* Eolienne */
#dEolienne{ display:none }
#dEolienneM{ position:relative; display:flex; width:96%; max-width:321px; margin:0 auto; background-image:url(/assets/img/eolienne_m.jpg); background-position:center; background-repeat:no-repeat; box-sizing:border-box }
#dEolienneM:before{ content:""; display:block; margin-top:100% }
#dEolienneM span{ position:absolute; left:0; bottom:0; width:100%; height:48px; line-height:48px; font-size:24px; font-family:Anton; color:#fff; background:rgb(44 84 119 / 50%); padding-left:5px; border-top:1px solid #fff; box-sizing:border-box }
/* Spacer Losanges */
/* Votre Marque & Provenance */
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(1){ width:0; padding-left:0 }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(1) img{ right:-150px }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2){ width:100% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1){ height:25% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1){ width:65%; padding:20px 0 }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) p{ font-size:18px }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) img{ left:160px; height:45% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2){ width:35% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(2){ padding:10px 0 0 160px }
/* Nous Joindre */
/* Expertise */
#dExpertise{ font-size:16px }
}
@media screen and (max-width:320px){
/* Votre Marque & Provenance */
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1){ height:14% }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1){ width:75%; padding:10px 0 }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) img{ left:85px }
#dVotreMarqueProvenance > .contentVMP > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2){ width:25% }
}