body { padding-top: 40px; padding-bottom: 40px; background-color: #eee; overflow: auto; } .form-signin { max-width: 330px; padding: 15px; margin: 0 auto; } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: normal; } .form-signin .form-control { position: relative; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; font-size: 16px; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="text"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } html { overflow: hidden; background: url(images/captiveportal-imagen_central.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } body { background-color: transparent !important; overflow: hidden; } .register { background: -webkit-linear-gradient(left, #12131291, #089406c4); margin-top: 3%; padding: 3%; } .register-left { text-align: center; color: #fff; margin-top: 4%; letter-spacing: 1px; } .register-left input { border: none; border-radius: 1.5rem; padding: 2%; width: 60%; background: #f8f9fa; font-weight: bold; color: #383d41; margin-top: 30%; margin-bottom: 3%; cursor: pointer; } .register-right { background: #f8f9fa; border-top-left-radius: 20% 50%; border-bottom-left-radius: 20% 50%; } .register-left img { margin-top: 15%; margin-bottom: 5%; width: 100%; -webkit-animation: mover 2s infinite alternate; animation: mover 1s infinite alternate; } @-webkit-keyframes mover { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } } @keyframes mover { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } } .register-left p { font-weight: lighter; padding: 12%; margin-top: -9%; } .register .register-form { padding: 10%; margin-top: 10%; } .btnRegister { float: right; margin-top: 10%; border: none; border-radius: 1.5rem; padding: 2%; background: green; color: #fff; font-weight: 600; width: 50%; cursor: pointer; } .register .nav-tabs { margin-top: 3%; border: none; background: #244c03; border-radius: 1.5rem; width: 40%; float: right; } .register .nav-tabs .nav-link { padding: 1%; height: 34px; font-weight: 600; color: #fff; border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem; } .register .nav-tabs .nav-link:hover { border: none; } .register .nav-tabs .nav-link.active { width: 100%; color: #244c03; border: 2px solid #244c03; border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem; } .register-heading { text-shadow: rgb(0, 0, 0) 0px 2px 3px; color: white; text-align: center; margin-left: 10px; margin-top: 10%; margin-bottom: -15%; border-top-left-radius: 35px; background: -webkit-linear-gradient(left, #121312, #28a745) !important; } .tab-content { padding-top: 1em; } .boton_entrar { margin-left: auto !important; margin-right: auto !important; } .circle_button { box-shadow: 2px 4px 0 2px rgba(0, 0, 0, 0.1); border: .5em solid #c7d400; font-size: 1em; line-height: 1.1em; color: #ffffff; background-color: #76be4e; margin: auto; border-radius: 50%; height: 7em; width: 7em; position: relative; } .circle_button:hover { color: #ffffff; background-color:green; text-decoration: none; border-color: #c7d400; } .circle_button:visited { color: #ffffff; background-color: #c7d400; text-decoration: none; } .circle-link-greater-than { font-size: 1em; } @media screen and (max-width:990px) { .register .nav-tabs { width: 90%; } } @media screen and (max-width:768px) { .register-left { margin-top: 0px; } .register-left p { font-weight: lighter; padding: 0px; margin-top: 0px; } .register-left h3 { margin-top: 0px; } .register-heading { font-size: 21px; margin-top: 4em } .boton_entrar { margin-left: auto; margin-right: auto; width: 0px; padding-right: 8em; } .register-left img { margin-top: 5%; margin-bottom: 0%; width: 100%; } } @media screen and (max-width: 440px) { html { overflow: auto; } body { overflow: auto; } .register-left { margin-top: 0px; padding-left: 3em; } .register-right{ border-top-left-radius: 0% 50%; border-bottom-left-radius: 0% 50%; background: #f8f9fab5; } }