/*FONT FRECCIA*/
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?11b2q9');
    src:  url('../fonts/icomoon.eot?11b2q9#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?11b2q9') format('truetype'),
      url('../fonts/icomoon.woff?11b2q9') format('woff'),
      url('../fonts/icomoon.svg?11b2q9#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/*FONT FRECCIA*/
.icon-arrow_01:before {
    content: "\76";
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/*FONT FRECCIA per safarii*/
@font-face {
    font-family: 'icomoon';
    src:  url('../font/freccia/icomoon.eot')  format('embedded-opentype'),
        url("../font/freccia/icomoon.ttf") format('truetype'),
        url("../font/freccia/icomoon.woff") format('woff'),
        url("../font/freccia/icomoon.svg")format('svg');

}


/*font akzidenz*/
@font-face {
    font-family: "Akzi-bold";
    src: url("../font/Berthold-Akzidenz-Grotesk-Bold.ttf") format("truetype"),
    url("../font/Berthold-Akzidenz-Grotesk-Bold.woff") format("woff");
}
@font-face {
    font-family: "Akzi-medium";
    src: url("../font/Berthold-Akzidenz-Grotesk-Medium.ttf") format("truetype"),
    url("../font/Berthold-Akzidenz-Grotesk-Medium.woff") format("woff");
}
@font-face {
    font-family: "Akzi-regular";
    src: url("../font/Berthold-Akzidenz-Grotesk-Regular.ttf") format("truetype"),
    url("../font/Berthold-Akzidenz-Grotesk-Regular.woff") format("woff");
    
}

/*body no select*/
body{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

}
  
/*spazio menu*/
.box_menu{
    background-color: #F0ECE4;
    height: 85px;
    width: 100%;
}

/*navbar*/
.navbar{
    cursor: default;
}

/*testo bottone*/
a{
    text-decoration: none;
}


/*invert*/
body {
    cursor:none;
}

.mask {
    background: 
      radial-gradient(circle 280px 
                      /*dimensione cerchio*/
                      at var(--x,0) var(--y,0), 
                      #FAF6EE 99%,#0A4BA6 100%) 
                      /*colri inverso e default*/
                      fixed;
    background-clip: text;
    -webkit-background-clip: text;
    color:transparent;
    -webkit-text-fill-color: transparent;
}
/*maschera principale, al hover le cose blu diventano bianche*/


html::before {
    content:"";
    position:fixed;

    width:560px;
    height:560px;
    /*doppio dimensione cerchio*/
    background:#0A4BA6;
    /*colore cerchio*/
    border-radius:50%;
    top:var(--y,0);
    left:var(--x,0);
    transform:translate(-50%,-50%);
    z-index:-2;


}

/*prova non far muovere pallino da solo*/
/*
html::before, .mask, .mask_2, .bottone, html, body{
    left:300px; 
    top:300px;
}
*/
/*prova far muovere pallino da solo*/


/*
:root {
    --y: 500px;
    --x: 500px;

}

.--y, .--x{
    animation: animate 2s linear infinite;
}
*/

/*
:root[--y] {
    animation: animate 2s linear infinite;
}

@keyframes animate {
    0% {
        left:0px; 
        top:0px;
    }

    50% {
        left:100px; 
        top:100px;
    }

    100% {
        left:0px; 
        top:0px;
    }
}
*/


/*io*/

html,body {
    width: 100%;
    height: 100%;

}

body{
    background-color: #FAF6EE !important;
    /*sfondo*/
}

a {
    text-decoration: none !important;
}

/*FONT CAMBIARE*/
.titolo_invert{
    font-family: "Akzi-bold";
    font-size:8.6vw ;

    /*
    height: 16.1vh;
    */

    margin-top: 5%;
}

.titolo_invert_02{
    font-family: "Akzi-bold";
    font-size:8.6vw ;

    margin-top: 5%;

    display: none;
}

/*FONT CAMBIARE*/
.sottotitolo_invert{
    font-family: "Akzi-bold";
    /*font-size: 38px;*/

    margin-top: 5%;
    margin-bottom: 0px;
}

/*FONT CAMBIARE*/
.testo_invert{
    font-family: "Akzi-regular";
    /*font-size: 26px;*/

    margin-top: 5px;
}

.bottone{
    width: 350px;
    height: 65px;
    border-radius: 5px;

    background: 
    radial-gradient(circle 280px 
                    /*dimensione cerchio*/
                    at var(--x,0) var(--y,0), 
                    #FAF6EE 99%,#0A4BA6 100%) 
                    /*colri inverso e default*/
                    fixed;
    /*per far avere uno sfondo blu*/

    color: #FAF6EE;

    /*glow effect
    box-shadow:
    0 0 10px 5px #82ADE9,  
    0 0 0px 0px rgba(255, 0, 255, 0), 
    0 0 0px 0px rgba(0, 255, 255, 0); 
    */

    margin-top: 5%;

    /*
    animation: cuore 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    */
    cursor: pointer;

    animation: shadow-pulse 1s infinite;
}

/*
@keyframes cuore {
    0%  {box-shadow:
            0 0 10px 5px #82ADE9,  
            0 0 0px 0px rgba(255, 0, 255, 0),
            0 0 0px 0px rgba(0, 255, 255, 0); 
        }
    33% {box-shadow:
            0 0 10px 5px #82ade900,  
            0 0 0px 0px rgba(255, 0, 255, 0), 
            0 0 0px 0px rgba(0, 255, 255, 0); 
        }
    66% {box-shadow:
            0 0 10px 5px #82ADE9,  
            0 0 0px 0px rgba(255, 0, 255, 0),
            0 0 0px 0px rgba(0, 255, 255, 0); 
        }
    100% {box-shadow:
            0 0 10px 5px #82ade900, 
            0 0 0px 0px rgba(255, 0, 255, 0),
            0 0 0px 0px rgba(0, 255, 255, 0); 
        }        
  }
*/


@keyframes shadow-pulse
{
  0% {
    /*box-shadow: 0 0 0 0px rgba(130, 173, 233, 0.8);*/     /*nostro blu chiaro*/
    /*box-shadow: 0 0 0 0px rgba(10, 75, 166, 0.4);*/       /*nostro blu scuro*/
    box-shadow: 0 0 0 0px rgba(70, 126, 203, 0.8);         /*via da mezz*/
  }
  100% {
    box-shadow: 0 0 0 20px rgba(130, 173, 233, 0);
  }
}



.bottone_contenuto{
    margin: 5px;
    display: flex;
}

.mask2 {
    color: #FAF6EE ;
    background: 
    radial-gradient(circle 280px 
                    /*dimensione cerchio*/
                    at var(--x,0) var(--y,0), 
                    #0A4BA6 99%,#FAF6EE 100%) 
                    /*colri inverso e default*/
                    fixed;
    background-clip: text;
    -webkit-background-clip: text;
    color:transparent;
    -webkit-text-fill-color: transparent;
    
}
/*maschera inversa, al hover le cose bianche diventano blu, non da blu a bianco come la principale*/
/*utile per testi su bottoni che devono essere inversi per essere visibili*/


/*FONT CAMBIARE*/
.testo_bottone{
    font-family: "Akzi-regular";
    font-size: 29px;
    margin-top: 12px;
    margin-left: 15px;

    flex: 80%;
}

/*FONT CAMBIARE*/
.testo_freccia_bottone{
    font-size: 29px;
    margin-top: 17px;
    text-align: center;

    flex: 20%;
}

/*dare una dimensione alla*/
.sono_una_freccia{
    font-family:icomoon ;
    font-size: 50px;
}

/*stickers*/
.anim750{
    transition: all 550ms ease-in-out;
}
  
#Awesome{
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    
    backface-visibility: hidden;

    zoom: 1.6;
    /*ingrandire*/
}
  
#Awesome .sticky{
      transform: rotate(230deg);
}

#Awesome:hover .sticky{
    transform: rotate(230deg);
}
  
#Awesome .sticky{
    position: absolute;
    top: 0;
    left: 0;
    width:180px;
    height: 180px;
}
  
#Awesome .reveal .circle{
    box-shadow: 0 1px 0px rgba(0,0,0,.15);
    
    font-family: 'helvetica neue', arial;
    font-weight: 200;
    line-height: 140px;
    text-align: center;
    
    cursor: pointer;
}
  
#Awesome .reveal .circle{
    /* background-color: #0A4BA6; */

    background-color: #FAF6EE;

}
  
#Awesome .circle_wrapper{
    position: absolute;
    width: 180px;
    height: 180px;
    left: 0px;
    top: 0px;
    overflow: hidden;
}
  
#Awesome .circle{
    position: absolute;
    width: 140px;
    height:  140px;
    margin: 20px;
      
    border-radius: 999px;
}
  
#Awesome .back{
    height: 10px;
    top: 30px;
}
  
#Awesome:hover .back{
    height: 90px;
    top: 110px;
}
  
#Awesome .back .circle{
    margin-top: -130px;
    background-color: #82ADE9;
  
    background-image: -webkit-linear-gradient(bottom, rgba(107, 146, 252, 0), rgba(255,255,255,.8));
}
  
#Awesome:hover .back .circle{
    margin-top: -50px;
}
  
#Awesome .front{
    height: 150px;
    bottom: 0;
    top: auto;
      
    box-shadow: 0 -140px 20px -140px rgba(0,0,0,.3);
}
  
#Awesome:hover .front{
    height: 70px;
      
    box-shadow: 0 -60px 10px -60px rgba(0,0,0,.1);
}
  
#Awesome .front .circle{
    margin-top: -10px;
    background: #82ADE9;
  
    background-image: -webkit-linear-gradient(bottom, rgba(107, 146, 252, 0) 75%, #3c84e9 95%);
    background-image: -moz-linear-gradient(bottom,  rgba(107, 146, 252, 0) 75%, #3c84e9 95%);
    background-image: linear-gradient(bottom,  rgba(107, 146, 252, 0) 75%, #3c84e9 95%);
}
  
/*
#Awesome h4{
    font-family: 'helvetica neue', arial;
    font-weight: 200;
    text-align: center;
    position: absolute;
    width: 180px;
    height: 140px;
    line-height: 140px;
      
    transition: opacity 50ms linear 400ms;
}
*/
/*font*/
  
#Awesome:hover h4{
    opacity: 0;
      
    transition: opacity 50ms linear 300ms;
}
  
#Awesome:hover .front .circle{
    margin-top: -90px;
    background-color: #82ADE9;
    background-position: 0 100px;
}


/*io bollino*/

/*FONT CAMBIARE*/
.text_bollino{
    color: #FAF6EE;
    font-family: "Akzi-bold";
    font-size: 26px;
    font-weight: bold;
    margin-block-start: 50px; 

    text-align: center;
    position: absolute;
    transition: opacity 50ms linear 400ms;

    transform: rotate(20deg);
}

/*secondo bollino*/
.sticker {
    position: relative;
    width: 230px;
    height: 230px;
    margin: 50px;

    /**/
    margin-top: -10%;

    /*background-color: #707070;*/
    border-radius: 100%;

    cursor: pointer;
}


.example-2 .sticker-img {
    background-color: #82ADE9;
}

.example-2 .sticker-shadow {
    opacity: 0.6;
}

/*FONT CAMBIARE*/
.text_bollino_2{
    color: #FAF6EE;
    font-family: "Akzi-bold";
    font-size: 38px;
    font-weight: bold;
    margin-block-start: 22%; 
    margin-left: -6%;

    text-align: center;
    position: absolute;
    transition: opacity 50ms linear 400ms;

    transform: rotate(20deg);

    z-index: 2;
}

/*FONT CAMBIARE*/
.ar_bollino{
    margin-top: 0px;
    margin-left: -15%
}

/*FONT CAMBIARE*/
.testo_freccia_bollino_2{
    font-size: 35px;
    margin-top: -25%;
    margin-left: 25%;
    text-align: center;

    flex: 20%;


}

/*position bollino*/

.generale{
    position: relative;
    width: 100%;

    /**/
    margin-top: 6%;
}

.position_bollino{
    position: absolute;
    text-align: right;
    right: 0px;
}

/*bollino3*/
.example-1 .sticker-img {
    background-image: url(../img/sticker_02.png);
    height: 100%; 
    /*background-position: center; */
    background-repeat: no-repeat; 
    background-size: cover;
}

/*premi_etichetta*/
.premi_etichetta{
    width:230px ;
    height:230px ;
    /*background-color: pink;*/
    position: absolute;
    border-radius: 50%;
    right: 2%;
    top: -6%;

    z-index: 3;
}


/*video per sostiture tutto*/
/*
.video_invert_si{
    display: none;
}

.video_invert_orizzzonatle{
    display: none;
}
*/

/*html per rifare schermata*/
.html_orizzontale{
    display: none;
}

.html_verticale{
    display: none;
}


/*RESPONSIVE*/
  
/*Schermi Dekstop o Portatili*/
@media screen and (max-width:1689px){  
    /*titolo invert*/
    .titolo_invert{
        font-size:9.2vw ;
    }
}

/*tablet in modalità orizzontale*/
@media screen and (max-width: 1279px){  

    /*cursore, fermo pallino*/
    body {
        cursor:default;
    }
    
    /*invert*/
    /*titolo invert*/
    .titolo_invert{
        font-size:10vw ;
    }

    /*sticker*/
    .sticker {
        zoom: 0.9;
    
    }
    .premi_etichetta{
        scale: 0.9;
    }

    /*mouse pallino*/
    .mask {
        background: 
          radial-gradient(circle 200px 
                          /*dimensione cerchio*/
                          at var(--x,0) var(--y,0), 
                          #FAF6EE 99%,#0A4BA6 100%) 
                          /*colri inverso e default*/
                          fixed;
        background-clip: text;
        -webkit-background-clip: text;
        color:transparent;
        -webkit-text-fill-color: transparent;
    }

    html::before {
        width:400px;
        height:400px;
        /*doppio dimensione cerchio*/

    }

    .mask2 {
        color: #FAF6EE ;
        background: 
        radial-gradient(circle 200px 
                        /*dimensione cerchio*/
                        at var(--x,0) var(--y,0), 
                        #0A4BA6 99%,#FAF6EE 100%) 
                        /*colri inverso e default*/
                        fixed;
        background-clip: text;
        -webkit-background-clip: text;
        color:transparent;
        -webkit-text-fill-color: transparent;
        
    }

    .bottone{    
        background: 
        radial-gradient(circle 200px 
                        /*dimensione cerchio*/
                        at var(--x,0) var(--y,0), 
                        #FAF6EE 99%,#0A4BA6 100%) 
                        /*colri inverso e default*/
                        fixed;
        /*per far avere uno sfondo blu*/

    }

    /*ferma bollino*/
    /*
    html::before, .mask, .mask_2, .bottone, html, body{
        left:300px; 
        top:300px;
    }
    */  
    

    /*VIDEO PROVA*/
    /*
    .video_invert_no{
        display: none;
    }

    body,html{
        width: 100%;
    }

    .video_invert_orizzzonatle{
        position: relative;
        display: flex;

    }

    .bottone_sopra_video{
        position: absolute;
        width: 30%;
        height: 10%;
        margin-left: 5%;
        background-color: red;
        bottom: 5%;
    }
    */

         /*elimina bollino pirima sotto*/
    
    html::before, .mask, .mask_2, .bottone, html, body{
        left:-300px; 
        top:-300px;
    }


    /*html sostituisce elementi*/
    .video_invert_no{
        display: none;
    }

    .html_orizzontale{
        position: relative;
        display: flex;
    }
     
    #lottie{
        background-color:none;
        width:100%;
        height:100%;
        display:block;
        overflow: hidden;
        transform: translate3d(0,0,0);
        text-align: center;
        opacity: 1;
    }

    .bottone_sopra_video{
        position: absolute;
        width: 30%;
        height: 10%;
        /*background-color: red;*/
        background-color: none;
        bottom: 5%;
        cursor: pointer;
    }

    /*
    svg+svg{
        display: none;
    }
    */

    /*
    #lottie:last-child{
        display: none;
    }
    */

    #lottie > :last-child {
        display: none;
    }

    /*stickers che va sotto*/
    .sticker{
        display: none;
    }
        
    .premi_etichetta{
        background-image: url(../img/sticker_02.png);
        /*background-position: center; */
        background-repeat: no-repeat; 
        background-size: cover;
        box-shadow: 0 10px 10px -0px rgba(0,0,0,.1);
        cursor: pointer;
    }

}





/*margini bootstrap_01*/
@media screen and (max-width: 1199px){  
    .titolo_invert{
        font-size:8.6vw ;
    }

    .premi_etichetta{
        right: 2.5%;
        top: -8%;
    }

}

/*margini bootstrap_02*/
@media only screen and (max-width: 991px){
    /*titolo invert*/
    .titolo_invert{
        font-size:7.5vw ;
    }

    /*sticker*/
    .sticker {
        zoom: 0.7;
    
    }
    .premi_etichetta{
        scale: 0.7;
        right: -2%;
        top: -15%;
    }

}

/*margini bootstrap_03*/
@media only screen and (max-width: 767px){
    /*titolo invert*/
    .titolo_invert{
        display: none;
    }
    .titolo_invert_02{
        display: block;
        font-size:14vw ;
        line-height: 120px;
    }

    /*sticker*/
    .sticker {
        zoom: 0.7;
    
    }
    .premi_etichetta{
        scale: 0.7;
        right: -2%;
        top: -20%;
    }


    /*mouse pallino*/
    .mask {
        background: 
          radial-gradient(circle 150px 
                          /*dimensione cerchio*/
                          at var(--x,0) var(--y,0), 
                          #FAF6EE 99%,#0A4BA6 100%) 
                          /*colri inverso e default*/
                          fixed;
        background-clip: text;
        -webkit-background-clip: text;
        color:transparent;
        -webkit-text-fill-color: transparent;
    }

    html::before {
        width:300px;
        height:300px;
        /*doppio dimensione cerchio*/

    }

    .mask2 {
        color: #FAF6EE ;
        background: 
        radial-gradient(circle 150px 
                        /*dimensione cerchio*/
                        at var(--x,0) var(--y,0), 
                        #0A4BA6 99%,#FAF6EE 100%) 
                        /*colri inverso e default*/
                        fixed;
        background-clip: text;
        -webkit-background-clip: text;
        color:transparent;
        -webkit-text-fill-color: transparent;
        
    }

    .bottone{    
        background: 
        radial-gradient(circle 150px 
                        /*dimensione cerchio*/
                        at var(--x,0) var(--y,0), 
                        #FAF6EE 99%,#0A4BA6 100%) 
                        /*colri inverso e default*/
                        fixed;
        /*per far avere uno sfondo blu*/

    }

}


/*tablet in modalità verticale*/
@media screen and (max-width: 736px){  
    /*titolo invert*/
    .titolo_invert_02{
        font-size:17vw ;
        line-height: 110px;

        margin-top: 5%;
    }

    /*sticker*/
    .sticker {
        zoom: 0.7;
    
    }
    .premi_etichetta{
        scale: 0.7;
        right: -2%;
        top: -6%;
    }


     /*VIDEO PROVA*/
     /*
    .video_invert_orizzzonatle{
        display: none;
    }
    
    .video_invert_no{
        display: none;
    }

    body,html{
        width: 100%;
    }

    .video_invert_si{
        position: relative;
        display: flex;

    }

    .bottone_sopra_video{
        position: absolute;
        width: 100%;
        height: 10%;
        margin-left: 0%;
        background-color: red;
        bottom: 5%;
    }
    */


    /*html sostituisce elementi*/
    .video_invert_no{
        display: none;
    }

    /*
    .html_orizzontale{
        display: none;
    }

    .html_verticale{
        position: relative;
        display: flex;
    }
    */
     

    #lottie{
        width:100%;
        height:100%;
        display:block;
        overflow: hidden;
        transform: translate3d(0,0,0);
        text-align: center;
        opacity: 1;
    }

    .bottone_sopra_video{
        position: absolute;
        width: 100%;
        height: 10%;
       /* background-color: red;*/
        background-color: none;
        bottom: 5%;
    }

    /* funziona su safari
    #lottie > :first-child {
        display: none;
    }

    #lottie > :last-child{
        display: block;
    }
    */

    svg{
        display: block;
    }
    
    #lottie > :last-child {
        display: block;
    }

    #lottie > :first-child {
        display: none;

    }



}

/*cel*/
@media screen and (max-width: 480px){
    /*titolo invert*/
    .titolo_invert_02{
        font-size:19vw ;
        line-height: 80px;
        margin-top: 5%;
    }

    /*sticker*/
    .sticker {
        zoom: 0.5;
    
    }
    .premi_etichetta{
        scale: 0.5;
        right: -10%;
        top: -9%;
    }

    /*bottone*/
    .bottone{
        width: 100%;
    }

    .testo_freccia_bottone{
        margin-top: 4%;
    }

    /*testi in generale*/



    /*VIDEO PROVA*/
    /*
    .video_invert_orizzzonatle{
        display: none;
    }
    
    .video_invert_no{
        display: none;
    }

    body,html{
        width: 100%;
    }

    .video_invert_si{
        position: relative;
        display: flex;

    }

    .bottone_sopra_video{
        position: absolute;
        width: 100%;
        height: 10%;
        background-color: red;
        bottom: 5%;
    }
    */
}


/*cel io*/
@media screen and (max-width: 450px){

    .premi_etichetta{
        right: -10.5%;
        top: -11%;
    }
  }
/*cel io*/
@media screen and (max-width: 420px){

  .premi_etichetta{
      right: -11%;
      top: -10.5%;
  }
}
/*cel io*/
@media screen and (max-width: 380px){
          /*sticker*/
          .sticker {
            zoom: 0.43;
        
        }  
        .premi_etichetta{
            scale: 0.45;
            right: -15%;
            top: -13%;
        }
}
/*cel io*/
@media screen and (max-width: 360px){
    /*sticker*/
    .sticker {
      zoom: 0.43;
  
  }  
  .premi_etichetta{
      scale: 0.43;
      right: -17%;
      top: -14%;
  }
}

/*cel*/
@media screen and (max-width: 320px){  
    .premi_etichetta{
        right: -19%;
        top: -15%;
    }
}