body {

  font-family: "Roboto";

}

.sizelogo {

max-width:70%;

height:auto;

}



.toplogin {

padding:15px 0 15px;

}

.back {

  background: linear-gradient(120grad, #643986, #98aed5);

  position: absolute;

  width: 100%;

  height: 100%;

}



.registration-form {

  width: 100%;

  position: absolute;

  left: 50%;

  -webkit-transform: translate(-50%, 0%);

          transform: translate(-50%, 0%);

  top: 15%;

  background: transparent;

  margin-top: 100px;

}

.registration-form header {

  position: relative;

  z-index: 4;

  background: white;

  padding: 20px 40px;

  border-radius: 15px 15px 0 0;

}

.registration-form header h1 {

  font-weight: 900;

  letter-spacing: 1.5px;

  color: #333;

  font-size: 23px;

  text-transform: uppercase;

  margin: 0;

}

.registration-form header p {

  word-spacing: 0px;

  color: #9facb6;

  font-size: 17px;

  margin: 0;

  margin-top: 5px;

}

.registration-form form {

  position: relative;

}

.registration-form .input-section {

  width: 100%;

  position: absolute;

  display: flex;

  left: 50%;

  -webkit-transform: translate(-50%, 0);

          transform: translate(-50%, 0);

  height: 75px;

  border-radius: 0 0 15px 15px;

  overflow: hidden;

  z-index: 2;

  box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.2);

  transition: all 0.2s ease-in;

}



.registration-form .input-section-up {

  width: 100%;

  position: absolute;

  display: flex;

  left: 50%;

  -webkit-transform: translate(-50%, 0);

          transform: translate(-50%, 0);

  height: 75px;

  border-radius: 15px 15px 0 0;

  overflow: hidden;

  z-index: 2;

  box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.2);

  transition: all 0.2s ease-in;

}



.registration-form .input-section.folded {

  width: 100%;

  margin-top: 10px;

  left: 50%;

  -webkit-transform: translate(-50%, 0);

          transform: translate(-50%, 0);

  z-index: 1;

}

.registration-form .input-section.folded input {

  background-color: #e9e2c0;

}

.registration-form .input-section.folded span {

  background-color: #e9e2c0;

}

.registration-form .input-section.folded + .folded {

  width: 90%;

  margin-top: 20px;

  left: 50%;

  -webkit-transform: translate(-50%, 0);

          transform: translate(-50%, 0);

  z-index: 0;

}

.registration-form .input-section.folded + .folded input {

  background-color: #e1bcef;

}

.registration-form .input-section.folded + .folded span {

  background-color: #e1bcef;

}

.registration-form .input-section.fold-up {

  margin-top: -75px;

}



.registration-form .input-section-up.fold-up {

  margin-top: -75px;

}



.registration-form form input {
  color: #333333;
  width: 80%;
  border: 0;
  padding: 20px 40px;
  margin: 0;
  font-size: 40px;
  height: 100%;
}
.registration-form form input:focus {
  outline: none;
}

.registration-form form input::-webkit-input-placeholder {

  color: #333333;

  font-weight: 100;

  font-size: 40px;

}

.registration-form form input:-ms-input-placeholder {

  color: #333333;

  font-weight: 100;

  font-size: 40px;

}

.registration-form form input::-ms-input-placeholder {

  color: #333333;

  font-weight: 100;

  font-size: 40px;

}

.registration-form form input::placeholder {

  color: #333333;

  font-weight: 100;

  font-size: 40px;

}



.animated-button {

  width: 20%;

  background-color: #006B36;

}

.animated-button span {

  display: flex;

  flex-direction: row;

  justify-content: space-around;

  align-items: center;

  line-height: 75px;

  text-align: center;

  height: 75px;

  transition: all 0.2s ease-in;

}

.animated-button span i {

  font-size: 45px;

  color: #f8ce3a;

}

.animated-button .next-button {

  background: transparent;

  color: #f8ce3a;

  font-weight: 100;

  width: 100%;

  border: 0;

}



.next {

  margin-top: -75px;

}



.success {

  width: 100%;

  position: absolute;

  display: flex;

  align-items: center;

  left: 50%;

  -webkit-transform: translate(-50%, 0);

          transform: translate(-50%, 0);

  height: 75px;

  border-radius: 0 0 15px 15px;

  overflow: hidden;

  z-index: 2;

  box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.2);

  transition: all 0.2s ease-in;

  background: limegreen;

  margin-top: -75px;

}

.success p {

  color: white;

  font-weight: 900;

  letter-spacing: 2px;

  font-size: 18px;

  width: 100%;

  text-align: center;

}



.fonttotal {

  color: white;

  font-weight: 900;

  letter-spacing: 2px;

  font-size: 1300%;

  width: 100%;

  text-align: center;

}



.fonttotalbig {

  color: white;

  font-weight: 900;

  letter-spacing: 2px;

  font-size: 2000%;

  width: 100%;

  text-align: center;

}



.fonttotalp10 {

  color: white;

  font-weight: 900;

  letter-spacing: 2px;

  font-size: 1500%;

  width: 100%;

  text-align: center;

}



.fonttotaLMED {

  color: white;

  font-weight: 900;

  letter-spacing: 2px;

  font-size: 2500%;

  width: 100%;

  text-align: center;

}



.fonttotaLCH {

  color: white;

  font-weight: 900;

  letter-spacing: 2px;

  font-size: 700%;

  width: 100%;

  text-align: center;

}



.fonttitulos{

  color: white;

  font-weight: 900;

  letter-spacing: 2px;

  font-size: 400%;

  width: 100%;

  text-align: center;

}



@media only screen and (max-width: 479px) {

.registration-form form input {

background: white;

color: #333333;

width: 80%;

border: 0;

padding: 20px 40px;

margin: 0;

font-size: 20px;

}



.sizelogo {

max-width:30%;

height:auto;

}



.registration-form form input::placeholder {

  color: #333333;

  font-weight: 100;

  font-size: 20px;

}

.toplogin {

padding:20px 0 150px;

}

}