@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

/*Estilos de Bodys*/
body {
font: 15px arial,helvertica,sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
background-color: #ffffff;
min-height:200vh ;}

.bodyQS {
background: url('../imagenes/QS2.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover ;
color: #fff;}

.bodySDV {
background: url('../imagenes/SDV.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover ;
color: #fff;}

.bodySDV2 {
background: url('../imagenes/SD1.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover ;
color: #fff;}

.bodyS1 {
  background: linear-gradient(#395d8d,rgb(192, 230, 255)) ;    
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover ;
color: #000;
}

.bodyCT {
background: url('../imagenes/CONTACTO.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover ;
color: #fff;
}

.bodySM {
background: url('../imagenes/SM.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover ;
color: #fff;
}

.bodySF {
background: url('../imagenes/SF.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover ;
color: #fff;
}
 
/*Estilo globales*/

.contenedor{
display: flex;
width: 100%;
height: 100%;
margin: auto;
overflow: hidden;
max-width: 1400px;
}

.contenedor nav{
flex: 50%;
align-items: center;
justify-content: center;
max-width: 1400px;

  }

.contenedorQS{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 90%;
  color: rgb(221, 231, 240);
}
.contenedorQS div{
 flex: 50% ;
 margin: 2em;
 padding-left: 1rem;
 font-size: 1.5rem;
}

.contenedorAC{
width: 40%;
height: 50%;
margin: auto;
overflow: hidden;  
}

.contenedor2{
width: 70%;
height: 100%;
margin: auto;
overflow: hidden;
}

.contenedor3{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

.boton1{
height: 50px;
background-color:  rgb(194, 128, 28);
border: 0;
padding-left: 20px;
padding-right: 20px;
color: #fff;
overflow: hidden;
}

.boton1 a{
  font-size: 1rem;
  }

.SectionI {
display: flex;
width: 80%;
height: 80%;
margin: 2;
align-items: center;
justify-content: center
}

.SectionI img {
width: 0;
flex-grow: 1;
object-fit: cover;
opacity: .8;
transition: ease;
padding: 20px;

}

.SectionI img:hover {
height: 675px;
width: 483.75px;
flex-grow: 1;
filter: contrast(100%);
opacity: 1;   
}

.Videobox{
display: flex;
align-items: center;

}
.Video {
  flex: 100%;
  height: 900px;
  width: 510px;
  border-radius: 5%;
}
/*encabezado*/

header{
  background-color: #2b4977;
  color: #fff;
  padding-top: 10px;
  border-bottom: 5px solid #02273a;
}

header a{
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

.logo{
    display: flex;
    flex-direction: row;
    font-size: 1.5em;
    flex-wrap: wrap;
}
    
.logo img{
justify-content: space-between;
vertical-align: middle;
text-align: center;
margin-left: 1rem;
margin-right: 0.5rem; 
max-width: 2.2rem;
max-height: 2.2rem;
border-radius: 50%;
}

#cabecera{
display: flex;
min-width: 1px;
background: linear-gradient(#395d8d,rgb(192, 230, 255)) ;
background-repeat: no-repeat;
text-align: center;
align-items: center;
justify-content: center
}

#cabecera img{
flex: 100%;
max-width: 50rem;
min-width: 1px;
text-align: center;

 }

#cabecera h1{
margin-top: 100px;
font-size: 55px;
margin-bottom:10px ;
}


 /*carrusel*/

 .slider {
  width: 75vw;
  height: auto;
  margin: auto;
  overflow: hidden;
}

.slider .slide-track {
  display: flex;
  animation: scroll 40s linear infinite;
  -webkit-animation: scroll 40s linear infinite;
  width: calc(200px * 14);
}

.slider .slide {
  width: 200px;
}

.slider .slide img {
  width: 100%;
}

@keyframes scroll {
  0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
  }
  100% {
      -webkit-transform: translateX(calc(-200px * 7));
      transform: translateX(calc(-200px * 7));
  }
}


.container-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
}

.carruseles {
  width: 1000%;
  height: 100%;
  display: flex;

}

.slider-section {
  width: calc(100% / 10);
  height: 100%;
}

.slider-section img {
  width: 25%;
  height: 25%;
  object-fit: cover;
  border-radius: 15px;
}

.btn-left,
.btn-right {
  display: flex;
  position: absolute;
  top: 50%;
  font-size: 1.5rem;
  border-radius: 50%;
  padding: 5px;
  font-weight: 600;
  cursor: pointer;
  color: #ffffff81;
  transform: translate(0,-50%);
  transition: .5s ease;
  user-select: none;
  background-color: #395d8d;
}

.btn-left:hover,
.btn-right:hover {
  background-color: #333333d4;
  color: #fff;
}

.btn-left {
  left: 10px;
}

.btn-right {
  right: 10px;
}

/*formularios boletin*/
#boletin{
  display: flex;
  padding: 15px;
  color: #fff;
  background: #2b4977;  
  overflow: hidden;
  flex-wrap: wrap;
}

#boletin div{
flex: 50%;
padding: 10px;
margin: auto;
text-align: center;
}
    

#boletin div p{
font-size: 1.5rem;
}

#boletin div form{
  align-content: center;
  align-items: center;
}

#pboletin {
  font-size: 30px;
  overflow: hidden;
}

/*cajas*/

#cajas2{
display: flex;
font: 1.9rem arial,helvertica,sans-serif;
text-align: justify; 
align-items: center;
justify-content: center;
padding: 10px;
margin: 3em;
}


#cajas3{
display: flex;
font: 1.7rem arial,helvertica,sans-serif;
text-align: justify;
flex-wrap: wrap;
width: 90%;
padding: 10px;
margin-left: 5dvh
}

#cajas3 div{
flex: 100%;
 font: 1.7rem arial,helvertica,sans-serif;
 text-align: left;
 width: 90%;
 
}

#cajasPP{
  display: flex;
  font: 1.7rem arial,helvertica,sans-serif;
 text-align: left;
flex-wrap: wrap;
  width: 100%;
  padding: 10px;
  margin-left: 5dvh
}
#cajasPP div{
  flex: 100%;  
  width: 100%;
}

#cajasPP div h2{
flex: 100%;
 font: 1.7rem arial,helvertica,sans-serif;
 text-align: left;
 width: 100%;
 
}

#cajasPP div h3{
  flex: 100%;
   font: 1.4rem arial,helvertica,sans-serif;
   text-align: left;
   width: 100%;
   
}


#cajas4{
  display: flex;
  font: 1.7rem arial,helvertica,sans-serif;
  float: left;
  text-align: justify;
  width: 99%;
  padding: 5px;
}

#cajas4 form section{
flex: 100%;
  font: 0.8rem arial,helvertica,sans-serif;
  text-align: justify;
  width: 99%;
  padding: 5hem;
  height: fit-content;
}

#cajas4 form section h4{
  flex: 100%;
    font: 1.3rem arial,helvertica,sans-serif;
    text-align: center;
   
  }


/*estilos de pie de pagina */

footer{
color: #fff;
background-color: #2b4977;
text-align: center;
height: fit-content;
width: 100%;
padding-bottom: 10px;
}

/* estilos de Main*/
main {
width: 100%;;
}


/*flex Contenedores*/

.containerindexflex {
display: flex;
flex-wrap: wrap;
background-color: transparent;
padding: 10px;
align-items: center;
justify-content: center;

}

.containerindexflex > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 2rem;
  align-content: center;
  flex: 50%;
 padding: 35px;
}

.containerindexflex > div> img{
height: 6rem;
width: 6rem;
}

.containerindexflex2 {
  display: flex;
  flex-wrap: wrap;
  background-color: transparent;
  padding: 10px;
  align-items: center;
  justify-content: center;
}

.containerindexflex2 > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 30px;
  align-content: center;
  flex: 50%;
 padding: 15px;
}

.containerindexflex2 > div h1{
font-size: 4rem;
  text-align: center;
  
}

.containerindexflex2 > div> img{

height: 100%;
width: 100%;
}

.containerQSflex2 {
  display: flex;
  flex-wrap: wrap;
  background-color: transparent;
  padding: 5px; 
  align-items: center;
  justify-content: center;
}

.containerQSflex2 > div { 
  text-align: center;
  font-size: 30px;
  align-content: center;
  flex: 50%;
 padding: 15px;
 flex-direction: row;
 width: 90%;
}

.containerQSflex2 > div> img{


width: 30vw; 
flex-basis:0 ;
flex-grow: 99;
border-radius: 15%;
margin: auto;  
}

.containerSDVflex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: transparent;
  padding: 10px;
  align-items: center;
  justify-content: center;
  color: #000; 
}
  
.containerSDVflex > div {   
  text-align: center;
  font-size: 2rem;
  align-content: center;
  flex: 50%;
  padding: 2rem;   
  align-items: center;
}
  
.containerSDVflex > div> img{
height: 100%;
width: 100%; 
border-radius: 15%;  
}

.containerSDVflex > div> p{
     text-align: justify;      
}

.containerSDVflex > div li {   
  text-align: left;    
  align-content: center;
  flex: 50%; 
   }

   
.containerSDVflexR {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: transparent;
  padding: 10px;
  align-items: center;
  justify-content: center;
  color: #000; 
}
  
.containerSDVflexR > div {   
  text-align: center;
  font-size: 2rem;
  align-content: center;
  flex: 50%;
  padding: 2rem;   
  align-items: center;
}
  
.containerSDVflexR > div> img{
height: 100%;
width: 100%; 
border-radius: 15%;  
}

.containerSDVflexR > div> p{
     text-align: justify;      
}

.containerSDVflexR > div li {   
  text-align: left;    
  align-content: center;
  flex: 50%; 
   }
  

.containerSflex {
      display: flex;
      flex-wrap: wrap;
      background-color: transparent;
      align-items: center;
      justify-content: center;
      color: #000; 
      padding: 5px; 
}
      
.containerSflex > div {   
  flex-direction: row;
      text-align: center;
      font-size: 2rem;
      align-content: center;
      flex: 50%;
      width: 100%;
      padding: 35px;   
      align-items: center;
}

.containerSflex > div p{
font-size: large
   }

.containerSflex > div img{
        height: 20rem;
        width: 20rem;    
      border-radius: 15%;  
}

.containerSDVflex1 > div> img{
  height: 30rem;
  width: 30rem;
  border-radius: 15%;
  flex: 50%;
}


#containerSI {
  display: flex;
  flex-wrap: wrap;
  background-color: transparent;
  padding: 5px;
  align-items: center;
  justify-content: center;
  color:black;
  font-size: 3rem;
}

#containerSI div {
flex: 50%;
flex-direction: row;
width: 100%;
align-items: center;
justify-content: center;
padding: 35px;
text-align: justify;
}


#containerSI div p{
font-size: 1.9rem;
}

#containerSI div li{
  font-size: 1.9rem;}


#containerSI div img {

  max-width: 100%;
  border-radius: 35px 35px 35px 35px;
  padding: 20px;   
  align-items: center;
  justify-content: center;
   }

   
#containerSI2 {
  display: flex;
  flex-wrap: wrap;
  background-color: transparent;
  padding: 2px;
  align-items: center;
  justify-content: center;
  color:black;
  font-size: 3rem;
}

#containerSI2 div {
flex: 50%;
flex-direction: row;
width: 100%;
align-items: center;
justify-content: center;
padding: 3px;
text-align: center;
}


#containerSI2 div p{
font-size: 1.9rem;
}

#containerSI2 div li{
  font-size: 1.9rem;  }

#containerSI2 div img {
width: 30vw;
border-radius: 15%;
padding: 3px;   
align-items: center;
justify-content: center;}

.abrir-menu,
.cerrar-menu {
    display: none;
}

/*imagenes*/

.circular--square {
  border-radius: 50%;}

.izqSM {
width: 600px;
border-radius: 50%;
margin-right: 100px;}

.izqAC {
 width: 600px;
 border-radius: 10%;
 margin-right: 100px; 
 }

 .izqAC2 { 
 width: 600px;
 border-radius: 10%; 
 }

.izqIndex {
float: left;
max-width: 100%;
border-radius: 35px 35px 35px 35px;
padding: 20px;   
align-items: center;
justify-content: center;
 }

.derSM {
width: 600px;
border-radius: 50%;
margin-left: 100px;
   
 }

 .izqSDV {

border-radius: 50%;
margin-right: 100px;
   
 }
 .derSDV {  
width: 600px;
border-radius: 50%;
margin-left: 100px;    
}

#containerSM {
  height: auto;
  width: auto;
  position: relative;
  color:black;
}

/*tipos de texto y parrafo*/

.pSM {
font-size: 22px;
}

.pSI {
  font-size: 22.5px;
  text-align: justify;
  margin-right: 30px;
  }

.pSF {
  font-size: 22px;
  color: white;
  }

.LSDV {
  font-size: 24px;
  list-style-type: circle;
  list-style: circle;
  list-style-position: outside;
  }

.PJ {

  text-align: justify;
  font-size: 24px;
}

.PJsdv {

  text-align: justify;
  font-size: 20px;
}

.PCTsdv {

  text-align: center;
  font-size: 30px;
}

.PJsdv1 {

  text-align: justify;
  font-size: 28px;
  margin-left: 20px;
  margin-right: 20px;
}

/* Estilos de menu desplegable*/

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Open Sans';
}

nav{
	max-width: 900px;
	margin: auto;
	background-color: #2b4977;
	font-size: 2rem;
	margin-top: 50px;
}
.menu-horizontal{
	list-style: none;
	display: flex;
	justify-content: space-around;
}
.menu-horizontal > li > a{
	display: block;
	padding: 15px 20px;
	color: white;
	text-decoration: none;
}
.menu-horizontal > li:hover{
	background-color: #2b4977;
}
.menu-vertical{
	position: absolute;
	display: none;
	list-style: none;
	width: 200px;
	background-color: rgba(0, 0, 0, .5);
}
.menu-horizontal li:hover .menu-vertical{
	display: block;
}
.menu-vertical li:hover{
	background-color:transparent;
}

.menu-vertical li a{
	display: block;
	color: white;
	text-decoration: none;
	padding: 15px 15px 15px 20px;
}

/* estilos del Formularios*/

.Form1c{ 
  width: 100%;
  height:100%;
  background-color:  #2b4977;
  margin: 0;
  margin-top: auto;
  margin-bottom: auto;
  box-shadow: 7px 13px 37px #000;
  padding:20px 30px 
   }  

  .Form1c h4 {
  margin: 0;
  color: white;
  text-align: center;
  margin-bottom: 30px;
  border-bottom: 1px solid;
  font-size: large;
   }
  
   .controlsp {
  width: 100%;
  margin-bottom: 25px;
  padding: 11px 10px;
  border-bottom: solid #164061 ;
   }

   .controlcm {
    width: 100%;
    margin-bottom: 25px;
    padding: 11px 10px;
    border-bottom: solid #164061 ;
     }
 
  .Form1c p {
  height: 60px;
  text-align: justify;
   }
  
   .boton2{
    height: 38px;
    background-color: #164061 ;
    border: 0;
    padding-left: 20px;
    padding-right: 20px;
    color: #fff;
    margin-top: 25px;
  }
  
  .Form1c a{
  color: white;
  text-decoration: none;
  font-size: 14px;
  }
  .Form1c a:hover {
  text-decoration: underline;
  }
 
.Form1Ac{ 
      flex: 100%;
      width:100%;
      height:100%;
      background-color:  #2b4977;
      margin: 5px;
      margin-top: auto;
      margin-bottom: auto;
      box-shadow: 7px 13px 37px #000;
      padding:20px 30px; 
      color:white;
      align-items: center;
      align-content: center;     
}
      
.Form1Ac h4 {
      margin: 0;
      color: white;
      text-align: center;
      margin-bottom: 30px;
      border-bottom: 1px solid;
}
.Form1Ac p {
      height: 100%;
      width: 100%;
      text-align: justify;
}
  
.Form1Ac a{
      color: white;
      text-decoration: none;
      font-size: 14px;
}

.Form1Ac a:hover {
      text-decoration: underline;
}
  

.texa {
    width:100%;
    direction:ltr;
    display:block;
    max-width:100%;
    line-height:1.5;
    padding:15px 15px 30px;
    border-radius:3px;
    border:1px solid #F7E98D;
    transition:box-shadow 0.5s ease;    
    resize: none;
    text-align: justify;
}

/* estilos footer*/

  .alineadoTextoImagenCentro{
    vertical-align: middle;
  }

  .display-footer{
    display: grid;
    grid-template-columns:25% 25% 25% 25%;
    align-content: baseline;
    background-color:#395d8d;
    
    float: left; 
    }

.footer-box {
height: fit-content;
text-align: justify;
  }

.footer-box img {
margin-left: 10%;
height: 80%; 
width: 80%;
}

.footer-box2 {
height: fit-content;
text-align: left;

}
      
.footer-box2 img {
vertical-align: middle;
margin-right: 3%;

}

/*responsive flexbox*/

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;  
}
.rowSV {
  display: flex;
  flex-wrap: wrap;  
}

/* Create four equal columns */
.column {
  flex: 25%; 
  text-align: justify;
  max-width: 25%;
  padding: 0 4px;  
}

.column1 {
  flex: 25%; 
  text-align: justify;
  max-width: 25%;
  padding: 40px;
  align-content: center; 
  font-size: xx-large;
 
}

.column1 li{
  align-content: center;  
  padding: 1px;
  font-size: 22px;

}

.column2 {
  flex: 25%;
  padding: 20px;
  align-content: flex-start;
  text-align: left;
}

.column img {
  vertical-align: middle;
  margin-top: 8px;
  width: 100%;
}

.column2 img {
  vertical-align: middle;
  margin-right: 3%;
  border-radius: 50%;
  height: 30px;
  width: 30px;

}

.column22 {
  flex: 25%; 
  text-align: justify;
  max-width: 25%;
  padding: 0 4px;  
}

.column3 {
  flex: 33.3%; 
  text-align: justify;
  max-width: 30%;
  padding: 0 4px; 
  margin: 2em; 
  color: #000;
}

.column22 img {
  vertical-align: middle;
  margin-right: 3%;
  height: 95%;
  width: 95%;

}

/* On screens that are 992px wide or less, go from four columns to two columns */


/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 800px) {
  .column2 {
   display: none;
}

.column {
    flex: 100%; 
    text-align: center;
    max-width: 100%;
    padding: 0 4px;  
}

.logo {
display: none;
}

.contenedorAC{
  width: 95%;
  height: 50%;
  margin: auto;
  overflow: hidden;  
}

.Video {
  flex: 100%;
  height: 50%;
  width: 50%;
  border-radius: 5%;
}

}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {

.column1 {
flex: 100%;
max-width: 100%;
padding: 10px;
}

.logo {
display: none;
}

.Form1c{ 
  width: 100%;
  height:100%;
  background-color:  #2b4977;
  margin: 0;
  margin-top: auto;
  margin-bottom: auto;
  box-shadow: 7px 13px 37px #000;
  padding:20px 30px 
}  

.Form1c h4 {
  margin: 0;
  color: white;
  text-align: center;
  margin-bottom: 30px;
  border-bottom: 1px solid;
  font-size: large;
}
  
.controlsp {
  width: 100%;
  margin-bottom: 25px;
  padding: 11px 10px;
  border-bottom: solid #164061 ;
}

.controlcm {
    width: 100%;
    margin-bottom: 25px;
    padding: 11px 10px;
    border-bottom: solid #164061 ;
}
 
.Form1c p {
  height: 60px;
  text-align: justify;
}

.Form1c H3 {
font-size: 16px;
text-align: justify;
}
  
.boton2{
    height: 38px;
    background-color: #164061 ;
    border: 0;
    padding-left: 20px;
    padding-right: 20px;
    color: #fff;
    margin-top: 25px;
}
  
.Form1c a{
color: white;
text-decoration: none;
font-size: 14px;
}

.Form1c a:hover {
text-decoration: underline;
}
 
.Form1Ac{ 
flex: 100%;
width:100%;
height:100%;
background-color:  #2b4977;
margin: 5px;
margin-top: auto;
margin-bottom: auto;
box-shadow: 7px 13px 37px #000;
padding:20px 30px; 
color:white;
align-items: center;
align-content: center;     
}
      
.Form1Ac h4 {
margin: 0;
color: white;
text-align: center;
margin-bottom: 30px;
border-bottom: 1px solid;
}

.Form1Ac h1 {
font-size: 16px;
  }
  


.Form1Ac p {
height: 100%;
width: 100%;
text-align: justify;
}
  
.Form1Ac a{
color: white;
text-decoration: none;
font-size: 14px;
}

.Form1Ac a:hover {
text-decoration: underline;
}
  

.texa {
width:100%;
direction:ltr;
display:block;
max-width:100%;
line-height:1.5;
padding:15px 15px 30px;
border-radius:3px;
border:1px solid #F7E98D;
transition:box-shadow 0.5s ease;    
resize: none;
text-align: justify;
}

}

@media screen and (max-width: 600px) {
.column3 {
flex: 100%;
max-width: 100%;
flex-direction: column;
}

/* parrafos y texto*/

.PJsdv1 {
text-align: justify;
font-size: 20px;
}

.pSM {
font-size: 20px;
}
    
.pSI {
font-size: 20px;
text-align: justify;
margin-right: 15px;
}
    
.pSF {
font-size: 20px;
color: white;
}
    
.LSDV {
font-size: 24px;
list-style-type: circle;
list-style: circle;
list-style-position: outside;
}
    
.PJ {    
text-align: justify;
font-size: 20px;
}
    
.PJsdv {    
text-align: justify;
font-size: 20px;
}
    
.PCTsdv {    
text-align: center;
font-size: 23px;
}
    
h3{  
font-size: 26px;
text-align: center;
}

/*carrucel*/

.slider-section img {
  width: 90%;
  height: 90%;
  object-fit: cover;
  border-radius: 15px;
}


/*contenedores flex*/
.containerSDVflex{
display: flex;
flex-wrap: wrap;
background-color: transparent;
padding: 10px;
align-items: center;
justify-content: center;
color: #000; 
}

.containerSDVflex > div {   
text-align: center;
font-size: 1.8rem;
align-content: center;
flex: 100%;
padding: 1rem;   
align-items: center;
}
.containerSDVflex > div> img{
width: 100%;
height: 100%;
border-radius: 15%;  
}

.containerSDVflexR{
display: flex;
flex-wrap: wrap-reverse;
background-color: transparent;
padding: 10px;
align-items: center;
justify-content: center;
color: #000; 
}

.containerSDVflexR > div {   
text-align: center;
font-size: 1.8rem;
align-content: center;
flex: 100%;
padding: 1rem;   
align-items: center;
}

.containerSDVflexR > div> img{
width: 100%;
height: 100%;
border-radius: 15%;  

}

#cajas2 H3 {  
font-size: 22px;
align-items: center;
margin-bottom: 0;
}

#cajas2{
display: flex;
font: 1rem arial,helvertica,sans-serif;
text-align: justify; 
align-items: center;
justify-content: center;
padding: 10px;
margin: 5px;
}

}




@media screen and (max-width: 800px) {
  .column22 {
    flex: 50%;
    max-width: 50%;
  }

/*haber que pasa*/
  #containerSI2 div {
    flex: 100%;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 3px;
    text-align: center;
    }
    
    
    #containerSI2 div p{
    font-size: 1.9rem;
    }
    
    #containerSI2 div li{
      font-size: 1.9rem;  }
    
    #containerSI2 div img {
    width: 90%;
    border-radius: 15%;
    padding: 3px;   
    align-items: center;
    justify-content: center;}
    
/*hasta aqui */
.containerindexflex > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 1.4rem;
  align-content: center;
  flex: 100%;
 padding: 25px;
}

.containerindexflex2 > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 22px;
  align-content: center;
  flex: 100%;
 padding: 15px;
}

.containerindexflex2 > div h1{
font-size: 2rem;
text-align: center;







}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column22 {
    flex: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 800px) {
  .abrir-menu,
  .cerrar-menu {
      display: block;
      border: 0;
      font-size: 1.25rem;
      background-color: transparent;
      cursor: pointer;
  }

  .abrir-menu {
      color: #fff;
  }

  .cerrar-menu {
      color:#fff;
  }

  .nav {
      opacity: 0;
      visibility: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      position: absolute;
      top: 0;
      left: 0;  
      background-color: #2b4977;
      padding: 2rem;
      box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
  }

  .nav.visible {
    opacity: 1;
    visibility: visible;
}

.menu-horizontal{
  font-size: small;
  flex-direction: column;
}

.menu-vertical{
height: 0px;
overflow: hidden;
}

.menu-vertical{
position: absolute;
display: none;
list-style: none;
width: 200px;
background-color:#395d8d;
height: auto;
}

  .menu-horizontal li:hover .menu-vertical{
    height: auto;
  }
  .menu-vertical li:hover{
    background-color:#2b4977;
  }
  
  .menu-vertical li a{
    height: auto;
    color: white;
    text-decoration: none;
    padding: 15px 15px 15px 20px;
    box-sizing: border-box;
  }


}
}