/* Inclusioni dei font */
@font-face {
    font-family: "Dimension";
    src: url("/font/Dimension.ttf");
}
@font-face {
    font-family: "GothamLight";
    src: url("/font/GothamLight.ttf") format('truetype');
    src: url("/font/GothamLight.otf") format('opentype')
}
@font-face {
    font-family: "GothamBook";
    src: url("/font/GothamBook.ttf") format('truetype');
    src: url("/font/GothamBook.otf") format('opentype')
}
@font-face {
    font-family: "GothamMedium";
    src: url("/font/GothamMedium.ttf");
}
@font-face {
    font-family: "Gadugib";
    src: url("/font/gadugib.ttf");
}
@font-face {
    font-family: "BebasNeue";
    src: url("/font/BebasNeueRegular.ttf");
}
@font-face {
    font-family: "MontserratMedium";
    src: url("/font/Montserrat-Medium.ttf");
}
@font-face {
    font-family: "MontserratBold";
    src: url("/font/Montserrat-Bold.ttf");
}

/* Font di ATMOS */
.f-family-dimension {
    font-family: "Dimension", Arial;
}
/* Font base del sito */
.f-family-gotham_light {
    font-family: "GothamLight", Arial;
}
/* Font scritte rosse */
.f-family-gadugib {
    font-family: "Gadugib", Arial;
}
/* Font navbar sx */
.f-family-gotham_book {
    font-family: "GothamBook", Arial;
}
/* Font scritta about */
.f-family-bebas_neue {
    font-family: "BebasNeue", Arial;
}
/* Font scritte titoli video */
.f-family-montserrat-medium {
    font-family: "MontserratMedium", Arial;
}
.f-family-montserrat-bold {
    font-family: "MontserratBold", Arial !important;
}
.f-family-gotham_medium {
    font-family: "GothamMedium", Arial;
}

/* Tutto */
* {
    background: transparent;
    color: #fff;
}

/* Tag standard */
body {
    font-family: "GothamLight", Arial;
}
main {
    height: 100vh;
    scroll-behavior: smooth;
}
a {
    text-decoration: none;
    color: #fff
}

/*a:hover :not(*.c-ff0000) {
    color: #ff0000;
}*/

.c-ff0000 {
    color: #ff0000;
}
.c-757575 {
    color: #757575;
}
.c-ff0000-hover, .c-ff0000-hover * {
    transition: 300ms;
}
.c-ff0000-hover:hover, .c-ff0000-hover:hover * {
    color: #ff0000;
}

/* Classi */
.h-max-160-px {
    max-height: 160px;
}
.h-min-100-vh {
    min-height: 100vh;
}
.h-min-100-px {
    min-height: 100px;
}
.h-custom-atmos {
    height: calc(100vh - 100px);
}
.h-custom-atmos-nav_sx {
    height: calc(100vh - 200px);
}
.w-100-vw {
    width: 100vw;
}
.w-25-px {
    width: 25px;
}
.w-50 {
    width: 50% !important;
}
.f-size-0_6-em {
    font-size: 0.6em;
}
.f-size-0_7-em {
    font-size: 0.7em;
}
.f-size-0_8-em {
    font-size: 0.8em;
}
.f-size-1-em {
    font-size: 1em;
}
.f-size-1_3-em {
    font-size: 1.3em;
}
.f-size-1_5-em {
    font-size: 1.5em;
}
.f-size-3_5-em {
    font-size: 3.5em;
}
.f-size-1_2-em {
    font-size: 1.2em;
}
.f-size-1_4-em {
    font-size: 1.4em;
}
.f-size-1_5-em {
    font-size: 1.5em;
}
.f-size-1_6-em {
    font-size: 1.6em;
}
.f-size-1_7-em {
    font-size: 1.7em;
}
.f-size-2-em {
    font-size: 2em;
}
.f-size-2_4-em {
    font-size: 2.4em;
}
.f-size-3-em {
    font-size: 3em;
}
.f-size-4-em {
    font-size: 4em;
}
.f-size-8-em {
    font-size: 8em;
}
.f-size-13-em {
    font-size: 13em;
}
.f-size-20-vw {
    font-size: 20vw;
}
.f-size-1_3-vw {
    font-size: 1.3vw;
}
.f-size-1_5-vw {
    font-size: 1.5vw;
}
.f-size-1_8-vw {
    font-size: 1.8vw;
}
.f-size-2-vw {
    font-size: 2vw;
}
.f-size-2_7-vw {
    font-size: 2.7vw;
}
.f-size-3_3-vw {
    font-size: 3.3vw;
}
.f-size-4-vw {
    font-size: 4vw;
}
.f-size-52-px {
    font-size: 52px;
}
.btn-atmos {
    color: #fff;
    border: 3px solid rgb(218, 217, 217);
    border-radius: 20px;
    border-color: #2c2c2c;
    padding: 1px 20px;
}
.btn-atmos:hover {
    color: #fff;
}
.z-i-1 {
    z-index: 1 !important;
}
.z-i-2 {
    z-index: 2;
}
.z-i-3 {
    z-index: 3 !important;
}
.cr-pointer {
    cursor: pointer;
}
.cr-pointer_into * {
    cursor: pointer;
}
.hover-dark_img_into {
    z-index: -1 !important;
}
.hover-dark_img_into *.darker {
    display: grid;
    transition: 1s ease-out;
}
.hover-dark_img_into *.autore_under p {
    opacity: 1;
    transition: 1s;
}
.hover-dark_img_into *.autore_upper {
    opacity: 0;
    transition: 1s;
}
.hover-dark_img_into *.darker:hover {
    background: #000000c4;
}
.hover-dark_img_into *.darker:hover .autore_upper {
    opacity: 1;
}
.hover-dark_img_into *.darker:hover img,
.hover-dark_img_into *.darker:hover .autore_under {
    z-index: -1;
}
.hover-dark_img_into *.darker:hover .autore_under p {
    opacity: 0;
}
.rotate-90-deg {
    transform: rotate(90deg);
}
.bg-standard {
    background: rgb(24,24,24);
    background: -moz-radial-gradient(circle, rgba(24,24,24,1) 43%, rgba(0,0,0,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(24,24,24,1) 43%, rgba(0,0,0,1) 100%);
    background: radial-gradient(circle, rgba(24,24,24,1) 43%, rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#181818",endColorstr="#000000",GradientType=1);
}
.bg-moon {
    background-image: url("../img/wo_we_are/5.jpg");
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.bg-moon_for_title {
    background-image: url("../img/wo_we_are/5.jpg");
    background-color: #000;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}
.bg-000 {
    background-color: #000;
}
.mb-neg-0_6-em {
    margin-bottom: -0.6em;
}
.mt-neg-3_8-px {
    margin-top: -3.8px !important;
}
.mr-neg-6-px {
    margin-right: -6px
}
.ml-neg-6-px {
    margin-left: -6px
}
.mt-100-px {
    margin-top: 100px !important;
}
.mt-160-px {
    margin-top: 160px !important;
}
.pb-20-vh {
    padding-bottom: 20vh;
}
.pb-40-vh {
    padding-bottom: 40vh;
}
.letter-spacig-2_5-px {
    letter-spacing: 2.5px;
}
.b-radius-6-px {
    border-radius: 6px;
}
.nav-sx {
    position: absolute;
    left: 0;
    top: -150vh;
    bottom: 100vh;
    right: 0;
    z-index: 2;
    transition: 0.3s ease-in-out;
    /*backdrop-filter: blur(4px);*/
    background-color: #000;
}
.nav-sx ul{
    list-style-type: none;
    padding: 0;
}
.nav-sx .links * {
    transition: 500ms
}
.nav-sx .links a {
    font-size: 1.4em;
    font-weight: 600;
}
.nav-sx .links a:hover span:first-child {
    color: #ff0000
}
.nav-sx .links a:hover span {
    color: #fff
}
.nav-sx .links a.active > span:first-child {
    color: #424242;
    text-decoration: line-through;
}
.nav-sx .links a.active * {
    color: #471111
}
.nav-sx .links a.active > span:first-child:hover {
    color: #424242
}
.nav-sx .links a.active:hover * {
    color: #471111
}
.nav-sx.mostra {
    top: 0;
    bottom: 0;
}
.bg-nav_by_nav-sx-open {
    transition: 0.5s ease-in-out;
}
.bg-nav_by_nav-sx-open.attiva {
    /*backdrop-filter: blur(4px);*/
    background-color: #000;
}
.border_atmos {
    border: 3px solid #ff0000
}
.effetto_vai_giu {
    animation-name: keyfrm_vai_giu;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes keyfrm_vai_giu {
    0% {
        padding-bottom: 5px;
    }
    50% {
        padding-bottom: 0px;
    }
    100% {
        padding-bottom: 5px;
    }
}
.modal {
    background-color: #000000de;
}
.modal-content {
    background: transparent;
    border-color: transparent;
}
.modal-body, .modal-header {
    background-color: #111111
}
.modal-header {
    border-radius: 10px 10px 0 0;
    border: none;
}
.modal-body {
    border-radius: 0 0 10px 10px;
}
.modal-96_vw {
    max-width: 96vw;
}

/* Vimeo */
div.container-vimeo-video {
    padding:56.25% 0 0 0;
    position:relative;
    width:100%
}

/* Menu descrizione componenti gruppo */
.nav-subjects .subject {
    opacity: 40%;
    cursor: pointer;
}
.nav-subjects .subject, .nav-subjects .to_show {
    transition: 500ms;
}
.nav-subjects .subject:hover, .nav-subjects .subject.active {
    opacity: 1;
}
.nav-subjects .subject:hover + .subject.active {
    opacity: 40% !important;
}
.nav-subjects .to_show {
    opacity: 0;
    display: none !important;
    height: 100%;
}
.nav-subjects .to_show.active {
    display: flex !important;
    opacity: 1 !important;
    animation: appari 1s;
}

/* Bottone contattaci */
.blocca_btn_contattaci {
    position: fixed;
    bottom: 20px;
    right: 12px;
}
#btn_contattaci {
    opacity: 0;
    transition: 500ms;
    background-color: #000;
}
#btn_contattaci.active {
    opacity: 1;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 0.8em;
  height: 0;
}
.invisible-scrollbar::-webkit-scrollbar {
    display: none;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
background-color: #181818;
outline: 1px solid #181818;
}

/* Scroll verso destra */
#slides {
    display: flex;
    overflow-y: hidden;
    scroll-behavior: smooth;
}
#slides > div {
    min-width: 100vw !important;
    display: block;
    transition: 1s;
}

/* Bottone menu panino */
#menuToggle {
    display: block;
    top: 50px;
    left: 50px;
    cursor: pointer;
   
    z-index: 3;
   
    -webkit-user-select: none;
    user-select: none;
}
#menuToggle input {
   display: block;
   width: 40px;
   height: 32px;
   position: absolute;
   top: -7px;
   left: -5px;
   
   cursor: pointer;
   
   opacity: 0;
   z-index: 4;
   
   -webkit-touch-callout: none;
}
#menuToggle span {
   display: block;
   width: 30px;
   height: 2px;
   margin-bottom: 6px;
   position: relative;
   
   background: #fff;
   border-radius: 0;
   
   z-index: 1;
   
   transform-origin: 4px 0px;
   
   transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0),
               background 0.2s cubic-bezier(0.77,0.2,0.05,1.0),
               opacity 0.25s ease-in-out;
}
#menuToggle:hover span {
    background: #ff0000;
}
#menuToggle span:first-child {
   transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
   transform-origin: 0% 100%;
}
#menuToggle.checked span {
   opacity: 1;
   transform: rotate(45deg) translate(-2px, -1px);
   background: #ff0000;
}
#menuToggle.checked span:nth-last-child(3) {
   opacity: 0;
   transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle.checked span:nth-last-child(2) {
   transform: rotate(-45deg) translate(0, -1px);
}
#menu {
   display: none;
}

/* carousel ed elementi interni */
carousel {

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    overflow: hidden;

}
carousel > elements {
    display: flex;
}
carousel > elements > element {
    display: flex;
    min-width: 100%;
    height: 100vh;
    padding: 20px;
    transition: 500ms;

    background-position: center center;
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
    background-size: cover;

}
carousel.sposta > elements > element:first-child {
    margin-left: -100vw;
}
carousel > elements > element > text {
    margin: auto;
    text-align: center;
}
carousel > nav-sx, carousel > nav-dx {
    
    position: absolute;

    top: 0;
    bottom: 0;

    display: flex;

    width: 10vw;

    cursor: pointer;

}
carousel > nav-sx {
    left: 0;
}
carousel > nav-dx {
    right: 0;
}
carousel > nav-sx > button {
    transform: rotate(180deg);
}
carousel > nav-sx > button, carousel > nav-dx > button {
    margin: auto;
    padding: 10px;
    width: 35px;
    height: 35px;
    display: flex;
    border: 2px solid rgba(0, 0, 0, 0.452);
    border-radius: 5%;
    background-color: #181818a1;
    opacity: 0;
    transition: 600ms ease-in-out;
}
carousel > nav-sx:hover > button, carousel > nav-dx:hover > button {
    opacity: 1;
}

/* -SM */
@media screen and (min-width: 576px) {
    .f-size-1_3-em-sm {
        font-size: 1.3em;
    }
    .f-size-2_8-em-sm {
        font-size: 2.8em;
    }
    .f-size-3-em-sm {
        font-size: 3em;
    }
    .f-size-4-em-sm {
        font-size: 4em;
    }
    .f-size-5-em-sm {
        font-size: 5em;
    }
    .f-size-6-em-sm {
        font-size: 6em;
    }
    .f-size-8-em-sm {
        font-size: 8em;
    }
    .w-sm-50 {
        width: 50% !important
    }
}
/* -MD */
@media screen and (min-width: 600px) {
    .f-size-35-px-md {
        font-size: 35px !important;
    }
    .f-size-1_7-em-md {
        font-size: 1.5em;
    }
    .f-size-4-vw-md {
        font-size: 4vw;
    }
    .f-size-5-vw-md {
        font-size: 5vw;
    }
    .f-size-2_7-vw-md {
        font-size: 2.7vw;
    }
    .f-size-3_3-vw-md {
        font-size: 3.3vw;
    }
    .f-size-2-em-md {
        font-size: 2em !important;
    }
    .f-size-3-em-md {
        font-size: 3em;
    }
    .h-custom-atmos-md {
        height: calc(100vh - 100px);
    }
    .f-size-8-em-md {
        font-size: 8em;
    }
    .f-size-6-em-md {
        font-size: 6em;
    }
    .w-md-50 {
        width: 50% !important
    }
    .h-min-50-vh-md {
        min-height: 50vh;
    }
}
/* -LG */
@media screen and (min-width: 992px) {
    .h-custom-atmos-lg {
        height: calc(100vh - 100px) !important;
    }
    .f-size-1_5-vw-lg {
        font-size: 1.5vw;
    }
    .f-size-1_3-vw-lg {
        font-size: 1.3vw;
    }
    .f-size-1_7-em-lg {
        font-size: 1.7em;
    }
    .f-size-2-vw-lg {
        font-size: 2vw;
    }
    .f-size-2_3-em-lg {
        font-size: 2.3em;
    }
    .f-size-2_5-em-lg {
        font-size: 2.5em;
    }
    .f-size-3-em-lg {
        font-size: 3em;
    }
    .f-size-4-em-lg {
        font-size: 4em;
    }
    .f-size-8-em-lg {
        font-size: 8em;
    }
    .h-custom-atmos-lg {
        height: calc(100vh - 100px);
    }
    .h-min-100-vh-lg {
        min-height: 100vh;
    }
    .f-size-1_4-em-lg {
        font-size: 1.4em;
    }
    .text-md-justify {
        text-align: justify !important;
        text-justify: inter-word !important;
    }
}
/* -XL */
@media screen and (min-width: 1200px) {
    .f-size-3-em-xl {
        font-size: 3em;
    }
    .f-size-13-em-xl {
        font-size: 13em;
    }
}

@keyframes appari {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}