/*
https://css-generators.com/starburst-shape/
*/

@font-face {
  font-family: 'NeueMontreal'; /* Nome a tua scelta */
  src: url('./NeueMontreal/NeueMontreal-Regular.otf') format('opentype');
}

body{
    background-color: #F7FFEF;
    font-size: 20px;
    font-family: 'NeueMontreal';
}

a{
    text-decoration: none;
    color: unset;
    font-family: "Kaisei Opti", serif;
}

a:hover{
    color: #333;
}
section{
    width: 100%;
    border-bottom: solid 1px #333;
}

.content{
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    border-left: solid 1px #333;
    border-right: solid 1px #333;
   
}

.riga{
    padding: 50px;
}

.header{
    text-align: center;
    
}

.cont-menu{
    margin-top: 50px;
    padding-bottom: 50px;
}

ul.menu{
    padding: 0;
    margin: 0;
    display: table;
    text-align: center;
    width: 100%;
}

ul.menu > li{
    padding: 0;
    margin: 0;
    display: table-cell;
    width: 200px;
}

.cont-claim{
    padding: 50px;
}

.claim, .claim-rosa{
    display: block;
    font-size: 60px;
    color: #333;
}
.claim-rosa{
    color: #FF5E98;
    font-weight: 900;
}
.img-claim{
    width: 100%;
}

.padding{
    padding: 50px;
}

.cont-box::before{
    content: url("../media/pedone.png");
    right: 0px;
    position: absolute;
    top: -100px;
    z-index: 100;
    animation: ruotaDestraSinistra 3s infinite;
    transform-origin: center;
}

.cont-box::after{
    content: url("../media/torre.png");
    left: 0px;
    position: absolute;
    bottom: -100px;
    z-index: 100;
    animation: ruotaDestraSinistra 3s infinite;
    transform-origin: center;
}

.row.no-margin{
    margin: 0px !important;
}

.box{
    padding: 50px;
}
.box .titolo{
    font-size: 50px;
    font-weight: bold;
    display: block;
    margin-bottom: 20px;
    font-family: "Kaisei Opti", serif;
}

.box-verde{
    background-color: #7BA68B;
    color: #fff;
}



.box-giallo{
    background-color: #EEFF88;
}

.box-rosa{
    background-color: #FFC1D8;
}

.box-buy{

}
.box-buy .titolo{
    font-size: 40px;
}

.box-buy .prezzo{
    margin-left: 20px;
    font-size: 60px;
}
.box-buy .prezzo-old{
    font-size: 30px;
    font-weight: 100;
    text-decoration:line-through;
}

.box-buy li{
    margin-bottom: 30px;
}
.box-verde2{
    background-color: #D4DFCB !important;
}

.box-rosa2{
    background-color: #FFF9F1;

}

.button-abbonati{
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 70%;
    font-size: 25px;
    font-weight: 600 ;
    border-radius: 50px;
    padding: 25px;
    background-color: transparent;
    border: solid 2px #333;
}



.box-shape-rosa::before{
    content: '';
    position: absolute;
    top: -1px; right: -1px;
    border-top: 80px solid #F7FFEF;
    border-left: 80px solid #FFF9F1; 
    width: 0;
}

.box-shape-verde::before{
    content: '';
    position: absolute;
    top: -1px; right: -1px;
    border-top: 80px solid #F7FFEF;
    border-left: 80px solid #D4DFCB; 
    width: 0;
}





.box .button{
    width: 80%;
    height: 50px;
    border-radius: 25px;
    background-color: transparent;
}

.box a.button{
    display: block;
    text-align: center;
    padding: 7px;
    width: 80%;
    height: 50px;
    border-radius: 25px;
    background-color: transparent;
    border: solid 2px #333;
}

.box-alternati div:nth-child(4n+2), .box-alternati div:nth-child(4n+3){
    background-color: #F7FFEF;
    color: #333;
}
.box-alternati div:nth-child(4n+2) .titolo, .box-alternati div:nth-child(4n+3) .titolo{
    color: #333;
}



.box2{
    padding: 50px;
    background-color: #333;
}
.box2 .titolo{
    color: white;
    font-size: 50px;
    font-weight: bold;
    display: block;
    margin-bottom: 20px;
}

.box2 p{
    color: white;

}


.box2 .button{
    display: block;
    text-align: center;
    padding: 7px;
    width: 80%;
    height: 50px;
    border-radius: 25px;
    background-color: #EEFF88;
}

footer{
    padding: 50px;
    background-color: #333;
    color: white;
}

footer ul{
   margin: 0;
   padding: 0;
   margin-top: 50px;
}

footer ul li{
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-top: 20px;
 }

 /*
.btn-giallo{
    background-color: #EEFF88; 
    border-radius: 25px;
    height: 50px;
}*/

.btn-trasparente{
    color: #333;
    border: solid 1px #333;
    background-color: transparent;
    border-radius: 25px;
    min-width: 200px;
}
.btn-paypal{
    background-color: #F7FFEF !important;
    padding: 20px 50px;
}
.btn-paypal img{
    height: 30px;
}

input{
    background-color: #F7FFEF;
    border: solid 1px #333 !important;
    border-radius: 0px !important;
}
iframe{
    width: 100%;
    border: none;
    min-height: 600px;
}

.img-responsive{
    width: 100%;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes zoom {
    0% {
        -webkit-transform: scale(1,1);
    }

    25% {
        -webkit-transform: scale(1.5,1,5);
    }

    50% {
        -webkit-transform: scale(2,2);
    }

    75% {
        -webkit-transform: scale(1.5,1,5);
    }

    100% {
        -webkit-transform: scale(1,1);
    }

}

@-webkit-keyframes zoom2 {
    0% {
        -webkit-transform: scale(2,2);
    }

    25% {
        -webkit-transform: scale(1.5,1,5);
    }

    50% {
        -webkit-transform: scale(1,1);
    }

    75% {
        -webkit-transform: scale(1.5,1,5);
    }

    100% {
        -webkit-transform: scale(2,2);
    }

}

/* Standard syntax */
/*
@keyframes zoom {
   from {
        transform: scale(1,1);
   }
   to {
        transform: scale(1.5,1.5);
   }
}
   */

   .img-animazione{
    margin-top: 50px;
   }
.img-animazione img.img-1  {
    width: 40px;
    margin-right: 50px;
    -webkit-animation: zoom 10s; /* Chrome, Safari, Opera */
    animation: zoom 10s;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: forward;
}

.img-animazione img.img-2  {
    width: 40px;
    -webkit-animation: zoom2 10s; /* Chrome, Safari, Opera */
    animation: zoom2 10s;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: forward;
}



.btn.btn-giallo{
    text-align: center;
    background-color: #EEFF88;
    border: solid 2px #333;
}


.tessera{
    position: relative;
    padding: 0;
}

.tessera:before{
    content: "";
    position: absolute;
    inset: 0;
    background: #333;
    clip-path: polygon(0 0,calc(100% - 60px) 0,100% 60px,100% 100%,0 100%,0 0,1px  1px ,1px calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(60px + 0.41px),calc(100% - 60px - 0.41px) 1px,1px 1px);
 
}

.tessera > div{
    content: "";
    background-color: #FFF9F1;
    margin: 1px;
    inset: 0;
    clip-path: polygon(0 0,calc(100% - 60px) 0,100% 60px,100% 100%,0 100%); 
    height: calc(100% - 2px)
}

.tessera .titolo{
    font-size: 25px;
    font-weight: 600;
    text-align: center;
    padding-top: 20px;
    display: block;
}




.padding30{
    padding: 60px 30px;
}

.pull-right{
    float: right;
}

.videoHome{
    width: 100%;
}



  .starburst {
    float: right;
    position: relative;
    width: 200px; /* adjust to control the size */
    aspect-ratio: 1;
    background-color: #EEFF88;
    clip-path: polygon(99.06% 59.63%,81.43% 65.4%,87.68% 82.87%,69.52% 79.05%,66.2% 97.3%,52.38% 84.92%,40.37% 99.06%,34.6% 81.43%,17.13% 87.68%,20.95% 69.52%,2.7% 66.2%,15.08% 52.38%,0.94% 40.37%,18.57% 34.6%,12.32% 17.13%,30.48% 20.95%,33.8% 2.7%,47.62% 15.08%,59.63% 0.94%,65.4% 18.57%,82.87% 12.32%,79.05% 30.48%,97.3% 33.8%,84.92% 47.62%);
  }

  .starburst > div{
    position: absolute;
    top: 70px !important;
    left: 45px;
    transform: rotate(-30deg);
  }
  .starburst > div b{
    display: block;
    text-align: justify;
    line-height: 25px;
    font-size: 30px;

  }

  .starburst > div small{
    display: block;
    font-size: 11px !important;
  }


  @media screen and (min-width: 769px) {
    .col-md-6-mod{
        max-width: 48%;
        margin: 1%;
        padding: 0 !important;
    }
    .col-md-4-mod{
        max-width: 31.333333%;
        margin: 1%;
        padding: 0 !important;
    }
    
  }

  @media screen and (max-width: 769px) {
    .col-md-6-mod{
        margin-bottom: 20px;
    }
    .col-md-4-mod{
        margin-bottom: 20px;
    }
    
  }


  @keyframes ruotaDestraSinistra {
 0%   { transform: rotate(45deg); }
  25%  { transform: rotate(-45deg); }
  50%  { transform: rotate(-45deg); }
  75%  { transform: rotate(45deg); }
  100% { transform: rotate(45deg); }
}