/*Reset*/
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;

}

li {
    list-style-type: none;
}

p span {
    font-weight: 900;
    color: var(--secondary);
}

p-1 {
    font-style: italic;
    font-size: 20px;
    color: var(--secondary);
    line-height: 30px;
    text-align: center;
}

h1 {
    font-size: 2em;
    line-height: 1.5em;
}



.fa-solid {
    color: #ff8c00;

}

/*Utilità*/

.res {
    width: 100%;
    max-width: 500%;
}

.stella {
    max-width: 120%;

}

.sole-luna {
    max-width: 120%;
}

html {
    /*scroll più morbido*/
    scroll-behavior: smooth;

    /*font logo*/
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;

}

/*Tavolozza colore */
:root {
    --primary: #ffc401;
    /* --primary: #ffa8f9; */
    --secondary: #017a95;
    --accent: #ff65fa;
    --light: #ffffff;
    --dark: #101110;
}

/*Tipografia */
body {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;

}

.memofonte_text {
    font-family: 'Montserrat', sans-serif;

}

/* menu */
.icon-hamburger {
    /*font-size: 2.5em;*/
    color: white
}

.title,
.subtitle,
.headline {
    font-family: 'Ubuntu', sans-serif;
}

.title {
    font-size: 120px;
}

.subtitle {
    font-size: 4vw;

}

.headline {
    font-size: 4vw;
}

.X {
    width: 100%;
    display: flex;

}

p {
    font-size: 1.3em;
    line-height: 1.6em;
}

/*Macro */
.wrapper {
    width: 100%;
    /*border: 1px solid red;*/
    margin: 0 auto;
}

section {
    /*serve a sommare il margine alto la testata fixed*/
    scroll-margin-top: 65px;
    display: flex;

}

/*Header */
.fixed {
    position: fixed;
    background: var(--primary);
    /*per espandere la barra in tutto lo schermo orizzontalmente */
    width: 100%;
    z-index: 3;

}

.fixed__logo {
    position: fixed;
    background: #ffffff;
    /*per espandere la barra in tutto lo schermo orizzontalmente */
    width: 100%;
    z-index: 3;
}

.header {
    /*border: 1px solid red;*/
    display: flex;
    justify-content: space-between;
    /*serve per allineare le componenti in verticale*/
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;



}

/*main {
    background: white;
    z-index: 0;
}*/


.header__logo,
.header__menu,
.header__cta {
    /* border: 1px solid red;*/
}

/*menu*/
.icon-hamburger {
    cursor: pointer;
    width: 2em;
    height: 1.5em;
    /* border: 1px solid red;*/
    position: relative;
    transition: 0.5s cubic-bezier(.15, .51, .88, .23);


}

.icon-hamburger span {
    /* SPAN contenitore che lavora in linea*/
    display: block;
    position: absolute;
    left: 0;
    height: 3px;
    width: 100%;
    background: white;


}

.icon-hamburger span:nth-child(1) {
    top: 0;
    border-radius: 20px;
}

.icon-hamburger span:nth-child(2),
.icon-hamburger span:nth-child(3) {
    top: 10px;
    border-radius: 20px;

}

.icon-hamburger span:nth-child(4) {
    top: 20px;
    border-radius: 20px;
}

/*hamburger in apertura*/
.open .icon-hamburger {
    transform: rotate(180deg);
    /*DEG sono i gradi*/
}

.open .icon-hamburger span:nth-child(1),
.open .icon-hamburger span:nth-child(4) {
    width: 0%;
}

.open .icon-hamburger span:nth-child(2) {
    transform: rotate(45deg);
    width: 100%;
}

.open .icon-hamburger span:nth-child(3) {
    transform: rotate(-45deg);
    width: 100%;
}


.header__icon {
    display: none;
    /*per eliminare lo spazio dell'hamburger*/
}

.header__cta,
.header__logo {
    width: 130px;
}

img.header-logo__img {
    width: 180px;
    margin-bottom: 15px;
    margin-top: 20px;
    margin-right: 40px
}

/*navigazione primaria*/
.site-nav li {
    display: inline-block
}

.site-nav a {
    padding: 10px;
    /*border: 1px solid var(--light);*/
    color: var(--secondary);
    font-size: 1.2vw;

}

.site-nav a:is(:hover, :focus) {
    background-color: #ff8c00;
    color: var(--light);
}

.logo {
    /*per invertire i colori*/
    /* filter: invert(1); */

}

.logo__item {
    width: 140px;
    grid-column: 2/3;
    margin-bottom: 10px;
    margin-top: 10px;
    align-items: center;
    display: flex;
    justify-content: center;
    /* padding-left: 130px; */
}

img.logo__item {
    display: flex;
    align-items: center;
}







.button {
    display: block;
    color: var(--light);
    /*border: 1px solid var(--light);*/
    padding: 10px;
    text-align: center;
    background-color: #ff8c00;



}

.button:is(:hover, :focus) {
    background-color: white;
    color: var(--secondary);
}

/*Cover*/
.cover {
    background: var(--dark) url(img/sfondo\ libro.jpg) no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /*border: 1px solid red;*/
    position: relative;
}


/*si colloca tra il testo e l'immagine*/
.cover::before {
    content: ' ';
    width: 100%;
    height: 100%;
    background: var(--secondary);
    position: absolute;
    top: (0);
    left: (0);
    opacity: 0.8;
    z-index: 2;

}

.cover__content {
    position: relative;
    z-index: 2;
    color: var(--light);
    /* border: 1px solid red;*/
    text-align: center;
    padding-top: 200px;
    padding-left: 30px;
    padding-right: 30px;
}

.caption {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.caption img {
    float: left;
    margin: 0;
    padding: 0;
    background: #fff;
    border: none;
}

.caption span {
    float: left;
    margin: 0;
    padding: 10px;
    width: 100%;
    color: #dedede;
    background: #222;
    /* browser che non supportano rgba */
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    left: 0;
    bottom: 0;
}


/* -------------------------------------------------------------------------------- */
/* ! Grid System */
/* -------------------------------------------------------------------------------- */

.grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;


}

.grid__logo {
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;



}

.grid h2 {
    grid-column: 5/9;
    margin-top: 50px;

}


.grid h1 {
    grid-column: 1/9;
}


#evento-arti {
    padding-top: 150px;
    grid-column: 1/9;
    text-align: center;
}

.evento-arti__text {
    grid-column: 1/9;
    line-height: 50px;
    padding-left: 30px;
    padding-right: 30px;
    line-height: inherit;

}



.evento-arti__text h1 {
    padding-bottom: 50px;
    grid-column: 1/9;
    line-height: 50px;
    padding-left: 30px;
    padding-right: 30px;
    font-family: 'Ubuntu', sans-serif;
    color: var(--secondary);

}



.fondazione_text {
    grid-column: 1/7;
}

h3 {
    width: 100%;
    margin-bottom: 50px;
    position: absolute;
    color: #101110;
    grid-column: 1/9;


}

.evento-luna {
    grid-column: 2/5;
    clip-path: circle();
    padding: none;
    z-index: 0;
    max-width: 100%;

}

.evento-sole {
    grid-column: 5/8;
    clip-path: circle();
    padding: none;
    z-index: 0;
    max-width: 100%;

}

.p {
    grid-column: 2/5;
    text-align: center;
    color: var(--secondary);

}

.p2 {
    grid-column: 5/8;
    text-align: center;
    color: var(--secondary);

}

.class_div img {
    width: auto;
    display: block;
    position: relative;
    max-width: 500px;
    width: 100%;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 100px;

}

#evento-didattica {
    padding-top: 150px;
}

.didattica__text {
    grid-column: 1/9;
    padding-left: 30px;
    padding-right: 30px;
    line-height: inherit;
    text-align: center;
}

.didattica__text h1 {
    padding-bottom: 50px;
    grid-column: 1/9;
    line-height: 50px;
    padding-left: 30px;
    padding-right: 30px;
    font-family: 'Ubuntu', sans-serif;
    color: var(--secondary);
}



.immagine {
    grid-column: 1/9;
    margin-top: 50px;

}

#evento-ricerche {
    padding-top: 80px;
}

#evento-notizie {
    padding-top: 100px
}

.evento-paragrafo h1 {
    text-align: center;
    margin-top: 80px;
    /* font-size: 2vw; */
    grid-column: 1/9;
    color: var(--secondary);
}


.evento-miao__img {
    grid-column: 1/5;
}

.evento-miao__text {
    grid-column: 5/9;
}

#evento-presentazione {

    margin-top: 50px;
    margin-bottom: 50px;

}

.evento-presentazione__text {

    grid-column: 1/9;
    margin-top: 40px;
    font-family: 'Montserrat', sans-serif;
    line-height: inherit;
    padding-left: 30px;
    padding-right: 30px;
    color: var(--secondary);
    line-height: 40px;

    /* text-align: center; */

}



.evento-paragrafo {
    grid-column: 1/9;
    text-align: center;
    font-family: 'Montserrat', sans-serif;

}


/* !Tabbar menu */
.tabbar,
.tabbar.active {
    height: 100px;
    width: 100%;
    position: relative;
    background: white;
    margin-right: 0;
    align-items: center;
    bottom: 0;
}


.tabbar__menu {
    display: flex;
    justify-content: center;
    position: relative;
    bottom: 0;
    height: 100px;
    padding-top: 15px;
    background: var(--secondary);
}


.tabbar li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 60px;
    width: 60px;
}

.tabbar a {
    font-size: 2em;
    color: var(--primary);
    border-radius: 100%;
    padding: 15px;
    background: var(--secondary)
}

.tabbar a:is(:hover, :focus) {
    font-size: 3.5em;
    transform: translateY(-20px);
    transition: 250ms cubic-bezier(.15, .51, .88, .23);
}


div.menu {
    background-color: white;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 0, 5em;
    background-color: var(--primary);
    padding: 20px;
}

.evento-contatti {
    background-color: #ffbfe5;

}

/* .video-bg {
    width: 100%;
    height: 100vh;
    position: absolute;
    object-fit: cover;
    z-index: 0;
    background-size: cover;
}


.video__content h1 {
    font-size: 10vw;

} */


/* -------------------------------------------------------------------------------- */
/* ! Media query mobile */
/* -------------------------------------------------------------------------------- */
@media (max-width: 790px) {
    body {
        background: white;

    }

    /*Tipografia */
    body {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;

    }

    .memofonte_text {
        font-family: 'Montserrat', sans-serif;

    }

    /* menu */
    .icon-hamburger {
        /*font-size: 2.5em;*/
        color: white
    }

    .title,
    .subtitle,
    .headline {
        font-family: 'Ubuntu', sans-serif;
    }

    .title {
        font-size: 120px;
    }

    .subtitle {
        font-size: 2.4em;

    }

    .headline {
        font-size: 1.4em;
    }

    .X {
        width: 100%;
        display: flex;

    }

    h1 {
        font-size: 2.5em;
        line-height: 1.5em;
        text-align: center;
    }


    p {
        font-size: 1.3em;
        line-height: 1.6em;
    }

    img#optionalstuff {
        display: none;
    }

    .logo__item {
        /* width: 100px; */
        grid-column: 2/3;
        margin-bottom: 10px;
        margin-top: 10px;
        display: flex;
        align-items: center;
    }

    img.logo__item {
        display: flex;
        align-items: center;
    }

    .header__icon {
        display: block;
        /*per rendere visibile lo spazio dell'hamburger*/
        color: var(--light);
        z-index: 99;
    }

    .header__logo {

        overflow: hidden;

    }



    img.header-logo__img {
        width: 110px;
        margin-bottom: 15px;
        margin-top: 20px;
    }





    .header__menu {
        /*per spostarle verso sinistra*/
        /*background: rgba(0, 0, 0, 0.8); se voglio l'opacità*/
        background: var(--dark);
        transform: translateX(-100%);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 4;
        transition: 0.5s cubic-bezier(.13, .72, .5, .11);
    }

    .header__cta {
        padding-right: 10%;
    }

    /*funziona solo se la classe è in open*/
    body.open .header__menu {
        transform: translateX(0);
    }

    .site-nav {
        /*mette le cose in orizzontale*/
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /*per centrare le scritte*/
        height: 100%;
    }

    .site-nav li {
        margin-bottom: 2em;
    }

    /* ancora di site-nav*/
    .site-nav a {
        border: none;
        font-size: 2em;
        text-transform: uppercase;


    }

    /*grid system mobile*/

    .evento-luna {
        grid-column: 1/9;
        clip-path: circle();
        margin: 5px auto;
        max-width: 70%;
    }

    .evento-sole {
        grid-column: 1/9;
        clip-path: circle();
        margin: 5px auto;
        max-width: 70%;
    }

    .evento-paragrafo {
        text-align: center;
        grid-column: 1/9;
    }

    /* 
    .evento-paragrafo h1 {
        grid-column: 1/9;
        font-size: 10vw;

    } */

    .evento-paragrafo h1 {
        text-align: center;
        margin-top: 80px;
        /* font-size: 2vw; */
        grid-column: 1/9;
        font-size: 25px;
        color: var(--secondary);
    }


    .evento-arti__text h1 {
        grid-column: 1/9;
        line-height: 50px;
        padding-left: 30px;
        padding-right: 30px;
        font-family: 'Ubuntu', sans-serif;
        font-size: 25px;
        color: var(--secondary);


    }

    .evento-presentazione__text {

        grid-column: 1/9;
        margin-top: 40px;
        font-family: 'Montserrat', sans-serif;
        padding-left: 30px;
        padding-right: 30px;
        /* text-align: center; */
        font-size: 10px;
        color: var(--secondary);
        line-height: 25px;
    }



    .p {
        grid-column: 1/9;
        text-align: center;

    }

    .p2 {
        grid-column: 1/9;
        text-align: center;
    }


    .evento-stella {
        grid-column: 1/9;
        clip-path: circle();
        margin: 5px auto;
        max-width: 50%;
    }


    .fondazione_img {
        grid-column: 1/9;
        max-width: 50%;
        clip-path: circle();
        margin: 5px auto;
    }

    .evento-arti__text {
        grid-column: 1/9;
    }

    .evento-arti__img {
        grid-column: 1/9;
    }

    .didattica__text {
        grid-column: 1/9;
        text-align: center;

    }


    .didattica__text h1 {
        grid-column: 1/9;
        line-height: 50px;
        padding-left: 30px;
        padding-right: 30px;
        font-family: 'Ubuntu', sans-serif;
        font-size: 25px;
        color: var(--secondary);
    }



    .immagine {
        grid-column: 1/9;
        margin-top: 200px;

    }

    /* .video-bg {
        width: 100%;
        height: 100vh;
        position: absolute;
        object-fit: cover;
        z-index: 0;
        background-size: cover;
    }


    .video__content h1 {
        font-size: 10vw;

    } */

}