﻿:root{
    --ff-default:'Open Sans','Helvetica',serif;
    --ff-heading:'Playfair Display','Helvetica',serif;
    --ff-subheading:Lora,'Helvetica',serif;
    --icon-button-gap:6.4rem;
    --primary-color:#0470ae;
    --accent-color:#62C4EF;
    --beige-color:#F6F5EF;
    --desktop-menu-item-gap:.8rem;
    --text-color-primary:#2C3E50;
    --text-color-secondary:#7F8C8D;
}

* {box-sizing: border-box;}

html {font-size: 62.5% !important}
body {font-size: 1.6rem;margin: 0;padding:0}
button,a{font-family: var(--ff-default);}
a{text-decoration: none;}

/* TYPHOGRAPHY */
h1,h1 div,.title{font-family: var(--ff-heading);}
.subtitle{font-family: var(--ff-subheading);}
p,li{font-family: var(--ff-default);font-size:1.8rem;line-height:1.5;}
.gen-cms-content p{font-family: var(--ff-default)!important;font-size:1.8rem!important;line-height:1.5!important;}

/* LAYOUT */
.max-width {padding: 0 1.6rem}

@media(min-width:992px) {
    .max-width {padding: 0 3.2rem}
}

@media(min-width:1280px) {
    .max-width {padding: 0 6.4rem}
}

@media(min-width:1920px) {
    .max-width-s {padding: 0 17.6rem}
}
/* HELPERS */
.layer {position: fixed;top: 0;left: 0;width: 100%;height: 100%;}
.section{padding:4.4rem 0}
.visually-hidden,.sr-only{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;white-space: nowrap;}
.text-center-align{text-align:center}
.margin-0{margin:0}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.text-color{color:var(--text-color-primary)}

/* LOADER */
.container-loader{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;width:100%;height:100%;display: flex;place-content:center;align-items: center;}
.container-loader.hidden{display:none}

.loader {border: .4rem solid #faf7f1;border-top: .4rem solid orange;border-radius: 50%;width: 3.2rem;height: 3.2rem;animation: spin 2s linear infinite;display:block}
.spinner {border: .8rem solid #faf7f1;border-top: .8rem solid #41aeef;border-radius: 50%;width: 6rem;height: 6rem;animation: spin 2s linear infinite;margin: 1.6rem auto;display:block;}
.loader--primary-color{border-top-color:var(--primary-color)}
.container-loader-primary-color{background:var(--primary-color)}
.loader--secondary-color{background:var(--secondary-color);border-top-color: var(--primary-color);}
.container-loader-secondary-color{background:var(--secondary-color)}
.loader--small{width:1.6rem;height:1.6rem;border-width:.2rem}

@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

/* BUTTONS */
button{background:none;border:none;font-size:1.6rem;cursor:pointer}
.button {line-height:normal;text-align:center;background: #333;color: #fff;min-width: 200px;text-align: center;border: 1px solid #333;font-size: 1.5rem;text-transform: uppercase;letter-spacing: 1px;display: inline-block;padding:1.6rem 2.4rem;cursor: pointer;transition: color .5s  linear, border-color .4s linear, background-color .35s;user-select: none;position:relative}
.button{overflow: hidden;z-index: 1;}
.button:before{top:101%;bottom: 0;content: "";height: 200%;left: 0;position: absolute;transform: scale(1);transform-origin: bottom right;transition: transform .5s;transition-timing-function: ease-out;width: 200%;z-index: -1;}
.button--primary {background-color: transparent;color: var(--primary-color);border-color: var(--primary-color);}
.button--primary:before{background-color:var(--primary-color)}
.button--accent{background:var(--accent-color);border-color:var(--accent-color);color:var(--text-color)}
.button--accent:focus{outline: auto;outline-offset: 3px;}
.button--accent:before{background-color:#3796c0}
.button--red{background: #E94F37;border-color: #E94F37;}
.button--green{background: var(--primary-color);border-color: var(--primary-color);color:#fff}
.button--green:before{background:var(--primary-color-dark)}

.button:not(.active):hover:after, 
.button:not(.active):hover:before {transform: scale(2);transform-origin: bottom left;transition-timing-function: cubic-bezier(1, .43, .66, 1.21);}
.button:not(.active):hover:after{transition-delay: .25s;}
.button--primary:not(.active):hover,.button--primary:not(.active)[aria-expanded="true"]{color:#fff;border-color:var(--primary-color)}
.button--accent:hover{border-color:#3796c0;}
.button--green:hover{border-color:var(--primary-color-dark);}

.button-icon{display:flex;align-items:center;place-content:space-between;line-height:1.2;width:auto;min-width:auto;gap:3.2rem}
.button-icon span{flex:1;display:block;text-align:center}
.button-icon i{font-size:2.4rem}



/* SUBMIT WRAPPER */
.submit-wrapper{position:relative;display:inline-block;border-radius:3.2rem;overflow:hidden}


/* Icon Link */
.icon-link{display:flex;align-items:center;gap:.6rem;color:var(--text-color)}


/* HEADER */
.logo-container a{display:inline-block}
.logo-container img{display:block;width:auto;height:8rem;}
.site-header{position:fixed;width: 100%;left: 0;top: 0;z-index: 2;transition: transform .6s ease-in-out, background-color .2s ease-in-out;border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.site-header:not(.out-hero):before{content: "";width: 100%;height:100%;pointer-events: none;position: absolute;}
.site-header.not-visible{transform: translateY(calc(-100% - .8rem));}
.site-header .open-period-info{margin:0;padding:.8rem 0;color:#fff;font-size:1.6rem;font-family: var(--ff-heading);text-align: center;}

.site-header ul{list-style: none;padding:0;margin:0;}
.site-header nav{display:flex;align-items: center;place-content: space-between;padding:.4rem 1.6rem;position:relative;flex-direction:row-reverse;}

.site-header .colored-logo{display:none}
.site-header .white-logo{display:block;}

.site-header.out-hero .colored-logo{display:block}
.site-header.out-hero .white-logo{display:none;}







/*.site-header .logo-container{flex:1;text-align:center}*/
.site-header-cta{flex:1;text-align: right;display: none;}
.site-header-cta .button{padding:.8rem 1.6rem;min-width:auto;background:none;color:#fff;border-color:#fff}
.btn-menu-mobile{font-size: 3.2rem;color:#fff}
.btn-close-menu{color:var(--text-color)}

.site-header__top-info{background:#0265AE;}
.site-header__top-info-inner{display:flex;white-space: nowrap;width:max-content}

.open-period-info__separator{font-weight:bold;margin:0 .8rem}


.site-header.out-hero{background-color:var(--beige-color);border-color:#dad9d4}
.site-header.out-hero .btn-menu-mobile{color:#000}

.site-header-cta .button{color:#fff}

.site-header.out-hero .button--accent,
.site-header:hover .button--accent{background:var(--accent-color);color:var(--text-color)}


.site-header-cta .icon-link{color:#fff;}

.site-header.out-hero .site-header-cta .icon-link,
.site-header:hover .site-header-cta .icon-link{color:var(--text-color)}

@media(max-width:1279px){
    .site-header-cta .icon-link{display:none}
}


@media(min-width:500px){
    .site-header nav{place-content:center}
    .site-header-cta{display: inline-flex;position:absolute;left:1.6rem;gap:2.4rem; align-items:center}
    .btn-menu-mobile{position:absolute;right:1.6rem;}
}

@media(min-width:800px){
    .site-header__top-info-inner{width:100%;place-content:center}
    .site-header .open-period-info-clone{display:none}
    .open-period-info__separator{font-weight:normal;}
}

@media(min-width:1280px){
    .site-header .open-period-info{border-radius:1.6rem 1.6rem 0 0;}
    .site-header nav{padding: .4rem 2.4rem;}   
    .site-header__top-info{border-radius:1.6rem 1.6rem 0 0}
    .site-header:hover{background:var(--beige-color);border-color:#dad9d4}
    .site-header:hover .btn-menu-mobile{color:#000}
    .site-header:hover .colored-logo{display:block}
    .site-header:hover .white-logo{display:none;}
    .site-header:hover:not(.out-hero):before{background:none}
    .btn-menu-mobile{display:none;}
    .site-header-cta{left:2.4rem}
}



/* MENU DESKTOP */
.menu-desktop{display:none;gap:0;align-items: center;flex:1}
.menu-desktop .submenu{width:200%}
.menu-desktop > li{position:relative}
.menu-desktop > li.has-submenu.open .submenu{display:flex;flex-direction:column}
.menu-desktop > li > button{outline: none;background: none;user-select: none;border:none;gap:var(--desktop-menu-item-gap);cursor: pointer;}
.menu-desktop > li > button,
.menu-desktop > li > a{display:flex;align-items: center;padding:1.6rem 1.2rem;position:relative;z-index:2}
.menu-desktop > li > button,
.menu-desktop > li > a,
.menu-desktop .submenu a:not(.submenu-title__link){font-size:1.5rem;text-transform:uppercase;color:#fff;letter-spacing: .1rem;padding:.8rem;display:inline-block;font-weight:400;display:block;}


.menu-desktop .submenu a:not(.submenu-title__link){color:var(--text-color-primary)}

.site-header.out-hero .menu-desktop > li > button,
.site-header.out-hero .menu-desktop > li > a,
.site-header.out-hero .menu-desktop .submenu a:not(.submenu-title__link),
.site-header:hover .menu-desktop > li > button,
.site-header:hover .menu-desktop > li > a,
.site-header:hover .menu-desktop .submenu a:not(.submenu-title__link){color:#000}

.menu-desktop > li:hover > button,
.menu-desktop > li:hover > a,
.menu-desktop > li.open > button,
.menu-desktop > li.open > a,
.menu-desktop .submenu a:hover,
.menu-desktop > li > button.selected{text-decoration:underline;text-underline-position:under}
.menu-desktop .submenu{animation: translateSubMenuFromTop 0.4s;}
.menu-desktop .submenu{display: none;position: absolute;background: #fff;top: calc(100%);padding:3.2rem 2.4rem;z-index: 1;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);}

.menu-desktop button:focus,
.menu-desktop a:focus{outline:auto;}

.menu-desktop > li.has-submenu.open .submenu.submenu-grid{flex-direction:row;width: 768px;left: auto;right: 0;gap: 2.4rem;padding:3.2rem;}
.submenu-grid > li{flex:1}
.submenu-grid .submenu-title,.submenu-title__link{color:var(--primary-color);display:flex;gap:.8rem;align-items:center;font-size:1.8rem}
.submenu-grid .submenu-title a{color:var(--primary-color);font-family:var(--ff-default)}
.submenu-grid .submenu-title a:hover{color:#004b84}
.menu-desktop .submenu.submenu-grid a:not(.submenu-title__link){padding:.4rem .8rem .4rem 0;display:block;}
.menu-desktop .submenu-group > ul{margin-top:.8rem}

.menu-desktop .menu-item > a{line-height:normal}

#gallery-submenu,#lingue-submenu{right:0}


@media(min-width:1280px){
    .menu-desktop{display: flex;position:absolute;right:2.4rem}
    .menu-desktop > li.has-submenu.open .submenu.submenu-grid{width: 992px;left:0;right: auto;gap: 2.4rem;padding:3.2rem;transform: translateX(calc(-254px - 1.6rem));}
    #servizi-submenu{width:300%;}
}




/* HERO */
.hero{overflow: hidden;position:relative;}
.hero img,.hero video{width:100%;object-fit: cover;display: block;}

.hero__copy h1{color:#fff;font-size:4.8rem}


@keyframes translateSubMenuFromTop{
    0% {top: 10%;opacity: 0;}
    100% {top: calc(100%);opacity: 1;}
}

/* FOOTER */
#site-footer{background:var(--beige-color)}
.footer-content{display: flex;place-content: space-between;}
.footer-content > div{flex: 1;}
.footer-content__logo{flex: 1;border-right: 1px solid #dad9d4;}
.footer-content__nav{flex: 1;display: inline-flex;place-content: center;border-right: 1px solid #dad9d4;padding: 2.4rem 0;}
.footer-content__nav-title{margin-top: 0;color: #a2a2a1;}
.footer-content__info{flex: 1;display: inline-flex;flex-direction: column;align-items: end;padding: 2.4rem 0;}