@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Neonderthaw&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --font-global: "Mulish", sans-serif;
    --font-neon: "Neonderthaw", cursive;
    --font-poppins: "Poppins", sans-serif;
    --section-padding-y: 160px;
    --color-dark-1: #111;
    --color-gray-1: #777;
    --color-pink: #A990F5;
    --color-orange: #D98678;
    --color-orange2: #F7E8DE;
    --border-radius-default: 5px;
    --border-radius-large: 24px;
    --box-shadow-block: 0px 5px 80px 0px rgba(51, 51, 51, 0.03),0px 4px 50px 0px rgba(51, 51, 51, 0.03),0px 3px 25px 0px rgba(51, 51, 51, 0.03),0px 2px 10px 0px rgba(51, 51, 51, 0.03),0px 1px 5px 0px rgba(27, 30, 53, 0.03);
}
.dark-mode{
    --color-dark-1: #1F1F24;
    --color-dark-2: #222;
}
.main-nav.dark-mode{
    background-color: rgba(30,30,30, .905);
}
body{
    letter-spacing: -0.008em;
    color: var(--color-dark-1) !important;
}
.font-alt{
    font-weight: 300;
}
.lead{
    font-size: 28px!important;
    line-height: 1.357; 
}
h3, h4, h5,
.h3, .h4, .h5{
    letter-spacing: -0.0177em;
}
b, strong{
    font-weight: 600;
}
blockquote p {
    letter-spacing: -0.02em;
}
.inner-nav ul{
    font-size: 17px;
    line-height: 1.6; 
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.0095em;
}
.inner-nav > ul > li > a{
    opacity: 1 !important;     
}
.inner-nav ul li a{
    position: relative;
}
.inner-nav > ul > li > a:not(.no-hover):before{
    content: "";
    position: absolute;
    top: calc(50% + 0.7em);
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .27s var(--ease-default);
}
.inner-nav > ul > li > a.active:before{
    transform: scaleX(1);
}
.main-nav.mobile-on .inner-nav > ul > li > a:not(.no-hover):before{
    display: none;
}
.inner-nav > ul > li > a:not(.no-hover):after{
    content: "";
    position: absolute;
    top: calc(50% - 0.5em);
    right: -0.5em;
    display: block;
    width: 3px;
    height: 3px;
    background: currentColor;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: var(--transition-default);
}
.inner-nav > ul > li > a:hover:after{
    opacity: 1;
    transform: scale(1);
}
.form input[type="text"],
.form input[type="email"],
.form input[type="number"],
.form input[type="url"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="password"],
.form input[type="date"],
.form input[type="color"],
.form select{
    padding-bottom: 2px;
    border: 1px solid rgba(0,0,0, .3);
}
.form textarea{
    border: 1px solid rgba(0,0,0, .3);
}
.form input[type="text"].input-sm,
.form input[type="email"].input-sm,
.form input[type="number"].input-sm,
.form input[type="url"].input-sm,
.form input[type="search"].input-sm,
.form input[type="tel"].input-sm,
.form input[type="password"].input-sm,
.form input[type="date"].input-sm,
.form input[type="color"].input-sm,
.form select.input-sm,
.form textarea.input-sm{
    font-size: 16px;
}
.form input[type="text"].input-md,
.form input[type="email"].input-md,
.form input[type="number"].input-md,
.form input[type="url"].input-md,
.form input[type="search"].input-md,
.form input[type="tel"].input-md,
.form input[type="password"].input-md,
.form input[type="date"].input-md,
.form input[type="color"].input-md,
.form select.input-md,
.form textarea.input-md{
    font-size: 17px;
}
.form input[type="text"].input-lg,
.form input[type="email"].input-lg,
.form input[type="number"].input-lg,
.form input[type="url"].input-lg,
.form input[type="search"].input-lg,
.form input[type="tel"].input-lg,
.form input[type="password"].input-lg,
.form input[type="date"].input-lg,
.form input[type="color"].input-lg,
.form select.input-lg,
.form textarea.input-lg{    
    font-size: 18px;
}
.form input[type="text"].input-lg,
.form input[type="email"].input-lg,
.form input[type="number"].input-lg,
.form input[type="url"].input-lg,
.form input[type="search"].input-lg,
.form input[type="tel"].input-lg,
.form input[type="password"].input-lg,
.form input[type="date"].input-lg,
.form input[type="color"].input-lg,
.form select.input-lg{
    height: 54px;
    line-height: 54px;    
}
.form textarea.input-lg {
    padding-top: 11px;
    padding-bottom: 11px;
}
.form input[type="text"]::placeholder,
.form input[type="email"]::placeholder,
.form input[type="number"]::placeholder,
.form input[type="url"]::placeholder,
.form input[type="search"]::placeholder,
.form input[type="tel"]::placeholder,
.form input[type="password"]::placeholder,
.form input[type="date"]::placeholder,
.form input[type="color"]::placeholder,
.form select::placeholder,
.form textarea::placeholder{
    color: var(--color-gray-3);
}
.light-content input[type="text"],
.light-content input[type="email"],
.light-content input[type="number"],
.light-content input[type="url"],
.light-content input[type="search"],
.light-content input[type="tel"],
.light-content input[type="password"],
.light-content input[type="date"],
.light-content input[type="color"],
.light-content select,
.light-content textarea{
    border-color: rgba(255,255,255, .35);
}
.form .form-group{
    margin-bottom: 25px;
}
.form label{
    margin-bottom: 12px;
    font-size: 20px;
}
.form input.newsletter-field.error{
    border-color: #dc3545 !important;
}
.form-tip,
.form-tip a{
    font-size: 14px;
}
.btn-mod,
a.btn-mod{    
    font-weight: 500;
}
.btn-mod.btn-medium{
    padding: 10px 22px;
    font-size: 16px;
    letter-spacing: 0.0025em;
}
.btn-mod.btn-large{
    padding: 13px 30px;
    font-size: 17px;
    letter-spacing: 0.0017em;
}
.link-hover-anim{
    letter-spacing: 0.0095em;
}
.hs-status{
    border-width: 1px;
}
.scroll-down-4{
    border-width: 1px;
}
.section-caption{
    font-size: 16px;
}
.section-caption-border{
    padding: 0.4em 0.8em 0.5em;
}
.section-title{
    font-size: 60px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.012em;
}
.section-title-strong{
    font-weight: 800;
}
@media only screen and (min-width: 1367px){
    .section-title-strong{
        font-size: 72px;
    }
}
.features-list-icon{
    top: 0.2em;
}
.tpl-alt-tabs > li{
    letter-spacing: -0.02em;
}
.post-prev-2-img{
    margin-bottom: 17px;
}
.post-prev-2-title{
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 500;
}
.post-prev-2-info{
    font-size: 16px;
    text-transform: unset;
    letter-spacing: 0;
}
.footer-social-links a{
    width: 42px;
    height: 42px;    
    margin: 0 3px;
    font-size: 16px;
    overflow: visible; 
    border: 1px solid #fff;
    border-radius: 50%;
    isolation: isolate;
    transform: translateZ(0);
}
.footer-social-links a:hover{
    border-color: transparent;
}
.footer-social-links a:hover:before{
    transform: scale(1.1);
}
.light-content .fw-top-link .icon{
    width: 42px;
    height: 42px;
    transition: all .27s var(--ease-out-medium);
}
.light-content .fw-top-link .icon:before{
    transition: all .27s var(--ease-out-medium);
}
.footer-text a{
    color: inherit;
    text-decoration: underline;
}
.features-1-title{
    font-weight: 600; 
}
.features-2-item:before{
    border: 1px solid var(--color-dark-1);
	background:	none;
    opacity: 0.15;
    transition: opacity .27s var(--ease-default);
    z-index: -1;
}
.features-2-item:hover:before{
    opacity: 1;
}
.features-2-label{
    font-weight: 500;
    color: var(--color-dark-1);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}
.features-2-icon:before{
    background: var(--color-gray-light-1);
    opacity: 1;
    z-index: -1;
}
.features-2-icon svg{
    fill: var(--color-dark-1);
}
.light-content .features-2-item:before{    
	background: var(--color-dark-mode-gray-2);
    border: 1px solid var(--color-dark-mode-gray-2);
    transition: border-color .27s var(--ease-default);
    opacity: 1;
    z-index: -1;
}
.light-content .features-2-item:hover:before{
    background: var(--color-dark-mode-gray-2);
    opacity: 1;
}
.light-content .features-2-label{
    color: #fff;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}
.light-content. features-2-icon{
    color: #fff;
}
.light-content .features-2-icon svg{
    fill: #fff;
}
.light-content .features-2-icon:before{
    background: var(--color-dark-mode-gray-2);
    opacity: 1;
    z-index: -1;
}
.light-content .features-2-descr{
    color: var(--color-dark-mode-gray-1);
}
.bg-border-gradient:before{
    background: none;
    border: 1px solid var(--color-dark-1);
    opacity: 0.15;
}
.light-content .bg-border-gradient:before{
    background: none;
    border: 1px solid #fff;
    opacity: 0.25;
}
.bg-gradient-dark-alpha-1:before{
    opacity: .9;
}
.bg-gradient-dark-alpha-2:before{
    opacity: .9;
}
.work-navigation a, .work-navigation a:visited{
    color: var(--color-dark-1);
}
@media only screen and (max-width: 1366px) {
    :root{
        --section-padding-y: 140px;
    }
    .container{
        max-width: var(--container-width);
    }    
    .section-title{
        font-size: calc(1.138rem + 3.06vw);
    }
    .post-prev-2-title{
        font-size: calc(1.235rem + 0.31vw);
    }
}
@media only screen and (max-width: 480px) {
    .lead{
        font-size: 24px!important;
    }
}

/* start here */

/* ---------------------------------------------
 General
 --------------------------------------------- */
.superIndex{
    position: relative;
    z-index: 99999;
}

/* ---------------------------------------------
 TopBar
 --------------------------------------------- */
.topBar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    /*border-bottom: 1px solid #3D3D40;*/
    z-index: 2;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------------------------------------------
 InCollaborazione
 --------------------------------------------- */
.inCollaborazione {
    position: absolute;
    right: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    height: 60px;
}
.inCollaborazione p{
    font-size: 10px;
    line-height: 14px;
    text-transform: uppercase;
    color: #031338;
}
.partners {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* ---------------------------------------------
 Logo
 --------------------------------------------- */
.logoSpeciale{
    width: fit-content;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.logoSpeciale img {
    display: block;
    width: fit-content;
    max-height: 25vh;
}

/* ---------------------------------------------
 Menu
 --------------------------------------------- */
nav.main-nav{
    position: absolute!important;
    transition: opacity 0.3s ease-in-out;
    bottom: 0;
    top: inherit;
}
.main-nav.dark-mode{
    background-color: transparent!important;
}
.main-nav:not(.transparent) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
nav.main-nav.active{
    position: fixed!important;
    top: 12px;
    bottom: inherit;
    z-index: 100000;
}
.inner-nav {
    background-color: #fff;
    width: max-content;
    position: relative;
    flex-grow: initial;
    margin: 0 auto;
    border-radius: 40px;
    height: 58px;
    padding: 0 8px;
    display: flex;
}
nav.main-nav.active .inner-nav{
    box-shadow: 0 0 12px rgba(0, 0, 0, .32);
}
.inner-nav ul li{
    margin: 0;
}
.main-nav.dark .inner-nav ul > li > a{
    color: var(--color-dark-1);
    padding: 8px 24px;
    height: 44px;
}
.main-nav:not(.mobile-on).small-height .inner-nav > ul > li > a{
    height: 44px!important;
}
.main-nav.dark .inner-nav ul > li > a.active{
    background-color: #D98678;
    border-radius: 40px;
    padding: 8px 24px;
}
.main-nav.dark .inner-nav ul > li > a.active:hover{
    color: #fff;
}
.inner-nav > ul > li > a:not(.no-hover):before, .inner-nav > ul > li > a:not(.no-hover):after{
    display: none;
}
.main-nav.dark .inner-nav ul > li > a:hover{
    color: var(--color-dark-1);
}

/* ---------------------------------------------
 Titolone
 --------------------------------------------- */
.titolone{
    font-family: var(--font-poppins);
    font-size: 140px;
    line-height: 80px;
    font-weight: 700;
    text-align: left;
}
.titolone .italic{
    font-weight: 200;
    color: #fff;
    font-style: italic;
}
.hs-title-13a{
    font-weight: 800;
    font-size: 72px;
}
.titolone span{
    font-family: var(--font-neon);
    font-weight: normal;
    display: block;
    font-size: 200px;
    text-shadow: 2px 2px 3px #FFC800;
    margin-left: 240px;
}

/* ---------------------------------------------
 ChapterIndicator
 --------------------------------------------- */
p.chapterIndicator{
    font-family: var(--font-neon);
    text-shadow: 2px 2px 3px #D98678;
    font-size: 60px;
    color: #F26D61;
}
img.chapterIndicator{
    max-width: 57px;
}

/* ---------------------------------------------
 Scroll indicator
 --------------------------------------------- */
.scroll-to-bottom {
    position: fixed;
    bottom: 4%;
    left: 6px;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    font-size: 10px;
    height: 180px;
    width: 44px;
    z-index: 99;
    mix-blend-mode: difference;
}
.scroll-to-bottom p {
    transform: rotate(-90deg);
    width: max-content;
    position: absolute;
    top: 80px;
    left: -60px;
    display: block;
    color: #B9B9B9;
}
.scroll-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 6px;
    background-color: #B9B9B9;
    border-radius: 50%;
    animation: scrollAnimation 3s ease-in-out infinite;
}
@keyframes scrollAnimation {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
    100% {
      opacity: 1;
      transform: translateY(170px);
    }
  }

/* ---------------------------------------------
 Home Content
 --------------------------------------------- */
.home-content p{
    font-size: 20px;
}
.italic{
    font-style: italic;
}

/* ---------------------------------------------
 VideoBox
 --------------------------------------------- */
.video-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 2;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.videoBox {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
b.videoSpacer {
    display: inline-block;
    width: calc(12vw - 80px);
    height: 1px;
    z-index: 99;
    position: relative;
}

/* ---------------------------------------------
 Quiz
 --------------------------------------------- */
.quiz-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}
.quiz-right .btn-mod.btn-large {
    text-transform: none;
    padding: 12px;
    font-size: 16px;
}
.quiz-answer.selected, .money-answer.selected {
    background-color: #fff;
    color: #000;
    border-color: #fff;
}
.quiz-right .btn-mod.next-slide {
    pointer-events: none;
    opacity: .5;
}
.quiz-right .btn-mod.next-slide.active {
    pointer-events: all;
    opacity: 1;
}
.quiz-right .buttonGrid {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    gap: 16px;
}
.quiz-left {
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    overflow: hidden;
}
.quiz-left img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* ---------------------------------------------
 Money Quiz
 --------------------------------------------- */
 #moneyQuiz .quiz-right {
    background: linear-gradient(to bottom,  #c07e7a 0%,#c74848 100%);


 }
 #moneyQuiz .quiz-right .buttonGrid{
    display: flex;
    align-items: center;
 }
 #moneyQuiz .quiz-right .buttonGrid .money-answer{
    width: 36px;
    height: 36px;
    font-size: 16px;
    line-height: 10px;
}
#moneyQuiz .moneyLabel{
    font-size: 14px;
    line-height: 16px;
}
#moneyQuiz .moneyLabel:last-child{
    text-align: right;
}
.quiz-right .btn-mod.money-next {
    pointer-events: none;
    opacity: .5;
}
.quiz-right .btn-mod.money-next.active {
    pointer-events: all;
    opacity: 1;
}

/* ---------------------------------------------
   Animated background
--------------------------------------------- */

/* Contenitore dell'apertura */
#intro-1 {
  position: relative;
}

/* Contenuto sopra lo sfondo */
#intro-1 > .home-content {
  position: relative;
  z-index: 1;
}

/* Mantiene il posizionamento attuale dei loghi */
#intro-1 > .inCollaborazione {
  z-index: 1;
}

/* Fondo arancio, corallo e malva */
#intro-1 > .sunset-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;

  background: linear-gradient(
    135deg,
    #bd8054 0%,
    #b45b52 35%,
    #bd6548 65%,
    #cf983b 100%
  );
}

/* Velo scuro sotto testi e loghi */
/*#intro-1 > .sunset-background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: rgb(38 18 25 / 12%);
}*/

/* Sfumature animate */
#intro-1 .sunset-background__colors {
  position: absolute;
  inset: -25%;

  background:
    radial-gradient(
      ellipse at 12% 85%,
      rgb(185 43 61 / 68%),
      transparent 58%
    ),
    radial-gradient(
      ellipse at 80% 65%,
      rgb(235 151 45 / 72%),
      transparent 60%
    ),
    radial-gradient(
      ellipse at 50% 20%,
      rgb(105 71 111 / 60%),
      transparent 58%
    ),
    radial-gradient(
      ellipse at 35% 55%,
      rgb(222 98 57 / 55%),
      transparent 52%
    );

  filter: blur(45px);
  animation: sunset-drift 18s ease-in-out infinite;
}

/* Posizione e movimento della sfera */
#intro-1 .sunset-background__position {
  position: absolute;
  left: 50%;
  top: 50%;

  width: min(68vw, 850px);
  aspect-ratio: 1;

  transform: translate(-50%, -50%);
  animation: sphere-drift 16s ease-in-out infinite;
}

/* Volume della sfera */
#intro-1 .sunset-background__sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at 52% 30%,
      rgb(116 69 112 / 55%),
      transparent 68%
    ),
    linear-gradient(
      160deg,
      rgb(184 111 89 / 12%),
      rgb(179 65 70 / 26%) 60%,
      rgb(222 111 48 / 20%)
    );

  box-shadow:
    inset 12px 14px 45px rgb(213 137 77 / 18%),
    inset -12px -18px 45px rgb(238 167 51 / 24%);

  animation: sphere-morph 12s ease-in-out infinite;
}

/* Bordo dorato */
#intro-1 .sunset-background__sphere::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  box-shadow:
    -7px -5px 25px rgb(235 157 65 / 24%),
    10px 14px 32px rgb(250 190 48 / 48%),
    inset 3px 3px 18px rgb(245 173 78 / 18%),
    inset -5px -8px 22px rgb(255 202 65 / 38%);

  filter: blur(6px);
}

/* Alone ambrato */
#intro-1 .sunset-background__sphere::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: inherit;

  background: radial-gradient(
    ellipse,
    transparent 52%,
    rgb(245 180 45 / 32%) 64%,
    transparent 76%
  );

  filter: blur(20px);
  animation: sphere-glow 8s ease-in-out infinite;
}

/* Animazioni inizialmente in pausa */
#intro-1 .sunset-background__colors,
#intro-1 .sunset-background__position,
#intro-1 .sunset-background__sphere,
#intro-1 .sunset-background__sphere::after {
  animation-play-state: paused;
}

/* Il JavaScript attiva le animazioni quando serve */
#intro-1.sunset-is-running .sunset-background__colors,
#intro-1.sunset-is-running .sunset-background__position,
#intro-1.sunset-is-running .sunset-background__sphere,
#intro-1.sunset-is-running .sunset-background__sphere::after {
  animation-play-state: running;
}

/* ---------------------------------------------
   Animazioni
--------------------------------------------- */

/* Movimento del fondo */
@keyframes sunset-drift {
  0%,
  100% {
    transform: translate(-5%, 3%) scale(1);
  }

  50% {
    transform: translate(6%, -5%) scale(1.12);
  }
}

/* Spostamento della sfera */
@keyframes sphere-drift {
  0%,
  100% {
    transform: translate(-55%, -47%) rotate(-7deg);
  }

  33% {
    transform: translate(-46%, -55%) rotate(2deg);
  }

  66% {
    transform: translate(-44%, -46%) rotate(7deg);
  }
}

/* Morph della sfera */
@keyframes sphere-morph {
  0%,
  100% {
    border-radius: 50% 50% 46% 54% / 49% 45% 55% 51%;
    transform: scale(1);
  }

  33% {
    border-radius: 43% 57% 53% 47% / 57% 44% 56% 43%;
    transform: scale(1.06, 0.95);
  }

  66% {
    border-radius: 56% 44% 45% 55% / 44% 57% 43% 56%;
    transform: scale(0.95, 1.06);
  }
}

/* Luminosità dell'alone */
@keyframes sphere-glow {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.97);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* ---------------------------------------------
   Mobile e accessibilità
--------------------------------------------- */

@media (max-width: 600px) {
  #intro-1 .sunset-background__position {
    width: 105vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  #intro-1 .sunset-background__colors,
  #intro-1 .sunset-background__position,
  #intro-1 .sunset-background__sphere,
  #intro-1 .sunset-background__sphere::after {
    animation: none;
  }
}

/* ---------------------------------------------
 Coin
 --------------------------------------------- */
.coin-container {
    --frame-size: 115px;

    position: fixed;
    top: -260px;
    left: 50%;
    transform: translateX(-50%);
    width: var(--frame-size);
    height: var(--frame-size);
    z-index: 9999;
    pointer-events: none;
}

.star {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--frame-size);
    height: var(--frame-size);
    transform-origin: center;
}

/* Grande a sinistra */
.star-center {
    transform: translate(-55px, 0);
}

/* Piccola in basso a destra */
.star-left {
    transform: translate(20px, 40px) scale(0.65);
}

/* Media in alto a destra */
.star-right {
    transform: translate(45px, -35px) scale(0.8);
}

.coin-sprite {
    width: var(--frame-size);
    height: var(--frame-size);
    background-image: url('../images/star_set.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: calc(var(--frame-size) * 9) var(--frame-size);
    image-rendering: pixelated;
}

@media (max-width: 480px) {
    .coin-container {
        --frame-size: 96px;
    }

    .star-center {
        transform: translate(-45px, 0);
    }

    .star-left {
        transform: translate(17px, 67px) scale(0.65);
    }

    .star-right {
        transform: translate(38px, -29px) scale(0.8);
    }
}

/* ---------------------------------------------
 Widget carosello numeri
 --------------------------------------------- */
.testimonials-3-item{
    flex-direction: column;
    align-items: center;
    border-radius: var(--border-radius-large);
}
.testimonials-3-item img.infog{
    max-width: 100%;
}
.identikit.testimonials-3-item{
    align-items: flex-start;
    overflow: hidden;
}
.testimonials-3-item h4{
    width: 100%;
}
.identikit p {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 16px;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.identikit p strong{
    display: block;
    font-weight: 800;
}
.identikit p:before {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-pink);
    margin-bottom: 4px;
}
.identikit.testimonials-3-item img.infog {
    position: absolute;
    bottom: 0;
    right: inherit;
    left: 0;
    
    z-index: 0;
}
.identikit.gambler.testimonials-3-item img.infog{
    right: inherit;
    right: -40px;
    left: 0;
}
.lootbox{
    position: relative;
}
.lootbox img{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* ---------------------------------------------
 Widget numeri
 --------------------------------------------- */
.widgetNumeri{
    border-radius: var(--border-radius-large);
}
.fontPixel{
    font-family: var(--font-neon);
}
.colorFontPink{
    color: var(--color-orange)!important;
}
.light-content .owl-page.active span {
    background: #fff!important;
    border: 1px solid #fff!important;
}
.light-content .owl-page span {
    border: 1px solid #fff!important;
    box-shadow: 1px 1px 0px rgba(0, 0, 0, .1)!important;
}
.owl-pagination{
    bottom: 8px;
}
.owl-prev {
    left: -40px;
}
.owl-next {
    right: -40px;
}

/* ---------------------------------------------
 Video
 --------------------------------------------- */

.meride-video-container{
    width: 340px!important;
    height: 604px!important;
}
.meride-video-container video{
    width: 340px!important;
    height: 604px!important;
}

/* ---------------------------------------------
 Esplosione monete
 --------------------------------------------- */

.explosion-section {
    position: relative;
    width: 100%;
    height: 1px;
    background: transparent;
    top: -50vh;
    left: 50%;
}

.explosion-center {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.burst-item {
  position: absolute;
  width: 70px; 
  height: auto;
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.3);
  top: 0;
  left: 0;
  pointer-events: none;
}

/* ---------------------------------------------
 Crediti
 --------------------------------------------- */
#crediti{

}


/* ---------------------------------------------
 Media Query
 --------------------------------------------- */
@media only screen and (max-width: 1199px) {
    main {
        /*overflow: clip;*/
    }
}
@media only screen and (max-width: 768px) {
    .titolone{
        font-size: 90px;
        line-height: 70px;
    }
    .titolone span{
        font-size: 120px;
    }
}
@media only screen and (max-width: 480px) {
    /* ---------------------------------------------
     Topbar
     --------------------------------------------- */
    .topBar{
        flex-direction: column;
        height: auto;
        padding: 8px;
    }
    .topBar a{
        text-align: center;
    }
    .inCollaborazione{
        position: relative;
        margin: 0 auto;
        right: 0;
    }
    /* ---------------------------------------------
     Menu
     --------------------------------------------- */
    #menuSticky{
        overflow-x: scroll;
        overflow-y: hidden;
        display: flex;
        flex-direction: row;
    } 
    .spacer {
        width: 16px;
        height: 16px;
    }
    nav.main-nav{
        
    }
    .binario {

    }
    .inner-nav{
        
    }
    .inner-nav ul{
        
    }
    #menuSticky {
        
    }
    .main-nav.dark .inner-nav ul > li > a{
        font-size: 14px;
        padding: 8px 16px;
        display: block;
        height: 100%;
    }
    .inner-nav ul li{
        width: max-content;
    }
    .main-nav.dark .inner-nav ul > li > a.active{
        padding: 8px 16px;
    }
    /* ---------------------------------------------
     Scroll indicator
     --------------------------------------------- */
    .scroll-to-bottom{
        display: none;
    }
    /* ---------------------------------------------
     Partners
     --------------------------------------------- */
    .partners img {
        max-height: 22px;
    }
    /* ---------------------------------------------
     Coin
     --------------------------------------------- */
     .coin-container{
        width: 96px;
        height: 96px;
     }
    .coin-wrapper {
        width: 96px;
        height: 96px;
    }
    .coin-sprite {
        width: 96px;
        height: 96px;
        background-size: cover;
    }

    /* ---------------------------------------------
     Logo
     --------------------------------------------- */
    .logoSpeciale img {
        max-width: 160px;
    }
    .titolone{
        font-size: 60px;
        line-height: 40px;
    }
    .titolone span{
        font-size: 80px;
        margin-left: 80px;
    }

    /* ---------------------------------------------
     Title
     --------------------------------------------- */
    .hs-title-13a{
        font-size: calc(1.409rem + 4.21vw);    
    }
    .hs-title-13a br{
        display: none;
    }

    .section-title-strong br{
        display: none;
    }

    /* ---------------------------------------------
     WidgetNumeri
     --------------------------------------------- */
    .widgetNumeri {
        padding: 32px 12px !important;
    }
    .widgetNumeri h2{
        font-size: 24px;
    }
    .number-title{
        font-size: 32px;
        font-weight: 800;
        margin-bottom: 4px !important;
    }
    .light-content .number-descr{
        font-size: 16px;
        line-height: 22px;
    }
    .sliderNumeri .owl-buttons{
        display: none;
    }

    /* ---------------------------------------------
     Infografiche
     --------------------------------------------- */
     /*.testimonials-slider-3 .owl-item:nth-child(2){
        order: 3;  
     }
     .testimonials-slider-3 .owl-item:nth-child(3){
        order: 2;  
     }*/

    /* ---------------------------------------------
     Quiz
     --------------------------------------------- */
    .quiz-left{
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        border-bottom-left-radius: 0;
    }
    .quiz-left img{
        max-height: 200px;
        width: 100%;
        object-fit: cover;
    }
    .quiz-right{
        border-top-right-radius: 0;
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
    }
    .numberCarousel .owl-controls {
        margin-top: 12px;
        margin-bottom: 40px;
    }
    .quiz-slider .p-5 {
        padding: 20px !important;
    }

    /* ---------------------------------------------
     Video
     --------------------------------------------- */
    .videoZoom .chapterIndicator{
        top: -82px;
        position: absolute;
        margin-left: -28px;
    }
    .videoZoom h3{
    }
    .hideOnMobile{
        display: none;
    }

    /* ---------------------------------------------
     Quiz finale
     --------------------------------------------- */
    #moneyQuiz .quiz-right{
        padding: 3rem 2rem!important;
    }
    #moneyQuiz .quiz-right .buttonGrid{
        position: relative;
        gap: inherit;
        justify-content: space-between;
    }
    #moneyQuiz .moneyLabel{
        position: absolute;
        bottom: -24px;
    }
    #moneyQuiz .moneyLabel:first-child{
        left: 0;
    }
    #moneyQuiz .moneyLabel:last-child{
        right: 0;
    }
}

/* ---------------------------------------------
 Sovrascrive Open
 --------------------------------------------- */

.specialeOpenSisal{
    font-family: var(--font-global)!important;
}
.animated{
    min-height: auto;
    margin: initial;
}
.specialeOpenSisal h1, h2, h3, h4, h5, h6, .title-tag span {
    font-family: inherit;
}
body{
    font-size: 18px !important;
    font-weight: 400 !important;
}
html body a, html body a:hover{
    color: initial;   
}
.logoSpeciale h1{
    font-family: var(--font-poppins);
}
.specialeOpenSisal p{
    font-weight: initial;
}
.specialeOpenSisal ul{
    list-style: inherit!important;
}
#colophon a {
    color: #fff;
    text-decoration: none;
}
#colophon ul {
    margin: 0;
    padding: 0;
}