:root {
    --sh-azul: #009EE3;
    --sh-blanco: #FFFFFF;
    --sh-laranxa: #EF7C00;
    --sh-rojo: #E30513;
    --sh-amarelo: #FFED00;
    --sh-negro: #020B01;
    --sh-verde: #009640;
}
html , body {
    font-family: Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    background-color: #020B01;
}

.azul {
    background-color: #009EE3;
}
.blanco {
    background-color: #FFFFFF;
}
.laranxa {
    background-color: #EF7C00;
}
.rojo {
    background-color: #E30513;
}
.amarelo {
    background-color: #FFED00;
}
.negro {
    background-color: #020B01;
}
.verde {
    background-color: #009640;
}

a , p {
    font-size: 22px;
    font-family: 'Bungee', cursive;
    font-family: 'Paytone One', sans-serif;
    color: white;
    text-decoration: none;
}
p {
    color: black;
}

.bloque:nth-child(n+6) {
    color: transparent;
}

#menu {
    background: #020B01;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    display: grid;
    grid-template: repeat(8, 1fr) / repeat(4, 1fr);
    grid-auto-flow: dense;
    grid-gap: 6px;
}

.bloque {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 750ms;
    border-radius: 2px;
}

.suahua {
    grid-row: 3 / 5;
    grid-column: 1 / 3;
}
.suahua > span {
    transform: rotate(-90deg);
}

.programm {
    grid-row: 1 / 3;
    grid-column: 1 / 4;
    color: black;
}

.gallery {
    grid-row: 5 / 6;
    grid-column: 3 / 5;
}

.timeline {
    grid-row: 1 / 5;
    grid-column: 4 / 5;
}
.timeline > span {
    transform: rotate(90deg);
    padding-bottom: 10px;
}

.impressum {
    grid-row: 8 / 9;
    grid-column: 1 / 5;
}

.encender {
    grid-row: 3 / 4;
    grid-column: 3 / 4;
    cursor: pointer;
}

.switch {
    background-color: #020B01;
}

#on {
    display: block;
}
#off {
    display: none;
}

.fecha {
    grid-row: 6 / 8;
    grid-column: 2 / 4;
}

.gifts {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-align: center;
    grid-row: 5 / 6;
    grid-column: 2 / 3;
}

.sfg {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-align: center;
    grid-row: 4 / 5;
    grid-column: 3 / 4;
}

img {
    max-height: 60%;
    max-width: 60%;
}

/*------------------ R E C H E O --------------------*/

.b1 {
    grid-row: 5 / 8;
    grid-column: 1 / 2;
}

.b2 {
    grid-row: 6 / 8;
    grid-column: 4 / 5;
}


/*------------------------ B R E A K P O I N T S ---------------*/


/*----------------SMARTPHONE--------------*/
@media only screen and (max-width: 599px) {

    #menu > :nth-child(n+12) {
        display: none;
    }

}


/*----------------TABLET + MEDIUM--------------*/
@media only screen and (min-width: 600px) and (max-width: 1259px) {

    #menu > :nth-child(n+19) {
        display: none;
    }

    .fecha-lg {
        display: none;
    }

    a , p {
        font-size: 25px;
    }

    #menu {
        grid-template: repeat(8, 1fr) / repeat(6, 1fr);
    }

    .suahua {
        grid-row: 3 / 5;
        grid-column: 1 / 3;
    }
    
    .programm {
        grid-row: 1 / 3;
        grid-column: 1 / 4;
    }
    
    .gallery {
        grid-row: 5 / 6;
        grid-column: 4 / 7;
    }
    
    .timeline {
        grid-row: 1 / 5;
        grid-column: 6 / 7;
    }
    
    .impressum {
        grid-row: 8 / 9;
        grid-column: 1 / 7;
    }

    .encender {
        grid-row: 4 / 5;
        grid-column: 4 / 5;
    }

    .fecha {
        grid-row: 6 / 8;
        grid-column: 2 / 4;
    }

    .gifts {
        grid-row: 5 / 6;
        grid-column: 2 / 3;
    }

    .sfg {
        grid-row: 4 / 5;
        grid-column: 3 / 4;
    }

    .b1 {
        grid-row: 5 / 8;
        grid-column: 1 / 2;
    }
    
    .b2 {
        grid-row: 6 / 8;
        grid-column: 4 / 5;
    }

    .b3 {
        grid-row: 5 / 6;
        grid-column: 3 / 4;
    }

    .b9 {
        grid-row: 7 / 8;
        grid-column: 5 / 7;
    }

    .b8 {
        grid-row: 3 / 4;
        grid-column: 3 / 5;
    }

    .b6 {
        grid-row: 6 / 7;
        grid-column: 5 / 7;
    }

    .b11 {
        grid-row: 3 / 5;
        grid-column: 5 / 6;
    }

    .b19 {
        grid-row: 1 / 3;
        grid-column: 4 / 6;
    }

}

/*----------------LARGE--------------*/
@media only screen and (min-width: 1260px ) {

    .fecha {
        display: none;
    }
    .fecha-lg {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .fecha-lg > p {
        color: white;
    }

    a {
        font-size: 28px;
    }

    #menu {
        grid-template: repeat(8, 1fr) / repeat(14, 1fr);
    }

    .suahua {
        grid-row: 4 / 6;
        grid-column: 6 / 8;
    }
    
    .programm {
        grid-row: 2 / 4;
        grid-column: 3 / 6;
    }
    
    .gallery {
        grid-row: 4 / 5;
        grid-column: 11 / 14;
    }
    
    .timeline {
        grid-row: 3 / 8;
        grid-column: 14 / 15;
    }
    
    .impressum {
        grid-row: 8 / 9;
        grid-column: 6 / 12;
    }

    .encender {
        grid-row: 3 / 4;
        grid-column: 8 / 9;
    }

    .fecha {
        grid-row: 2 / 4;
        grid-column: 9 / 11;
    }

    .gifts {
        grid-row: 5 / 6;
        grid-column: 3 / 4;
    }

    .sfg {
        grid-row: 2 / 3;
        grid-column: 8 / 9;
    }

    .fecha-lg {
        grid-row: 2 / 4;
        grid-column: 9 / 11;
    }

    .b1 {
        grid-row: 4 / 5;
        grid-column: 3 / 6;
    }

    .b2 {
        grid-row: 1 / 3;
        grid-column: 1 / 3;
    }

    .b3 {
        grid-row: 1 / 2;
        grid-column: 3 / 5;
    }
    
    .b4 {
        grid-row: 1 / 2;
        grid-column: 5 / 8;
    }
    
    .b5 {
        grid-row: 1 / 2;
        grid-column: 8 / 11;
    }
    
    .b6 {
        grid-row: 1 / 4;
        grid-column: 11 / 14;
    }
    
    .b7 {
        grid-row: 3 / 5;
        grid-column: 1 / 3;
    }
    
    .b8 {
        grid-row: 2 / 4;
        grid-column: 6 / 8;
    }
    
    .b9 {
        grid-row: 4 / 5;
        grid-column: 8 / 11;
    }
    
    .b10 {
        grid-row: 5 / 6;
        grid-column: 1 / 3;
    }

    .b11 {
        grid-row: 5 / 6;
        grid-column: 4 / 6;
    }
    
    .b12 {
        grid-row: 5 / 6;
        grid-column: 8 / 11;
    }
        
    .b13 {
        grid-row: 5 / 7;
        grid-column: 11 / 12;
    }
        
    .b14 {
        grid-row: 5 / 7;
        grid-column: 12 / 14;
    }
        
    .b15 {
        grid-row: 6 / 9;
        grid-column: 1 / 4;
    }
        
    .b16 {
        grid-row: 6 / 8;
        grid-column: 4 / 6;
    }

        
    .b17 {
        grid-row: 6 / 8;
        grid-column: 6 / 7;
    }
        
    .b18 {
        grid-row: 6 / 8;
        grid-column: 7 / 8;
    }
        
    .b19 {
        grid-row: 6 / 8;
        grid-column: 8 / 11;
    }
   
    .b20 {
        grid-row: 7 / 8;
        grid-column: 11 / 12;
    }
       
    .b21 {
        grid-row: 7 / 9;
        grid-column: 12 / 14;
    }
       
    .b22 {
        grid-row: 8 / 9;
        grid-column: 4 / 5;
    }
           
    .b23 {
        grid-row: 8 / 9;
        grid-column: 5 / 6;
    }

    .b24 {
        grid-row: 1 / 3;
        grid-column: 14 / 15;
    }

    .b25 {
        grid-row: 8 / 9;
        grid-column: 14 / 15;
    }

}


/*----------------EXTRALARGE--------------*/
@media only screen and (min-width: 1500px ) {

}



/*------------------------ A N I M A C I O N S -----------------------*/



/*----------------DESVANECER-NORMAL-------------------*/
@-webkit-keyframes desvanecerNormal {
    from {
    opacity: .5;
    }
    to {
    opacity: 0;
    }
}
@keyframes desvanecerNormal {
    from {
    opacity: .5;
    }
    to {
    opacity: 0;
    }
}
.desvanecerNormal {
    -webkit-animation-name: desvanecerNormal;
    animation-name: desvanecerNormal;
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*----------------DESVANECER-FINAL-------------------*/
@-webkit-keyframes desvanecerFinal {
    from {
    opacity: 1;
    }
    to {
    opacity: 0;
    }
}
@keyframes desvanecerFinal {
    from {
    opacity: 1;
    }
    to {
    opacity: 0;
    }
}
.desvanecerFinal {
    -webkit-animation-name: desvanecerFinal;
    animation-name: desvanecerFinal;
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 950ms;
}

/*----------------APARECER-NORMAL-------------------*/
@-webkit-keyframes aparecerNormal {
    from {
    opacity: 0;
    }
    to {
    opacity: 1;
    }
}
@keyframes aparecerNormal {
    from {
    opacity: 0;
    }
    to {
    opacity: 1;
    }
}
.aparecerNormal {
    -webkit-animation-name: aparecerNormal;
    animation-name: aparecerNormal;
    -webkit-animation-duration: 750ms;
    animation-duration: 750ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}



@keyframes flashRojo {
    0% {
        opacity: .5;
    }
    16% {
        opacity: 1;
    }
    33% {
        opacity: .5;
    }
    50% {
        opacity: .5;
    }
    67% {
        opacity: .5;
    }
    83% {
        opacity: .5;
    }
    100% {
        opacity: .5;
    }
}
@keyframes flashBlanco {
    0% {
        opacity: .5;
    }
    16% {
        opacity: .5;
    }
    33% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
    67% {
        opacity: .5;
    }
    83% {
        opacity: .5;
    }
    100% {
        opacity: .5;
    }
}
@keyframes flashVerde {
    0% {
        opacity: .5;
    }
    16% {
        opacity: .5;
    }
    33% {
        opacity: .5;
    }
    50% {
        opacity: 1;
    }
    67% {
        opacity: .5;
    }
    83% {
        opacity: .5;
    }
    100% {
        opacity: .5;
    }
}
@keyframes flashAzul {
    0% {
        opacity: .5;
    }
    16% {
        opacity: .5;
    }
    33% {
        opacity: .5;
    }
    50% {
        opacity: .5;
    }
    67% {
        opacity: 1;
    }
    83% {
        opacity: .5;
    }
    100% {
        opacity: .5;
    }
}
@keyframes flashLaranxa {
    0% {
        opacity: .5;
    }
    16% {
        opacity: .5;
    }
    33% {
        opacity: .5;
    }
    50% {
        opacity: .5;
    }
    67% {
        opacity: .5;
    }
    83% {
        opacity: 1;
    }
    100% {
        opacity: .5;
    }
}
@keyframes flashAmarelo {
    0% {
        opacity: 1;
    }
    16% {
        opacity: .5;
    }
    33% {
        opacity: .5;
    }
    50% {
        opacity: .5;
    }
    67% {
        opacity: .5;
    }
    83% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}

.flashRojo {
    animation-name: flashRojo;
    animation-duration: 750ms;
    animation-iteration-count: infinite;
}
.flashBlanco {
    animation-name: flashBlanco;
    animation-duration: 750ms;
    animation-iteration-count: infinite;
}
.flashVerde {
    animation-name: flashVerde;
    animation-duration: 750ms;
    animation-iteration-count: infinite;
}
.flashAzul {
    animation-name: flashAzul;
    animation-duration: 750ms;
    animation-iteration-count: infinite;
}
.flashLaranxa {
    animation-name: flashLaranxa;
    animation-duration: 750ms;
    animation-iteration-count: infinite;
}
.flashAmarelo {
    animation-name: flashAmarelo;
    animation-duration: 750ms;
    animation-iteration-count: infinite;
}
























/*------------------------DESLIZAR-ABAIXO---------------------

@-webkit-keyframes deslizarAbaixo {
    from {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    to {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
}
  
@keyframes deslizarAbaixo {
    from {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    to {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
}
  
.deslizarAbaixo {
    -webkit-animation-name: deslizarAbaixo;
    animation-name: deslizarAbaixo;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

------------------------DESLIZAR-ARRIBA----------------------

@-webkit-keyframes deslizarArriba {
    from {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}
  
@keyframes deslizarArriba {
    from {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}
  
.deslizarArriba {
    -webkit-animation-name: deslizarArriba;
    animation-name: deslizarArriba;
}


*/