body {font-family: "Nunito Sans";}
h1, h2, h3, h4, h5, p, input, textarea {font-family: "Nunito Sans";}
/* nunito sans */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
.nunito-sans-regular {
font-family: "Nunito Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-variation-settings:
"wdth" 100,
"YTLC" 500;
}
h1 {
margin: 0;
font-size: 6rem;
line-height: 1.5;
color: #f1f1f1;
letter-spacing: 0;
}

h1 a {
color: #f1f1f1;
text-decoration: none;
}
h3 {
font-size: 1.8rem;
font-weight: 600;
color:#1a1a1a;
}

h3 a {
color: #1a1a1a;
text-decoration: none;
}
h3 a:hover {
color: #f1f1f1;
}

h4 {
font-size: 1.5rem;
font-weight: 600;
color:#1a1a1a;
}

h4 a {
color: #1a1a1a;
text-decoration: none;
}
h4 a:hover {
color: #f1f1f1;
}

h5, input, textarea {
font-size: 1.1rem;
font-weight: 600;
color:#1a1a1a;
}

h5 a {
color: #1a1a1a;
text-decoration: none;
}
h5 a:hover {
color: #f1f1f1;
}

* {box-sizing: border-box;
}


header {
width: 100%;
padding-top: 20px;
display: flex;
z-index: 3;
position: absolute;
}
.navcontainer {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding-left: 30px;
padding-right: 30px;
}
.logo {
max-width: 200px;
}
.topnav {
display: flex;
flex-wrap: wrap;
justify-content:flex-start;
text-align: center;
text-decoration: none;
}
.topnav a {
float: left;
display: flex;
padding-left: 30px;
}

.texto-nav {
font-size: 1.3rem;
font-weight: 500;
color: #1a1a1a;
font-style: normal;
line-height: 1.3;
letter-spacing: 0;
display: block;
text-decoration: none;
}

.texto-nav a{
color:#1a1a1a;
text-decoration: none;
}

.texto-nav a:hover {
text-decoration: underline
}

footer{
display: grid;
height:20vh;
width: 100%;
Grid-template-columns: 33% auto auto;
Grid-template-rows: 17vh 2vh;
Grid-template-areas: 
"p c l " 
"b b b ";
padding-left: 30px;
padding-right: 30px;
grid-column-gap: 4rem;
grid-row-gap: 1.2rem;
}

.footer a{
text-decoration: none;
color: #1a1a1a;
}
/* underline text on hover */
.footer a:hover {
text-decoration:underline;
}

/* Add an active class to highlight the current page */
.footer a.current {
font-weight: 700;
text-decoration: underline;
}

.g1{
grid-area: p;
display: flex;
}
.g2{
grid-area: c;
}
.g3{
grid-area: m;
}
.g4{
grid-area: l;
display: flex;
}
.mcap img{
max-width: 120px;
min-width: 120px;
}

.mcaptexto{
padding-left: 1rem;
}
.g5{
grid-area: b;
padding-bottom: 3rem;
}

/* underline text on hover */
.topnav a:hover {
text-decoration:underline;
}
/* Add an active class to highlight the current page */
.topnav a.current {
text-decoration:underline;
font-weight: 700;
}
/* Hide the link that should open and close the topnav on small screens */
.navmenu {
display: none;
}
/* When the screen is less than 1100 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1100px) {
.topnav a{display: none;}
.navmenu {
  float: right;
  display: block;
  padding-left: 30px;
}
footer{display: grid; height:auto; Grid-template-columns: auto auto; Grid-template-rows: auto auto auto;
  Grid-template-areas: 
   "p c " 
   "l l"
   "b b";
  grid-gap: 1rem;
}  
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1100px) {
.topnav.responsive {position: relative;}
.navmenu.responsive a {
position: absolute;
right: 0;
top: 0;
}
}
/* Cuando la pantalla es menos de 700 pixeles, las columnas de footer disminuyen y aumentan las filas */
@media screen and (max-width: 700px) {
footer{display: grid; height:auto; Grid-template-columns: 100%; Grid-template-rows: auto auto auto auto auto;
Grid-template-areas: 
"p"
"c" 
"m"
"l"
"b";
grid-gap: 1rem;}

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

.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 5;
top: 0;
left: 0;
background-color: #1a1a1a;
background-color: #1a1a1a;
overflow-x: hidden;
transition: 0.5s;
}

.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}

.overlay a {
padding-top: 20px;
text-decoration: none;
color: #7B8CDE;
display: block;
transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}

.overlay .closebtn {
position: absolute;
top: 20px;
right: 30px;
}

@media screen and (max-height: 450px) {
.overlay .closebtn {
top: 20px;
right: 30px;
}
}

/* codigo home */
.mySlides {display: none;}
.mySlides img {vertical-align: middle;
height: 100vh;
width: 100%;
overflow: hidden;
object-fit: cover;}

.slideshow-container {
max-width: 100%;
height: 100vh;
}

.dots {
position: absolute;
width: 100%;
align-content: center;
top: 95vh;
}
/* The dots/bullets/indicators */
.dot {
height: 12px;
width: 12px;
margin: 0 2px;
background-color: #f1f1f1;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active {
background-color: #1a1a1a;
}

/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1s;
}

@keyframes fade {
from {opacity: 1} 
to {opacity: 1}
}

.about {
display: flex;
align-items: center;
justify-content: space-between;
width: 100vw;
padding: 3rem;
gap: 2rem;
}
/*.texto-inicio {
width: 70%;
}*/
.about button{
min-width: 250px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
text-decoration-color: #1a1a1a;
color: #1a1a1a;
font-size: 1rem;
font-weight: 700;
background-color: transparent;
border: solid;
border-color: #1a1a1a;
border-width: 0.2em;
border-radius: 1rem;
padding: 0.8rem;
cursor: pointer;
margin-top: 2em;
float: right;
justify-items: center;
}

.about button:hover{
color: #f1f1f1;
background-color: #1a1a1a;
text-decoration: none;
}


@media screen and (max-width: 900px) {
.about{
padding: 3em 2em;
display: flex;
flex-wrap: wrap;
justify-content:flex-start;
width: 100%;
}
.about span{
width: 100%;
}
.about button{
margin-top: 0.5rem;
}
}

/* codigo quienes somos */
.page-content{
  padding-top: 20vh;
  gap: 2rem;
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 2rem;
  align-items: center;
}
.container{
  gap: 2rem;
  width: 100%;
  display: flex;
  margin-bottom: 2rem;
  align-items: center;
}
.img-pag img{
  border-radius: 1rem;
  object-fit: cover;
  height: 75vh;
  min-width: 40vw;
  overflow: hidden;
  max-width: 100%;
}
.somos {
padding-right: 30px;

}
a{
  color: #1a1a1a;
}
@media screen and (max-width: 950px) {
  .container{
      display: block;
      margin-bottom: 2rem;
  }
  .somos{
width: 100%;
}

.img-pag img{
  border-radius: 1rem;
  object-fit: cover;
  width: 100%;
  margin-bottom: 1.5rem;
}
}

.encabezado{
  margin-bottom: 0.8em;
}

ul{
  padding-left: 2rem;
  padding-bottom: 1rem;
}
hr{
 border-color: #1a1a1a;
 color: #1a1a1a;
 border-style:solid;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: transparent;
  color: #1a1a1a;
  cursor: pointer;
  padding: 0.8rem;
  min-width: 300px;
  width: 100%;
	border: solid;
  border-color: #1a1a1a;
  border-width: 0.2em;
	border-radius: 1rem;
  text-align: left;
  outline: none;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.act, .collapsible:hover {
  color: #f1f1f1;
  background-color: #1a1a1a;
  text-decoration: none;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background-color: transparent;
  transition: max-height 0.2s ease-out;
  align-items: center;
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #1a1a1a;
  float: right;
  margin-left: 5px;
}
.collapsible:after:hover{
  color: #f1f1f1;
}

.act:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

 .enlaces:hover{
  text-decoration: underline;
  color: #7B8CDE;
 }