/*GENERALS*/

html{
    
}

::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 0px;
}


:focus-visible{
  outline: none; 
}



body{
   background-image:url('/media/livello-background.jpg');
   background-size:cover;
}


a {
	text-decoration: none;

}

a:hover,
a:focus {
	outline: none;
}






.load-body{
   animation: removeBlur 0.5s ease-in-out;
   overflow-y:hidden;
}



@keyframes removeBlur {
 0% {
   filter: blur(15px);
 }
 50% {
   filter: blur(7px);
 }
 100% {
   filter: blur(0px);
 }
 
}


.bgd-nav {
    transition: 0.2s;
    position: fixed;
    right: 0;
    padding: 1rem 4rem;
    z-index: 100;
    top: 0;
    width: 100%;
}

.menu-scroll {
    background-color: #00baa8;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.navbar-cont {
    display: flex;
    width: 100%;
    transition: 0.1s;
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 16rem;
    transition: 0.3s;
    position: relative;
    color:#fff;
    margin: 0;
}

.logo:hover {

    color:#fff;
}

.logo > img {
    height: 100%;
}

.logo > svg {
    height: 100%;
}


.navigation-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3rem;
}

span.item-menu {
    cursor:pointer;
}

.item-menu {
    color: #ffffffc4;
    font-family: "Montserrat", sans-serif;
    font-weight:600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 0;
    position: relative;
    transition: 0.2s;
}

.item-menu span {
    position: relative;
    z-index: 3;
}

.item-menu:hover, .item-menu.active {
    color:#fff;
}

.button-menu{
    background-color:#002f25;
    padding: 0.75rem 1.5rem !important;!i;!;
    border-radius: 13px !important;!i;!;
    color: #ffffff;
    text-transform: capitalize;
    transition:0.5s all;
    font-size: 12px !important;!i;!;
    font-family: "Montserrat", sans-serif !important;!i;!;
    font-weight: 600 !important;!I;!;
}

/*.button-menu:hover {*/
/*    background-color: #f3eada;*/
/*    color: #002f25;*/
/*}*/





section{
   padding-top: 10rem;
}

.bg-1{
    background-image:url('/media/anatomy-1-background.png');
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
}

.bg-2{
    /*min-height: 200vh;*/
    background-image:url('/media/anatomy-2-background.png');
    background-size: contain;
    background-position: right -10rem;
    background-repeat: no-repeat;
    padding-bottom: 4rem;
}

.bg-color{
    background-color: #00baa8;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    margin-bottom: -4rem;
    padding-bottom: 10rem;
}



.h1-c {
    color: #fff;
    font-family: "Kalnia", serif;
    font-weight: 500;
    font-size: 6rem;
    line-height: 5.7rem;
    letter-spacing:-3px;
    margin: 0 0 2rem 0;
}

.h1-c span{
    font-family: "Montserrat", sans-serif;
    font-style:italic;
    font-weight:200;
    
}



.h2-c {
    color: #fff;
    font-family: "Kalnia", serif;
    font-weight: 500;
    font-size: 5.5rem;
    line-height: 5.5rem;
    margin: 0 0 2rem 0;
}

.h2-c span{
    font-family: "Montserrat", sans-serif;
    font-style:italic;
    font-weight:200;
    
}


.p-content{
    font-family: "Montserrat", sans-serif;
    font-weight:300;
    color:#fff;
    letter-spacing:1px;
    font-size:18px;
}

ul.p-content{
    list-style:none;
    margin: 3rem 0 0 0;
}

ul.p-content li{
    margin-bottom: 2rem;
    position: relative;
    padding-left: 4rem;
}

ul.p-content li:before {
    content: '';
    background-image: url(/media/white-arrow.svg);
    position: absolute;
    left: 0;
    top: -0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.p-content.v-2{
    font-weight:400;
    letter-spacing:0;
    line-height:55px;
}


.s-p{
   font-family: "Montserrat", sans-serif;
    font-weight:400;
    color:#fff;
    font-size:13px;
    letter-spacing:1px;
    margin:0;
    padding:0 1.5rem;
}

.p-content p{
    font-family: "Montserrat", sans-serif;
    font-weight:400;
    letter-spacing:2px;
    color:#fff;
    font-size:16px;  
}

.full-img{
    width:100%;
}

.mt-2{
    margin-top:2rem !important;
}

.mt-3{
    margin-top:3rem !important;
}

.mt-5{
    margin-top:5rem !important;
}


.vertical-button{
    gap: 1rem;
    display:flex;
    flex-direction: column;
}



.rotate svg{
    transition:0.2s;
}

.rotate:hover svg{
    transform:rotate(-90deg);
    
}


.c-button:hover{
    box-shadow: 0 0 20px 5px #00000021;
}



.f-30{
    font-size:30px;
}

.f-45{
    font-size:45px;
}

footer{
    background:#002f25;
    padding: 2rem 0;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

.logo-footer {
    width: 8rem;
    color:#fff;
    display:block;
}
.logo-footer > svg {
    height: 100%;
}

.title-footer{
    font-family: "Montserrat", sans-serif;
    font-weight:600;
    color:#fff;
    letter-spacing:2px;
    font-size: 12px;
    text-transform:uppercase;
}

.link-footer{
    font-family: "Montserrat", sans-serif;
    font-weight:300;
    color:#fff;
    letter-spacing:2px;
    font-size: 14px;
}

.link-footer:hover{
    color:#fff;
}

.copyright{
    font-family: "Montserrat", sans-serif;
    font-weight:200;
    color:#fff;
    letter-spacing: 2px;
    font-size:10px;
    margin:0;
    text-transform:uppercase;
}

.copyright a{
    color:#fff;
}

.copyright a:hover{
    color:#fff;
}

.tf-v1-widget iframe {
    border-radius: 50px !important;
}

.box-video {
    border-radius: 50px;
    overflow: auto;
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-video img{filter: brightness(0.7);}

.play-button{
   width: 13rem;
   height: 13rem;
   position: absolute;
   z-index: 9;
   cursor: pointer;
   transition:0.2s;
}

.play-button:hover{
   transform:scale(1.2);
}


.button {
	pointer-events: auto;
	cursor: pointer;
	background: #e7e7e7;
	border: none;
	padding: 1.5rem 3rem;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	position: relative;
	display: inline-block;
}

.button::before,
.button::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.button--pan {
	font-family: aktiv-grotesk-extended, sans-serif;
	font-weight: 700;
	border: 2px solid #002f25;
	border-radius: 3rem;
	overflow: hidden;
	color: #fff;
}

.button--pan span {
	position: relative;
	mix-blend-mode: difference;
}

.button--pan svg {
	mix-blend-mode: difference;
}

.button--pan::before {
	content: '';
	background: #002f25;
	transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.button--pan:hover::before {
	transform: translate3d(0,-100%,0);
}

.c-button{
    padding: 1rem 1.5rem;
    border-radius: 16px;
    text-transform: capitalize;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color:#fff;
    letter-spacing:1px;
    cursor: pointer;
    transition: 0.5s all;
    display: block;
}

.c-button svg{
    fill:currentColor;
    width: 3rem;
    height: 3rem;
}

.button-beetween{
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap:2rem;
}

.c-button span{
    font-weight: 300;
}

.button-fit{
    width: fit-content;
}


.primary-button{
    background-color:#f3eada;

}

.secondary-button {
    background-color: #002f25;
}

.button--pan.secondary-button::before {
	background: #f3eada;
}

.secondary-button:hover{
    color:#fff;
}

.third-button{
    background-color:#f3eada;
    color:#002f25;
}

.third-button:hover{
    color:#002f25;
}

.primary-button:hover{
    color:#fff;

}

.light-bold{
    font-weight: 600;
}















/*menu*/

.burger-menu {
     display:block;
     cursor: pointer;
     position: fixed;
     top: 1rem;
     z-index: 120;
     right: 1rem;
     overflow:hidden;
     transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1), fill 0.7s cubic-bezier(0.5, 0.5, 0, 1), stroke 0.7s cubic-bezier(0.5, 0.5, 0, 1), top 0.2s;
     transform: translate(0%, 0%) rotate(0.001deg);
}


.burger-menu.page.scroll{
    top:0.7rem;
}

.bg_menu{
    display: flex;
    flex-direction: column;
    height: 3rem;
    width: 3rem;
    background: #002f25;
    padding: 0.5rem;
    border-radius: 2em;
    gap: 0.4rem;
    justify-content: center;
    transition:0.5s;
    align-items: center;
}


.bg_menu.hide{
    transform:translateY(100%);
}

.logo.hide{
    transform:translateY(100%);
}


.bg_menu .cls-1 {
    fill: none;
    stroke: #e30011;
    stroke-miterlimit: 10;
    stroke-width: 10px;
}

.bg_menu .cls-2 {
    fill: #e30011;
    stroke-width: 0px;
}


.bg_menu.open .cls-1 {
    stroke: #e30613;
    
}

.bg_menu.open .cls-2 {
    fill: #e30613;
}



 .burger-menu .line {
     background: #00baa8;
     width: 2rem;
     height: 2px;
     transition: 0.3s;
}




 .burger-menu.open .bar-1{
     transform: rotate(45deg) translate(8px, 6px) scaleX(1);
}
 .burger-menu.open .bar-2{
     opacity: 0;
}
 .burger-menu.open .bar-3{
     transform: rotate(-45deg) translate(6px, -3px) scaleX(1);
}



.modal-nav-mobile {
    position: fixed;
    top: -1.25rem;
    z-index: 110;
    padding: 2rem;
    right: -1.25rem;
    height:100vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
    overflow: hidden;
    transition:0.2s;
}


.modal-nav-mobile.page.scroll{
    top: -1.3rem;
}

.modal-nav-mobile.open-menu {
    pointer-events: all;
    
}

.modal-block{
    border-radius: 1.5em;
    padding: 0.25em 0.75em;
    position: relative;
    border-radius: 1.5em;
}

.modal-block-background{
    background: #002f25;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 2em;
    position: absolute;
    transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1), background 0.2s ease-in-out, transform 0.7s cubic-bezier(0.5, 0.5, 0, 1) 0s;
    right: 0;
    top: 0;
}

.modal-nav-mobile .ul-mobile {
    position: relative;
    display: flex;
    flex-direction: column;
    transform: translateY(0) scale(0.1) rotate(0.001deg);
    transition: all  0.7s cubic-bezier(0.5, 0.5, 0, 1);
    transform-origin: top right;
    padding: 1.5em 1.7em 1.5em 1.4em;
    opacity: 0;
    margin: 0;
    gap: 1rem;
    list-style: none;
}



.open-menu .modal-block-background {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 10px 10px #bbbbbb1f;
}

.open-menu .ul-mobile {
    transform: translateY(0) scale(1) rotate(0.001deg);
    opacity: 1;
}

.modal-nav-mobile .ul-mobile .modal-small-title {
    color: #00c5b6;
    transform: translateY(0em);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.8em;
    opacity: 0.5;
    margin-bottom: 0.75em;
    margin-top: 0.2em;
}

.modal-nav-mobile .ul-mobile a {
    display: block;
}

.ul-mobile li a > span {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    color: #00af99;
    transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1), color 0.2s ease-in-out;
    position: relative;
    display: block;
    padding-right: 1em;
    line-height: 1.3rem;
}

.ul-mobile li a > span::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0.75rem;
    transform: translate(calc(50%), -10%) scale(0) rotate(0.001deg);
    width: 0.3em;
    height: 0.3em;
    background-color: #00c5b6;
    transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1), transform 0.7s cubic-bezier(0.5, 0.5, 0, 1), background-color 0.2s ease-in-out;
}




.ul-mobile li a.active > span {
    color: #ffffff;
}

.ul-mobile li a.active > span::before {
    background-color: #ffffff;
    transform: translate(50%, -10%) scale(1) rotate(0.001deg);
}



.ul-mobile:hover li a:hover > span::before {
    transform: translate(50%, -10%) scale(1) rotate(0.001deg);
}

.burger-menu.open{
        transform: translate(-0.9em, 0.9em) rotate(0.001deg);
}


.mobile{
    display:none;
}

.under-construction {
    position:relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-soon{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}

.under-construction.bg-2 {
    background-position: right 0rem;
}


/*accordion*/

.cms-accordion{
   margin-top: 0;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.cms-item-accordion{
   margin-bottom: 0;
}

.cms-header-accordion{
   cursor: pointer;
   gap: 2rem;
   transition: 0.2s;
   color: #002f25;
   font-family: "Montserrat", sans-serif;
   font-size: 2rem;
   letter-spacing: 1px;
   font-weight: 500;
   border: 2px solid;
   padding-bottom: 0.5rem;
   border-radius: 0px 0px 0px 0px;
   padding: 1rem 2rem;
   display: grid;
   align-content: center;
   position: relative;
   z-index: 1;
   align-items: center;
   /*padding: 1rem;*/
   border-radius: 15px;
   text-transform: lowercase;
   cursor:pointer;
   grid-template-columns: auto auto;
   justify-content: space-between;
   line-height: normal;
   background: #fff;
}

.cms-header-accordion.active{
   border-color:#002f25;
   color: #ffffff;
   background: #002f25;
   box-shadow: 0 0 10px 9px #0e0e0e45;
}

.fake-header-accordion{
      cursor: pointer;
   gap: 2rem;
   color: #ffffff;
   font-family: "Montserrat", sans-serif;
   font-size: 20px;
   letter-spacing: 2px;
   padding-bottom: 0.5rem;
   border-radius: 0px 0px 0px 0px;
   padding: 1rem 0;
   display: grid;
   align-content: center;
   align-items: center;
   text-transform: uppercase;
   cursor:pointer;
   grid-template-columns: auto auto;
   justify-content: space-between;
   line-height: normal; 
}


.cms-header-accordion.form{
    
font-family: "Montserrat", sans-serif;
    
font-weight: 400;
    
font-size: 2rem;
}


.change-accordion {
   width: 3rem;
   height: 3rem;
   padding: 0;
   display: flex;
   cursor: pointer;
   flex-direction: column;
   justify-content: center;
}

.change-accordion > svg{
   stroke: currentColor;
   width: auto;
   stroke-width: 100px;
   height: 2rem;
   fill: transparent;
   transition: 0.2s transform;
   transform: perspective(none) rotateY(180deg) rotateZ(180deg);););););););
}


.change-accordion.default > svg{
   fill: var(--default-color);
}

.change-accordion.open > svg{
   transition:0.2s;
   transform: perspective(none) rotateY(180deg) rotateZ(90deg);
}

.change-accordion  > .bar-1{
   width:100%;
   background: var(--secondary-color);
   height: 4px;
}

.change-accordion  > .bar-2{
   width:100%;
   background: var(--secondary-color);
   height: 4px;
   margin-top: -4px;
   transition: 0.1s;
   transform:rotate(90deg);
}

.change-accordion.open > .bar-2{
   transform: rotate(180deg);
}


.cms-body-accordion{
   font-family: "Montserrat", sans-serif;
   font-size: 18px;
   font-weight: 400;
   padding: 4rem 2rem;
   position: relative;
   background: #002f25;
   overflow-y: scroll;
   overflow-x:hidden;
   transition: 0.35s;
   border-radius: 15px;
   top: -2rem;
   z-index: 0;
} 


.cms-body-accordion.form{
   padding: 2rem;
}  

.accordion-number-list{
   list-style: auto;
   margin-top: 2rem;
   margin-bottom: 0;
}

.accordion-number-list > li > p{
   margin: 0;
   text-transform: uppercase;
}

.cms-body-accordion.hide {
    height: 0 !important;
    padding-top: 0;
    margin: 0;
    padding-bottom: 0;
}



.cms-body-accordion ul{
    color: #fff;
    list-style: none;
    height: min-content;
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 1.5rem));
    gap: 0rem 3rem;
}


.cms-body-accordion::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 0px;
   background-color: var(--secondary-color);
   
}

.flex-end{
    align-items: flex-end;
}

ol,ul{
	padding-left: 1rem;
}

.cms-body-accordion ul li:before {
    content: '';
    background-image: url(/media/bullet-point.svg);
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 1rem;
    height: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.cms-body-accordion ul li {
    margin-bottom: 0;
    position: relative;
    padding-left: 2rem;
}


.w-75{
    width: 75%;
}