/*importazione carattere da google*/
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*animazioni*/
@keyframes zoomOutJoinUs {
    from{
        background-size: 100%;
        box-shadow: 0 0 0 rgb(40,40,40);
    }
    to{
        background-size: 70%;
        box-shadow: 0 0 10px rgb(40,40,40);
    }
}
@keyframes openSearchBar {
    from{
        width: 30px;
    }
    to{
        width: calc(20vw - 70px);
    }
}
@keyframes opencastingsection{
    from{
        width: calc(100vw - 0px);
        padding-left:25px;
        padding-right:25px;
        padding:0;
        max-height: 0;
        min-height: 0;
    }
    to{
        width: calc(100vw - 50px);
        padding:25px;
        max-height: calc(93vh - 50px - 30px);
        min-height: calc(93vh - 50px - 30px);
    }
}
@keyframes closecastingsection {
    from{
        width: calc(100vw - 50px);
        max-height: calc(93vh - 50px - 30px);
        min-height: calc(93vh - 50px - 30px);
        padding:25px;
    }
    to{
        width: calc(100vw - 0px);
        padding:0;
        max-height: 0;
        min-height: 0;
    }
}

@keyframes headerAppear {
    from{
        position:fixed;
        top: -20vh;
        z-index: unset;
    }
    to{
        position: fixed;
        top: 0;
        z-index: 999999999;
    }
}
/*animazioni*/

html, body{
    position: relative;
    margin: 0;
    padding: 0;
    width: 100vw;
    min-height: 100vh;
    max-height: 220vh;
    height: auto;
    overflow-x: hidden;
    font-family: 'Jost', sans-serif;
}
*{
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}
strong, span, em, br{
    position: unset;
    float: unset;
    margin: unset;
    padding: unset;
}
.container{
    width: 100vw;
    height: auto;
}
/*gestione header*/
.header{
    width: 100vw;
    height: auto;
    min-height: 10vh;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    z-index: 99999;
}
#headerSide{
    opacity: 1;
    z-index: 99999;
}
.headerAppear{
    animation: headerAppear 0.5s forwards;
}
.mainLogoSector{
    width: 10vw;
    position: absolute;
    top: 2.5vh;
    left: 30px;
}
ul.fastMenuList{
    position: relative;
    list-style: none;
    text-transform: uppercase;
    text-align: right;
}
:root {
  --fastMenuListItemWidth: calc(8vw - 30px - 36px);;
}
li.fastMenuListItem{
    width: auto;
    position: relative;
    float: left;
    margin-left: 15px;
    margin-right: 15px;
    cursor: pointer;
    transition: 0.5s;
    /*line-height: 1em;*/ /*vecchia animazione, idonea per un menu orizzontale rimpiazzata con padding-right*/
    font-size: 1em;
    font-weight: 300;
    text-align: center;
    padding-right: 0px;
}
li.fastMenuListItem:hover{
    /*line-height: 2em;*/ /*vecchia animazione, idonea per un menu orizzontale rimpiazzata con padding-right*/
    transition: 0.2s;
    padding-right: 20px;
}
.boysItemButton{
    color: rgb(141, 215, 221);
}
.girlsItemButton{
    color: rgb(235, 166, 216);
}
h1.mainTitleSector{
    width: 100vw;
    height: 50vh;
    margin-top: 25vh;
    text-align: center;
    font-size: 35em;
    line-height: 1em;
    font-family: 'Jost', sans-serif;
    color: rgb(255,255,255);
    text-shadow: 0 0 5px rgb(120,120,120);
    text-transform: uppercase;
}

/*ricerca*/
.searchContainer{
    width: 30px;
    height: 30px;
    position: relative;
    top: -2vh; /*corrisponde all'altezza dell'header*/
    right: 0;
    z-index: 9999;
}
.shadownOnMe{
    box-shadow: 0px 9px 8px -7px rgba(0,0,0,0.62);
}
#searchbar{
    width: calc(30px - 1px);
    height: calc(30px - 1px);
    padding: 10px;
    color: rgb(40,40,40);
    text-transform: uppercase;
    text-align: left;
    font-family: 'Mulish', sans-serif;
    float: right;
    border-radius: 30px;
    border: none;
    border:1px solid rgb(40,40,40);
}
.closeSearchBar{
    animation: openSearchBar reverse forwards 1s;
}
.openSearchBar{
    animation: openSearchBar 0.5s forwards;
}
#search::placeholder{
    color: rgb(120,120,120);
    text-align: left;
    content: attr('ciao') !important;
}
#iconSearch{
    margin: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 25px;
    text-align: center;
    font-size: 1.5em;
    color: rgb(40,40,40);
    position: absolute;
    right: 10px;/*aggiunta di 25px perchè posizionamento del searchBarContainer è fixed*/
    top: 15px; /*aggiunta di 25px perchè posizionamento del searchBarContainer è fixed*/
    text-align: center;
    cursor: pointer;
}

span.material-symbols-outlined.menuSymbol {
    font-variation-settings:'FILL' 0,  'wght' 300,  'GRAD' 0,  'opsz' 48;
    position: fixed;
    top: 13px;
    right: 50px;
    color: white;
    z-index: 9999999999999999;
    font-size: 2em;
    font-style: normal !important;
    transform: none !important;
    cursor: pointer;
    transition: 0.2s;
    cursor: pointer;
    /*background: rgba(0,0,0,0.3);*/
    background: transparent;
    border-radius: 50px;
    padding: 10px;
    width: unset;
    margin: 0 !important;
    /*transform: invert(100%);*/
    mix-blend-mode: difference;
}
path{
    transition: 0.2s;
}
span.material-symbols-outlined:hover{
    opacity: 0.5;
    transition: 0.2s;
}
span.material-symbols-outlined:hover path.path1{
    transform:translateX(-10px);
    transition: 0.2s;
}
span.material-symbols-outlined:hover path.path2{
    transform:translateX(10px);
    transition: 0.2s;
}
span.material-symbols-outlined:hover path.path3{
    transform:translateX(-10px);
    transition: 0.2s;
}
svg{
    margin: 0;
    padding: 0;
    max-height: 50px;
    max-width: 50px;
    color: white;
    fill: white;
}
#mainMenuSpace{
    width: 100%;
}
h1.menuTitle{
    width: 100%;
    text-align: center;
    font-size: 1.5em;
    letter-spacing: 2px;
    color: rgb(40,40,40);
    font-weight: 300;
    text-transform: uppercase;
}
#sectorsSubMenuSpaceBk{
    /*position: fixed;
    margin: 0;
    padding: 0;
    width: 70vw;
    height: 40vh;
    background: rgba(0,0,0,0.7);
    border-radius: 15px;
    backdrop-filter: blur(15px);
    left: 15vw;
    top: calc(60vh / 2);
    z-index: 999999999999999;
    color: white;
    display: none;
    font-family: 'Mulish', sans-serif;
    z-index: 99999 !important;
    */
    position: fixed;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(5px);
    width: 50vw;
    height: 50vh;
    min-width: 50vw;
    min-height: 50vh;
    max-width: 50vw;
    max-height: 50vh;
    padding-top: 25vh;
    padding-bottom: 25vh;
    padding-left: 25vw;
    padding-right: 25vw;
    color: rgb(40,40,40);
    top: 0;
    left: 0;
    display: none;
    z-index: 99999 !important;
}

#closesectorsSubMenuSpaceButton {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 1.5em;
    line-height: 1.5em;
    padding: 10px;
    transition: 0.5s;
    cursor: pointer;
    z-index: 999999999999999999999999;
}
#closesectorsSubMenuSpaceButton:hover{
    transform: rotate(90deg);
    transition: 0.2s;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-weight: normal;
    font-size: 14px;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ul.mainMenuList{
    width: calc(100% - 50px);
    float: left;
    margin: 0;
    padding: 0;
    margin: 25px;
    list-style: none;
}

ul.mainMenuList{
    margin-top: 75px;
}

li.mainMenuItem{
    float: left;
    width: calc(100% / 6);
    text-align: center;
    margin: 0;
    transition: 0.2s;
    cursor: pointer;
    text-transform: uppercase;
    color: rgb(40,40,40);
}
li.mainMenuItem:hover{
    transition: 0.2s;
    letter-spacing: 1px;
}

.spaceColumnR, .spaceColumnL{
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
    width: calc(100% - 100px);
    margin: 25px;
    margin-left: 50px;
    margin-right: 50px;
}

ul.sectorSubMenuList{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

li.sectorSubMenuListItem{
    font-size: 0.9em;
    width: calc((100% / 7) - 20px);
    margin: 0;
    padding: 0;
    text-align: left;
    float: left;
    display: inline;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin-left: 5px;
    margin-right: 5px;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1em;
    transition: 0.2s;
    text-align: center;
    padding: 5px;
}

li.sectorSubMenuListItem:hover{
    transition: 0.2s;
    opacity: 0.5;
}

ul.sectorSub_SubMenuList{
    display: block;
    list-style: none;
    float: left;
    position: relative;
    width: calc(100% - 10px);
    margin: 0;
    padding: 0;
    margin-left: 7.5px;
    margin-right: 2.5px;
    margin-top: 15px;
    border-top: 1px solid white;
    display: none;
}

#sectorsSubMenuSpaceMobile, #barsForSubMenuSectorsMobile{
    display: none;
}

li.sectorSub_SubMenuListItem{
    font-size: 1em;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: 0.2s;
    letter-spacing: 0px;
    text-transform: uppercase;
    margin-top: 10px;
    font-weight: normal;
}

li.sectorSub_SubMenuListItem:hover{
    transition: 0.2s;
    letter-spacing: 0.2px;
}

/*nascondo il pulsante chiusura submenu mobile dalla versione desktop*/

p.closingSubMenuMobile{
    display: none;
}

h1.sectorTitle{
    width: calc(100% - 100px);
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    line-height: 1.2em;
    margin-top: 15px;
    margin-bottom: 10px;
    text-align: center;
    margin-left: 50px;
    margin-right: 50px;
    border-bottom: 1px solid rgb(40,40,40);
    padding-bottom: 10px;
}

/******************/
/*settaggio mobile*/
/******************/


@media (min-width: 279px) and (max-width: 823px) {

    #sectorsSubMenuSpaceBk{
        position: fixed;
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        min-width: 100vw;
        min-height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        background: rgba(255,255,255,0.9);
        border-radius: 0;
        backdrop-filter: blur(15px);
        left: 0vw;
        top: 0;
        z-index: 999999999999999;
        color: white;
        display: none;
        font-family: 'Mulish', sans-serif;
        z-index: 99999 !important;
        overflow-y: scroll;
        padding-bottom: 50px;
    }
    
    svg{
        height: unset !important;
        width: unset !important;   
        max-height: 30px;
        max-width: 30px;
        text-align: center;
        vertical-align: middle;
        float: left;
    }

    .path1, .path2, .path3{
        transform: scale(0.7);
    }

    #sectorsSubMenuSpaceMobile, #barsForSubMenuSectorsMobile{
        display: none;
    }
    
    span.material-symbols-outlined.menuSymbol {
        right: 15px !important;
        top: 3.5px;
    }

    #sectorsSubMenuSpace{
        width: 100vw;
        height: calc(100vh - 150px);
        backdrop-filter: blur(15px);
        left: 0;
        top: 0;
        z-index: 999999999999;
        background: rgba(0,0,0,0.7);
        border-radius: 0;
        overflow: scroll !important;
        padding-top: 75px;
        padding-bottom: 75px;
    }
        
    ul.mainMenuList{
        width: calc(100% - 30px);
        margin: 15px;
    }

    /*ul.mainMenuList{
        margin-top: 75px;
    }*/

    li.mainMenuItem{
        width: calc(100%);
        margin-top: 7px;
        padding-top: 5px;
        padding-bottom: 5px;
        border: 1px solid rgb(30,30,30);
        border-radius: 25px;
        font-size: 0.8em;
        line-height: 1em;
        width: 80%;
        margin-left: 10%;
        background: rgb(30,30,30);
        color: rgb(255,255,255);
    }

    h1.sectorTitle{
        color: rgb(30,30,30);
    }

    .spaceColumnR, .spaceColumnL{
        width: calc(100% - 30px);
        margin: 0;
        margin-left: 15px;
        margin-right: 15px;
    }

    ul.sectorSubMenuList{
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    li.sectorSubMenuListItem{
        width: 80%;
        text-align: center;
        font-weight: normal;
        margin: 0;
        margin-left: 10%;
        margin-bottom: 7px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 25px;
        font-size: 0.8em;
        line-height: 1em;
        border: 1px solid rgb(30,30,30);
        color:rgb(30,30,30);
    }

    /*gestione sottomenu mobile singola categoria*/
    ul.sectorSub_SubMenuList {
        width: 100vw;
        height: 100vh;
        position: fixed;
        margin: 0;
        padding: 0;
        border: none;
        background: rgba(0,0,0,0.7);
        backdrop-filter: blur(25px);
        display: none;
        top: 0;
        left: 0;
    }

    /*personalizzazione dei bottoni riferiti ai kids*/
    
    .girlsItemButton{
        background-color:rgb(235, 166, 216) !important;
    }
    .boysItemButton{
        background-color: rgb(141, 215, 221) !important;
    }
}

/*********************************/
/* settaggio monitor più piccoli */
/*********************************/
@media (min-width: 1024px) and (max-width: 1679px){
    li.sectorSubMenuListItem{
        font-size: 0.75em;
        letter-spacing: -0.5px;
    }
    ul.sectorSub_SubMenuList{
        margin-top: 0;
    }
}

/*gestione burger menu*/
.menu-icon {
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: fixed;
    top: 2vh;
    right: 2vw;
    z-index: 99999;
}
.menu-icon .menu-icon__cheeckbox {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    z-index: 2;
    -webkit-touch-callout: none;
    position: absolute;
    opacity: 0;
}
.menu-icon div {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 12px;
}
.menu-icon span {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--bar-bg, #000);
    border-radius: 1px;
    transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
}
.menu-icon span:first-of-type {
    top: 0;
}
.menu-icon span:last-of-type {
    bottom: 0;
}
.menu-icon.active span:first-of-type, .menu-icon .menu-icon__cheeckbox:checked + div span:first-of-type {
    transform: rotate(45deg);
    top: 5px;
}
.menu-icon.active span:last-of-type, .menu-icon .menu-icon__cheeckbox:checked + div span:last-of-type {
    transform: rotate(-45deg);
    bottom: 5px;
}
.menu-icon.active:hover span:first-of-type, .menu-icon.active:hover span:last-of-type, .menu-icon:hover .menu-icon__cheeckbox:checked + div span:first-of-type, .menu-icon:hover .menu-icon__cheeckbox:checked + div span:last-of-type {
    width: 50px;
}
@media (min-width: 1024px) {
    .menu-icon:hover span:first-of-type {
        width: 26px;
   }
    .menu-icon:hover span:last-of-type {
        width: 12px;
   }
}


/*gestione menu fast*/

.fastMenuSpace{
    position: absolute !important;
    top: 75px;
    right: calc(-100vw + 50px);
    max-width: 12.5vw;
    min-width: 12.5vw;
    height: auto;
    z-index: 99999;
}
.fastMenuList{
    list-style: none;
    width: 100%;
}
li.fastMenuListItem{
    width: 100%;
    margin-bottom: 5px;
    font-size: 1em;
    font-weight: 400;
    text-transform: uppercase;
    color: rgb(40,40,40);
    text-align: right;
    cursor: pointer;
}

/*setting come back to history button*/
.backToPrec{
    position: absolute;
    right: -98vw;
    top: 20px;
    font-size: 3.5em;
    font-weight: 400;
    color: rgb(40,40,40);
    cursor: pointer;
    z-index: 99999;
}
/********************/
/*                  */
/* SETTAGGIO MOBILE */
/*                  */
/********************/
@media (min-width: 279px) and (max-width: 823px) {
    .header{
        width: 100vw;
        height: auto;
        min-height: 7vh;
        position: absolute;
        top: 0;
        left: 0;
        background: transparent;
        z-index: 999;
    }
    .mainLogoSector{
        width: 30vw;
        position: absolute;
        top: 2vh;
        left: calc(50vw - 15vw);
    }
    .openButton{
        position: absolute;
        backdrop-filter: invert(100%);
        top: 2vh;
        right: 30px;
    }
    .fastMenuSpace{
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 1em;
        padding-right: 0px;
        border-right: 0px solid rgb(40,40,40);
        right: 0;
        width: calc(100vw - 50px);
        min-width: calc(100vw - 50px);
        max-width: calc(100vw - 50px);
        min-height: calc(100vh - 20px);
        max-height: calc(100vh - 20px);
        padding: 10px;
        padding-left: 25px;
        padding-right: 25px;
        position: fixed !important;
        top: 0vh;
        left: 0vw;
        background: rgba(255,255,255,0.7);
        backdrop-filter: blur(5px);
        z-index: 99999;
        box-shadow: 0 0 15px rgb(220,220,220);
        display: none;
        z-index: 99999;
    }
    /*gestione burger menu*/
    .menu-icon {
        width: 30px;
        height: 30px;
        cursor: pointer;
        position: fixed;
        top: 2vh;
        right: 5vw;
        z-index: 99999;
    }
    .menu-icon .menu-icon__cheeckbox {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        cursor: pointer;
        z-index: 999999;
        -webkit-touch-callout: none;
        position: absolute;
        opacity: 0;
    }
    .menu-icon div {
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 30px;
        height: 12px;
    }
    .menu-icon span {
        position: absolute;
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--bar-bg, #000);
        border-radius: 1px;
        transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
    }
    .menu-icon span:first-of-type {
        top: 0;
    }
    .menu-icon span:last-of-type {
        bottom: 0;
    }
    .menu-icon.active span:first-of-type, .menu-icon .menu-icon__cheeckbox:checked + div span:first-of-type {
        transform: rotate(45deg);
        top: 5px;
    }
    .menu-icon.active span:last-of-type, .menu-icon .menu-icon__cheeckbox:checked + div span:last-of-type {
        transform: rotate(-45deg);
        bottom: 5px;
    }
    .menu-icon.active:hover span:first-of-type, .menu-icon.active:hover span:last-of-type, .menu-icon:hover .menu-icon__cheeckbox:checked + div span:first-of-type, .menu-icon:hover .menu-icon__cheeckbox:checked + div span:last-of-type {
        width: 30px;
    }
    @media (min-width: 1024px) {
        .menu-icon:hover span:first-of-type {
            width: 30px;
    }
        .menu-icon:hover span:last-of-type {
            width: 12px;
    }
    }
    .backToPrec{
        position: absolute;
        left: 5vw;
        top: 2vh;
        font-size: 2em;
        font-weight: 400;
        color: rgb(40,40,40);
        cursor: pointer;
        z-index: 99999;
        max-width: 10vw;
        fill: 0;
        font-weight: 100;
        font-optical-sizing: 20;
    }
    li.fastMenuListItem{
        margin: 0;
        padding: 0;
        width: 100%;
        margin-bottom: 5px;
        margin-top: 5px;
        font-size: 1em;
        font-weight: 400;
        text-transform: uppercase;
        color: rgb(30,30,30);
        text-align: left;
        cursor: pointer;
        padding: 5px;
        padding-bottom: 2.5px;
        padding-top: 2.5px;
    }
    ul.fastMenuList{
        position: relative;
        margin-top: calc(10vh + 3.5em);
        list-style: none;
        text-transform: uppercase;
        text-align: right;
        width: calc(60% - 51px);
        padding-left: 50px;
        border-left: 1px solid rgb(40,40,40);
        margin-left: 20%;
        margin-right: 20%;
    }
    .menuTitle{
        width: 100%;
        text-align: center;
        margin-bottom: 25px;
        margin-top: 25px;
        font-size: 1em;
        letter-spacing: 2px;
        font-weight: 300;
        text-transform: uppercase;
        color: rgb(30,30,30);
    }
    
}