@font-face {
    font-family: AvantGarde;
    src: url(../fonts/ITCAvantGardeLight.ttf);
    font-weight: 300;
}
@font-face {
    font-family: AvantGarde;
    src: url(../fonts/ITCAvantGardeMedium.ttf);
    font-weight: 400;
}


html,body {
    height: 100%;
    background-color: #1c1c1d;
    color: #fff;
    font-family: "Montserrat";
}

/* typo */
h1, h2, h3, h4 {
    font-weight: 600;
    
}
h1 {
    font-size: 44px;
    letter-spacing: 3px;
    font-weight: 200;
    text-transform: uppercase;
    font-family: AvantGarde, Montserrat;
}
h2 {
    font-size: 30px;
    font-weight: 200;
    font-family: AvantGarde, Montserrat;
}
h2 span {
    
}

p {
    font-weight: 200;
}

strong, b {
    font-weight: 400;
}



/* Common */
li {
    list-style: none;
}
img {
    width: 100%;
    height: auto;
}
a {
    font-size: 24px;
    text-decoration: none;
    color: inherit;
    font-weight: 200;
    letter-spacing: 2px;
}
/*a:hover, a:focus, a:visited {
    color: inherit;
    text-decoration: none;
}*/

.butn {
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    padding: 0.5% 2%;
    background-color: #fff;
    color: #000;
}
.butn:hover {
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    padding: 0.5% 2%;
}

.lnk {
    background-color: #FFA400;
    font-weight: 500;
}

.hideContent {
    position: fixed;
    top:0;left:0;bottom:0;right:0;
    width: 0;
    height: 100%;
    background-color: #fff;
    transition: width 0.6s ease-in, height 0.6s ease-in;
    overflow: hidden;
}
.hideContent.left {
    width: 100%;
}


/* ================ Header ================ */
#hideContentMenu {
    z-index: 99;
}
header {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 990;
}


header li {
    display: inline-block;
    margin:0 10px;
    font-size: 20px;
}
header a {
    font-size: 20px;
    color: #000;
    transition: color .4s;
}
header a:hover {
    color: #aaaaaa;
}

#mainNav {
    position: absolute;
    top: 0;bottom: 0;left: 50vw;right: 0;
    margin: auto;
    height: 33vw;
    width: 50vw;
}
#mainNav a {
    display: block;
    font-size: 26px;
    margin:4vw 0;
}
#mainNav a:nth-child(2) {
    margin-left: -2.6vw;
}
#mainNav a:nth-child(3) {
    margin-left: -5vw;
}
#mainNav a:nth-child(4) {
    margin-left: -7.4vw;
}
#mainNav a:nth-child(5) {
    margin-left: -10vw;
}

#mainNav a.pageActive {
    color: #aaaaaa;
    position: relative;
    cursor: not-allowed;
}
#mainNav a.pageActive:after {
    content: "";
    z-index: 2;
    position: absolute;
    top: 0;bottom: 0;left: -10px;
    margin: auto 0;
    width: 0;
    height: 2px;
    background-color: #FFA400;
    transition: width .8s;
}
.left #mainNav a.pageActive:after {
    width: 200px;
    transition: width .8s .8s;
}


.hLnkCtBtq {
    position: absolute;
    top: 0px;
    right: 0px;
}
.hLnkBtq {
    display: block;
    margin-top: 20px;
    margin-right: 20px;
    font-weight: 400;
    font-size:36px;
    letter-spacing: 10px;
}
.ttlHeadT {
    position: absolute;
    bottom: -20px;
    right: 0;
    font-size: 70px;
    letter-spacing: 3px;
    color: #000;
}

.aHeadC {
    width: 80vw;
    height: 80vw;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 130vh;
    min-height: 130vh;
}

/* Reseau Sociaux */
.hLnkCtRs{
    position: absolute;
    bottom: 20vh;
    right: 20px;
}
.hLnkCtRs a {
    width: 30px;
    margin: 10px 8px;
}

/* Mentions legales */
.hLnkCtMl{
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.hLnkCtMl a {
    font-size: 17px;
    padding-left: 20px;
}

/* MENU CALL */
#menuCall {
    z-index: 888;
    position: fixed;
    top: 20px;
    left:20px;
    cursor: pointer;
    width:70px;
}
#menuCall p {
    text-align: center;
    transition: color .4s;
    letter-spacing: 4px;
    font-weight: 300;
}
#menuCall.active p {
    color:#000;
}

#menuCall polygon {
    fill:#000;
    transition: transform .6s, opacity .4s, fill .4s;
    transform-origin: center center;
}
/**/
#menuCall:hover polygon:nth-child(1) {
    transform: translate3d(10px, 0, 0);
    fill:#FFA400;
}
#menuCall:hover polygon:nth-child(2) {
    transform: translate3d(-20px, 0, 0);
    fill:#FFA400;
}
#menuCall:hover polygon:nth-child(3) {
    transform: translate3d(16px, 0, 0);
    fill:#FFA400;
}
/**/
#menuCall.active polygon:nth-child(1) {
    transform: translate3d(-40px, 43px, 0) rotate(45deg);
}
#menuCall.active polygon:nth-child(2) {
    transform: translate3d(0, 0, 0);
    opacity: 0;
}
#menuCall.active polygon:nth-child(3) {
    transform: translate3d(-22px, -35px, 0) rotate(-45deg);
}
/**/
#menuCall.active:hover polygon:nth-child(1) {
    transform: translate3d(-40px, 43px, 0) rotate(45deg);
    fill:#FFA400;
}
#menuCall.active:hover polygon:nth-child(2) {
    transform: translate3d(0, 0, 0);
    opacity: 0;
}
#menuCall.active:hover polygon:nth-child(3) {
    transform: translate3d(-22px, -35px, 0) rotate(-45deg);
    fill:#FFA400;
}

/* ================ First Loader ================ */
#fLoadSec {
    z-index: 999;
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 1;
    transition: opacity .4s;
    color: #000;
}

#fLoadCt {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    height: 400px;
    margin:  auto 0;
    width: 45%;
}


#fLoadCt p {
    font-size: 30px;
    margin: 20px 0;

}
#fLoadCt p[valid] {
    display: inline-block;
    cursor: pointer;
    margin: 0 0px;
    max-width: 280px;
    width: 50%;
    white-space: nowrap;
    text-align: center;
    position: relative;
    margin-top: 30px;
}
#fLoadCt p[valid]:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFA400;
    width: 0%;
    margin: 0 auto;
    height: 1px;
    transition: width 0.6s 0.5s;
}
#fLoadCt.active p[valid]:after {
    width: 80%;
}

#fLoadCt p.tttlFloadC {
    font-size: 50px;
    margin-top: 10%;
    margin-left: 10%;
    margin-bottom: 50px;
}



/* ================ Asset V ================ */
.aHeadV {
    /* z-index: 10; */
    position: fixed;
    top: 0;
    bottom:0;
    height: auto;
    width: 50vw;
    height: auto;
    margin: auto;
    transition: left 1s, top 1s;
}
.ahvCent { left:25vw; }
.ahvLeft { left:-20vw; }
.ahvRight { left:70vw; }
.ahvMenu { left:0vw; }

.aHeadVin {
    position: absolute;
}

header .aHeadV {
    z-index: -1;
    position: absolute;
}
header .aHeadV .avh4{
    /* fill:#FFA400; */
}

/* First loading SVG */
.avh0{fill:none;stroke:#08090A;stroke-width:0.1;stroke-miterlimit:10;}
.avh1{fill:none;stroke:#08090A;stroke-width:0.6;stroke-miterlimit:10;}
.avh2{fill:none;stroke:#08090A;stroke-width:0.2;stroke-miterlimit:10;}
.avh3{fill:none;stroke:#08090A;stroke-width:0.3544;stroke-miterlimit:10;}
.avh4{fill:#000;}

.aHeadV line {
    opacity: 0;
}
.aHeadV polygon {
    stroke: #FFA40000;
    stroke-width: 1px;
    stroke-dasharray: 0%, 0%;
    stroke-dasharray: 100%, 100%;
    transition: stroke 0.4s, stroke-dasharray 0.3s cubic-bezier(1.000, 0, 1.000, 0);
    
}

#fLoadSec .aHeadV polygon {
    opacity: 0;
    transition: opacity 0.4s;
}

/* First loading Anime */
.loading.aHeadV polygon {
    animation: loadinV 4s infinite linear;
    stroke: #FFA400FF;
}


@keyframes loadinV {
    0%   {stroke-dashoffset: 400%;}
    100% {stroke-dashoffset: 0%;}
}


/* ================ Contact================ */
#hideContentContact {
    z-index: 88;
    /*display: none;*/
    background-color:#1c1c1d;
}
#ctcIn {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}
#hideContentContact .aHeadV {
    z-index: -1;
    position: absolute;
}
#injectForm {
    width: 60%;
    margin: auto;
}

#closeContact {
    position: absolute;
    top:10px;
    right: 10px;
    cursor: pointer;

    font-size: 40px;
    /*color: #000;*/
}

#hideContentContact form {
    /*margin:10% auto;*/
    width: 100%;
}
#hideContentContact input, #hideContentContact textarea {
    width:100%;
    resize: none;
    outline: none;
    border: none;
    padding: 0 10px 4px 10px;
    color:#fff;
}
#hideContentContact input {
    border-bottom: 1px solid #fff;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight:100;
    transition: border-bottom .2s;
    /* color: #FFA400; */
    letter-spacing: 1px;
    text-align: center;
}


.stateCtc {
    margin-bottom: 20px;
}

.inliCtc {
    display: flex;
    justify-content:center;
}

.hovCtc * {
    cursor: pointer;
    vertical-align: middle;
    cursor: pointer;
    transition: color .4s;
}
.hovCtc *:hover {
    color:#FFA400;
}


/* Radio */
#hideContentContact input[type="radio"] {
    width: initial;
}
#hideContentContact label {
    font-weight:200;
    font-size: 18px;
    letter-spacing: 2px;
    padding: 4px 10px;
    width: 50px;
}




/* Pro / Perso */

.proPersCtc .l, .proPersCtc .r {
    width: 50%;
}
.proPersCtc .l {
     text-align: right;
}
.proPersCtc .r {
    text-align: left;
}
.proPersCtc input {
    display: none;
}
.proPersCtc svg {
    width: 40px;
}
.proPersCtc svg rect {
    fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:10;
}
.proPersCtc svg path {
    fill:none;stroke:#E09C2E;stroke-width:6;stroke-miterlimit:10;
    stroke-dasharray: 122.82 122.82;
    stroke-dashoffset: 122.82;
    transition: stroke-dashoffset .4s;
}


.proPersCtc .actPP svg path {
    stroke-dashoffset: 0;
}
.proPersCtc .actPP label {
    color: #FFF;
}
.actPP.hovCtc *:hover {
    color:#FFF;
}

.proPersCtc hr {
    width: 2px;
    border: none;
    background-color: #fff;
    margin: 0 20px;

}


/* Societe */
#societeCT {
    max-height: 0px;
    opacity: 0;
    margin-bottom: 0;
    transition: opacity .4s, max-height .4s, margin-bottom .4s ;
}
#societeCT.soctVis {
    max-height: 500px;
    margin-bottom: 20px;
    opacity: 1;
}


/* Option */
.optnCtc input[type="radio"] {
    display: none;
}
.optnCtc label {
    position: relative;
}
.optnCtc label:before {
    z-index: -1;
    content: "";
    position: absolute;
    top: -5%;
    left: -3%;
    height: 110%;
    width: 0%;
    background-color: #FFA400;
    transition: width 0.4s;
}

.optnCtc input[type="radio"]:checked+label:before {
    width:50%;
}
.optnCtc input[type="radio"]:checked+label {
    color: #FFF;
}


/* Objet */
#objet {
    margin-bottom: 40px;
}


/* Text area */
.ctMsgCtc {
    background-color: #fff;
    padding: 20px;
    margin: 0 10%;
}
#hideContentContact .ctMsgCtc input {
    text-align: left;
    color: #000;
    border-bottom: 2px solid #000;
    margin-bottom: 10px;
}

#hideContentContact textarea {
    color: #000;
    border-bottom: 1px solid #fff;
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 130%;
    font-weight:200;
    transition: border-bottom .2s;
    border-bottom: 2px solid #000;
}
#hideContentContact textarea:focus, #hideContentContact input:focus {
    border-bottom: 1px solid #FFA400;
}

/* Submit */
#hideContentContact input[type="submit"] {
    width:inherit;
    cursor: pointer;
    display: block;
    margin-top: 20px;
    float: right;
    clear: both;
    transition: color .4s;
    color: #fff;
}

#hideContentContact input[type="submit"]:hover {
    color: #FFA400;
}

/* */
#contactForm .remarque { display:none; }

/* MESSEGES ERR / G */

.ctcMsgE, .ctcMsgG {
    padding: 8px 0;
    text-align: center;
    margin-bottom: 14px;
}
.ctcMsgG {
    border: green 2px solid;
    color: green;
}
.ctcMsgE {
    border: red 2px solid;
    color: red;
}


/* ================ Content AJAX ================ */
#fadeAjax {
    z-index: 10;
    min-height: 100vh;
    width: 100%;
    position: absolute;    
}
#mainAjaxCtSec {
    width: 100%;
    /* padding: 80px 5%; */
    min-height: 100%;
    transition: opacity 0.4s;
}





/* ================ Init Page Anim ================ */
/* Text */
.spanInit {
    opacity:0;
    transition:opacity 0.4s,transform 0.4s;
    transform:translate3d(30px,0,0);
    display:inline-block;
}
.spanInit.blod {
    font-weight: 400 !important;
}

/* Image */
.mskJs {
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width:100%;
    transition: height 0.4s;
}
.mskJs img {
    position: absolute;
    bottom: 0;
    left: 0;
}



/* ====================== ======================
                     Page Content
   ====================== ====================== */

.MaskAsstV {
    z-index: 2;
    position: absolute;
    top: 0;bottom: 0;left: 0;right: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    /* clip:  rect(auto, auto, auto, auto); */
    
}

.MaskAsstV p {
    position: fixed;
    /* top: 0; */
    /* opacity: 0.2; */
    /* left: 0; */
    bottom: 0px;
    right: 0;
    height: 100px;
    font-size:  100px;
    letter-spacing: 8px;
    font-weight: 300;
    margin: auto;
    color: #fff;
    text-align: center;
    transform: rotate(90deg);
    transform-origin: top right;
}

/* white weigth */
h1, .secLndHome a, .secLndHome h2, .secLndHome p,  .secLndST h2, .ctSecName a {
    font-weight: 100;
}



/* ================ Home ================ */
.accueil {

}
.accueil section {
    padding: 0 5%;
    padding-top: 60px;
    position: relative;

}
h2 {
    font-size: 26px;
    letter-spacing: 4px;
    position: relative;
    text-transform: uppercase;
    color: #fff;
    position: relative;
}
h2:after {
    content: "";
    position: absolute;
    bottom: 0;left: 0;right: 0;
    margin: 0 auto;
    bottom: -10px;
    width: 0px;
    height: 2px;
    background-color: #FFA400;
    transition: width 1s 0.8s;
}





/* ---- V assets */
.evtHImgCt img {
    z-index: -1;
}

.secEvtHome .evtHImgCt .aHeadV polygon, .valHImgCt .aHeadV polygon {
    fill: #fff;
    opacity: 0.2;
}

.secEvtHome .aHeadV polygon, .valHTxtCt .aHeadV polygon {
    fill: #FFA400;
    opacity: 0.2;
}



/* -- PRE Landing Sec */
#preLndHome {
    padding: 40vh 0;
    transition: padding 1s;
}


/* ---- Landing Section */
.secLndHome {
    position: relative;
    height: 70vh;

}

.accueil h1 {
    font-size: 60px;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 6px;
}



.lndHomeSlog {
    font-size: 20px;
    text-align: center;
    color: #FFA400;
    letter-spacing: 2px;
    /*margin-bottom: 20vh;*/
}
.lndHTCt {
    margin-top: 10vh;
    display: inline-block;
    width: 50%;
}
.lndHBras {
    padding-right: 12%;
}
.lndHBier {
    padding-left: 12%;
    text-align: right;
}
.lndHTCt h2 {
    margin-bottom: 20px;
    transition:  letter-spacing 0.4s, color 0.4s;
}

.lndHBras h2 {
    margin-left: 30px;
}
.lndHBier h2 {
    margin-right: 30px;
}
.lndHTCt h2:after {
    content: "";
    position: absolute;
    bottom: 0;left: 0;right: 0;
    margin: 0 auto;
    bottom: -10px;
    width: 0px;
    height: 2px;
    background-color: #FFA400;
    transition: width 1s 0.8s;
}

.accueil .lndHTCt h2:after {
    width: 200px;
}
.lndHTCt p {
    font-size: 14px;
    line-height: 130%;

}

.lndHTCt:hover h2 {
    color: #FFA400;
    letter-spacing: 8px;
}


/* IMG */
.lndHImgB {
    position: absolute;
    bottom: -50px;left: 0;right: 0;
    width: 24vh;
    height: 100%;
    margin: auto;
    background-color: #FFA400;
    
}
.lndHImgBCt {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.lndHImgBCt img {
    position: absolute;
    bottom: 30px;left: -100%;right: -100%;
    margin: auto;
    height: 115%;
    width: auto;
}

.lndHImgBio {
    position: absolute;
    bottom: 6%;
    left: 80%;
    width: 120%;
    height: auto;
}
.lndHImgPur {
    position: absolute;
    bottom: 50%;
    right: 50%;
    width: 70%;
    height: auto;
}
.lndHImgScl {
    position: absolute;
    bottom: 2%;
    right: 40%;
    width: 20%;
    height: auto;
}



/* ---- Nos Valeurs Section */
 section.secValHome {
    padding-top: 120px;
}

.secValHome h2 {
    margin-bottom: 60px;
    margin-left: 20%;
}
.secValHome h2:after {
    width: 300px;
    right: 10%;

}
.valHImgCt {
    z-index: -1;
    position: absolute;
    top: 300px;
    right: 0%;
    width: 60%;
}
.valHlogoCa {
    height: 30vh;
    width: auto;
    position: absolute;
    bottom: -12vh;
    right: 40%;
}

.valHTxtCt {
    /* width: 700px; */
    width: 45vw;
    height: 100%;
    margin-top: 200px;
    margin-left: 8%;
    color: #000;
    position: relative;
    padding: 40px;
    padding-bottom: 8vw;

}
.valHTxtCt .MaskAsstV {
    z-index: -1;
    background-color: #fff;
    /* clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%); */
    clip-path: polygon(0 45px, 100% 0, 100% calc(100% - 45px), 0 100%);
    -webkit-clip-path: polygon(0 45px, 100% 0, 100% calc(100% - 45px), 0 100%);
}
.valHTxtCt p {
    margin: 40px 0;
    letter-spacing: 1px;
    line-height: 160%;
    /*text-indent: 20px;*/
}
p.valHtCPLis {
    margin-bottom: 20px;
    letter-spacing: 1px;
    line-height: 160%;
}
.valHTxtCt li {
    list-style: inherit;
    margin: 8px 0;
    font-weight: 200;

}
.valHTFT {
    font-size: 22px;
    padding-bottom: 10px;
    text-transform: uppercase;
}
.valHtCAw {
    position: relative;
}
.valHtCAw div {
    z-index: 0;
    position: absolute;
    top: 0;
    left: -200px;
    bottom: 0;
    right: 70%;
    background-color: #FFA400;
}
.valHtCAw div img {
    height: 60%;
    width: auto;
    position: absolute;
    top: 20%;
    left: 10%;
}
.valHtCAw p {
    position: relative;
    z-index: 2;
    padding: 20px 0;
    padding-left: 30px;
    box-sizing: border-box;
}



/* ---- Nos Enements Section */
section.secEvtHome {
    
    color: #000;
    padding: 10vw 5% ;
    margin-bottom: 25vw;
}
.evtHBgS  {
    z-index: -1;
    position: absolute;
    top: 0;left: 0;right: 0;bottom: 0;
    background-color: #fff;
    /* clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); */
    clip-path: polygon(0 100px, 100% 0, 100% calc(100% - 100px), 0 100%);
    -webkit-clip-path: polygon(0 100px, 100% 0, 100% calc(100% - 100px), 0 100%);
}

.evtHBaseL {
    font-size: 35px;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 8vw;

}
.secEvtHome h2 {
    color: #000;
    margin-bottom: 30px;
    margin-left: 20%;
}
.secEvtHome h2:after {
    width: 200px;
}

.evtHImgCt {
    z-index: -1;
    position: absolute;
    top: 17vw;
    left: 0;
    width: 55%;
    height: auto;
}

.evtHtxtCt {
    position: relative;
    z-index: 10;
    display: block;
    width: 35%;
    margin:  40px 0;
    margin-left: 60%;
}
.evtHtxtCt p {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 160%;
}




/* ---- Footer */
.accueil footer {
    /* background-color: #000; */
    text-align: center;
}
.footLnk {
    display: block;
    padding-top: 4vw;
    padding-bottom: 6vw;
}
.accueil footer h2:after {
    width: 200px;
}
footer .ctnSocial {
    position: absolute;
    bottom: 10px;
    left: 10px;

}

.lnkRsIco {
    fill: #fff;
    width: 30px;
    margin: 0 10px;
    display: inline-block;
}





/* ================ Brasserie ================ */
.brasserie {

}
.brasserie h1 {
    margin: 160px 0 0 100px;
}

.brasserie h2 {
    margin: 20px 0 0 140px;
    text-transform: initial;
    width: 70%;
}
.brasserie main p {
    color: #000;
    line-height: 130%;
    letter-spacing: 1px;
}

.brasserie main .MaskAsstV .aHeadV polygon {
    fill: #FFA400;
    opacity: 0.2;
}
.brasserie main .MaskAsstV p {
    color: #fff;
}


/* ---- landing */
.secLndST {
    margin-bottom: 20vh;
}
.lndSTCtS {
    position: relative;
    margin: 0 10%;
    padding: 5vw;
    margin-top: 180px;
}
.lndSTCtS p {
    color: #000;
    line-height: 130%;
    letter-spacing: 1px;
}
.lndSTCtS p span {
    font-size: 18px;
    letter-spacing: 2px;
    /* margin-left: 20px; */
    margin-bottom: 4px;
    font-weight: 300;
}
.lndSTCtS .MaskAsstV {
    z-index: -1;
    background-color: #fff;
    /* clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%); */
    clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%);
    -webkit-clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%);
}


.lndSTDCT {
    position: relative;
    padding: 100px 0;
}


.lndSTPerCT p {
    width: 60%;
}

.lndSTImgP {
    position: absolute;
    right: 5vw;
    width: auto;
}

.lndSTMar .lndSTImgP {
    bottom: 1vw;
}
.lndSTSte .lndSTImgP {
    top: 1vw;
}

.lndSTImgP img {
    height: 100%;
    width: auto;
    max-height: 450px;
}

.lndSTImgP hr {
    position: absolute;
    left: -20px;
    right: -20px;
    border:  2px solid #FFA400;
}
.lndSTMar .lndSTImgP hr {
    bottom: 40px;
}
.lndSTSte .lndSTImgP hr {
    top: 40px;
}


.lndSTTravel {
    padding: 6vh 10%;
    /* left: -15vw; */
}
.lndSTTravel img {
    margin-bottom: 20px;
    /* position: relative; */
    /* left: 10vw; */
}
.lndSTTBg {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 3vw;
    bottom: 0;
    width: 22vw;
    background-color: #FFA400;
}

/* ---- Qualité */
.secQualiST {
    position: relative;
    margin: 0 10%;
    padding: 5vw;
    padding-bottom: 16vw;
}
.secQualiST h2 {
    width: 100%;
    color: #000;
    margin: 0;
    margin-bottom: 60px;
}
.secQualiST p {
    width: 100%;
    color: #000;
    margin: 0;
    margin-bottom: 20px;
}
.secQualiST .MaskAsstV {
    z-index: -1;
    background-color: #fff;
    clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%);
}

.quaCtMImg {
    position: absolute;
    left: 0vw;
    bottom: 2vw;
    width: auto;
    height: 55vw;
    max-height: 900px;
}
.quaCtMImg img {
    height: 100%;
    width: auto;
}
.quaCtMImg .quaLoImg {
    position: absolute;
    bottom: -1vw;
    left: -1vw;
    width: 80%;
    height: auto;
}


.quaCtTBio {
    width: 60%;
    margin-left: 40%;
    padding-bottom: 11vw;
}
.quaCtTBio img {
    display: block;
    width:  80%;
    margin: 0 auto;
    margin-bottom: 40px;
}

.quaCtTI {
    position: relative;
}

.pmeplogo {

    position: absolute;
    top :0;
    right: -10%;
    width: 10%;
    height: auto;
}



/* ---- Recompenses */
.secRecST {
    color: #000;
    position: relative;
    padding: 20vh;
    margin-top: -15vw;
    margin-bottom: 30vw;
}


.maRecST {
    z-index: -1;
    background-color: #fff;
    clip-path: polygon(0 100px, 100% 0, 100% calc(100% - 100px), 0 100%);
    -webkit-clip-path: polygon(0 100px, 100% 0, 100% calc(100% - 100px), 0 100%);
}

.brasserie main .recSTCtImg .MaskAsstV .aHeadV polygon {
    fill: #fff;
    opacity: 0.4;
}
.recSTCTAw {
    position: absolute;
    left: 0;
    top: 14vw;
    /* bottom: 0; */
    height: 40vw;
    width: auto;
    margin: auto;
    padding: 3vw;
    background-color: #FFA400;
}
.recSTCTAw img {
    height: 33%;
    width: auto;
    display: block;
    margin: 10px auto;
}


.recSTCtT {
    width: 50%;
    margin-left: 15vw;
    padding: 5vh 0;
}
.recSTCtT h2 {
    color: #000;
    margin-bottom: 40px;
}
.recSTCtT h2:after {
    width: 300px;
}



.recSTCtImg {
    z-index: -1;
    position: absolute;
    right: 0;
    top: 6vw;
    height: 40vw;
    width: auto;
}
.recSTCtImg img {
    height: 100%;
    width: auto;
}





/* ================ Bieres ================ */
.bieres {

}

.bieres h1 {
    position: absolute;
    top: 40px;
    left: 80px;
    right: 55%;
    font-size: 38px;
    text-align: center;

}

.bieres h2 {
    color: #000;
    padding-top: 10vh;
    margin-bottom: 20px;
    font-weight: 400;
}
.bieres h2:after {
    width: 200px;
    right: inherit;
    left: 10%;
}

/* ------- Content */
.secCtPrds {
    /*z-index: 1;
    position: absolute;
    top: 0; bottom: 0; left: 0; right:  0;*/
    width: 100%;
    height: 100vh;
}
.divCtPrd {
    display: none;
}
.currentPrdCtn {
    display: block;
}

/* Txt */
.prdtxtMCt {
    position: absolute;
    top: 0; right: 0;
    width: 50%;
    height: 80%;
    
    color: #000;
}
.prdtxtCt {
    position: relative;
    height: 100%;
    padding:0 20px;
}
.prdTxtCBg {
    z-index: -1;
    position: absolute;
    top: 0;left: 0;right: 0;bottom:  0;
    background-color: #fff;
    /* clip-path: polygon(0 0%, 100% 0, 100% 95%, 0 100%); */
    clip-path: polygon(0 0px, 100% 0, 100% calc(100% - 50px), 0 100%);
    -webkit-clip-path: polygon(0 0px, 100% 0, 100% calc(100% - 50px), 0 100%);
}

.prdTSlog {
    position: absolute;
    top: 0px;
    left: -10px;
    width: 24vh;
    height: 12px;
    font-size: 12px;
    letter-spacing: 1px;
    margin: auto;
    text-align: center;
    transform: rotate(90deg);
    transform-origin: top left;
    color: #FFA400;
}


.prdTxtDecC {
    margin-top: 10vh;
    margin-left: 14vh;
}
.prdTxtDecC p {
    font-size: 20px;
}
.prdTxtDecC p span {
    /*font-weight:400;*/
}
p.prdTxtDT {
    font-size: 15px;
    line-height: 120%;
    letter-spacing: 1px;
    width: 80%;
}
.prdtxtCt hr {
    width: 200px;
    height: 1px;
    background-color: #FFA400;
    position: relative;
    left: -20%;
    border: none;
    margin: 20px 0;
}
.prdIbu {
    cursor: help;
}


/* Img */
.prdImgCt {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    width: 26vh;
    height: 76%;
    margin: auto;
    background-color: #FFA400;
}
.prdImgCt img {
    position: absolute;
    bottom: 6%;
    left: -100%;
    right: -100%;
    margin: auto;
    height: 92%;
    width: auto;
}
.prdImgIbu {
    position: absolute;
    bottom: 8vh;
    left: -4vh;
    width: 18vh;
    fill: #fff;
}
.prdMedalCt {
    margin-top: -4vw;
    margin-left: 15vh;
}
.prdMedalCt img {
    width: 13%;
    height: auto;
}


/* ------- Name */
.ctSecName {
    z-index: 1;
    position: absolute;
    top: 150px;  left: 0; 
    width: 42%;
    height: calc(100% - 150px);
    padding: 0 3%;
    /*padding-bottom: 20px;*/
    overflow: scroll;
}
.ctSecName::-webkit-scrollbar { 
    display: none; 
}
/*.ctSecName:after {
    content: "";
    position: fixed;
    top: 0;
    left: 10%;
    right: 20%;
    height: 2px;
    background-color: #FFA400;
}*/
.ctSecNamP {
    border-left: 1px solid #FFA400;
    padding-left: 20px;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 30px;
}
.ctSecName p {
    position: absolute;
    top: 0;
    left: -10px;
    letter-spacing: 2px;
    transform: rotate(90deg);
    transform-origin: top left;
    color: #FFF;
}
/*.ctSecName p:before {
    content: "- ";
}
.ctSecName p:after {
    content: " -";
}*/
.ctSecName a {
    position: relative;
    display: block;
    text-transform: uppercase;
    margin: 0.8vh 0;
    margin-left: 0;
    letter-spacing: 3px;
    font-size: 17px;
    transition:  letter-spacing 0.4s, margin-left  0.4s, color 0.4s;
    font-weight: 400;
}
.ctSecName a span{
    font-weight: 100;
}
.ctSecName a:hover {
    color: #FFA400;
}


.ctSecName a::before { 
    z-index: -1;
    content: "";
    position: absolute;
    top: -5%;
    left: -3%;
    height: 110%;
    width:0%;
    background-color: #FFA400;
    transition: width 0.4s;
}

.ctSecName a.currentPrd { 
    color: #FFf;
    margin-left: 10px;
    letter-spacing: 4px;
    /* font-weight: 400; */
    position: relative;
}
.ctSecName a.currentPrd::before {
    width:20%;
}


/* nav mobile */
.navMPrds {
    z-index: 90;
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    /*height: 40px;*/
    margin: auto 0;
}
#nextPrd {
    right: 0;
    height:80px;
    /*width: 40px;*/
}
#prevPrd {
    left: 0;
    height:80px;
    /*width: 40px;*/
}

#nextPrd img, #prevPrd img {
    width: auto;
    height: 100%;
}


/* ------- Aside */
#callHelp {
    z-index: 18;
    position: fixed;
    top: 20px;
    right: 40px;
    font-size: 60px;
    cursor: pointer;
    color: #000;
}
.bieres aside {
    z-index: 20;
    color:#000;
}
#helpIn {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
}
#closeHelp {
    position:absolute;
    top: 40px;
    right: 40px;
    width: 40px;
    color:#000;
    cursor:pointer;
}
#closeHelp svg {
    width: 100%;
}
.helpCtLeft {
    position: absolute;
    top: 15%;
    left: 0%;
    bottom: 0;
    width: 47%;
    background-color: #FFA400;
    padding: 4vw;
    padding-left: 6%;
}

.helpctRight {
    position: absolute;
    top: 25%;
    right: 5%;
    width: 40%;
    bottom: 0;
}
#imgVMalt {
    position: absolute;
    top:5%;
    bottom: 0;
    right: 5%;
    height: auto;
    width: 40vw;
    margin: auto;
}

.hlpCBT {
    margin-bottom: 40px;
    max-width: 540px;
}
.hlpCBT h3 {
    font-family: AvantGarde, Montserrat;
    margin-bottom: 10px;
    letter-spacing: 3px;
    font-size: 22px;
}
.hlpCBT h3 span {
    font-weight: 300;
    letter-spacing: 1px;
}

/* ================ Evenements ================ */



/* ================ Contact ================ */
.contact {

}

.secCtcCT {
    color: #fff;
    text-align: center;
    padding: 10vh 0;
}

.secCtcCT h1 {
    margin-bottom: 10vh;
    color: #fff;
}
.secCtcCT a {
    /*display: block;*/
    font-size: 26px;
    cursor: pointer;
    letter-spacing: 2px;
    padding: 10px 0;
    position: relative;
}
.secCtcCT a:before {
    content: "" !important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    width: 0;
    background-color: #FFA400;
    z-index: -1;
    transition: width .4s;
}

.secCtcCT a:hover:before {
    width: 50%;
}

.secCtcCT p {
    font-size : 15px;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 30px 0;
    color: #FFA400;
}

.secTrvCT {
    width: 100%;
    position: relative;
    padding-top: 15vh;
}

.secTrvCT .MaskAsstV {
    z-index: -1;
    background-color: #fff;
    clip-path: polygon(0 100px, 100% 0, 100% calc(100% - 100px), 0 100%);
    -webkit-clip-path: polygon(0 100px, 100% 0, 100% calc(100% - 100px), 0 100%);
}
.secTrvCT h1 {
    color:#000;
    text-align: center;
    margin-bottom: 4vh;
}

.ctcTrIM {
    display: flex;
}
.ctcTInfo {
    text-align: right;
    width: 50%;
    padding: 0 2%;
}

.secTrvCT p {
    color: #000;
    margin-bottom: 20px;
    line-height: 130%;
    letter-spacing: 1px;
    font-size: 16px;
}
.secTrvCT p span {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
}

.secTrvCT hr {
    width: 60%;
    height: 1px;
    background-color: #FFA400;
    border: none;
    margin: 20px 0;
    margin-left: 40%;
}

.ctcMap {
    height: 100%;
    width: 60%;
}

.secPart {
    width: 50%;
    position: relative;
    margin-left: 10%;
    margin-bottom: 10vh;
    padding: 12vh 5vh;
    color:#000;
}
.secPart .MaskAsstV {
    z-index: -1;
    background-color: #fff;
    clip-path: polygon(0 50px, 100% 0, 100% calc(100% - 50px), 0 100%);
    -webkit-clip-path: polygon(0 50px, 100% 0, 100% calc(100% - 50px), 0 100%);
}
.secPart h1 {
    margin-bottom: 0px;
}
.secPart p {
    margin-bottom: 40px;
}
.secPart li {
    letter-spacing: 2px;
    font-size: 20px;
    margin: 10px;
}

/* ================ Mention Légales ================ */
.mentionslegales section {
    width: 80%;
    margin: 100px 10%;
}
.mentionslegales section h2 {
    margin: 40px 0 20px 20px;
}
.mentionslegales section p {
    margin-bottom: 10px;
}
.mentionslegales section a {
    color:#FFA400;
    font-size: 16px;
}

/* ================ Media queri ================ */
/* Small Screen */
@media screen and (max-width: 1440px) {
    h2 {
        font-size: 23px;
    }

    /* Header */
    .ttlHeadT {
        font-size: 60px;
    }
    #mainNav a {
        display: block;
        font-size: 25px;
    }
    .hLnkCtRs a {
        width: 25px;
    }


    .MaskAsstV p {
        font-size: 80px;
        height:80px;
    }

    
    /* Accueil */
    .accueil h1 {
        font-size: 50px;
    }
    .lndHTCt p {
        font-size: 13px;
    }
    .lndHomeSlog {
        font-size: 18px;
    }

    .valHTxtCt p, .evtHtxtCt p, .valHTxtCt li {
        font-size: 14px;
    }

    .evtHBaseL {
        font-size: 32px;
    }


    /* brasserie */
    .brasserie main p {
        font-size: 15px;
    }
    .secQualiST h2 {
        font-size: 18px;
        letter-spacing: 2px;
    }
    .quaCtMImg {
        bottom: 5vw;
        left: -2vw;
    }
    .recSTCtT {
        width: 65%;
        margin-left: 8vw;
    }
    .lndSTImgP img {
        max-height: 340px;
    }



    /* Bieres */
    .prdTSlog {
        height: 10px;
        font-size: 10px;
        letter-spacing: 0.5px;
    }
    .bieres h2 {
        padding-top: 8vh;
    }
    .prdTxtDecC p {
        font-size: 16px;
    }
    .prdtxtCt hr {
        margin: 15px 0;
    }
    .prdTxtDT {
        font-size: 16px;
    }
    .ctSecName {
        top: 125px;
        height: calc(100% - 125px);
    }
    .ctSecName p {
        font-size: 14px;
    }
    .ctSecName a {
        /* font-size: 2.5vh; */
        font-size: 14px;
        letter-spacing: 2px;
    }
    .ctSecName a.currentPrd {
        letter-spacing: 3px;
    }

    /* Contact */
    .ctcCTMain h1 {
        font-size: 42px;
    }

}

/* ================ Media queri  ================ */
/* Vertical */
@media screen and (max-width: 1025px) {
    .hLnkBtq {
        font-size:30px;
        letter-spacing: 8px;
    }

    h1 {
        font-size: 38px;
    }
    .lndHTCt p {
        font-size: 12px;
    }
    .lndHImgB {
        height: 64%;
        width: 22vh
    }
    .lndHImgPur {
        bottom: 30%;
    }
    .lndHImgBio {
        width: 105%;
    }
    .valHTxtCt {
        width: 55vw;
        padding-bottom: 10vw;
    }
    .valHTxtCt .MaskAsstV {
        clip-path: polygon(0 55px, 100% 0, 100% calc(100% - 55px), 0 100%);
        -webkit-clip-path: polygon(0 55px, 100% 0, 100% calc(100% - 55px), 0 100%)
    }
    .valHtCAw div {
        left: -130px;
    }
    .valHtCAw div img {
        height: 30%;
        top: 35%;
        left: 10%;
    }
    .valHlogoCa {
        right: 12%;
    }
    section.secEvtHome {
        padding: 12vw 5%;
        margin-bottom: 10vw;
    }

    /* Brasserie */
    .lndSTCtS {
        margin: 0 6%;
        margin-top: 110px;
    }
    .brasserie main p {
        font-size: 14px;
    }
    .lndSTImgP {
        right: 2vw;
        height: 32vw;
    }
    .lndSTImgP img {
        max-height: 350px;
    }
    .secQualiST {
        margin: 0 6%;
        padding-bottom: 12vw;
    }
    .quaCtTBio img {
        margin-bottom: 20px;
    }
    .quaCtMImg {
        bottom: 2vw;
        height: 74vw;
        left: -5vw;
    }
    .secRecST {
        padding: 14vw 0;
    }
    .recSTCtT {
        width: 45%;
        margin-left: 22vw;
    }
    .recSTCtImg {
        top: 10vw;
    }
    .ctSecName a {
        font-size: 1.4vw
    }
    .prdTxtDecC {
        margin-top: 10px;
        margin-left: 10px;
    }
    .prdtxtCt hr {
        left: 0;
    }
    .prdImgCt {
        width: 24vh;
        height: 75%;
    }


    .bieres h2 {
        padding-top: 20px;
        font-size: 
    }

    /* aside biere */
    #helpBeer {
        overflow: scroll;
        padding-top: 120px;
    }
    .helpCtLeft, .helpctRight {
        position: relative;
        width: 100%;
        padding: 10%;
        top: inherit;
        right: inherit;
        left:inherit;
        bottom: inherit;
    }
    #closeHelp {
        z-index: 20;
        font-size: 40px;
    }

    /* contact */
    .secTrvCT {
        padding-bottom: 10vh;
    }
}


/* ================ Media queri  ================ */
/* Ipad Vertical */
@media screen and (max-width: 770px) {
    #fLoadCt {
        height: 80vh;
        top: 10%;
        bottom: inherit;
        width: 90%;
        left: 5%;
        right: 5%;
    }
    #fLoadCt div {
        width: 60%;
        margin-left: 30%;
        margin-top: 50%;
    }
    #fLoadCt p {
        font-size: 20px;
        margin: 7px 0;
    }
    #fLoadCt p[valid] {
        margin-top: 10px;
    }
    #fLoadCt p.tttlFloadC {
        font-size: 40px;
    }


    h1 {
        font-size: 34px;
        left: 65px;
        top: 60px;
    }
    h2 {
        font-size: 21px;
    }


    .aHeadV {
        width: 70vw;
    }
    .ahvCent { left:15vw; }
    .ahvLeft { left:-40vw; }
    .ahvRight { left:60vw; }
    .ahvMenu { left:-20vw; }



    .ttlHeadT {
        font-size: 45px;
        bottom: -12px;
    }


    /* Accueil */
    .lndHomeSlog {
        margin-bottom: 10vh;

    }
    .lndHImgB {
        height: 48%;
    }
    .lndHBras {
        padding-right: 5%;
    }
    .lndHBier {
        padding-left: 5%;
    }
    .secValHome h2 {
        margin-left: 10%;
    }
    .valHTxtCt {
        width: 76vw;
        margin-left: 8%;
    }
    .valHTxtCt .MaskAsstV {
        clip-path: polygon(0 76px, 100% 0, 100% calc(100% - 76px), 0 100%);
        -webkit-clip-path: polygon(0 76px, 100% 0, 100% calc(100% - 76px), 0 100%);
    }
    .valHtCAw div {
        left: -110px;
    }
    .valHtCAw div img {
        height: 26%;
        top: 37%;
        left: 10%;
    }

    section.secEvtHome {
        padding: 16vw 5%;
    }
    .evtHImgCt {
        top: 30vw;
        width: 42%;

    }
    .evtHtxtCt {
        width: 45%;
        margin-left: 45%;
    }

    /* Brasserie */
    .lndSTCtS {
        margin-top: 70px;
    }
    .lndSTMar .lndSTImgP {
        bottom: 80px;
    }
    .quaCtMImg {
        bottom: 200px;
    }
    .secQualiST {
       padding: 80px 5vw;
    }
    .brasserie h2 {
        margin: 20px 0 0 50px;
    }
    .recSTCTAw {
        top: 28vw;
        height: 35vw;
    }
    .secLndST {
         margin-bottom: 2vh; 
    }



    /* Produits */
    /*
    .ctSecName a {
        font-size: 14px;
        letter-spacing: 0.6px;
        margin:  6px 0;
    }

    .prdImgIbu {
        width: 11vh;
    }
    .prdImgCt {
        width: 18vh;
        height: 58%;
        left: 9%;
    }
    .prdTxtDecC {
        margin-top: 2vh;
        margin-left: 4vh;
    }
    .prdTSlog {
        width: 50vh;
    }
    .prdMedalCt img {
        display: inline-block;
        width: 40%;
    }
    .prdMedalCt {
        margin-top: -24vh;
    }
*/







 /* Bieres */
    .bieres h1 {
        position: relative;
        left: 0;
        top: 0;

        margin-top: 40px;
        margin-left: 140px;
        margin-bottom: 40px;
        font-size: 22px;
        text-align: left;
    }
    .navMPrds {
        display: block;
    }

    .ctSecName {
        position: initial;
        top: inherit;
        left: inherit;
        width: 100vw;
    }
    .ctSecNamD {
        width: 920px;

        display: inline-flex;
        /*flex-wrap: wrap;*/
        justify-content: center;
        /*justify-content: space-around;*/
        align-items: stretch;
    }
    .ctSecNamP {
        border-left: none;
        padding-left: 2%;
        min-width: 220px;
    }
    .ctSecNamP nav {
        margin-top: 10px;
        padding-top: 16px;
        /*border-top: 1px solid #FFA400;*/
        border-left: 1px solid #FFA400;
        padding-left: 10px;
    }
    .ctSecName p {
        left: 15px;
    }

    .secCtPrds {
        position: relative;
        top: inherit;
        left: inherit;
        width: 100%;
        /*height: 700px;*/
        overflow: hidden;
    }
    .prdtxtMCt {
        position: relative;
        width: 90%;
        height: inherit;
        margin-left: 10%;
    }

    .bieres h2:after {
        width: 50px;
        right: inherit;
        left: 10%;
    }
    .prdtxtCt hr {
        width: 140px;
    }
    .prdTxtDecC p {
        font-size: 14px;
        /*clear:both;
   float:left;*/
    }
    p.prdTxtDT {
        width: 100%;
    }
    .ctSecName a.currentPrd {
        letter-spacing: 2px;
    }
    .ctSecName a {
        font-weight: 300;
    }
    .prdMedalCt {
        margin-left: 0;
        margin-top: -60px;
        width: 70%;
    }

    .prdImgCt {
        position: relative;
        top:0;
        left: inherit;
        bottom: 0;
        right: 0;
        height: 550px;
        margin:0 auto;
        width: 40%;
    }
    .prdTxtDecC {
        padding-bottom: 80px;
        margin-left: 0px;
    }

    aside h3 {
        font-size: 19px;
    }
    aside p {
        font-size: 14px;
    }
    .secCtPrds {
        height:inherit;
    }
    .prdTSlog {
        width:250px;
    }



    /* Contact */
    .ctcCTMain {
        display: block;
    }
    .contact section {
        width: 100%;
        /*padding: 25vw 10vh;*/

        margin:0;
        margin-bottom: 4vw;
    }
    .ctcTrIM {
        display: block;
    }
    .ctcTInfo, .ctcMap {
        width: 100%;
    }
    .contact section .MaskAsstV {
            clip-path: polygon(0 100px, 100% 0, 100% calc(100% - 100px), 0 100%);
    -webkit-clip-path: polygon(0 100px, 100% 0, 100% calc(100% - 100px), 0 100%);
    }



    /* form contact */
    /*#injectForm {
        width:100%;
    }*/
    #injectForm {
        width:100%;
    }
    #hideContentContact form {
        width:100%;
    }
    .proPersCtc hr {
        margin: 0;
    }
    #hideContentContact label {
        font-size:16px;
    }
    .ctMsgCtc {
        margin: 0;
    }
    #hideContentContact input {
        font-size: 16px;
    }
}


/* ================ Media queri  ================ */
/* mobile Vertical */
@media screen and (max-width: 580px) {

    #menuCall {
        top: 10px;
        left: 10px;
        width: 40px;
    }
    #menuCall p {
        font-size: 12px;
    }
    #mainNav {
        width: 50vw;
    }
    #mainNav a:nth-child(2) {
        margin-left: -5vw;
    }
    #mainNav a:nth-child(3) {
        margin-left: -9vw;
    }
    #mainNav a:nth-child(4) {
        margin-left: -15vw;
    }
    #mainNav a:nth-child(5) {
        margin-left: -20vw;
    }
    .aHeadC {
        width: 70vw;
        height: 70vw;
        min-width: 100vh;
        min-height: 100vh;
    }
    .hLnkCtRs a {
        display: block;
    }
    .hLnkCtMl {
        bottom: 40px;
    }

    #mainNav a {
        font-size: 22px;
    }
    .ttlHeadT {
        font-size: 26px;
        bottom: -20px;
    }
    .hLnkCtRs {
        bottom: 11vh;
    }
    .ahvMenu {
        left: -20vw;
    }

    .left #mainNav a.pageActive:after {
        width: 155px;
    }

    .MaskAsstV p {
        font-size: 20px;
        height: 60px;
    }

    /* accueil */
    .accueil h1 {
        font-size: 30px;
    }
    .lndHomeSlog {
        margin-bottom: 3vh;
    }
    .accueil section.secLndHome {
        height: initial;
        padding-top: 100px;

    }
    .lndHBras, .lndHBier {
        padding: 0;
    }

    .lndHTCt {
        width: 100%;
        text-align: center;
        margin: 2vh 0;
    }
    .valHImgCt {
        width: 80%;
    }
    .lndHBras h2, .lndHBier h2 {
        margin-right: 0;
        margin-left: 0;
    }
    .lndHImgB {
        position: relative;
        bottom: initial;left:  initial; right: initial;
        height: 40vh;
        width: 15vh;
        margin-bottom: 40px;
    }
    .lndHImgBCt img {
        bottom: 15px;
        height: 110%;
    }

    .valHTFT {
        font-size: 19px;
    }
    section.secValHome {
        padding-top: 85px;
    }
    .valHTxtCt {
        width: 90vw;
        margin-left: 0%;
    }
    .valHtCAw div {
        position: relative;
        bottom: initial;left:  initial; right: initial;
    }
    .valHTxtCt .MaskAsstV {
        clip-path: polygon(0 90px, 100% 0, 100% calc(100% - 90px), 0 100%);
        -webkit-clip-path: polygon(0 90px, 100% 0, 100% calc(100% - 90px), 0 100%);
    }
    .valHTxtCt p, .evtHtxtCt p, .valHTxtCt li  {
        font-size: 12.5px;
        line-height: 140%;
        font-weight:300;
    }
    .valHImgCt {
        top: 230px;
    }

    section.secEvtHome {
        padding: 28vw 5%;
    }
    .valHTxtCt {
        padding: 60px 10px;
    }
    .evtHImgCt {
        position: relative;
        bottom: initial;left:  initial; right: initial;top:  initial;
        width: 90%;
        margin:  0 auto;
    }
    .valHtCAw p {
        padding: 0px 0;
        padding-left: 0px;
    }
    .evtHtxtCt {
        width: 90%;
        margin-left: 5%;
    }
    .footLnk {
        margin-bottom: 100px;
    }

    /* Brasserie */
    .brasserie h1 {
        margin: 60px 0 0 85px;
    }
    .brasserie h2 {
        margin: 20px 0;
    }
    .brasserie p {
        /*text-align: justify;*/
    }
    .brasserie .secLndST h2 {
        margin: 20px 5%;
        width: 90%
    }
    .brasserie .secRecST h2 {
        margin:20px auto;
    }
    .recSTCtT h2:after {
        width: 150px;
    }
    .lndSTPerCT p {
        width: 100%;
    }
    .lndSTSte .lndSTImgP, .lndSTMar .lndSTImgP {
        position: inherit;
        right:inherit;
        bottom: inherit;
        height: inherit;
    }
    .lndSTImgP img {
        max-height: inherit;
        width: 60%;
        height: auto;
        margin:0 auto;
        display: block;
    }
    .lndSTTravel {
        padding: 20px 0;
    }
    .lndSTTBg {
        left: -5vw;
    }
    .quaCtTBio {
        width: 100%; 
        margin-left: 0; 
    }
    .quaCtMImg {
        position: inherit;
        bottom: inherit;left: inherit;
        display: none;
    }
    .secQualiST {
        padding-bottom: 100px;
    }
    .secRecST {
        margin-top: -100px;
    }
    .recSTCTAw {
        position: inherit;
        white-space: nowrap;
        top:inherit;
    }
    .quaCtMImg .quaLoImg {
        position: absolute;
        bottom: -1vw;
        left: 24vw;
        width: 50%;
        height: auto;
    }
    .recSTCTAw img {
        height: auto;
        width: 33%;
        display: inline-block;
        padding: 4px 10px;
        margin:0;
    }
    .recSTCtT {
        width:90%;
        margin: 20px 5%;
    }
    .recSTCtImg {
        position: inherit;
        top:inherit;
        height: inherit;
        width: 80%;
        margin: 0 auto;
    }
    .recSTCtImg img {
        width: 100%;
        height: auto;
    }

    /* Bieres */
    .bieres h1 {
        margin-left: 90px;
    }
    .bieres h2 {
        font-size: 18px;
    }
    .navMPrds {
        display: block;
    }

    .ctSecName {
        position: initial;
        top: inherit;
        left: inherit;
        width: 100vw;
    }

    .ctSecNamD {
        width: 920px;

        display: inline-flex;
        /*flex-wrap: wrap;*/
        justify-content: center;
        /*justify-content: space-around;*/
        align-items: stretch;
    }
    .ctSecNamP {
        border-left: none;
        padding-left: 2%;
        min-width: 220px;
    }
    .ctSecNamP nav {
        margin-top: 10px;
        padding-top: 16px;
        /*border-top: 1px solid #FFA400;*/
        border-left: 1px solid #FFA400;
        padding-left: 10px;
    }
    .ctSecName p {
        left: 15px;
    }

    .secCtPrds {
        position: relative;
        top: inherit;
        left: inherit;
        width: 100%;
        /*height: 700px;*/
        overflow: hidden;
        z-index: 10;
    }
    .prdtxtMCt {
        /*width: 90%;*/
    }

    .bieres h2:after {
        width: 50px;
        right: inherit;
        left: 10%;
    }
    .prdtxtCt hr {
        width: 140px;
    }
    .prdtxtCt p {
        font-size:14px;
    }
    .prdTxtDecC p {
        font-size: 12px;
        display: block;
    }
    p.prdTxtDT {
        width: 100%;
    }
    .ctSecName a.currentPrd {
        letter-spacing: 2px;
    }
    .ctSecName a {
        font-weight: 300;
    }
    .prdMedalCt {
        margin-left: 0;
        margin-top: -60px;
        width: 70%;
    }

    .prdImgCt {
        left: initial;
        right: 0px;
    }

    /* Contact */
    .contact section {
        padding: 52vw 4vh;
    }

}