@import url('https://fonts.googleapis.com/css2?family=Mada:wght@200;300;400;500;600;700;900&display=swap');

body{
  font-family: "Mada", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
}
input, a { 
  background-color: white;
  border: none;
  outline: 0;
}
.inline{
  display: inline-block;
}
.block{
  display: block;
}
.left{
  float: left;
}
.right{
  float: right;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.main{
  display: block;
  text-align: left;
  width: 100%;
  max-width: 1500px;
  margin:0 auto;
  /*min-width: 750px;*/
}

/**********************

                                                HOME

                                                                  *******************************/ 

html, body {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  overflow-x: hidden;
}
header {
  margin: 1% auto 1%;
}
header img {
  width: 30%;
  /*min-width: 400px;*/
  margin: 0 3%;  
}
.fa-bars{
  font-size: 3em;
}
.main {  
  width: 100%;
  max-width: 100%;
}
.content {
  width: 100%;
  max-width: 100%;
  /*min-width: 1200px;*/
  text-align: center;
}  
#content_1 img, #content_3 img {
  width: 100%;
  margin-bottom: 1.5%;
}      
#content_2 {
  display:table-cell;
  vertical-align:middle;
}      
#content_2 img {
  width: 25%;
  /*min-width: 450px;*/
  margin: 0 4%;
  /*margin-bottom: 2%; bp*/
}      
#content_2 div {
  background-color: #FAE100;
  margin: 3% 0;
  margin-top: 1.5%;
  padding-left: 4.5%;
}      
#content_2 div.login {
  width: 45%;
  padding: 1%;
  margin-left: 4%;
  margin-right: 4%;
}
 .form{
  /*min-width: 750px;*/
}
 .form span, .form a{
  font-size: 1.2vw;
}
#login {
  margin:1% 0 2% 0;
}
#form_login {
  overflow: hidden;
  width: 100%;
  max-width: 920px;
}
#envio {
  background-color: #9ed861;
  padding: .9% 2%; 
  font-size: 1vw;
  font-weight: bold;
  color: #fff;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 1em; 
  cursor: pointer;
}        
#envio:link, #envio:hover, #envio:active{
  color: #910019;
  text-decoration: none;
}
#content_2 div.service:first-child {  
  width: 70%;
}
.service{
  margin-bottom: 1.5%;
}
.service a{
  margin-top: 4.5%;
  color: #000;
  background-color: #FAE100;
  font-weight: bold;
}  
.service span{
  margin-top: 1%;
}         
.service a:link, .service a:hover, .service a:active {
  color: #910019;
  font-weight: bold;
  text-decoration: none;
}       
#content_2 h2{
  font-size: 1.8vw;
  margin:.75% 0 0 0;
}         
#content_3{
  text-align: center;
}   
#content_4{
  overflow: hidden;
  margin: 1.5% auto;
  margin-bottom: 0;
}          
#content_4 img{
  width: 25%;
  max-width: 25%;
  margin: 2%;
}           
#privado, #resultados{
  margin: 0 6%;
}      
#content_5 {
  background: url('../img/malla.png') repeat-x bottom;
}       
#content_5 img {
  width: 32%;
  /*min-width: 450px;*/
  margin: 0 4%;
  /*margin-bottom: 2%; bp*/
}     
#content_5 div {
  width: 24%;
  /*min-width: 450px;*/
  margin: 0 2%;
  margin-top: 1.5%;
  font-size: 1.2vw;
  text-align: left;
}       
#content_6 td {
  width: 22%;
}         
#content_6 td ul{
  width: 60%;
}         
#content_6 li {
  font-size: 1.1vw;
  text-align: left;
}       
#content_6 h3 {
  font-size: 1.3vw;
  text-align: left;
}    
    
footer span {
  margin: 2em 2em 3em 0;
  font-size: 1vw;
}    
footer span:first-child {
  margin: 0 7em;
  width: 57%;
  max-width: 57%;
}      
footer a {  
  font-weight: bold;
  text-decoration: none;
  color:gray;
  margin-bottom: 1em;
}        
footer a:link, footer a:hover, footer a:active{ 
  font-weight: bold;
  color: #910019; 
  text-decoration: none;
}                                          


/**********************

                                                  LOGIN

                                                                            *******************************/



input, textarea{ 
  background-color: white;
  border: none;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, input:-moz-autofill, textarea:-moz-autofill, select:-moz-autofill {
  background-color: white !important;
}
.input { 
  font-family: 'FontAwesome', "Open Sans", Verdana, sans-serif;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding: .9%;
  font-size: 1vw;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: .5em;
  margin-right: 3%;
}
#error {
  font-size: 1vw;
  font-weight: bold;
  color: #910019;
}
#error b {
  color: #FAE100;
}


/**********************

                                                  AYUDA

                                                                            *******************************/



.form_ayuda input, .form_ayuda textarea,.form_password input, .form_password textarea{

  border: 1px solid rgb(169, 169, 169);

  padding: .2em .4em;

  width: 100%;  

  background: #93c2ce;

-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box

  box-sizing: border-box;
  border-radius:5px;

}

.form_ayuda div,.form_password div{

  margin-bottom: .5em;

}

.form_ayuda .boton,.form_password .boton{

  width: 48%;

  text-align: center;

  font-size: 1.2em;

  margin: 0;

  margin-top: 1em;

}

#modal3 .boton, #modal4 .boton, #modal6 .boton, #modal7 .boton{

  width: 100%;

  text-align: center;

  font-size: 1.2em;

  margin: 0;

  margin-top: 1em;

}

.form_ayuda span,.form_password span{

  float: right;

  font-size: .8em;

  color: #910019;

}

.boton a{

  padding: .2em .4em;

  border: 2px solid rgb(169, 169, 169);

-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box

  box-sizing: border-box;
  border-radius:10px;

}

.boton a:hover, .boton a:focus{

  padding: .2em .4em;

  border: 2px solid rgb(169, 169, 169);

  background-color: rgb(169, 169, 169);

  color: white;

}

#error_ayuda,#error_password{

  width: 80%;

  text-align: center;

  font-size: 1em;

  color: #910019;

  font-weight: bold;

  margin: auto;

  margin-top: 1em;

}



/**********************

                                              VENTANA MODAL

                                                                            *******************************/




.modalmask {
  position: fixed;
  display:none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  opacity:1;
}

.modalbox{
  width:400px;
  position: relative;
  padding: 2em;
  background: #fff;
-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box
  box-sizing: border-box;
   border-radius: 35px;
  text-align: justify;
  color: gray; 
}


#modal2 h1, #modal3 h1, #modal4 h1, #modal5 h1, #modal6 h1, #modal7 h1{
  text-align: center; 
  color: gray;
  margin-top: 0;
}

#modal2 .modalbox, #modal3 .modalbox, #modal4 .modalbox, #modal5 .modalbox, #modal6 .modalbox, #modal7 .modalbox{

  text-align: left;

}

#modal1 .modalbox{

  text-align: justify;

  font-size: 120%;

}

.movedown {
  margin: 10% auto;
}

.modalbox p{
  font-size: 1.2em;
padding-bottom: .5em;
}



.modalbox a{

text-align: center;

color: #93c2ce;

text-decoration: none;

background-color: white;

margin:auto;

}
        
.modalbox a:link, .modalbox a:hover, .modalbox a:active{
  color: #fff;
  text-decoration: none;

}