@font-face {
    font-family: 'dymaxionscript';
    src: url('../fonts/DymaxionScript.eot');
    src: url('../fonts/DymaxionScript.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DymaxionScript.woff2') format('woff2'),
        url('../fonts/DymaxionScript.woff') format('woff'),
        url('../fonts/DymaxionScript.ttf') format('truetype'),
        url('../fonts/DymaxionScript.svg#DymaxionScript') format('svg');
  font-display: swap;
  font-style: normal;
  font-weight: 100;
}
.g-main-nav .g-toplevel > li > .g-menu-item-container, .g-main-nav .g-sublevel > li > .g-menu-item-container {
    font-family: 'dymaxionscript', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    font-size: 1.6rem;
    color: #FFF;
}
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {
    /* 1. Perusvärit ja fontti */
    color: #ffffff !important;           /* Tekstin ydin pysyy kirkkaan valkoisena */
    font-weight: 300 !important;      /* Hieman ohuempi fontti toimii paremmin (esim. Light) */
    padding: 0.2345rem 0;
    letter-spacing: 1.5px;              /* Hieman ilmaa kirjainten väliin */
    
    /* 2. Tyylikäs, staattinen kultainen neon-hohto */
    /* Tehty kolmella kerroksella: tiukka valkoinen, pehmeä keltainen, laaja kulta */
    text-shadow:
        0 0 4px #ffffff,                /* Tiukka valkoinen ydinhohto */
        0 0 10px #ffdf00,               /* Kirkas keltainen päähohto */
        0 0 18px #ffac00 !important;    /* Pehmeä, kultainen ulkoreuna */
        
    /* 3. Optio: Pehmeä siirtymä, jos haluat efektin esim. vain hoverilla */
    transition: text-shadow 0.3s ease-in-out;
}

h1,h2,h3,h4,h5 { 
    font-family: 'dymaxionscript', Arial, sans-serif; 
    margin: 0px;
    font-weight: 100;
}
h1 { 
    font-size: 3rem;
    word-spacing: 10px;
    color: #FFF;
    line-height: 3rem;
    text-shadow:
    /* Valkoinen hohdon ydin */
    0 0 7px #ff90e0,
    0 0 10px #ff90e0,
    /* Varsinainen neonväri (esim. sähköinen vihreä) */
    0 0 21px #f66dff,
    0 0 42px #f66dff,
    0 0 82px #f66dff,
    0 0 92px #f66dff,
    0 0 102px #f66dff,
    0 0 151px #f66dff;
}
h2, .ic-event-date h2 { 
    font-size: 2.6rem;
    line-height: 2.8rem;
    word-spacing: 10px;
    color: #FFF;
    text-shadow:
        /* Valkoinen hohdon ydin */
    0 0 7px #a6f8ff,
    0 0 10px #a6f8ff,
    /* Varsinainen neonväri (esim. sähköinen vihreä) */
    0 0 21px #6df3ff,
    0 0 42px #6df3ff,
    0 0 82px #6df3ff,
    0 0 92px #6df3ff,
    0 0 102px #6df3ff,
    0 0 151px #6df3ff;
}
h3, .ic-event-date h3 { 
    font-size: 2.2rem;
    line-height: 2.1rem;
    word-spacing: 10px;
    
     color: #fff !important;           /* Kirkas ydin */
  font-weight: 100 !important;      /* Ohut viiva */
  
  /* Keltainen neon-kerrostus */
  text-shadow: 
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #ffdf00,   /* Kirkas keltainen */
    0 0 82px #ffdf00,
    0 0 92px #ffdf00,
    0 0 102px #ffdb00,  /* Hieman lämpimämpi sävy reunoille */
    0 0 151px #ffdb00 !important;
}
#g-navigation .g-main-nav .g-toplevel {
    line-height: 150px;
}


.default_eventlist .ic-date-div {
    height: 45px;
    width:50px;
}
.default_eventlist .iceventlist-title {
    padding-top: 15px;
    line-height: 2rem !important;
    font-size: 1.2rem;
    font-weight: 400;
}
hr {
   border-bottom: none;
 
}
.ic-event-date h2 {
    font-size: 2rem;
}
.ic-all-dates h3 {
    font-size: 2rem !important;
    font-weight: 100;
}

.vilkku h2.sppb-addon-title {

  
  /* Perustilan neon-hohto (esimerkkinä sähkönsininen) */
  text-shadow: 
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #6df3ff,
    0 0 82px #6df3ff,
    0 0 92px #6df3ff,
    0 0 102px #6df3ff !important;

  /* Aktivoidaan vilkkumisanimaatio */
  animation: neon-flicker 2.5s infinite;
}

/* Määritellään animaation vaiheet */
@keyframes neon-flicker {
  /* Normaalitila (valo palaa) */
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #6df3ff,
      0 0 82px #6df3ff,
      0 0 92px #6df3ff,
      0 0 102px #6df3ff;
    opacity: 1;
  }
  /* Vilkunta-vaiheet (valo pätkii) */
  20%, 22%, 55% {        
    text-shadow: none; /* Hohto katoaa */
    opacity: 0.3;      /* Teksti himmenee */
  }
}
.vilkku h3.sppb-addon-title {
  color: #fff !important;           /* Kirkas ydin */
  font-weight: 100 !important;      /* Ohut viiva */
  
  /* Keltainen neon-kerrostus */
  text-shadow: 
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #ffdf00,   /* Kirkas keltainen */
    0 0 82px #ffdf00,
    0 0 92px #ffdf00,
    0 0 102px #ffdb00,  /* Hieman lämpimämpi sävy reunoille */
    0 0 151px #ffdb00 !important;

  animation: yellow-flicker 3s infinite;
}

/* Keltainen vilkkumisanimaatio */
@keyframes yellow-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #ffdf00,
      0 0 82px #ffdf00,
      0 0 92px #ffdf00,
      0 0 102px #ffdb00,
      0 0 151px #ffdb00;
    opacity: 1;
  }
  /* Välkähdys, jossa hohto katoaa ja teksti muuttuu "sameaksi" keltaiseksi */
  20%, 24%, 55% {        
    text-shadow: none;
    color: #554a00 !important; /* "Sammunut" tummankeltainen putki */
    opacity: 0.5;
  }
}
/* Kohdistetaan suoraan listajäsenen sisällä olevaan i-elementtiin (ikoniin) */
li[id^="icon-"] i.fab.fa-facebook, 
li[id^="icon-"] i.fab.fa-square-instagram {
    color: #ffffff !important;        /* Putken valkoinen ydin */
    -webkit-text-stroke: 0.5px #fff;  /* Tekee viivasta hieman selkeämmän */
    display: inline-block;
    font-size: 50px;                  /* Voit säätää kokoa tästä */
    
 text-shadow:
        0 0 5px #fff,                 /* Sisäinen hohde */
        0 0 10px #fff,
        0 0 20px #ffdf00,             /* Kirkas retro-keltainen */
        0 0 40px #ffdf00,
        0 0 60px #ffac00,             /* Syvempi kultainen ulkoreuna */
        0 0 80px #ffac00 !important;
        
    /* Varmistetaan, ettei SP Page Builderin oletusvarjo häiritse */
    box-shadow: none !important;
}

/* Jos haluat, että ikoni hohtaa hieman enemmän hiiren ollessa päällä */
li[id^="icon-"]:hover i {
    text-shadow:
        0 0 7px #fff,
        0 0 15px #fff,
        0 0 25px #ffdf00,
        0 0 50px #ffdf00,
        0 0 80px #ffac00,
        0 0 100px #ffac00 !important;
    transform: scale(1.1);
    transition: all 0.3s ease;
}
/* 1. Yhteiset pohjatyylit kaikille variaatioille */
.retro-1 .sppb-addon-single-image-container,
.retro-2 .sppb-addon-single-image-container,
.retro-3 .sppb-addon-single-image-container,
.retro-4 .sppb-addon-single-image-container,
.retro-5 .sppb-addon-single-image-container {
    position: relative;
    padding: 15px !important;
    overflow: visible !important;
    display: block;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.retro-1 img, .retro-2 img, .retro-3 img, .retro-4 img, .retro-5 img {
    /* Pehmeä luunvalkoinen #fdfaf5 */
    background-color: #fdfaf5 !important; 
    border: 10px solid #fdfaf5 !important;
    border-radius: 1px !important;
    
    /* Syvyysvaikutelma mustalla taustalla */
    box-shadow: 0 8px 20px rgba(0,0,0,0.6) !important;
    
    display: block;
    margin: 0 auto !important;
    max-width: 100%;
    height: auto !important;
}

/* --- 5 ERILAISTA VARIAATIOTA --- */

/* Versio 1: Kevyt kallistus oikealle */
.retro-1 .sppb-addon-single-image-container {
    transform: rotate(1.5deg);
}

/* Versio 2: Selkeämpi kallistus vasemmalle */
.retro-2 .sppb-addon-single-image-container {
    transform: rotate(-2.5deg);
}

/* Versio 3: Melkein suora, mutta hieman "koholla" (isompi varjo) */
.retro-3 .sppb-addon-single-image-container {
    transform: rotate(0.5deg);
}
.retro-3 img {
    box-shadow: 0 12px 30px rgba(0,0,0,0.7) !important;
}

/* Versio 4: Reipas kallistus oikealle */
.retro-4 .sppb-addon-single-image-container {
    transform: rotate(3.2deg);
}

/* Versio 5: Hienovarainen kallistus vasemmalle ja hieman alemmas */
.retro-5 .sppb-addon-single-image-container {
    transform: rotate(-1.2deg) translateY(5px);
}

/* 2. Hover-efekti: Kuva suoristuu, nousee ja varjo syvenee */
.retro-1:hover .sppb-addon-single-image-container,
.retro-2:hover .sppb-addon-single-image-container,
.retro-3:hover .sppb-addon-single-image-container,
.retro-4:hover .sppb-addon-single-image-container,
.retro-5:hover .sppb-addon-single-image-container {
    transform: rotate(0deg) scale(1.04) translateY(-8px) !important;
    z-index: 100;
}

.retro-1:hover img, .retro-2:hover img, .retro-3:hover img, .retro-4:hover img, .retro-5:hover img {
    box-shadow: 0 20px 40px rgba(0,0,0,0.8) !important;
}