button{-webkit-appearance:none;appearance:none;background:transparent;border:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;line-height:inherit;cursor:pointer;}
@font-face {
font-family: "Pinyon Script", serif,"Roboto";
font-weight: 400;
src: url(../fonts/PinyonScript-Regular.woff2) format('woff2'), url(../fonts/PinyonScript-Regular.ttf);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
scrollbar-width: none;
}
body {
overflow-y: auto;
scroll-behavior: smooth;
background-color:#FFF;
}
section {
width: 100%;
min-height: 100vh;
background-color: rgba(0, 0, 0, 0.2);
}
* > .owl-prev, * > .owl-next {
outline: none;
}
nav {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
z-index: 100;
left: 0px;
display: flex;
flex-direction: column;
background-color: #1A3A20;
transform: translateY(-100%);
}
nav .btn-close {
position: absolute;
top: 30px;
left: 30px;
z-index: 10;
display: flex;
align-items: center;
font-family: 'Poppins';
color: #FCF8F2;
font-size: 1.33em;
line-height: 1;
text-transform: uppercase;
}
nav .btn-close .lines {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 30px;
height: 26px;
margin-right: 30px;
}
nav .btn-close .lines span {
display: block;
width: 100%;
height: 2px;
background-color: #FCF8F2;
}
nav .btn-close .lines span:nth-child(1) {
transform: translateY(12px);
}
nav .btn-close .lines span:nth-child(2) {
transform: translateY(-12px);
}
nav .logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0px;
width: 15vw;
display: block;
}
nav .logo img {
display: block;
width: 100%;
height: auto;
}
nav .site-config {
position: absolute;
top: 30px;
right: 5vh;
display: flex;
}
nav .site-config span {
margin-left: 40px;
text-transform: uppercase;
font-size: 1.33em;
font-family: "Poppins";
line-height: 1;
color: #FFF;
cursor: pointer;
}
nav ul {
width: 100%;
height: max-content;
display: flex;
flex-direction: column;
align-items: center;
list-style: none;
overflow-y: auto;
position: absolute;
bottom: 10vh;
left: 10vh;
}
nav ul li {
display: block;
width: 100%;
padding: 20px 0px;
border-bottom: 2px solid #1D3B21;
}
nav ul li a , nav ul li button {
display: block;
font-size: 3.33em;
width: max-content;
color: #FEDA9F;
text-align: left;
transition: all 0.9s cubic-bezier(0.075, 0.82, 0.165, 1);
font-family: 'Cormorant Garamond';
text-transform: uppercase;
line-height: 1;
transform: translateY(150%);
opacity: 0;
}
nav ul li a:hover , nav ul li button:hover {
letter-spacing: 0.5em;
color: #FCF8F2;
}
nav .social {
position: absolute;
bottom: 5vh;
right: 0px;
z-index: 10;
opacity: 0;
display: flex;
}
nav .social a {
display: block;
margin-right: 30px;
}
nav .social a img {
display: block;
width: 25px;
}
nav .ratings-badges {
position: absolute;
bottom: 30px;
left: 40px;
z-index: 10;
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
nav .rating-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
text-decoration: none;
opacity: 0;
}
nav .rating-badge img {
display: block;
width: 22px;
height: 22px;
object-fit: contain;
filter: brightness(0) invert(1);
}
nav .rating-badge span {
font-family: "Poppins";
font-size: 0.85em;
color: #ffffff;
font-weight: 400;
text-align: center;
}
nav .rating-badge span small {
font-size: 0.75em;
opacity: 0.8;
}
.menu_mobile {
display: none;
width: max-content;
position: fixed;
top: 20px;
left: 30px;
z-index: 12;
text-transform: uppercase;
color: #1D3B21;
font-family: "Poppins";
font-size: 1.17em;
transition: all .3s ease-in-out;
}
.my-app {
position: relative;
background-color: #FFF;
overflow: hidden;
}
.my-app .header {
position: absolute;
top: 0px;
width: 100%;
left: 0px;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
align-items: stretch;
font-family: 'Poppins';
}
.my-app .header .left {
display: flex;
position: relative;
align-items: center;
}
.my-app .header .left::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
transform: translateY(100%);
width: 44vw;
height: 1px;
background-color: #FFF;
opacity: .5;
}
.my-app .header .left .menu_toggle {
width: 80px;
height: 80px;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 28px 20px;
cursor: pointer;
}
.my-app .header .left .menu_toggle span {
display: block;
width: 100%;
height: 2px;
background-color: #1D3B21;
transition: all .5s ease-in-out;
}
.my-app .header .left .menu_toggle:hover span:nth-child(1) {
transform: translateY(-3px);
}
.my-app .header .left .menu_toggle:hover span:nth-child(3) {
transform: translateY(3px);
}
.my-app .header .left .menu_toggle:hover ~ span {
left: 27px;
}
.my-app .header .left > span {
color: #fff;
font-size: 1.33em;
position: relative;
text-transform: uppercase;
left: 30px;
transition: all .3s ease-in-out;
}
.my-app .header .left .go-back-home {
text-transform: uppercase;
font-size: 1.33em;
color: #fff;
position: relative;
left: 10vw;
padding-left: 50px;
}
.my-app .header .left .go-back-home::after {
content: "";
position: absolute;
top: 50%;
left: 0px;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-image: url(../images/svg/Close.svg);
background-repeat: no-repeat;
background-position: 50% 50%;
}
.my-app .header .left .go-back-home.btn-retour-home {
padding-left: 70px;
transition: all 0.3s ease-in-out;
left: 30px !important;
position: relative;
}
.my-app .header .left .go-back-home.btn-retour-home::after {
width: 50px !important;
height: 50px !important;
background-image: url(../images/svg/room_back_white.svg) !important;
background-size: contain;
transition: all 0.3s ease-in-out;
}
.my-app .header .left .go-back-home.btn-retour-home:hover::after {
background-image: url(../images/svg/room_back_green.svg) !important;
}
.my-app .header .left .go-back-home.btn-retour-home:hover {
color: #1D3B21 !important;
}
.my-app .header .logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0px;
width: 15vw;
display: block;
}
.my-app .header .logo img {
display: block;
width: 100%;
height: auto;
}
.my-app .header .right {
display: flex;
align-items: center;
position: relative;
}
.my-app .header .right::after {
content: "";
position: absolute;
bottom: 0px;
right: 0px;
transform: translateY(100%);
width: 44vw;
height: 1px;
background-color: #FFF;
opacity: .5;
}
.my-app .header .right span {
display: block;
margin-right: 30px;
font-size: 1.33em;
color: #FFF;
cursor: pointer;
text-transform: uppercase;
}
.my-app .header .right a , .header .right button {
display: flex;
background-color: #fff;
height: 100%;
color: #1D3B21;
text-transform: uppercase;
align-items: center;
font-size: 1.33em;
padding: 0px 50px;
transition: all .3s ease-in-out;
}
.my-app .header .right a:hover , .header .right button:hover {
color: #fff;
background-color: #1D3B21;
}
.my-app .header .right a , .header .right button {
display: flex;
background-color: #fff;
height: 100%;
color: #1D3B21;
text-transform: uppercase;
align-items: center;
padding: 0px 50px;
transition: all .3s ease-in-out;
}
.my-app .home {
position: relative;
}
.my-app .home .home-hero-static {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
object-fit: cover;
object-position: center;
z-index: 1;
filter: brightness(0.7);
pointer-events: none;
}
.my-app .home .home-slide-carousel .item {
height: 100dvh;
width: 100%;
position: relative;
overflow: hidden;
}
.my-app .home .home-slide-carousel .item::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0px;
z-index: 10;
left: 0px;
background-color: rgba(0, 0, 0, 0.3);
}
.my-app .home .home-slide-carousel .item img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
object-position: center;
}
.my-app .home .etab-name {
color: #F9F0E4;
font-size: 3.04em;
width: 30vw;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
font-family: 'Cormorant Garamond';
font-weight: 500;
letter-spacing: 0.12em;
text-shadow: 2px 2px 10px rgba(64, 64, 64, 0.7);
transform: translate(-50%, -50%);
text-transform: uppercase;
animation: fadeShadow 3s infinite;
}
@keyframes fadeShadow {
0%   { text-shadow: 2px 2px 4px rgba(64, 64, 64, 0.1); }
50%  { text-shadow: 2px 2px 4px rgba(64, 64, 64, 0.7); }
100% { text-shadow: 2px 2px 4px rgba(64, 64, 64, 0.1); }
}
@keyframes titleReveal {
0%   { opacity: 0; }
100% { opacity: 1; }
}
.my-app .home .etab-name span {
display: block;
transform: translateY(100%);
}
.my-app .home .etab-name {
width: max-content !important;
white-space: nowrap;
text-align: center;
}
.my-app .home .etab-name .line-wrap {
display: block;
overflow: hidden;
transform: none !important;
height: 1.3em;
line-height: 1.15;
}
@keyframes luxeReveal {
0%   { transform: translateY(110%); opacity: 0; }
100% { transform: translateY(0);    opacity: 1; }
}
@keyframes luxeFade {
0%   { opacity: 0; transform: translateY(6px); }
100% { opacity: 1; transform: translateY(0); }
}
.my-app .home .etab-name .line-1,
.my-app .home .etab-name .line-2,
.my-app .home .etab-name .line-3 {
display: block;
white-space: nowrap;
opacity: 0;
transform: translateY(110%);
}
.my-app .home .etab-name .line-1 {
animation: luxeReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
animation-play-state: paused;
}
.my-app .home .etab-name .line-2 {
animation: luxeReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.8s both;
animation-play-state: paused;
}
.my-app .home .etab-name .line-3 {
animation: luxeReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.8s both;
animation-play-state: paused;
}
body.home-title-reveal .my-app .home .etab-name .line-1,
body.home-title-reveal .my-app .home .etab-name .line-2,
body.home-title-reveal .my-app .home .etab-name .line-3 {
animation-play-state: running;
}
@media screen and (max-width: 1024px) {
.my-app .home .etab-name {
width: 70vw !important;
white-space: normal;
font-size: 2.24em;
text-align: center;
}
.my-app .home .etab-name .line-wrap {
overflow: visible;
}
.my-app .home .etab-name .line-1,
.my-app .home .etab-name .line-2,
.my-app .home .etab-name .line-3 {
white-space: normal;
transform: translateY(0);
opacity: 0;
}
.my-app .home .etab-name .line-1 { animation: luxeFade 1.2s ease-out 0.5s both; }
.my-app .home .etab-name .line-2 { animation: luxeFade 1.2s ease-out 1.8s both; }
.my-app .home .etab-name .line-3 { animation: luxeFade 1.2s ease-out 2.8s both; }
}
@media screen and (max-width: 768px) {
.my-app .home .etab-name {
width: 85vw !important;
font-size: 1.76em;
letter-spacing: 0.08em;
}
}
.my-app .home .social {
position: absolute;
bottom: 30px;
right: 0px;
z-index: 10;
display: flex;
}
.reviews-band { display: none; }
.my-app .home .ratings-badges {
position: absolute;
bottom: 30px;
left: 40px;
z-index: 10;
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
.my-app .home .rating-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
text-decoration: none;
}
.my-app .home .rating-badge img {
display: block;
width: 22px;
height: 22px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.my-app .home .rating-badge span {
font-family: "Poppins";
font-size: 0.85em;
color: #ffffff;
font-weight: 400;
text-align: center;
}
.my-app .home .rating-badge span small {
font-size: 0.75em;
opacity: 0.8;
}
.my-app .home .social a , .home .social button {
display: block;
margin-right: 30px;
}
.my-app .home .social a img , .home .social button img {
display: block;
width: 25px;
}
.my-app .intro {
background-color: #FFF;
position: relative;
overflow: hidden;
padding: 20vw 0 10vh 0;
}
.my-app .intro .about {
display: block;
position: absolute;
top: 3vw;
left: 50%;
font-family: 'Pinyon Script';
line-height: 1;
text-align: center;
font-size:5.5em;
z-index: 90;
width: max-content;
color: rgba(32, 79, 38, 0.3);
}
.my-app .intro h2 {
display: block;
position: absolute;
top: 12vw;
left: 50%;
font-size: 5em;
width: 30vw;
z-index: 100;
font-family: 'Cormorant Garamond';
text-align: center;
letter-spacing: 0.12em;
font-weight: 500;
color: #1D3B21;
text-transform: uppercase;
transform: translateX(-50%);
}
.my-app .intro .Path_1 {
position: absolute;
left: 0px;
top: 5vw;
z-index: 0;
width: 110%;
}
.my-app .intro .Path_1 #Path_1 {
fill: transparent;
stroke: rgba(225, 187, 127, 0.5);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 10;
shape-rendering: auto;
}
.my-app .intro .Path_2 {
position: absolute;
right: -5vw;
top: -10vw;
width: 40%;
z-index: 0;
}
.my-app .intro .Path_2 #Path_2 {
fill: transparent;
stroke: rgba(225, 187, 127, 0.5);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 10;
shape-rendering: auto;
}
.my-app .intro .ctn {
max-width: 1300px;
position: relative;
z-index: 10;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.my-app .intro .ctn .img-ctn {
width: 30vw;
height: 30vw;
overflow: hidden;
position: relative;
}
.my-app .intro .ctn .img-ctn img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -30%);
width: auto;
height: auto;
min-height: 100%;
min-width: 100%;
}
.my-app .intro .ctn .info {
width: 32vw;
display: flex;
align-items: center;
position: relative;
}
.my-app .intro .ctn .info .extrait {
color: #1D3B21;
font-size: 1.33em;
font-family: 'Poppins';
font-weight: 300;
line-height: 1.5;
}
.my-app .intro .ctn .info a , .intro .ctn .info button {
display: block;
position: absolute;
bottom: 30px;
left: 0px;
font-family: 'Poppins';
color: #1D3B21;
text-transform: uppercase;
font-size: 1.33em;
transition: all .4s ease-in-out;
padding: 0px 90px 0px 0px;
}
.my-app .intro .ctn .info a:hover , .intro .ctn .info button:hover {
transform: translateX(25%);
}
.my-app .intro .ctn .info a::after , .intro .ctn .info button::after {
content: "";
width: 60px;
position: absolute;
height: 60px;
border-radius: 50%;
right: 0px;
top: 50%;
border: 2px solid #1D3B21;
transform: translateY(-50%);
background-image: url(../images/svg/golden_arrow.svg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 50%;
}
.my-app .intro .ctn .extra-info {
width: 80%;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
opacity: 0;
z-index: -10;
padding-top: 50px;
}
.my-app .intro .ctn .extra-info .extrait {
width: 100%;
margin: 0 auto;
text-align: justify;
color: #1D3B21;
font-size: 1.33em;
font-family: 'Poppins';
font-weight: 300;
line-height: 1.5;
}
.my-app .intro .ctn .extra-info img {
display: block;
width: 60%;
height: auto;
margin: 100px auto;
transform: translateY(50%);
opacity: 0;
}
.my-app .rooms {
overflow: hidden;
position: relative;
background-color: #Fff;
padding: 20vh 0 10vh;
}
.my-app .rooms h2 {
position: absolute;
top: 5vw;
left: 50%;
z-index: 10;
transform: translateX(-58%);
font-size:  1.67em;
color: #FCF8F2;
text-transform: uppercase;
font-family: 'Poppins';
font-weight: 300;
}
.my-app .rooms h2 span {
color: rgba(249, 240, 228, 0.3);
font-family: 'Pinyon Script';
font-weight: 400;
font-size: 1.67em;
display: inline-block;
z-index: -1;
position: relative;
transform: translate(40%, 10%);
width: max-content;
text-transform: capitalize;
}
.my-app .rooms .rooms-carousel .item {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateY(35%);
}
.my-app .rooms .rooms-carousel .item:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 2;
background-color: rgba(0, 0, 0, 0.4);
}
.my-app .rooms .rooms-carousel .item img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: auto;
z-index: 1;
min-height: 100%;
min-width: 100%;
}
.my-app .rooms .rooms-carousel .item span {
position: relative;
z-index: 10;
color: #FCF8F2;
opacity: .8;
font-size:  1.67em;
text-transform: uppercase;
margin-bottom: 50px;
font-family: 'Poppins';
font-weight: 300;
}
.my-app .rooms .rooms-carousel .item h3 {
position: relative;
z-index: 10;
font-size: 2.92em;
font-family: 'Cormorant Garamond';
font-weight: 500;
letter-spacing: 0.12em;
max-width: 70%;
text-transform: uppercase;
color: #FCF8F2;
text-align: center;
text-shadow: 2px 2px 10px rgba(64, 64, 64, 0.7);
cursor: pointer;
}
.my-app .rooms .rooms-carousel .item .btn-more {
display: block;
position: absolute;
bottom: 6%;
left: 50%;
transform: translateX(-50%);
z-index: 10;
font-size: 1.33em;
color: #FCF8F2;
font-family: 'Poppins';
font-weight: 300;
text-transform: uppercase;
padding: 0px 80px 0px 0px;
}
.my-app .rooms .rooms-carousel .item .btn-more:hover::after {
border-color: #FCF8F2;
}
.my-app .rooms .rooms-carousel .item .btn-more::after {
content: "";
width: 60px;
position: absolute;
height: 60px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
right: 0px;
top: 50%;
border: 1.5px solid transparent;
transition: all .3s ease-in-out;
transform: translateY(-50%);
background-image: url(../images/svg/White_Right_Scrol.svg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 50%;
}
.my-app .rooms .rooms-carousel { position: relative; }
.my-app .rooms .rooms-carousel .owl-nav {
position: static;
z-index: 10;
margin: 0px;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev, .my-app .rooms .rooms-carousel .owl-nav .owl-next {
position: absolute;
width: 70px;
height: 38px;
margin: 0 !important;
display: block;
color: transparent;
background-color: transparent;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
transition: opacity .3s ease;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev:hover, .my-app .rooms .rooms-carousel .owl-nav .owl-next:hover {
opacity: .65;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev {
left: 30px !important;
right: auto !important;
top: -68px !important;
bottom: auto !important;
transform: none !important;
background-image: url(../images/svg/Green_Left_Scrol.svg);
}
.my-app .rooms .rooms-carousel .owl-nav .owl-next {
right: 30px !important;
left: auto !important;
bottom: -68px !important;
top: auto !important;
transform: none !important;
background-image: url(../images/svg/Green_Right_Scrol.svg);
}
.my-app .comments {
padding: 25vh 2vw 40vh 2vw;
position: relative;
background-color: #FFF;
display: flex;
flex-direction: column;
align-items: center;
scroll-margin-top: 50vh;
}
.my-app .comments h2 {
text-align: center;
font-size: 5em;
color: #1D3B21;
font-family: 'Cormorant Garamond';
font-weight: 500;
text-transform: uppercase;
position: relative;
letter-spacing: 0.12em;
line-height: 1;
}
.my-app .comments h2 span {
display: block;
width: max-content;
text-align: center;
color: rgba(32, 79, 38, 0.1);
font-size: 8.33em;
margin: 0 auto;
line-height: 1;
transform: translateY(100%);
opacity: 0;
font-family: 'Pinyon Script';
font-weight: 500;
letter-spacing: normal;
text-transform: capitalize;
}
.my-app .comments .filter-comments-carousel {
width: max-content;
max-width: 100%;
margin: 0 auto 30px;
transform: translateY(50px);
opacity: 0;
scroll-margin-top: 300px;
}
}
.my-app .comments .filter-comments-carousel .owl-stage-outer {
width: max-content;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item {
position: relative;
margin: 0px 50px;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item.last::after {
display: none;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item::after {
content: "";
position: absolute;
right: -50px;
top: 50%;
transform: translate(50%, -50%);
width: 5px;
height: 5px;
background-color: #1D3B21;
border-radius: 50%;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item a , .comments .filter-comments-carousel .owl-stage-outer .item button {
display: block;
text-transform: uppercase;
color: #1D3B21;
font-size: 1.33em;
transition: all .4s ease-in-out;
font-family: "Poppins";
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item a:hover, .comments .filter-comments-carousel .owl-stage-outer .item button:hover, .my-app .comments .filter-comments-carousel .owl-stage-outer .item a.active , .comments .filter-comments-carousel .owl-stage-outer .item button.active {
color: #1D3B21;
}
.my-app .comments .comments-carousel {
width: 900px;
margin: 0px auto;
transform: translateY(50%);
opacity: 0;
}
.my-app .comments .comments-carousel .item {
padding: 64px 0px;
position: relative;
}
.my-app .comments .comments-carousel .item .note {
top: 0px;
right: 0px;
position: absolute;
font-family: "Poppins";
font-size: 1.33em;
color: #1D3B21;
}
.my-app .comments .comments-carousel .item .note span {
color: #1D3B21;
font-size: 1.17em;
}
.my-app .comments .comments-carousel .item .author-info {
position: absolute;
top: 0px;
left: 0px;
font-family: 'Cormorant Garamond';
}
.my-app .comments .comments-carousel .item .author-info span {
display: block;
text-transform: uppercase;
font-size: 1.33em;
}
.my-app .comments .comments-carousel .item .author-info span:nth-child(2) {
color: #1D3B21;
}
.my-app .comments .comments-carousel .item .extrait {
width: 70%;
text-align: center;
margin: 0 auto;
font-family: "Poppins";
font-size: 1.33em;
color: #1D3B21;
max-height: 40vh;
overflow-y: auto;
padding: 0px 10px;
}
.my-app .comments .comments-carousel .item .extrait::first-letter {
text-transform: uppercase;
}
.my-app .comments .comments-carousel .item .extrait::-webkit-scrollbar {
display: block;
}
.my-app .comments .comments-carousel .item .extrait::-webkit-scrollbar-track {
background-color: transparent;
}
.my-app .comments .comments-carousel .item .extrait::-webkit-scrollbar {
width: 5px;
}
.my-app .comments .comments-carousel .item .extrait::-webkit-scrollbar-thumb {
background-color: #1D3B21;
}
.my-app .comments .comments-carousel .item .date {
display: block;
text-align: center;
margin: 30px 0px 0px;
font-family: "Poppins";
font-size: 1.17em;
text-transform: capitalize;
color: #1D3B21;
}
.my-app .comments .comments-carousel .item .btn-more {
position: absolute;
right: 0px;
bottom: 0px;
color: #1D3B21;
font-size: 1.17em;
font-family: "Poppins";
text-transform: uppercase;
}
.my-app .comments .comments-carousel .item .engine {
width: 40px;
height: 40px;
position: absolute;
bottom: 0px;
left: 0px;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.my-app .comments .comments-carousel .item .engine.b {
background-image: url(../images/svg/Booking.svg);
background-size: contain;
}
.my-app .comments .comments-carousel .item .engine.t {
background-image: url(../images/svg/TripAdvisor.svg);
background-size: contain;
}
.my-app .comments .comments-carousel .item .engine.g {
background-image: url(../images/svg/Google.svg);
background-size: contain;
}
.my-app .comments .comments-carousel .owl-nav {
position: absolute;
margin: 0;
top: 0px;
left: 50%;
z-index: -1;
width: 130%;
transform: translateX(-50%);
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.my-app .comments .comments-carousel .owl-nav .owl-next, .my-app .comments .comments-carousel .owl-nav .owl-prev {
color: transparent;
background-color: transparent;
width: 70px;
height: 30px;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.my-app .comments .comments-carousel .owl-nav .owl-next {
background-image: url(../images/svg/Black_Right_Scrol.svg);
}
.my-app .comments .comments-carousel .owl-nav .owl-prev {
background-image: url(../images/svg/Black_Left_Scrol.svg);
}
.my-app .equipLand {
background-color: #FFF;
position: relative;
padding: 0px 0px 10vh;
}
.my-app .equipLand .path_3 {
position: absolute;
left: 0px;
top: 0;
z-index: 0;
width: 35vw;
transform: translate(-30%, -10%);
}
.my-app .equipLand .path_3 #path_3 {
fill: transparent;
stroke: rgba(225, 187, 127, 0.5);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 10;
shape-rendering: auto;
}
.my-app .equipLand .path_4 {
position: absolute;
right: 0px;
top: 0;
z-index: 0;
width: 100%;
transform: translateY(-40%);
}
.my-app .equipLand .path_4 #path_4 {
fill: transparent;
stroke: rgba(225, 187, 127, 0.5);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 10;
shape-rendering: auto;
}
.my-app .equipLand .ctn {
display: flex;
justify-content: space-between;
align-items: center;
width: 1300px;
margin: 0 auto;
}
.my-app .equipLand .ctn .first, .my-app .equipLand .ctn .second {
position: relative;
width: 45%;
height: 80vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(50%);
opacity: 0;
cursor: pointer;
}
.my-app .equipLand .ctn .first img, .my-app .equipLand .ctn .second img {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-35%);
z-index: 0;
width: 100%;
height: 140%;
object-fit: cover;
object-position: center;
transition: all .4s ease-in-out;
transition-delay: .2s;
}
.my-app .equipLand .ctn .first::after, .my-app .equipLand .ctn .second::after {
content: "";
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 2;
}
.my-app .equipLand .ctn .first:hover img, .my-app .equipLand .ctn .second:hover img {
transform: translateY(-50%) scale(1.15) !important;
}
.my-app .equipLand .ctn .second img {
object-position: center top;
}
.my-app .equipLand .ctn .first span, .my-app .equipLand .ctn .second span {
position: relative;
z-index: 10;
font-size: 2.92em;
letter-spacing: 0.12em;
text-align: center;
text-transform: uppercase;
color: #FCF8F2;
font-family: 'Cormorant Garamond';
font-weight: 500;
text-shadow: 2px 2px 10px rgba(64, 64, 64, 0.7);
}
.my-app .services {
background-color: #fff;
position: relative;
padding: 10vh 0px;
}
.my-app .services h2 {
text-align: center;
z-index: 10;
font-size: 5em;
color: #1D3B21;
text-transform: uppercase;
font-family: 'Cormorant Garamond';
margin-bottom: 80px;
font-weight: 500;
position: relative;
letter-spacing: 0.12em;
transform: translateY(50%);
opacity: 0;
}
.my-app .services h2 span {
color: rgba(32, 79, 38, 0.1);
font-family: 'Pinyon Script';
font-weight: 550;
font-size: 1 1.67em;
display: inline-block;
z-index: -1;
position: relative;
transform: translate(60%, 10%);
width: max-content;
text-transform: capitalize;
}
.my-app .services .services-filter-carousel {
padding-left: 10vw;
}
.my-app .services .services-filter-carousel .item {
position: relative;
overflow: hidden;
transform: translateY(50%);
opacity: 0.2;
width: 28vw;
height: 55vh;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.my-app .services .services-filter-carousel .item:hover img {
transform: translate(-50%, -50%) scale(1.15) !important;
}
.my-app .services .services-filter-carousel .item img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -35%);
height: 140%;
width: 100%;
object-fit: cover;
object-position: center;
transition: all .4s ease-in-out;
}
.my-app .services .services-filter-carousel .item::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0px;
z-index: 0;
left: 0px;
background-color: rgba(0, 0, 0, 0.4);
}
.my-app .services .services-filter-carousel .item span {
font-size: 2.92em;
color: #FFF;
position: relative;
z-index: 10;
text-transform: uppercase;
font-family: "Cormorant Garamond";
font-weight: 500;
letter-spacing: 0.12em;
text-align: center;
text-shadow: 2px 2px 10px rgba(64, 64, 64, 0.7);
}
.my-app .gallery {
background-color: #FFF;
padding: 10vh 0px;
position: relative;
}
.my-app .gallery h2 {
text-align: center;
z-index: 10;
font-size: 5em;
color: #1D3B21;
text-transform: uppercase;
font-family: 'Cormorant Garamond';
margin-bottom: 80px;
font-weight: 500;
letter-spacing: 0.12em;
position: relative;
transform: translateY(50%);
opacity: 0;
}
.my-app .gallery h2 span {
color: rgba(32, 79, 38, 0.1);
font-family: 'Pinyon Script';
font-weight: 550;
font-size: 8.33em;
display: inline-block;
z-index: -1;
position: relative;
transform: translate(40%, 10%);
width: max-content;
letter-spacing: normal;
text-transform: capitalize;
}
.my-app .gallery #Layer_5 {
position: absolute;
left: 40%;
top: 0;
z-index: 1;
height: 100%;
transform: translateX(-65%);
}
.my-app .gallery #Layer_5 .Layer_5 {
fill: transparent;
stroke: rgba(225, 187, 127, 0.5);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 10;
shape-rendering: auto;
}
.my-app .gallery .gallery-carousel .item {
position: relative;
height: 50vh;
overflow: hidden;
transform: translateY(80%);
opacity: 0;
cursor: pointer;
}
.my-app .gallery .gallery-carousel .item img {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 30%) scale(0.4);
width: auto;
height: auto;
min-width: 100%;
min-height: 130%;
}
.my-app .contact {
background-color: #FFF;
position: relative;
padding: 10vh 0px;
}
.my-app .contact.form-open {
min-height: 100vh;
padding-bottom: 12vh;
box-sizing: border-box;
}
.my-app .contact h2 {
text-align: center;
font-size: 5em;
color: #1D3B21;
font-family: 'Cormorant Garamond';
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
position: relative;
}
.my-app .contact h2 span {
display: inline-block;
width: max-content;
text-align: center;
color: rgba(32, 79, 38, 0.1);
font-size: 8.33em;
margin: 0 auto;
line-height: 1;
transform: translate(-30%, 100%);
opacity: 0;
font-family: 'Pinyon Script', 'Cormorant Garamond', serif;
font-weight: 500;
text-transform: capitalize;
font-style: italic;
}
.my-app .contact #Layer_6 {
position: absolute;
left: 0;
top: 0;
z-index: 0;
height: 100%;
transform: translate(-70%, -30%) rotate(-20deg);
}
.my-app .contact #Layer_6 .Layer_6 {
fill: transparent;
stroke: rgba(225, 187, 127, 0.5);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 10;
shape-rendering: auto;
}
.my-app .contact #Layer_7 {
position: absolute;
right: 0;
top: 0;
z-index: 0;
height: 130%;
}
.my-app .contact #Layer_7 .Layer_7 {
fill: transparent;
stroke: rgba(225, 187, 127, 0.5);
stroke-width: 3px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 10;
shape-rendering: auto;
}
.my-app .contact .btn-compose {
width: 1000px;
height: max-content;
display: block;
margin: 80px auto 0px;
text-align: center;
position: relative;
z-index: 1;
}
.my-app .contact .btn-compose span {
font-family: 'Cormorant Garamond';
font-size: 1.67em;
text-align: center;
text-transform: uppercase;
color: #1D3B21;
letter-spacing: 2px;
transform: translateY(100%);
opacity: 0;
display: block;
}
.my-app .contact .btn-compose span div {
width: max-content;
margin: 0 auto;
position: relative;
padding-bottom: 15px;
}
.my-app .contact .btn-compose span div::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #1D3B21;
transition: width 0.8s ease;
}
.my-app .contact .btn-compose:hover span div::after {
width: 100%;
}
.my-app .contact .btn-compose span div {
width: max-content;
margin: 0 auto;
line-height: 1;
border-bottom: 2px solid #1D3B21;
margin-bottom: 15px;
}
.my-app .contact .ctn {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 5;
overflow: hidden;
}
.my-app .contact .ctn form {
width: 40vw;
margin: 0 auto;
}
.my-app .contact .ctn form > div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0px 0px;
border-bottom: 1px solid #1D3B21;
margin-bottom: 10px;
transform: translateY(80%);
opacity: 0;
}
.my-app .contact .ctn form > div label {
color: #1D3B21;
font-size: 1.83em;
font-family: "Poppins";
}
.my-app .contact .ctn form > div input, .my-app .contact .ctn form > div textarea {
width: 20vw;
padding: 20px 0px;
border: none;
font-family: "Poppins";
outline: none;
color: #1D3B21;
background-color: transparent;
font-size: 1.33em;
}
.my-app .contact .ctn form > div input::-webkit-input-placeholder, .my-app .contact .ctn form > div textarea::-webkit-input-placeholder {
color: #1D3B21;
letter-spacing: 0.17em;
}
.my-app .contact .ctn form .send_contact {
display: block;
margin: 60px auto;
width: max-content;
transform: translateY(100%);
opacity: 0;
}
.my-app .contact .ctn form .send_contact span {
text-transform: capitalize;
color: #1D3B21;
font-size: 4.17em;
border-bottom: 2px solid #1D3B21;
font-family: 'Cormorant Garamond';
font-weight: 500;
letter-spacing: -3px;
}
.my-app footer {
position: relative;
z-index: 100;
}
.my-app footer .first {
padding: 30px 0px;
margin: 0 auto;
width: 85%;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.my-app footer .first div span {
display: block;
font-family: "Poppins";
color: #1D3B21;
font-size: 1.17em;
}
.my-app footer .first div span a , footer .first div span button {
color: inherit;
}
.my-app footer .first div span.title {
font-weight: 600;
text-transform: uppercase;
color: #1D3B21;
margin-bottom: 10px;
}
.my-app footer .first div .show-maps {
text-transform: uppercase;
margin: 10px 0px;
display: block;
color: #1D3B21;
font-size: 1.17em;
font-family: "Poppins";
text-decoration: underline;
}
.my-app footer .second {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 7.5vw;
background-color: #F9F0E4;
}
.my-app footer .second a , footer .second button {
text-transform: uppercase;
font-family: "Poppins";
color: #1D3B21;
font-weight: 600;
}
.my-app footer .second .back-to-top {
padding: 0px 60px 0px 0px;
position: relative;
}
.my-app footer .second .back-to-top::after {
content: "";
width: 40px;
height: 40px;
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url(../images/svg/Backtop.svg);
}
.my-app footer .third {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 7.5vw;
background-color: #1D3B21;
}
.my-app footer .third span {
font-family: "Poppins";
color: #F2EEE8;
display: block;
font-size: 1.17em;
}
.my-app footer .third div {
display: flex;
align-items: center;
}
.my-app footer .third div a , footer .third div button {
display: block;
width: 100px;
margin-left: 15px;
}
.my-app footer .third div a img , footer .third div button img {
width: 100%;
display: block;
}
.my-app .page-first-block {
position: relative;
overflow: hidden;
min-height: 80vh;
background-color: transparent;
}
body.listchambres .my-app .page-first-block {
min-height: 100vh;
}
.my-app .page-first-block.full {
min-height: 100vh;
}
.my-app .page-first-block.full h2 {
width: 70%;
}
.my-app .page-first-block::after {
content: "";
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}
.my-app .page-first-block h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5em;
color: #FCF8F2;
text-align: center;
text-transform: uppercase;
font-family: 'Cormorant Garamond';
font-weight: 300;
z-index: 5;
letter-spacing: -5px;
}
.my-app .page-first-block h2 span {
display: block;
transform: translateY(100%);
}
.my-app .page-first-block h2#head-title {
color: #F9F0E4;
font-family: 'Cormorant Garamond';
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
text-shadow: 2px 2px 10px rgba(64, 64, 64, 0.7);
animation: fadeShadow 3s infinite, titleReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.my-app .page-first-block-bg {
width: 100%;
height: 100vh;
position: absolute;
top: 0px;
left: 0px;
background-attachment: scroll;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.my-app .page-first-block-bg.bg-room {
background-image: url(../images/carousel/DSC06680.webp);
}
.my-app .page-first-block-bg.bg-petite-chambre-double {
background-image: url(../images/webp/Petite-chambre-double.webp);
}
.my-app .page-first-block-bg.bg-chambre-double-standard {
background-image: url(../images/webp/Chambre-double-standard.webp);
}
.my-app .page-first-block-bg.bg-chambre-double-lits-jumeaux {
background-image: url(../images/webp/Chambre-double-lits-jumeaux.webp);
}
.my-app .page-first-block-bg.bg-srv {
background-image: url(../images/carousel/DSC06723.webp);
}
.my-app .page-first-block-bg.bg-equip {
background-image: url(../images/carousel/DSC06851.webp);
}
.my-app .page-first-block-bg.bg-land {
background-image: url(../images/webp/16.webp);
}
body.listchambres .page-first-block-bg.bg-equip {
background-image: url(../images/webp/Petite-chambre-double.webp);
}
.my-app body.listchambres .page-first-block-bg .page-first-block-video,
body.listchambres .my-app .page-first-block-bg .page-first-block-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
opacity: 1;
transition: opacity 1.5s ease;
}
.my-app .page-first-block-bg .page-first-block-video::-webkit-media-controls,
.my-app .page-first-block-bg .page-first-block-video::-webkit-media-controls-enclosure,
.my-app .page-first-block-bg .page-first-block-video::-webkit-media-controls-panel,
.my-app .page-first-block-bg .page-first-block-video::-webkit-media-controls-start-playback-button {
display: none !important;
-webkit-appearance: none !important;
}
.my-app .rmLt-all {
display: flex;
flex-wrap: wrap;
position: relative;
background-color: #FCF8F2;
padding: 5px;
}
.my-app .rmLt-all div {
border: 5px solid #FCF8F2;
height: 80vh;
overflow: hidden;
position: relative;
transform: translateY(25%);
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
cursor: pointer;
}
.my-app .rmLt-all div::after {
content: "";
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
pointer-events: none;
}
.my-app .rmLt-all div:hover img {
transform: translate(-50%, -50%) scale(1.1);
}
.my-app .rmLt-all div img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
transition: all .6s ease-in-out;
transition-delay: .3s;
}
.my-app .rmLt-all div span {
z-index: 10;
color: #FCF8F2;
font-family: 'Poppins';
font-size: 1.17em;
text-transform: uppercase;
margin-bottom: 50px;
}
.my-app .rmLt-all div h3 {
z-index: 10;
color: #F9F0E4;
font-size: 3.33em;
text-align: center;
max-width: 70%;
text-transform: uppercase;
padding-bottom: 30px;
position: relative;
font-family: 'Cormorant Garamond';
font-weight: 500;
letter-spacing: 0.12em;
text-shadow: 2px 2px 10px rgba(64, 64, 64, 0.7);
animation: fadeShadow 3s infinite;
}
.my-app .rmLt-all div h3::after {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 5vw;
height: 4px;
background-color: #FCF8F2;
}
.my-app .rmLt-all .full {
width: 100%;
}
.my-app .rmLt-all .half {
width: 50%;
}
.my-app .dtrm-second {
background-color: #fff;
padding: 20vh 0px;
}
.my-app .dtrm-second .ctn {
display: flex;
max-width: 1440px;
width: 100%;
margin: 0 auto;
align-items: center;
justify-content: space-between;
}
.my-app .dtrm-second .ctn .img-ctn {
width: 60vh;
height: 60vh;
overflow: hidden;
position: relative;
}
.my-app .dtrm-second .ctn .img-ctn img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -10%);
width: auto;
height: auto;
min-height: 100%;
min-width: 100%;
}
.my-app .dtrm-second .ctn .info {
width: 45%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.my-app .dtrm-second .ctn .info h3 {
font-family: 'Cormorant Garamond';
font-weight: 300;
color: #1D3B21;
font-size: 4.17em;
line-height: 1;
text-transform: uppercase;
margin-bottom: 50px;
transform: translateY(100%);
opacity: 0;
}
.my-app .dtrm-second .ctn .info .extrait {
font-size: 1.33em;
color: #1D3B21;
line-height: 1.4;
font-family: 'Poppins';
font-weight: 300;
margin-bottom: 50px;
transform: translateY(20%);
}
.my-app .dtrm-second .ctn .info .btn-book {
display: block;
font-family: 'Poppins';
color: #1D3B21;
position: relative;
width: max-content;
text-transform: uppercase;
font-size: 1.33em;
transition: all .4s ease-in-out;
padding: 0px 90px 0px 0px;
}
.my-app .dtrm-second .ctn .info .btn-book:hover {
transform: translateX(25%);
}
.my-app .dtrm-second .ctn .info .btn-book::after {
content: "";
width: 60px;
position: absolute;
height: 60px;
border-radius: 50%;
right: 0px;
top: 50%;
border: 1px solid #1D3B21;
transform: translateY(-50%);
background-image: url(../images/svg/golden_arrow.svg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 50%;
}
.my-app .dtrm-third {
min-height: unset;
background-color: #f9f0e4;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" seed="2"/><feComponentTransfer><feFuncA type="linear" slope="0.05"/></feComponentTransfer></filter><rect width="100" height="100" fill="%23f9f0e4" filter="url(%23n)"/></svg>');
background-repeat: repeat;
}
.my-app .dtrm-third .ctn {
display: flex;
flex-wrap: wrap;
}
.my-app .dtrm-third .ctn div {
position: relative;
width: 20%;
height: 25vw;
border: 5px solid #F2EEE8;
overflow: hidden;
transform: translateY(50%);
opacity: 0;
cursor: pointer;
}
.my-app .dtrm-third .ctn div img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -10%);
height: 150%;
width: auto;
opacity: 0;
}
.my-app .dtrm-fourth {
background-color: #f9f0e4;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" seed="2"/><feComponentTransfer><feFuncA type="linear" slope="0.05"/></feComponentTransfer></filter><rect width="100" height="100" fill="%23f9f0e4" filter="url(%23n)"/></svg>');
background-repeat: repeat;
padding: 15vh 0px;
min-height: unset;
}
.my-app .dtrm-fourth .ctn {
display: flex;
max-width: 1300px;
justify-content: space-between;
margin: 0 auto;
}
.my-app .dtrm-fourth .ctn .info1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 40%;
position: relative;
opacity: .2;
transform: translateY(80%);
}
.my-app .dtrm-fourth .ctn .info1::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background-color: #FFFFFF;
}
.my-app .dtrm-fourth .ctn .info1 img {
position: relative;
width: 30%;
z-index: 1;
}
.my-app .dtrm-fourth .ctn .info1 span {
position: relative;
z-index: 1;
font-family: 'Poppins';
color: #1D3B21;
font-size: 1.25em;
margin: 5px 0px;
}
.my-app .dtrm-fourth .ctn .info1 span.title {
font-family: 'Cormorant Garamond';
color: #1D3B21;
font-size: 2.5em;
text-transform: uppercase;
margin: 30px 0px;
}
.my-app .dtrm-fourth .ctn .info2 {
width: 50%;
}
.my-app .dtrm-fourth .ctn .info2 h3 {
font-size: 2.92em;
color: #1D3B21;
text-transform: uppercase;
font-family: 'Cormorant Garamond';
margin-bottom: 30px;
color: #1D3B21;
font-weight: 300;
transform: translateY(50%);
opacity: 0;
}
.my-app .dtrm-fourth .ctn .info2 ul {
list-style: none;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-height: 40vh;
overflow-y: auto;
scrollbar-width: 10px;
padding-right: 10px;
transform: translateY(50%);
opacity: 0;
}
.my-app .dtrm-fourth .ctn .info2 ul::-webkit-scrollbar {
display: block;
}
.my-app .dtrm-fourth .ctn .info2 ul::-webkit-scrollbar-track {
background-color: transparent;
}
.my-app .dtrm-fourth .ctn .info2 ul::-webkit-scrollbar {
width: 5px;
}
.my-app .dtrm-fourth .ctn .info2 ul::-webkit-scrollbar-thumb {
background-color: #1D3B21;
}
.my-app .dtrm-fourth .ctn .info2 ul li {
display: block;
width: 45%;
padding: 15px 0px;
font-family: 'Poppins';
color: #1D3B21;
font-size: 1.17em;
border-bottom: 1px solid #1D3B21;
}
.my-app .bookNow-ctn {
width: 100%;
padding: 5vh 0px 10vh;
}
.my-app .bookNow-ctn a , .bookNow-ctn button {
display: block;
width: max-content;
margin: 0 auto;
font-size: 7.5em;
color: #1D3B21;
line-height: 1;
font-family: 'Cormorant Garamond';
text-transform: uppercase;
overflow: hidden;
letter-spacing: -10px;
padding: 0px 5%;
}
.my-app .bookNow-ctn a span , .bookNow-ctn button span {
display: block;
transform: translateY(120%);
padding-bottom: 10px;
opacity: 0;
border-bottom: 2px solid #1D3B21;
}
.my-app .dtrm-fifth {
background-color: #FFFFFF !important;
background-image: url(../images/svg/zellige.svg);
background-repeat: repeat-x;
background-size: 500px;
background-position: top;
position: relative;
min-height: unset;
overflow: hidden;
padding: 10vh 0px;
}
.my-app .dtrm-fifth h2 {
display: block;
width: max-content;
margin: 0 auto;
margin-bottom: 80px;
font-family: 'Cormorant Garamond';
font-size: 4.58em;
opacity: .5;
transform: translateY(35vh);
font-weight: 300;
text-transform: uppercase;
}
.my-app .dtrm-fifth .more-rooms-carousel {
padding-left: 15vh;
opacity: .7;
transform: translateX(100%);
}
.my-app .dtrm-fifth .more-rooms-carousel .item {
width: 23vw;
color: inherit;
text-decoration: none;
display: block;
}
.my-app .dtrm-fifth .more-rooms-carousel .item .img-ctn {
width: 100%;
height: 45vh;
position: relative;
overflow: hidden;
}
.my-app .dtrm-fifth .more-rooms-carousel .item .img-ctn img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-30%, -50%);
height: 100%;
width: auto;
transition: all .4s ease-in-out;
transition-delay: .2s;
}
.my-app .dtrm-fifth .more-rooms-carousel .item span {
display: block;
margin-top: 40px;
font-size: 2.08em;
text-transform: uppercase;
font-family: 'Cormorant Garamond';
transition: all .4s ease-in-out;
}
.my-app .dtrm-fifth .more-rooms-carousel .item:hover .img-ctn img {
transform: translate(-50%, -50%) scale(1.2) !important;
}
.my-app .dtrm-fifth .more-rooms-carousel .item:hover span {
color: #1D3B21;
}
.my-app .equip-second {
position: relative;
background-color: #F2EEE8;
overflow: hidden;
}
.my-app.white-bg-page .equip-second {
background-color: #FFFFFF;
}
.my-app .equip-second #Layer_1 {
position: absolute;
right: 50%;
top: 0;
z-index: 0;
width: 100vw;
transform: translateX(40%);
}
.my-app .equip-second #Layer_1 .Layer_1 {
fill: transparent;
stroke: #1D3B21;
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 10;
shape-rendering: auto;
}
.my-app .equip-second .equipments {
width: 50%;
margin: 80px auto;
display: flex;
flex-wrap: wrap;
}
.my-app .equip-second .equipments .bloc {
width: 50%;
margin-bottom: 40px;
padding: 0px 10px;
}
.my-app .equip-second .equipments .bloc span {
display: block;
font-size: 1.17em;
color: #1D3B21;
font-family: "Poppins";
text-align: center;
color: #1D3B21;
margin-bottom: 5px;
transform: translateY(150%);
opacity: 0;
}
.my-app .equip-second .equipments .bloc span::first-letter {
text-transform: uppercase;
}
.my-app .equip-second .equipments .bloc span.title {
font-size: 2.08em;
color: #1D3B21;
margin-bottom: 30px;
font-family: "Cormorant Garamond";
text-transform: uppercase;
font-weight: 500;
}
.my-app .srv-list {
background-color: #FFF;
position: relative;
}
.my-app .srv-list .ctn {
display: flex;
width: 1300px;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
padding-top: 10vh;
}
.my-app .srv-list .ctn .srv-group {
display: block;
width: 45%;
height: 70vh;
overflow: hidden;
margin-bottom: 10vh;
position: relative;
transform: translateY(20%);
opacity: .5;
cursor: pointer;
}
.my-app .srv-list .ctn .srv-group img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: all .4s ease-in-out;
transition-delay: .2s;
}
.my-app .srv-list .ctn .srv-group::after {
content: "";
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
z-index: 2;
}
.my-app .srv-list .ctn .srv-group:hover img {
transform: translate(-50%, -50%) scale(1.15) !important;
}
.my-app .srv-list .ctn .srv-group:nth-child(2n) {
margin-top: 10vh;
}
.my-app .srv-list .ctn .srv-group span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-transform: uppercase;
font-size: 2.92em;
font-family: 'Cormorant Garamond';
font-weight: 600;
z-index: 5;
color: #FCF8F2;
}
.sub-services {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #F2EEE8;
padding: 5vh 0px;
transform: translateY(100%);
opacity: .5;
overflow-y: auto;
overflow-x: hidden;
}
.sub-services > span {
display: block;
margin: 0 auto;
font-size: 3.33em;
text-transform: uppercase;
color: #1D3B21;
width: max-content;
font-family: "Cormorant Garamond";
font-weight: 500;
letter-spacing: -3px;
opacity: 0;
transform: translateY(150%);
}
.sub-services .services-carousel {
top: 160px;
}
.sub-services .services-carousel .owl-item {
padding-bottom: 50px;
}
.srv-detail {
background-color: #F2EEE8;
position: relative;
padding: 10vh 0px;
}
.srv-detail h1 {
color: #1D3B21;
font-size: 2.5em;
text-transform: uppercase;
font-family: 'Cormorant Garamond';
text-align: center;
margin-bottom: 50px;
transform: translateY(100%);
opacity: 0;
}
.srv-detail .img-ctn {
width: 50vw;
height: 50vh;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.srv-detail .img-ctn img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
opacity: 0;
}
.srv-detail .extrait {
width: 50vw;
font-size: 1.17em;
color: #1D3B21;
font-family: "Poppins";
text-align: center;
margin: 30px auto;
}
.srv-detail .starting {
transform: translateY(100%);
opacity: 0;
}
.srv-detail .starting span {
display: block;
text-align: center;
font-family: "Poppins";
color: #1D3B21;
font-size: 1.17em;
}
.srv-detail .starting span::first-letter {
text-transform: uppercase;
}
.images-carousel-modal {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #F2EEE8;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" seed="2"/><feComponentTransfer><feFuncA type="linear" slope="0.05"/></feComponentTransfer></filter><rect width="100" height="100" fill="%23f9f0e4" filter="url(%23n)"/></svg>');
background-repeat: repeat;
padding: 15vh 0px;
transform: translateY(100%);
opacity: .5;
}
.images-carousel-modal .main-images-carousel {
opacity: 0;
}
.images-carousel-modal .main-images-carousel .item {
position: relative;
overflow: hidden;
height: 70vh;
}
.images-carousel-modal .main-images-carousel .item img {
height: 100%;
width: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.images-carousel-modal .main-images-carousel .owl-nav {
position: absolute;
bottom: 0px;
z-index: 10;
left: 0px;
margin: 0px;
width: 100%;
height: 1px;
}
.images-carousel-modal .main-images-carousel .owl-nav .owl-prev, .images-carousel-modal .main-images-carousel .owl-nav .owl-next {
position: absolute;
width: 80px;
height: 40px;
display: block;
background-image: url(../images/svg/golden_arrow.svg);
background-repeat: no-repeat;
background-position: 50% 50%;
bottom: 35vh;
right: 50px;
color: transparent;
background-color: transparent;
}
.images-carousel-modal .main-images-carousel .owl-nav .owl-prev {
left: 50px;
transform: rotate(180deg);
background-image: url(../images/svg/golden_arrow.svg);
}
.map-modal {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #F2EEE8;
padding: 15vh 0px 0px;
transform: translateY(100%);
opacity: .5;
}
.map-modal iframe {
height: 85vh;
width: 100%;
opacity: 0;
}
.reservation-block {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 1000;
background-color: #f9f0e4;
padding: 10vh;
transform: translateY(100%);
opacity: .3;
}
.reservation-block .site-config {
position: absolute;
top: 5vh;
right: 5vh;
display: flex;
}
.reservation-block .site-config span {
margin-left: 40px;
text-transform: uppercase;
font-size: 1.33em;
font-family: "Poppins";
line-height: 1;
color: #1D3B21;
cursor: pointer;
}
.reservation-block .official {
position: absolute;
top: 5vh;
left: 50%;
transform: translateX(-50%);
font-size: 1.33em;
text-transform: uppercase;
font-family: "Poppins";
color: #1D3B21;
}
.reservation-block h3 {
text-align: center;
margin: 50px;
font-size: 2.92em;
text-transform: uppercase;
font-family: "Cormorant Garamond";
font-weight: 300;
color: #1D3B21;
}
.reservation-block .ctn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 100px 0px;
}
.reservation-block .ctn .date-inputs-ctn {
opacity: 0;
position: absolute;
}
.reservation-block .ctn #choose-dates-booknow {
color: transparent;
}
.reservation-block .ctn .persons-section {
width: 35%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
gap: 0;
min-height: 500px;
}
.reservation-block .ctn .person-ctn {
width: 100%;
display: flex;
align-items: center;
position: relative;
justify-content: center;
}
.reservation-block .ctn .person-ctn .person {
display: flex;
justify-content: space-between;
width: 60%;
margin: 0 auto;
}
.reservation-block .ctn .person-ctn .person .val {
font-size: 1.33em;
font-family: "Poppins";
}
.reservation-block .ctn .person-ctn .person .minus, .reservation-block .ctn .person-ctn .person .plus {
display: block;
width: 30px;
height: 30px;
position: relative;
cursor: pointer;
}
.reservation-block .ctn .person-ctn .person .minus::after {
content: "";
width: 100%;
height: 2px;
background-color: #1D3B21;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.reservation-block .ctn .person-ctn .person .plus::after {
content: "";
width: 100%;
height: 2px;
background-color: #1D3B21;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.reservation-block .ctn .person-ctn .person .plus::before {
content: "";
width: 100%;
height: 2px;
background-color: #1D3B21;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
.reservation-block .ctn .person-ctn label {
font-family: "Poppins";
color: #1D3B21;
display: block;
font-size: 1.33em;
text-transform: uppercase;
width: max-content;
position: absolute;
left: 50%;
transform: translate(-50%, -200%);
top: 0px;
}
.reservation-block .ctn .children-ctn {
width: 100%;
display: flex;
align-items: center;
position: relative;
justify-content: center;
}
.reservation-block .ctn .children-ctn .person {
display: flex;
justify-content: space-between;
width: 60%;
margin: 0 auto;
}
.reservation-block .ctn .children-ctn .person .val {
font-size: 1.33em;
font-family: "Poppins";
}
.reservation-block .ctn .children-ctn .person .minus, .reservation-block .ctn .children-ctn .person .plus {
display: block;
width: 30px;
height: 30px;
position: relative;
cursor: pointer;
}
.reservation-block .ctn .children-ctn .person .minus::after {
content: "";
width: 100%;
height: 2px;
background-color: #1D3B21;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.reservation-block .ctn .children-ctn .person .plus::after {
content: "";
width: 100%;
height: 2px;
background-color: #1D3B21;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.reservation-block .ctn .children-ctn .person .plus::before {
content: "";
width: 100%;
height: 2px;
background-color: #1D3B21;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
.reservation-block .ctn .children-ctn label {
font-family: "Poppins";
color: #1D3B21;
display: block;
font-size: 1.33em;
text-transform: uppercase;
width: max-content;
position: absolute;
left: 50%;
transform: translate(-50%, -200%);
top: 0px;
}
.reservation-block .ctn .rooms-ctn {
width: 100%;
display: flex;
align-items: center;
position: relative;
justify-content: center;
}
.reservation-block .ctn .rooms-ctn .person {
display: flex;
justify-content: space-between;
width: 60%;
margin: 0 auto;
}
.reservation-block .ctn .rooms-ctn .person .val {
font-size: 1.33em;
font-family: "Poppins";
}
.reservation-block .ctn .rooms-ctn .person .minus, .reservation-block .ctn .rooms-ctn .person .plus {
display: block;
width: 30px;
height: 30px;
position: relative;
cursor: pointer;
}
.reservation-block .ctn .rooms-ctn .person .minus::after {
content: "";
width: 100%;
height: 2px;
background-color: #1D3B21;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.reservation-block .ctn .rooms-ctn .person .plus::after {
content: "";
width: 100%;
height: 2px;
background-color: #1D3B21;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.reservation-block .ctn .rooms-ctn .person .plus::before {
content: "";
width: 100%;
height: 2px;
background-color: #1D3B21;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
.reservation-block .ctn .rooms-ctn label {
font-family: "Poppins";
color: #1D3B21;
display: block;
font-size: 1.33em;
text-transform: uppercase;
width: max-content;
position: absolute;
left: 50%;
transform: translate(-50%, -200%);
top: 0px;
}
.reservation-block .ctn .children-ages-ctn {
width: 100%;
padding: 10px 0;
}
.reservation-block .ctn .children-ages-ctn #ages-list {
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: center;
align-items: center;
width: 100%;
}
.reservation-block .ctn .children-ages-ctn .age-btn-wrapper {
flex: 0 0 calc(33.33% - 8px);
position: relative;
display: flex;
justify-content: center;
}
.reservation-block .ctn .children-ages-ctn .age-select-button {
display: block;
padding: 11px 16px;
padding-right: 40px;
border: 2px solid #1D3B21;
border-radius: 25px;
font-family: "Poppins";
font-size: 0.85em;
color: #1D3B21;
background-color: transparent;
cursor: pointer;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23204F26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
white-space: nowrap;
}
.reservation-block .ctn .children-ages-ctn .age-select-button.selected {
background-color: #1D3B21;
color: #FCF8F2;
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 9.4"><path style="fill:%23FCF8F2;" d="M4,9.4l-4-4L1.4,4L4,6.6L10.6,0L12,1.4L4,9.4z"/></svg>');
}
.reservation-block .ctn .children-ages-ctn .age-list {
position: absolute;
top: 0;
left: 0;
min-width: 130px;
border: 2px solid #1D3B21;
border-radius: 16px;
max-height: 260px;
overflow-y: auto;
z-index: 9999;
background-color: #FCF8F2;
}
.reservation-block .ctn .children-ages-ctn .age-option {
padding: 9px 16px;
cursor: pointer;
text-align: center;
transition: background-color 0.15s ease;
}
.reservation-block .ctn .children-ages-ctn .age-option:hover {
background-color: rgba(32, 79, 38, 0.08);
}
.reservation-block .ctn .children-ages-ctn .age-option:first-child {
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
.reservation-block .ctn .children-ages-ctn .age-option:last-child {
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
}
.reservation-block .ctn .children-ages-ctn .age-option.selected .age-text {
display: inline-block;
border: 2px solid #1D3B21;
border-radius: 20px;
padding: 3px 16px;
}
.reservation-block .ctn .children-ages-ctn .age-text {
color: #1D3B21;
font-family: "Poppins";
font-size: 0.85em;
}
.reservation-block .ctn .caleran-container {
position: relative;
width: 65%;
}
.reservation-block .ctn .caleran-container * {
border: none !important;
font-family: "Poppins";
}
.reservation-block .ctn .caleran-container .caleran-input {
width: 100% !important;
background-color: transparent;
position: relative;
z-index: 10;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar {
border-right: 1px solid #D8D8D8 !important;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-title {
font-size: 1.3em;
text-transform: uppercase;
color: #1D3B21;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-days-container {
padding: 10px 28px;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-days-container .caleran-dayofweek {
font-size: 0.8em;
color: #1D3B21;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day {
color: #1D3B21;
opacity: .9;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day span {
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
border-radius: 50%;
font-size: 1.2em !important;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-hovered, .reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-end, .reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-selected, .reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day:hover:not(.caleran-hovered):not(.caleran-selected), .reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-start:not(.caleran-hovered) span, .reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-end:not(.caleran-hovered) span, .reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-today {
background-color: transparent;
color: #1D3B21 !important;
font-weight: normal !important;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-hovered {
opacity: 1;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-hovered span {
border: 1px solid #1D3B21 !important;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-selected {
opacity: 1;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-selected span {
border: 1px solid #1D3B21 !important;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-start, .reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-end {
opacity: 1;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-start span, .reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-end span {
border: 2px solid #1D3B21 !important;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day.caleran-not-in-month {
opacity: .4;
}
.reservation-block .ctn .caleran-container .prevMonth, .reservation-block .ctn .caleran-container .nextMonth {
position: absolute;
top: 40px;
width: 70px;
z-index: 100;
height: 20px;
background-repeat: no-repeat;
background-position: 50% 50%;
cursor: pointer;
}
.reservation-block .ctn .caleran-container .prevMonth {
left: 0px;
background-image: url(../images/svg/black_arrow.svg);
transform: rotate(180deg);
}
.reservation-block .ctn .caleran-container .nextMonth {
right: 0px;
background-image: url(../images/svg/black_arrow.svg);
}
.reservation-block .book {
position: absolute;
bottom: 5vh;
left: 5vh;
width: calc(100% - 10vh);
padding: 20px 0px;
color: #1D3B21;
text-transform: uppercase;
font-family: "Poppins";
font-size: 1.33em;
border: 1px solid #1D3B21;
border-radius: 3px;
text-align: center;
}
.devise-list, .lang-list {
position: fixed;
top: 0px;
right: 0px;
width: 70vw;
height: 100%;
background-color: #f1efe9;
z-index: 1000;
display: flex;
align-items: center;
flex-direction: column;
transform: translateX(100%);
opacity: 0;
}
.devise-list .btn-close-lines, .lang-list .btn-close-lines {
left: unset;
right: 5vh;
}
.devise-list h3, .lang-list h3 {
margin: 5vh 0 3vh;
text-transform: uppercase;
font-size: 1.17em;
max-width: 50%;
line-height: 1;
letter-spacing: 0.33em;
text-align: center;
font-family: "Roboto";
font-weight: 400;
}
.devise-list > span, .lang-list > span {
text-transform: uppercase;
font-size: 1.17em;
text-align: center;
font-family: "Roboto";
font-weight: 400;
color: #1D3B21;
margin-bottom: 5vh;
}
.lang-list ul {
flex: 1;
overflow-y: auto;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.devise-list ul {
flex: 1;
overflow-y: auto;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.devise-list ul::-webkit-scrollbar-track, .lang-list ul::-webkit-scrollbar-track {
background-color: transparent;
}
.devise-list ul::-webkit-scrollbar, .lang-list ul::-webkit-scrollbar {
width: 5px;
}
.devise-list ul::-webkit-scrollbar-thumb, .lang-list ul::-webkit-scrollbar-thumb {
background-color: #1D3B21;
}
.lang-list ul li {
display: flex;
align-items: center;
justify-content: center;
padding: 0px 10vh;
flex: 1;
}
.devise-list ul li {
display: flex;
align-items: center;
justify-content: center;
padding: 0px 10vh;
flex: 1;
}
.devise-list ul li a, .devise-list ul li button, .lang-list ul li a , .lang-list ul li button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
padding: 10px 10vh;
text-transform: uppercase;
font-family: "Poppins";
font-weight: 300;
font-size: 1.17em;
color: #333;
border: 1px solid transparent;
transition: all .4s ease-in-out;
}
.devise-list ul li a:hover, .devise-list ul li button:hover, .devise-list ul li a.active, .devise-list ul li button.active, .lang-list ul li a:hover, .lang-list ul li button:hover, .lang-list ul li a.active , .lang-list ul li button.active {
border-color: #1D3B21;
border: 1px solid #1D3B21;
color: #1D3B21;
}
.devise-list ul li a span, .devise-list ul li button span, .lang-list ul li a span , .lang-list ul li button span {
color: inherit;
display: block;
text-align: center;
}
.btn-close-round {
position: fixed;
top: 5vh;
left: 5vh;
color: #1D3B21;
font-family: 'Poppins';
font-size: 1.33em;
opacity: 0;
z-index: -10;
text-transform: uppercase;
padding: 0px 0px 0px 90px;
}
.btn-close-round::after {
content: "";
width: 60px;
position: absolute;
height: 60px;
border-radius: 50%;
left: 0px;
top: 50%;
border: 1px solid #1D3B21;
transform: translateY(-50%) rotate(180deg);
background-image: url(../images/svg/golden_arrow.svg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 50%;
}
.btn-close-lines {
position: absolute;
top: 5vh;
left: 5vh;
z-index: 10;
display: flex;
align-items: center;
font-family: 'Poppins';
color: #1D3B21;
font-size: 1.33em;
line-height: 1;
text-transform: capitalize;
}
.btn-close-lines .lines {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 30px;
height: 26px;
margin-right: 30px;
}
.btn-close-lines .lines span {
display: block;
width: 100%;
height: 2px;
background-color: #1D3B21;
}
.btn-close-lines .lines span:nth-child(1) {
transform: translateY(12px);
}
.btn-close-lines .lines span:nth-child(2) {
transform: translateY(-12px);
}
.services-carousel {
position: absolute;
top: 80px;
left: 10vw;
z-index: -100;
opacity: 0;
}
.services-carousel .item {
width: 32vw;
position: relative;
padding-bottom: 60px;
transform: translateY(50%);
opacity: 0;
}
.services-carousel .item .title {
display: block;
position: absolute;
left: 0px;
top: -30px;
transform: translateY(-100%);
font-size: 2.08em;
text-transform: uppercase;
color: #1D3B21;
font-family: "Cormorant Garamond";
font-weight: 600;
}
.services-carousel .item .img-ctn {
width: 100%;
position: relative;
height: 25vh;
overflow: hidden;
}
.services-carousel .item .img-ctn img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .4s ease-in-out;
}
.services-carousel .item .img-ctn:hover img {
transform: scale(1.15) !important;
}
.services-carousel .item .extrait {
margin: 30px 0px;
font-size: 1.17em;
color: #1D3B21;
font-family: "Poppins";
font-weight: 300;
max-height: 150px;
overflow-y: auto;
padding-right: 10px;
}
.services-carousel .item .extrait::first-letter {
text-transform: uppercase;
}
.services-carousel .item .extrait::-webkit-scrollbar-track {
background-color: transparent;
}
.services-carousel .item .extrait::-webkit-scrollbar {
width: 5px;
}
.services-carousel .item .extrait::-webkit-scrollbar-thumb {
background-color: #1D3B21;
}
.services-carousel .item .starting {
}
.services-carousel .item .starting span {
display: block;
color: #1D3B21;
font-size: 1.17em;
font-family: "Poppins";
font-weight: 300;
}
.services-carousel .item .download-file {
position: absolute;
bottom: 0px;
left: 0px;
max-width: 40%;
line-height: 1.3;
font-family: "Poppins";
color: #1D3B21;
text-transform: uppercase;
font-size: 1.17em;
}
.services-carousel .item .btn-more {
position: absolute;
bottom: 0px;
right: 0px;
max-width: 58%;
text-align: right;
line-height: 1.3;
font-family: "Poppins";
color: #1D3B21;
text-transform: uppercase;
font-size: 1.17em;
}
.reserve-block {
position: fixed;
bottom: 20px;
left: 20px;
display: none;
justify-content: space-between;
align-items: center;
width: calc(100% - 40px);
padding: 15px 30px;
border: 1px solid #1D3B21;
z-index: 10;
background-color: rgba(255, 255, 255, 0.8);
}
.reserve-block > div span {
display: block;
font-family: "Poppins";
font-size: 1.17em;
color: #000;
}
.reserve-block a , .reserve-block button {
text-transform: uppercase;
color: #1D3B21;
font-size: 1.17em;
font-family: "Poppins";
font-weight: 500;
}
@media screen and (max-width: 1600px) {
nav ul {
bottom: 7vh;
left: 7vh;
}
nav ul li a , nav ul li button {
font-size: 2.5em;
}
nav .social {
bottom: 4vh;
}
nav .btn-close {
top: 25px;
left: 25px;
font-size: 1.33em;
}
nav .btn-close .lines {
margin-right: 20px;
}
.devise-list .btn-close-lines, .lang-list .btn-close-lines {
right: 4vh;
}
.devise-list h3, .lang-list h3 {
font-size: 2.92em;
}
.devise-list ul li a, .devise-list ul li button, .lang-list ul li a , .lang-list ul li button {
font-size: 1.17em;
}
.btn-close-round {
top: 4vh;
left: 4vh;
font-size: 1.17em;
padding: 0px 0px 0px 70px;
}
.btn-close-round::after {
width: 50px;
height: 50px;
}
.btn-close-lines {
top: 4vh;
left: 4vh;
font-size: 1.17em;
}
.btn-close-lines .lines {
width: 30px;
height: 26px;
margin-right: 15px;
}
.btn-close-lines .lines span:nth-child(1) {
transform: translateY(12px);
}
.btn-close-lines .lines span:nth-child(2) {
transform: translateY(-12px);
}
.reservation-block .site-config span {
font-size: 1.17em;
}
.reservation-block .official {
font-size: 1.17em;
}
.reservation-block h3 {
margin: 40px 0px;
font-size: 2.5em;
}
.reservation-block .ctn {
margin: 100px 0px;
}
.reservation-block .ctn .person-ctn label {
font-size: 1.17em;
}
.reservation-block .book {
padding: 15px 0px;
font-size: 1.17em;
}
.services-carousel {
top: 50px;
}
.services-carousel .item .title {
top: -20px;
font-size:  1.67em;
}
.services-carousel .item .extrait {
margin: 20px 0px;
font-size: 1.17em;
}
.services-carousel .item .starting span {
font-size: 1.17em;
}
.services-carousel .item .download-file {
font-size: 1.17em;
}
.services-carousel .item .btn-more {
font-size: 1.17em;
}
.images-carousel-modal .main-images-carousel .owl-nav .owl-prev, .images-carousel-modal .main-images-carousel .owl-nav .owl-next {
width: 60px;
height: 20px;
right: 25px;
}
.images-carousel-modal .main-images-carousel .owl-nav .owl-prev {
left: 25px;
}
.map-modal {
padding: 11vh 0px 0px;
}
.map-modal iframe {
height: 89vh;
}
.sub-services > span {
font-size: 2.5em;
}
.sub-services .services-carousel {
top: 120px;
}
.sub-services .services-carousel .owl-item {
padding-bottom: 50px;
}
.srv-detail h1 {
font-size: 2.08em;
margin-bottom: 30px;
}
.srv-detail .extrait {
font-size: 1.17em;
}
.srv-detail .starting span {
font-size: 1.17em;
}
.my-app {
}
.my-app .header .left .menu_toggle {
width: 70px;
height: 70px;
padding: 25px 20px;
}
.my-app .header .left > span {
font-size: 1.17em;
}
.my-app .header .left .go-back-home {
font-size: 1.17em;
}
.my-app .header .right span {
font-size: 1.17em;
}
.my-app .header .right a , .header .right button {
font-size: 1.17em;
padding: 0px 40px;
}
.my-app .home .etab-name {
font-size: 4.17em;
width: 35vw;
}
.my-app .intro {
padding: 30vh 0 10vh 0;
}
.my-app .intro .about {
top: 3vh;
font-size: 1 1.67em;
}
.my-app .intro h2 {
top: 15vh;
font-size: 4.17em;
}
.my-app .intro .ctn {
max-width: 72%;
}
.my-app .intro .ctn .info {
width: 35vw;
}
.my-app .intro .ctn .info .extrait {
font-size: 1.17em;
}
.my-app .intro .ctn .info a , .intro .ctn .info button {
font-size: 1.17em;
padding: 0px 70px 0px 0px;
}
.my-app .intro .ctn .info a::after , .intro .ctn .info button::after {
width: 50px;
height: 50px;
}
.my-app .intro .ctn .extra-info {
padding-top: 0px;
}
.my-app .intro .ctn .extra-info .extrait {
font-size: 1.17em;
}
.my-app .intro .ctn .extra-info img {
margin: 80px auto;
}
.my-app .rooms h2 {
top: 5vh;
font-size: 1.5em;
}
.my-app .rooms h2 span {
font-size: 7.5em;
}
.my-app .rooms .rooms-carousel .item span {
font-size: 1.5em;
margin-bottom: 30px;
}
.my-app .rooms .rooms-carousel .item h3 {
font-size: 4.17em;
}
.my-app .rooms .rooms-carousel .item .btn-more {
bottom: 10vh;
font-size: 1.17em;
padding: 0px 70px 0px 0px;
}
.my-app .rooms .rooms-carousel .item .btn-more::after {
width: 50px;
height: 50px;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev, .my-app .rooms .rooms-carousel .owl-nav .owl-next {
width: 60px;
height: 30px;
}
.my-app .comments {
padding: 8vh 0px;
}
.my-app .comments h2 {
font-size: 4.17em;
}
.my-app .comments h2 span {
font-size: 7.5em;
}
.my-app .comments .filter-comments-carousel {
margin: 0 auto 50px;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item {
margin: 0px 40px;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item::after {
right: -40px;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item a , .comments .filter-comments-carousel .owl-stage-outer .item button {
font-size: 1.17em;
}
.my-app .comments .comments-carousel {
width: 800px;
}
.my-app .comments .comments-carousel .item {
padding: 80px 0px;
}
.my-app .comments .comments-carousel .item .note {
font-size: 1.17em;
}
.my-app .comments .comments-carousel .item .note span {
font-size: 1.17em;
}
.my-app .comments .comments-carousel .item .author-info span {
font-size: 1.17em;
}
.my-app .comments .comments-carousel .item .extrait {
font-size: 1.17em;
}
.my-app .comments .comments-carousel .item .date {
margin: 20px 0px 0px;
font-size: 1.17em;
}
.my-app .comments .comments-carousel .item .btn-more {
font-size: 1.17em;
}
.my-app .comments .comments-carousel .item .engine {
width: 30px;
height: 30px;
}
.my-app .comments .comments-carousel .owl-nav .owl-next, .my-app .comments .comments-carousel .owl-nav .owl-prev {
width: 60px;
height: 25px;
}
.my-app .equipLand {
padding: 0px;
}
.my-app .equipLand .ctn {
width: 1100px;
}
.my-app .equipLand .ctn .first span, .my-app .equipLand .ctn .second span {
font-size: 2.92em;
}
.my-app .services {
padding: 5vh 0px;
}
.my-app .services h2 {
font-size: 4.17em;
margin-bottom: 50px;
}
.my-app .services h2 span {
font-size: 9.16em;
}
.my-app .services .services-filter-carousel .item span {
font-size: 2.5em;
}
.my-app .gallery {
padding: 5vh 0px;
}
.my-app .gallery h2 {
font-size: 4.17em;
}
.my-app .gallery h2 span {
font-size: 7.5em;
}
.my-app .contact {
padding: 10vh 0px;
}
.my-app .contact h2 {
font-size:  1.67em;
}
.my-app .contact h2 span {
font-size: 7.5em;
}
.my-app .contact .btn-compose {
width: 900px;
}
.my-app .contact .btn-compose span {
font-size: 9.16em;
}
.my-app .contact .ctn form {
width: 45vw;
margin: 0 auto;
}
.my-app .contact .ctn form > div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0px 0px;
border-bottom: 1px solid #1D3B21;
margin-bottom: 0px;
transform: translateY(80%);
opacity: 0;
}
.my-app .contact .ctn form > div label {
color: #1D3B21;
font-size:  1.67em;
font-family: "Poppins";
}
.my-app .contact .ctn form > div input, .my-app .contact .ctn form > div textarea {
width: 20vw;
padding: 20px 0px;
border: none;
font-family: "Poppins";
outline: none;
color: #1D3B21;
background-color: transparent;
font-size: 1.17em;
}
.my-app .contact .ctn form > div input::-webkit-input-placeholder, .my-app .contact .ctn form > div textarea::-webkit-input-placeholder {
color: #1D3B21;
letter-spacing: 0.17em;
}
.my-app .contact .ctn form .send_contact {
display: block;
margin: 60px auto;
width: max-content;
transform: translateY(100%);
opacity: 0;
}
.my-app .contact .ctn form .send_contact span {
text-transform: capitalize;
color: #1D3B21;
font-size: 4.17em;
border-bottom: 2px solid #1D3B21;
font-family: 'Cormorant Garamond';
font-weight: 500;
letter-spacing: -3px;
}
.my-app footer .first div span {
font-size: 1.17em;
}
.my-app footer .first div .show-maps {
font-size: 1.17em;
}
.my-app footer .second a , footer .second button {
font-size: 1.17em;
}
.my-app footer .third span {
font-size: 0.83em;
}
.my-app .page-first-block h2 {
font-size: 4.17em;
}
.my-app .rmLt-all div span {
font-size: 1.17em;
}
.my-app .rmLt-all div h3 {
font-size: 2.5em;
}
.my-app .dtrm-second .ctn {
max-width: 75%;
}
.my-app .dtrm-second .ctn .img-ctn {
width: 55vh;
height: 55vh;
}
.my-app .dtrm-second .ctn .info h3 {
font-size: 2.92em;
margin-bottom: 30px;
}
.my-app .dtrm-second .ctn .info .extrait {
font-size: 1.17em;
margin-bottom: 30px;
}
.my-app .dtrm-second .ctn .info .btn-book {
font-size: 1.17em;
padding: 0px 70px 0px 0px;
}
.my-app .dtrm-second .ctn .info .btn-book::after {
width: 50px;
height: 50px;
}
.my-app .dtrm-fourth .ctn {
max-width: 75%;
}
.my-app .dtrm-fourth .ctn .info1 span {
font-size: 1.08em;
}
.my-app .dtrm-fourth .ctn .info1 span.title {
font-size: 2.08em;
}
.my-app .dtrm-fourth .ctn .info2 {
width: 50%;
}
.my-app .dtrm-fourth .ctn .info2 h3 {
font-size: 2.5em;
}
.my-app .dtrm-fourth .ctn .info2 ul li {
padding: 12px 0px;
font-size: 1.17em;
}
.my-app .bookNow-ctn a , .bookNow-ctn button {
font-size: 6.67em;
}
.my-app .dtrm-fifth {
padding: 8vh 0px;
}
.my-app .dtrm-fifth h2 {
margin-bottom: 60px;
font-size: 3.75em;
}
.my-app .dtrm-fifth .more-rooms-carousel .item span {
font-size:  1.67em;
}
.my-app .equip-second .equipments .bloc span {
font-size: 1.17em;
}
.my-app .equip-second .equipments .bloc span.title {
font-size:  1.67em;
margin-bottom: 30px;
}
.my-app .srv-list .ctn {
width: 75%;
}
.my-app .srv-list .ctn .srv-group span {
font-size: 2.5em;
}
}
@media screen and (max-width: 1366px) {
nav ul li a , nav ul li button {
font-size:  1.67em;
}
.reservation-block .ctn {
margin: 40px 0px;
}
}
@media screen and (max-width: 1024px) {
nav ul {
bottom: 5vh;
left: 5vh;
}
nav ul li a , nav ul li button {
font-size:  1.67em;
}
nav .social {
bottom: 4vh;
}
nav .social a {
margin-right: 20px;
}
nav .social a img {
width: 23px;
}
nav .site-config span {
margin-left: 30px;
font-size: 1.17em;
}
nav .btn-close {
font-size: 1.17em;
}
nav .btn-close .lines {
margin-right: 15px;
}
.devise-list .btn-close-lines, .lang-list .btn-close-lines {
right: 4vh;
}
.devise-list h3, .lang-list h3 {
font-size: 2.08em;
}
.devise-list > span, .lang-list > span {
font-size: 0.83em;
}
.devise-list ul li, .lang-list ul li {
margin-left: 2vh;
}
.devise-list ul li a, .devise-list ul li button, .lang-list ul li a , .lang-list ul li button {
font-size: 0.83em;
}
.btn-close-lines {
font-size: 1.17em;
}
.btn-close-lines .lines {
width: 25px;
height: 26px;
margin-right: 10px;
}
.btn-close-round {
font-size: 1.17em;
padding: 0px 0px 0px 60px;
}
.btn-close-round::after {
width: 40px;
height: 40px;
}
.reservation-block {
padding: 10vh 3vh;
}
.reservation-block .site-config span {
font-size: 1.17em;
}
.reservation-block .official {
font-size: 1.17em;
}
.reservation-block h3 {
margin: 20px 0px;
font-size: 2.08em;
}
.reservation-block .ctn .person-ctn label {
font-size: 1.17em;
}
.reservation-block .ctn .person-ctn .person .plus, .reservation-block .ctn .person-ctn .person .minus {
width: 25px;
height: 25px;
}
.reservation-block .ctn .person-ctn .person .val {
font-size: 1.17em;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-days-container {
padding: 10px 20px;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day span {
height: 30px;
width: 30px;
font-size: 1.1em !important;
}
.reservation-block .ctn .caleran-container .prevMonth, .reservation-block .ctn .caleran-container .nextMonth {
top: 40px;
width: 40px;
height: 15px;
}
.reservation-block .ctn .caleran-container .prevMonth {
left: 5px;
}
.reservation-block .ctn .caleran-container .nextMonth {
right: 5px;
}
.reservation-block .book {
padding: 12px 0px;
font-size: 1.17em;
}
.services-carousel .item .title {
font-size: 1.5em;
}
.services-carousel .item .extrait {
font-size: 0.92em;
}
.services-carousel .item .starting span {
font-size: 0.92em;
}
.services-carousel .item .download-file {
font-size: 0.92em;
}
.services-carousel .item .btn-more {
font-size: 0.92em;
}
.images-carousel-modal .main-images-carousel .item {
width: 75%;
margin: 0 auto;
}
.images-carousel-modal .main-images-carousel .item img {
width: 100%;
height: auto;
top: 50%;
transform: translate(-50%, -50%);
}
.images-carousel-modal .main-images-carousel .owl-nav .owl-prev, .images-carousel-modal .main-images-carousel .owl-nav .owl-next {
width: 40px;
height: 18px;
}
.my-app {
}
.my-app .header .left .menu_toggle {
width: 60px;
height: 60px;
padding: 20px 15px;
}
.my-app .header .left > span {
font-size: 1.17em;
}
.my-app .header .left .go-back-home {
font-size: 1.17em;
}
.my-app .header .right span {
font-size: 1.17em;
}
.my-app .header .right a , .header .right button {
font-size: 1.17em;
padding: 0px 40px;
}
.my-app .home .etab-name {
font-size: 3.33em;
width: 40vw;
}
.my-app .intro .about {
font-size: 8.33em;
}
.my-app .intro h2 {
font-size: 3.33em;
width: 40vw;
}
.my-app .intro .ctn {
max-width: 80%;
}
.my-app .intro .ctn .img-ctn {
width: 35vw;
height: 35vw;
}
.my-app .intro .ctn .info .extrait {
font-size: 1.17em;
}
.my-app .intro .ctn .info a , .intro .ctn .info button {
font-size: 1.17em;
padding: 0px 60px 0px 0px;
}
.my-app .intro .ctn .info a::after , .intro .ctn .info button::after {
width: 40px;
height: 40px;
}
.my-app .intro .ctn .extra-info .extrait {
font-size: 1.17em;
}
.my-app .intro .ctn .extra-info img {
margin: 50px auto;
}
.my-app .rooms h2 {
font-size: 1.33em;
}
.my-app .rooms h2 span {
font-size: 6.67em;
}
.my-app .rooms .rooms-carousel .item span {
font-size: 1.33em;
margin-bottom: 20px;
}
.my-app .rooms .rooms-carousel .item h3 {
font-size: 2.92em;
}
.my-app .rooms .rooms-carousel .item .btn-more {
bottom: 5vh;
font-size: 1.17em;
padding: 0px 60px 0px 0px;
}
.my-app .rooms .rooms-carousel .item .btn-more::after {
width: 40px;
height: 40px;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev, .my-app .rooms .rooms-carousel .owl-nav .owl-next {
width: 50px;
height: 20px;
}
.my-app .comments h2 {
font-size: 3.33em;
}
.my-app .comments h2 span {
font-size: 6.67em;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item {
margin: 0px 30px;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item::after {
right: -30px;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item a , .comments .filter-comments-carousel .owl-stage-outer .item button {
font-size: 1.17em;
}
.my-app .comments .comments-carousel {
width: 700px;
}
.my-app .comments .comments-carousel .item {
padding: 80px 0px;
}
.my-app .comments .comments-carousel .item .note {
font-size: 1.17em;
}
.my-app .comments .comments-carousel .item .note span {
font-size: 0.83em;
}
.my-app .comments .comments-carousel .item .author-info span {
font-size: 1.17em;
}
.my-app .comments .comments-carousel .item .extrait {
font-size: 1.17em;
}
.my-app .comments .comments-carousel .item .date {
margin: 20px 0px 0px;
font-size: 1.17em;
}
.my-app .comments .comments-carousel .item .btn-more {
font-size: 1.17em;
}
.my-app .comments .comments-carousel .item .engine {
width: 30px;
height: 30px;
}
.my-app .comments .comments-carousel .owl-nav .owl-next, .my-app .comments .comments-carousel .owl-nav .owl-prev {
width: 50px;
height: 18px;
}
.my-app .equipLand .ctn {
width: 80%;
}
.my-app .equipLand .ctn .first span, .my-app .equipLand .ctn .second span {
font-size: 2.5em;
}
.my-app .services h2 {
font-size: 3.33em;
margin-bottom: 40px;
}
.my-app .services h2 span {
font-size: 8.33em;
}
.my-app .services .services-filter-carousel .item span {
font-size: 2.08em;
}
.my-app .gallery h2 {
font-size: 3.33em;
margin-bottom: 50px;
}
.my-app .gallery h2 span {
font-size: 6.67em;
}
.my-app .contact h2 {
font-size: 1.5em;
}
.my-app .contact h2 span {
font-size: 6.67em;
}
.my-app .contact .btn-compose {
width: 750px;
margin: 50px auto 0px;
}
.my-app .contact .btn-compose span {
font-size: 7.5em;
}
.my-app .contact .ctn form {
width: 50vw;
}
.my-app .contact .ctn form > div {
padding: 15px 0px 0px;
}
.my-app .contact .ctn form > div label {
font-size: 1.33em;
}
.my-app .contact .ctn form > div input, .my-app .contact .ctn form > div textarea {
padding: 20px 0px;
font-size: 1.17em;
}
.my-app .contact .ctn form .send_contact {
margin: 40px auto;
}
.my-app .contact .ctn form .send_contact span {
font-size: 3.33em;
}
.my-app footer .first {
width: 90%;
}
.my-app footer .first div span {
font-size: 0.92em;
}
.my-app footer .first div .show-maps {
font-size: 0.92em;
}
.my-app footer .second {
padding: 20px 5vw;
}
.my-app footer .second a , footer .second button {
font-size: 0.92em;
}
.my-app footer .third {
padding: 20px 5vw;
}
.my-app footer .third span {
font-size: 0.83em;
}
.my-app .page-first-block h2 {
font-size: 3.33em;
}
.my-app .rmLt-all div span {
font-size: 1.17em;
}
.my-app .rmLt-all div h3 {
font-size: 2.08em;
letter-spacing: normal;
}
.my-app .dtrm-second .ctn {
max-width: 80%;
}
.my-app .dtrm-second .ctn .img-ctn {
width: 50vh;
height: 50vh;
}
.my-app .dtrm-second .ctn .info h3 {
font-size: 2.08em;
}
.my-app .dtrm-second .ctn .info .extrait {
font-size: 1.17em;
}
.my-app .dtrm-second .ctn .info .btn-book {
font-size: 1.17em;
padding: 0px 60px 0px 0px;
}
.my-app .dtrm-second .ctn .info .btn-book::after {
width: 40px;
height: 40px;
}
.my-app .dtrm-fourth .ctn {
max-width: 80%;
}
.my-app .dtrm-fourth .ctn .info1 span {
font-size: 0.92em;
}
.my-app .dtrm-fourth .ctn .info1 span.title {
font-size:  1.67em;
}
.my-app .dtrm-fourth .ctn .info2 h3 {
font-size: 1.83em;
}
.my-app .dtrm-fourth .ctn .info2 ul li {
padding: 10px 0px;
font-size: 0.92em;
}
.my-app .bookNow-ctn a , .bookNow-ctn button {
font-size: 5em;
}
.my-app .dtrm-fifth h2 {
margin-bottom: 50px;
font-size: 2.92em;
}
.my-app .dtrm-fifth .more-rooms-carousel .item {
width: 25vw;
}
.my-app .dtrm-fifth .more-rooms-carousel .item span {
font-size: 1.33em;
}
.my-app .equip-second .equipments {
width: 60%;
}
.my-app .srv-list .ctn {
width: 80%;
}
.my-app .srv-list .ctn .srv-group span {
font-size: 2.08em;
}
}
@media screen and (max-width: 768px) {
.menu_mobile {
display: block;
}
.services-carousel {
top: 100px;
}
.services-carousel .item {
width: 60vw;
}
.devise-list, .lang-list {
width: 100%;
}
.devise-list .btn-close-lines, .lang-list .btn-close-lines {
left: 3vh;
right: unset;
}
.reservation-block .ctn {
flex-direction: column;
}
.reservation-block .ctn .person-ctn {
margin-top: 120px;
}
.reservation-block .ctn .caleran-container {
width: 90%;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar:nth-child(2) {
border-right: unset !important;
}
nav ul {
bottom: unset;
top: 15vh;
left: 0;
}
nav ul li a , nav ul li button {
font-size: 2.08em;
color: #F2EEE8;
margin: 0 auto;
}
nav .logo {
display: none;
}
nav .social {
bottom: 5vh;
right: 50%;
transform: translateX(50%);
}
nav .social a img {
width: 30px;
}
nav .social a:last-child {
margin-right: 0px;
}
nav .site-config span {
margin-left: 30px;
font-size: 1.17em;
}
nav .btn-close {
font-size: 1.17em;
}
nav .btn-close .lines {
margin-right: 15px;
}
.my-app {
}
.my-app .header .left::after, .my-app .header .right::after {
display: none;
}
.my-app .header .left .menu_toggle {
display: none;
}
.my-app .header .left > span {
display: none;
}
.my-app .header .left .go-back-home {
display: none;
}
.my-app .header:not(.homePageHeader) .left .go-back-home {
display: block;
}
.my-app .header .logo {
width: 20vw;
transform: translateY(70%) translateX(-50%);
}
.my-app .header .right {
padding: 20px 0px;
}
.my-app .header .right a , .header .right button {
display: none;
}
.my-app .header .right span {
font-size: 1.17em;
}
.my-app .home .social {
display: none;
}
.my-app .home .etab-name {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.my-app .intro .Path_1 {
color: #E1BB7F
width: unset;
height: 80%;
}
.my-app .intro .ctn {
max-width: 80%;
flex-direction: column;
align-items: center;
z-index: 9;
}
.my-app .intro .ctn .img-ctn {
width: 45vw;
height: 45vw;
}
.my-app .intro .ctn .info {
margin-top: 40px;
padding-bottom: 70px;
width: 60vw;
}
.my-app .intro .ctn .info a , .intro .ctn .info button {
bottom: 20px;
left: 50%;
transform: translateX(-50%) !important;
}
.my-app .rooms .rooms-carousel .item span {
font-size: 1.17em;
}
.my-app .rooms .rooms-carousel .item h3 {
font-size: 2.5em;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev, .my-app .rooms .rooms-carousel .owl-nav .owl-next {
width: 50px;
height: 20px;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-next {
right: 30px;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev {
left: 30px;
}
.my-app .comments {
min-height: unset;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item a , .comments .filter-comments-carousel .owl-stage-outer .item button {
font-size: 1.08em;
width: max-content;
margin: 0 auto;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item::after {
display: none;
}
.my-app .comments .comments-carousel {
width: 600px;
}
.my-app .comments .comments-carousel .owl-nav {
width: 120%;
}
.my-app .comments .comments-carousel .owl-nav .owl-next, .my-app .comments .comments-carousel .owl-nav .owl-prev {
width: 50px;
height: 18px;
}
.my-app .equipLand {
padding: 10vh 0px;
min-height: unset;
}
.my-app .equipLand .ctn .first, .my-app .equipLand .ctn .second {
width: 48%;
height: 40vh;
}
.my-app .equipLand .ctn .first span, .my-app .equipLand .ctn .second span {
font-size: 2.08em;
}
.my-app .services {
padding: 10vh 0px;
}
.my-app .services .services-filter-carousel .item {
width: 45vw;
}
.my-app .gallery {
min-height: unset;
}
.my-app .gallery .gallery-carousel .item {
height: 30vh;
}
.my-app .contact {
padding: 10vh 0px 0px;
}
.my-app .contact #Layer_6 {
height: 70%;
}
.my-app .contact #Layer_7 {
height: 100%;
}
.my-app .contact .btn-compose {
width: 550px;
margin: 50px auto 0px;
}
.my-app .contact .btn-compose span {
font-size: 5.83em;
}
.my-app .contact .ctn form {
width: 60vw;
}
.my-app footer {
z-index: 9;
}
.my-app footer .first {
width: 80%;
flex-wrap: wrap;
padding: 0px;
}
.my-app footer .first div {
width: 50%;
margin-bottom: 30px;
}
.my-app footer .first div span {
font-size: 1.17em;
}
.my-app footer .first div .show-maps {
font-size: 0.92em;
}
.my-app footer .first div:nth-child(2n) {
padding-left: 50px;
}
.my-app footer .second a , footer .second button {
font-size: 1.17em;
}
.my-app footer .third {
padding: 20px 5vw 140px 5vw;
}
.my-app footer .third span {
font-size: 0.92em;
}
.my-app .rmLt-all div {
width: 100% !important;
height: 60vh;
}
.my-app .dtrm-second {
padding: 10vh 0px;
}
.my-app .dtrm-second .ctn {
max-width: 80%;
flex-direction: column;
}
.my-app .dtrm-second .ctn .info {
margin-top: 40px;
width: 80%;
}
.my-app .dtrm-second .ctn .info h3 {
text-align: center;
}
.my-app .dtrm-second .ctn .info .extrait {
text-align: center;
}
.my-app .dtrm-second .ctn .info .btn-book {
margin: 0 auto;
}
.my-app .dtrm-third {
padding: 0px 5vh;
}
.my-app .dtrm-third .ctn .img-ctn {
width: 33.33%;
height: 30vh;
}
.my-app .dtrm-fourth {
padding: 10vh 0px 5vh;
}
.my-app .dtrm-fourth .ctn {
max-width: 100%;
flex-direction: column;
}
.my-app .dtrm-fourth .ctn .info1 {
width: 100%;
padding: 5vh 0px;
}
.my-app .dtrm-fourth .ctn .info1 img {
width: 20%;
}
.my-app .dtrm-fourth .ctn .info1 span {
font-size: 1.17em;
}
.my-app .dtrm-fourth .ctn .info2 {
margin-top: 40px;
width: 100%;
}
.my-app .dtrm-fourth .ctn .info2 h3 {
font-size: 2.5em;
width: 100%;
text-align: center;
}
.my-app .dtrm-fourth .ctn .info2 ul {
margin: 0 auto;
width: 80%;
}
.my-app .dtrm-fourth .ctn .info2 ul li {
font-size: 1.17em;
}
.my-app .dtrm-fifth .more-rooms-carousel {
padding-left: 10vh;
}
.my-app .dtrm-fifth .more-rooms-carousel .item {
width: 35vw;
}
.my-app .equip-second .equipments {
width: 80%;
}
.my-app .srv-list .ctn .srv-group {
width: 48%;
height: 50vh;
}
.my-app .srv-list .ctn .srv-group span {
font-size: 1.83em;
}
.listchambres .my-app footer .first, .detailChambre .my-app footer .first {
padding-top: 50px;
}
.reserve-block {
display: flex;
}
.srv-detail .img-ctn {
width: 70vw;
height: 35vh;
}
}
@media screen and (max-width: 575px) {
.menu_mobile {
left: unset;
right: 20px;
font-size: 1.17em;
}
.reserve-block {
display: none;
}
nav {
z-index: 1000;
}
nav ul li {
padding: 15px;
}
nav ul li a , nav ul li button {
font-size: 1.5em;
}
nav .social a img {
width: 25px;
}
nav .social a:last-child {
margin-right: 0px;
}
nav .site-config {
right: unset;
left: 0px;
}
nav .site-config span {
margin: 0px 0px 0px 20px;
font-size: 1.17em;
}
nav .btn-close {
font-size: 1.17em;
left: unset;
right: 20px;
}
nav .btn-close .lines {
width: 20px;
margin-right: 10px;
}
.devise-list, .lang-list {
padding-top: 50px;
}
.devise-list .btn-close-lines, .lang-list .btn-close-lines {
left: unset;
right: 20px;
}
.devise-list h3, .lang-list h3 {
max-width: 80%;
font-size:  1.67em;
}
.devise-list > span, .lang-list > span {
margin-bottom: 20px;
max-width: 80%;
}
.devise-list ul, .lang-list ul {
width: 80%;
}
.devise-list ul li, .lang-list ul li {
width: 100%;
padding: 0px;
margin: 0px;
}
.devise-list ul li a, .devise-list ul li button, .lang-list ul li a , .lang-list ul li button {
width: 80%;
margin: 0 auto;
padding: 10px 40px;
text-align: center;
}
.btn-close-lines {
font-size: 1.17em;
}
.btn-close-lines .lines {
width: 20px;
}
.btn-close-round {
font-size: 1.17em;
padding: 0px;
width: 40px;
height: 40px;
right: 20px;
left: unset;
}
.btn-close-round::after {
width: 40px;
height: 40px;
}
.services-carousel {
top: 60px;
left: 20px;
}
.services-carousel .item {
width: 80vw;
}
.services-carousel .item .title {
font-size: 1.33em;
}
.services-carousel .item .extrait {
font-size: 0.83em;
}
.services-carousel .item .starting span {
font-size: 0.83em;
}
.services-carousel .item .download-file {
font-size: 0.83em;
}
.services-carousel .item .btn-more {
font-size: 0.83em;
}
.images-carousel-modal .main-images-carousel .item {
width: 100%;
margin: 0 auto;
}
.images-carousel-modal .main-images-carousel .item img {
width: 100%;
height: auto;
top: 50%;
transform: translate(-50%, -50%);
}
.images-carousel-modal .main-images-carousel .owl-nav .owl-prev, .images-carousel-modal .main-images-carousel .owl-nav .owl-next {
width: 40px;
height: 18px;
bottom: 0;
}
.sub-services > span {
font-size: 2.08em;
}
.sub-services .services-carousel {
top: 70px;
}
.sub-services .services-carousel .owl-item {
padding-bottom: 50px;
}
.srv-detail h1 {
font-size:  1.67em;
margin-bottom: 20px;
}
.srv-detail .img-ctn {
width: 80vw;
height: 50vw;
}
.srv-detail .extrait {
width: 80vw;
font-size: 0.92em;
}
.srv-detail .starting span {
font-size: 0.92em;
}
.my-app {
}
.my-app .header {
flex-direction: row-reverse;
}
.my-app .header .right span {
margin: 0px 0px 0px 20px;
font-size: 1.17em;
}
.my-app .header .logo {
width: 30vw;
}
.my-app .header:not(.homePageHeader) {
flex-direction: row;
}
.my-app .header:not(.homePageHeader) .right span {
display: none;
}
.my-app .header:not(.homePageHeader) .left .go-back-home {
display: block;
font-size: 0px;
width: 3vw;
height: 3vw;
padding: 0;
left: 20px;
top: 15px;
}
.my-app .header:not(.homePageHeader) .left .go-back-home::after {
width: 100%;
height: 100%;
}
.my-app .intro {
padding: 25vh 0 10vh 0;
}
.my-app .intro .about {
font-size: 6.67em;
}
.my-app .intro h2 {
font-size: 2.5em;
width: 65vw;
}
.my-app .intro .ctn {
max-width: 90%;
}
.my-app .intro .ctn .img-ctn {
width: 55vw;
height: 70vw;
}
.my-app .intro .ctn .info {
margin-top: 30px;
width: 85vw;
}
.my-app .intro .ctn .info a , .intro .ctn .info button {
width: max-content;
font-size: 1.17em;
}
.my-app .intro .ctn .extra-info {
width: 90%;
}
.my-app .intro .ctn .extra-info img {
width: 100%;
margin: 50px auto 150px;
}
.my-app .rooms h2 {
top: 0;
color: #1D3B21;
font-size: 1.17em;
}
.my-app .rooms h2 span {
font-size: 5.83em;
}
.my-app .rooms .rooms-carousel .item {
height: 80vh;
margin-top: 20vh;
flex-direction: column-reverse;
justify-content: flex-end;
}
.my-app .rooms .rooms-carousel .item span {
font-size: 1.17em;
margin-top: 30px;
}
.my-app .rooms .rooms-carousel .item h3 {
font-size: 2.08em;
max-width: 90%;
margin-top: 50px;
}
.my-app .rooms .rooms-carousel .item .btn-more {
bottom: 20px;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev, .my-app .rooms .rooms-carousel .owl-nav .owl-next {
width: 40px;
height: 20px;
bottom: 30vh;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-next {
right: 20px;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev {
left: 20px;
}
.my-app .comments h2 {
font-size: 2.5em;
}
.my-app .comments h2 span {
font-size: 5.83em;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item {
margin: 0px;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item a , .comments .filter-comments-carousel .owl-stage-outer .item button {
font-size: 1.17em;
width: max-content;
margin: 0 auto;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item::after {
display: none;
}
.my-app .comments .comments-carousel {
width: 80%;
}
.my-app .comments .comments-carousel .item .extrait {
width: 90%;
font-size: 0.92em;
}
.my-app .comments .comments-carousel .owl-nav {
width: 120%;
}
.my-app .comments .comments-carousel .owl-nav .owl-next, .my-app .comments .comments-carousel .owl-nav .owl-prev {
width: 40px;
height: 15px;
margin: 0;
}
.my-app .equipLand {
padding: 5vh 0px;
}
.my-app .equipLand .ctn {
flex-direction: column;
}
.my-app .equipLand .ctn .first, .my-app .equipLand .ctn .second {
width: 100%;
height: 60vh;
margin-bottom: 30px;
}
.my-app .equipLand .ctn .first span, .my-app .equipLand .ctn .second span {
font-size:  1.67em;
}
.my-app .services {
padding: 3vh 0px 5vh;
}
.my-app .services h2 {
font-size: 2.5em;
}
.my-app .services h2 span {
font-size: 6.67em;
}
.my-app .services .services-filter-carousel .item {
width: 70vw;
}
.my-app .services .btn-close-round {
top: 20px;
}
.my-app .gallery h2 {
font-size: 2.5em;
}
.my-app .gallery h2 span {
font-size: 5.83em;
}
.my-app .gallery .gallery-carousel .item {
height: 30vh;
}
.my-app .contact {
min-height: 100vh;
}
.my-app .contact h2 {
font-size: 1.17em;
}
.my-app .contact h2 span {
font-size: 5.83em;
}
.my-app .contact .btn-compose {
width: 70%;
margin: 50px auto 0px;
}
.my-app .contact .btn-compose span {
font-size: 2.92em;
}
.my-app .contact .ctn form {
width: 80vw;
}
.my-app .contact .ctn form > div {
padding: 0;
}
.my-app .contact .ctn form > div label {
font-size: 1.17em;
}
.my-app .contact .ctn form > div input, .my-app .contact .ctn form > div textarea {
width: 35vw;
font-size: 1.17em;
}
.my-app .contact .ctn form .send_contact {
margin: 25px auto;
}
.my-app .contact .ctn form .send_contact span {
font-size: 2.5em;
}
.my-app footer .first {
width: 90%;
}
.my-app footer .first div {
width: 100%;
}
.my-app footer .first div:nth-child(2n) {
padding-left: 0px;
}
.my-app footer .first div span {
font-size: 0.92em;
}
.my-app footer .second a , footer .second button {
font-size: 0.92em;
}
.my-app footer .second .back-to-top {
font-size: 0px;
padding: 0px;
width: 40px;
height: 40px;
}
.my-app footer .third {
padding: 20px 5vw 100px 5vw;
flex-direction: column-reverse;
}
.my-app footer .third > div {
margin-bottom: 20px;
}
.my-app .page-first-block h2 {
font-size: 2.5em;
}
.my-app .rmLt-all div {
height: 50vh;
padding-top: 50px;
}
.my-app .rmLt-all div span {
margin-bottom: 30px;
}
.my-app .rmLt-all div h3 {
font-size: 1.5em;
max-width: 80%;
}
.my-app .dtrm-second .ctn {
max-width: 80%;
}
.my-app .dtrm-second .ctn .img-ctn {
width: 80vw;
height: 80vw;
}
.my-app .dtrm-second .ctn .info {
width: 100%;
}
.my-app .dtrm-third {
padding: 0px 5vh;
}
.my-app .dtrm-third .ctn .img-ctn {
width: 50%;
height: 30vh;
}
.my-app .dtrm-fourth .ctn .info1 {
width: 100%;
padding: 5vh 0px;
}
.my-app .dtrm-fourth .ctn .info1 span {
font-size: 0.92em;
}
.my-app .dtrm-fourth .ctn .info2 h3 {
font-size: 2.08em;
}
.my-app .dtrm-fourth .ctn .info2 ul li {
font-size: 0.92em;
width: 100%;
}
.my-app .bookNow-ctn a , .bookNow-ctn button {
font-size: 3.33em;
letter-spacing: -5px;
}
.my-app .dtrm-fifth h2 {
font-size: 2.08em;
}
.my-app .dtrm-fifth .more-rooms-carousel {
padding-left: 20px;
}
.my-app .dtrm-fifth .more-rooms-carousel .item {
width: 70vw;
}
.my-app .dtrm-fifth .more-rooms-carousel .item span {
font-size: 1.17em;
margin-top: 25px;
}
.my-app .equip-second .equipments {
width: 80%;
}
.my-app .equip-second .equipments .bloc {
width: 100%;
}
.my-app .equip-second .equipments .bloc span {
font-size: 0.92em;
text-align: left;
}
.my-app .equip-second .equipments .bloc span.title {
font-size: 1.5em;
margin-bottom: 20px;
}
.my-app .srv-list .ctn .srv-group {
width: 100%;
height: 60vh;
margin-bottom: 6vh;
}
.my-app .srv-list .ctn .srv-group span {
font-size: 1.5em;
}
.my-app .srv-list .ctn .srv-group:nth-child(2n) {
margin-top: 0;
}
}
.my-app .home .etab-name {
width: max-content !important;
max-width: 92vw;
white-space: nowrap !important;
font-size: clamp(1.3rem, 4.4vw, 3.2rem) !important;
}
.my-app .home .etab-name .line-wrap {
height: 1.3em !important;
overflow: hidden;
line-height: 1.15;
}
.my-app .home .etab-name .line-1,
.my-app .home .etab-name .line-2,
.my-app .home .etab-name .line-3 {
white-space: nowrap !important;
}
.seo-h1 {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.intro .about,
.intro .title,
.go-back {
display: inline-flex;
align-items: center;
.btn-retour {
position: relative;
display: inline-flex;
align-items: center;
gap: 15px;
color: #FFF;
font-family: 'Poppins';
font-size: 1.33em;
text-transform: uppercase;
padding: 0px;
text-decoration: none;
z-index: 10;
opacity: 1;
transition: all 0.3s ease;
}
.btn-retour::before {
content: "←";
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border: 2px solid #FFF;
border-radius: 50%;
font-size: 1.5rem;
flex-shrink: 0;
}
.btn-retour:hover {
opacity: 0.8;
}
.btn-retour-icon {
width: 60px;
height: 60px;
flex-shrink: 0;
border: 2px solid #FFFFFF;
border-radius: 50%;
padding: 8px;
fill: #FFFFFF;
stroke: #FFFFFF;
}
.btn-retour:hover {
opacity: 0.8;
transform: scale(1.05);
}
.btn-retour {
position: fixed;
top: 20px;
left: 30px;
z-index: 12;
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
font-family: "Poppins";
font-size: 1.17em;
transition: all 0.3s ease-in-out;
padding: 0;
padding-left: 80px;
}
.btn-retour::before {
content: "←";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
border: 2px solid #FFFFFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8em;
color: #FFFFFF;
background: transparent;
flex-shrink: 0;
}
.btn-retour:hover {
opacity: 0.8;
}
.my-app .header .left .btn-retour {
padding-left: 70px !important;
position: relative;
text-decoration: none;
color: #FFFFFF;
}
.my-app .header .left .btn-retour::before {
content: "←";
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border: 2px solid #FFFFFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 1.3em;
line-height: 1;
}
.my-app .header .left .btn-retour-room {
display: flex;
align-items: center;
gap: 15px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF !important;
font-family: "Poppins";
font-size: 1.33em !important;
position: relative;
left: 30px;
transition: color 0.3s ease-in-out;
height: 80px;
line-height: 1;
white-space: nowrap;
}
.my-app .header .left .btn-retour-room .btn-retour-icon {
width: 50px !important;
height: 50px !important;
object-fit: contain;
transition: all 0.3s ease-in-out;
flex-shrink: 0;
display: block !important;
}
.my-app .header .left .btn-retour-room:hover {
color: #1D3B21 !important;
}
.my-app .header .left .btn-retour-room:hover .btn-retour-icon {
filter: brightness(0) saturate(100%) invert(20%) sepia(26%) saturate(2127%) hue-rotate(76deg) brightness(94%) contrast(101%);
}
.btn-reserve.btn-retour {
transition: all 0.3s ease-in-out;
}
.btn-reserve.btn-retour:hover {
color: #1D3B21;
border-color: #1D3B21;
}
.my-app .header .left .btn-retour-home::after {
background-image: url(../images/svg/room_back_white.svg) !important;
width: 50px !important;
height: 50px !important;
transition: all 0.3s ease-in-out;
}
.my-app .header .left .btn-retour-home:hover::after {
background-image: url(../images/svg/room_back_green.svg) !important;
}
.my-app .header .left .btn-retour-home:hover {
color: #1D3B21 !important;
}
body.detailChambre .my-app .header .left > span {
visibility: hidden !important;
width: 0 !important;
display: none !important;
}
body.detailChambre .my-app .header .left .menu_toggle {
display: none !important;
}
body.equipments .my-app .header .left > span,
body.landmarks .my-app .header .left > span {
visibility: hidden !important;
width: 0 !important;
display: none !important;
}
body.equipments .my-app .header .left .menu_toggle,
body.landmarks .my-app .header .left .menu_toggle {
display: none !important;
}