@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Open Sans', sans-serif;

}

body{

    background-image: url(../img/fondo.jpg);

    background-size: cover;

    background-position: center center;

    background-attachment: fixed;

}

.contendor_general{

    position: relative;

    top: 100px;

    float: right;

    margin-right: 20px;

    width: 400px;

    height: 400px;

    padding: 20px;

}

@media only screen and (min-width:320px) and (max-width:768px){

    .contendor_general{

       width:85%;

   }

       }

.form-user{
    
    width: 100%;

    height: 50px;

    max-width: 400px;

    position: relative;

    overflow: hidden;

}

.form-user input{

    width: 100%;

    height: 100%;

    background: none;

    color: #fff;

    padding-top: 20px;

    border: none;

    outline: 0px;

}

.form-user .lbl-user{

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    border-bottom: 1px solid #c7c7c7;

}

.form-user .lbl-user:after{

    content: '';

    position: absolute;

    left: 0;

    bottom: -1px;

    width: 100%;

    height: 100%;

    border-bottom: 3px solid #2ecece;

    transform: translateX(-100%);

    transition: all 0.3s ease;

}

.text-user{

    position: absolute;

    bottom: 5px;

    left: 0;

    transition: all 0.3s ease;

    color: #fff;

}

.form-user input:focus + .lbl-user .text-user,.form-user input:valid + .lbl-user .text-user{

    transform: translateY(-150%);

    font-size: 14px;

    color: #2ecece;

}

.form-user input:focus + .lbl-user:after, .form-user input:valid + .lbl-user:after{

    transform: translateX(0%);

}

/*pass*/



.form-pass{

    width: 100%;

    height: 50px;

    max-width: 400px;

    position: relative;

    overflow: hidden;

}

.form-pass input{

    width: 100%;

    height: 100%;

    background: none;

    color: #fff;

    padding-top: 20px;

    border: none;

    outline: 0px;

}

.form-pass .lbl-pass{

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    border-bottom: 1px solid #c7c7c7;

}

.form-pass .lbl-pass:after{

    content: '';

    position: absolute;

    left: 0;

    bottom: -1px;

    width: 100%;

    height: 100%;

    border-bottom: 3px solid #2ecece;

    transform: translateX(-100%);

    transition: all 0.3s ease;

}

.text-pass{

    position: absolute;

    bottom: 5px;

    left: 0;

    transition: all 0.3s ease;

    color: #fff;

}

.form-pass input:focus + .lbl-pass .text-pass,.form-pass input:valid + .lbl-pass .text-user{

    transform: translateY(-150%);

    font-size: 14px;

    color: #2ecece;

}

.form-pass input:focus + .lbl-pass:after, .form-pass input:valid + .lbl-user:after{

    transform: translateX(0%);

}

input[type='submit']{

	background-color: #48e;

	color: #fff;

	width: calc(80% - 20px);

    height: 50px;

	margin: 0 10%;

	margin-top: 22px;

	border: none;

	

}

input[type='submit']:hover{

	box-shadow: 3px 0px 30px rgba(163,163,163, 1);

}