body {
  background-image: url("../img/bkg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color:#1E73BE;
}

.toast { min-width: 300px; }

.image-container {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  text-align: center;
}

img.logo {
  max-height: 200px;
  max-width: 18rem;
  margin-bottom:15px;
}

/* .logo {
  margin:15px;
  max-width: 18rem;
} */

.copyright {
  color: white;
  position: absolute;
  bottom: 5px;
}

.copyright-link { color: white; }

.card {
  background-color: rgba(255,255,255,0);
  color: #FFF;
  border: 0;
  position: fixed;
  left: 65%;
  top: 8vh;
}

.card-text {
  border-left: 1px solid #FFF;
  padding-left: 20px;
}

.form-group label {
  margin-bottom: 0rem;
  margin-top: .5rem;
}

.form-control { border-radius: 0px; }

p.helpers-color { margin-bottom: 0.3rem; }

a {
  color: #FFF;
  text-decoration: underline;
  transition: color 0.2s;
}

a:hover {
  color: #CCC;
  transition: color 0.2s;
}

.btn-primary, .btn-primary:active {
  background-color: #00C6A2;
  border-color: #1A1A1A;
  border-radius: 0px;
}

.btn-primary:hover { 
  background-color: #343434; 
  border-color: #343434;
}

.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active, 
.show>.btn-primary.dropdown-toggle {
  background-color: #000;
  border-color: #000;
}

.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: #000;
  border-color: #000;
  box-shadow: 0 0 0 0.2rem rgba(80, 80, 80, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #343434;
  border-color: #343434;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, 
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(80, 80, 80, 0.5);
}





/* Comprueba tu equipo */
.squaredBorder {
  border-radius: 0;
  margin-bottom: 0;
}

/* Back Panels */
.bkg-torotate-shadow {
  height: 200vh;
  width: 200vh;
  position: fixed;
  left: 65%;
  top: -120%;
  background: rgba(80,80,80,0.4);
  filter: blur(10px) drop-shadow(-100px -20px 6px rgba(80,80,80,0.4));
  transition: all 0.5s;
}

.bkg-torotate-front {
  height: 200vh;
  width: 200vh;
  position: fixed;
  left: 65%;
  top: -120%;
  background-color: #011b39;
  transition: all 0.5s;
}

.bkg-torotate-back {
  height: 500vh;
  width: 500vh;
  position: fixed;
  left: 0;
  bottom: 60%;
  background-color: #FFF;
  transition: all 1s;
}


.rotated20 {
  transform: rotateZ(-20deg);
  -webkit-transform: rotateZ(-20deg);
  -moz-transform: rotateZ(-20deg);
  -ms-transform: rotateZ(-20deg);
  -o-transform: rotateZ(-20deg);
  transform-origin: bottom left;
}

.rotated30 {
  transform: rotateZ(-30deg);
  -webkit-transform: rotateZ(-30deg);
  -moz-transform: rotateZ(-30deg);
  -ms-transform: rotateZ(-30deg);
  -o-transform: rotateZ(-30deg);
  transform-origin: bottom left;
}

.rotated15 {
  transform: rotateZ(-15deg);
  -webkit-transform: rotateZ(-15deg);
  -moz-transform: rotateZ(-15deg);
  -ms-transform: rotateZ(-15deg);
  -o-transform: rotateZ(-15deg);
  transform-origin: bottom left;
}

.rotated07 {
  transform: rotateZ(-7deg);
  -webkit-transform: rotateZ(-7deg);
  -moz-transform: rotateZ(-7deg);
  -ms-transform: rotateZ(-7deg);
  -o-transform: rotateZ(-7deg);
  transform-origin: bottom left;
}

/* Altura muy pequeña: */
@media only screen and (max-height: 465px){
  body { background-image: none; transition: background-image 0.1s; }
  .bkg-torotate-shadow { display: none ; transition: display 0.2s; }
  .bkg-torotate-back { display: none ; transition: display 0.2s; }

  .cards-container { display: flex; }

  .card {
    position: relative;
    left: auto;
    top: auto;
    margin: auto;
  }
}

/* Ancho > 1024 y altura < 750: */
@media only screen and (min-width: 1024px) and (max-height: 750px){
  .bkg-torotate-front {
    left: 60%;
    top: -100%;
    transition: left 1s, top 1s, transform 0.3s;
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
  }

  .bkg-torotate-back {
    left: 0%;
    bottom: 100%;
    transition: left 1s, top 1s, transform 0.3s;

    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
  }

  .bkg-torotate-shadow {
    left: 65%;
    top: -100%;
    transition: left 1s, top 1s, transform 0.3s;

    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
  }
}

/* Ancho < 1024px */
@media only screen and (max-width: 1024px) {
  .cards-container { display: flex; }

  .card {
    position: relative;
    left: auto;
    top: auto;
    margin: auto;
  }

  .bkg-torotate-front {
    left: 0;
    top: -100%;
    transition: left 1s, top 1s, transform 1s;
  }

  .bkg-torotate-back {
    left: 0;
    bottom: 0%;
    transition: left 1s, bottom 1s, transform 1s;

    transform: rotateZ(7deg);
    -webkit-transform: rotateZ(7deg);
    -moz-transform: rotateZ(7deg);
    -ms-transform: rotateZ(7deg);
    -o-transform: rotateZ(7deg);
  }

  .bkg-torotate-shadow {
    left: 0;
    top: -100%;
    transition: left 1s, top 1s, transform 1s;
  }

  /* Ocultar banda trasera si amenaza con rozar texto*/
  @media (min-aspect-ratio: 5 / 6) {
    .bkg-torotate-front {
      transition: transform 0.2s;
  
      transform: rotateZ(0deg);
      -webkit-transform: rotateZ(0deg);
      -moz-transform: rotateZ(0deg);
      -ms-transform: rotateZ(0deg);
      -o-transform: rotateZ(0deg);
    }
  }
}