/* CTRL+SHIFT+R A BROWSER APERTO PER FARE DEEP RESET*/





/* RIGHE ARANCIONI */

.HR_SEPARATORE_ORIZZONTALE {

    width: 50%;

    text-align: center;

    height: 2px;

    border-width: 0;

    color: #16588E;

    background-color: #16588E;

    margin-top: 4vw;

    margin-bottom: 4vw;

}

.HR_SEPARATORE_ORIZZONTALE_100P {

    height: 4px;

    border-width: 0;

    color: #16588E;

    background-color: #16588E;

}

.vl {

    border-left: 6px solid #16588E;

    height: 100%;

    position: absolute;

    left: 50%;

    margin-top: 0px;

    margin-left: -3px;

}



/* ICONE SOCIAL */

.A_SOCIAL {

    padding: 20px;

    font-size: 40px;

    width: 83px;

    height: 83px;

    text-align: center;

    text-decoration: none;

    border-radius: 50%;

    color: white;

}

.A_CARTE_SKILLS {

    padding: 20px;

    font-size: 50px;

    width: 100px;

    height: 100px;

    text-align: center;

    text-decoration: none;

    border-radius: 50%;

    color: #16588E;

}



/* TESTI GENERICI*/

.H2_IMPEDISCI_ANDARE_A_CAPO {

    white-space: nowrap;

}



/* TITOLI */

.H2_TITOLO_ARANCIONE {

    font-family: 'Red Hat Display'; /*'League Spartan';*/

    font-size: 30px;

    font-weight: bolder;

    text-align: center;

    color: #16588E; /*#ff914d;*/

    margin-top: 1vw;

    margin-bottom: 1vw;

}

.H2_TITOLO_BIANCO {

    font-family: 'Red Hat Display'; /*'League Spartan';*/

    font-size: 30px;

    font-weight: bolder;

    text-align: center;

    color: #81C4Ff; /*#d9d9d9;*/

    margin-top: 1vw;

    margin-bottom: 1vw;

}

.H2_TITOLO_NERO {

    font-family: 'Red Hat Display'; /*'League Spartan';*/

    font-size: 30px;

    font-weight: bolder;

    text-align: center;

    color: #000000;

    margin-top: 1vw;

    margin-bottom: 1vw;

}



/* CONTENUTO */

.H2_CONTENUTO_ARANCIONE {

    font-family: 'Red Hat Display'; /*'League Spartan';*/

    font-size: 22px;

    font-weight: bolder;

    text-align: center;

    color: #16588E;

    margin-top: 1vw;

    margin-bottom: 1vw;

}

.H2_CONTENUTO_BIANCO {

    font-family: 'Red Hat Display'; /*'League Spartan';*/

    font-size: 22px;

    font-weight: bolder;

    text-align: center;

    color: #81C4FF;

    margin-top: 1vw;

    margin-bottom: 1vw;

}

.H2_CONTENUTO_NERO {

    font-family: 'Red Hat Display'; /*'League Spartan';*/

    font-size: 22px;

    font-weight: bolder;

    text-align: center;

    color: #000000;

    margin-top: 1vw;

    margin-bottom: 1vw;

}



/* INTESTAZIONE MASTER */

.MASTER_TOP {

    font-family: 'Red Hat Display'; /*'League Spartan';*/

    font-size: 30px;

    font-weight: bolder;

    text-align: center;

    color: #000000;

    margin-top: 1vw;

    margin-bottom: 1vw;

    background-color: #d9d9d9;

    border: none;

}



/* COLORE SFONDO */

.H2_SFONDO_AZZURRO {

    background-color: #81C4Ff;

}

.H2_SFONDO_BLU {

    background-color: #16588E;

}

.H2_SFONDO_ROSSO {

    background-color: #E7222E;

}

.H2_SFONDO_BIANCO {

    background-color: #81C4FF;

}

.H2_SFONDO_GRIGIO {

    background-color: #D6D6D6;

}

.H2_SFONDO_NERO {

    background-color: #000000;

}

/* COLORE FONT */

.H2_FONT_ARANCIONE {

    color: #16588E;

}



.H2_FONT_BIANCO {

    color: #81C4FF; /*#d9d9d9;*/

}



.H2_FONT_NERO {

    color: #000000;

}



/* PILLOLE ARANCIONI */

.H2_PILLOLE_ARANCIONI {

    position: relative;

    color: #f8f7f7;

    font-family: 'Red Hat Display'; /*'League Spartan';*/

    BACKGROUND-IMAGE: linear-gradient(to right,#16588E,#000000);

    font-size: 22px;

    text-align: center;

    border-radius: 10px;

    margin-top: 0.5VW;

}



/* EFFETTI FADE */





/* EFFETTO ZOOM*/

.ZOOM_10P {transition: transform .2s;}

.ZOOM_10P:hover {transform: scale(1.1);}



.ZOOM_20P {transition: transform .2s;}

.ZOOM_20P:hover {transform: scale(1.3);}







    /* CLASSI PER GRIDVIEW*/



.DGV_COLONNA_NASCOSTA {display: none;}



/* GENERALE PER MARGIN */

.MARGIN_NO {

    margin: 0vw;

}

.MARGIN_TOP_BOTTOM_2_VW {

    margin-top: 2vw;

    margin-bottom: 2vw;

}



/* IMMAGINI */

.IMG_BORDO_VIOLA {

    border:solid 3PX #16588E; 

    border-radius: 50PX; 

    max-width: 400px; 

    display: block; 

    margin-left: auto; 

    margin-right: auto; 

    width: 100%;

}





.separatorEE {

    line-height: 0.5;

    text-align: center;

    margin-top: 4vw;

    margin-bottom: 4vw

}



    .separatorEE span {

        display: inline-block;

        position: relative;

    }



        .separatorEE span:before {

            right: 100%;

            margin-right: 15px;

        }



        .separatorEE span:after {

            left: 100%;

            margin-left: 15px;

        }



        .separatorEE span:before,

        .separatorEE span:after {

            content: "";

            position: absolute;

            border-bottom: 1px solid #16588E;

            top: 5px;

            width: 300px;

        }



    .separatorEE i {

        font-size: 10px;

        padding: 0;

        margin: 0;

        transform: translateY(-3px);

        float: none;

        line-height: 1;

        -webkit-font-smoothing: antialiased;

        color: #16588E;

    }





.separatore_BIANCO {

    line-height: 0.5;

    text-align: center;

    margin-top: 1vw;

    margin-bottom: 1vw

}



    .separatore_BIANCO span {

        display: inline-block;

        position: relative;

    }



        .separatore_BIANCO span:before {

            right: 100%;

            margin-right: 15px;

        }



        .separatore_BIANCO span:after {

            left: 100%;

            margin-left: 15px;

        }



        .separatore_BIANCO span:before,

        .separatore_BIANCO span:after {

            content: "";

            position: absolute;

            border-bottom: 1px solid #81C4FF;

            top: 5px;

            width: 300px;

        }



    .separatore_BIANCO i {

        font-size: 10px;

        padding: 0;

        margin: 0;

        float: none;

        line-height: 1;

        -webkit-font-smoothing: antialiased;

        color: #81C4FF;

    }







/* Dropdown Button */

.dropbtn {

    font-family: 'Red Hat Display'; /*'League Spartan';*/

    background-color: #81C4FF;

    font-size: 30px;

    font-weight: bolder;

    text-align: center;

    color: #16588E;

    margin-top: 1vw;

    margin-bottom: 1vw;

    border: none;

    padding-left:1vw;

    padding-right:1vw;

}



/* The container <div> - needed to position the dropdown content */

.dropdown {

    position: relative;

    display: inline-block;

}



/* Dropdown Content (Hidden by Default) */

.dropdown-content {

    display: none;

    position: absolute;

    background-color: #81C4FF;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px #16588E;

    z-index: 1;

    white-space: nowrap;

    border-radius: 10px;

}



    /* Links inside the dropdown */

    .dropdown-content a {

        color: #16588E;

        padding: 12px 16px;

        text-decoration: none;

        display: block;        

    }



        /* Change color of dropdown links on hover */

        .dropdown-content a:hover {

            color: #81C4FF;

            background-color: #16588E;

            border-radius: 10px;

        }



/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {

    display: block;

}



/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {

    color: #81C4FF;

    background-color: #16588E;

    border-radius:10px;

}



.img-fluid {

    max-width: 100%;

    height: auto;

    margin-left:auto;

    margin-right:auto;

}



/* TAG PER EFFETTO 3D SU HOVER*/

.TAG_HOVER_3D {

    transition: transform 1s;

}

    .TAG_HOVER_3D:hover {

        transform: translateZ(10px) rotateX(20deg) rotateY(20deg);

    }



/* TAGS PER ANIMAZIONE*/

.ANIMAZIONE_ROTAZIONE_360_ALTERNATO {

    animation: KF_RUOTAZIONE_Z_360 7s infinite alternate-reverse;

}

.ANIMAZIONE_RUOTA_PERNO_BASE {

    animation: KF_RUOTA_PERNO_BASE 7s infinite alternate-reverse;

}





.ANIMAZIONE_BATTICUORE {

    animation: KF_BATTICUORE 2s infinite alternate-reverse;

}

.ANIMAZIONE_ONDEGGIA_DA_BASSO_CENTRO {

    animation: KF_ONDEGGIA_DA_BASSO_CENTRO 2s infinite alternate-reverse;

}

.ANIMAZIONE_ONDEGGIA_DA_BASSO_CENTRO_SEMPLICE {

    animation: KF_ONDEGGIA_DA_BASSO_CENTRO_SEMPLICE 2s infinite alternate-reverse;

}



.ANIMAZIONE_RIMBALZA_SUL_BASSO {

    animation: KF_RIMBALZA_SUL_BASSO 2s infinite alternate-reverse;

}

.ANIMAZIONE_RIMBALZA_SUL_BASSO_ENTRANDO_IN_SCENA {    

    animation: KF_RIMBALZA_SUL_BASSO_ENTRANDO_IN_SCENA 2s infinite alternate;

}



.ANIMAZIONE_PULSA {

    animation: KF_PULSA 2s infinite alternate;

}

.ANIMAZIONE_JELLO_ORIZZONTALE {

    animation: KF_JELLO_ORIZZONTALE 2s infinite alternate;

}



.ANIMAZIONE_JELLO_SCALA_IN_DA_BASSO {

    animation: KF_SCALA_IN_DA_BASSO 2s infinite alternate;

}

.ANIMAZIONE_JELLO_SCALA_IN_DA_CENTRO {

    animation: KF_SCALA_IN_DA_CENTRO 2s infinite alternate;

}





.ANIMAZIONE_MOVIMENTI_SX_DX_UP_DW {

    animation: KF_MOVIMENTI_SX_DX_UP_DW 2s infinite alternate;

}

.ANIMAZIONE_MOVIMENTI_SX_DX {

    animation: KF_SX_DX 4s infinite alternate;

}





@keyframes KF_RUOTAZIONE_Z_360 {

    100% {

        transform: rotateZ(360deg);

    }

}



@keyframes KF_BATTICUORE {

    0% {

        animation-timing-function: ease-out;

        transform: scale(1);

        transform-origin: center center;

    }



    10% {

        animation-timing-function: ease-in;

        transform: scale(0.91);

    }



    17% {

        animation-timing-function: ease-out;

        transform: scale(0.98);

    }



    33% {

        animation-timing-function: ease-in;

        transform: scale(0.87);

    }



    45% {

        animation-timing-function: ease-out;

        transform: scale(1);

    }

}



@keyframes KF_ONDEGGIA_DA_BASSO_CENTRO {

    0%, 100% {

        transform: translateX(0%);

        transform-origin: 50% 50%;

    }



    15% {

        transform: translateX(-30px) rotate(-6deg);

    }



    30% {

        transform: translateX(15px) rotate(6deg);

    }



    45% {

        transform: translateX(-15px) rotate(-3.6deg);

    }



    60% {

        transform: translateX(9px) rotate(2.4deg);

    }



    75% {

        transform: translateX(-6px) rotate(-1.2deg);

    }

}



@keyframes KF_ONDEGGIA_DA_BASSO_CENTRO_SEMPLICE {

    0%, 100% {

        transform: rotate(0deg);

        transform-origin: 50% 100%;

    }



    10% {

        transform: rotate(2deg);

    }



    20%, 40%, 60% {

        transform: rotate(-4deg);

    }



    30%, 50%, 70% {

        transform: rotate(4deg);

    }



    80% {

        transform: rotate(-2deg);

    }



    90% {

        transform: rotate(2deg);

    }

}



@keyframes KF_RIMBALZA_SUL_BASSO{

    0% {

        animation-timing-function: ease-in;

        opacity: 1;

        transform: translateY(-45px);

    }



    24% {

        opacity: 1;

    }



    40% {

        animation-timing-function: ease-in;

        transform: translateY(-24px);

    }



    65% {

        animation-timing-function: ease-in;

        transform: translateY(-12px);

    }



    82% {

        animation-timing-function: ease-in;

        transform: translateY(-6px);

    }



    93% {

        animation-timing-function: ease-in;

        transform: translateY(-4px);

    }



    25%, 55%, 75%, 87% {

        animation-timing-function: ease-out;

        transform: translateY(0px);

    }



    100% {

        animation-timing-function: ease-out;

        opacity: 1;

        transform: translateY(0px);

    }

}



@keyframes KF_RIMBALZA_SUL_BASSO_ENTRANDO_IN_SCENA

{

    0% {

        animation-timing-function: ease-in;

        opacity: 0;

        transform: translateY(-250px);

    }



    38% {

        animation-timing-function: ease-out;

        opacity: 1;

        transform: translateY(0);

        transform: rotate(-45deg);

    }



    55% {

        animation-timing-function: ease-in;

        transform: translateY(-65px);

        transform: rotate(-45deg);

    }



    72% {

        animation-timing-function: ease-out;

        transform: translateY(0);

        transform: rotate(-45deg);



    }



    81% {

        animation-timing-function: ease-in;

        transform: translateY(-28px);

    }



    90% {

        animation-timing-function: ease-out;

        transform: translateY(0);

    }



    95% {

        animation-timing-function: ease-in;

        transform: translateY(-8px);

    }



    100% {

        animation-timing-function: ease-out;

        transform: translateY(0);        

    }

}



@keyframes KF_PULSA {

    0% {

        opacity: 1;

        transform: scale(0.2);

    }



    80% {

        opacity: 0.8;

        transform: scale(1.2);

    }



    100% {

        opacity: 1;

        transform: scale(2.2);

    }

}



@keyframes KF_JELLO_ORIZZONTALE {

    0% {

        transform: scale3d(1, 1, 1);

    }



    30% {

        transform: scale3d(1.25, 0.75, 1);

    }



    40% {

        transform: scale3d(0.75, 1.25, 1);

    }



    50% {

        transform: scale3d(1.15, 0.85, 1);

    }



    65% {

        transform: scale3d(0.95, 1.05, 1);

    }



    75% {

        transform: scale3d(1.05, 0.95, 1);

    }



    100% {

        transform: scale3d(1, 1, 1);

    }

}



@keyframes KF_SCALA_IN_DA_BASSO {

    0% {

        transform: scale(0);

        transform-origin: 50% 100%;

    }



    100% {

        transform: scale(1);

        transform-origin: 50% 100%;

    }

}

@keyframes KF_SCALA_IN_DA_CENTRO {

    0% {

        transform: scale(2);

    }



    100% {

        transform: scale(1);

    }

}



@keyframes KF_MOVIMENTI_SX_DX_UP_DW {

    0% {

        transform: translate(0);

    }



    20% {

        transform: translate(2px, -2px);

    }



    40% {

        transform: translate(2px, 2px);

    }



    60% {

        transform: translate(-2px, 2px);

    }



    80% {

        transform: translate(-2px, -2px);

    }



    100% {

        transform: translate(0);

    }

}



@keyframes KF_RUOTA_PERNO_BASE {

    0% {

        transform: rotate(0);

        transform-origin: bottom;

    }



    100% {

        transform: rotate(360deg);

        transform-origin: bottom;

    }

}

@keyframes KF_SX_DX {

    0%, 100% {

        transform: translateX(0);

    }



    10%, 30%, 50%, 70% {

        transform: translateX(-10px);

    }



    20%, 40%, 60% {

        transform: translateX(10px);

    }



    80% {

        transform: translateX(8px);

    }



    90% {

        transform: translateX(-8px);

    }

}



.IMG_BANDIERINA_ROTONDA {

    vertical-align: central;

    margin-left: 1vw;

    height: 40PX;

    width: 40px;

    border-radius: 50%;

    border: 3px solid #003b6d;

}



.IMG_BANDIERINA_RETTANGOLARE {

    border: 3px solid #003b6d;

    width: 50px;

    height: 30px;

    border-radius: 3px

}



.A_BANDIERINA {

    font-family: 'League Spartan';

    font-size: 22px;

    font-weight: bolder;

    color: #003b6d;

    margin-top: 0vw;

    margin-bottom: 0vw;

    margin-left: 1vw;

    display: block;

    text-align: unset;

}



/* ICONE GOOGLE */

@font-face {

    font-family: 'Material Symbols Rounded';

    font-style: normal;

    font-weight: 400;

    src: url(icone_google_rounded.woff2) format('woff2');

}



.ICONA_GOOGLE_ARROTONDATA {

    font-family: 'Material Symbols Rounded';

    font-weight: 700;

    font-style: normal;

    font-size: 24px;

    line-height: 1;

    letter-spacing: normal;

    text-transform: none;

    display: inline-block;

    white-space: nowrap;

    word-wrap: normal;

    direction: ltr;

    -webkit-font-feature-settings: 'liga';

    -webkit-font-smoothing: antialiased;

}





.BARRA_LATERALE_PICCOLA {

    width: 200px;

    position: fixed;

    z-index: 10;

    top: 25vh;

    left: -74px;

    background: #E7222e;

    padding: 8px 0;

    border-bottom-right-radius: 8px;

    border-bottom-left-radius: 8px;

    transform: rotate(-90deg);

    border: solid 3px #16588e;

}



    .BARRA_LATERALE_PICCOLA a {

        padding: 6px 8px 6px 16px;

        text-decoration: none;

        font-size: 25px;

        color: #16588e;

        display: inline;        

    }