@font-face{font-family:'Encode Sans'; src:url(../fonts/EncodeSans-26f5e63f.ttf); } body{background:url(../img/bg-page.png) center  left	; } *{padding:0; margin:0; box-sizing:border-box; font-family:'Encode Sans'; } .contenedor-pagina{width:100%; max-width:455px; margin:10px auto; box-shadow:0px 3px 10px 0px rgba(100, 100, 100, .3); height:96vh; background: #FFF; } .contenedor-logo{background: linear-gradient(270deg,#26b4bd 0%,#3daa35 100%); height: 120px; padding-top:12px; position: relative; } nav{padding:20px; border-bottom:1px solid #3c3c3b; } header{margin-bottom: 20px; } .contenedor-logo figure, .contenedor-logo figure img{height:34px; margin:auto; display: block; } .contenedor-formulario{position: relative; top: -60px; background:#FFF; } .contenedor-formulario{width:100%; padding:20px; padding-top:20px; } .contenedor-formulario  >  div, .contenedor-formulario  form{width: 424px; margin: auto; } .titulo-principal h1{position: relative; font-size:1.5rem; color:#279d2e; margin-bottom:10px; font-weight:600; } .contenedores-input input{display: block; width: 100%; height: 42px; background:#F8F8F8; border:0; font-size: 16px; padding:10px; outline:none; border-bottom:1px solid #3c3c3b; } .contenedores-input label{font-weight:600; color:#3c3c3b; display:inline-block; margin-bottom: 5px; } .contenedores-input label b{color:red; font-size: 16px; } .contenedores-input{margin-bottom:15px; position: relative; } .contenedores-input:nth-of-type(2){margin-bottom: 30px; } .teclado-virtual{text-align: center; } .teclado-virtual span{text-decoration: underline; color:#3c3c3b; } .teclado-virtual span i{font-size:19px; position: relative; top:5px; margin-left: 3px; } .teclado-virtual {margin-bottom: 20px; } .cotenedor-botton-ayuda-usuario{text-align:center; } button[type=submit]{display: block; height: 42px; width:100%; background: #3c3c3b; font-size: 16px; color: #FFF; border:0; border-radius:5px 10px; margin-bottom: 10px; transition: background .3s ease; } button[type=submit]:hover{background:#595958; } .registrar{font-weight:600; color:#3c3c3b; margin-bottom:15px; } .registrar label a{color:#279d2e; font-weight:500; } .button-link{display: block; margin:auto; margin-bottom: 15px; color: #279d2e; font-size: 16px; text-decoration:underline; background:transparent; border: 0; font-weight:400; } .firts{top: -10px; } .secondary{top: -10px; } .eye{position: absolute; right: 10px; top:38px; } @media (max-width:676px){body{background: none; } .contenedor-pagina{border-radius:0; width: 100%; max-width: 600px; margin: 0; box-shadow: 0 0 0  ; height:100%; } .contenedor-logo{width: 100%; border-radius: 0; } .contenedor-formulario{width:100%; top:-55px; padding:20px 0px; border-radius: 20px 20px; } .contenedor-formulario form{width:90%; } .titulo-principal h1, .titulo-principal{width: 90% !important; display: inline-block; } .titulo-principal{left:5%; position:relative; } }