/*@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
 
html, body {  
  background-color: #666666;
  height: 100%;

 background: rgb(17,17,17);
background: linear-gradient(0deg, rgba(17,17,17,1) 0%, rgba(51,51,51,1) 40%, rgba(51,51,51,1) 60%, rgba(17,17,17,1) 100%);

  }
body, h1, p {
  font-family: 'Questrial', helvetica, sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 14px; color: #ffffff;
}

*{box-sizing: border-box; 

  transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    -webkit-transition: all 0.15s ease-out; 
    }
a {text-decoration: none; color: #ffffff}
 
.fixer {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow: auto;
  background-image: url(../img/mapache0.png);
  background-size: cover;
  background-position: center center;

}
.max {
 height: 100%;
  width: 96%;
  max-width: 1200px;
  min-height: 600px;
  margin: 0 auto;
  position: relative; 
  padding:  20px ;
/*  background-image: url(../img/craneo.png);
  background-size: 80% auto;
  background-repeat: no-repeat;
  background-position: center center;*/
}
.header img {
  height: 70px;
  margin-right: 19px; 
}

.slogan {
  font-family: 'Anton', sans-serif;
  font-size: 1.5em;
  position: absolute;
  top: 40%; 
}
.slogan img {
  height: 47px; 
  position: relative;
  top: 13px;
}
.footer {position: absolute;
bottom: 25px}
 .footer a {
  margin-right: 25px;
  font-size: 0px;
}
.footer img {
  width: 35px;
  vertical-align: middle;
  margin-right: 8px;
  position: relative;
  top: -3px;
}
 
.logo {  }
.graf { height: 50px; margin: 5px 0px 5px 5px;}
.log { position: absolute; top: 15px; left: 80px; width: 110px;}

.idioma {position: absolute; top: 15px; right: 0px; border: 1px solid #ffffff; padding:10px; }

h1 {font-size: 2.33em; font-weight: 700; padding: 5px 10%;} 
h2 {font-size: 2.22em; font-weight: 300; color: #D68879; padding: 20px 0px;} 
h3 {font-size: 1.2em;  line-height: 1.4em; font-weight: 300; color: #D68879; padding: 0px; padding-top: 28px;} 
h4 {font-size: 1em; font-weight: 300; line-height: 2em; padding: 0px; }
h5 {font-size: 1.1em;  line-height: 1.4em; font-weight: 300; color: #D68879; padding: 0px; margin: 0px;  } 
h6 {font-size: 1em;  line-height: 1.5em; font-weight: 300;   padding: 0px; margin: 0px;  } 
 
.tcenter {text-align: center;}

 
.nowrap {white-space: nowrap; margin: 20px 0px; display: inline-block;}

 
.derecha, .izquierda { margin-bottom: 50px; }
.de40 img, .de50 img, .de40a img,
.de60a img  { width:100%; }
.clear {clear: both;}

 label {display: block;}
form {margin: 0px 5%;}
input { display: block; border: 1px solid silver; border-radius: 10px; width:100%; font-size: 20px;
 padding: 11px;
margin-top: 11px;}
.button {
  background-color: #D68879;
  color: #ffffff;
  border: 0px;
  padding:  22px;
}


.button:hover {
  opacity: 0.7;
  cursor: pointer;
}
  

 

#topper{
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: -10px; /* Place the button at the bottom of the page */
  left: calc(50% - 45px);; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #D68879; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 20px; /* Some padding */
  border-radius: 50px 50px 0px 0px; /* Rounded corners */
  font-size: 16px; /* Increase font size */
  z-index: 10000;
}

#topper:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

#topper img {
  width: 15px;
}

.movil {display: block;}
.escritorio {display: none}

 
 
  





@media screen and (min-width: 570px) {
 .footer a { 
  margin-right: 45px;
  font-size: 1em;
}

.slogan { 
  font-size: 2.2em; 
  top: 35%;
}

.slogan img {
  height: 66px; 
  top: 18px;
}

.fixer { 
  background-image: url(../img/mapache1.png); 

}

}

@media screen and (min-width: 768px) { 
.max { 
  background-size: 700px auto; 
}
.slogan { 
  font-size: 2.8em; 
  top: 35%;
}

.slogan img {
  height: 80px; 
  top: 18px;
}

}

@media screen and (min-width: 1024px) { 
  .slogan { 
  font-size: 3em; 
  top: 35%;
}
}

@media screen and (min-width: 1300px) {
  .max { 
  background-size: 80% auto; 
}
}

@media screen and (min-width: 1983px) { 
.fixer { 
  background-image: url(../img/mapache2.png); 

}
}