/*
Rosso: #CA2A26
Nero: #090409
Oro: #CAAA61
Bianco: #EAEEF9
*/

/*font LogikWide*/
@font-face {
  font-family: 'LogikWide';
  src: url('../fonts/logik-wide/Logik-Wide.woff2') format('woff2'),
       url('../fonts/logik-wide/Logik-Wide.woff') format('woff'),
       url('../fonts/logik-wide/Logik-Wide.ttf') format('truetype');
}

body{
    font-family: 'LogikWide';
    background-color: #090409;
    color:#EAEEF9;
    margin: 0;
    
}

a{
    color:#EAEEF9;
    display: block;
    margin-top:1px;
    
}

/*BarraSuperiore*/
#BarraSuperiore{
    display:flex;
    width: 100%;
    /* height: 10vh; */
    height: 120px;
    position: fixed;/*ferma nello schermo*/
    top: 20px;
    left:0;
    background-color: black;
    align-items: center;
    user-select: none;
    z-index:1000;
    
    
}

#SpazioBarraSuperiore{
    position:static;
    width: 100%;
    height: 160px;
    
}

/*righe di decorazione*/
.riga{
    display:flex;
    width: 100%;
    height: 10px;
    
}
#rigaRossa{
    background-color: #CA2A26;
    top:0px;
    left:0;
    position:fixed;
}

#rigaOro{
    background-color: #CAAA61;
    top:10px;
    left:0;
    position:fixed;
}

#rigaRossa2{
    background-color: #CA2A26;
    top:140px;
    left:0;
    position:fixed;
}

#rigaOro2{
    background-color: #CAAA61;
    top:150px;
    left:0;
    position:fixed;
}


/*Immagine*/
#logoBarraSuperiore{
    display:inline;
    height:110px; 
    margin-left: 3vw;
    
}

/*se si va sopra con il cursore, cambia il cursore e l'immagine*/
#logoBarraSuperiore:hover{
    content: url(../immagini/logo/Completo_Oro.png);
    cursor:pointer;
    
}

/*click per aprire il menu su telefono*/
#Menu{
    display:none;
}
/*scritte per cambiare pagina sulla barra superioer*/
.elementiBarraSuperiore,#Menu{
    /* font-size:25px; */
    font-size:1.30vw;
    font-family: 'LogikWide';
    color: #EAEEF9;
    font-weight: bold;
    margin-left:2vw;
    
    /* overflow: hidden; */
    word-wrap: break-word; 
    overflow-wrap: break-word;
    
}

/*se si va sopra con il cursore, cambia il cursore e il colore della scritta*/
.elementiBarraSuperiore:hover, #Menu:hover, .elementiPannello:hover{
    cursor: pointer;
    color:#CAAA61;
    
}

/*contenitori elementiBarraSuperiore*/
#linkPagine{
    display:flex;
    margin-left: 4vw;
}

/*Link dei social*/
#socialLink{
    display:flex;
    height: 40px;
    align-items: center;   /* verticale */
    margin-left:1vw;

}

.social, .socialPannello{
    height:40px;
    margin-left: 5px;
    
}

#instagramLogo{
    content: url(../immagini/instaLogo.png);
}

#tiktokLogo{
    content: url(../immagini/tiktokLogo.png);
}

#emailLogo{
    content: url(../immagini/emailLogo.png);
}

#instagramLogo:hover{
    content: url(../immagini/instaLogoOro.png);
    cursor:pointer;
} 
#tiktokLogo:hover{
    
    content: url(../immagini/tiktokLogoOro.png);
    cursor:pointer;
    
}

#emailLogo:hover{
    content: url(../immagini/emailLogoOro.png);
    cursor:pointer;
}

 .lingua{
    height:40px;
    margin-left: 1vw;
    cursor: pointer
 }




/*pannello quando la larghezza della pagina è ridotta*/
#pannello{
    display: none; 
    flex-direction: column;              
    position: fixed;              
    top: 160px;
    left: 0;
    width: 100%;
    height: 100%;
    background: #444444; 
    color: white;
    align-items: center;      /* CENTRO ORIZZONTALE */
    justify-content: flex-start; /* o center se li vuoi anche verticali */
    user-select: none;
    
    
}



.elementiPannello{
    margin-top: 10px;
    font-size: 20px;
    font-weight: bold;
}

#socialLinkPannello{
    display:flex;
    justify-items: center;
    margin-top:50px;
}





/*Fondo Pagina*/
#fondoPagina{
    left:0;
    bottom: 0;
    background-color: rgb(0, 0, 0);
    width:100%;
    font-size:20px;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    flex-wrap:wrap;
}


#righeFondoPagina{
    margin-top:100px;
}
#rigaRossa3{
    background-color: #CA2A26;
    
    
}

#rigaOro3{
    background-color: #CAAA61;
    
}

.loghiFondoPagina{
    margin-left: 1vw;
    margin-top:30px;
    display: block;
}

.loghiLeone{
    height:80px;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 5vw;
    
}

#logoLoccioni{
    height:100px;
}

#logoScuola{
    height:65px;
}



#contenutoFondoPagina, #policies{
    display:flex;
    background-color: black;
    justify-content: center;
    
    
}

#policies{
    display:flex;
    background-color: black;
    justify-content: center;
    margin-bottom:10px;
}


.linkFondoPagina{
    display:block;
    margin-left: 1vw;
    margin-top:20px;
    margin-left:5vw;
}

/*------------------------------------------------------------------------*/
/*testi e titoli*/

.titolo{
    font-size: 70px;
    font-weight: bold;
    display: flex;
    text-align: center;
    justify-content: center; 
    align-items: center;
    /* justify-items: center;
    align-content: center; */
    min-height:150px;
    width:100%;
    max-width: 100vw;
    word-wrap: break-word;
    overflow-wrap: break-word;
    
    
    
}

.testo, .fraseChiave{
    width: 98%;
    font-size:25px;
    
    padding-top: 10px;
    margin-left: 1%;
    
    /*manda a capo*/
    word-wrap: break-word; 
    overflow-wrap: break-word;
    
    
}

.fraseChiave{
    font-weight: bold;
    text-decoration: underline;
    font-size:35px;
}