* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {/* font-size: 62.5%*/ font-size: 10px }

body { font-family: 'Barlow Condensed', sans-serif; color: #666666; background-color: #ccc; letter-spacing: 1px }

.body { background-color: #fff; max-width: 200rem; margin: 0 auto; overflow: hidden; }

ul, li, h1, h2, h3, h4, h5, p { list-style: none; }

a { text-decoration: none; color: #666666; outline: none; font-size: 1.5rem; line-height: 1.6; }

a:focus {outline: none!important }

b { font-weight: 600!important; }

p { line-height: 1.5; font-size: 1.8rem; letter-spacing: 0.6px }

.container { max-width: 128rem; margin: 0 auto; padding: 0 2%; width: 90%; }

button { cursor: pointer; background-color: transparent; border: none; font-family: 'Barlow Condensed', sans-serif; color: #4D4D4D; letter-spacing: 1px}

input { border: 0; font-family: 'Barlow Condensed', sans-serif; }

input:focus { outline: none!important }

.blk { font-weight: 900 }

.center { text-align: center; }

.clear { clear: both; }

.flex { display: flex; flex-wrap: wrap; }

.clearfix::after { content:""; display: table; clear: both; }

.upper { text-transform: uppercase; }

.fff {color: #fff}

.hide { overflow: hidden; }

.bgg { background-color: #222222 }

.bggray { background-color: #333 }

.bgfff { background-color: #fff }

.eee { background-color: #eee }

.trans {transition: all 0.3s ease 0s;}

.font {font-family: 'Gilda Display', serif; letter-spacing: 0.6px}

.bgbe { background-color: #F8F5F0 }

.red { color: #B24500 }

.c9 { color: #C9C9C9 }



/*TOP BUTTON*/

.back-to-top { text-align: center; position: fixed; z-index: 200; bottom: 1rem; right: 1rem; display: inline-block; padding: 1.6rem; margin: 1em; background-color: #222; border: 1px solid #ccc; }

.back-to-top img { width: 1.4rem; }

.back-to-top:hover {cursor: pointer;}



.cta { letter-spacing: 1.3px; font-size: 1.6rem; text-transform: uppercase; border: 1px solid; font-weight: bold; transition: all 0.3s ease 0s; display: inline-block; padding: 0.6rem 2.5rem; text-align:center; }

.cta:hover { background-color: rgba(255,255,255,0.3); }

.cta.ctaline { padding: 0 0 0.5rem 0; border:none; border-bottom: 1px solid; }



.headerpage .cta.bgp { background-color: #E5A399!important }



.shadow { box-shadow: 0 0 15px rgba(0,0,0,0.2) }

.sha { box-shadow: 0 0 20px rgba(0,0,0,0.3) }



.t1 { font-size: 5.5rem; font-weight: lighter; letter-spacing: 8px }

.t2 { font-size: 1.8rem; font-weight: lighter; }

.t3 { font-size: 5rem; font-weight: lighter; }

.t4 { font-size: 3rem; font-weight: lighter; }



.bggradient { background: rgb(34,5,5);

background: linear-gradient(180deg, rgba(34,5,5,1) 0%, rgba(119,17,19,0.5242297602634804) 43%, rgba(154,25,27,0) 100%);  }

.bggradient2 {  background: rgb(34,5,5);

background: linear-gradient(0deg, rgba(34,5,5,1) 0%, rgba(119,17,19,0.5242297602634804) 43%, rgba(154,25,27,0) 100%); }



/* The Loader */

#loader-wrapper {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 3000;overflow: hidden;}

.no-js #loader-wrapper {display: none;}

#loader {position: absolute;left: 50%; top: 40%; transform: translate(-50%, -50%);z-index: 11;}

#loader lottie-player { width: 45rem; height: auto }

#loader-wrapper .loader-section {position: fixed;top: 0;width: 51%;height: 100%;background: #f8f5f0;z-index: 10;}

#loader-wrapper .loader-section.section-left {left: 0;}

#loader-wrapper .loader-section.section-right {right: 0;}

/* Loaded styles */

.loaded #loader-wrapper .loader-section.section-left {-webkit-transform: translateX(-100%);transform: translateX(-100%);-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}

.loaded #loader-wrapper .loader-section.section-right {-webkit-transform: translateX(100%);transform: translateX(100%);-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}

.loaded #loader {opacity: 0;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}

.loaded #loader-wrapper {visibility: hidden;-webkit-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition: all 0.3s 1s ease-out;transition: all 0.3s 1s ease-out;}



header { top: 5rem; padding: 1rem 0; position: absolute; width: 100%; max-width: 200rem; z-index: 10;}

header .flex { justify-content: space-between; align-items: center; }

header .logo img { width: 25rem; margin-top: 5px}

header .menu { display: flex; width: calc(100% - 25rem); align-items: center;}

.headerhotel .menu { justify-content: flex-end; }

header .menu li { padding: 0 3.5rem 0 0; }

header .menu li a { font-size: 1.7rem; color: #fff; transition: 0.2s }

header .menu li a:hover { opacity: 0.6 }

header .cta { font-size: 1.7rem; padding: 0.6rem 4rem }

header .active { font-weight: 700!important }

a.no { opacity: 0.5!important }



.headerpage { background-color: #222; top: 3rem; box-shadow: 0 0 10px rgba(0,0,0,0.5)}



.sticky { box-shadow: 0 10px 20px rgba(0,0,0,0.2); position: fixed; top: 0; width: 100%; left: 0; right: 0; margin: 0 auto; z-index: 1000; background-color: rgba(34,34,34,0.8);}

.sticky .dropdown-content { padding-top: 3.8rem; }

.sticky .dropdown-content a { background-color: rgba(34,34,34,0.9); padding: 1rem 2rem; }

.sticky .dropdown-content a:hover { opacity: 1; padding: 1rem 2rem; background-color: #000; color: #fff; }

.hidden-sticky { height: 0 }

header.sticky .logo img { width: 15rem }
.logo_new { width: 15rem }



.slideindex { position: relative; height: 100vh; width: 100%; min-height: 80rem; }

.slideindex .container { display: flex; align-items: center; height: 100% }

.slideindex .container .txt { width: 80rem; margin: 0 auto; position: relative; z-index: 1; text-align: center; }

.slideindex .container .txt img { margin-bottom: 4rem; width: 41.3rem }

.slideindex .container .txt .t1 { margin: 4rem 0 }

.slideindex .bggradient { position: absolute; width: 100%; z-index: 1; opacity: 0.95; height: 90vh; }

#slidehome { position: absolute; top: 0; left: 0; width: 100%; }

.slidehome .splide__slide { height: 100vh; min-height: 80rem; display: flex; align-items: center; justify-content: center; position: relative; }

.slidehome .splide__slide .txt { width: 50%; position: relative; z-index: 1; margin-top: 3% }

.slidehome .splide__slide .txt .title { font-size: 4.4rem; font-weight: 400 }

.slidehome .splide__slide .txt .title b { color: #F15A24 }

.slidehome .splide__slide .txt p { font-size: 1.9rem; margin: 3rem 0 4rem; width: 42rem }

.slidehome .splide__slide .imgd { height: 100vh; min-height: 80rem; position: absolute; top: 0; right: 0; width: 100%; object-fit: cover; object-position: center; }

.slidehome .splide__slide .imgm { display: none; }



#slidehome .splide__pagination::before { height: 2px; background-color: red; width: 10rem }

#slidehome .splide__pagination { width: 1px; padding: 1rem 0; border-top: 45px solid #fff; border-bottom: 45px solid #fff; z-index: 5; position: absolute; bottom: 40%; right: 5rem; display: flex; align-items: flex-end; flex-direction: column; }

#slidehome .splide__pagination__page { color: #fff; width: 2rem; margin: 0 4px; background: transparent; cursor: pointer;}

#slidehome .splide__pagination__page:focus {outline: none;}

#slidehome .splide__pagination__page.is-active::after { color: #B24500; }

#slidehome .splide__pagination li { color: #fff; margin: 0 2rem 0 -1.3rem }

#slidehome .splide__pagination li:first-child .splide__pagination__page::after { content: "1"; font-family: 'Bebas Neue', cursive; font-size: 1.9rem;}

#slidehome .splide__pagination li:nth-child(2) .splide__pagination__page::after { content: "2"; font-family: 'Bebas Neue', cursive; font-size: 1.9rem;}

#slidehome .splide__pagination li:nth-child(3) .splide__pagination__page::after { content: "3"; font-family: 'Bebas Neue', cursive; font-size: 1.9rem;}

#slidehome .splide__pagination li:nth-child(4) .splide__pagination__page::after { content: "4"; font-family: 'Bebas Neue', cursive; font-size: 1.9rem;}



#slidehome .my-arrows {position: absolute; bottom: 5rem; width: 12rem; z-index: 9; right: 3rem; }

#slidehome .my-arrows button:focus {outline: none;}

#slidehome .my-prev { transform: rotate(180deg); margin-right: 10px; }

#slidehome .my-next, #slidehome .my-prev { position: relative; width: 5rem; height: 5rem; background-color: transparent; border-radius: 50%; border: 1px solid #fff; }

#slidehome .my-prev svg { position: absolute; top: 15px; left: 19px }

#slidehome .my-next svg { position: absolute; top: 15px; left: 21px  }

#slidehome .my-prev svg, #slidehome .my-next svg path {fill:#fff; cursor: pointer;}



.go { z-index: 2; position: absolute; bottom: -6px; left: -1px; }



.solutions { padding: 5rem 0 }

.solutions .flex { justify-content: space-between; }

.solutions .box { margin-top: 2rem; overflow: hidden; display: flex; justify-content: flex-end; flex-direction: column; width: 31.33%; height: 28vw; position: relative; }

.solutions .box .img { transform: scale(1); transition: 1s; position: absolute; width: 100%; object-position: center; object-fit: cover; height: 100%; }

.solutions .box .logo { position: relative; z-index: 1; width: 80%; margin: 0 auto 4rem }

.solutions .box .bggradient2 { width: 100%; bottom: 0; left: 0; height: 90%; position: absolute; opacity: 0.8 }

.solutions .box:hover .img { transform: scale(1.05); }

.solutions .box .cta { position: absolute; top: 2rem; right: 2rem; font-size: 1.8rem; font-weight: lighter; }



.mappa { position: relative; padding-top: 2rem; overflow: hidden; }

.mappa .img { object-fit: cover; width: 150rem; height: 50rem; object-position: center; margin-bottom: -2px; margin-left: -1rem }

.mappa .icon { transition: 0.5s; transform: scale(0.95); position: absolute; opacity: 0.8 }

.mappa .icon:hover { opacity: 1; transform: scale(1); }

.mappa .icon1 { top: 19rem; left: 57rem }

.mappa .icon2 { top: 38.5rem; left: 89rem }

.mappa .icon3 { top: 39rem; left: 95rem }



/*sidenav*/

.menuresponsive { display: none; }

#mySidenav { display: none;}



.book { padding: 6rem 0; position: relative; }

.book .sb { /*box-shadow: 0 0 20px rgba(0,0,0,0.3); */position: relative; padding: 3rem; width: 100%; max-width: 50rem; }

.book #sb-container .sb-custom-button-hover-bg-color { text-transform: uppercase; font-size: 1.7rem!important; background-color: #9E7A5F!important; padding: 1.8rem 1rem!important; height: auto!important }

.book #sb-container .sb-custom-icon-color { fill:#9E7A5F!important ; color:#9E7A5F!important  }

.book #sb-container .sb-custom-link-color { color: #9E7A5F!important }

.book .sb-screen-m .sb__dates, .sb__dates .sb__form-field, .sb-screen-m .sb__guests-rooms, .sb-screen-l .sb__btn--verify { width: 100%!important; margin-bottom: 1.5rem!important }

.book .sb-screen-m .sb__guests-rooms { padding: 0!important }

.book .sb__form-field-label { font-size: 1.5rem!important; margin-bottom: 0.3rem!important }

.book .sb-screen-l .sb__form-field-month-year, .book .sb-screen-l .sb__form-field-guests, .book .sb-screen-l .sb__form-field-weekday, .book .sb-screen-l .sb__form-field-rooms { font-size: 1.4rem!important }

.book .sb__guests-rooms { margin-top: 0!important }

.book .t3 { margin: 2rem 0 1.7rem }

.book .container { justify-content: space-between; }

.book .bg { position: absolute; top: 0; left: 0; width: 100%; opacity: 0.5; height: 100%; object-fit: cover; object-position: center; }

.book .txt { position: relative; }



footer { padding: 3rem 0; position: relative; }

footer .flex { justify-content: space-between; }

footer .cl { width: auto; margin-right: 1%}

footer .cta { margin-top: 1.4rem } 

footer .loghi img { margin-right: 2rem; margin-bottom: 3rem; min-width: 12rem }

footer .logo { width: 15rem }

footer .isocial { margin: 1rem 3px 0 0 }

footer p, footer a { font-weight: 300; line-height: 1.5; font-size: 1.6rem }

footer a:hover { color: #888 }

footer .cta:hover { color: #fff }



.credits .flex { border-top: 1px solid #ccc; padding: 2rem 0; justify-content: space-between; }

.credits p, .credits a { font-size: 1.5rem; }



.credits .iubenda-embed:not(.iubenda-nostyle) { box-shadow: none!important; font-weight: 400!important; letter-spacing: 0.5px!important; font-size: 1.5rem!important; font-family: 'Barlow Condensed', sans-serif!important; padding: 0!important; background-color: transparent!important; border:0!important; }



.mappamobile { display: none; }



.open-close-box { position: relative; padding-top: 1rem }

.open-close-box .continua { padding:3px 0 0 4rem }

.open-close-box img { width: 3rem!important; position: relative; }

.open-close-box span { position: absolute; top: 1rem; width: 100%; cursor: pointer; }

.open-close-box .text_open { padding-top: 1.5rem }

.maintxt.puretxt { margin-top: 5rem }

.maintxt.puretxt .txt { width: 100% }



/*tab*/

/*boxricambi*/

.boxtab { position: relative; }

.boxtab .tab { width: 33.23%; margin-right: 1px }

.boxtab .tabb { width: 33.23%; margin-right: 1px }

.tab-group:after {content: "";display: table;clear: both;}

.tab-group { display: flex; align-items: flex-end; }

.tab-group li { transition: 0.2s; opacity: 0.5; width: 6rem; height: 5rem; text-align: center; background-color: #f2ede7; border-radius: 0 1.4rem 0 0 }

.tab-group li a { font-size: 1.8rem; text-transform: uppercase; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}

.tab-group li:hover { }

.tab-group .active { background: #f2ede7; opacity: 1; color: #fff; height: 6rem; margin-top: 0 }

.tab-content > div {display: none;}

.tab-content > div:first-child {display: block;}

.tab-content .inputcerca { display: flex; justify-content: space-between; align-items: flex-end;}

.inputcerca .input { width: 43% }

.tab-content .input { position: relative; margin-top: 2rem }

.tab-content .input .info { position: absolute; top: 0; right: 0 }

.tab-content .input input { margin-top: 1rem; width: 100%; padding: 1.5rem; border-radius: 0.5rem; border: 0; }

.tab-content { position: relative; }



/*pages*/

.section { padding: 5rem 0 }

#thehotel .flex { align-items: center; justify-content: space-between; }

#thehotel .txt { width: 56% }

.section .txt p { margin: 2rem 0 }

.section .txt .t2 { margin: 2.5rem 0 2rem }

#thehotel .img { width: 40% }

#rooms .desc { width: 100%; max-width: 80rem; margin: 2rem auto }

#rooms .box { width: 48%; background-color: #F8F5F0 }

#rooms .box .txt { position: relative; text-align: left; padding: 3rem}

#rooms .box .txt .title { font-size: 3rem; font-weight: lighter; }

#rooms .box .txt p { margin: 0}

#rooms .box .plus { position: absolute; bottom: 0; right: 0; width: 8rem; opacity: 0.5 } 

#rooms .solutions { padding: 1rem 0 }

#rooms .box:nth-child(2), #rooms .box:nth-child(4) { margin-top: 6rem }



#slideveicoli .my-arrows {position: absolute; bottom: 0; width: 100%; z-index: 1; margin: 0 auto; left: 0; right: 0;}

#slideveicoli .my-arrows button:focus {outline: none;}

#slideveicoli .my-prev { display: none; }

#slideveicoli .my-next { transition: 0.5s; background-color: rgba(0,0,0,0.5); right: 0; position: absolute; bottom: 0; padding-top: 2rem; padding-left: 1rem; }

#slideveicoli .my-next:hover { background-color: rgba(0,0,0,1); }

#slideveicoli .my-next svg { width: 6rem; margin-bottom: -1rem }

#slideveicoli .my-prev svg, #slideveicoli .my-next svg path {fill:#fff; cursor: pointer;}

#slideveicoli img { width: 100%; }

.veicolo { margin: 3rem 1% 0 1%; width: 31.33%; background-color: #fff; border:5px solid #fff; }

.veicolo .txt { padding: 1rem }

.veicolo .prezzo span { font-size: 3.5rem }

.veicolo .cta {width: 100%; border-radius: 0;}

.veicolo .imgcopertina { width: 100% }

.cta.bgred:hover { background-color: #cd000c }

.veicolo.active { border: 5px solid red; }

.veicolo .cta { margin-bottom: -1px }



form.popup { max-width: 120rem }

form.popup .txt { width: calc(97% - 450px) }

.popup #slideveicoli, #slideveicoli-list { width: 450px!important }

.popup #slideveicoli img { width: 100%!important }

.popup .veicolo { width: 100%; margin: 0; justify-content: space-between; align-items: flex-start; }

.popup .veicolo .txt { padding: 0 0 3rem }

.popup .veicolo .txt .prezzo { border-top: 1px solid #ccc; padding-top: 1rem; margin-top: 2rem }

.popup .veicolo .txt .info { margin: 1rem 0 0; align-items: center; }

.popup .veicolo .txt .info img { margin-right: 5px }

.buttonflex { justify-content: flex-end; margin-top: 5rem }



.sectionwslider .txt {width: 48%}

.sliderestaurant {width: 48%;}

.sliderestaurant .splide__slide img { width: 100%; }

.sliderestaurant .my-arrows {position: absolute; bottom: 40%; width: 96%; z-index: 9; left: 3%}

.sliderestaurant .my-arrows button:focus {outline: none;}

.sliderestaurant .my-prev { transform: rotate(180deg); margin-right: 10px; }

.sliderestaurant .my-next, .sliderestaurant .my-prev { position: relative; width: 5rem; height: 5rem; background-color: transparent; border-radius: 50%; border: 1px solid #fff; }

.sliderestaurant .my-next { position: absolute; right: 3%}

.sliderestaurant .my-prev svg { position: absolute; top: 15px; left: 19px }

.sliderestaurant .my-next svg { position: absolute; top: 15px; left: 21px  }

.sliderestaurant .my-prev svg, .sliderestaurant .my-next svg path {fill:#fff; cursor: pointer;}

.sectionwslider .flex { justify-content: space-between; align-items: center; }

.sectionwslider.golf { background-color: #eee; }



#services .boxes { justify-content: center; }

#services .boxes .bl { width: 28rem; margin: 1.4rem; border:1.5rem solid #fff; height:28rem; position: relative; }

#services .boxes .bl img { width: 100%; height: 100%; object-position: center; object-fit: cover; }

#services .boxes .bl .title { position: absolute; left: 2.5rem; bottom: 2.5rem; font-size: 1.7rem; font-weight: lighter; text-transform: uppercase; }

#services .boxes .bggradient2 { position: absolute; width: 100%; height: 50%; bottom: 0; left: 0; opacity: 0.7 }

.services .list.flex { flex-direction: column; justify-content: flex-start; text-align: left; width: 22rem; margin: 2rem auto }

.services li { font-size: 1.8rem; margin: 0.5rem 0; text-transform: uppercase; }



.slidemodale {width: 55%; height: 25vw}

.slidemodale .splide__slide img { width: 100%; height: 25vw; object-fit: cover; object-position: center; }

.slidemodale .my-arrows {position: absolute; bottom: 40%; width: 96%; z-index: 9; left: 3%}

.slidemodale .my-arrows button:focus {outline: none;}

.slidemodale .my-prev { transform: rotate(180deg); margin-right: 10px; }

.slidemodale .my-next, .slidemodale .my-prev { position: relative; width: 5rem; height: 5rem; background-color: transparent; border-radius: 50%; border: 1px solid #fff; }

.slidemodale .my-next { position: absolute; right: 3%}

.slidemodale .my-prev svg { position: absolute; top: 15px; left: 19px }

.slidemodale .my-next svg { position: absolute; top: 15px; left: 21px  }

.slidemodale .my-prev svg, .slidemodale .my-next svg path {fill:#fff; cursor: pointer;}



.modale .center { margin: 0 0 3rem }

.modale .m1 { justify-content: space-between; margin-bottom: 3rem }

.modale .m1 .txt { width: 42% }

.modale .m1 .txt p { margin: 2.5rem 0 }

.modale .row { width: 100%; justify-content: space-between; border-top: 2px solid #eee; padding: 2rem 0 }

.modale .row .title { font-size: 1.8rem; width: 45% }

.modale .row .list { width: 50%; flex-direction: column; }

.modale .row .list li { font-size: 1.8rem; margin: 0.5rem 0; text-transform: uppercase; }



.errorpage .bg { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; left: 0; top: 0; opacity: 0.4 }
.bg_new { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; left: 0; top: 0; }

.errorpage .t1 { font-size: 3rem; }

.errorpage .t1 span { font-size: 8rem; display: block; }



/*style check box*/

.containercheck { text-align: left;

  margin-top: 3rem; font-size: 1.3rem;

  display: block;

  position: relative;

  padding-left: 3rem;

  cursor: pointer;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}



/* Hide the browser's default checkbox */

.containercheck input {

  position: absolute;

  opacity: 0;

  cursor: pointer;

  height: 0;

  width: 0;

}



/* Create a custom checkbox */

.checkmark {

  position: absolute;

  top: -1px;

  left: 0;

  height: 2rem;

  width: 2rem;

  background-color: #fff;

  border-radius: 0.2rem;

  border: 1px solid #aaa;

}



/* On mouse-over, add a grey background color */

.containercheck:hover input ~ .checkmark {

  background-color: #ccc;

}



/* When the checkbox is checked, add a blue background */

.containercheck input:checked ~ .checkmark {

  background-color: #98bb45;

}



/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {

  content: "";

  position: absolute;

  display: none;

}

/* added by chuks eke for new home page link */

.home_link
{
background-color: #FCFAF8;
width: 30%;
height: 120px;
display: inline-block;
box-sizing: padding-box;
padding: 10px 20px 10px 20px;
margin-left: 7px;
margin-bottom: 20px;
text-align:left;
}

.home_link:hover
{
background-color: #F7F3ED;
width: 30%;
height: 120px;
display: inline-block;
box-sizing: padding-box;
padding: 10px 20px 10px 20px;
margin-left: 7px;
margin-bottom: 20px;
text-align:left;
}


/* Show the checkmark when checked */

.containercheck input:checked ~ .checkmark:after {

  display: block;

}



/* Style the checkmark/indicator */

.containercheck .checkmark:after {

  left: 0.5rem;

  top: 0.1rem;

  width: 0.5rem;

  height: 1rem;

  border: solid white;

  border-width: 0 0.3rem 0.3rem 0;

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

}



@media screen and (max-width: 1400px) {

html { font-size: 9.9px }

.solutions .box { height: 40rem }

.slidemodale {height: 35vw}

.slidemodale .splide__slide img { height: 35vw; }

}



@media screen and (max-width: 1200px) {

header .menu li.none { display: none; }

}



@media screen and (max-width: 1024px) {

html { font-size: 9.5px }

header { top: 1rem }

header .menu { display: none; }

header .container { width: 100% }

.slideindex .container .txt img { width: 65% }

/*sidenav*/

.menuresponsive { display: block; position: absolute; right: 2.5rem; top: 2rem }

.menuresponsive img { width: 3.5rem; z-index: 4; }

#mySidenav { display: block; z-index: 1000; }

.accordion { width: 90% }

.sidenav {height: 100%;width: 0;position: fixed;z-index: 1;top: 0;right: 0; overflow-x: hidden; transition: 0.5s; }

.sidenav a {text-decoration: none;font-size: 1.2rem; color: #fff; display: block;transition: 0.3s;}

.sidenav a:hover {color: #f1f1f1;}

.sidenav .closebtn {position: absolute; top: 0; color: #fcfcf5; right: 3rem;font-size: 5rem;margin-left: 5rem;}

.sidenav .logonav { width: 20rem; padding-bottom: 2rem }

.sidenav .flexnav { display: flex; }

.sidenav .flexnav .bgblack { text-align: left; background-color: rgba(34,34,34,0.95); width: 100%; min-height: 100vh; height: 100%; padding: 5rem; }

.sidenav .flexnav .bgblack .divblock { color: #fcfcf5; display: block; padding: 2rem 0; font-weight: lighter; border-bottom: 2px solid rgba(252,252,252,0.2) }

.sidenav .flexnav .bgblack .divblock:first-child { border-top: 2px solid rgba(252,252,252,0.2) }

.sidenav .flexnav .bgblack .divblock:hover { border-bottom: 2px solid #ffa60d }

.sidenav .log { width: 26rem; margin-bottom: 4rem }

.socialmenu { display: flex; margin: 2rem 0 }

.sidenav ul a {margin: 1rem 0; font-size: 2.2rem;}



.book .container { flex-direction: column; justify-content: center; align-items: center; }

.book .container .txt { text-align: center; margin-bottom: 5rem }



.mappa { display: none; }

.mappamobile { display: block; width: 100%; }



.sectionwslider .txt { width: 100%; text-align: center; }

.sliderestaurant { width: 100%; margin-top: 4rem }

} 



@media screen and (max-width: 768px) {

footer { text-align: center; padding-bottom: 2rem }

footer .cl { width: 100%; margin-bottom: 2rem }

footer .container { display: block; }

footer .cl.loghi img { width: 50%; margin: 0 2%; max-width: 20rem }

#slidehome .splide__pagination { display: none; }

.slideindex .container .txt img { width: 80% }

.solutions { text-align: center; }

.solutions .t3 { margin-bottom: 2rem }

.solutions .flex { justify-content: center; }

.solutions .box { width: 100%; max-width: 30rem; margin: 1rem }

.t1 { font-size: 6vw }

#thehotel .txt { width: 100%; text-align: center; }

#thehotel .img { width:100% ; max-width: 50rem; margin: 5rem auto 0 }

#rooms .box { width: 100%; max-width: 100%; margin: 3% 0!important }

.slidemodale { width: 100%; height: 65vw }

.slidemodale .splide__slide img { height: 65vw; }

.modale .m1 .txt { width: 100%; text-align: center; margin: 4rem 0 2rem }

}



@media screen and (max-width: 600px) {

html { font-size: 9px }

header .container { width: 96% }

#slidehome .my-next svg, #slidehome .my-prev svg, .sliderestaurant .my-next svg, .sliderestaurant .my-prev svg, .slidemodale .my-next svg, .slidemodale .my-prev svg { left: 18px; top: 13px }

#loader lottie-player { width: 30rem; height: auto }



.modale .row .title { width: 100%; margin-bottom: 2rem }

.modale .row .list { width: 100% }



.t3 { font-size: 4rem; }



.tab-group li a { line-height: 1.4rem; line-height: 1.1 }
  
/* added by chuks eke for new home page link */

.home_link
{
background-color: #FCFAF8;
width: 100%;
height: 120px;
display: inline-block;
box-sizing: padding-box;
padding: 10px 20px 10px 20px;
margin-left: 7px;
margin-bottom: 20px;
text-align:left;
}

.home_link:hover
{
background-color: #F7F3ED;
width: 100%;
height: 120px;
display: inline-block;
box-sizing: padding-box;
padding: 10px 20px 10px 20px;
margin-left: 7px;
margin-bottom: 20px;
text-align:left;
}
}