*{
margin:0;
padding:0;
box-sizing: border-box;
list-style:none;
}

body{
min-height: calc(100vh / 9);
background-color: black;
display: flex;
flex-direction: column;
margin:0;
padding: 0;
/*width: calc(100%/9 ); /* 9 columns */
/*height: calc(100hv/9);*/
}

header{
height:calc(100vh/9); /*100 entre nueve */
width: 100%;
align-items: center;
justify-content: space-between;
font-family: Myriad pro, sans-serif;
flex-flow: row wrap;
position: relative;
z-index: 10000;
background-image:url(https://marcyperlaan.github.io/migaleria/comun/marcy.png);
background-repeat: no-repeat;
background-size: 236px;
background-position:50%; 
background-color: white;
background-origin: content-box;
/*background-size: calc(100vw/9);*/
/*padding:1em;
/*flex-flow: row wrap;*/
/*flex-direction: row;*/
}

table, th, td {
border:none;
text-align:center;
}
/*html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}*/

nav {
position: absolute;
right: 0;
		}

nav a{
/*display: inline-block;*/
padding: 8px;
background-color: darkgrey;
margin: 9px;
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
text-decoration: none;
color: #333;/*of the letters*/
/*stext-transform: uppercase;*/
}

nav a:hover{
text-decoration: none;
background-color: #333;
color: #fff;/*of the letters*/
}

main{
--widthUnidad: calc(100vh/9);
height:calc(var(--widthUnidad) * 6);	
text-align: justify-all;
display: inline-flex;
overflow: hidden;	

		}

footer{
--widthUnidad: calc(100vh/9);
height:calc(var(--widthUnidad) * 2);
display: flex;
/*align-items: center;*/
font-family: Myriad pro, sans-serif;
overflow: hidden;
position: relative;
}

p{
text-indent: -16px;
}

td{
width: 5em;
height: 1.6em;
}



/* Estilo cuando se aplique la rotación */
#footerImage {
position: absolute;
align-items: center;
padding: 1%;
top: 0;
left: 0;
right: 0;
bottom: 0;
 background-image: url(https://marcyperlaan.github.io/migaleria/comun/mred.png);
  opacity: 60%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
  background-origin: content-box;
  transform: rotate(0deg); /* Inicialmente sin rotación */
  transition: transform 0.3s; /* Agregar una transición para la rotación */
}

/* Estilo para el botón fijo */
#logo {
position: absolute; /* Permite posicionar el botón con respecto al contenedor */
bottom: 0; /* Lo mantiene pegado en la parte inferior del contenedor */
left: 6px; /* Lo mantiene en la esquina izq */
margin: 0; /* Espacio opcional alrededor del botón para que no esté pegado a los bordes */
transform: scale(0.90); /* Utiliza "transform" para escalar el botón */
}

.imagen-animacion {
    position: fixed;
display: flex;
 justify-content: center;
   
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 3s linear;
    transform: translateY(-100%); /* Iniciar oculta en la parte superior */
       z-index: 9999; /* Un valor alto para mantenerlo en primer plano */
}



.image-container {
    width: 100%;
    height: 100%;
}


.hide-image {
    top: 0; /* Asegura que las imágenes estén visibles al mostrarlas */
       width: 100%; /* Asegura que las imágenes ocupen el 100% del ancho */
}
/* Ocultar las imágenes inicialmente */
#imagenSube {
    transform: translateY(-100%);
      width: 100%;
}

#imagenBaja {
    transform: translateY(100%);
    width: 100%;
}






.Logo{
margin-left: 0px;
display: flex;
align-items: center;
}

.Logo img{
height : calc(100vh/9);
}

.mail{
margin-left: 34px;
margin-top: 29px;
height:25px;
position: relative; /* Asegura que el enlace tenga una posición relativa */
z-index: 1; /* Coloca el enlace por encima de otros elementos */
/*clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
background-color: aliceblue;*/
}


.fineart img{
/* Initial state without any transformation */
transform: none;
transition: transform 1.9s ease; /* Add a transition for smooth animation */
}	

.rectangulo{
width: calc(100%/3);
height: 100%;
background-color: beige;
/*-webkit-*/clip-path: polygon(66.666% 0%, 100% 50%, 66.666% 100%, 33.333% 100%, 0% 50%, 33.333% 0%);
clip-path: polygon(66.666% 0%, 100% 50%, 66.666% 100%, 33.333% 100%, 0% 50%, 33.333% 0%);
}

.rectangulo img{ 
/*opacity: 0.2;*/
transition: all 1s;
height: 100%;
/*margin-left: auto;
margin-right: auto;
display: block;*/
}

.rectangulo a{
width:100%;
display: flex;
justify-content:center;
align-items:center;
height: 100%;
}

.fadeRectangulo{
opacity: 1;
}

.presentacion{
margin:auto;
}

.text{
text-indent: 50px;
color: grey;
padding:25px;
margin-bottom: 150px; /* Ajusta el margen inferior para separar el elemento del footer */
position: absolute; /* Coloca el elemento en posición absoluta */
  bottom: 0.5cm; /* Coloca el elemento en la parte inferior del contenedor padre */
  left: 0; /* Coloca el elemento en la parte izquierda del contenedor padre */
  /* Otras propiedades de estilo si es necesario */
/* text-align: justify ;/*
font-family: Myriad pro, sans-serif;
font-size: 15px;
padding: 40px 60px;
/*  text-align-last: right; /* Alinea la última línea a la derecha */
}

.menuPrincipal ul{
list-style: none;
display:flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
margin-top: 30px;
padding: 0;
}

.menuPrincipal ul li{
margin: 0 0.5em;
margin-top: 50px;
}

.menuPrincipal a {
    text-decoration: none;
    color: #000; /* Color del texto del enlace */
    font-weight: bold;
    padding: 3px 15px; /* Espacio alrededor del texto del enlace */
    /*border: 1px solid #000; /* Borde alrededor del enlace */
    border-radius: 5px; /* Bordes redondeados */
} 


.menuPrincipal ul li:hover{
cursor: pointer;
}

.iconoHamburguesa{
border:none;
cursor:pointer;
fill:white;
display: none;
}

.iconoHamburguesa svg{
width: 1.5em;
height: 1.5em;
}
	
.fila{
display: flex;
padding: 5px;
gap:5px;
}

.fila img{
width:100%;
border-radius: 9px;
}
			
.triangleup{
background-color: transparent;
clip-path: polygon(50% 0%,100% 100%, 0% 100%);
cursor: pointer;
height: 3em;
}

.triangleup.activo{
font-weight: bold;
}

.carrousel{
	width: 100%;
	background-color: solid transparent;
	/*overflow: hidden;*/
}

.visor{
	width:500%;
	background-color:solid transparent;
	display:flex;
	flex-flow:no nowrap;
	justify-content:space-between;
	align-content:center;
	transition:all 0.5s;
	transform:translateX(0%);
}

.carrousel .fila{
	width: 100%; /*calc(100%/2);pk ytenemos2 img*/
	min-height: 2em;
}

/*.carrousel, .activo{
	font-weight: bold;
}
*/


@media screen and (max-width:640px){
header{
	background-size: calc(100vw/2);
	background-position:57% 30%; 
		}


	header nav{
		width:100%;
		height: 0;
		transition: all 0.5s;
		overflow:hidden; 
		display:flex;
		flex-flow:column nowrap;
		justify-content: center;
		align-items: center;
		position: relative; 
		background-color: rgb(0, 0, 0, 0.1);
		/*display:none;*/
		/*pointer-events: none; /*evita propagar eventos del ratón*/
		/*centrar elementos del menu*/
		}

	header nav.activo {
		height: calc(100vh/9);
		position: relative;
		top: 0;
		padding-top: 9%; /* Ajusta este valor según lo necesario */
		font-size: 9pt;
		z-index: 100;
		/*pointer-events: auto;*/
		}


/* Pseudo-elemento ::before para el fondo animado */
header nav.activo::before {
  content: "";
  background-image: url(https://marcyperlaan.github.io/migaleria/comun/logop2.png);
  background-repeat: repeat;
  background-size: auto 60%;
  /*background-position: right center; /* Ajusta la posición de fondo a la derecha y centrada verticalmente */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation: moveDownDiagonal 60s linear infinite;
  z-index: -1; /* Coloca el pseudo-elemento detrás del contenido del elemento principal */
  opacity: 1; /* Añade opacidad */
}

  #ih {
        position: relative;
        z-index: 101; /* Ajusta el z-index según sea necesario */
    }


@keyframes moveDownDiagonal {

    0% {
        background-position: 100% 0; /* Start position at the top */
        opacity: 0.5; /* Fully visible */
    }
    100% {
        background-position: 0 calc(100% - tan(72deg) * 100%); /* End position at the bottom (upwards) */
         opacity: 0; /* Fully transparent */
    }

}





 .imagen-animacion {
    right: 0; /* Cambia la posición de la derecha en dispositivos móviles */
    transform: translateY(0%); /* Iniciar oculta en la parte inferior en dispositivos móviles */
  }

.iconoHamburguesa{
	position: absolute;
	bottom: 0; 
	display: block;
	cursor: pointer;
	margin-left: auto;
	max-width: 100%; 
	padding: 5px; /* Reducir el padding */
	font-size: 20px; /* Cambiar el tamaño del icono */
  z-index: 101; /* Asegura que esté por encima del pseudo-elemento */
}
	}

/* Estilo para el botón fijo */
#ih {
    position: absolute; /* Permite posicionar el botón con respecto al contenedor */
    bottom: 0; /* Lo mantiene pegado en la parte inferior del contenedor */
    right: 0; /* Lo mantiene en la esquina derecha */
    margin: 10px; /* Espacio opcional alrededor del botón para que no esté pegado a los bordes */
}

	/* Estilos para el botón de hamburguesa en pantallas pequeñas */
.iconoHamburguesa ul li{
/* Mostrar el botón de hamburguesa en pantallas pequeñas */
display: block;
margin-top: 30px;
cursor: pointer;
margin-left: auto;
padding: 10px;
max-width: 100%; 
}

.menuPrincipal ul{
flex-direction: row;

}

.menuPrincipal ul li{
margin:2rem 0;
}

.galerias {
font-size: 14px; /* Reduce el tamaño de fuente para mejor visualización */
     }

.galerias table {
/*table-layout: fixed; /* Fuerza el ancho de las columnas de la tabla */
width: 30%;
position: relative;
margin-left: 105px; /* Agrega un margen izquierdo para separarla del contenido anterior */
            }

.galerias td .triangleup {
font-size: 20px; /* Aumenta el tamaño del triángulo de cambio */
            }

.Logo {
  position: absolute;
  z-index: 2; /* Asegura que el logo esté por encima de otros elementos */
}

@media screen{
	min-height:calc(100vh/9);
	}