html,
body {
  width: 100%;
  height: 100%;
  background: url(../uploads/fotografia/fotobosque.jpg) no-repeat fixed center center / cover;
  background-color: #000;
  /* filter: hue-rotate(436deg); */
  /* animation: hue 3s infinite; */
   text-shadow: 1px 1px 0px #000, -1px 1px 0px #000, 1px -1px 0px #000, -1px -1px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, -1px 0px 0px #000, 1px 0px 0px #000, 2px 2px 0px #000, -2px 2px 0px #000, 2px -2px 0px black, -2px -2px 0px black, 0px 2px 0px black, 0px -2px 0px black, -2px 0px 0px black, 2px 0px 0px black, 1px 2px 0px black, -1px 2px 0px black, 1px -2px 0px black, -1px -2px 0px black, 2px 1px 0px black, -2px 1px 0px black, 2px -1px 0px black, -2px -1px 0px black;
/* animation-duration: 1092ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
	color: yellow;
 */
 /* animation-name: spin;
 
	    animation: glow1 1s ease-in-out infinite alternate;
  animation: glow1 1s ease-in-out infinite alternate; 
  transform: skew(1deg, -1deg) scaleY(1); */
}
@keyframes hue {
  
  50% { filter: hue-rotate(380deg); }
   50% { filter: saturate(60); }
  50% { filter: hue-rotate(1080deg); }
  50% { filter: hue-rotate(1280deg); }

  
}
.titular {
  color: #fff;
   overflow: auto;
  text-align: center;
  margin-top: 0.2rem;
}
.titular h1{
  font-size: 3rem;
  margin: 0;
  font-family: arial black;
 /*   animation: rainbold 1.5s linear infinite; */
}
@keyframes rainbold { 
  0%, 100% { 
  color: red; 
  text-shadow: -1px 0 0 orange, -2px 0 0 yellow, -3px 0 0 lime, -4px 0 0 green, -5px 0 0 blue, -6px 0 0 magenta; 
} 
 
14% { 
  color: orange; 
  text-shadow: -1px 0 0 yellow, -2px 0 0 lime, -3px 0 0 green, -4px 0 0 blue, -5px 0 0 magenta, -6px 0 0 red; 
} 
 
28% { 
  color: yellow; 
  text-shadow: -1px 0 0 lime, -2px 0 0 green, -3px 0 0 blue, -4px 0 0 magenta, -5px 0 0 red, -6px 0 0 orange; 
}
 
43% { 
  color: lime; 
  text-shadow: -1px 0 0 green, -2px 0 0 blue, -3px 0 0 magenta, -4px 0 0 red, -5px 0 0 orange, -6px 0 0 yellow; 
} 
 
57% { 
  color: green; 
  text-shadow: -1px 0 0 blue, -2px 0 0 magenta, -3px 0 0 red, -4px 0 0 orange, -5px 0 0 yellow, -6px 0 0 lime; 
} 
 
71% { 
  color: blue; 
  text-shadow: -1px 0 0 magenta, -2px 0 0 red, -3px 0 0 orange, -4px 0 0 yellow, -5px 0 0 lime, -6px 0 0 green; 
} 
 
86% { 
  color: magenta; 
  text-shadow: -1px 0 0 red, -2px 0 0 orange, -3px 0 0 yellow, -4px 0 0 lime, -5px 0 0 green, -6px 0 0 blue; 
          } 
}
main {
  width: 100%;
  min-height: 100%;
  background-color: #00000099;
}

.recuadro {
  width: 53.9rem;
  min-height: 2rem;
 margin: 0 auto;
 /*  transform: scale(-1, 1);
transform: scale(-1, 1);
transform: scale(-1, 1);
transform: scale(-1, 1);
transform: scale(-1, 1); */
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out; 
  transform: skew(-1deg, 1deg) scaleY(0.9);
  transition: 2s; 

}
@keyframes floating {
  0% { transform: translate(0,  0px); }
  50%  { transform: translate(0, 15px); }
  100%   { transform: translate(0, -0px); }   
}
/* .recuadro:hover {
  transform: skew(1deg, -1deg) scaleY(0.9);
}
.recuadro:active{
        transform: skew(0deg, 0deg) scaleY(10) scaleX(5);
}
*/
.superior{
  width: 221.9rem;
  display: block;
  margin:0;
  /* transform: skew(-1deg, 1deg) scaleY(1); */
}
.inferior{
  width: 242.9rem;
  display: block;
   margin:0;
  /*  transform: skew(1deg, -1deg) scaleY(1); */
}

.contenido1 {
  display: inline-block;
  width: 2px;
  height: 2px;
  background-color: green;
  margin:0;
  /* transform: skew(1deg, -2deg) scaleY(1); */
}
.contenido2 {
  display: inline-block;
  width: 2px;
  height: 2px;
  background-color: blue;
  margin:0;

}
.contenido3 {
  display: inline-block;
  width: 2px;
  height: 2px;
  background-color: red;
  margin:0;
}
.contenido4 {
  display: inline-block;
  width: 2px;
  height: 2px;
  background-color: yellow;
  margin:0;
}
.contenido5 {
  display: inline-block;
  width: 2px;
  height: 2px;
  background-color: pink;
  margin:0;
}
.textoimg{
  display: block;
  width: 80%;
  margin: 1% auto;
}
@keyframes shake{
  0%{
  transform:translate(1px,1px) rotate(0deg);
}
  10%{
  transform:translate(-1px,-2px) rotate(-1deg);
}
  20%{
  transform:translate(-3px) rotate(1deg);
}
  30%{
  transform:translate(3px,2px) rotate(0deg);
}
  40%{
  transform:translate(1px,-1px) rotate(1deg);
}
  50%{
  transform:translate(-1px,2px) rotate(-1deg);
}
  60%{
  transform:translate(-3px,1px) rotate(0deg);
}
  70%{
  transform:translate(3px,1px) rotate(-1deg);
}
  80%{
  transform:translate(-1px,-1px) rotate(1deg);
}
  90%{transform:translate(1px,2px) rotate(0deg);
       }
}
.textoimg h2{
	  display: block;
	text-align: center;
	width: 49.5%;
	margin-left: 5px;
	animation:shake .5s infinite;
	}
	
 /* .right:hover{
   transform: skew(-0deg, 0deg) scaleY(1);
} */
.right{
  display: inline-block;
  width: 49.5%;
  background-color: #11111188;
  margin-left: 5px;
  padding: .09113rem;
 /*  transform: skew(-2deg, 2deg) scaleY(1);
   transition: 2s; */
}
.right img, .left img{
   display: block;
   margin: 10px auto auto;
   clear: both;
  border: none;
 
}

 /* .right:active{
        transform: skew(-10deg, 30deg) scaleY(.66667); 
} */

.left{
  display: inline-block;
  width: 49.5%;
  background-color: #22222288;
  padding: .09113rem;
  /*   transform: skew(2deg, -2deg) scaleY(1);
	 transition: 2s; */
}
 /*.left:hover{
       transform: skew(0deg, 0deg) scaleY(1); 
} */
p {
  color: #ccc; 
  margin: 2%;
  text-align: justify;
  font-family: sans-serif;
}
/* .left:active{
        transform: skew(10deg, -30deg) scaleY(.66667); 
}
*/

/* .bot:hover{
   width: 100%;
  background-color: #10203088;
  padding: .01rem;
     transform: skew(0deg, 0deg) scaleY(0.8);
} */
/* .bot:active{
        transform: skew(10deg, 5deg) scale(6);
} */

.bot{
   width: 100%;
  background-color: #10203088;
  padding: .01rem;
 /*    transform: skew(-1deg, -1deg) scaleY(0.8);
	 transition: 2s; */
}

.bot p{
  text-align: center;
  margin-bottom: 0;
  
}
.bot ul {
  margin-top: 0;
}
.bot ul li{
  text-align: center;
  
}
.bot a {
  text-decoration:none;
  color: green;
  background-color: #00000099;
}
 .bot a:hover{
  text-decoration:none;
  color: blue;
  background-color: #00000099;
}

.query{
  width: 100%;
  background-color: #ffffff22;
    text-align: left;
	  /*	   transform: skew(-1deg, 1deg) scaleY(1);
		   transition: 2s; */
       
}

/* .query:hover{
	  	   transform: skew(0deg, 0deg) scaleY(1);
}
.query:active{
        transform: skew(10deg, 30deg) scale(1);
}
*/
.query p{
  display: inline;
}
footer{
	width: 100%;
  background-color: #00000022;
  text-align: center;
  padding: 1rem 0;
  	 /* 	   transform: skew(1deg, 1deg) scaleY(1);
		   transition: 2s; */
}
/* footer:hover{
  	  	   transform: skew(0deg, 0deg) scaleY(1);
}
footer:active{
        transform: skew(10deg, 30deg) scaleY(5) scaleZ(10);
}
*/
footer p{
	text-align:center;
}
.botonera{
   padding:0; margin:0;
    border-bottom: 1px solid #00000022;
}
.boton{
   display: inline-block; vertical-align: top;
    height: 40px; line-height: 40px;
    padding: 0 10px; border: 1px solid #00000022;
    margin-bottom: -1px;
    cursor:pointer;
}
.boton:hover{
  color:green;
}
        .activo{
            background-color: #EEE;
            border-bottom: #FFF;
             color:blue;
    border-bottom: 1px solid #FFF;
        }
.contenido{
    border:1px solid #00000022;
        margin-top:15px;
    padding:20px;
    display:none;
}
.query a {
  text-decoration:none;
  color: green;
 /* background-color: #00000099; */
}
.query a:hover{
  text-decoration:none;
  color: blue;
 /* background-color: #00000099; */
}
.trabajo{
  display: inline-block;
background-color:#0A0A0B55;
border: 1px border #0A0A0B55;
min-width: 250px; 
height: 250px;
margin: 30px;
padding: 5px;
border-radius: 5px;
text-align: center;
}
.miniatura {
  height: 200px;
  border: 2px solid #666;
  object-fit: cover;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.trabajo:hover{
  transform:scale(1.2, 1.2);
}

.videos{
    width: 50%;
    height: 315px;
}

/* Cambios para pantallas medianas y pequeñas */
@media (max-width: 1024px) {
  /* Ajustes para tabletas y pantallas más pequeñas */
  .titular h1 {
    font-size: 2.5rem; /* Reducir tamaño de fuente */
  }

  /* Las imágenes ocupan el 100% del ancho en pantallas medianas */
  .right,
  .left {
    width: 100%;
  }

  .trabajo {
    min-width: 150px; /* Reducir tamaño mínimo de los trabajos */
    margin: 10px;     /* Reducir márgenes para evitar que se superpongan */
  }
}
.videos{
    width: 40%;
    height: 315px;
}

@media (max-width: 768px) {
  /* Ajustes para pantallas de tabletas y móviles */
  .titular h1 {
    font-size: 2rem; /* Más pequeño en pantallas pequeñas */
  }

  .trabajo {
    min-width: 100%; /* Trabajos ocupan todo el ancho disponible */
    margin: 10px 0;
  }

  .miniatura {
    max-width: 100%;
    max-height: 100%;
  }
}

.videos{
    width: 45%;
    height: 315px;
}

@media (max-width: 480px) {
  /* Ajustes para pantallas móviles */
  .titular h1 {
    font-size: 1.5rem; /* Reducir aún más el tamaño del título */
  }

  /* Evitar la deformación en pantallas pequeñas */
  .recuadro {
    width: 95%;
    transform: none;
    margin-bottom: 1rem;
  }

  /* Imágenes ocupan todo el ancho en pantallas pequeñas */
  .trabajo {
    min-width: 100%;
    margin: 10px 0;
  }

  .miniatura {
    max-width: 100%; /* Asegurar que las miniaturas se ajusten al 100% del ancho */
    max-height: 100%;
  }
    .miniatura img{
    margin: 10px; 
  }
  .videos{
    width: 100%;
    height: 315px;
}
}