@font-face {
  font-family: helvetica;
  src: url(../assets/fonts/HelveticaNeueTTF/HelveticaNeue-01.ttf);
}

@font-face {
  font-family: helveticaBold;
  src: url(../assets/fonts/HelveticaNeueTTF/HelveticaNeue-Bold-02.ttf);
}

@font-face {
  font-family: helveticaL;
  src: url(../assets/fonts/HelveticaNeueTTF/HelveticaNeue-Light-08.ttf);
}
@font-face {
  font-family: helveticaLight;
  src: url(../assets/fonts/HelveticaNeueTTF/HelveticaNeue-UltraLight-06.ttf);
}
@font-face {
  font-family: helveticaMedium;
  src: url(../assets/fonts/HelveticaNeueTTF/HelveticaNeue-Medium-11.ttf);
}
@font-face {
  font-family: helveticaThin;
  src: url(../assets/fonts/HelveticaNeueTTF/HelveticaNeue-Thin-13.ttf);
}
@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
body {
  margin: 0;
  font-family: helvetica;
  background: url(./assets/gradien2t.jpg);

}
#main, #logo{
  display:none;
}
  .bounce {
  margin-top: 2rem !important;
  -moz-animation: bounce 2s infinite !important;
  -webkit-animation: bounce 2s infinite !important;
  animation: bounce 2s infinite !important;
  bottom: 4rem !important;
top: auto !important;
width: 4rem !important;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
input[disabled]{
  background-color: #dddddd !important;
  color:black !important;
}
.slideshow{
  height: 100vh;
  display: flex;
justify-content: center;
align-items: center;

}
#logo{
  width:20rem;
}
input{
  width: 100%;
  margin: 1.5rem 0;
      height: 4rem;
      text-align: center;
      background-color: #ffffff0d;
      border: 1px solid #979797;
      color: #D1D1D1;
      border-radius: 9px;
      font-family: helveticaLight;
      text-transform: uppercase;
}
.modal-content{
  padding-top: 1.3rem;
  height: 5rem;
}
#myModal{
  display: none;
  bottom: 3rem;
    top: auto;
    width: 450px;
    margin: 0 auto;
    margin: 0 auto;
    text-align: center;
    font-family: 'helveticaLight';
    font-size: 1.5rem;
    padding-top: 0rem;
}
::placeholder{
  color: #D1D1D1;
  font-family: helveticaLight;
  letter-spacing: 0.5em;
}
.texto{
  margin: auto;
    float: none;
}
.animation {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  color: white;
  text-align: center;
  position: relative;
}

.animation img {
  width: 50%;
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 32vh;
  left: 0;
  right: 0;
  animation: aparecer 2s ease 1s backwards;
  transition: all 1s ease 2s;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animation p {
  letter-spacing: 0.3rem;
  color: rgba(255, 255, 255, 0.4);
  position: absolute;
  top: 51vh;
  left: 0;
  right: 0;
  font-size: 1.5rem;
  animation: arriba 2s ease 2s backwards;
  transition: all 2s ease;
  font-family: helveticaThin;
}

@keyframes arriba {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.formulario{
  text-align: center;
  height: 100vh;
  padding-top: 14vh;

}
.formulario img{
  width: 95px;
}
#enviar{
background-color: #287AFE;
border: none;
font-size: 1.9rem;
letter-spacing: .1em;
}
.texto_nemeson p{
  color: #D1D1D1;
  font-size: 2rem;
}
.texto_nemeson{
  width: 50vw;
  margin: auto;
  font-family: helveticaLight;
  margin-bottom: 8rem;
  margin-top: 10rem;
}
@media screen and (max-width: 751px) {
  .animation p {
    top: 47vh;
      width: 70vw;
      margin: auto;
      font-size: 1.7rem;
  }
  .animation img {
    width: 90%;}
    .texto_nemeson{
      width: 80vw;
      margin: auto;
      font-family: helveticaLight;
      margin-bottom: 8rem;
      margin-top: 10rem;
    }

}
@media screen and (min-width: 751px) and (max-width: 1024px) {
  .animation p {
    top: 45vh;
    font-size: 2.8rem;
  }
.bounce{
  min-width: 4rem !important;
}
}



@media (min-width: 1025px) {
  .bounce{
    min-width: 4rem !important;
  }
  input{
    width:60%;
  }
  .animation img {
    min-width: 330px;
        width: 35%;
  }

  .animation p {
    top: 52vh;
    font-size: 3rem;
    min-width: 330px;
  }
}