#stickyHead{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 1;
    
    
    
}



#topHead {
    display: flex;
    justify-content: space-between;
	
}

#menu {
    border-bottom:solid 1px;
    border-color:rgba(0,0,0,1);
    width:100%;
    overflow:hidden;
    display: flex;
    justify-content: space-between;
    background-color:white;
	padding-top:5px;

    
    
    
}

#menuText{
    border:solid 1px;
    border-color:black;
    text-align:center;
    display:inline-block;
    width:100%;
    background-color:white;
	box-shadow: 0 4px 6px rgba(0,0,0,.80);
	
}

#menuText h1{
    width:100%;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    padding-top:10px;
    padding-bottom:10px;
    font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
    font-size:20px;
	border-bottom:solid 1px;
    border-color:black;
	text-align:center;

}
#menuText h1:hover{
	cursor: pointer;
	background-color:rgba(220,220,220,1)
}

#displayed{
    position:absolute;
    width:100%;

}



#greyArea{
    background-color:rgba(150,150,150,0.6);
    width:99%;
    height:200vh;
    border:solid 5px;
    border-color:rgba(75,75,75,0);
    position:absolute;


}

h1{
    font-size:5vw;
    margin-bottom:0px;
    margin-top:0px;


}



h2{
    font-size:3vw;


}
h3{
    font-size:2vw;


}

#hoverImage:hover{
	cursor: pointer;
}

#masContainer{
    background-color:rgba(250,250,250,1);
    width:99%;
    border:solid 1px;
    border-color:rgba(150,150,150,1);
	border-radius: 20px;
	overflow:hidden;
	box-shadow: 0 4px 6px rgba(0,0,0,.15);
}

#masContainer h1{
    padding-top:5px;
	position:relative;
	overflow:hidden;
    
    
}


#masContainer div{
    text-align:center;
	position:relative;
	overflow:hidden;
	
    
}
#masContainer div img{
    box-shadow: 0 8px 12px rgba(0,0,0,.5);
	
    
}

#masContainer div img:hover{
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
	cursor: pointer;
    
}


#masContainer a{
    text-decoration: none;
    color:black;
    position:relative;
    
}


#masContainer a:hover{
    color:rgba(100,100,100,1);
}

#nosotros{
	width:85%;
	text-align:justify-content;
	display:block;
	margin:auto;
}
#nosotros p{
    font-size:1.5rem;
}


.numbertext{
	font-size:1.0rem;
}

#padder {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	display:inline-block;
	justify-content: unset;
	padding-top:8px;
	padding-bottom:8px;
}	



input[type=text], select, textarea {
  width:99%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  float:center;
  margin-left:0.5%;
  font-family: Consolas, monaco, monospace;
}

input[type=submit]{
  width:99%;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 16px;
  resize: vertical;
  float:center;
  margin-left:0.5%;
  font-family: Consolas, monaco, monospace;
  font-size:25px;
}



.contacto label{
	margin-left:15px;
	font-size:1.5rem;
}

#contacto{
	background: rgba(250,250,250,1);
	width: 99%;
	box-sizing: border-box;   /* ← key line */
	border: 1px solid rgba(150,150,150,1);
	border-radius: 20px;
	padding: 10px;
	box-shadow: 0 4px 6px rgba(0,0,0,.15);
}

.hoverino:hover{
	color:rgba(200,200,200,1.0);
}


.container{
	display: flex;
	justify-content: space-between;
	margin-bottom:15px;
	margin-top:15px;
	border-bottom-style:solid;
	border-bottom-color:rgba(150,150,150,1);
	width:100%;
}

.container div{
	float:center;
	margin-top:auto;
	margin-bottom:auto;
	width:45%;
	
}
.container div img{
	
width:100%;
}


#pie{
	background-color:rgba(200,200,200,1);
	
}

#menuText a{
	text-decoration:none;
	color:black;
	
	
}




#vermas {
	width:100%;
	display:inline;
	text-align:center;
	
}

#vermas img{
	width:100%;
	
}


.error{
	display:none;
	color:red;
	float:right;
}

#logoContainerExterno{
	background-color:rgba(250,250,250,1);
    width:99%;
    border:solid 1px;
    border-color:rgba(150,150,150,1);
	border-radius: 20px;
	overflow:hidden;
	box-shadow: 0 8px 12px rgba(0,0,0,.5);
}
.shower{
		display:none;
  }
  
@media (min-width:900px){
  #controllerDiv{
    width:70%;

	display:block;
	margin:auto;
  }
  .hider{
	  display:none;
  }
	
	.shower{
	display:block;
  }
  #masContainer {
    background-color: rgba(250, 250, 250, 1);
    width: 99%;
    border: solid 1px;
    border-color: rgba(150, 150, 150, 1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .15);
    
    /* Flexbox to align items horizontally and evenly distribute the width */
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line on smaller screens */
    justify-content: space-between; /* Distribute items evenly across the container */
    gap: 20px; /* Space between the items */
    padding: 10px;
}

/* For each anchor element, ensure all items take equal width */
#masContainer a {
    text-decoration: none;
    color: black;
    flex: 1 1 calc(33.33% - 20px); /* Ensures each item takes up approximately 1/3 of the container */
    box-sizing: border-box;
    display: block; /* Ensures the anchor fills the div */
}

/* Style for the div inside each <a> */
#masContainer div {
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Styling for images */
#masContainer div img {
    width: 100%; /* Ensure the image takes up the full width of its container */
    height: 250px; /* Set a fixed height */
    object-fit: cover; /* Ensures the image fills the container proportionally */
    box-shadow: 0 8px 12px rgba(0, 0, 0, .5);
    border-radius: 4vw;
}

/* Image hover effect */
#masContainer div img:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

/* Adjust the heading styles */
#masContainer h1 {
    padding-top: 5px;
    position: relative;
    overflow: hidden;
    font-size: 2.0rem; /* Ensure consistent font size */
    margin: 0; /* Prevent any extra margin causing uneven space */
	white-space: nowrap;
}

/* Style for the h4 (smaller text under each heading) */
#masContainer h4 {
    font-size: 1rem; /* Smaller font size for the "Ver Más" text */
    margin-top: 10px; /* Add space above the h4 */
}

/* Link hover effect */
#masContainer a:hover {
    color: rgba(100, 100, 100, 1);
}

#logoContainerExterno{
  padding:1rem;
}

/* one row of logos */
#logoContainerExterno .container{
  display:flex;
  justify-content:space-between;   /* even gaps */
  align-items:center;              /* vertical align */
  flex-wrap:wrap;                  /* logos wrap on narrow screens */
  gap:1.5rem;                      /* extra breathing room */
  margin-bottom:1.5rem;
}

/* each cell */
#logoContainerExterno .container > div{
  flex:1 1 150px;                  /* grow/shrink, min 150 px */
  display:flex;
  justify-content:center;
}

/* logo image */
#logoContainerExterno .container img{
  max-height:80px;                 /* same “visual” size */
  width:auto;                      /* keep aspect ratio */
  max-width:100%;
  object-fit:contain;              /* no distortion, fits box */
}

#stickyHead2{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 1;
}

#stickyHead2{
    position: -webkit-sticky; /* Safari */
    position: center;
    top: 0;
    z-index: 1;
    
    
    
}


}