/* body {
    font-family: "Lato", sans-serif;
}

.main-head{
    height: 150px;
    background: #FFF;
   
}

.sidenav {
    height: 100%;
    background-color: #191970;
    overflow-x: hidden;
    padding-top: 20px;
}


.main {
    padding: 0px 10px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
}

@media screen and (max-width: 450px) {
    .login-form{
        margin-top: 10%;
    }

    .register-form{
        margin-top: 10%;
    }
}

@media screen and (min-width: 768px){
    .main{
        margin-left: 40%; 
    }

    .sidenav{
        width: 40%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
    }

    .login-form{
        margin-top: 80%;
    }

    .register-form{
        margin-top: 20%;
    }
}


.login-main-text{
    margin-top: 20%;
    padding: 60px;
    color: #fff;
}

.login-main-text h2{
    font-weight: 300;
}

.btn-thedot{
    background-color: #191970 !important;
    color: #fff;
}

.fondo-thedot{
    background-color: #191970;
}
.fondo-thedot-secundario{
    background-color: #451970;
}
.fondo-thedot-terciario{
    background-color: #194570;
}
.color-secundario{
    color: #451970;
}
.color-terciario{
    color: #194570;
}
.border-left-thedot {
    border-left: 0.25rem solid #191970 !important;
  } */

/*
  https://developer.mozilla.org/en/docs/Web/CSS/box-shadow
  box-shadow: [inset?] [top] [left] [blur] [size] [color];

  Tips:
    - We're setting all the blurs to 0 since we want a solid fill.
    - Add the inset keyword so the box-shadow is on the inside of the element
    - Animating the inset shadow on hover looks like the element is filling in from whatever side you specify ([top] and [left] accept negative values to become [bottom] and [right])
    - Multiple shadows can be stacked
    - If you're animating multiple shadows, be sure to keep the same number of shadows so the animation is smooth. Otherwise, you'll get something choppy.
*/
/* .fill:hover,
.fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover); }

.pulse:hover,
.pulse:focus {
  animation: pulse 1s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0); }

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover); } }

.close:hover,
.close:focus {
  box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover); }

.raise:hover,
.raise:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-0.25em); }

.up:hover,
.up:focus {
  box-shadow: inset 0 -3.25em 0 0 var(--hover); }

.slide:hover,
.slide:focus {
  box-shadow: inset 6.5em 0 0 0 var(--hover); }

.offset {
  box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color); }
  .offset:hover, .offset:focus {
    box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover); }

.fill {
  --color: #a972cb;
  --hover: #cb72aa; }

.pulse {
  --color: #ef6eae;
  --hover: #ef8f6e; }

.close {
  --color: #ff7f82;
  --hover: #ffdc7f; }

.raise {
  --color: #ffa260;
  --hover: #e5ff60; }

.up {
  --color: #e4cb58;
  --hover: #94e458; }

.slide {
  --color: #8fc866;
  --hover: #66c887; }

.offset {
  --color: #19bc8b;
  --hover: #1973bc; }

button {
  color: var(--color);
  transition: 0.25s; }
  button:hover, button:focus {
    border-color: var(--hover);
    color: #fff; }

body {
  color: #fff;
  background: #17181c;
  font: 300 1em 'Fira Sans', sans-serif;
  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  display: flex; }

button {
  background: none;
  border: 2px solid;
  font: inherit;
  line-height: 1;
  margin: 0.5em;
  padding: 1em 2em; }

h1 {
  font-weight: 400; }

code {
  color: #e4cb58;
  font: inherit; } */
.animacion-bounce-out:active {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounceOut; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}