:root{
    /* --COLORES */
    --azul-claro: #9aceff;
    --azul: #0084ff;
    --azul-oscuro: #03498a;

    --azul-verde-claro: #71bee2;
    --azul-verde: #2C7390;
    --azul-verde-oscuro: #1d4555;

    --verde-claro : #73ce73;
    --verde : #28A745;
    --verde-oscuro : #1b7731;

    --gris-claro : #cfcfcf;
    --gris : #8b8b8b;
    --gris-oscuro : #424242;
}


@font-face {
    font-family: Dongle-Regular;
    src: url('../fonts/Dongle/Dongle-Regular.ttf'); 
  }
    
  @font-face {
    font-family: Dongle-Bold;
    src: url('../fonts/Dongle/Dongle-Bold.ttf'); 
  }
  
  @font-face {
    font-family: Dongle-Light;
    src: url('../fonts/Dongle/Dongle-Light.ttf'); 
  }

@font-face {
  font-family: Poppins-Regular;
  src: url('../fonts/Poppins/Poppins-Regular.ttf'); 
}
  
@font-face {
  font-family: Poppins-Bold;
  src: url('../fonts/Poppins/Poppins-Black.ttf'); 
}
  
@font-face {
  font-family: Exo2-Bold-Italic;
  src: url('../fonts/Exo2/Exo2-BlackItalic.ttf'); 

}

.titulo-principal{
  font-family: Exo2-Bold-Italic;
  font-size: xx-large;
  vertical-align: middle;
}
  
  

.btn-green, .bg-green {
  background-color: var(--verde) !important;
  color: aliceblue !important;
}

.btn-green-dark, .bg-green-dark {
  background-color: var(--verde-oscuro) !important;
  color: aliceblue !important;
}

.btn-blue, .bg-blue {
  background-color: var(--azul) !important;
  color: aliceblue !important;
}

.btn-blue-dark, .bg-blue-dark {
    background-color: var(--azul-oscuro) !important;
    color: aliceblue !important;
}

.btn-blue:hover {
  background-color: var(--azul-oscuro) !important;
  color: aliceblue
}
.btn-green:hover {
    background-color: var(--verde-oscuro) !important;
    color: aliceblue
}

.bg-blue-green, .btn-blue-green{
  background-color: var(--azul-verde);
  color: aliceblue;
}

.bg-grey-light, .btn-grey-light{
  background-color: var(--gris-claro);
  color: var(--gris-oscuro);
}
.bg-grey, .btn-grey{
  background-color: var(--gris);
  color: aliceblue;
}

.btn-grey:hover {
    background-color: var(--gris-oscuro) !important;
    color: aliceblue
}

.bg-grey-dark, .btn-grey-dark{
  background-color: var(--gris-oscuro);
  color: aliceblue;
}

@keyframes aparece-l{
    0%   {right:100%; }
    100%  {right:0px; }
}

@keyframes aparece-t{
    0%   { top:100px;}
    100%  {top:0px;}
}

div .aparece-l{
    animation-name: aparece-l;
    animation-duration: 2s;
}
div .aparece-t{
    animation-name: aparece-t;
    animation-duration: 2s;
}

.form-sm{
    max-width: 400px;
}



@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

div .fade-in{
    animation-name: fadein;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}


  
@media (max-width: 500px) {
    .form-sm{
      max-width: 250px;
    }
    .form-sm div{
      max-width: 100%;
    }
    .nav-link{
      font-size: small !important;
    }   
  }


  .font-poppins{
      font-family: Poppins-Regular;
  }