.icon-row .fa.fa-star {
  font-size: 40px;
}

.icon-row .col-md-3 {
}

.row.icon-row {
  text-align: center;
}

.icon-row div.bg-card {
  background: #f1f1f1;
  padding: 20px;
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
  margin: 5px;
  display: grid;
}

body {
  color: #040a20;
  background: #f8fafb;
  font-family: Inter, sans-serif;
}

@media (max-width: 300px) {
  .class-img-cr {
    text-align: ce;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 30%;
  }
}

@media (max-width: 300px) {
  .class-img-cr {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 30%;
  }
}

@media (max-width: 300px) {
  .class-img-cr {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
  }
}

.class-img-cr {
  text-align: right;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 30%;
}

@media (max-width: 300px) {
  .class-img-cr {
    text-align: right;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 40%;
  }
}

@media (max-width: 300px) {
  .class-img-cr {
    text-align: right;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 49%;
  }
}

@media (max-width: 300px) {
  .class-img-cr {
    text-align: right;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 50%;
  }
}

.container-img {
  width: 80%;
}

@media (max-width: 576px) {
  .container-img {
    display: none;
    width: 100%;
  }
}

.section-formulario-cr {
  padding-top: 10px;
  padding-bottom: 20px;
}

@media (max-width: 300px) {
  .contanier-img-logo {
    text-align: center;
    width: 100%;
  }
}

.contanier-img-logo {
  text-align: right;
  width: 100%;
}

@media (max-width: 600px) {
  .contanier-img-logo {
    text-align: center;
  }
}

@media (max-width: 300px) {
  .contanier-img-logo {
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 300px) {
  .contanier-img-logo {
    text-align: center;
    width: 94%;
  }
}

@media (max-width: 300px) {
  .contanier-img-logo {
    text-align: ce;
    width: 100%;
  }
}

.sr-only {
  color: rgb(0,0,0);
  font-size: 40px;
}

.title-login {
  font-size: 40px;
  color: #040A20;
  text-align: left;
  font-weight: bold;
  margin-bottom: 5px;
}

.container-form {
  width: 100%;
  padding: 40px 40px;
}

@media (max-width: 576px) {
  .container-form {
    width: 100%;
    padding: 20px 20px;
  }
}

.label-form {
}

.form-control.style-input-cr {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 60px;
  height: 55px;
  background-color: #eef2f5;
  padding-right: 20px;
  border: 1px solid #eef2f5;
  border-radius: 7px;
}

.btn.btn-lg.btn-crlogin {
  background-color: transparent;
  background-image: linear-gradient(-90deg,#2485CE 27%,#334AC0 97%);
  border-radius: 7px 7px 7px 7px;
  color: #fff;
  padding: 12px 50px;
  font-size: 17px;
}

.inner-addon {
  position: relative;
  display: flex;
  align-items: center;
  align-content: center;
}

.inner-addon i {
  position: absolute;
  padding: 10px;
  pointer-events: none;
  color: #767f86;
  padding-left: 20px;
  z-index: 999;
  font-size: 22px;
}

.label-sub-title {
  padding-bottom: 15px;
  font-size: 15px;
  color: #989898;
  line-height: 20px;
  font-weight: 300;
}

.container.container-logo {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.banner-fondo {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: url("../../assets/img/fondo-escuelasm.png") left / contain no-repeat;
}

@media (min-width: 300px) {
  .banner-fondo {
    position: absolute;
    width: 100%;
    height: 100vh;
    background: url("../../assets/img/fondo-escuelasm.png") left / cover no-repeat;
  }
}

@media (max-width: 300px) {
  .banner-fondo {
    position: absolute;
    width: 100%;
    height: 100vh;
    background: url("../../assets/img/fondo-escuelasm.png") left / cover no-repeat;
  }
}

@media (max-width: 300px) {
  .col-sm-12.col-md-7.column-cr.column-1 div {
    display: none;
  }
}

@media (max-width: 600px) {
  .class-img-cr {
    width: 45%;
    text-align: center;
  }
}

.form-group.content-button {
  display: block;
}

.link-recuperar-contrasenia {
  width: 100%;
  font-size: 15px;
  color: #989898;
  display: block;
  margin: 20px 20px 20px 0px;
}

.waves {
  position: absolute;
  bottom: 0px;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.wave {
  position: absolute;
  left: -180px;
  bottom: 0;
  width: 2402px;
  height: 427px;
  background: url(https://static.platzi.com/media/files/waves_c8551f5d-ecf6-4a81-ae1d-f3a0ad55ba10.png) center bottom no-repeat;
  animation: 5s wave ease-in-out infinite alternate;
}

.wave.a {
  background-position: 0 -854px;
}

.wave.b {
  background-position: 0 -427px;
  animation-delay: .6s;
}

.wave.c {
  background-position: 0 0;
  animation-delay: 1.2s;
}

@keyframes wave {
  0% {
    transform: translate(0 , 0);
  }
  50% {
    transform: translate(-80px, 30px);
  }
  100% {
    transform: translate(160px, -60px);
  }
}

.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(208,208,208,0.09);
  bottom: -160px;
  -webkit-animation: square 25s infinite;
  animation: square 25s infinite;
  transition-timing-function: linear;
}

.bg-bubbles li:nth-child(1) {
  left: 10%;
}

.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 17s;
  animation-duration: 17s;
}

.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
  animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}

.bg-bubbles li:nth-child(5) {
  left: 70%;
}

.bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}

.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 7s;
  animation-delay: 7s;
}

.bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
}

.bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
  background-color: rgba(255, 255, 255, 0.3);
}

.bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 11s;
  animation-delay: 11s;
}

@keyframes square {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-150vh) rotate(600deg);
  }
}

.bg-bubbles {
  top: 0;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
}