/***** fonts et reset *****/ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); body, ul, li, ol, form, h1, h2, h3, h4, h5, h6, div, span, p { padding:0; margin:0; border:0; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none;} article, aside, dialog ,figcaption, figure, footer, header, hgroup, main, nav, section { display: block;} input, textarea { -webkit-appearance: none; -ms-appearance: none; appearance: none; -moz-appearance: none; -o-appearance: none; border-radius: 0;} * { outline: none;} strong, b { font-weight: 600; font-size: 15px;} ul { list-style-type: none;} body { font: 400 14px/28px "Poppins"; letter-spacing: 0.4px; color: #000; background: #fff; position: relative;} body.active_overflow { height: 100vh; overflow: hidden;} a { text-decoration: none; color: #000; position: relative;} img { border: none;} main { position: relative; z-index: 10;} #wrapper { min-width: 320px; overflow: hidden; position: relative;} #wrapper * { box-sizing: border-box;} #footer { position: relative; z-index: 15;} @media (max-width:1200px) { #wrapper:after { display: none;} } @media (max-width:700px) { body { font-size: 13px; line-height: 26px;} strong, b { font-size: 14px;} } /***** scollbar *****/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #fff;} ::-webkit-scrollbar-thumb { background-color: #1b9dc8;} /***** transition *****/ @media (min-width:1201px) { .link, .slick-arrow, :before, :after, a, a span, .logo, .sub { transition: all 300ms ease-in-out;} } /***** class *****/ .wrapper { width: 90vw; max-width: 1200px; margin: 0 auto; position: relative;} .wrapper_large { max-width: 1400px;} .clear { clear: both; display: block;} .anchor { position: absolute; left: 0; top: -140px;} .titre_main { font: 500 80px/90px "Cormorant Garamond"; letter-spacing: 0.4px; color: #245873; position: relative; margin-bottom: 15px;} .sous_titre { font: 500 40px/45px "Cormorant Garamond"; letter-spacing: 0.4px; color: #1b9dc8; position: relative; margin-bottom: 15px;} .sous_titre.bigger { font-size: 60px; line-height: 65px;} .chapo { font: 400 14px/28px "Poppins"; margin-bottom: 15px;} .chapo span { display: block; margin-top: 15px;} .link { font: 400 15px/58px "Poppins"; letter-spacing: 0.5px; height: 60px; display: inline-block; color: #fff; padding: 0 40px; border-radius: 15px; background: linear-gradient(to top, #1b9dc8 0% 50%, #245873 50% 100%); background-size: 100% 200%; background-position: 0 100%; cursor: pointer;} .read_more { display: inline-block; color: #ae312e; cursor: pointer; transition: color 300ms ease-in-out;} .hide { display: none;} @media (min-width:1201px) { .link:hover { background-position: 0 0; color: #fff;} } @media (max-width:1200px) { .wrapper { min-width: inherit;} .titre_main { font-size: 60px; line-height: 65px;} .sous_titre { font-size: 30px; line-height: 35px;} .sous_titre.bigger { font-size: 50px; line-height: 55px;} .link { font-size: 14px; line-height: 54px; height: 56px; border-radius: 12px; padding: 0 30px;} } @media (max-width:1000px) { .wrapper { max-width: 750px;} .titre_main { font-size: 55px; line-height: 60px;} .sous_titre.bigger { font-size: 45px; line-height: 50px;} } @media (max-width:700px) { .wrapper { width: 88vw;} .titre_main { font-size: 30px; line-height: 35px; margin-bottom: 10px;} .sous_titre { font-size: 22px; line-height: 28px; margin-bottom: 10px;} .sous_titre.bigger { font-size: 30px; line-height: 35px;} .chapo { font-size: 13px; line-height: 26px; margin-bottom: 10px;} .chapo span { margin-top: 10px;} .link { font-size: 13px; line-height: 50px; height: 50px; border-radius: 8px; padding: 0 25px;} } /***** header et menu *****/ .header { width: 100%; font-size: 0; line-height: 0; letter-spacing: 0; position: fixed; left: 0; top: 0; z-index: 100; text-align: right; padding: 45px 0 0 0; transition: all 300ms ease-in-out;} .header .logo { width: 240px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 140; transition: all 300ms ease-in-out;} .header .logo img { width: 100%; height: auto; display: block;} .header .link { background-image: linear-gradient(to top, #245873 0% 50%, #1b9dc8 50% 100%); margin-left: 60px; width: 200px; padding: 0 0 0 75px; text-align: left;} .header .link:after { width: 21px; height: 100%; position: absolute; left: 35px; top: 0; background: url("../images/calendar_white.svg") 0 48% no-repeat; content: "";} .header .header_nav { display: inline-block; vertical-align: middle; position: relative; padding: 20px 0; transition: all 300ms ease-in-out;} .header .menu>li { position: relative; display: inline-block; vertical-align: top; margin-left: 40px;} .header .menu>li:first-child { margin-left: 0;} .header .menu>li>a { font-size: 15px; line-height: 58px; height: 60px; letter-spacing: 0.5px; color: #245873; display: block;} .header .menu>li.active>a { color: #1b9dc8;} .header .menu>li:last-child { margin-left: 20px;} .header .menu>li.lang-item-first { margin-left: 70px; position: relative;} .header .menu>li.lang-item-first:after { width: 1px; height: 12px; content: ""; position: absolute; left: -35px; top: 50%; margin-top: -7px; background: #245873;} .header .menu>li.current-lang a { color: #1b9dc8;} .sticky .header { padding: 0; background: #fff;} @media (min-width:1201px) { .menu_mobile { display: none;} .header .menu>li:hover { z-index: 999;} .header .menu>li:hover>a { color: #1b9dc8;} .sticky .header .logo { width: 200px;} } @media (max-width:1200px) { .menu_mobile { width: 80px; height: 120px; display: inline-block; vertical-align: middle; cursor: pointer; position: relative; z-index: 250; margin: 0 -20px; transition: height 300ms ease-in-out;} .menu_mobile div { width: 40px; height: 2px; background: #245873; position: absolute; right: 50%; top: 50%; margin: -1px -20px 0 0;} .menu_mobile div:before { width: 100%; height: 2px; background: #245873; position: absolute; right: 0; top: 7px; content: "";} .menu_mobile div:after { width: 100%; height: 2px; background: #245873; position: absolute; right: 0; top: -7px; content: "";} .menu_mobile.active div { width: 70px;} .menu_mobile.active div { width: 30px; height: 0; margin-right: -15px;} .menu_mobile.active div:before { top: 0; transform: rotate(45deg);} .menu_mobile.active div:after { top: 0; transform: rotate(-45deg);} .sticky .menu_mobile { height: 100px;} .header { padding: 0;} .header ::-webkit-scrollbar { display: none;} .header .logo { width: 200px; z-index: 205;} .header .link { vertical-align: middle; margin-right: 40px; z-index: 205;} .header .header_nav { width: 100%; position: fixed; right: -100%; top: 0; bottom: 0; overflow-y: scroll; z-index: 200; background: #eef6f8; padding: 60px 0 0 0; display: grid; align-items: center; transition: all 300ms ease-in-out 200ms;} .header .menu { display: block; width: auto; text-align: center; position: relative; z-index: 100; opacity: 0; transition: all 300ms ease-in-out 0ms;} .header .menu>li { width: 100%; display: block; margin: 0;} .header .menu>li>a { font: 500 60px/100px "Cormorant Garamond"; transition: none; height: auto;} .header .menu>li:last-child { margin-left: 10px;} .header .menu>li.lang-item-first { margin-left: 0;} .header .menu>li.lang-item-first:after { display: none;} .header .menu>li.lang-item { width: auto; display: inline-block; margin-top: 30px;} .header .menu>li.lang-item a { width: 50px; height: 50px; border-radius: 50%; background: #fff; font: 400 14px/50px "Poppins";} .header .menu>li.current-lang a { color: #1b9dc8;} .header.active .header_nav { right: 0; transition-delay: 150ms;} .header.active .menu { opacity: 1; transition-delay: 600ms;} } @media (max-width:1000px) { .header .menu { margin: 0 10vw;} } @media (max-width:700px) { .menu_mobile { height: 80px;} .sticky .menu_mobile { height: 80px;} .header { padding: 0;} .header .logo { width: 160px;} .header .header_nav { padding: 20px 0 0 0;} .header .menu>li>a { font-size: 40px; line-height: 70px;} .header .menu>li.lang-item { width: auto; display: inline-block; margin-top: 20px;} .header .menu>li.lang-item a { width: 46px; height: 46px; font-size: 13px; line-height: 46px;} .header .link { background: #245873; margin: 0 6vw 0 0; width: 45px; height: 46px; padding: 0; font-size: 0;} .header .link:after { width: 100%; left: 0; top: 0; background-position: 50% 48%;} } /***** atouts *****/ .atouts { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 40px; text-align: center; margin: 120px 0;} .atouts img { width: 80px; height: auto; display: block; margin: 0 auto 20px auto;} .atouts .titre_main { font-size: 30px; line-height: 30px; margin: 0 auto;} @media (max-width:1200px) { .atouts { grid-gap: 20px; margin: 80px 0;} .atouts img { margin: 0 auto 15px auto;} .atouts .titre_main { font-size: 25px; line-height: 30px;} } @media (max-width:1000px) { .atouts { margin: 60px auto;} .atouts .titre_main { max-width: 140px;} } @media (max-width:700px) { .atouts { grid-template-columns: 1fr 1fr; grid-gap: 20px; margin: 40px 0; padding: 0 5px;} .atouts img { width: 60px;} .atouts .titre_main { font-size: 18px; line-height: 22px; max-width: none;} } /***** moving galerie *****/ .moving_galerie { width: auto; left: 50%; transform: translateX(-50%); position: relative; text-align: center;} .moving_galerie .row { width: auto; display: flex;} .moving_galerie .row .item { width: auto; display: flex; animation: scroll_gallery 80s linear infinite;} .moving_galerie .row .item div { padding: 10px;} .moving_galerie .row .item img { width: auto; height: 450px; display: block; margin: 0 auto; border-radius: 20px; transition: all 300ms ease-in-out;} .moving_galerie.reverse .row .item { animation: scroll_gallery_reverse 80s linear infinite;} @keyframes scroll_gallery { 0% { transform: translate(0, 0);} 100% { transform: translate(-100%, 0);} } @keyframes scroll_gallery_reverse { 0% { transform: translate(-100%, 0);} 100% { transform: translate(0, 0);} } @media (max-width:1600px) { .moving_galerie .row .item img { height: 400px;} } @media (max-width:1200px) { .moving_galerie .row .item div { padding: 8px;} .moving_galerie .row .item img { height: 350px; border-radius: 15px;} } @media (max-width:1000px) { .moving_galerie .row .item img { height: 300px; border-radius: 10px;} } @media (max-width:700px) { .moving_galerie .row .item div { padding: 5px;} .moving_galerie .row .item img { height: 60vw; border-radius: 8px;} .moving_galerie.reverse { display: none;} } /***** custom search form *****/ .search .wpbc_container_search_form { width: 100%; margin: -10px 0 0 0;} .search .wpbc_container_search_form .well { border: none; box-shadow: none; border-radius: 0; background: none; padding: 0; margin: 0;} .search .wpbc_container_search_form .wpbc__field > *, .search #booking_search_form .wpbc_container_search_form label, .search #booking_search_form .wpbc_container_search_form input, .search #booking_search_form .wpbc_container_search_form input[type="text"], .search #booking_search_form .wpbc_container_search_form select { margin: 0 !important; font-size: 14px; box-sizing: border-box;} .search #booking_search_form .wpbc_container_search_form input, .search #booking_search_form .wpbc_container_search_form input[type="text"], .search #booking_search_form .wpbc_container_search_form select { background-color: #fff;} .search .wpbc_container_search_form .wpbc__row { justify-content: start; grid-gap: 30px; display: grid; grid-template-columns: 1fr 1fr auto;} .search .wpbc_container_search_form .wpbc__field { position: relative; display: block; /*column-count: 2; column-gap: 30px;*/ margin: 0; align-content: end;} .search .wpbc_container_search_form .wpbc__field:first-child { column-count: 2; column-gap: 40px;} .search .wpbc_container_search_form .wpbc__field div.arrow { width: 40px; height: 60px; background: url("../images/arrow_date.svg") 50% 48% no-repeat; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);} .search #booking_search_form .wpbc_container_search_form label { display: block; font-weight: 600; line-height: 20px; color: #444; margin-bottom: 10px !important;} .search #booking_search_form .wpbc_container_search_form input[type="text"] { width: 100% !important; min-width: 200px; height: 60px; border-radius: 8px; padding: 0 20px; display: block; background: url("../images/calendar_blue.svg") right+20px center no-repeat #fff;} .search #booking_search_form .wpbc_container_search_form select { width: 100% !important; height: 60px; border-radius: 8px; padding: 0 45px 0 20px; display: block;} .search #booking_search_form .wpbc_container_search_form input[type="submit"] { font: 400 15px/58px "Poppins"; letter-spacing: 0.5px; height: 60px; display: inline-block; color: #fff; padding: 0 40px; border-radius: 15px; background: linear-gradient(to top, #1b9dc8 0% 50%, #245873 50% 100%); background-size: 100% 200%; background-position: 0 100%; cursor: pointer; box-shadow: none; border: none;} @media (max-width:1200px) { .search .wpbc_container_search_form .wpbc__row { grid-gap: 20px;} .search #booking_search_form .wpbc_container_search_form input[type="text"] { height: 56px;} .search #booking_search_form .wpbc_container_search_form select { height: 56px;} .search #booking_search_form .wpbc_container_search_form input[type="submit"] { font-size: 14px; line-height: 54px; height: 56px; border-radius: 12px; padding: 0 30px;} } @media (max-width:1000px) { .search .wpbc_container_search_form .wpbc__row { grid-template-columns: 1fr auto;} .search .wpbc_container_search_form .wpbc__field:last-child { grid-column: span 2;} } @media (max-width:700px) { .search .wpbc_container_search_form { margin: 0;} .search .wpbc_container_search_form .wpbc__row { grid-template-columns: 1fr; grid-gap: 15px;} .search .wpbc_container_search_form .wpbc__field:last-child { grid-column: auto;} .search .wpbc_container_search_form .wpbc__field:first-child { column-count: 1;} .search .wpbc_container_search_form .wpbc__field div.arrow { width: 100%; height: 15px; background: none; position: static; transform: none;} .search #booking_search_form .wpbc_container_search_form label { font-size: 13px; margin: -4px 0 8px 0!important;} .search #booking_search_form .wpbc_container_search_form input[type="text"] { height: 50px;} .search #booking_search_form .wpbc_container_search_form select { height: 50px; font-size: 13px;} .search #booking_search_form .wpbc_container_search_form input[type="submit"] { font-size: 13px; line-height: 50px; height: 50px; border-radius: 8px;} } /***** custom date picker *****/ #datepick-div { box-shadow: none; transition: none; width: 280px!important; background: #245873; border: 1px solid #245873; margin: 10px 0!important;} #datepick-div.datepick-inline .datepick-header { background: #245873;} div.datepick-inline table.datepick, div.datepick-inline table.datepick th, div.datepick-inline table.datepick td { border: 1px solid #245873!important;} .datepick-inline .calendar-links .datepick-prev a, .datepick-inline .calendar-links .datepick-next a { font-size: 18px!important; line-height: 0!important; font-weight: 400!important; padding: 0 10px!important;} .block_hints .block_free, .block_hints .block_time, .block_hints .block_check_in_out div.check-in-div, .block_hints .block_check_in_out div.check-out-div, .datepick-inline .date_available, .datepick-inline .timespartly.check_in_time div.check-in-div, .datepick-inline .timespartly.check_out_time div.check-out-div { background: #1b9dc8!important;} .wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock.datepick-days-cell-over, .datepick-inline .datepick .datepick-days-cell-over { background: #8dcee3!important;} .datepick-inline .datepick-one-month .datepick .datepick-current-day { background-color: #555!important;} /* Fill diagonal check in/out items with AVAILABLE background color */ .wpbc-cell-box .wpbc-diagonal-el svg polygon{fill: #1b9dc8!important;} /* Firstly we define background of the day cells background as available */ .datepick-inline td.datepick-days-cell.check_in_time, .datepick-inline td.datepick-days-cell.check_out_time {background-color: #1b9dc8!important;} /* Pending */ .datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date2approve .wpbc-cell-box .wpbc-co-in svg polygon, /* Check In */ .datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date2approve .wpbc-cell-box .wpbc-co-out svg polygon /* Check Out */{fill: #DF9A00!important;} /* Approved */ .datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date_approved .wpbc-cell-box .wpbc-co-in svg polygon, /* Check In */ .datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date_approved .wpbc-cell-box .wpbc-co-out svg polygon /* Check Out */ {fill: #C60B0B!important;} /* C e l l O V E R Dates */ .datepick-inline td.datepick-days-cell.check_in_time.datepick-days-cell-over, .datepick-inline td.datepick-days-cell.check_out_time.datepick-days-cell-over {background-color: #aaa!important;} /***** CTA *****/ .cta { position: relative; margin: 100px auto; text-align: center;} .cta .titre_main { font-size: 60px; line-height: 65px; margin: -10px 0 25px 0;} @media (max-width: 1600px){ .cta .titre_main { font-size: 50px; line-height: 55px;} } @media (max-width: 1200px){ .cta { margin: 80px auto;} .cta .titre_main { font-size: 40px; line-height: 45px; margin: -5px 0 20px 0;} } @media (max-width: 1000px){ .cta { margin: 70px auto;} } @media (max-width: 700px){ .cta { margin: 40px auto;} .cta .titre_main { font-size: 22px; line-height: 30px; margin: -5px 0 15px 0;} .cta .link { width: 100%; text-align: center;} } /***** footer *****/ .footer { position: relative; background: #245873; color: #fff; font-size: 0; padding-top: 100px; z-index: 5; text-align: center;} .footer .bloc_footer p.titre_main { font-size: 50px; line-height: 56px; color: #fff; margin: 0 0 20px 0;} .footer a.email { font-size: 24px; line-height: 30px; border-bottom: 1px solid #fff; display: inline-block; color: #fff; margin: 80px 0;} .footer ul.bloc_footer { margin: 60px 0 0 0;} .footer ul.bloc_footer li { display: inline-block; margin-right: 60px; position: relative;} .footer ul.bloc_footer li:after { width: 1px; height: 11px; content: ""; position: absolute; right: -30px; top: 4px; background: #1b9dc8;} .footer ul.bloc_footer li:last-child { margin: 0;} .footer ul.bloc_footer li:last-child:after { display: none;} .footer ul.bloc_footer li a { color: #fff; font-size: 15px; line-height: 20px; letter-spacing: 0.8px;} .footer .rs { position: absolute; left: 0; right: 0; top: 0; font-size: 0; line-height: 0; letter-spacing: 0; text-align: left;} .footer .rs a { width: 56px; height: 56px; border-radius: 50%; display: inline-block; vertical-align: top; margin-right: 10px;} .footer .rs .facebook { background: url("../images/facebook.svg") 50% no-repeat #1b9dc8;} .footer .rs .instagram { background: url("../images/instagram.svg") 50% no-repeat #1b9dc8;} .footer .rs .scroll { background: url("../images/scrolltop.svg") 50% 48% no-repeat #1b9dc8; margin: 0; float: right;} .footer_bottom { padding: 20px 0; line-height: 0;} .footer_bottom li { display: inline-block; font-size: 12px; line-height: 20px; margin-right: 30px; letter-spacing: 1px; position: relative;} .footer_bottom li:after { width: 1px; height: 9px; content: ""; position: absolute; right: -15px; top: 5px; background: #1b9dc8;} .footer_bottom li:last-child { margin: 0;} .footer_bottom li:last-child:after { display: none;} .footer_bottom li a { color: #fff;} .toponweb { display: block; z-index: 85; position: absolute; right: 0; bottom: 0; transition: bottom 300ms ease-in-out;} .toponweb span { width: auto; height: 60px; display: block; padding: 20px; background: linear-gradient(to left, #fff 0% 50%, #1b9dc8 50% 100%); background-size: 200% 100%; background-position: 100% 0;} .toponweb img { width: 76px; height: auto; display: block; margin: 0 auto; filter: invert(1); transition: all 300ms ease-in-out;} .toponweb.show { bottom: 0;} @media (min-width:1201px) { .footer a.email:hover, .footer .bloc_footer a:hover, .footer_bottom li a:hover { color: #1b9dc8; border-color: #1b9dc8;} .footer .rs a:hover { background-color: #245873;} .toponweb:hover span { background-position: 0 0;} .toponweb:hover img { filter: invert(0);} } @media (max-width:1200px) { .footer { padding-top: 80px;} .footer .bloc_footer p.titre_main { font-size: 40px;} .footer a.email { font-size: 22px; line-height: 28px; margin: 60px 0;} .footer ul.bloc_footer { margin: 40px 0 0 0;} .footer ul.bloc_footer li:after { height: 10px; top: 5px;} .footer ul.bloc_footer li a { font-size: 14px;} } @media (max-width:1000px) { .footer { padding-top: 60px;} .footer a.email { margin: 50px 0;} } @media (max-width:700px) { .footer { padding-top: 40px;} .footer .bloc_footer p.titre_main { font-size: 28px; line-height: 30px;} .footer a.email { font-size: 18px; line-height: 24px; margin: 20px 0 40px 0;} .footer ul.bloc_footer { margin: 30px auto 0 auto; max-width: 260px;} .footer ul.bloc_footer li { display: inline-block; margin: 0 10px;} .footer ul.bloc_footer li:after { display: none;} .footer ul.bloc_footer li a { font-size: 13px;} .footer .rs { position: static; text-align: center;} .footer .rs a { width: 50px; height: 50px;} .footer .rs .facebook { background-size: 10px auto;} .footer .rs .instagram { background-size: 22px auto;} .footer .rs .scroll { background-size: 24px auto; background-position: 50% 45%; float: none;} .footer_bottom { text-align: center; margin-top: 25px; padding: 0 0 25px 0;} .footer_bottom li { display: block; margin: 0; font-size: 11px; line-height: 26px;} .footer_bottom li:after { display: none;} .toponweb { width: 100%; position: static; background: #fff;} .toponweb span { height: 56px; padding: 17px;} .toponweb img { width: 70px;} }