html {
  scroll-behavior: smooth;
}

  @font-face {
    font-family: "open-sans";

    src: url('font/OpenSans-Light.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('font/OpenSans-Light.ttf') format('truetype');
  }

  body {
    margin: 0; 
    font-family: "open-sans";
}  

                    @media (orientation: portrait) { 
                        .fixbar { width: 15%;}
                    }


                    @media (orientation: landscape) {
                        .fixbar { width: 5%;}
                    }

.fixbar {
    height: 100vh;
    position: fixed; /* Stay in place */
    z-index: 6; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #691b23; 
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    float: left;
    overflow: hidden; /* Hide scrollbars */
    text-align: center;
}

.sidenav {
    height: 100vh; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 5; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 5%;
    background-color: #691b23; 
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    font-weight: bold; transition: .2s ease-in;
}
  


                    @media (orientation: portrait) { 
                        #sousSectionChambres { margin-left: 15%; }
                        #sousSectionChambres a { margin-left: 9%; font-size: 2.5vw;}
                        .sidenav a { margin-left: 18%; font-size: 4.5vw;}
                        #inMenu-Chambres { margin-left: 18%; font-size: 4.5vw;}
                    }


                    @media (orientation: landscape) {
                        #sousSectionChambres { margin-left: 15%; }
                        #sousSectionChambres a { margin-left: 0; font-size: 1vw; }
                        .sidenav a { margin-left: 0; font-size: 1.5vw;}
                        #inMenu-Chambres { margin-left: 0; font-size: 1.5vw;}
                    }


#sousSectionChambres a {
  padding:1;
  line-height: 0.6em;
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    color: #818181;
    display: block;
    transition: 0.3s;
    transition: .2s ease-in;
    overflow: hidden;
}

#inMenu-Chambres{
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    color: #818181;
    display: block;
    transition: 0.3s;
    transition: .2s ease-in;
    overflow: hidden;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}
  
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 2vw;
    margin-left: 50px;
}

#main {       
    margin-left: 5%; 
    text-align: center;
}


/* Menu Button */

                    @media (orientation: portrait) { 
                        .menuContainer { font-size: 1.8vw; }
                    }


                    @media (orientation: landscape) {
                        .menuContainer { font-size: 0.6vw; }
                    }

.menuContainer {
    display: inline-block;     
    color: white;
    text-align: center;
    width: 35px;  
    text-align: center; font-weight: bold; transition: .2s ease-in;
}

.menuContainer:hover { 
    color: #d99e0b;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px 0;
    transition: 0.4s;
}
  
.change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
}
  
.change .bar2 {
    opacity: 0;
}
  
.change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
}

                    @media (orientation: portrait) { 
                        #reserverButton { font-size: 2vw; }
                    }


                    @media (orientation: landscape) {
                        #reserverButton { font-size: 0.9vw; }
                    }

#reserverButton {
    width: 100%;
    writing-mode: vertical-lr;
    text-orientation: upright;
    background-color: #1f3855;
    color: white;  
    font-weight: bold; 
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    padding: 20px 0 20px 0;
    transition: .2s ease-in;
    margin-top: 40%;
    font-variant: normal; 
}


#reserverButton:hover {
    color: #d99e0b;
}

#buttonsSection {
    margin-top: 100%;
    width: 100%;
    padding: 0;
    text-align: center;
    align-items: center; cursor: default; 
}

#buttonsSection ul {
    list-style: none;
    padding: 0;
    list-style-type: none;    
    align-items: center;
    cursor: default;
}

#buttonsSection a {
  cursor: default;
}

                    @media (orientation: portrait) { 
                        #languageSection { font-size: 3vw; }
                        #languageSection li { margin-bottom: 10%; }
                    }


                    @media (orientation: landscape) {
                        #languageSection { font-size: 0.8vw; }
                        #languageSection li { margin-bottom: 0; }
                    }

#languageSection {
    margin-top: 180%;
    width: 100%;
    padding: 0;
    color: white;
    text-align: center;
    align-items: center; 
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}
    
#languageSection ul {  
    list-style: none;
    padding: 0;
    list-style-type: none;    align-items: center;
}

#languageSection li {   
    margin-left: 0; 
    color: white;  
    transition: .2s ease-in
}

#languageSection a:hover {  
    color: #d99e0b; 
}

#languageSection a {
    text-decoration: none; 
    color: white; 
    cursor: default; 
    transition: .2s ease-in;
}

                    @media (orientation: portrait) { 
                        #contacterButton { font-size: 2.1vw; }
                    }


                    @media (orientation: landscape) {
                        #contacterButton { font-size: 1vw; }
                    }

#contacterButton {
    height: 3%;
    width: 20%;
    position: fixed; /* Stay in place */
    z-index: 6; /* Stay on top */
    bottom: 0; /* Stay at the top */
    right: 5%;
    background-color: #691b23; 
    padding: 10px; /* Place content 60px from the top */
    text-align: center;
    color: white;
    vertical-align: middle; font-weight: bold; transition: .2s ease-in;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

#contacterButton:hover {
    color: #d99e0b;
}

                    @media (orientation: portrait) { 
                        .icon { font-size: 6vw; }
                    }


                    @media (orientation: landscape) {
                        .icon { font-size: 1.5vw; }
                    }

.icon {   
    margin-left: 0; 
    margin-bottom: 15px; 
    color: white; 
    transition: .2s ease-in; 
    cursor: default;
}

.icon:hover {  
    color: #d99e0b; 
    cursor: default; 
}

#main-bienvenue {
    width: 100%;
    
}

                    @media (orientation: portrait) { 
                        #main-bienvenue {
                            height: 65vh;
                        }
                    }

                    @media (orientation: landscape) {
                        #main-bienvenue {
                            height: 100vh;
                        }
                    }

#background_cycler {
    padding:0;
    margin:0;
    height: 100%; 

    width: auto;
    max-width: 100%;

    position: relative; 
    top:0;
    left:0;
    z-index:-1;
    
}



#background_cycler img {
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#background_cycler img.active {
    z-index:3;
}

                    @media (orientation: portrait) { 
                        #bienvenue-menutriangle { display: none;}
                        #menutriangle-container { display: none;}
                    }


                    @media (orientation: landscape) {
                        #bienvenue-menutriangle { display: block;}
                        #menutriangle-container { display: block;}
                    }

#bienvenue-menutriangle {
    width: 0;
    height: 0;
    border-top: 50vh solid transparent;
    border-bottom: 50vh solid transparent;
    border-left: 20vw solid rgba(105,27,35,.85);
    position: relative;
    top: 0;
    left: 0;
    float:left;
    z-index: 2;
}

#menutriangle-container {
    position:absolute;
    width: 15vw;
    float:left;
    top: 30vh;
    left: 5%;
    text-align: left;
    padding-left: 20px;
    font-size: 1.1vw;
    z-index: 3;
  }

#menutriangle-container ul {
    list-style: none;
    padding: 0;
    list-style-type: none;    
    align-items: center;
}

#menutriangle-container li {   
    margin-left: 0; 
    margin-bottom: 15px; 
    color: white;  
    transition: .2s ease-in;
}

#menutriangle-container a:hover {  
    color: #d99e0b; 
}

#menutriangle-container a {
    text-decoration: none; 
    color: white; 
    cursor: default; 
    transition: .2s ease-in;
}

.main-section {
    width: 100%;
    margin: 0;
    padding: 25px 25px 25px;
    box-sizing: border-box;
    overflow: hidden;
}

                    @media (orientation: portrait) { 
                        .main-section { height: 62vh; padding-left: 15%;}
                    }

                    @media (orientation: landscape) {
                        .main-section { height: 100vh; padding-left: 30px;}
                    }

.main-section h1 {
    margin:0;
    font-weight: bold;
    font-size: 2.1vw;
    color:#1f3855;
}

#main-visiter h1 {
    color: white;
}

#main-casa-miasto {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 85%, rgba(31,56,85,1) 85%);
    
}

#main-casa-miasto img{
    float: left;
    border-radius: 8px;
    max-width: 30%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    margin-top: 5%;
}

#text-container-casamiasto {
    background: rgba(31,56,85,1);
    border-radius: 10px;
    float: right;
    width: 65%;
    color: white;
    padding: 2%;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box;

     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
     margin-top: 5%;

}

                    @media (orientation: portrait) { 
                        #main-casa-miasto p { font-size: 1.6vw; }
                    }


                    @media (orientation: landscape) {
                        #main-casa-miasto p { font-size: 1.1vw; }
                    }

#main-casa-miasto p {
    
    width: 100%;
    text-wrap: pretty;
    line-height: 1.5em;
    color: white;
    text-align:justify;
    text-justify: distribute;
}

#main-nos-chambres {
    background: rgb(253,253,253);
    background: linear-gradient(90deg, rgba(253,253,253,1) 0%, rgba(216,216,216,1));
}

#conteneur-chambres {
    margin-left: 3%;
    margin-top: 10%;
}

.chambre-section-small {
    width: 18%;
    background-color: white;
    float: left;
    margin-right: 2%;
    box-shadow: 5px 5px 5px #bfbfbf;
    overflow: hidden;
    transition: transform .2s;
   
}

.chambre-section-small:hover {
    transform: scale(1.10);
}

.chambre-section-small h1 {
    margin-top: 4%;
}

                    @media (orientation: portrait) { 
                        .chambre-section-small { border-radius: 10px; height: 32vh; }
                        .chambre-section-small h2 { font-size: 2.2vw;; }
                        .chambre-section-small a { font-size: 1.8vw; }
                        .chambre-section-small img { height: 50%; }
                    }


                    @media (orientation: landscape) {
                        .chambre-section-small { border-radius: 30px; height: 50vh;}
                        .chambre-section-small h2 { font-size: 1.2vw; }
                        .chambre-section-small a { font-size: 1vw; }
                        .chambre-section-small img { width: 100%; }
                    }

.chambre-section-small p {
    padding-left: 5%;
    padding-right: 5%;
}


.chambre-section-small a {
    text-decoration: none;
    color: darkgrey;
    font-weight: bold;
    transition: .2s ease-in;
}

.chambre-section-small a:hover {
    color: #d99e0b;    
}



#main-espace-bien-etre {
    background: rgb(255,255,255);
    
}

                        @media (orientation: portrait) { 
                            #main-espace-bien-etre {background: linear-gradient(270deg, rgba(255,255,255,1) 75%, rgba(217,158,11,1) 75%);}
                        }


                        @media (orientation: landscape) {
                            #main-espace-bien-etre {background: linear-gradient(270deg, rgba(255,255,255,1) 85%, rgba(217,158,11,1) 85%);}
                        }

#text-container-espacebienetre {
    background: #d99e0b;
    border-radius: 10px;
    float: left;
    width: 65%;
    color: black;
    padding: 2%;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    margin-top: 5%;
}


                    @media (orientation: portrait) { 
                        #main-espace-bien-etre p { font-size: 1.9vw; font-weight: normal; }
                    }


                    @media (orientation: landscape) {
                        #main-espace-bien-etre p { font-size: 1.1vw; font-weight: bold;}
                    }

#main-espace-bien-etre p {
    width: 100%;
    float: left;
    text-wrap: pretty;
    line-height: 1.5em;
    text-align:justify;
    text-justify: distribute;
}

#main-espace-bien-etre img{
    float: right;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;    
}

                    @media (orientation: portrait) { 
                        #main-espace-bien-etre img { margin-top: 12%; width: 30%;}
                    }


                    @media (orientation: landscape) {
                        #main-espace-bien-etre img { margin-top: 1%; width: 25%;}
                    }

#main-espace-bien-etre a{
    text-decoration: none;
    color: black;
    font-weight: bold;
    transition: .2s ease-in;
}

#main-espace-bien-etre a:hover{
 color:#1f3855;
}

#main-se-restaurer {
    background: rgb(253,253,253);
    background: linear-gradient(90deg, rgba(253,253,253,1) 0%, rgba(216,216,216,1));
}

#main-se-restaurer p {
    
    text-align: left;
    width: 95%;
}

#section-plats {
    width: 100%;
    height: 14%;
    display: block;
    overflow: hidden;
}

                    @media (orientation: portrait) { 
                        #section-plats img { width: 8%; }
                        .restau-soussection { font-size: 1.05vw;}
                        #main-se-restaurer p { font-size: 1.6vw;}
                    }


                    @media (orientation: landscape) {
                        #section-plats img { height: 100%; }
                        .restau-soussection { font-size: 0.7vw; }
                        #main-se-restaurer p { font-size: 1.1vw; font-weight: bold; }
                    }

#section-plats img{
    border-radius: 4px;
}


.restau-soussection {
    width: 30%;
    height: 15%;
    margin-left:3%;
    margin-top: 5%;
    float: left;
    
}

.restau-soussection h3{
    color: #1f3855;
    font-size: 1vw;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:#1f3855;
    margin-bottom: 2%;
    
}

.restau-soussection a{
text-decoration: none;
color:#d99e0b;
font-weight: bold;
transition: .2s ease-in;
}

.restau-soussection a:hover{
 color:#1f3855;
}

.restau-icons {
    color:#d99e0b;
    font-size: 1vw;
}

.restau-style {
    font-weight: bold;
}

.jourS {
    font-weight: bold;
}

#main-visiter {
    background: rgb(31,56,85) url('images/ours.png') no-repeat bottom left; 
    color: white;
}

                        @media (orientation: portrait) { 
                            #main-visiter {background-size: 60%;}
                        }


                        @media (orientation: landscape) {
                            #main-visiter {background-size: 25%;}
                        }

#invit-blog {
    float:right;
    font-size: 1.3vw;
    margin: 3% 5% 0 0;
}

#invit-blog a {
    text-decoration: none;
    color: black;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
        font-size: 1.6vw;
        transition: .2s ease-in;
}

#invit-blog a:hover {
    color:#d99e0b;
    -webkit-text-stroke-color: #d99e0b;
}

#text-container-visiter {
    width: 100%;
    text-align:justify;    line-height: 1.5em;
    text-justify: distribute;
}


                    @media (orientation: portrait) { 
                        .visite-section {width: 18%; margin: 20% 2% 2% 2%;}
                        #text-container-visiter { font-size: 2vw; margin-top: 12%; }
                        .visite-section { font-size: 1.4vw; margin-top: 5%;}
                    }


                    @media (orientation: landscape) {
                        .visite-section {width: 20%; margin: 2%;}
                        #text-container-visiter { font-size: 1.1vw; margin-top: 3%;}
                        .visite-section { font-size: 1vw; margin-top: 5%;}
                    }

.visite-section {
    display: inline-block;
    color:#d99e0b;
}

.visite-section p {
    height: 5%;
}

.visite-section img {
    width: 100%;    
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


                    @media (orientation: portrait) { 
                        #footer { height: 28vh; }
                        #footer-textcontainer { font-size: 1.4vw;}
                    }


                    @media (orientation: landscape) {
                        #footer { height: 35vh; }
                        #footer-textcontainer { font-size: 0.9vw;}
                    }

#footer {
    width: 100%;
    margin: 0;
    padding: 30px 25px 25px 25px;
    box-sizing: border-box;
    background-color: black;
    background: url('images/cagire-footer.png') black;
    background-position: right bottom;
    background-size: contain;
    background-repeat: no-repeat;
}

#footer-textcontainer {
    color: white;
    float: left;
    margin-left: 10%;
}

/* FORMS ---- ------------*/

                    @media (orientation: portrait) { 
                        .popup-title { font-size: 2.2vw; }
                    }


                    @media (orientation: landscape) {
                        .popup-title { font-size: 1vw; }
                    }

.popup-title {
    color:white;
    float:left; 
    display:inline
}

/* RESERVER FORM POPUP */


                    @media (orientation: portrait) { 
                        #popup-reserver { width: 90vw; left: 5%; top: 5%; border-radius: 8px; }
                    }


                    @media (orientation: landscape) {
                        #popup-reserver { width: 80vw; left: 10%; top: 10%; border-radius: 20px;}
                    }

#popup-reserver {    
    height: 80vh;
    background: rgb(31,56,85);
    background: linear-gradient(135deg, rgba(31,56,85,1) 0%, rgba(66,104,147,1) 100%);
    border: none;
    position: absolute;
    display:none;
    padding: 1% 1% 0 1%;
    box-sizing: border-box;
}

#popup-reserver-container {
    width: 100%;
    height: 100%;
}

                    @media (orientation: portrait) { 
                        #reserver-close { font-size: 5vw; }
                    }


                    @media (orientation: landscape) {
                        #reserver-close { font-size: 2vw; }
                    }

#popup-reserver-container-top {
    width: 100%;
    height: 7%;
    vertical-align: middle;
    text-align: justify;
    text-justify: distribute;

}

#popup-reserver-container-top2 {
    width: 100%;
    height: 20%;
    vertical-align: middle;
    overflow: hidden;

}

#reserver-close {
    float: right;
    font-weight: bold;
}

#popup-reserver-container-form {
    width: 100%;
    height: 63%;

}

#popup-reserver-container-form-1 {
    width: 50%;
    height: 100%;
    float: left;
    overflow: hidden;
}

#popup-reserver-souscontainer-form-A1 {
    width: 50%;
    height: 100%;
    float: left;
    overflow: hidden;
    padding-left: 10%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

#popup-reserver-souscontainer-form-A2 {
    width: 50%;
    height: 100%;
    float: right;
    overflow: hidden;
    padding-right: 10%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
   
}

#popup-reserver-container-form-2 {
    width: 50%;
    height: 100%;
    overflow: hidden;
    float: right;
    border-left: solid 1px white;
    padding-left: 5%;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */ 
}

#popup-reserver-container-bottom {
    width: 55vw;
    height: 10%;
    float: right;
}

#nbpersonnesReserv {
    width: 15%;
}


                        @media (orientation: portrait) { 
                            #datepicker { width: 100%; font-size: 1.5vw; }
                        }

                        @media (orientation: landscape) {
                            #datepicker { width: 80%;}

                        }


                        @media (orientation: portrait) { 
                            #datepicker-datepicker { width: 70%; margin-left: 15%; font-size: 1vw; }
                        }


/* CONTACT FORM POPUP*/

                        @media (orientation: portrait) { 
                            #popup-contacter { width: 90vw; left: 5%; top: 5%; border-radius: 8px; }
                        }


                        @media (orientation: landscape) {
                            #popup-contacter { width: 30vw; left: 65%; border-top-right-radius: 20px; border-top-left-radius: 20px; bottom:0;}
                        }

#popup-contacter {    
    height: 70vh;
    background: rgb(31,56,85);
    background: linear-gradient(135deg, rgba(31,56,85,1) 0%, rgba(66,104,147,1) 100%);

    border: none;
    position: absolute;
    
    
    display:none;
    padding: 1% 1% 0 1%;
    box-sizing: border-box;
}

#popup-contacter-container {
    width: 100%;
    height: 100%;
}

#popup-contacter-container-top {
    width: 100%;
    height: 8%;
    vertical-align: middle;
}

                    @media (orientation: portrait) { 
                        #contacter-close { font-size: 5vw; }
                    }


                    @media (orientation: landscape) {
                        #contacter-close { font-size: 2vw; }
                    }

#contacter-close {
    float: right;
    font-weight: bold;
}

.close-button {
    color: white;
    transition: .2s ease-in;
}

.close-button:hover {
    color: #d99e0b; 
}

#popup-contacter-container-form {
    width: 100%;
    height: 82%;
    max-height: 82%;
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
    padding: 0 20px 0 20px;
}

#popup-contacter-container-bottom {
    height: 10%;
    float: right;
}

                    @media (orientation: portrait) { 
                    .submit-button { font-size: 2vw; }
                    #popup-contacter-container-bottom { width: 100%;}
                    }


                    @media (orientation: landscape) {
                    .submit-button { font-size: 1vw; }
                    #popup-contacter-container-bottom { width: 100%;}
                    }

.submit-button {
    background-color: #d99e0b;
    border-radius: 5px;
    padding: 5px;
    border: none;
    color: white;
    text-align: center;
    vertical-align: middle;
    height: 60%;
    float: right;
    margin-right: 5%;
    transition: .2s ease-in;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

                        @media (orientation: portrait) { 
                            #submit-button-reserver { width: 30%; font-size: 4vw;}
                            
                            #submit-button-contact { width: 40%; font-size: 4vw; }
                        }
    
    
                        @media (orientation: landscape) {
                            #submit-button-reserver { width: 15%; }
                            
                            #submit-button-contact { width: 35%; }
                        }


.submit-button:hover {
    color:#1f3855;
}

.window-popup {
    width: 100%;
    height: 100%;
    position:fixed;
    z-index: 10;
    background: rgba(0,0,0,0.7);
    top:0;
    left:0;
    display:none;
}

                    @media (orientation: portrait) { 
                        .form-text { font-size: 2vw; }
                        .highlight { font-size: 2.2vw; }
                    }


                    @media (orientation: landscape) {
                        .form-text { font-size: 0.9vw; }
                        .highlight { font-size: 1.1vw; }
                    }

.form-text {
    color: #eee;
    text-align: left;
    text-justify: distribute;
    margin-top: 10px;
    padding: 0 ;
}

.highlight {
    color:#d99e0b;
    font-weight: bolder;
}

                    @media (orientation: portrait) { 
                        .form-group label { font-size: 2vw; }
                    }


                    @media (orientation: landscape) {
                        .form-group label { font-size: 1vw; }
                    }

.form-group {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 5px;
    color: white;
    width: 100%;
    max-height: 40%;
    overflow: hidden;
    font-size: 1vw;
  

            label {
              transition: all 0.3s ease;
              float: left;             
              margin-bottom: 5px;
              height: 1.1em;
            }

            textarea{
                  resize: none;
                  height: 100%;
            }

          
            input, textarea, select {
              transition: all 0.3s ease;
              display: block;
              padding: 8px 14px;
              width: 100%;
              box-sizing: border-box;
              
              background-color: #303245;
            border-radius: 12px;
            border: 0;
              color: white;

              &:focus {
                outline: none;
                
                +label {
                  color: #d99e0b;
                }
              }
            }
}

.form-group-reserver {
    width: 80%;
}

.help-block
{
    display: none;
    border-radius: 4px;
    color: #e85151;
    float:right;
}

                        @media (orientation: portrait) { 
                            .help-block { font-size: 3.5vw; }
                        }


                        @media (orientation: landscape) {
                            .help-block {     font-size: 1.2vw;
                            }
                        }

.alert-success {
    display: none;
    width: 60%;
    margin-left: 20%;
    background-color: rgb(72, 215, 72, 0.6);
    border-radius: 15px;
    color: white;
    text-align: center;
    vertical-align: middle;    
    padding:2%;
}

#alert-success-contact {
    margin-top: 40%;
}

                        @media (orientation: portrait) { 
                            .alert-success{ font-size: 3vw; }
                        }


                        @media (orientation: landscape) {
                            .alert-success {     font-size: 1vw;
                            }
                        }


/* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES */
/* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES */
/* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES */
/* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES *//* CHAMBRES */

#container-chambre {
    margin: 0;
    padding: 0;
    background: rgb(189,189,189);
    background: linear-gradient(0deg, rgba(189,189,189,1) 0%, rgba(255,255,255,1) 100%);
    overflow:hidden;
}

                        @media (orientation: portrait) { 
                            #container-chambre{     height: 140vh;
                            }
                        }


                        @media (orientation: landscape) {
                            #container-chambre {         height: 160vh;
                            }
                        }

#mosaic {
    height: inherit;
    position: absolute;
    margin-left: 0;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 20px;    
}


                        @media (orientation: portrait) { 
                            #mosaic{     width: 25%; }
                        }


                        @media (orientation: landscape) {
                            #mosaic {         width: 20%; }
                        }


.mos-toucan {
    background: url('images/mosaic/toucan.png');
}

.mos-paon {
    background: url('images/mosaic/paon.png');
}

.mos-perroquet {
    background: url('images/mosaic/perroquet.png');
}

.mos-grue {
    background: url('images/mosaic/grue.png');
}
.mos-colibris {
    background: url('images/mosaic/colibris.png');
}

#section-txt-chambre {    
    background-color: white;
    float: right;    
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 20px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    margin-right: 0; 
    z-index: 4;
    text-align: left;
    position: relative;
}


                            @media (orientation: portrait) { 
                                #section-txt-chambre{     width: 65%; padding: 3%; font-size: 1.9vw; margin-top: 5%; margin-bottom: 10%;}
                                #section-txt-chambre p { font-size: 1.9vw; }

                                .chambre-pres { color:#d99e0b; font-size: 1.9vw; }
                                .chambre-prix { color: #1f3855; font-size: 1.7vw; font-weight: bold; }
                                .chambre-info { color: #1f3855; font-size: 1.7vw; font-weight: bold; }
                            }


                            @media (orientation: landscape) {
                                #section-txt-chambre { width: 48%; padding: 2%; font-size: 1.2vw; margin-top: 2%; margin-bottom: 10%; }
                                #section-txt-chambre p { font-size: 1.2vw; }

                                .chambre-pres { color:#d99e0b; font-size: 1.4vw; }
                                .chambre-prix { color: #1f3855; font-size: 1vw; font-weight: bold; }
                                .chambre-info { color: #1f3855; font-size: 1vw; font-weight: bold; }
                            }

.column {
    float: left;
    width: 20%;
    margin-top: 1%;
  }
  
/* SLIDES CHAMBRES */ /* SLIDES CHAMBRES */ /* SLIDES CHAMBRES */ /* SLIDES CHAMBRES */ /* SLIDES CHAMBRES */ /* SLIDES CHAMBRES */ /* SLIDES CHAMBRES */ /* SLIDES CHAMBRES */
/* The Modal Slides (background) (slides de los cuartos) */

#slide-chambre {
    float: left;
    background: rgba(31,56,85, 0.60);
    border-radius: 10px;
    margin-top: 5%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 20px;
    z-index: 4;
    position: relative;
    display: block;
    padding: 2%;
}

                    @media (orientation: portrait) { 
                        #slide-chambre{ width: 60%; margin-left: 20%;}
                    }


                    @media (orientation: landscape) {
                        #slide-chambre { width: 42%; margin-left: 4%; }
                    }

  
/* Modal Content  (slides de los cuartos)*/
.modal-content {
    position: relative;
    margin: auto;
    padding: 0;
    width: 100%;
    height: auto;
}
  
  
.mySlides {
    display: none;
}
  
.cursor {
    cursor: pointer;
}
  
/* Next & previous buttons (slides de los cuartos)*/
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
  
/* Position the "next button" to the right (slides de los cuartos)*/
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: 0;
}
  
/* On hover, add a black background color with a little bit see-through (slides de los cuartos)*/
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
  
/* Number text (1/5 etc) (slides de los cuartos) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}
  
#myModal img {
    margin-bottom:0;
}
  
.caption-container {
    background-color: black;
}
  
.demo {
    opacity: 0.6;
}
  
.active, .demo:hover {
    opacity: 1;
}
  
#myModal img.hover-shadow {
    transition: 0.3s;
}
  
#myModal .hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


                            @media (orientation: portrait) { 
                                #main h1{ font-size: 3.5vw; }
                            }


                            @media (orientation: landscape) {
                                #main h1 { font-size: 2.2vw; }
                            }


/* FIN DE SLIDES CHAMBRES */ /* FIN DE SLIDES CHAMBRES */ /* FIN DE SLIDES CHAMBRES */ /* FIN DE SLIDES CHAMBRES */

#chambres-nav {
    height: 5vh;
    overflow: hidden;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

                            @media (orientation: portrait) { 
                                #chambres-nav img {height: 50%;}
                                #chambres-nav {width: 30%; margin-left: 35%;}
                            }


                            @media (orientation: landscape) { 
                                #chambres-nav img {height: 100%;}
                                #chambres-nav {width: 20%; margin-left: 40%;}
                            }

.nav-ch-label-prec {
    width: 4%;
    display: inline-block;
    text-align: center;
    color:#1f3855;
    font-size: 0.5vw;
}

.nav-ch-label-suiv {
    width: 4%;
    display: inline-block;
    text-align: center;
    color:#1f3855;
    font-size: 0.5vw;
}

#nav-ch-prec {
    float: left;
    text-align: left;
}

#nav-ch-prec a {
    float: left;
    cursor: default;
}

#nav-ch-suiv a {
    float: right;
    cursor: default;
}

#chambres-nav ion-icon:hover {
    color:#d99e0b;
}

#nav-ch-suiv {
    float: right;
}

#chambres-nav ion-icon {
    color:#1f3855;
    transition: .2s ease-in;
}


                        @media (orientation: portrait) { 
                            #chambres-nav ion-icon { font-size: 3vw; }
                        }


                        @media (orientation: landscape) { 
                            #chambres-nav ion-icon { font-size: 1.8vw; }
                        }


/*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*/
/*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*/
/*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*//*CONTACT*/

#container-contact {
    margin: 0;
    padding: 0;
    background: rgb(189,189,189);
    background: linear-gradient(0deg, rgba(189,189,189,1) 0%, rgba(255,255,255,1) 100%);
    overflow:hidden;
}

                        @media (orientation: portrait) { 
                            #container-contact{ height: 100vh;}
                        }


                        @media (orientation: landscape) {
                            #container-contact { height: 120vh;}
                        }

#contact-oiseaux {
    height: 5%;
    margin-top: 2%;
}
                                @media (orientation: portrait) { 
                                    #contact-oiseaux img {height: 40%;}
                                    #contact-oiseaux {width: 50%; margin-left: 25%;}
                                }
                           
                                @media (orientation: landscape) { 
                                    #contact-oiseaux img {height: 80%;}
                                    #contact-oiseaux {width: 35%; margin-left: 32.5%;}
                                }

#content-contact {   
    margin-top: 2%;
    background: rgba(0, 0, 0, 0.5);
    height: 70%;
    border-radius: 50px;
    padding: 2%;
    box-sizing: border-box;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}



#contact-titre, .contact-section {
    color: #d99e0b;
}

                                @media (orientation: portrait) { 
                                    #content-contact { width: 70%; margin-left: 20%; font-size: 2.5vw; }
                                    #contact-titre { font-size: 3vw; }
                                    .contact-section { font-size: 2.5vw;}
                                }

                                @media (orientation: landscape) { 
                                    #content-contact {width: 70%; margin-left: 15%; font-size: 1.1vw;}
                                    #contact-titre { font-size: 1.5vw; }
                                    .contact-section { font-size: 1.3vw; }
                                }

/* Parte menciones legales, basado esencialmente en contacto*/

#container-mentions {
    margin: 0;
    padding: 0;
    background: rgb(189,189,189);
    background: linear-gradient(0deg, rgba(189,189,189,1) 0%, rgba(255,255,255,1) 100%);
    overflow:hidden;
}

#content-mentions {   
    margin-top: 2%;
    margin-bottom: 4%;
    background: rgba(0, 0, 0, 0.5);
    
    padding: 2%;
    box-sizing: border-box;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    text-align: justify;
    text-justify: distribute;
}

                                @media (orientation: portrait) { 
                                    #content-mentions { width: 80%; margin-left: 15%; font-size: 2.5vw; border-radius: 10px; }
                                }

                                @media (orientation: landscape) { 
                                    #content-mentions {width: 70%; margin-left: 15%; font-size: 1.1vw; border-radius: 50px;}
                                }

.mention-sante-spa {
    font-weight: bold;
    color: #d99e0b;
}

.link-mentions {
    text-decoration: none;
    color:#d99e0b;
}

#tarifs-table {
    width: 100%;
    font-size: 0.7em;

    border-collapse: collapse;
    margin: 15px 0;
    font-family: sans-serif;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);

}


#tarifs-table thead tr {
    background-color: #1f3855;
    color: #ffffff;
    text-align: left;
    font-size: 0.85em;
}

#tarifs-table td {
    padding: 2px 3px;
}

#tarifs-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.price {
    text-align: center;
}