/* VARIABILI */
:root {
    --color1: #02ABD6; /* accessibile: #04A1C8 /  - originale #02ABD6*/
    --color2: #005BA9;
    --color3: #70C05D;
    --color4: #5C5C5C;
    --color5: #363636;
    --color6: #0D497E;
    --white: #ffffff;
    --white30: rgba(255,255,255,.3);
    --black: #000000;
    --black30: rgba(0,0,0,.3);
    --black80:rgba(0,0,0,.8);
    --border-color: #E3DFDF;

    --light-green: #EEFAEB;
   
    --light-grey: #F2F2F2;
    --light-grey-alt: #F9F9F9;
    --light-grey-add: #EEEEEE;
    --grey: #888888;
    --medium-grey: #D9D9D9;
    --dark-selected: #D9CEB1;


    --sans: 'futura-pt', sans-serif;
    --sans-bold: 'futura-pt-bold', sans-serif;
    --font-icon: 'Font Awesome 6 Pro';
    --font-icon-alt: 'Font Awesome 6 Brands';

    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-solid: 900;
    
    --size-sm: 16px;
    --size-base: 18px;
    --size-md: 20px;
    --size-lg: 25px;
    --size-h-sm: 30px;
    --size-h-md: 40px;
    --size-h-lg: 60px;
    --size-h-xl: 90px;
    --size-hero: 100px;


    --max-width: 1600px;
    --max-width2: 1440px;
    --max-width4: 1180px;
    --max-width3: 800px;
    --sidebar: 390px;

    --l-spacing: 2.5px;
    --elem-max-height: 690px;

    --shadow10: 0 0 10px rgba(0, 0, 0, 0.1);
    --shadow20: 0 0 20px rgba(0, 0, 0, 0.2); 

    --radius-xs: 2px;
    --radius-s: 5px;
    --radius-m: 10px;
    --radius: 15px;
    --radius-l: 20px;
    --radius-xl: 25px;
    --radius-total: 50px;
}

@font-face { font-family: "Font Awesome 6 Brands"; src:url("../fonts/FontAwesome6Brands-Regular.woff") format("woff"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Font Awesome 6 Pro'; src:url('../fonts/FontAwesome6Pro-Thin.woff') format('woff'); font-style: normal; font-weight: 100; font-display: swap;}
@font-face { font-family: 'Font Awesome 6 Pro'; src:url('../fonts/FontAwesome6Pro-Light.woff') format('woff'); font-style: normal; font-weight: 300; font-display: swap;}
@font-face { font-family: 'Font Awesome 6 Pro'; src:url('../fonts/FontAwesome6Pro-Regular.woff') format('woff'); font-style: normal; font-weight: 400; font-display: swap;}
@font-face { font-family: 'Font Awesome 6 Pro'; src:url('../fonts/FontAwesome6Pro-Solid.woff') format('woff'); font-style: normal; font-weight: 900; font-display: swap;}

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 
body { margin: 0; line-height: 1; font-family: var(--sans); color: var(--color5); font-size: var(--size-md); font-weight: var(--font-weight-light); line-height: 1.2; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
a { background: transparent; -webkit-transition: all .6s; -moz-transition: all .6s; -o-transition: all .6s; transition: all .6s; text-decoration: none!important; display: inline-block; }
a:active, a:hover, a:focus { text-decoration: none; }
a:focus { outline: 1px solid var(--color2); outline-offset: 1px; }
b, strong { font-weight: var(--font-weight-medium); }
svg:not(:root) { overflow: hidden; }
button, input, optgroup, select, textarea { margin: 0; color: inherit; font: inherit; }
input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; border:none; display: block; }
label { display: block; }
img { border: 0; vertical-align: middle; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-normal); line-height: 1.2; }
.clear { clear: both; }
.overflow { overflow: hidden; }
.nav { margin: 0; padding: 0; list-style: none; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; }
.nav-pills { display: block; }
.nav-pills > li { float: left; text-transform: none; font-weight: normal; }
.navbar { position: relative; }
.navbar-nav > li > a { line-height: 1; }
ul.cnt { margin:0; padding:0; display:flex; list-style: none; -ms-box-orient: horizontal; -webkit-align-items: stretch; }
.cnt { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; list-style: none; -ms-box-orient: horizontal; -webkit-align-items: flex-start; align-items: flex-start; justify-content: center; }
.oh { overflow: hidden; }

/* GENERICHE */
.flex { display: flex; }
.jcc { justify-content: center; }
.tac { text-align: center; }
.aic { align-items: center; }
.aifs { align-items: flex-start; }
.sticky { position: sticky; top: 0; }
p { margin-bottom: 15px; }
.max-width { margin: 60px auto; width: 100%; max-width: var(--max-width); }
.page-padding { padding: 0 40px;}

/* BODY */
body.compact-header { padding-top: 100px; }

/* HEADER */
header { padding: 20px; position: fixed; top: 0; left: 0; width: 100%; background-color: transparent; z-index: 999; color: var(--white); transition: .4s all; }
header:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(100%, transparent), to(transparent)) !important; background: linear-gradient(180deg, #000, transparent 100%, transparent 0) !important; }
header.scrolled:before, .menu_is_open header:before { display: none; }
header.scrolled, .menu_is_open header { background-color: var(--light-grey-alt); color: var(--black);}
.header-wrap { margin: 0 auto; display: flex; align-items: center; justify-content: space-between; max-width: var(--max-width); position: relative; }
header .col { display: flex; align-items: center; gap: 8px; width: calc(100% / 3); }
header .col.first { gap: 20px; }
header .col.last { justify-content: flex-end; }
header .col.central { width: 240px; justify-content: center; }
.whatsapp_btn { margin-left: 60px; }
.whatsapp_btn a { font-size: 0; }
.whatsapp_btn a:before { font-family: var(--font-icon-alt); content: '\f232'; font-size: var(--size-h-sm); color: var(--white); text-shadow: 0 0 5px rgba(0,0,0,0.8);}
.scrolled .whatsapp_btn a:before, .menu_is_open .whatsapp_btn a:before { color: var(--color3); text-shadow: none; }
header #direct-booking-btn.fired  { background-color: var(--light-grey); border-color: var(--light-grey); color: var(--color2); }

/* GESTIONE LOGO */
.logo-compact { display: none; }
.scrolled .logo-compact, .menu_is_open .logo-compact { display: block; }
.scrolled .logo-hero, .menu_is_open .logo-hero { display: none; }

/* MENU */
#menu-btn { cursor: pointer; }
#menu-btn .bars { width: 30px; height: 23px; position: relative; }
#menu-btn .bar { position: absolute; top: 0; left: 0; width: 30px; height: 3px; background-color: var(--white); transition: .4s all; }
#menu-btn .bar.central { top: calc(50% - 1.5px); transform: translateX(-50%); left: 50%;}
#menu-btn .bar.last { top: calc(100% - 3px); }
#menu-btn.fired .bar.central { opacity: 0; width: 45px; }
#menu-btn.fired .bar.first {transform: rotate(45deg); top: calc(50% - 1.5px); }
#menu-btn.fired .bar.last {transform: rotate(-45deg); top: calc(50% - 1.5px); }
.scrolled #menu-btn .bar, .menu_is_open #menu-btn .bar { background-color: var(--color2); }
#menu-open { display: none; }



/* PULSANTI */
button { background-color: transparent; width: fit-content; }
.btn, .title-to-btn .title a { position: relative; border-radius: var(--radius-xs); text-transform: uppercase; font-family: var(--sans-bold); font-weight: var(--font-weight-bold); font-size: var(--size-sm); }
.btn :where(.varsimple, a),
.title-to-btn .title a { position: relative; padding: 15px 40px; }
.btn-outline { border: 1px solid; }
.border-white { border-color: var(--white); }
.border-color2 { border-color: var(--color2); }
.color-white, .color-white a { color: var(--white); }
.color2, .color2 a { color: var(--color2); }
.toggle-text { overflow: hidden; }
.toggle-text > * { top: 0; transition: .4s all; }
.toggle-text .varsimple:last-of-type { padding: 15px 40px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, 60px); opacity: 0; }
.toggle-text.fired .varsimple:first-of-type { top: -60px; opacity: 0; }
.toggle-text.fired .varsimple:last-of-type { transform: translate(-50%, -50%); opacity: 1; }
.toggle-text.fired { min-width: fit-content; }
.bg-color1 { background-color: var(--color1); }
.bg-color2 { background-color: var(--color2); }
.bg-color3 { background-color: var(--color3); }
.title-to-btn.bg-white .title a { background-color: var(--white); } 
.ztemplate .zsimplebutton a, .ztemplate .zlink a { padding: 15px 40px; position: relative; border-radius: var(--radius-xs); text-transform: uppercase; font-family: var(--sans-bold); font-weight: var(--font-weight-bold); font-size: var(--size-sm); background-color: var(--color2); color: var(--white); }

/* PULSANTI HEADER ALLO SCROLL */
header.scrolled .border-white, .menu_is_open .border-white { border-color: var(--color2); background-color: var(--color2); }
header.scrolled #quote-btn.border-white, .menu_is_open #quote-btn.border-white { border-color: var(--color3); background-color: var(--color3); }

/* TYPOGRAPHY */
.title :where(h1, h2) { font-size: 1em; }
.top-seo { color: var(--color1); font-size: var(--size-h-sm); text-transform: uppercase; font-weight: var(--font-weight-light); }
:is(.ztextarea, .ztext) :is(h1, h2, h3, h4, h5, h6) { margin-bottom: 15px; }
:is(.ztextarea, .ztext) p { margin-bottom: 15px; }
:is(.title, .title a, .title h1, .title h2) { color: var(--color1); text-transform: uppercase; font-weight: var(--font-weight-light); text-shadow: 0 1px 1px rgba(0,0,0,0.15); }
.ztemplate :where(.title, .title a), .title-xl { font-size: var(--size-h-xl); line-height: 1; }
.title-md { font-size: var(--size-h-md); }
.title-lg { font-size: var(--size-h-lg); }
:is(.text_dyn, .textarea, p) a { color: var(--color1); text-decoration: underline!important; }

/* Controlli Slider */
.tns-controls { margin-top: 30px; display: flex; gap: 10px; justify-content: center; }
.tns-controls button { background-color: var(--color3); width: 60px; height: 60px; border: none; font-size: 0;}
.tns-controls button[data-controls="prev"] { left: 0; right: initial; }
.tns-controls button[data-controls="next"] { left: initial; right: 0; }
.tns-controls button[data-controls="next"]:before,
.tns-controls button[data-controls="prev"]:before{ font-family: var(--font-icon); font-weight: var(--font-weight-normal); font-size: 28px; color:var(--white); }
.tns-controls button[data-controls="prev"]:before{ content: '\f060'; }
.tns-controls button[data-controls="next"]:before{ content: '\f061';}
.tns-controls button[disabled] { filter: brightness(70%); pointer-events: none; }

/* Tns Dots */
.tns-nav { margin: 40px auto; display: flex; align-items: center; justify-content: center; position: relative; bottom: 0;}
.tns-nav button { background-color: #D9D9D9; height: 1px; width: 90px; position: relative; }
.tns-nav button:before { content: ''; position: absolute; height: 16px; top: -8px; left: 0; width: 100%; }
.tns-nav button:after { content: ''; position: absolute; height: 3px; width: 0; top: -1px; left: 50%; transform: translateX(-50%); z-index: 2; transition: .8s all cubic-bezier(.215, .61, .355, 1); opacity: 0; }
/* .tns-nav button.tns-nav-active { height: 3px; background-color: var(--color1); } */
.tns-nav button.tns-nav-active:after { width: 100%; opacity: 1; }

/* DARK LAYER */
#dark-layer { position: fixed; z-index: 998; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--black80); opacity: 0; pointer-events: none; transition: .4s all; }
#dark-layer.fired { opacity: 1; pointer-events: all; }

/* SHOWCASE */
.showcase-content { padding-top: 90px; }
body.noslide .showcase-content { padding-top: 100px; }
.showcase-content #intro { margin: 0 auto; padding: 0 15px; display: flex; flex-direction: column; gap: 20px; max-width: var(--max-width); }
.showcase-content #intro .text_dyn { font-size: var(--size-lg); font-weight: var(--font-weight-normal); }

/* VETRINA CAMERE */
#intro-gallery { padding: 0 7vw; display: grid; margin: 120px auto; position: relative; }
#intro-gallery .gallery ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-areas: "big small1" "big small2"; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 20px; }
#intro-gallery .gallery ul li:nth-child(2) { margin-top: 90px; }
#intro-gallery .gallery ul li:nth-child(3) { grid-area: small2; border: 20px solid var(--white); position: relative; left: -15vw; top: -110px; max-width: 30vw; }
#intro-gallery .gallery img { width: 100%; height: auto; object-fit: cover; }
#intro-gallery .gallery ul li a { display: block; }
#intro-gallery .vareditor { padding: 45px 15px 15px 30px; position: absolute; top: 50%; left: 7vw; max-width: 25vw; }
@media (min-width: 2010px){
    #intro-gallery { padding: 0 13vw;}
    #intro-gallery .vareditor { padding: 30px 30px 15px 15px; left: 15vw; max-width: 20vw;}
}

/* PAGINA STANDARD */
.page section#intro { margin-bottom: 60px; }
.page section#intro .g2 { font-size: var(--size-lg); color: var(--color1); }
#page-gallery .gallery { margin-top: 60px; }
#page-gallery:not(.carousel) .gallery ul { display: flex; gap: 20px; flex-wrap: wrap; }
body:not(.smartphone) #page-gallery:not(.carousel) .gallery ul li { width: calc(100% / 3 - 20px); }
#page-gallery .gallery ul li a { display: block; }
.text_dyn :where(ul, ol) { padding-left: 30px; margin: 0 0 20px; }
.text_dyn :where(ul li, ol li) { margin-bottom: 10px; }
.text_dyn :where(h2, h3, h4, h5, h6) { color: var(--color1); }
#page-content img.left { margin: 0px 0px 20px 0px!important; width: 100%; float: none!important; }
.text_dyn .fieldvalue iframe { padding: 5px; border: 2px solid var(--color2)!important; border-radius: var(--radius-s); }


/* SUBMENU */
.has-submenu .wrap-content { display: flex; align-items: flex-start; gap: 40px; }
.has-submenu .wrap-content > .col { width: calc(100% - var(--sidebar)); }
.sidebar { top: 120px; width: 100%; max-width: var(--sidebar);  }
.submenu { border-radius: var(--radius-s); overflow: hidden; }
.submenu li { padding: 15px; border-bottom: 1px solid var(--white30); background-color: var(--color2); width: 100%;}
.sidebar li.active { background-color: var(--light-green); color: var(--color2) }
.sidebar li a { color: var(--white) }
.sidebar .varsimple { padding: 15px; font-size: var(--size-lg); text-transform: uppercase; color: var(--white); border-bottom: 10px solid var(--white); background-color: var(--white); color: var(--color1); }

/* RWD */
@media(max-width: 1290px){
    :root {
        --size-sm: 14px;
        --size-base: 18px;
        --size-md: 20px;
        --size-lg: 25px;
        --size-h-sm: 20px;
        --size-h-md: 30px;
        --size-h-lg: 40px;
        --size-h-xl: 60px;
        --size-hero: 90px;
    }

    .btn :where(.varsimple, a), .title-to-btn .title a, .ztemplate .zsimplebutton a, .ztemplate .zlink a { padding: 10px 15px; }

}

@media(max-width: 1190px){
    :root {
        --sidebar: 290px;
    }
    .showcase-content { padding-top: 30px; }
}

@media(max-width: 920px){
    header .col.last { padding: 15px; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9; height: 80px; background-color: var(--color1); justify-content: center; }
    header .col.last button { width: 50%; }
   #direct-booking-btn {border-color: var(--color2); background-color: var(--color2);} 
   #quote-btn { border-color: var(--color3); background-color: var(--color3); }
   .page-padding { padding: 0 15px; }
   .max-width { margin: 30px auto; }
   body.noslide .showcase-content { padding-top: 30px; }
   .showcase-content #intro { gap: 10px; }
}

@media (max-width: 768px){
    :root {
        --size-sm: 14px;
        --size-base: 18px;
        --size-md: 20px;
        --size-lg: 18px;
        --size-h-sm: 20px;
        --size-h-md: 30px;
        --size-h-lg: 30px;
        --size-h-xl: 40px;
        --size-hero: 90px;
        --sidebar: 100%;
    }
    body.compact-header { padding-top: 88px; }
    header .col { width: auto; }
    header .col.first { order: 9; gap: 10px; }
    .whatsapp_btn { margin-left: 0; }
    header .col.central { width: auto; }
    #menu-btn { order: 3; }
    .logo-compact { width: 190px; }
    .has-submenu .wrap-content { flex-wrap: wrap; }
    .has-submenu .wrap-content > .col { width: 100%; }
    .sidebar .varsimple { font-size: var(--size-h-lg); }
    .page section#intro { margin-bottom: 30px; }
    
}

/* SMARTPHONE */
.smartphone #page-gallery:not(.carousel) .gallery ul { display: block; }
.smartphone #page-gallery:not(.carousel) .gallery ul li img { min-width: unset; height: auto; }
.smartphone #page-gallery .gallery ul li a { display: inline-block; }