:root{

    --font-primary: strasua;
    --font-secundary: zeroes_two;
    --color-primary:#1C202D;
    --color-secundary:#ff0077;
    --color-terciary:#3e2ff3;
    --color-light:#ffffff;
    --color-black:#000000;

    --color-gray:#b7b7b7;
    --color-gray-light:#7A7A7A;


    --color-brillo:#ffffff;

    --brillo-primary:rgb(255 255 255 / 1);
    --brillo-secundary:rgb(255 0 119 / 1);
    --brillo-secundary:rgb(62 47 243 / 1);


    

}

.st1{fill:var(--color-primary);}
.st2{fill:var(--color-primary);stroke:var(--color-terciary);stroke-width:0.5;stroke-miterlimit:10;}
.st3{fill:var(--color-primary);stroke:var(--color-terciary);stroke-width:0.5;stroke-miterlimit:10;}
.st4{fill:var(--color-primary);stroke:var(--color-terciary);stroke-width:0.5;stroke-miterlimit:10;}
.st5{fill:var(--color-primary);stroke:var(--color-primary);stroke-width:0.5;stroke-miterlimit:9.9997;}


@font-face {
    font-family: 'strasua';
    src: url('../fonts/strasua.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
  }

  @font-face {
    font-family: 'zeroes_two';
    src: url('../fonts/zeroes_two.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
  }


  *{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: var(--font-secundary);

  }

  h1, h2, h3, h4, h5{
    font-family: var(--font-primary);
  }


body{
    margin: 0;
}


.disable{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s, opacity 0.5s linear;
    

}
.enable{
    visibility:visible;
    animation:mostrar;
    animation-duration: 1s;

}


/* Elementos Activos */


.clickeable .st2{
    cursor: pointer;
    animation: mymove 2s infinite;    
}

.contorno{

    animation: parpadear 5s infinite;

}





/* info Baner*/


.info{
    display:flex;
    height: 100vh;
    width: 100%;
    position: fixed;
    color: var(--color-primary);
    z-index: 10000;
    top:0;
    background-color: rgb(255 0 119 / 1);
    justify-content: center;
    align-items: center;
    vertical-align: center;
}
.inter{
    display: flex;
    justify-content:flex-start;
    flex-direction: column;
    max-width: 80%;
    min-height: 50%;
    margin:auto;
    padding: 1em;
    background-color: var(--color-light);
    animation:subir;
    animation-duration: 1s;
    border-radius: 1em;
}


/* icons*/

.icon{
    width: 50px;
}

#cierre{
    position:fixed;
    display:flex;
    top: 1em;
    right: 1em;
    animation:subir;
    animation-duration: 1.5s;
}

.iconoBajo{

    width: 50px;
    border-radius: 0.5em;
    position: fixed;
    display:flex;
    bottom: 1em;
    left: 1em;

}


/* mapa*/

.contMap{
    width: 100%;
    height: 100vh;
}

.target{
    display:flex;
    justify-content:center;
    align-items: center;
    padding: 1em;
    min-height: 100vh;
    background-color: var(--color-primary);
}










/*preloader*/
.preloader{
    background-color: var(--color-terciary);
    height: 100vh;
    width: 100%;
    z-index: 1000;
    display:flex;
    position: fixed;
    top: 0;
    left: 0;
    justify-content:center;
    align-items: center;
}

.logo{
    display:flex;
    margin: auto;
    justify-content:center;
    align-items: center;
}


.logoImg{
    width:50%;
}














@keyframes mymove {
    0% {
        stroke:var(--color-terciary);stroke-width:1;
    }
    5%{
        stroke:var(--color-secundary);stroke-width: 1 ;
        filter: drop-shadow(0px 0px 12px var(--color-secundary));
        
    }

    

    75% {stroke:var(--color-terciary);stroke-width:1}
  }


  @keyframes mostrar {
    0% {
        top: positio2EM;
        opacity: 0;
        
    }
    100%{

        transform:scale(1);
       
        
    }
  }

  @keyframes ocultar {
      0% {
          top: positio2EM;
          
          
      }
      100%{
  
          transform:scale(1);
          opacity: 0;
         
          
      }
    }

  @keyframes subir {
    0% {
        transform:translate(0,50px);
        opacity: 0;
        
    }
    50%{
        transform:translate(0,-10px);
        
    }
    100%{

    }


  }



  @keyframes parpadear {
    0% {
        filter: drop-shadow(0px 0px 2px var(--color-terciary));
        
    }
    50%{
        filter: drop-shadow(0px 0px 7px var(--color-terciary));
        
    }
    100%{
        filter: drop-shadow(0px 0px 2px var(--color-terciary));

    }


  }