html {
    box-sizing: border-box;
    --bgColorMenu : #6F7741;
    --duration: .7s;
    --menuHeight: 5rem;
    --slideShowMaxHeight: 12rem;
    --slideShowMinHeight: 12rem;
    --slideShowHeight: 12rem;
}
body{
    font-family: 'Quicksand'!important;
    margin-bottom: var(--menuHeight);
    overflow-x: hidden!important;
    color: #323E42;
}

/*classi custom*/
.text-green {
    color: #6F7741;
}
.fw-medium{
    font-weight: 500;
}

.h-25p{
    height: 100px;
    width: 100px;
}

/**/
/*MENU*/

.menu{
    margin: 0;
    display: flex;
    /* Works well with 100% width  */
    /*width: 32.05em;*/
    font-size: 1.5em;
    padding: 0 1em;
    align-items: center;
    justify-content: center;
    background-color: var(--bgColorMenu);
    min-height: 6rem;
}

.menu .menu__item{
    all: unset;
    flex-grow: 1;
    z-index: 100;
    display: flex;
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    align-items: center;
    will-change: transform;
    justify-content: center;
    padding: 0.55em 0 0.85em;
    transition: transform var(--timeOut , var(--duration));
}

.menu .menu__item::before{
    content: "";
    z-index: -1;
    width: 3.2em;
    height: 3.2em;
    border-radius: 50%;
    position: absolute;
    transform: scale(0);
    transition: background-color var(--duration), transform var(--duration);
}

.menu .menu__item.active {
    transform: translate3d(0, -1.5em , 0);
}

.menu .menu__item.active::before{
    transform: scale(1);
    background-color: white;
}

.menu .icon{
    width: 2em;
    height: 2em;
}

.menu .menu__item.active .icon {
    animation: strok 1.5s reverse;
}

.menu .menu__item .icon-green ,
.menu .menu__item.active .icon-white {
    opacity: 0;
}
.menu .menu__item .icon-white ,
.menu .menu__item.active .icon-green {
    opacity: 1;
}

.menu .menu__item.active p {
    opacity: 1;
    position: absolute;
    bottom: -40px;
    color: white;
    font-weight: bold;
    transition: opacity .7s .7s;
}

.menu .menu__item p {
    opacity: 0;
}

.menu .menu__item {
    position: relative;
    width: 60px;
    height: 60px;
}

.menu .menu__item svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes strok {
    100% {
        stroke-dashoffset: 400;
    }
}

.menu .menu__border{
    left: 0;
    bottom: 99%;
    width: 10.9em;
    height: 2.4em;
    position: absolute;
    clip-path: url(#menu);
    will-change: transform;
    background-color: var(--bgColorMenu);
    transition: transform var(--timeOut , var(--duration));
}

.svg-container {
    width: 0;
    height: 0;
}
.menu .icon-green,
.menu .icon-white{
    width: 2.5rem;
    height: 2.5rem;
}

@media screen and (max-width: 50em) {
    .menu{
        font-size: .8em;
        min-height: 5rem;
        max-height: 5rem;
    }
    .menu .icon-green,
    .menu .icon-white{
        width: 1.5rem;
        height: 1.5rem;
    }
    .menu .menu__item.active p {
        bottom: -30px;
        width: 80px;
        text-align: center;
    }}
/*FINE MENU*/

/* Tendina */

.tendina {
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    max-height: 100vh;
    min-height: 60px;
}

.tendina button.show-tendina span.bar {
    width: 200px;
    height: 5px;
    background: #cfcfcf;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50px;
}

button.show-tendina {
    width: 100%!important;
    min-height: 360px;
    background: #6F7741!important;
    border: none;
    box-shadow: 0 0px 8px rgb(0 0 0 / 30%);
    position: absolute;
    bottom:0px!Important;
    cursor: pointer;
    padding: 80px;
}
/*FINE TENDINA*/

/*SLIDESHOW*/
.slideshow.slide-h{
    max-height: var(--slideShowMaxHeight);
    min-height: var(--slideShowMinHeight);
    overflow: hidden;
}

.slideshow.slide-h img {
    height: var(--slideShowHeight);
    object-fit: cover;
}

.slideshow.slide-h .carousel-item:before {
    content: "";
    background: black;
    position: absolute;
    left:0px;
    top:0px;
    width: 100%;
    height: 100%;
    opacity: 0.1;
}


.slideshow.slide-h .carousel-indicators button {
    font-size: 0px;
    display: inline-block;
    background: white;
    border-radius: 60px;
    height: 10px;
    width: 10px;
    border: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    margin: 0px 5px;
}

.slideshow.slide-h .carousel-indicators button.active {
    opacity: 1;
}

.slideshow.slide-h .carousel-indicators button.active::before {
    border: solid 1px white;
    border-radius: 50px;
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 16px;
    height: 16px;
}

/*SEZIONE BOX*/


.box-homepage {
    overflow: auto;
}

.box-homepage .box-1 img{
    max-height: 400px;
    min-height: 400px;
    object-fit: cover;
}

.box-homepage .box-2 img{
    max-height: 300px;
    min-height: 300px;
    object-fit: cover;
}

.box-homepage .box-3 img{
    max-height: 300px;
    min-height: 300px;
    object-fit: cover;
}

.bottom-0-inherit-top{
    top: inherit!important;
    bottom: 0px!Important
}

.rounded-12{
    border-radius: 12px!Important;
    overflow: hidden;
}

.imgCover {
    background: black;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.1;
}


/*FINE SEZIONE BOX*/

.ff-mont {
    font-family: 'Montserrat'!important;
}

.ff-quick {
    font-family: 'Quicksand'!important;
}


/*SCOPRI*/
.bg-blue {
    background-color: #323E42!important;
}

#scopriPage{
    width: 100%;
    height: calc(100vh - var(--menuHeight));
}

.slideshow-scopri .slick-list{
    padding-top: 40px!important;
    padding-bottom: 40px!important;
}
.slideshow-scopri .slick-slide.slick-current{
    margin-top: -30px;
    transition: margin-top .20s .33s linear;
}

.slideshow-scopri .slick-slide{
    margin-top: 0px;
    transition: margin-top .20s .33s linear;
}

.slideshow-scopri .slick-dots li.slick-active button::before {
    background-color: white !important;
    width: 24px;
    height: 8px;
    font-size: 0px;
    border-radius: 50px;
    transition: all .66s linear;

}

.slideshow-scopri .slick-dots li button::before {
    background-color: white !important;
    width: 8px;
    height: 8px;
    font-size: 0px;
    border-radius: 50px;
    transition: all .33s linear;

}

.slideshow-scopri .slick-dots li.slick-active{
    background-color: white !important;
    width: 24px;
    height: 8px;
    font-size: 0px;
    border-radius: 50px;
    transition: all .33s linear;
}

.slideshow-scopri .slick-dots li.slick-active button{
    width: 24px;
    height: 8px;
    font-size: 0px;
    border-radius: 50px;
    transition: all .33s linear;
}

.slideshow-scopri .slick-dots li button{
    width: 8px;
    height: 8px;
    font-size: 0px;
    border-radius: 50px;
    transition: all .33s linear;
}

.slideshow-scopri .slick-dots li{
    width: 8px;
    height: 8px;
    font-size: 0px;
    border-radius: 50px;
    transition: all .66s linear;
}

.slick-dots li button:before{
    font-size: 0px;
}

.h-0 {
    height: 0px!important;
}


.nascosto {
    opacity: 0;
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
    overflow: hidden !important;
    /*! display: none; */
    height: 0px!important;
    transition: opacity .33s;
}


.visibile {
    opacity: 1;
    position: relative;
    /*z-index: 1;*/
    transition: opacity .20s .33s;

}

.box-esperienze img {
    max-height: 300px;
    min-height: 300px;
    object-fit: cover;
}


.slideshow-item img {
    /*max-height: 500px;*/
    /*min-height: 500px;*/
    object-fit: cover;
    height: 100%;
    border-radius: 10px;
}

.slideshow-scopri,
#scopriPage > .container-fluid {
    height: calc(100% - var(--menuHeight));
}

.slideshow-scopri .slick-list{
    height: 100%!important;
}
.slideshow-scopri .slick-track{
    height: 80%!important;
}

.slideshow-scopri .slick-dots {
    position: absolute;
    top: 70%;
}





.slideshow-scopri .slick-slide .testo-slideshow{
    opacity: 0;
    transition: opacity .20s ease;
}
.slideshow-scopri .slick-current .testo-slideshow{
    opacity: 1!Important;
    transition: opacity .20s .20s ease;
}
.testo-slideshow {
    text-align: center;
    color: white;
    margin-top: 40px;
}
.testo-slideshow h1 {
    font-weight: bold;
}


.icon-work-in-progress svg {
    width: 100%;
}

.icon-work-in-progress svg {
    width: 100%;
}

.obj-cover{
    object-fit: cover;
}
.img-shadow:before{
    content: "";
    position: absolute;
    z-index: 9;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #000000;
    background: linear-gradient(90deg,rgba(0,0,0,0.4) 0%, rgba(255,255,255,0) 80%);
    background: -webkit-linear-gradient(90deg,rgba(0,0,0,0.4) 0%, rgba(255,255,255,0) 80%);
    background: -moz-linear-gradient(90deg,rgba(0,0,0,0.4) 0%, rgba(255,255,255,0) 80%);
}

.z-index-10 {
    z-index: 10;
}
.header-content  {
    border-bottom-right-radius: 10px;
    overflow: hidden;
    border-bottom-left-radius: 10px;
}

.content-section .img-shadow::before {
    border-bottom-right-radius: 10px;
    overflow: hidden;
    border-bottom-left-radius: 10px;
}
.content-section h1.title {
    color: #323E42;
}

.content-section p {
    color: #323E42;
    line-height: 35px;
    font-size: 18px;
    font-weight: 400;
}


.content-section .col-6 img {
    border-radius: 10px;
    object-fit: cover;
}



.content-sottosito .img-shadow::before,
.content-sito .img-shadow::before {
    border-bottom-right-radius: 10px;
    overflow: hidden;
    border-bottom-left-radius: 10px;
}
.content-sottosito h1.title,
.content-sito h1.title {
    color: #323E42;
}

.content-sottosito p,
.content-sito p {
    color: #323E42;
    line-height: 35px;
    font-size: 18px;
    font-weight: 400;
}

.content-sottosito .col-6 img ,
.content-sito .col-6 img,
.content-sottosito .iframe-content img ,
.content-sito .iframe-content img {
    border-radius: 10px;
    object-fit: cover;

}

.back-button-scopri,
.back-button-login,
.back-button-profilo,
.back-button-sito,
.back-button,
.back-button-macrositi {
    position: relative;
    z-index: 999;
}

.galleria-di-contenuti .slick-list {
    padding-left: 45px!important;

}

.galleria-di-contenuti .slick-list .slick-slide {
    margin-right: 15px!important;
}


.row.d-flex.galleria-di-contenuti {
    margin-left: -40px;
    padding-top: 50px;
}
/*FINE SEZIONE SCOPRI*/


/*PROFILO UTENTE*/

.bg-progress {
    background: rgb(172,185,97);
    background: linear-gradient(-90deg, rgba(172,185,97,1) 60%, rgba(111,119,65,1) 100%);
}

.border-bl-30{
    border-bottom-left-radius: 30px;
}
.border-br-30{
    border-bottom-right-radius: 30px;
}

/*FINE PROFILO UTENTE*/

/*CODICE TEMPORANEO*/
.box-homepage.ff-mont > div > .row:first-child {
    order: 1;
    /*! display: flex; */
}
.box-homepage.ff-mont > div > .row:last-child {
    order: 0;
}
.box-homepage.ff-mont > div {
    display: flex;
    flex-flow: wrap;
}


#cboxOverlay {
    z-index: 9999;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: black;
}
#colorbox,
#cboxContent{
    z-index: 99999;

}

#colorbox,
#colorbox *{
    border: none!important;
    outline: none!Important;
}


#cboxCurrent {
}
#cboxCurrent {
    display: none!important;
}
#cboxPrevious {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -30px;
    width: 40px;
    height: 40px;
    font-size: 0px;
    transform: rotate(0deg);
    background: transparent;
    border: none;
}

#cboxNext {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -30px;
    width: 40px;
    height: 40px;
    font-size: 0px;
    transform: rotate(180deg);
    background: transparent;
    border: none;
}


#cboxPrevious:before {
    content: url('/img/back.svg');
}

#cboxNext:before {
    content: url('/img/back.svg');
}


#cboxClose {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 0px;
    background: transparent;
    border: none;
}

#cboxClose:before {
    content: '';
    width: 30px;
    height: 2px;
    background: white;
    position: absolute;
    top: 20px;
    left: 8px;
    transform: rotate(45deg);
    border-radius: 50px;
}

#cboxClose:after {
    content: '';
    width: 30px;
    height: 2px;
    background: white;
    position: absolute;
    top: 20px;
    left: 8px;
    transform: rotate(-45deg);
    border-radius: 50px;
}
.content-sottosito .header-content .img-shadow img,
.content-sito .header-content .img-shadow img,
.content-sottosito .header-content > img,
.content-sito .header-content > img {
    object-fit: cover;
    background: black;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    width: 100% !important;
    opacity: 1 !important;
}

.quiz-container{
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    padding: 30px;
    border-radius: 12px;
    position: relative;
}

.quiz-container .field--name-field-risposta .container-inline {
    padding: 10px;
    border: solid 2px;
    border-color: #6F7741;
    border-radius: 12px;
    margin-bottom: 20px;
    background: white;
    transition: all .03s;
}

.quiz-container .field--name-field-risposta .container-inline:hover {
    color: white;
    background: #6F7741;
}

.quiz-container .field--name-field-risposta .container-inline .double-field-second {
    display: none;
}
.quiz-container input.btn-check:checked + label {
    background: #6F7741 !important;
    color: #ffffff !important;
}
.quiz-container input.btn-check:hover + label {
    background: #6F7741 !important;
    color: #ffffff !important;
}
.quiz-container input.btn-check + label {
    border-color: #6F7741;
    border-radius: 12px!important;
    padding: 10px 20px;
    font-weight: 500;
}

.quiz-title {
    position: absolute;
    top: -50px;
    right: 0px;
}


.button-quiz-submit {
    border-color: #6F7741;
    border-radius: 12px !important;
    padding: 10px 20px;
    font-weight: 500;
    width: 100%;
    background: #6F7741;
    color: white;
    border: none;
}


.quiz-container input.btn-check:checked + label.sbagliato {
    background: #b51a1a !important;
    border-color: #b51a1a !important;
    animation: 1s linear swing;
}

@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.rounded-18{
    border-radius: 18px;
}

.border-green{
    border: solid 2px;
    border-color: #6F7741;
}

.hw-50{
    height: 50px;
    width: 50px;
}


.shadow-3-6 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.bg-green{
    background: rgba(111, 119, 65, 0.5);
}

.modal .text{
    top: 30px;
    width: 75%;
    border-radius: 10px;
}

.modal .text p{
    max-height: 150px;
    overflow: auto;
}




.accordion-button {
    background: #6f7741 !important;
    color: white!important;
    border-radius: 10px !important;
}
.accordion-item {
    margin-bottom: 20px;
    border-radius:10px !important;
}

.accordion h2 button, .accordion .accordion-body {
    font-size: 18px!important;
    color: #323E42;
    line-height: 35px;
    font-size: 18px;
    font-weight: 400;
}


.accordion-button .plus {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
    position: relative;
}





.accordion-button .plus .bar {
    height: 2px;
    width: 100%;
    background: #ffffff;
    position: absolute;
    /* top: 50%; */
    /* left: 50%; */
    transform: translate(-50%, -50%);
    transition: all .66s;
    outline: none!important;
    box-shadow: none!important;
    border: none!important;
    width: 10px!important;
}

.accordion-button .plus .bar:first-child {
    transform: rotate(-45deg);
    transition: all .66s;
    left: 2px;
    top: 10px;
}

.accordion-button .plus .bar:last-child {
    transform: rotate(45deg);
    transition: all .66s;
    right: 2px;
    top: 10px;
}

.accordion-button.collapsed .plus .bar:first-child {
    transform: rotate(45deg);
    transition: all .66s;
}

.accordion-button.collapsed .plus .bar:last-child {
    transform: rotate(-45deg);
    transition: all .66s;
}

.accordion-button:after{
    display: none !important;
}

.accordion-button:focus {
    z-index: 3;
    border-color: #6f7741;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(111, 119, 65, 0.3);
}

#ghiacciaiodelrutor-vrGallerySito {
    display: none!important;
}

div#homePage {
    height: 100%;
    /*overflow-y: auto;*/
}

body.it .it,
body.en .en,
body.fr .fr{
    display: block;
}

body.it .en,
body.it .fr,
body.en .it,
body.en .fr,
body.fr .it,
body.fr .en{
    display: none!important;
}


/*#questPage {*/
/*    height: calc(100vh - var(--menuHeight))!important;*/
/*}*/
/*#profiloPage {*/
/*    height: calc(100vh - var(--menuHeight))!important;*/
/*}*/
/*#scopertePage {*/
/*    height: calc(100vh - var(--menuHeight))!important;*/
/*}*/
/*#lente-arPage {*/
/*    height: calc(100vh - var(--menuHeight))!important;*/
/*}*/


.like-button-scopri {
    position: absolute;
    z-index: 9999;
    top: 5px;
    right: 5px;
     background: transparent;
    border: none;
}

.like-button-scopri {
    width: 50px;
    height: 50px;
    background: url("/img/heart-animation.png") no-repeat;
    background-position: 0 0;
    cursor: pointer;
    transition: background-position 1s steps(28);
    transition-duration: 0s;
}

.like-button-scopri.is-active {
     transition-duration: 1s;
    background-position: -1400px 0;
}

.visibile {
    overflow-y: auto;
}

.galleria-di-contenuti .slick-prev, .galleria-di-contenuti .slick-next {
    display: none!important;
}

.galleria-di-contenuti {
    overflow-y: hidden;
    width: 100%;
    /*! margin-left: 0px; */
}

.nascosto{
    width: 100% !important;
}
.overlay-coordinate {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    z-index: 9;
}


.popup {
    position: fixed;
    top: 20px;
    width: 80%;
    margin: 0 auto;
    z-index: 9;
    background: white;
    border-radius: 20px;
    animation: popup 5s linear;
}

@keyframes popup {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.non-attivo{
    pointer-events: none;
}


.login-sloggato.p-5 {
    background: #6f7741;
  }
  .login-sloggato.p-5 h4 {
    color: white;
  }
  .login-sloggato.p-5 button {
    background: white;
    color: #6f7741;
  }

  input.error {
    border: solid 1px #ff0017;
  }




  #reloadQuest .spinner-border{
    display: none!important;
}

#reloadQuest.spinner-active .spinner-border{
    display: inline-block!important;
}


#gransanbernardoGallery, #castellosarrioddelatourGallery, #viadellegallieGallery, #piccolosanbernardoGallery {
    display: none !important;
  }



  #questPage .obbiettivi {
      display: none!important;
  }
  #questPage .obbiettivi:nth-child(2),
  #questPage .obbiettivi:nth-child(3),
  #questPage .obbiettivi:nth-child(4),
  #questPage .obbiettivi:nth-child(5),
  #questPage .obbiettivi:nth-child(6),
  #questPage .obbiettivi:nth-child(7) {
    display: block!important;
  }

  .reset-password-register-page{
      cursor: pointer;
  }


#ghiacciaiodelrutor-vrPage .quiz-container {
    display: none;
  }



@media(min-width: 992px){
    .box-homepage.ff-mont .container-fluid > div {
      width: 100%;
    }
    }



#btn360 {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 0px;
    background: #6F7741;
    border: none;
}

#btn360:before {
    content: '';
    width: 30px;
    height: 2px;
    background: white;
    position: absolute;
    top: 20px;
    right: 8px;
    transform: rotate(45deg);
    border-radius: 50px;
}

#btn360:after {
    content: '';
    width: 30px;
    height: 2px;
    background: white;
    position: absolute;
    top: 20px;
    right: 8px;
    transform: rotate(-45deg);
    border-radius: 50px;
}

.icon-360{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.icon-360 svg{
    width: 72px;
    height: 72px;
}

.iframe-content{
    position: relative;
}