@charset "UTF-8";
* {margin: 0; padding: 0; box-sizing: border-box; outline: none;}

a {text-decoration: none;}
p {margin-bottom: 1.2em; line-height: 1.2em; font-size: 1em;}
ul {list-style-type: none;}


body {font: 16px/18px 'Open Sans', sans-serif; color: #333;}

header {height: auto; background: #F7DFC7;}
#navigation {width: 100%; margin: 0 auto; padding: 10px 2%;}
#navigation > div {position: relative; max-width: 1200px; width: 100%; margin: 0 auto;}
#logo {display: inline-block;}
#logo img {width: 160px; height: auto;}
#menu {position: absolute; display: flex; bottom: 10px; right: 0}
#menu li {padding: 10px 20px; display: inline-block;}

#wrapper {height: 500px;}

footer {height: 300px; background: #555;}
#acceso {position: absolute; bottom: 30px; right: 100px;}








 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
    /* xs */
    .xs-12 {grid-column: span 12;}
    .xs-6 {grid-column: span 6;}
 }

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {

    .sm-12 {grid-column: span 12;}
    .sm-6 {grid-column: span 6;}
   
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {

    .md-12 {grid-column: span 12;}
    
 }
 
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {

    .lg-12 {grid-column: span 12;}
    .lg-6 {grid-column: span 6;}
    
 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {

    .xl-6 {grid-column: span 6;}
 } 

 .clearfix:after {content: " ";visibility: hidden;display: block;height: 0;clear: both;}table {width: 100%; border-collapse: collapse; font-size: 1em;}
label, input, select, textarea {display: block; width: 100%;}
input, select, textarea {padding: 0.8em; border: solid 1px #CCC; background: none; color: #7483a7;}

label span {display: block; padding-bottom: 3px;}
input {border-radius: 5px;}


.btn {padding: 16px; text-align: center; font-size: 1em; font-weight: 400; border: none; cursor: pointer;}
.btn-send, .btn-success {color: #FFF; background: #698F27;}
.btn-send:hover, .btn-success:hover {background: #17843a;}
.btn-danger {color: #FFF; background: #cc3443;}
.btn-danger:hover {background: #a01b26;}
.btn-cancel {color: #FFF; background: #6a727a;}
.btn-cancel:hover {background: #4e555b;}

.btn-block {display: block; width: 100%;}
.btn-search {color: #FFF; background: #0069D9;}
.form-brick {margin-bottom: 30px;}

.text-danger {color: #cc3443!important;}
.text-danger:hover {color: #a01b26!important;}
.text-success {color: #698F27;;}
.text-success:hover {color: #17843a;}

form .form-group {display: grid; grid-gap: 10px 30px; grid-template-columns: repeat(12,1fr); justify-content: space-between;}

.form-brick.legales {display: flex; flex-direction: row-reverse; margin-bottom: 0; padding-top: 30px;}
input#Legales {display: inline-block; width: 18px; height: 18px; margin-right: 10px;}

.gr-col-sp-8 {grid-column: span 8;}
.gr-col-sp-4 {grid-column: span 4;}
.gr-col-sp-2 {grid-column: span 2;}

.bg-success {background: #698F27;}
.bg-success:hover {background: #17843a;}

.bg-danger {background: #cc3443;}

.btn-lnk {display: block; font-size: 14pt; text-align: center; color: #FFF;}
.msg-box {width: 80%; margin: 0 auto 30px auto; padding: 20px; text-align: center; color: #FFF;} 
span.text-danger {font-size: 0.9em;}



@media all and (max-width: 992px) {
   
}
@media all and (max-width: 768px) {
  
}
@media all and (max-width: 576px) {
   
}

body {background: #f2f2f2;}
header {display: none;}
#login .section-wrapper, #registro .section-wrapper {margin: 0 auto;}
#login .section-content, #registro .section-content {display: flex; align-items: center; justify-content: center; height: 100vh;}
#login-box, #registro-box {width: 380px;}
#logo-box {margin-bottom: 40px;}
#logo-box span {display: block; text-align: center; font-size: 2em;}
#login-body-box, #registro-body-box, #recovery-body-box {padding: 30px; background: #FFF; box-shadow: 0 1px 1px 0 #DDD;}
#login-footer, #registro-footer, #recovery-footer {display: flex; flex-direction: column; padding: 20px 20px 0 0;}
#login-footer a, #registro-footer a, #recovery-footer {display: inline-block; margin-bottom: 10px; text-decoration: none; font-size: 0.9em;}

.title-box {text-align: center; font-size: 1.2em;}
footer {display: none;}

.eBox {padding: 0 0 20px 0; list-style-type: none;}
.eBox li {padding: 5px 0;}
.eBox li span {display: block; text-align: center;}