*{
    box-sizing: border-box;
}

*{
  margin: 0;
  padding: 0;


}

body{
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    width: 100vw;
   
}
/*formulario*/


.container_login{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap :7rem;
    padding: 0 2rem;
  

}

.login-content{

  align-items: center;
  text-align: center;
  height: 100vh;
 

}

form{

 
    position:absolute;
    top: 70%;
    left: 50%;
    transform: translate(-49%, -49%);
    display:inline-block;
    height: 100vh;
  
}

.login-content h3{
  margin: 10px;
  color: #ffffff;
  text-transform: uppercase;
  

}

.login-content .input-div{
    position: relative;
    display: grid;
    grid-template-columns: 7% 93%;
    margin: 25px 0;
    padding: 5px 0;
    border-bottom: 2px solid #d9d9d9;


}

.login-content .input-div.one{
  margin-top: 0;
}

.i{
  color: #d9d9d9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.i i{
  transition: .3s;
}

.input-div > div{
  position: relative;
  height: 45px;
  width: 10px;
}





.input-div:before{
  right: 50%;
}

.input-div:after{
  left: 50%;
}

.input-div.focus:before, .input-div.focus:after{
  width: 50%;
}

.input-div.focus > div > h5{
  top: -5px;
  font-size: 15px;
}

.input-div.focus > .i > i{
  color: #38d39f;
}

.input-div > div > input{
  position: absolute;
  left: 0;
  top: 0;

  height:50px;
  border: none;
  outline: none;
  background-color:transparent;
  padding: 0.5rem 0.7rem;
  font-size: 1rem;
  color: white;
  width: 30vw;

  
}

::placeholder {
  color: gray;
  font-size: 1 em;
}

.input-div.pass{
  margin-bottom: 4px;
}

a{
  display: block;
  text-align: right;
  text-decoration: none;
  color: #999;
  font-size: 0.9rem;
  transition: .3s;
}

a:hover{
  color: #38d39f;
}
.registrar{
padding: 10px;
float: left;
max-width: 45%;
text-align: justify;
font-size: 20px;
color: white;

}
.recuperar{
padding: 10px;
float: right;
max-width: 45%;
text-align: justify;
font-size: 20px;  
color: white;

} 
.btn{

  width: 35vw;
  height: 50px;
  border-radius: 25px;
  outline: none;
  border: none;
  background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
  background-size: 200%;
  font-size: 1.2rem;
  color: #fff;

  text-transform: uppercase;
  margin: 1rem 0;
  cursor: pointer;
  transition: .5s;

}
.btn:hover{
  background-position: center;
}



/*slider*/

.contenedor {
  position: absolute;
  width: 100vw;
  margin:0px;
  padding:0px;
  height: 100vh;
}


.mySlides {display: none;}
img {
  vertical-align: middle;
  /*height:20vh;*/
  width:25vw;
  margin: auto;
  display: block;
  padding: 0vw;
  margin-top:0px;
  margin-bottom:0px;
 }

/* Slideshow container */
.slideshow-container {
  
  position:fixed;
  margin: auto;
  padding: 0px;
  height: 100vh;
  
}
.ftslider{
  width:100vw;
  height:100vh;

}


.contenedor .contenedor1 {
 position:absolute;

  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0,0,0, 0.8); /* Black background with 0.5 opacity */
 
  width: 100vw;
  height: 122vh;

  
  
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}

}
.imglogo{
  width:40vw; margin: auto;
      display: block; padding: 0vw;margin-top:20px;
}

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

  .imglogo{
  width:70vw; margin: auto;
      display: block; padding: 0vw;margin-top:40px;
}
  .input-div > div > input{
  position: absolute;
  left: 0;
  top: 0;

  height:50px;
  border: none;
  outline: none;
  background-color:transparent;
  padding:10px;
  font-size: 1rem;
  color: white;
  width: 40vh;
}

.input-div > div{
  position: relative;
  height: 45px;
  width: 28vh;
}
.i{
  color: #d9d9d9;
  display:flex;
  margin-left:-100px ;
  justify-content: center;
  align-items:right;

}

.i i{
  transition: .3s;
}
}
