/* media-query.css: versión inicial de hoja de estilo */ 
/* https://bits.theorem.co/css-pro-tips-responsive-font-sizes-and-when-to-use-which-units/ */

/* https://www.jose-aguilar.com/blog/div-que-te-sigue-con-el-scroll/#codesyntax_1 */
/* https://www.webempresa.com/foro/6-Joomla-15/3824-Imagen-de-fondo-y-com_content-transparente.html */


/* Tamaños de texto por defecto */
html 
   { font-family: arial; font-size: calc(2.0em + 1vw); } /* background-color: tomato;} */

body { 
    font-family: inherit; 
    font-size: inherit; 
    

  content:  ""; 
  border:   0;
  padding:  0;
  left:     0;
  top:      0;
  width:    100%;
  height:   100%;
  opacity:  1.0;
  /* background-image:      url(https://image.freepik.com/foto-gratis/playa-mar_74190-2371.jpg); */
  /* background-image:      url(https://i1.wp.com/thelaughterward.com/wp-content/uploads/2019/04/Weekend-lingerie-161.jpg); */
  background-image:         url(https://78.media.tumblr.com/994a169103add28a625da758a06fdecc/tumblr_pdi3u0MGDr1u0k5iho1_1280.jpg);
  background-attachment: fixed;
  background-repeat:     no-repeat;
  background-size:       cover;
  background-origin:     border-box;
  
}
 
select, button, input, textarea
 { font-family: inherit; font-size: inherit; /*background-color: magenta;*/ }

img {
    max-width: 100%;
    max-height: 100%;
    opacity: 1.0;
    /* opacity: 0.5; */
    filter: alpha(opacity=50); /* For IE8 and earlier */    
}

/*
img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
/*
}
*/

/* Usar con div class="contenedorPrincipal" */
.contenedorPrincipal {
  border:   0;
  padding:  0;
  top:      0;
}

/* Usar con div class="imgBackground" */
.imgBackground {
  content:  ""; 
  border:   0;
  padding:  0;
  position: fixed;
  left:     0;
  top:      0;
  width:    100%;
  height:   100%;
  opacity:  0.15;
  /* background-image:      url(https://image.freepik.com/foto-gratis/playa-mar_74190-2371.jpg); */
  background: url(https://i1.wp.com/thelaughterward.com/wp-content/uploads/2019/04/Weekend-lingerie-163.jpg);
  background-attachment: fixed;  
  background-repeat:     no-repeat;
  background-size:       cover;
  background-origin:     border-box;
}

/* Usar con div class="contenido" */
.contenido {
  border:   0;
  padding:  0;
  top:      0;
  opacity:  1.0;
}

/* Usar con div id="imgBackground" */
/*
#imgBackground {
  background: url(https://i1.wp.com/thelaughterward.com/wp-content/uploads/2019/04/Weekend-lingerie-161.jpg);
  background-repeat: no-repeat;
  background-size: auto;
}
*/

p  { font-size: 1.0rem }
h1 { font-size: 3.0rem }
h2 { font-size: 2.5rem }
h3 { font-size: 2.0rem }
h4 { font-size: 1.8rem }
h5 { font-size: 1.6rem }
h6 { font-size: 1.4rem }


/* Ancho del dispositivo: device-width */

/* Desktop: Resoluciones superiores a 1281px */
@media only screen and (min-width: 1281px) { 
  body { font-size: 0.5rem; } /* background-color: orange*/
  select, input, textarea { font-size: 0.5rem; }
}

/* Laptop y Desktop: resolución entre 1025px - 1280px */
@media only screen and (min-width: 1025px) and (max-width: 1280px) { 
  body { font-size: 0.5rem;   } /* background-color: lightyellow; */ 
  select, input, textarea { font-size: 0.5rem; }
}

/* Tablets modo portrait: 768px - 1024px */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { 
  body { font-size:1.0rem;    } /* background-color: green; */
  select, input, textarea { font-size: 1.0rem; }
}

/* Tablets modo landscape: 768px - 1024px */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { 
  body { font-size:1.0rem;  } /* background-color: lightblue;  */
  select, input, textarea { font-size: 1.0rem; }
}

/* Móviles gama alta y tablets baja resolución: 481px - 767px - Samsung S7 - portrait */
@media only screen and (min-width: 481px) and (max-width: 767px) and (orientation: portrait ) { 
  body { font-size:1.0rem;   }  /* background-color: blue; */
  /* body { font-size:2.15rem;   }  /* background-color: blue; */
  select, input, textarea { font-size: 1.0rem; } 
  /* select, input, textarea { font-size: 2.15rem; } */  
}

/* Móviles gama alta y tablets baja resolución: 481px - 767px - Samsung S7 - landscape */
@media only screen and (min-width: 481px) and (max-width: 767px) and (orientation: landscape) { 
  body { font-size:1.0rem;  } /* background-color: lightblue;  */
  select, input, textarea { font-size: 1.0rem; }
}


/* Móviles entry: 320px - 479px */
/* */
@media only screen and (min-width: 320px) and (max-width: 480px) { 
  body { font-size:1.15rem;  } /* background-color: pink; */
  select, input, textarea { font-size: 1.15rem; }
}

/* Estilo Botón flotante <Atrás> */
#myBtn {
  display:          none;    /* Hidden by default */
  position:         fixed;   /* Fixed/sticky position */
  top:              10px;    /* Place the button at the bottom of the page */
  /* bottom:           10px;    /* Place the button at the bottom of the page */  
  right:            10px;    /* Place the button 10px from the right */
  z-index:          99;      /* Make sure it does not overlap */
  border:           none;    /* Remove borders */
  outline:          none;    /* Remove outline */
  background-color: lightgray;    /* Set a background color */
  color:            white;   /* Text color */
  cursor:           pointer; /* Add a mouse pointer on hover */
  padding:          15px;    /* Some padding */
  border-radius:    20px;    /* Rounded corners */
  font-size:        18px;    /* Increase font size */
}
#myBtn:hover {
  /*background-color: #555; /* Add a dark-grey background on hover */
  background-color: #BBB; /* Add a dark-grey background on hover */  
}

/* Estilo Botón flotante <Fin> */
#myBtnEnd {
  display:          none;    /* Hidden by default */
  position:         fixed;   /* Fixed/sticky position */
  bottom:           10px;    /* Place the button at the bottom of the page */  
  right:            10px;    /* Place the button 10px from the right */
  z-index:          99;      /* Make sure it does not overlap */
  border:           none;    /* Remove borders */
  outline:          none;    /* Remove outline */
  background-color: lightgray;    /* Set a background color */
  color:            white;   /* Text color */
  cursor:           pointer; /* Add a mouse pointer on hover */
  padding:          15px;    /* Some padding */
  border-radius:    20px;    /* Rounded corners */
  font-size:        18px;    /* Increase font size */
}
#myBtnEnd:hover {
  /*background-color: #555; /* Add a dark-grey background on hover */
  background-color: #BBB; /* Add a light-grey background on hover */  
}