/* tavolozza colore */
:root {
    --primary: #6b0707;
    --secondary: #fec78c;
    --accente: #3C7DA6;
    --light: #F2E0BD;
    --dark: #402A01;
}

/* reset */


* {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

html,
body {
    max-width: 1550px;
    overflow-x: hidden;
}

a,
img,
button,
.fa-solid {
    display: block;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}



.res {
    width: 100%;
    max-width: 700px;
}

.clip {
    clip-path: circle();
}

/* Tipografia */
h1,
h2,
h3,
h5,
h6 {
    font-family: 'Raleway', sans-serif;
    color: var(--dark);
}

header {
    background: var(--primary);
    color: var(--light);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 90px;
    overflow: hidden;
    font-family: 'Raleway', sans-serif;
    transition: 0.5s cubic-bezier(0, .37, .46, .98);
}

/* menu */
.nav-toggle-btn .fa-solid {
    /* font-size: 35px; */
    font-size: 10vw;
    margin-top: 2px;
    color: var(--light);

}

.nav-toggle-btn.active .open,
.nav-toggle-btn .close {
    display: none;
}

.nav-toggle-btn .open,
.nav-toggle-btn.active .close {
    display: block;
    justify-content: center;
}

h1 {
    font-size: 75px;
}

/* -------------------------------------------------------------------------------- */
/* ! COVER */
/* -------------------------------------------------------------------------------- */

.cover__menu {
    width: 100%;
    height: 90%;
    order: 3;
    visibility: hidden;
    background: rgb(50, 50, 50);
}

.cover__menu a {
    font-size: 25px;
    color: var(--light);
}

.active .cover__menu {
    visibility: visible;
}

header h1 {
    color: var(--light);
}

.carosello__due {
    background-image: no-repeat;
}

/* Hero */

.hero {
    background: transparent;
}

.paolaspace {
    background: url(https://www.memofonte.it/files/2018/01/PaolaBarocchi.jpg);
    text-align: center;
    align-items: flex-end;
    aspect-ratio: 1/1;
}

.spes {
    background: url(https://www.memofonte.it/files/immagini/spes.jpg);
    text-align: center;
    align-items: flex-end;
}

.hero__text h1 {
    font-size: 35pt;
    margin-top: 30px;
}


/* ? Tabbar  */

.tabbar {
    height: 100px;
    width: 100%;
    position: relative;
    /*lo posizione in maniera relativa in modo da poter gestire all interno ulteriori elementi con posizionamento assoluto*/
    background: var(--primary);
}

.tabbar__menu {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 98px;
    background: var(--accente);
    padding-top: 15px;
}

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

.tabbar a {
    font-size: 3em;
    color: var(--light);
    border-radius: 100%;
    background: var(--accente);
    padding: 15px;
}

.tabbar a:is(:hover, :focus) {
    font-size: 4em;
    transform: translateY(-20px);
    transition: 0.6s cubic-bezier(0, .68, .46, .98);
}

/* -------------------------------------------------------------------------------- */
/* ! MEDIA QUERY ON */
/* -------------------------------------------------------------------------------- */

/* media query large */

@media (min-width: 767px) {

    header {
        height: 90px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .tendina i {
        padding-top: 5px;
    }

    .mfno {
        display: none;
    }

    .titlee {
        position: relative;
        color: #ffffff;
        font-size: 700%;
        padding: 170px 0;
        text-align: center;
        font-family: 'Cormorant Garamond', serif;
        font-weight: 400;
        z-index: 3;
    }

    /* .ricerche__pers {
        height: 85%;
    } */

    .personaggi {
        position: relative;
        width: 100%;
        transform: scale(90%);
    }

    .personaggi p {
        font-size: 2.5vw;

    }

}

@media (min-width: 1250px) {

    .riviste__text {
        max-width: 33%;
    }
}

@media (max-width: 1250px) {

    .mfintro {
        display: none;
    }

    .riviste__text {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .riviste__uno,
    .riviste__due {
        margin-top: 50px;
    }
}

/* Media query Large */

@media (min-width: 992px) {

    .fonda__fondo {
        position: relative;
        /* height: 400px; */
        height: 28vw;
        width: 25%;
        margin: 10px;
        background: var(--primary);
        border-radius: 0 0 15px 15px;
    }

    .hero__text {
        gap: 5em;
    }

    .ricerche {
        /* height: 550px; */
        height: 100%;
        margin-top: 80px;
    }

    .ricerche__link {
        font-size: 2vw;
    }

    .insta-btn {
        width: 20vw;
    }
}

@media (max-width: 992px) {

    .hero__text {
        margin-top: 20px;
        gap: 1em;
    }

    .hero__text a {
        transform: scale(90%);
    }

    .hero__text h1 {
        margin-top: 10px;
    }

    .hero__line {
        display: none;
    }

    .ricerche {
        margin-top: 30px;
    }

    .personaggi p {
        display: none;
    }

    .ricerche__link {
        font-size: 5vw;
        padding: 15px 20px;
    }

    .insta-btn {
        width: 80vw;
    }


}



/* media query medium e large */
@media (min-width: 444px) {

    .cover,
    .cover.active {
        height: 50px;
        align-items: center;
        justify-content: center;
    }

    .cover__menu {
        all: unset;
    }

    /* questa parte serve a capire che certe parti stanno in MQ medium e certi in short */
    .mainmenu li {

        /* padding-inline: 10px; */
        padding-inline: 1vw;
    }

    .mainmenu {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4%;
    }

    .mainmenu a {
        display: flex;
        gap: 15px;
    }

    .tendina:is(:hover) {
        opacity: 50%;
    }

    .rice:is(:hover, :focus) {
        opacity: 50%;
    }

    .dida:is(:hover, :focus) {
        opacity: 50%;
    }

    .noti:is(:hover, :focus) {
        opacity: 50%;
    }

    .contat:is(:hover, :focus) {
        opacity: 50%;
    }

    .cover__hamburger {
        display: none
    }

    .cover__titolo {
        display: none;
    }

    .photos {
        position: relative;
        /* height: 450px; */
        height: 60vw;
    }

    .fonda__uno,
    .fonda__due,
    .fonda__tre,
    .fonda__quattro {
        margin-top: 10px;
    }

    .carosello__due {
        height: 100%;
        /* opacity: 0.5; */
        background-position-x: -450px;
        background-position-y: 940px;
        position: relative;
    }

    .carosello__due::before {
        content: '';
        width: 100%;
        height: 100%;
        background: rgb(0, 0, 0);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.5;
        z-index: 2;
    }

    .he {
        height: 1200px;
        margin-top: 250px;
    }

    .hero {
        display: block;
        flex-direction: row;
    }

    .hero__text {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
        margin-top: 90px;
        background: url();
    }

    .hero__paola {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero__line {
        width: 2px;
        height: 800;
        background: #737373;

    }

    .hero__spes {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .paolaspace {
        background-size: 200%;
        background-position: center;
        min-width: 350px;
        min-height: 350px;
        width: 30vw;
        height: 30vw;
        margin-top: 80px;
    }

    .spes {
        background-size: 150%;
        background-position: center;
        min-width: 350px;
        min-height: 350px;
        width: 30vw;
        height: 30vw;
        margin-top: 80px;
    }

    .paolano,
    .spesano {
        display: none;
    }

    .mflogo img {
        margin: 5px auto;
        width: 20%;
        min-width: 250px;
        height: auto;
    }

    .hero__cover p {
        width: 60%;
        font-size: 17.5px;
    }

    /* !PERSONAGGIONI */

    .ricerche {
        /* height: 570px; */
        height: 100%;
    }

    .ricerche__pers {
        width: 100%;
        padding-top: 10px;
    }

    .personaggi {
        width: auto;
        display: flex;
        margin-top: 20px;
    }

    .per {
        /* width: 100%; */
        width: 100%;
        height: 100%;
        background-size: 100%;
        background-position-x: 20px;
        filter: grayscale(30%);
    }

    .ricerche__image {
        position: relative;
        width: 25%;
        height: 28vw;
    }

    .image-content1,
    .image-content2,
    .image-content3,
    .image-content4 {
        width: 100%;
        height: 100%;
        top: 0;
        position: absolute;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
        opacity: 0;
        transition: 0.6s;
    }


    .image-content1:hover,
    .image-content2:hover,
    .image-content3:hover,
    .image-content4:hover {
        opacity: 1;
    }

    .ricerche__image h2 {
        font-size: 30px;
        color: var(--light);
        bottom: 0;
        width: 90%;
    }

    .persu>* {
        transform: translateY(-50px);
        transition: transform 0.6s;
    }

    .persu:hover>* {
        transform: translateY(0px);
    }

    .carousel-wrapper {
        display: none;
    }

    .ricerche__btn {
        padding-bottom: 30px;
    }

    /* RIVISTE */

    .riviste {
        margin-top: 100px;
        margin-bottom: 100px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .riviste__text p {
        font-size: 16px;
    }

    .riviste__uno img,
    .riviste__due img {
        max-width: 350px;
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5);
    }

    .linkmail {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .utility {
        display: flex;
        justify-content: center;
        gap: 20px;
        padding-top: 40px;
    }


}

/* Media query Medium in giù */

@media (max-width: 767px) {

    .mainmenu a {
        /* font-size: 15pt; */
        font-size: 3vw;
    }

    .memono {
        display: none;
    }

    .mfphoto img {
        position: relative;
        width: 60%;
        filter: invert(1);
        margin-left: auto;
        margin-right: auto;
        z-index: 3;

    }

    .mflogo img {
        display: none;
    }

    /* .he {
        height: 1800px;
    } */

    .hero__text {
        display: block;
    }

    .fonda__tend.active h3 {
        position: relative;
        font-size: 20pt;
        color: #fff;
        width: 100%;
        text-align: center;
        z-index: 2;
    }

    /* !personaggi */

    .ricerche {
        position: relative;
        margin-top: 100px;
    }

    .ricerche__pers {
        width: 100%;
        position: relative;
        background: rgb(50, 50, 50);
    }

    .ricerche__btn {
        position: relative;
        /* margin-top: 20px; */
    }

    .personaggi {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding-top: 20px;
    }
}

/* solo medium */

@media screen and (min-width: 767px) and (max-width: 992px) {

    .paolaspace {
        margin-top: 10px;
    }

    .spes {
        margin-top: 10px;
    }
}

@media screen and (min-width: 444px) and (max-width: 767px) {
    .he {
        /* height: 1500px; */
        height: 100%;
    }

    .hero__text {
        margin-top: 0px;
    }

    .ricerche {
        /* height: 750px; */
        height: 100%;
    }

    .ricerche__btn {
        padding-top: 30px;
    }
}

@media screen and (min-width: 444px) and (max-width: 992px) {

    .fonda__tend.active {
        display: contents;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        height: 50px;
    }

    .fonda__fondo {
        position: relative;
        /* height: 400px; */
        height: 26vw;
        width: 45%;
        margin: 10px;
        background: var(--primary);
        border-radius: 0 0 15px 15px;
    }

    .personaggi {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5vw;
        padding-top: 20px;
    }

    .ricerche__image {
        width: 40%;
        height: 100%;
    }

    /* .image-content1 {
        width: 40%;
        height: 100%;
    } */

    /* .personaggi a {
        width: 40%;
        height: 45vw;
        background-size: 100%;
        filter: grayscale(80%);
    } */

    .persu h2 {
        font-size: 4vw;
    }
}

/* Media query Small */

@media (max-width: 444px) {

    .cover {
        width: 100%;
        /* height: 40px; */
        height: 20vw;
        z-index: 4;
        position: fixed;
    }

    .mainmenu {
        margin-top: 50px;
        /* display: flex;
        flex-direction: column;
        align-items: center; */
    }

    .mainmenu li {
        padding: 20px;
    }

    .fa-caret-down {
        float: right;
    }

    .mainmenu a {
        font-size: 20pt;
    }

    /* tendina small */

    .tend-small.active {
        position: absolute;
        display: block;
        background: #737373;
        /* height: 400px; */
        height: 70vh;
        margin-top: 10px;
        margin-right: 20px;
        border-radius: 15px;
        z-index: 4;
        width: 90%;
    }

    .smalto {
        margin: 15px;
    }

    .tend-small.active h3 {
        top: 10px;
        left: 10px;
        position: relative;
        /* font-size: 20px; */
        font-size: 5vw;
        color: var(--light);
        z-index: 4;
    }

    .tend-small.active p {
        top: 10px;
        left: 10px;
        position: relative;
        /* font-size: 17px; */
        font-size: 4.5vw;
        z-index: 4;
        width: 210px;
    }

    .smally {
        position: relative;
        /* height: 85px; */
        height: 15vh;
        margin-top: 10px;
        background: var(--primary);
        border-radius: 15px;
    }

    .smally a {
        width: 100%;
        height: 100%;
        background-size: 100%;
    }

    .smally a::before {
        content: '';
        width: 100%;
        height: 100%;
        background: var(--primary);
        position: absolute;
        opacity: 0.7;
        z-index: 1;
    }


    /* fine tendina */

    .cover.active {
        height: 100vh;
        width: 100%;
        position: fixed;
        z-index: 4;
    }

    .cover__menu {
        margin-top: 5vw;
    }

    .cover__titolo {
        /* font-size: 25pt; */
        font-size: 10vw;
        margin-left: 20px;
        margin-top: 5vw;
    }

    .titolo {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 400;
    }

    .cover__hamburger {
        position: absolute;
        right: 20px;
        margin-top: 5vw;
    }

    .fonda {
        display: none;
    }

    .fondazione {
        width: 170px;
    }

    .tendina i {
        margin-top: 5px;
    }

    /* carosello */

    .photos {
        position: relative;
        height: 100vw;
        margin-top: 20vw;
    }

    .carosello__due {
        position: absolute;
        height: 100vw;
        width: 100%;
        background-position: center;
        background-position-x: -500px;
        background-size: 300%;
        background-repeat: no-repeat;
    }

    .carosello__due::before {
        content: '';
        width: 100%;
        height: 100%;
        background: rgb(0, 0, 0);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.5;
        z-index: 2;
    }

    .mfno {}

    .mfphoto img {
        margin-top: 20px;
        width: 80%;
    }

    /* hero SMALL*/

    .he {
        position: relative;
    }

    .hero {}

    .hero h1 {
        display: none;
    }

    .hero__cover {
        margin-top: 250px;
    }

    .hero__cover p {
        width: 80%;
        font-size: 12px;
    }

    /* paola SMALL*/

    .hero__text {
        margin-top: 50px;
    }

    .paolaspace,
    .spes {
        position: relative;
        background-position: center;
        width: 90%;
        /* height: 300px; */
        height: 100vw;
        background-repeat: no-repeat;
        margin-left: auto;
        margin-right: auto;
    }

    .paolaspace {
        background-size: cover;
    }

    .spes {
        background-size: cover;
        margin-top: 20px;
    }

    .paolano,
    .spesano {
        font-size: 30pt;
        color: #fff;
        padding-top: 10px;
    }

    /* !personaggini */

    .ricerche {
        position: relative;
        height: 500px;
        margin-top: 30px;
        align-items: center;
    }

    .ricerche__pers {
        background: rgb(50, 50, 50);
        width: 100%;
        position: relative;
        justify-content: center;
        padding-top: 20px;
    }

    .ricerche__btn {
        /* position: absolute; */
        bottom: 0;
        /* margin-bottom: 30px; */
        padding-bottom: 30px;
    }

    .personaggi {
        /* display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px; */
        display: none;
    }

    .personaggi a {
        width: 40%;
        /* height: 170px; */
        height: 40vw;
        background-size: 100%;
        filter: grayscale(80%);
    }

    /* !SLIDER */

    /* !altro test */

    .carousel-wrapper {
        height: 400px;
        position: relative;
        width: 100%;
        display: block;
        margin: 30px auto;
        border: 0px solid black;
        /* padding-top: 30px; */
        transform: scale(90%);
    }

    .carousel-item {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 25px 50px;
        opacity: 0;
        transition: all 0.5s ease-in-out;
    }

    .arrow {
        border: solid white;
        border-width: 0 5px 5px 0;
        display: inline-block;
        padding: 12px;
    }

    .arrow-prev {
        left: 30px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotate(135deg);

    }

    .arrow-next {
        right: 30px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
    }

    [id^="item"] {
        display: none;
    }

    .item-1 {
        z-index: 2;
        opacity: 1;
        background: url(https://www.memofonte.it/files/2017/12/michelangelo-259x300.jpg) no-repeat;
        background-size: cover;
        background-position: center;
    }

    .item-2 {
        background: url(https://www.memofonte.it/files/2017/12/Vasari-259x300.jpg) no-repeat;
        background-size: cover;
        background-position: center;
    }

    .item-3 {
        background: url(https://www.memofonte.it/files/2017/12/Baldinucci-259x300.jpg) no-repeat;
        background-size: cover;
        background-position: center;
    }

    .item-4 {
        background: url(https://www.memofonte.it/files/2017/12/Lanzi-259x300.jpg) no-repeat;
        background-size: cover;
        background-position: center;
    }

    *:target~.item-1 {
        opacity: 0;
    }

    #item-1:target~.item-1 {
        opacity: 1;

    }

    #item-2:target~.item-2,
    #item-3:target~.item-3,
    #item-4:target~.item-4 {
        z-index: 3;
        opacity: 1;
    }

    .linkpers {
        position: absolute;
        right: 20px;
        bottom: 5%;

        background: var(--primary);
        /* border: solid black;
        border-width: 3px 3px 3px 3px; */
        display: inline-block;
        width: 80%;
        /* height: 9vh; */
        border-radius: 10px;

        color: var(--light);
        font-family: 'Raleway', sans-serif;
        font-size: 6vw;
        text-align: center;
        padding: 10px;

    }

    .vasariwrap {
        word-wrap: break-word;
    }


    /* riviste */

    .riviste {
        margin-top: 10px;
        margin-bottom: 10px;
        margin: 30px;
    }

    .riviste__text p {
        font-size: 12px;
    }

    .riviste__uno,
    .riviste__due {
        margin-top: 50px;
    }

    .riviste__uno img,
    .riviste__due img {
        /* max-width: 200px; */
        width: 100%;
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5);
    }

    .utility {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        gap: 10px;
        color: rgb(220, 215, 214);
    }

}

/* -------------------------------------------------------------------------------- */
/* ! MEDIA QUERY OFF */
/* -------------------------------------------------------------------------------- */

.tend-small {
    display: none;
}


/* ! Aggiunte mie */

.leading {
    margin-top: 20px;
}

.mainmenu i {
    font-size: 20px;
}

/* display a tendina */

.fonda.active {
    width: 100%;
    height: 0%;
    position: absolute;
    background: #f1f1f1;
    z-index: 4;
}

.fonda__tend {
    display: none;
}

.fonda__tend.active {
    display: contents;
    display: flex;
    width: 100%;
    height: 50px;
}

.fonda__tend.active a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-position: center;
    height: 19vw;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    filter: grayscale(50%);
}

.fonda__tend.active a::before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    position: absolute;
    opacity: 0.7;
    z-index: 1;
}

.fonda__tend.active a:is(:hover, :focus) {
    filter: grayscale(0%);
    background: var(--primary);
}

.fonda__tend.active h3 {
    position: relative;
    font-size: 2.3vw;
    color: #fff;
    width: 100%;
    text-align: center;
    z-index: 2;
}

.fonda__tend.active p {
    position: relative;
    font-size: 1.7vw;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 20px;
    color: #fff;
    z-index: 2;
}

.fonda__uno {
    background: url(https://www.memofonte.it/files/2022/06/menu-memofonte.jpeg) no-repeat center center;
}

.fonda__due {
    background: url(https://www.memofonte.it/files/2018/01/menu-paola-barocchi.jpg) no-repeat center center;
}

.fonda__tre {
    background: url(https://www.memofonte.it/files/2018/01/menu-archivi.jpg) no-repeat center center;
}

.fonda__quattro {
    background: url(https://www.memofonte.it/files/2018/01/menu-spes.jpg) no-repeat center center;
}









/* h2 {
    margin-left: 30px;
} */

p {
    font-family: 'Cormorant Garamond', serif;
}

footer {
    background: rgb(37, 37, 37);
    height: 100px;
    position: absolute;
    width: 100%;
}


.icon {
    display: flex;
}

/* .photos {
    height: 400px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.landscape {
    position: absolute;
    top: 0;
    left: 0;
}

.carosello {
    position: relative;
    overflow: hidden;
}

.carosello__uno {
    height: 350px;
    background: url('https://www.memofonte.it/files/slideshow-home/slideshow-04-arno.jpg');
    background-position: center;
} */

.mfintro {
    position: relative;
    text-align: center;
    z-index: 5;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 13vw;
}

.mfintro p {
    color: #fff;
    font-size: 2vw;
    /* background: rgba(0, 0, 0, 0.6); */
    background: var(--primary);
    padding: 20px;
    border-radius: 15px;

}

.time {
    width: 100%;
    /* margin-top: 150px; */
}

.timeless {
    position: relative;
}

/* .timeline {
    height: 40px;
    background: #fafafa;
}

.timecolor {
    height: 40px;
    background: #f1f1f1;
} */

.timetest {
    background: linear-gradient(to top, #f1f1f1 0%, #f1f1f1 50%, #fafafa 50%, #fafafa 100%), linear-gradient(to top, #f1f1f1 0%, #f1f1f1 50%, #fafafa 50%, #fafafa 100%);
    background-size: 100% 50%;
    background-position: center top, center bottom;
    background-repeat: no-repeat;
    height: 160px;
    position: absolute;
    width: 100%;
}

.timebox {

    background-color: #e5e5e5;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    width: 150px;
    overflow: hidden;
    z-index: 2;
    box-sizing: border-box;
    border: 2px solid #d9d9d9;
    box-shadow: 1px 1px 1px #dddddd;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
}

.timebox:is(:hover, :focus) {

    background-color: #e5e5e5;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    width: 150px;
    overflow: hidden;
    z-index: 2;
    box-sizing: border-box;
    border: 2px solid #737373;
    box-shadow: 1px 1px 1px #dddddd;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
}

.box {
    position: relative;
    overflow: hidden;
    height: 100%;
    z-index: 3;
    padding: 10px;
}

.margin {
    float: left;
    max-width: 30px;
    max-height: 30px;
    overflow: hidden;
    margin-right: 5px;
    height: 100%;
}

.margi {
    font-size: 22pt;
    font-family: 'tl-icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.scritta {
    overflow: hidden;
    position: relative;
}

.scritta a {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 20pt;
    line-height: 20px;
    height: 100%;
    overflow: hidden;
    font-weight: normal;
    margin: 0;
    color: #767676;
    position: relative;
}

.line {
    height: 77px;
    border-left: 2px solid #d9d9d9;
    background-color: transparent;
    width: 150px;
    overflow: hidden;
    z-index: 2;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.segments {
    display: flex;
}

.segments div {
    height: 12px;
    border-left: 2px solid #d9d9d9;
    border-top: 2px solid #d9d9d9;
    background-color: transparent;
    width: 150px;
    overflow: hidden;
    z-index: 2;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

/* !Paola */

.paolaspace:is(:hover, :focus) {
    opacity: 80%;
    /* filter: rgba(201, 0, 0, 0.19); */

}

.spes:is(:hover, :focus) {
    opacity: 80%;
}

.mflogo img {}

.hero__cover p {
    margin-left: auto;
    margin-right: auto;
    font-family: 'Libre Baskerville', serif;
}

.pdue {
    margin-top: 30px;
}

/* !Personaggioni */

.ricerche {
    /* background: rgb(50, 50, 50); */
}

.ricerche__pers {
    background: rgb(50, 50, 50);
}

.personaggi {}

.personaggi a {}

.personaggi a:is(:hover, :focus) {
    filter: grayscale(35%);
}

.buonarroti {
    background: url(https://www.memofonte.it/files/2017/12/michelangelo-259x300.jpg);
}

.vasari {
    background: url(https://www.memofonte.it/files/2017/12/Vasari-259x300.jpg) no-repeat;
}

.baldinucci {
    background: url(https://www.memofonte.it/files/2017/12/Baldinucci-259x300.jpg) no-repeat;
}

.lanzi {
    background: url(https://www.memofonte.it/files/2017/12/Lanzi-259x300.jpg) no-repeat;
}

/* .micky {
    position: relative;
    transform: translateY(100%) translateY(-100px) translateZ(0);
    transition: transform 0.7 ease-out;
}

.micky:before {
    position: absolute;
    content: ' ';
    overflow: hidden;
    transform: translateY(-100%) translateY(100px) translateZ(0);
    transition: transform 0.7 ease-out;
}

.zzz:hover .micky {
    transform: translateY(0) translateZ(0);
} */

.personaggi p {
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    color: var(--light);
    width: 100%;
    margin-top: 30px;
    z-index: 3;
    visibility: hidden;
    text-align: center;
}


.ricerche__btn {
    width: 100%;
    display: flex;
    justify-content: center;
    /* padding: 30px; */
}

.ricerche__link {
    color: var(--light);
    font-family: 'Raleway', sans-serif;
    /* font-size: 22px; */
    padding: 15px 20px;
    border-radius: 6px;
    background: var(--primary);
    border: 3px solid var(--primary);
}

.ricerche__link:is(:hover, :focus) {
    background: transparent;
    border: 3px solid var(--primary);
}

/* !fine prove */

/* !Riviste */

.riviste {}

.riviste__text p {
    font-family: 'Libre Baskerville', serif;
    margin-top: 30px;
    max-width: 100%;
}

.riviste__linko {
    position: relative;
    width: 100%;
}

.riviste__uno img:is(:hover, :focus) {
    opacity: 60%;
}

.riviste__due img:is(:hover, :focus) {
    opacity: 60%;
}

/* !INSTAGRAM SECTION */

.instagram {
    position: absolute;
    width: 100%;
}

.instasection {
    width: 100%;
    float: left;
    line-height: 0;
    box-sizing: border-box;
}

.immages {
    width: 100%;
    display: inline-block;
    display: flex;
    float: left;
    vertical-align: top;
    zoom: 1;
    padding: inherit !important;
    margin: 0 !important;
    text-decoration: none;
    opacity: 1;
    overflow: hidden;
    box-sizing: border-box;
    transition: all .5s ease;
}

.immages__uno {
    position: relative;
}

.bottone {
    position: absolute;
    width: 100%;
    height: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.insta-btn {
    position: absolute;
    background: var(--primary);
    /* width: 300px; */
    height: 100px;
    border-radius: 15px;
    color: var(--light);
    border: 3px solid var(--primary);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.insta-btn:is(:hover, :focus) {
    background: rgb(51, 51, 51, 0.9);
    color: var(--light);
    border: 3px solid var(--primary);
}

.insta-btn a {
    /* margin-left: auto;
    margin-right: auto;
    margin-top: 50px; */
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    color: #fff;
    display: contents;
}

.immages a {
    height: 190px;
    width: 190px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 1;
}

.immages__uno a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/329657073_595441408607774_9007565015204003349_n.webplow.jpg");
}

.immages__uno {
    display: inline-block;
    float: left;
    vertical-align: top;
    zoom: 1;
    padding: inherit !important;
    margin: 0 !important;
    text-decoration: none;
    opacity: 1;
    overflow: hidden;
    transition: all .5s ease;
}

.immages__due a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/329246375_741935283918528_2593527518601915259_n.webplow.jpg");
}

.immages__tre a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/328698491_845618646535225_1485834216396412546_n.webplow.jpg");
}

.immages__quattro a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/328484908_515187600794648_1363365721695475425_n.webplow.jpg");
}

.immages__cinque a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/327985790_192550116785227_3294023505559628538_n.webplow.jpg");
}

.immages__sei a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/320932898_1884333405243393_3946020975073314411_n.webplow.jpg");
}

.immages__sette a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/319501617_445749934436326_7581609137563198075_n.webplow.jpg");
}

.immages__otto a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/319558361_175900238377461_6257229927824689064_n.webplow.jpg");
}

.immages__nove a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/317567257_3013909288908900_4752226099265341879_n.webplow.jpg");
}

.immages__dieci a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/315437547_857725145668943_763755667348138704_n.webplow.jpg");
}

.immages__undici a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/315502028_665744071803147_5379712626761318016_n.webplow.jpg");
}

.immages__dodici a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/311868990_1249521749183245_6167836498350343446_n.webplow.jpg");
}

.immages__tredici a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/310875701_425914239721985_2773171074197368918_n.webplow.jpg");
}

.immages__quattordici a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/309321571_807200713757486_3159406478592367061_n.webplow.jpg");
}

.immages__quindici a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/310875701_425914239721985_2773171074197368918_n.webplow.jpg");
}

.immages__sedici a {
    background-image: url("https://www.memofonte.it/files/sb-instagram-feed-images/308704755_1247402029446468_5015410373498074366_n.webplow.jpg");
}


/* !Sotto le foto Insta */

.wrapper {
    background: rgb(51, 51, 51);
    text-align: center;
    color: rgb(220, 215, 214);
    font-family: 'Cormorant Garamond', serif;
    display: block;
}

.conta {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;

}

.vilain {
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
    width: 100%;
    min-height: 1px;

}

.back {
    max-width: 1140px;
    display: block;
    justify-content: left;
    margin: 30px;
    gap: 40px;
}

.back p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 12pt;
    text-align: justify;
    text-justify: inter-word;
    color: rgb(220, 215, 214);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.back a {
    font-family: 'Cormorant Garamond', serif;
    font-size: 12pt;
    color: rgb(220, 215, 214);
    text-decoration: underline;
}


.utility {
    color: rgb(220, 215, 214);
}

.utility a {
    color: rgb(220, 215, 214);
    text-decoration: underline;
}