@charset "UTF-8";
/* CSS Document */

html, body {height:100%;}
html{font-size: 62.5%;}
body{margin: 0 auto;padding: 0;overflow-x:hidden;position: relative;width:100%;background:#fff;font-family: 'Montserrat', sans-serif;font-weight:500;color:#333333; -moz-transition:all 0.4s ease-in-out;transition: all 0.4s ease-in-out; }

*::-moz-selection {
  background:#cd9929;color:#fff;
}

*::selection {
 background:#cd9929;color:#fff;
}


.container, .contDemi, .contSml{position:relative;display:block;margin:0 auto;width:100%}
.container{max-width:1200px;}
.contSml{max-width:1000px;}
.contDemi{max-width:600px;}

.pad{padding:40px;}
.bigPad{padding:100px;}

a[href]:not([class]){color:inherit;font-weight: bold; text-decoration: none;transition: all ease-in-out 0.1s;}
p a, h6 a{box-shadow: inset 0 -10px 0 rgba(205,153,41, 0.2);}
p a:hover, h6 a:hover {box-shadow: inset 0 -2px 0 rgba(205,153,41, 0.2);}

.blanc p a,.blanc h6 a{box-shadow: inset 0 -10px 0 rgba(136,137,130, 0.3);}
.blanc p a:hover,.blanc h6 a:hover {box-shadow: inset 0 -2px 0 rgba(136,137,130, 0.3);}



a:focus{outline:0;}
a[href^=tel]{color:inherit;text-decoration:none;}


img{max-width:100%;}
hr{border:none;border-top:3px dotted #ccc;margin:40px 0}


.center{text-align:center;} .left{text-align:left;} .right{text-align:right;} .justify{text-align:justify;} .uppercase{text-transform:uppercase;}

.block{display:block;}
.inline{display:inline-block}
.none{display:none;}

.down{margin-bottom:40px;}
.up{margin-top:40px;}

.flt-lf{float:left}
.flt-rg{float:right}
.clear{clear:both;}

/* COULEUR */

.blanc{color:#fff;}
.noir{color:#191919;}
.gris{color:#898a83}
.bleu{color:#cd9929}

.bckBlanc{background:#fff;}
.bckpale{background:#f1f1f1;}

.bckNoir{background:#191919;}
.bckGris{background:#898a83;}
.bckBleu{background:rgba(205,153,41,1);}

/* TEXTE */

h1, h2, h3, h4, h5, h6{line-height:1.2;text-transform:uppercase;letter-spacing: 3px}

h1, .h1{font-size:60px;font-weight:400;font-family: 'Unna', serif;line-height: 0.9;color:#333333}
h1 span, .h1 span{font-family: 'Montserrat', sans-serif;color:#898a83;font-size: 30px;font-weight: 300;display: block;line-height: 1.2}
h2{font-size:22px;font-weight:300;color:#898a83;font-family: 'Montserrat', sans-serif;line-height: 1.2}
h3{font-size:18px;font-weight:400;}
h4{font-size:16px;font-weight:300;}
h5{font-size:15px;font-weight:400;font-family: 'Unna', serif;}
h6{font-size:14px;font-weight:700;color:#cd9929}


h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6{margin-top:0}
.blanc h1, .blanc h2, .blanc h3, .blanc h4, .blanc h5, .blanc h6,
.bckNoir p, .bckNoir h1 span, .bckNoir h1, .bckNoir h2{color:#fff!important;}

.margUp40{margin:40px 0}
.margDown60{margin-bottom:60px}

p + p{margin:0 0 20px}
p:first-child{margin-top:0!important}

p, li{font-size:14px;line-height:2.2;margin:20px 0 }
ul{list-style-type:none;}
ul li{margin:0 0 5px 0px;}
ul li:before{content:" ¬ ";display: inline-block;font-weight:bold;width: 25px;color:#cd9929}
.bckBleuRight ul li:before{color:#fff;}

.bt{position:relative;display:block;margin: 30px auto 0 }
.bt a{padding:15px 35px;border-width:3px;border-style: solid;display:inline-block;text-decoration:none!important;text-transform: uppercase;font-size: 13px;letter-spacing: 3px;box-shadow: none}
.blanc .bt a{box-shadow: none}
.bt.borderBleu a {border-color:#cd9929;}
.bt.borderBleu a:hover{background:#cd9929;color:#fff;box-shadow: none }
.bt.borderBlanc a{border-color:#fff; }
.bt.borderBlanc a:hover{background:#fff;color:#191919; box-shadow: none }

header{width:100%;height:140px;z-index:100;background:#fff url("/img/fond/noir.gif") repeat-y center left / calc(100% - 160px) 100% ; position: fixed;top: 0;-moz-transition:all 0.4s ease-in-out;transition: all 0.4s ease-in-out;margin:0 auto}

.page header{background:none}
header.sticky, .page header.sticky{background:rgba(205,153,41,0.9);height: 70px} header.nav-up {top: -200px;}

header .logo img{-moz-transition:all 0.4s ease-in-out;transition: all 0.4s ease-in-out}

header .logo{float:left;margin:32px 0 0 60px;width:auto;-moz-transition:all 0.4s ease-in-out;transition: all 0.4s ease-in-out}
header .lang{position: absolute;top:60px;right:220px;color:#fff;margin:0}
.lang a{box-shadow: none; text-decoration: none!important;font-weight: 300!important;color:#fff;margin:0}

span#menuMob {position:absolute;right:60px;top:40px;width:60px;height:60px;display:block;background: url("/img/menu-mobile.svg") no-repeat center center / 40px;cursor:pointer;z-index: 1;transition: all ease-in-out 0.3s;}
.open .overlay{width:100%}
.overlay{height:100%;width:0;; position:fixed;z-index:1;top:0;left:0;background: rgba(52,53,52, 0.9);overflow-x: hidden;transition: 0.3s;}
.overlay .closebtn {display:block;position: absolute;top:33px;right: 73px;font-size: 60px;color:#fff;text-decoration: none!important;font-weight: 300}

.overlay-content {position: fixed;top: 25%;width: 100%;left:50%;transform: translateX(-50%);text-align: center;max-width: 1200px;margin:0 auto;padding:100px;display: none
;transition: 0.3s;}
.open .overlay .overlay-content{display: block}

#navMenu nav{position:relative;width:100%;height:100%;}
#navMenu ul{-webkit-column-gap: 4%;-moz-column-gap: 4%;column-gap: 4%;-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}
#navMenu ul li{display:block;text-align:left;padding:0;transition: 0.3s;font-size: 40px;color:#fff;font-family: 'Unna', serif;text-transform: uppercase;letter-spacing: 2px;line-height: 1.2;margin-bottom:30px}
#navMenu ul li:before{content:"";width: 0;}
#navMenu ul li a{text-decoration: none!important;font-weight: 400}
#navMenu ul li a.active{box-shadow: inset 0 -17px 0 rgba(205,153,41, 0.5);color:#fff;}

header.sticky .logo {margin-top:12px}
header.sticky .logo img{width: 200px;}
header.sticky span#menuMob{background: url("/img/menu-mobile-blanc.svg") no-repeat center center / 30px;top:15px;height: 40px}
header.sticky .lang{top: 20px;right: 160px;}

/************  HOME   ***********/

.home .head{height: 100%;}
.head{background:url("/img/fond/noir.gif") repeat-y center left / calc(100% - 160px) 100% ;}
#headhome{position:relative;;height:100%;margin:0 auto;padding:10% 0;}
#headhome .fonHead{position: absolute;width:calc(100% - 504px );height:calc(90% - 100px );top:130px;right:60px;background: url("/img/slider/fond-slide1.jpg") no-repeat center center / cover fixed;}

#headhome .centerBloc{width:auto; position: absolute; top: 60%;left:60px;}
#headhome h1{font-size:90px;font-weight: 300;letter-spacing: 5px;text-align: right;line-height: 1;text-shadow: 0px 0px 20px rgba(52,53,52,0.5)}
#headhome h1 span{font-size: 40px;color:#898a83;font-family: 'Montserrat', sans-serif;display: block;text-shadow:none }


.intro{background:url("/img/fond/depuis-1965.svg") no-repeat top left -10px / 40% auto;margin-top:100px;padding-top:80px;margin-bottom:-200px}
.intro.en{background-image:url("/img/fond/since-1965.svg")}
.intro p{font-size:22px;font-weight:400;line-height: 1.6; font-family: 'Unna', serif;margin:0}
.intro h2{font-size: 28px}

.centerBloc{position: absolute; top: 50%; transform: translateY(-50%);left: 0;}

#myVideo {position: relative;height: 600px;overflow: hidden;transform: translateY(200px);}
#myVideo .container{height: 100%;text-align: right;color:#fff;padding: 180px 80px 0 240px}

#myVideo p{font-size: 76px;font-weight:400;font-family: 'Unna', serif;margin:0;line-height: 1.2}
#myVideo video{width:100% ;position: absolute ;right:-160px}
#myVideo .filter{ background:url(/img/fond/noir-fonce.gif) repeat-y right center / calc(100% - 160px) 100%;position: absolute;top: 0;right: 0;width:100%;height: 100%;}


.usineHome{background:url(/img/fond/noir-fonce.gif) repeat-y left center / calc(100% - 160px) 100%;padding: 200px 0 100px ;z-index: -1}
.offsetLeft{padding-left: 160px}


.distributeurHome{background:url("/img/fond/cuisine-distributeur-home.jpg") no-repeat center center  / cover fixed;padding:300px 0;height: 100%;min-height: 800px}
.distributeurHome .container{height: 100%;max-width: 55%;float: right;}
.distributeurHome .centerBloc{background:rgba(205,153,41,0.8);padding:100px; color: #fff}
.distributeurHome  h2, .distributeurHome  h1 span{color:#fff;}

.expertiseHome{transform: translateY(-60px);margin-bottom: -60px}
.expertiseHome .container{padding:200px 80px 100px;width:calc(100% - 160px);height: 100%;}

.realHome:before{content:"";width:calc(100% - 160px);max-width: 1200px;margin:0 auto;height: 60px;background: #fff;display: block;transform: translateY(60px);z-index: 999}
.realHome{position: relative}
.realHome .noMarg{background-color:#343534;min-height: 500px;overflow: hidden}


.bckBleuRight{background:url(/img/fond/bleu.gif) repeat-y right center / calc(100% - 160px) 100%;padding: 60px 0 ;}
.bckBleuRight .container{padding-left:260px}
.bckBleuRight .h1 span{color:#fff;}


.detaillant{background:url("/img/fond/detaillant-home.jpg") no-repeat center center  / cover fixed;padding-top:200px}
.detaillant .contSml{float: left;margin:0;transform: translateY(100px);width: 75%}
.detaillant h2{font-family: 'Unna', serif;color:#191919;font-size:40px;line-height: 1}
.detaillant h3{font-size:22px;font-weight:300;color:#898a83;font-family: 'Montserrat', sans-serif;text-transform: uppercase;letter-spacing: 3px}

body .detaillant .detaillant-btn {
  margin-top: 20px !important;
}

/* PAGE */

.page .head{height: 100%;position: relative}
.page .head .centerBloc{padding:0 60px;width: 100%;text-align: right;color:#fff;}
.page .head h1{font-size:9vw;color:#fff;}
.page span#menuMob{background-color:#fff;padding:20px }

.distributeur{background:url("/img/fond/cuisine-distributeur-home.jpg") no-repeat center center  / cover fixed;padding-top:100px}
.distributeur .contSml{float: left;margin:0;transform: translateY(100px);width: 75%}


.bckNoirLeft{background:url(/img/fond/noir.gif) repeat-y left center / calc(100% - 160px) 100%;padding: 0 0 ;}
.fondNoirLeft{background:url(/img/fond/noir.gif) repeat-y left center / calc(100% - 160px) 100%;padding: 200px 0 100px ;z-index: -1}


.translatedown200{transform: translateY(200px);margin-top:-200px}
.paddingTranslateUp{padding-top:200px}

.translateUp100{transform: translateY(-100px);margin-bottom: -100px}
.bckCarriere{background:url(/img/fond/fond-carriere.jpg) no-repeat center center /cover;padding:100px 0;min-height: 550px}

.topPage{transform: translateY(-60px);margin-bottom: -60px}
.topPage .container{padding:100px 80px 100px;width:calc(100% - 160px);height: 100%;}

.imgFondRight{position: relative;height: 550px;width:100%;transform: translate(160px, 200px);margin-top: -200px;background-size:cover;background-position: center left -80px;background-repeat: no-repeat;}


.expertise .noMarg{height: 400px;background-position: center center ;background-size: cover}
.usine .noMarg{min-height: 500px;padding-top:150px;background-position: center center ;background-size: cover}


/* carriere */


.gridReal {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(8, auto);
grid-column-gap: 1%;
grid-row-gap: 0.5%;
margin-bottom:50px;
width: 100%;
}

.gridReal > div img{display:block;margin:0 auto;opacity:0;}

.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 2 / 1 / 3 / 2; }
.div3 { grid-area: 2 / 2 / 3 / 3; }
.div4 { grid-area: 1 / 3 / 3 / 4; }
.div5 { grid-area: 3 / 1 / 4 / 2; }
.div6 { grid-area: 3 / 2 / 4 / 4; }
.div7 { grid-area: 4 / 1 / 6 / 2; }
.div8 { grid-area: 4 / 2 / 5 / 3; }
.div9 { grid-area: 4 / 3 / 5 / 4; }
.div10 { grid-area: 5 / 2 / 6 / 3; }
.div11 { grid-area: 5 / 3 / 6 / 4; }
.div12 { grid-area: 6 / 1 / 7 / 3; }
.div13 { grid-area: 6 / 3 / 7 / 4; }
.div14 { grid-area: 7 / 1 / 8 / 2; }
.div15 { grid-area: 7 / 2 / 8 / 3; }
.div16 { grid-area: 7 / 3 / 8 / 4; }

/* FOOTER */

footer{width:100%;background:#191919;padding:100px 0 40px 0;color:#fff;}
footer .coord li{display: inline-block;margin-right: 5%}
footer a {text-decoration: none!important}
footer .coord li:before, .navFoot ul li:before{content:"";width: 0;margin:0;padding:0}
footer h6{color:#fff;letter-spacing: 1px}
.sociaux a{margin-right: 20px}.sociaux a:last-child{margin-right: 0}
.navFoot{margin-top: 20px}
.navFoot ul li{display: inline-block;font-family: 'Unna', serif;text-transform: uppercase;margin-right: 5%;letter-spacing: 1px}
#credits .bigPad{padding:0px 100px;}
#credits p, #credits a{margin:0;font-size:11px;color:#aaa}
#credits a{font-size:9px;text-transform:uppercase;text-decoration:none;font-weight: normal;padding:2px 5px 0 0;display:block}
#credits a img{margin:-2px 0 0 5px!important;display:inline-block;vertical-align:middle;}


@media only screen and (min-width: 1500px) {
.imgFondRight{height: 650px;}

}

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

.pad{padding:30px;}
.bigPad{padding:70px;}
#credits .bigPad {padding: 0px 70px;}

h1, h2, h3, h4, h5, h6{letter-spacing: 2px}
h1, .h1{font-size:52px;} h1 span, .h1 span{font-size: 28px;}
h2{font-size:20px;}
h3{font-size:17px;}
h4{font-size:15px;}
h5{font-size:14px;}
h6{font-size:13px;}

.bt a{padding:10px 30px}

header .logo img{width:280px}
header.sticky .logo {margin-left:20px}
header.sticky span#menuMob{right:15px;}
header.sticky .lang {right:110px}

#headhome .fonHead{width:calc(100% - 347px);}
#headhome h1{font-size:70px;letter-spacing: 3px;}
#headhome h1 span{font-size: 30px;}

.intro{background-size:60% auto;margin-top:70px;padding-top:30px;}
.intro p{font-size:20px;}
.intro h2{font-size: 24px}

.centerBloc{position: absolute; top: 50%; transform: translateY(-50%);left: 0;}

#myVideo {position: relative;height: 400px;transform: translateY(200px);}
#myVideo .container{height: 100%;text-align: right;color:#fff;padding: 130px 70px 0 170px}

#myVideo p{font-size: 50px;}
#myVideo video{right:-60px}
#myVideo .filter{background-size:calc(100% - 60px) 100%;}


.usineHome, .fondNoirLeft, .bckNoirLeft{background-size:calc(100% - 100px) 100%;}
.usineHome .offsetLeft{padding-left: 100px}

.bckNoirLeft .container{padding-right: 260px}

.distributeurHome .centerBloc{padding:70px;}
.expertiseHome .container, .topPage .container{padding:200px 20px 100px;width:calc(100% - 100px)}
.realHome:before{content:"";width:calc(100% - 100px);}

.bckBleuRight{background-size:calc(100% - 100px) 100%;padding: 70px 0;}
.bckBleuRight .container{padding-left:170px}

.detaillant{padding-top:100px}
.detaillant h2{font-size:36px;}
.detaillant h3{font-size:20px;}


.offsetLeft{padding-left:80px}

}


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

.pad{padding:20px;}
.bigPad{padding:60px;}
#credits .bigPad {padding: 0px 60px;}


h1, .h1{font-size:36px;} h1 span, .h1 span{font-size: 20px;}
h2{font-size:18px;}
h3{font-size:16px;}
h4{font-size:14px;}
h5{font-size:12px;}
h6{font-size:10px;}

p, li{font-size: 12px}
.bt a{padding:10px 25px;font-size: 10px}

.margUp40{margin:30px 0}



header .lang{top:40px;right: 150px;}
header .logo {margin:30px 0 0 30px}
header .logo img{width:210px}

span#menuMob{right:20px;top:25px;}
#navMenu ul li {font-size: 30px}
#navMenu ul {-webkit-column-gap: 0%;-moz-column-gap: 0%;column-gap: 0%;-webkit-column-count: 1;-moz-column-count: 1;column-count: 1;}
.overlay-content{ top:100px;padding:0 40px}
.overlay .closebtn {top: 3px;right: 23px;}

header{height: 110px}
.head, header {background-size: calc(100% - 100px) 100%;}
#headhome .fonHead{width:calc(100% - 50px);background-position: center left; right:25px;top:110px;background-attachment: scroll; }

#headhome h1{font-size:60px;letter-spacing: 2px;}
#headhome h1 span{font-size: 20px;}
#headhome .centerBloc{left: 25px; background: rgba(52,53,52,0.8);padding: 20px;}

.intro .block,
#myVideo .block{display: inline-block}

#myVideo {width:100%;overflow: visible;    height: 473px;padding-left:60px;}
#myVideo video {right: calc(100% - 900px);width: 840px;}
#myVideo .container{padding:70px}

.usineHome, .fondNoirLeft , .bckNoirLeft{background-size: calc(100% - 60px) 100%;}
.usineHome .offsetLeft{padding:0  60px}


.distributeurHome .container {max-width: 75%;float: right;}
.distributeurHome .container .centerBloc{padding:50px}

.expertiseHome .container , .topPage .container{padding: 100px 40px 0px;width: calc(100% - 60px);}
.realHome:before{content:"";width:calc(100% - 60px);}
.realHome .contSml.bigPad{padding-bottom:0}
br.block{display: none}

.bckBleuRight {background-size: calc(100% - 60px) 100%;padding: 40px 0;}
.bckBleuRight .container {padding-left: 130px;}

.detaillant .contSml, .distributeur .contSml{width:85%}
.detaillant h2 {font-size: 30px;}
.detaillant h3 {font-size: 16px;}
.detaillant .bt{margin-bottom: 30px}

footer, footer .right{text-align: center}
footer .coord li{font-size:13px;margin:0 0 20px 0 ;display: block}
footer .coord li:last-child{margin-bottom:20px}
#credits p{font-size:9px;text-align: center}
#credits .flt-lf, #credits .flt-rg{text-align: center;width:100%;float:none;margin-top:10px}
.navFoot{display: none}


.page .head{height: 500px;}

.offsetLeft{padding-left:40px}
.fondNoirLeft .offsetLeft{padding-right:60px}
.fondNoirLeft{padding:100px 0 }
.imgFondRight{transform: translate(60px, 100px);background-position: center left -60px;height: 300px;margin-top: -100px}

}


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

.pad{padding:20px;}
.bigPad{padding:40px;}
#credits .bigPad {padding: 0px 40px;}

h1, .h1{font-size:30px;} h1 span{font-size: 18px;}
.home h2{font-size:15px;}
.home h3{font-size:14px;}
.home h4{font-size:13px;}
.home h5{font-size:11px;}
.home h6{font-size:9px;}

p, li{font-size: 11px}
.bt a{padding:10px 20px;font-size: 9px}
.margUp40{margin:20px 0}

header .logo{margin-top:40px}
header .logo img{width:170px}
header .lang {right:127px;top:35px;font-size:14px!important}

#headhome h1{font-size:40px;letter-spacing: 2px;}
#headhome h1 span{font-size: 16px;}

span#menuMob{background-size: 35px;}

.usineHome, .fondNoirLeft, .bckNoirLeft {background-size: calc(100% - 40px) 100%;}
.offsetLeft{padding:0 0 0 40px}


.distributeurHome .container .centerBloc{padding:30px}
.expertiseHome .container, .topPage .container {padding: 60px 30px 0px;width: calc(100% - 40px);}

.realHome .contSml.bigPad{padding:50px 0 0 0}
.realHome:before{content:"";width:calc(100% - 40px);}
.realHome .noMarg {min-height: 300px;}


.page .head{height: 350px;}
.page .head .centerBloc{text-align: center}


.bckBleuRight {background-size: calc(100% - 40px) 100%;padding: 20px 0;}
.bckBleuRight .container {padding-left: 90px;}


.detaillant h2 {font-size: 24px;}
.detaillant h3 {font-size: 14px;}

.fondNoirLeft .offsetLeft {padding-right: 40px;}
.imgFondRight{transform: translate(40px, 100px);background-position: center left -40px;height: 250px}


}


/* Overwrite form.css file */

button{text-align: center; background:#fff;font-size:15px;padding:15px 35px;border:none;color:#cd9929 !important;letter-spacing: 3px; text-decoration:none!important;font-weight: 800;-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;margin:20px auto;display: block;text-transform: uppercase}