/* Frontend editor */
.ct-widget.ct-ignition { position:fixed; left:auto; top:auto; right:20px; bottom:20px; z-index:10000; transition:all 0.5s ease 0s; }
.ct-widget.ct-ignition .ct-ignition__button { position:static; margin-top:10px;}

.ce-element { outline:2px dashed rgba(243, 156, 18, 0.5); }
.ce-element--focused, .ce-element:focus { outline:2px dashed rgba(243, 156, 18, 1); }
/**
 * General Elements
 **/

:focus, button:focus { outline:none; }

/* Images */
img, svg { max-width:100%; height:auto; }
[data-sizes] { display:block; width:100%; }
[data-bg] { background-size:cover; background-repeat:no-repeat; background-position:center center; }

/* Paragraphs */
p { margin-bottom:1em; }
p:last-child { margin-bottom:0; }

/* Link */
a { color:inherit; }
a:hover { text-decoration:none; }

/* Lists */
ul, ol { margin-bottom:0; padding:0; list-style:none; }

/* Forms */
.invalid-feedback.visible { display:block !important; }

.swiper { overflow:hidden; }

.popup-fancybox { background:var(--couleurvertfoncer); color:#fff; font-size:15px;  }
.popup-fancybox h5 { color:var(--couleuror); }

/* LEgal */
.legal table { width:100%; margin:30px 0; }
.legal table td { border:1px solid #000; padding:10px;}
.legal h1,
.legal h2,
.legal h3,
.legal h4 { margin:1em 0; }

/**
 * Layout
 **/

 /* Color */
body {
    --couleuror: #B59079;
    --couleurvertfoncer: #152324;
    --couleurvertvlaire: #3E4849;
    --couleurblanc: #F0ECEA;
    font-family: 'Poppins', sans-serif;
    font-size: 1.063rem; 
    background-color: var(--couleurblanc);
}
 /* Global */

 .ct-widget.ct-ignition,
 .ct-widget.ct-toolbox  {z-index: 1000000;}
 a {text-decoration: none; opacity: 0.9;}
 a:hover {opacity: 1; color: inherit;}
 h1{font-size: 7.5rem; font-family: 'lora'; font-weight: 400;}
 h2{font-family: 'lora'; line-height: 3.75rem; font-weight: 400;}
 h4 {font-weight: 400;}
 h3 {font-family: 'lora';font-weight: 400;}
 h2.lax { font-size:12.938rem; font-family: 'Poppins', sans-serif; line-height: 1.2; color:rgba(227, 223, 220, 0.6); text-transform: uppercase; letter-spacing: 50px; white-space:nowrap; margin-left:80%; font-weight:normal; }
#page { position:relative; width:100%; overflow:hidden; }
.index {z-index: 50;}
.active {color: var(--couleurblanc);}

.btn-fleche {display: inline-block; color: var(--couleuror); line-height: 0.6; }
.btn-fleche.droite {text-align: end;}
.btn-fleche.gauche {text-align: start;transition: all 0.4s ease 0s ;}
.btn-fleche svg {transition: all 0.4s ease 0s ;}
.btn-fleche:hover svg {width: 130px;}
.btn-fleche.gauche:hover {transform: translateX(-20px);}

.btn-carrer {color: var(--couleuror);background-color: transparent; padding: 10px 20px; border: 1px solid var(--couleuror); display: inline-block; box-shadow: inset 0 0 0 0 var(--couleuror);  transition: ease-out 0.4s; position: relative; font-family: "Poppins";}
.btn-carrer::before{position: absolute;content: "";  bottom: 0;  left: 0;  right: 0;  background-color: var(--couleuror);  overflow: hidden;  width: 0;  height: 100%;  transition: .5s ease;} 
.btn-carrer:hover::before { width: 100%; height: 100%; z-index: -1;} 
.btn-carrer:hover { color: var(--couleurblanc); z-index: 2;}
.btn-carrer.active { background-color: var(--couleuror);  overflow: hidden; color: var(--couleurblanc); }

.fancybox-content {width: 90%;}

.swipper-entete .swiper-wrapper { transition-timing-function: linear; }

/* swipper-entete */
.swipper-entete{position: relative;}
.swipper-entete::before {content: ""; position: absolute; height: 50%; top: 0; left: 0; width: 100%; background-color: var(--couleurvertfoncer);}
/* bicolor */
.bicolor {padding: 15vh 0; color: var(--couleurblanc);position: relative;}
.bicolor .svgbicolor{position: absolute; top: 100px; left: -100px; z-index: 0; width: calc(100% + 100px); pointer-events: none;}
.bicolor img {z-index: 1;}
.bicolor .bicolor-txt{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; flex-direction: column;}
.bicolor .bicolor-txt h2 {font-size: 3.125rem;}
.bicolor .bicolor-txt p {padding-right: 50px;}

/* dualcolor */
.bg-dualcolor {background: linear-gradient(to right, #152324 0% 70%, #3E4849 0%); position: relative;}
.bg-dualcolor::before {content: ""; background-color: var(--couleuror); height: 30px; width: 100%; display: block; top: 0; position: absolute;}

/* reservation */
#reservation .field {background-color: var(--couleurblanc);}
#reservation .reserv {display: flex; flex-direction: row; width: 100%; justify-content: space-between;}

/* Entete */
.entete {padding: 20vh 0; position: relative; background-color: var(--couleurblanc);}
.entete .svg{ position: absolute; top: 100px; left: -400px; pointer-events: none;}
.entete .svghotel{ position: absolute; top: 100px; left: -400px; }
.entete h2 {font-size: 3.125rem; transform: translateY(25px);}
.entete h3 {font-family: 'lora'; font-size: 1.875rem;}
.entete .entete-txt {position: absolute; background-color: var(--couleurvertfoncer); color: var(--couleurblanc); padding: 80px; right: 260px; top: 33%; width: 40vw; z-index: 2; }
.entete .btn-carrer {margin: 50px 0;}

/* Contact */
#carte {background-color: var(--couleurvertfoncer); padding-top: 100px; height: 100vmin; overflow: hidden; position: relative;}
#carte .formulaire {position: absolute; display: flex; justify-content: center; align-items: center; left: 300px; top: 150px; bottom: 50px; width: 500px; background-color: var(--couleurvertvlaire); padding: 0vh 4vh; color: var(--couleurblanc); opacity: .95; font-family: 'lora'; font-size: 1.063rem;}
#carte .form-control { border: none; border-radius: 0; width: 75%; margin: 15px 0; color: var(--couleurblanc); background: repeat url(../themes/bellevue/assets/img/underline.png); line-height: 30px;}
#carte .form-control:focus {box-shadow: initial;}
#carte .form {display: flex; justify-content: space-between; align-items: center;}
#carte path.IrIkIMOY_155 {fill: transparent;}
#carte tspan {fill: #F0ECEA;}
#carte .btn-carrer {background-color: transparent; width: 70%;}
#carte textarea {height: 10vh;}
#carte h2 {font-size: 3.125rem;}
#carte .svg {position: relative;}
#carte .svg svg.map {width: 100vw; height: 100%; max-width: inherit;}
#carte .btn-fleche.droite {position: absolute; left: 68%; top: 60%;}

/*responsive */


.hamburger-wrapper {display: none;}
.navigation {position: fixed; font-size: 2rem; justify-content: center; color: var(--couleuror); left: 0px; top:0; width: 100%; height: 100%; background-color: var(--couleurvertfoncer); z-index: 9; flex-direction: column; text-align:left; opacity:0; pointer-events:none; transition: all 0.4s ease 0s ; display:flex; max-height: 970px;}
.navigation .wrapper {height: 75vh; padding-left: 10vw; }
.navigation ul { display: flex; justify-content: space-evenly; flex-direction: column; height: 100%;}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before,
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {background-color: var(--couleuror); height: 1px;}
#header .navresp {justify-content: space-between; width: 100%;}
.navigation .svgrmenuresp {position: absolute; bottom: 0; left: 0; z-index: 0; width: 100% ;}


/* Header */
#header { overflow: hidden;position: fixed; top: 0;display: flex; align-items: center; width: 100vw; z-index: 1000; background-color: var(--couleurvertfoncer); color: var(--couleuror); height: 100px; border-bottom: rgba(240, 236, 234,.3) 1px solid;}
#header .langue { margin:0 auto; }
.navbar {display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; padding: 0;}
.navbar img {width: 75%;}
.navbar li {text-align: center; display:flex; flex-direction:column; justify-content:center; align-items: stretch; }
.navbar ul {display: flex; justify-content: space-between; width: 100%; height: 100%; align-items: stretch;}
.navbar a {display: flex; align-items: center; height: 100%; justify-content: center;}
.navbar .langue {display: flex; align-items: center;}
.navbar .reserv a {padding-left: 30px; position: relative; border-left: 1px solid rgba(240, 236, 234,.3); }
.navbar .reserv a::before {content: ""; display:block; position: absolute; left: 0; top: 0; width: 30vw; height: 100%; transform: translateX(30vw);transition: ease-out 0.4s ;}
.navbar .reserv a:hover::before {background-color: #3E4849 ;transform: translateX(0); z-index: -1;}
.reservbuton {cursor: pointer;}


#reservation {z-index: 2000; position: fixed;transition: ease-out 0.4s ; left: 0; top: 0; background-color: var(--couleurvertfoncer); width: 100%; height: 99px; display: flex; justify-content: center; align-items: center; text-align: center; transform: translateY(-120px); opacity: 0; pointer-events: none;}
#reservation .close {position: absolute; right: 200px; top: 38px; width: auto; cursor: pointer;}
#reservation.open {transform: translateY(0); opacity: 1; pointer-events: inherit;}
#reservation input {background-color: transparent; color: var(--couleurblanc); border: none;}
#reservation .row {align-items: center;}
#reservation .logoreserve {width: 75%;}
#reservation .group {white-space: nowrap; display: flex; justify-content: center; }
#reservation .group input {width:100px; text-align: center;} 
#reservation .reserv input {color: var(--couleurvertfoncer);}
#reservation .nbReserv {display: flex; justify-content: flex-end;}
#reservation .column {display: flex; flex-direction: column; white-space: nowrap; color: var(--couleurvertfoncer); font-family: 'lora'; font-size: 1.063rem;}
#reservation .legend {opacity: .5;  font-family:'Poppins' ;font-size: 0.75rem; color: var(--couleurvertfoncer);}
#reservation .jaune {color: var(--couleuror);font-family:'Poppins' ;font-size: 0.75rem;}
#reservation .inputNumber {width: 50px; text-align: center; color: var(--couleurvertfoncer);}
#reservation .right {text-align: right;}
#reservation .column button {background-color: transparent; border: none;}
#reservation .dropdown-menu.show {width: 100%; padding: 30px; border-radius: inherit; transform: translate(0px, 62px) !important;}
#reservation .dropdown-toggle::after {display: none;}
#reservation .dropdown, .dropend, .dropstart, .dropup {display: flex; flex-direction: column; justify-content: center;}
#reservation [data-validate-for] { position:absolute; font-size:10px; bottom:-1em; text-align:center; width:100%; }

/* #reservation #booking-form {position: absolute; top: 100px;} */
/* #reservation #booking-form .field {padding: 30px; color: var(--couleurvertfoncer); min-width: 320px;} */
/* #reservation button {border: none; background-color: transparent; color: var(--couleuror);} */

#heading {height: 100vh; background-color: var(--couleurvertfoncer);color: var(--couleurblanc); position: relative; min-height:950px; }
#heading::after {content: url(../themes/bellevue/assets/img/Flèche.svg); display: block; left: 50%; right: 50%; bottom: 25px; position: absolute;} 
#heading .svgheading{position: absolute; top: 200px; left: -100px; z-index: 0;width: calc(100% + 100px);}
#heading .svgservice{position: fixed; z-index: 1999; bottom: 40px; right: 0px; cursor: pointer; width: 10%; max-width:120px; }
/* #heading .svgservice::before{ width: 140px; height: 140px; content: ""; background-image: 'assets/img/service.png'; top: 0; left: 0;} */
#heading #services {opacity: 0; position: fixed; right: -500px; }
#heading #services .service {display: flex; align-items: center;}
#heading #services.open {transition: ease-out .5s ; opacity: 1;  z-index: 10; right: 0; bottom: 150px; background-color: var(--couleuror); color: var(--couleurblanc); width: 250px; display: flex; flex-direction: column; justify-content: center; align-items: stretch;}
#heading #services span {padding: 15px;}
#heading #services svg {min-width: 40px; margin-right: 10px;}
#heading .heading-block{position: relative; transform: translateY(28vh);}
#heading .imageheader {position: relative;}
#heading .imageheader::after {content:"";display: block; background-color: #000; opacity: 0.2; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.titleheader {  position: absolute; text-align: center;top: 0%; left: 50%; transform: translate(-50%, -50%);}
.paragraphheader {  position: absolute;  text-align: center; left: 50%; transform: translate(-50%, -50%); width: 100%;}
.paragraphheader p{ font-size: 3.125rem; font-family: 'lora';font-weight: 400; filter: drop-shadow(0 0 0.75rem rgb(0 0 0 / 130%));}

/* Footer */
#footer {background-color: var(--couleurvertfoncer); padding: 7vh 0; position: relative; border-top: #F0ECEA 1px solid;}
#footer:after {content: ""; background-color: var(--couleuror); height: 30px; width: 100%; display: block; bottom: 0; position: absolute;}
#footer .center {display: flex; justify-content: center;}
#footer .center ul {display: flex; color: var(--couleurblanc); padding-top: 6vh;}
#footer .center li {padding: 0 10px;}
#footer h2 {color: var(--couleuror); font-size: 1.063rem; }
#footer p {color: var(--couleurblanc); }
#footer .footertxt {display: flex; flex-direction: row; justify-content: space-between; width: 100%; padding: 7vh 0;}
#footer .picto {display: flex; flex-direction: row; justify-content: space-between; width: 65%; text-align: center;}
#footer .picto img {max-height: 100px;}
#footer .mention {font-size: 0.938rem;}


/* accueil */
#lhotel {padding: 2vh 0 15vh 0; background-color: var(--couleurblanc);}
#lhotel p{ padding-bottom: 15px;}
#lhotel h3 {font-size: 7.5rem; transform: translateX(-100px); white-space: nowrap;}
#lhotel .hoteltxt {transform: translateY(30px); position: relative;}
#lhotel .hoteltxt::after {position: absolute; content:  url(../themes/bellevue/assets/img/etoiles.svg); right: 30px; top: 0;}
#lhotel .hotel {position: relative;}
#lhotel .date-hotel {font-size: 3.75rem; color: var(--couleuror);font-family: 'italiannoregular'; line-height: 1.1; position: absolute; top: 39%; left: -20px; opacity: 0.5;}

.offres {padding: 3vh 0 15vh 0; color: var(--couleurblanc); position: relative; background-color: var(--couleurblanc); width: 100%;}
.offres.bandeauhorizon::before {content: ""; display: block; position: absolute; background-color: var(--couleuror); height: 220px; width: 100vw; top: 53%;left: 0; z-index: 0;}
.offres h3 {font-size: 3.125rem; color: var(--couleurvertfoncer); text-align: center; padding-bottom: 5vh; font-family: 'lora';}
.offres h4 {color: var(--couleuror); font-size: 1.875rem; font-family: 'lora';}
.offres .bgcolor {background-color: var(--couleurvertfoncer);}
.offres .txtoffre {padding: 30px; font-size: 0.938rem; text-align: left;}
.offres .txtoffre p {padding: 15px 0;}
.offres .swiper-slide {display: flex;}
.offres img { min-width: 100%; max-width: none; min-height: 100%; max-height: none; object-fit: cover;}
.offres .swiper-slide.swiper-slide-next,
.offres .swiper-slide.swiper-slide-prev {opacity: 0;}
.offres span.swiper-pagination-current {color: #152324; font-size: 2.5rem; font-family: 'lora';}
.offres span.swiper-pagination-total {color: var(--couleuror); font-size: 1.063rem; font-family:'Poppins' ;}
.offres span.swiper-pagination-total::before {content: "/";}
.offres .swiper-button-prev {left: 45%;  background-image: url(../themes/bellevue/assets/img/swipergauche.svg); background-repeat: no-repeat; background-position: center; }
.offres .swiper-button-next {right: 45%; background-image: url(../themes/bellevue/assets/img/swiperdroite.svg); background-repeat: no-repeat; background-position: center;}
.offres .swiper-button-next::after {content: "";}
.offres .swiper-button-prev::after {content: "";}
.offres .swiper-button-next, 
.offres .swiper-button-prev {top: inherit; bottom: 70px; color: #152324; z-index: 11;}
.offres .swiper-pagination.swiper-pagination-fraction {bottom: 70px;}

.offres #shuffle {overflow: visible !important;}
.offres.bandeauvertical {padding: 3vh 0; z-index: 3; overflow: hidden;}
.offres.bandeauvertical .rel {position: relative;}
.offres.bandeauvertical .bandeau  {display: block; position: absolute; background-color: var(--couleuror); height: 1000vh;  z-index: -1; transform: translateY(-100px); }
.offres .uneoffre {padding-bottom: 4vh;}
.uneoffre.shuffle-item.shuffle-item--visible {width: 100%;}
.offres .selectoffres {display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 3vh;}

section#popupoffre {display: none;}

.restaurant {padding: 3vh 0 15vh 0; color: var(--couleurblanc); position: relative;}
.restaurant .svgaccueilresto{ position: absolute; top: 250px; left: -100px; width: calc(100% + 100px); }
/* .restaurant .svgaccueilresto svg { position: absolute; top: 250px; left: -100px; } */
.restaurant h3 {font-size: 7.5rem; white-space: nowrap;}
.restaurant .resto-txt {transform: translateY(30px); position: relative; z-index: 51;}
.restaurant .btn-fleche.gauche {padding: 5vh 0;}
.restaurant h2.lax {color: rgba(51, 57, 58, 0.3);}
/* .restaurant img {position: relative;}
.restaurant img:after {content:"";display: block; background-color: #000; opacity: 0.2; width: 100%; height: 100%; position: absolute; top: 0; left: 0;} */

.facebook { height: 85vh; color:var(--couleurblanc); position: relative; z-index: 2; padding-top: 7vh;}
/* .restaurant .svgfb{ position: absolute; top: 150px; left: -150px; } */
.facebook h2,
.facebook-responsive h2{ font-size: 3.125rem;}
.facebook::before {background-color: #152324; opacity: 0.85; content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0;z-index: -1;}
.facebook .google {transform: translateY(40vh); text-align: end;}
.facebook .suivre {border: 1px solid var(--couleurblanc); padding: 5px 20px; transition: ease-out 0.4s;transform: translateY(3vh); display: inline-block; color: var(--couleurblanc) !important;}
.facebook .suivre svg,
.facebook .suivre:hover a{color: #000 !important;}
.facebook-responsive .suivre svg { margin-left: 10px; margin-bottom: 3px;}
.facebook .suivre::before,
.facebook-responsive .suivre::before{position: absolute;content: "";  bottom: 0;  left: 0;  right: 0;  background-color: var(--couleurblanc);  overflow: hidden;  width: 0;  height: 100%;  transition: .5s ease;} 
.facebook .suivre:hover::before,
.facebook-responsive .suivre:hover::before { width: 100%; height: 100%; z-index: -1;} 
.facebook .suivre:hover,
.facebook-responsive .suivre:hover{ color: black ; z-index: 2; fill: black; }
.facebook .suivre:hover path#Logo_Facebook,
.facebook-responsive .suivre:hover path#Logo_Facebook {fill: black; }
.facebook .eapps-facebook-feed-inner {position: absolute; width: 450px; bottom: 0; border-radius: 0; height: 75vh; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px;}
.facebook div.eapps-widget {position: initial;}
/* .facebook .trucgoogle > * {transform: translateY(160px);} */
.facebook .kGLmaL {margin: 0;}

.facebook-responsive {color:var(--couleurblanc); position: relative; z-index: 2; padding-top: 7vh; display: none; text-align: center;}
.facebook-responsive::before {background-color: #152324; opacity: 0.85; content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0;z-index: -1;}
.facebook-responsive .jqhLau {position: relative;}
.facebook-responsive .suivre {border: 1px solid var(--couleurblanc); padding: 5px 20px; transition: ease-out 0.4s;transform: translateY(1vh); display: inline-block; margin-bottom: 20px;}

/* .restaurant */

#restaurant #qualite {background-color: var(--couleurblanc); padding-bottom: 10vh; padding-top: 7vh;}
#restaurant #qualite h2{font-size: 3.125rem; padding-bottom: 3vh;}

/* hotel */
#dejeuner { padding: 7vh 0;  }
#dejeuner h2 { line-height: initial; font-size: 3.125rem; padding-bottom: 3vh;}
#dejeuner .image { height:75vh; padding: 0 100px;}
#dejeuner .image img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
#dejeuner .matin,
#dejeuner .imgmatin { opacity:1; }
#dejeuner .soir,
#dejeuner .imgsoir { opacity:0; }
/* #dejeuner .matin::after {content: url(../img/arrowdown.svg); display: block; text-align: center; transform: translateY(3vh); }
#dejeuner .soir::before {content: url(../img/arrowdown.svg); display: block; text-align: center; margin-bottom: 3vh; transform: rotate(180deg); } */

/* decouvrir */
#decouvertes .right{ margin-top: 13vh;}
#decouvertes .title {display: flex; justify-content: space-between; align-items: flex-end;}
#decouvertes h2 {font-size: 2.125rem; max-width: 75%; line-height: 2.75rem;}
#decouvertes .reponse{padding: 3vh 0;}
#decouvertes img {padding-top: 2vh;}
#decouvertes .box {padding-bottom: 5vh;}
#decouvertes {padding: 8vh 0;}

section#popupprix {display: none;}
.fancybox-content{text-align: center;}
#popupprix .cards{background-color: var(--couleurvertfoncer); color: var(--couleurblanc); padding: 40px; margin: 20px; text-align: left;}
#popupprix .cards h3{color: var(--couleuror); font-size: 3.125rem; margin-bottom: 15px;}

.legal { margin-top:100px; padding:50px 0; }
.legal h1 { font-size:2rem; }

/* blog */
#blog {padding: 7vh 0; padding-top: calc(7vh + 100px);}
#decouvrir-detail #page {position: static; overflow: initial;}
#blog .img img {position: sticky; top: calc(7vh + 100px);}
#blog h2 {font-size: 1.7rem;}
#blog h3 {font-size: 1.3rem;}
#blog li {padding: 10px 0; position: relative; padding-left: 15px;}
#blog li::before {position: absolute; content: ""; left: 0; top: 20px; height: 5px; width: 5px; border-radius: 50%; background-color: var(--couleuror);}
#decouvrir-detail a {color: var(--couleuror);}
/**
 * XXL
 **/
@media (min-width: 1400px) {
    .container-fluid { padding: 0 100px; }
}

/**
 * XL
 **/
@media (max-height: 850px) {
    #heading .heading-block {transform: translateY(25vh);}
    #heading::after {bottom: 15px;}
    #carte .formulaire {padding: 3vh;}
}

@media (max-height: 750px) {
    #heading .heading-block {transform: translateY(40vh);}
    .popup-fancybox { max-width:100%; }
}

@media (max-width: 1785px) {
    .entete .entete-txt {padding: 50px; top: 38%;}
    .entete {padding: 20vh 0 40vh 0;}

}
@media (max-width: 1700px) {

    #dejeuner .image {padding: 0;}

    #carte .formulaire {top: 120px;}
    
    #carte{height: auto;}

    #reservation .close {right: 20px;}

}


@media (max-width: 1399px) {
    .facebook .eapps-facebook-feed-inner {left: 10%;}
    
    .entete h2 {font-size: 2.7rem;}
    .entete .entete-txt {right: 50px; width: 50vw;}
    .entete .btn-carrer {margin: 30px 0;}
    .entete .entete-txt {top: 36%;}

    h2 {line-height:3rem;}


    #carte .formulaire {position: inherit; width: 100vw; left: 0; padding: 3vh 4vh 7vh 4vh; top: 0;}
    #carte .btn-carrer {width: 100%;}

    

}

/**
 * LG
 **/
@media (max-width: 1199px) {

    .facebook .eapps-facebook-feed-inner{width: 375px;}

    .entete h2 {transform: translateY(0);}
    
    .entete {padding: 10vh 0;}
    .entete .title {order: 1;}
    .entete .enteteimg {order: 2;}
    .entete .entetetxt {order: 3;}
    .entete .entete-txt {position: inherit; width: 100%;}
    .entete h2 {font-size: 3.5rem;}

    .captcha { display:flex; align-items:center; justify-content:center; }

  

    .bicolor .bicolor-txt h2{padding-bottom: 3vh;}
    .bicolor .bicolor-txt {padding-bottom: 3vh;}
    .bicolor .bicolor-txt p {padding-right: 0;}

    #footer .picto img { padding: 10px;}
    #carte h2 {font-size:2.8rem;}
    
    #dejeuner h2{font-size: 2.8rem;}

    
    .hamburger-wrapper {display: block; z-index: 20;}
    #header .navbar{display: none;}
	body.open .navigation { opacity: 1; pointer-events: auto; }
	.hamburger-wrapper {display: flex; justify-content: space-between; align-items: center; width: 100%; z-index: 10; }
	.nav{ display: flex; align-items: center; justify-content: space-between;}
    .langue {font-size: 15px;}

    .offres.bandeauvertical .bandeau {display: none;}
    


}

/**
 * MD
 **/
@media (max-width: 991px) {
    h1 {font-size: 8.5rem;}
    .paragraphheader p {font-size: 2rem;}

   .restaurant h3 {font-size: 5.5rem;}
    
    .offres .swiper-slide {flex-direction: column;}

    .offres .swiper-button-prev {left: 42%;}
    .offres .swiper-button-next {right: 42%;}


    .bicolor .bicolor-txt h2 {font-size: 2.8rem;}

    
    .facebook {display: none;}
    .facebook-responsive {display: block;}

    #dejeuner {padding: 0 2vh;}
    #dejeuner .matin {order: 1; padding: 2vh 0;}
    #dejeuner .image {order: 2;}
    #dejeuner .soir {order: 3; padding: 2vh 0;}

    #reservation {top: 100px;}
    #reservation.open {height: 50vh;}
    #reservation.open img.logoreserve{display: none;}
    #reservation .row.rowreserve {flex-direction: column; height: 50vh; justify-content: space-evenly; align-items: center; text-align: left;}
    #reservation .group {border: 1px solid #F0ECEA; padding: 7px 0; margin-top: 15px;}
    #reservation .group input {width: 100%;}
    #footer .picto {flex-wrap: wrap; width: 100%; text-align: center;}

       #lhotel{text-align: center;}
    #lhotel h3{transform: translateX(0); font-size: 4.5rem;}
     #lhotel .hoteltxt::after{right: 130px;}
     #lhotel .align-items-end {justify-content: center;}

    #heading{min-height: inherit;}
    #decouvertes h2 {font-size: 2rem;}

    #reservation .group {justify-content: space-evenly;}
    #reservation .group input {color: #fff !important;}

}

/**
 * SM
 **/
@media (max-width: 767px) {
    h1{font-size: 5.5rem;}
    h2.lax {font-size: 8rem;}

    .entete .entete-txt{ text-align: center;}

    #lhotel .hoteltxt::after{right: 30px;}

    .restaurant h3 {font-size: 3rem;}
    .restaurant .resto-txt { transform: translateY(-30px);}

    .offres .swiper-button-prev {left: 38%;}
    .offres .swiper-button-next {right: 38%;}
    .entete h2 {font-size: 2.8rem; text-align: center;}

    .fancybox-content {padding: 0 !important;}
    .offres .selectoffres {flex-direction: column;}
    .offres a.btn-carrer {margin: 1vh 0;} 

    .bicolor {padding: 7vh 0;}
    
    #footer .footertxt {flex-direction: column; text-align: center;}

    #decouvertes h2 {font-size: 1.8rem;}
    #decouvertes .right{ margin-top: 0;}

    #carte .formulaire {padding: 3vh 1vh 7vh 1vh;}
    #carte .btn-fleche.droite { left: 41%;width: 50%;}

    #dejeuner h2 {font-size: 2.3rem;}

    .navigation {font-size: 1.5rem;}

    a.logoheader {text-align: center;}
    a.logoheader img {width: 50%;}
    a.reservbuton {font-size: 0.8rem;}

    .swipper-entete .swiper-wrapper { transition-timing-function: linear; }

    #popupprix .cards h3{ font-size: 2.3rem;}
    #blog img {margin-bottom: 2vh;}
}
/**
 * XS
 **/
@media (max-width: 575px) {
    h1 {font-size: 3.7rem;}
    h2.lax {margin-left: 130%;}
    .paragraphheader p {font-size: 1.7rem;}
    .restaurant { padding: 3vh 0 8vh 0; }

    .offres .swiper-button-prev {left: 33%;}
    .offres .swiper-button-next {right: 33%;}
    .entete .entete-txt{padding: 25px; }
    
    .bicolor .bicolor-txt {text-align: center;}

    #decouvrir .reponse {text-align: center;}

    #heading::after {bottom: 70px;}

    #footer .footertxt {padding: 2vh 0;}
    #footer .center ul {flex-direction: column; text-align: center;}

    .offres .swiper-button-next, 
    .offres .swiper-button-prev, 
    .offres .swiper-pagination.swiper-pagination-fraction {bottom: 40px;}

    
    #carte .form-control {width: 70%;}

    #dejeuner .soir.resp {transform: translateY(0%); opacity: 1;}

    #lhotel .hoteltxt::after {right: 0; left: 0; top: -20px;}

    .facebook h2, .facebook-responsive h2 {font-size: 2rem; line-height: 2rem;}
}