/* Global Styles */

/*TEXT FONTS*/
@font-face {
    font-family: "BebasNeue-Regular";
    src: url("./fonts/Bebas_Neue/BebasNeue-Regular.ttf");
}

@font-face {
    font-family: "Montserrat-Regular";
    src: url("./fonts/Montserrat/Montserrat-Regular.ttf");
}   

@font-face {
    font-family: "Montserrat-Bold";
    src: url("./fonts/Montserrat/Montserrat-Bold.ttf");
}  

@font-face {
    font-family: "Montserrat-Light";
    src: url("./fonts/Montserrat/Montserrat-Light.ttf");
}

@font-face {
    font-family: "Montserrat-Medium";
    src: url("./fonts/Montserrat/Montserrat-Medium.ttf");
}

/*-------------------------------------------------------------------------------------*/
/*STYLE*/

/* Cabecera */

html, body {    
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.container {
    height: 100%;  
    width: 100%;
    padding: 0;
}

.cabecera {
    width: 100%;
    height: 1140px;
    background-image: url("../../img/fondo.png");
    background-position: center;
}

.menu-principal{
    width: 100%;
    height: auto;
    background-color: #009DDF;
  }

.cabecera1 {     
    height: fit-content;    
    width: 100%;
    position: relative;
    top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cabecera1-1 {
    height: fit-content;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navegacion {
    width: 1300px;
    padding: 10px;    
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.logo {
    width: 222px;
    margin-right: 100px;
}

.logo img {        
    width: 222px;
}
.logo:hover {
    opacity: 0.5;
    /*background-color: white;  Cambia el color de fondo al pasar el ratón sobre la cabecera */
  }
.menudpg {
    margin-left: 100px;
    display: flex;
    align-items: center;
}

.menu {
    list-style: none;
    color: #000040;
    font-family: "Montserrat-Regular";
    font-size: 16px;
    display: flex;
    align-items: center;
}

.menu li {
    display: flex;
    align-items: center;
}

.menu li a {
    height: 50px;
    padding: 10px;
    margin: 0;
    text-decoration: none;   
    text-align: center; 
    color: #000040;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu li a:hover {
    color: white;
    background-color: #000040;
}

.idioma a:hover {
    color: #000040 !important;
    background-color: transparent !important;
}

.idioma img {
    width: 30px;
    padding: 5px;
    border: 1px solid #000040;
    border-radius: 50%;
    margin-right: 5px;
}

.lineavertical {
    height: 50px;
    margin: 0;
    border-left: 1px solid #1D215E80;
}

.btn {
    display: none;
}

.cabecera2 {
    width: 100%;
    margin-top: 150px;
    display: flex;    
    position: relative;
    top: 100px;
    justify-content: center;
    align-items: center;
}

.carrusel1 {
    width: fit-content;
    height: fit-content;
    padding: 0;    
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carrusel1 img {
    padding: 0;
    margin-top: 20px;
    transform:translateY(0);
    transition: transform .5s ease;
}

.personaje1 {
    width: 361px;
    position: relative;
    top: 15px;
    right: -175px;
    z-index: 10;
}

.personaje1:hover, .personaje2:hover, .personaje3:hover, .personaje4:hover {
    transform:translateY(-20px);
}

.personaje2 {
    width: 323px;
    position: relative;  
    top: -5px;  
    right: -75px;
    z-index: 5;
}

.personaje3 {
    width: 332px;
    position: relative;    
    bottom: 15px;
    right: 75px;
    z-index: 1;
}

.personaje4 {
    width: 328px;
    position: relative;
    top: 20px;
    left: -195px;
    z-index: 5;
}

.slider-section span {
    display: none;
}

.btn-left, .btn-right {
    display: none;
}

.cabecera3 {
    width: 100%;
    position: relative;
    top: 120px;
}

.letras1, .letras2, .gif {
    display: flex;
    justify-content: center;
    align-items: center;
}

.letras2 {
    margin-top: 15px;
}

.letras1 img {  
    width: 844px;
}

.letras2 p {  
    font-family: "Montserrat-Medium";
    color: #000040;
    font-size: 25px;
}

.gif {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.gif img {
    width: 50px;    
    padding: 0;
    margin: 0;
}

.gif p {    
    font-family: "Montserrat-Bold";
    color: #000040;
    padding: 0;
    margin: 0;
    font-size: 12px;
}

/* Sección */

.seccion {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.textoimagen1 {
    width: 1300px;
    margin-top: 15px;
    margin-bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.texto1 {    
    width: 544px;
    padding: 0;    
    margin: 0;
    margin-right: 25px;
    text-align: left;    
}

.parrafo1 {
    margin-bottom: 15px;
    font-family: "BebasNeue-Regular";
    font-size: 35px;
    color: #000040;
}

.parrafo2, .parrafo3, .parrafo2-2, .parrafo3-2 {
    margin-top: 0px;
    font-family: "Montserrat-Regular";
    font-size: 17px;
}

.span1, .span2{
    font-family: "Montserrat-Bold";
    color: #000040;
}

.imagen1 {
    margin: 0;
    margin-left: 25px;
}

.imagen1 img { 
    width: 350px;
}

.parrafo4, .parrafo5 {
    text-align: center;
}

.parrafo4 {
    margin: 0;
    padding: 0;
    font-family: "BebasNeue-Regular";
    font-size: 35px;
    color: #000040;
}

.parrafo5 {
    margin: 0;
    padding: 0;
    font-family: "Montserrat-Regular";
    font-size: 17px;
}

.carrusel2 {    
    /*width: 1300px;*/    
    padding: 0;
    margin: 0;
    margin-bottom: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
} 

.fila1, .fila1borde, .fila2, .fila2borde, .fila3, .fila3borde {
    display: flex;
    justify-content: center;
    align-items: center;
}

.actividadcont {
    height: 468px;
    width: 465px;
    border: 2px solid #64748B;
    border-radius: 25px;
    margin-top: 20px;
    margin-left: 5px;
    margin-right: 5px;
    background-color: white; 
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;    
    z-index: 50;
}

.actividad1borde, .actividad2borde, .actividad3borde, .actividad4borde, .actividad5borde, .actividad6borde {
    height: 468px;
    width: 465px;
    border-bottom: 155px solid;
    border-radius: 20px;
    margin-top: 0;
    margin-left: 5px;
    margin-right: 5px;    
    margin-bottom: -455px;    
    background-color: transparent; 
    display: flex;
    justify-content: center;
    align-items: center;    
    position: relative;
    top: -455px;
}

.actividad1borde {
    border-color: #009DDF;
}

.actividad2borde {
    border-color: #FCC65B;
}

.actividad3borde {
    border-color: #EC4D95;
}

.actividad4borde {
    border-color: #3EC08D;
}

.actividad5borde {
    border-color: #8080FF;
}

.actividad6borde {
    border-color: #6CBFDA;
}

.actividadcont1:hover {
    background-color: #009DDF;
    cursor: pointer;
}

.actividadcont2:hover {
    background-color: #FCC65B;
    cursor: pointer;
}

.actividadcont3:hover {
    background-color: #EC4D95;
    cursor: pointer;
}

.actividadcont4:hover {
    background-color: #3EC08D;
    cursor: pointer;
}

.actividadcont5:hover {
    background-color: #8080FF;
    cursor: pointer;
}

.actividadcont6:hover {
    background-color: #6CBFDA;
    cursor: pointer;
}

.actividadcont:hover {
    text-decoration: none;
}

.actividad1 img {
    height: 160px;
    width: 207px;
    padding: 0;
    margin-bottom: 25px;
}

.actividad2 img {
    height: 160px;
    width: 260px;
    padding: 0;
    margin-bottom: 25px;
}

.actividad3 img {
    height: 160px;
    width: 280px;
    padding: 0;
    margin-bottom: 25px;
}

.actividad4 img {
    height: 160px;
    width: 193px;
    padding: 0;
    margin-bottom: 25px;
}

.actividad5 img {
    height: 160px;
    width: 168px;
    padding: 0;
    margin-bottom: 25px;
}

.actividad6 img {
    height: 160px;
    width: 179px;
    padding: 0;
    margin-bottom: 25px;
}

.parrafoslider1 {
    height: 58px;
    width: 372px;
    margin-bottom: 15px;
    font-size: 35px;
    font-family: "BebasNeue-Regular";
    color: #000040;
}

.parrafoslider2 {
    height: 87px;
    width: 372px;
    font-size: 20px;
    font-family: "Montserrat-Bold";
    line-height: 25px;
    color: #000040;
}

.btn-left2, .btn-right2 {
    display: none;
}

.textoimagen2 {
    width: 1300px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.texto2 {
    width: 509px;
    padding: 0;    
    margin: 0;
    margin-right: 25px;
    text-align: left;
}

.imagen2 {
    margin: 0;
    margin-left: 25px;
}

.imagen2 img {
    width: 385px;
}

.parrafo6 {
    font-family: "BebasNeue-Regular";
    font-size: 35px;
    color: #000040;
}

.parrafo7, .parrafo8 {
    font-family: "Montserrat-Regular";
    font-size: 17px;
}

.parrafo9 {
    height: fit-content;
    width: fit-content;
    padding: 15px;    
    border: 2px solid #000040;
    border-radius: 7.5px;
    margin-bottom: 80px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;   
    color: white;
    background-color: #000040;
}

.parrafo9:hover {
    text-decoration: none;
    background-color: #009DDF;
    color: #000040;
}

.colaborar {
    width: 100%;
    margin-top: 50px;
    margin-bottom: 70px;
    text-align: center;
    font-family: "Montserrat-Regular";
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contenidocolaborar {
    width: 944px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.parrafo10 {
    margin-bottom: 25px;
    font-family: "BebasNeue-Regular";
    font-size: 50px;
    text-decoration: none;    
    color: #1D215E;
}

.parrafo14, .parrafo22, .parrafo25, .parrafo28 {
    margin-top: 50px;
    font-size: 25px;
}

.parrafo21, .parrafo24, .parrafo27, .parrafo30 {
    height: fit-content;
    width: fit-content;
    padding: 10px;    
    border: 2px solid #000040;
    border-radius: 7.5px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;   
    color: white;
    background-color: #000040;
}

.parrafo21:hover, .parrafo24:hover, .parrafo27:hover, .parrafo30:hover {
    text-decoration: none;
    background-color: #009DDF;
    color: #000040;
}

.span3, .span4 {
    font-family: "Montserrat-Bold";
    color: #000040;
}

.info {
    height: 1050px;
    width: 1008px;
    border: 2px solid #64748B;
    border-radius: 10px;
    margin-top: 100px;
    background-color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.borde {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.borde img {    
    width: 934px;
}

.centrarContacto {
    text-align: center;
}

.parrafo31 {
    margin-top: 50px;
    margin-bottom: 35px;
    font-family: "BebasNeue-Regular";
    font-size: 50px;
    text-decoration: none;    
    color: #1D215E;
}

.form {
    font-family:"Montserrat-Regular";
    font-size: 18px;    
    color: #1D215E;
    display: flex;
    justify-content: center;
}

.form1Div {    
    width: 250px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.parrafo32, .parrafo34, .parrafo36 {
    font-family: "Montserrat-Bold";
}

.icons {
    display: flex;
    align-items: start;
    justify-content: center;
}

.instagram, .facebook {
    margin-right: 5px;
}

.instagram { 
    padding: 7px;
    color: #1D215E;
    border: 2px solid #1D215E; 
    border-radius: 50%;    
    font-size: 20px;
}

.instagram:hover {    
    background-color: #009ddf; 
}

.facebook {
    padding: 7px;    
    color: #1D215E;
    border: 2px solid #1D215E; 
    border-radius: 50%;
    font-size: 20px;
}

.facebook:hover {     
    background-color: #009ddf;
}

.twitter { 
    padding: 7px;
    color: #1D215E;
    border: 2px solid #1D215E; 
    border-radius: 50%;    
    font-size: 20px;
}

.twitter:hover {    
    background-color: #009ddf; 
}

.form2Div {   
    width: 550px;
    display: flex;
    align-items: end;
    flex-direction: column;
}

.parrafo37 {
    width: auto;
    margin-bottom: 35px;
}

.parrafo38, .parrafo39, .parrafo40 {
    margin: 0;
}

#name, #email {    
    height: 50px ;  
    width: 500px;
    padding-left: 15px;    
    padding-right: 15px;    
    border: 1px solid #1D215E;
    border-radius: 5px;
}

.name, .email {    
    height: 50px !important;  
    width: 500px !important;
    padding-left: 15px !important;    
    padding-right: 15px !important;    
    border: 1px solid #1D215E !important;
    border-radius: 5px !important;
}

#subject {        
    height: 90px;
    width: 500px;
    padding-top: 15px;
    padding-bottom: 15px;
    scroll-padding: 15px;
    padding-left: 15px;    
    padding-right: 15px;    
    border: 1px solid #1D215E;
    border-radius: 5px;
    resize: none;
}

.subject {        
    height: 90px !important;
    width: 500px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    scroll-padding: 15px !important;
    padding-left: 15px !important;    
    padding-right: 15px !important;    
    border: 1px solid #1D215E !important;
    border-radius: 5px !important;
    resize: none !important;
}

.obligatorio {
    margin: 0;
    margin-bottom: 35px;
    font-size: 12.5px;
}

.btnform {
    text-align: right;
}

#enviar {  
    height: fit-content;
    width: fit-content;
    padding: 10px;
    border: 2px solid #000040;
    border-radius: 5px;
    font-family: "Montserrat-Regular";
    font-size: 18.5px;
    color: white;
    background-color: #000040;
}

#enviar:hover {
    height: fit-content;
    width: fit-content;
    cursor: pointer;
    color: #000040;
    background-color: #009DDF;
}

.enviar {  
    height: fit-content !important;
    width: fit-content !important;
    padding: 10px !important;
    border: 2px solid #000040 !important;
    border-radius: 5px !important;
    font-family: "Montserrat-Regular" !important;
    font-size: 18.5px !important;
    color: white !important;
    background-color: #000040 !important;
}

.enviar:hover {
    height: fit-content !important;
    width: fit-content !important;
    cursor: pointer !important;
    color: #000040 !important;
    background-color: #009DDF !important;
}

.correct-message {
    margin-top: 15px;
    font-family: "Montserrat-Light";
    font-size: 12px;
    color: #000040;
    text-align: right;
}

.error-message {
    margin-top: 15px;
    font-family: "Montserrat-Light";
    font-size: 12px;
    color: red;
    text-align: right;
}

.footer1 {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.footerDiv {
    margin-right: 13px;
    margin-bottom: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrowFooter {
    height: 65px;
    width: 20px;
    padding: 5px;
    border: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    color: white;
    background-color: #009DDF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bubble-chat i.fas.fa-comment-alt {
    top: 2px;
}
.bubble-chat {
    z-index: 9999;
    background: #009DDF;
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    padding: 11px 0;
    display: inline-block;
    width: 42px;
    text-align: center;
    border-radius: 100%;
    cursor: pointer;
    position: fixed;
    right: 17px;
    bottom: 29px;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

banner-colabora {
    background: rgba(255, 255, 255, 0.9);
    position: fixed;
    right: 10px;
    bottom: 20px;
    z-index: 99;
    border-radius: 5px;
    padding: 15px 55px 15px 95px;
    border: 1px solid #00000014;
    width: 300px;
    height: 60px;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.arrowFooter:hover {
    cursor: pointer;
}

.arrowFooter:focus {
    box-shadow: none;
    outline: none;
}

#arrowFooter2 {
    display: none;
}

.textFooter {
    height: 65px;
    width: 250px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 25px;
    color: #000040;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.textFooter img {
    width: 70px;
}

.textFooter p {
    width: 200px;    
    margin: 0;
    text-align: center;
    font-family: "Montserrat-Light";
    font-size: 13px;
    line-height: inherit;
}

.footer2 {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #009DDF;
}

.footer2Div1 {
    margin-right: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Montserrat-Light";
    font-size: 13px;
}

.footer2Div1 p {
    margin: 0;
}

.footer2Div2 {    
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer2Div2 a {    
    margin-right: 15px;
    color: white;
    text-decoration: none;
    font-family: "Montserrat-Light";
    font-size: 13px;
}

.footer2Div2 a:hover {
    color: white;
    text-decoration: none;
    opacity: 0.5;
}

.banner-colabora img {
    position: absolute;
    width: 70px;
    height: 20px;
    top: -32px;
    left: 24px;
}
/* Tooltip */

.tooltip-inner {   
    width: 200px;
    padding: 15px;
    border-radius: 15px;
    background-color: #000040;
    color: white;
    text-align: center;
    font-size: small;
    font-family: "Montserrat-Regular";
}

.tooltip.show {
    opacity: 1;
}

.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #000040 !important;
}

.tooltip.bs-tooltip-bottom .arrow:before {
   border-bottom-color: #000040 !important;
}
  
.customtool {
    margin-top: -20px;
    margin-bottom: 20px;
}

.customarrow {
    margin-top: -20px;
    margin-bottom: 20px;
}
.bubble-chat:hover {
    background: #000040;
}
.textFImg {
    font-size: 12px;
    color: #000000;
    margin: 0;
    font-weight: 400;
}
.bubble-chat i.fas.fa-comment-alt {
    position: relative;
    top: 2px;
}

.wrapper-chat {
    bottom: 28px!important;
    right: 17px!important;
    background: none!important;
    box-shadow: none!important;
    position: fixed!important;
    z-index: 1001!important;
}

.chat-iframe{
  height: 400px;
  position: fixed;
  bottom: 25px;
  right: 66px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.chat-iframe.chat-iframe-closed {
    display: none;
}

.cabecera-chat {
    background: #009DDF;
    height: 56px;
    position: absolute;
    top: 0px;
    width: 100%;
    color: #fff;
    font-weight: bold;
    padding: 16px 20px;
}

.cabecera-chat a {
    color: #fff;
    position: absolute;
    line-height: 15px;
    font-size: 15px;
    right: 20px;
    top: 50%;
    margin-top: -7.5px;
}

.cabecera-chat a:hover{
  color: #009DDF;
}

.formPrevChat {
    padding: 30px;
    margin: 55px 0 0 0;
    font-size: 14px;
    position: relative;
    width: 300px;
    background: #fff;
    height: 87%;
}

.formPrevChat input[type="text"] {
    color: #009DDF;
    font-size: 14px;
    font-weight: 300;
    padding: 0 15px;
    resize: none;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    background: #eceff1;
    border: 1px solid #dbe3e8;
    outline: none!important;
}
#intergramRoot{
    z-index: 1111!important;
}
a.btnIniciarChat {
    border-radius: 0;
    padding: 10px 35px;
    letter-spacing: 0px;
    background: #009DDF;
    border-color: #009DDF;
    color: #fff;
    text-decoration: none;
    /*display: block;*/
    text-align: center;
    border-radius: 10px;
}

a.btnIniciarChat:hover{
    background: #000040;
    border-color: #000040;
}

p.chat-legal {
    font-size: 12px;
    line-height: 20px;
    margin: 15px 0;
    /*display: block;*/
    position: relative;
    padding: 0 0 0 25px;
}

.chat-iframe iframe {
    height: 400px;
}
a.btnSendChat {
    display: block;
    position: fixed;
    width: 40px;
    z-index: 99;
    right: 7px;
    bottom: 12px;
    padding: 7px 0;
    border-radius: 10px;
    text-align: center;
}
a.btnSendChat img {
    background: #009DDF;
    border-color: #000040;
    width: 20px;
    position: relative;
    top: 2px;
    left: -1px;
}
@media (max-width: 1050px) {

    /* Cabecera */

    .navegacion {
        width: 100%;
    }

    .logo {
        margin-right: 150px;
    }

    .menudpg {
        margin-left: 150px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .btn {
        position: relative;
        width: 55px;
        height: 50px;
        margin: 0;
        color: white;
        background-color: #000040;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;        
        cursor: pointer;
        border: none;
        font-family: "Montserrat-Light";
        border-radius: 5px;
        box-shadow: none;
    }

    .btn:hover {
        color: white;
    }

    .btn:focus {
        box-shadow: none;
    }

    .menu { 
        width: 150px;
        position: absolute;
        top: 75px;
        border-radius: 5px;
        background-color: white;
        transition: all .5s cubic-bezier(0.16, 1, 0.5, 1);        
        transform: translateY(0.5rem);
        visibility: none;
        opacity: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;        
        flex-direction: column;
    }

    .menu span {
        display: none;
    }

    .menu li a {
        height: fit-content;
        padding: 5px;
        font-size: 13.5px;
    }

    .menu li a:hover {
        color: #009DDF;
        background-color: transparent;
    }

    .show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0rem);
    }
      
    #arrow {
        font-size: large;  
    }
      
    .arrow {
        transform: rotate(180deg);
        transition: 0.5s ease;
    }

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

    .centrarcarrusel1 {   
        height: fit-content;
        display: block;
        position: relative;
        top: -200px;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        width: 500px;    
    }

    .carrusel1 {        
        height: 100%;
        width: 400%;
        display: flex;
    }

    .carrusel1 img:hover {
        transform:translateY(0px);
    }

    .slider-section { 
        height: 100%;    
        width: calc(100% / 4);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .slider-section img {
        height: 100%;
        width: 450px;        
        position: inherit;        
        object-fit: cover;
        border-radius: 15px;
    }

    .slider-section span {
        border: 1px solid #000040;
        border-radius: 10px;
        padding: 10px;
        margin-top: 5px;
        display: block;
        font-family: "Montserrat-Medium";
        font-size: 15px;
        color: #000040;
        background-color: white;
    }

    .btn-left,
    .btn-right {
        display: inline-block;
        position: absolute;
        top: 50%;
        font-size: 50px;
        background-color: transparent;
        border-radius: 50%;
        padding: 5px;
        cursor: pointer;
        color: #000040;
        transform: translate(0,-50%);
        transition: .5s ease;
        user-select: none;
    }

    .btn-left {
        right: 90%;
    }

    .btn-right {
        left: 90%;
    }

    .cabecera3 {
        top: 0px;
    }

    .letras1 img {  
        width: 825px;
    }
    
    .letras2 p {  
        font-size: 25px;
    }

    /* Seccion */

    .textoimagen1, .parrafo4Div, .parrafo5Div, .textoimagen2, .parrafo9div, .colaborar, .info {
        width: 925px;
    }

    .textoimagen1 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .texto1 {
        width: 900px;
        padding: 0;
        margin: 0;
        margin-bottom: 10px;    
        text-align: center;  
    }

    .imagen1 {
        margin: 0;
    }

    .imagen1 img {
        width: 300px;
    }

    .parrafo4Div, .parrafo5Div {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carrusel2 {    
        width: 925px;
    }

    .actividadcont {
        width: 450px;
    }
    
    .actividad1borde, .actividad2borde, .actividad3borde, .actividad4borde, .actividad5borde, .actividad6borde {
        width: 450px;
        top: -455px;
    }    

    .actividad1borde {
        border-color: #009DDF;
    }
    
    .actividad2borde {
        border-color: #FCC65B;
    }
    
    .actividad3borde {
        border-color: #EC4D95;
    }
    
    .actividad4borde {
        border-color: #3EC08D;
    }
    
    .actividad5borde {
        border-color: #8080FF;
    }
    
    .actividad6borde {
        border-color: #6CBFDA;
    }
    
    .actividadcont1:hover {
        background-color: #009DDF;
        cursor: pointer;
    }
    
    .actividadcont2:hover {
        background-color: #FCC65B;
        cursor: pointer;
    }
    
    .actividadcont3:hover {
        background-color: #EC4D95;
        cursor: pointer;
    }
    
    .actividadcont4:hover {
        background-color: #3EC08D;
        cursor: pointer;
    }
    
    .actividadcont5:hover {
        background-color: #8080FF;
        cursor: pointer;
    }
    
    .actividadcont6:hover {
        background-color: #6CBFDA;
        cursor: pointer;
    }    

    .textoimagen2 {      
        padding: 0;
        margin: 0;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .texto2 {
        width: 900px;
        padding: 0;
        margin: 0;
        margin-bottom: 10px;    
        text-align: center;
    } 

    .imagen2 img {
        display: none;
        width: 300px;
    }

    .parrafo9 {
        margin: 0;
        margin-bottom: 50px;
    }

    .contenidocolaborar {
        width: 900px;
    }

    .borde img {    
        width: 900px;
    }
    
    .form {
        width: 900px;
    }

    .form1Div {    
        width: 250px;
    }

    .form2Div {    
        width: 550px;
    }

    #name, #email {    
        width: 98%;
    }
    
    #subject {        
        width: 98%;
    }

    .footer2Div1 {
        margin-right: 70px;

    }

    /* Tooltip */

    .tooltip {
        display: none;
    }


    
}

@media (max-width: 950px) {

    /* Cabecera */

    .letras1 img {  
        width: 825px;
    }
    
    .letras2 p {  
        font-size: 25px;
    }

    /* Seccion */

    .textoimagen1, .parrafo4Div, .parrafo5Div, .textoimagen2, .parrafo9div, .colaborar, .info {
        width: 825px;
    }
    
    .texto1 {
        width: 800px;  
    }

    .carrusel2 {    
        width: 825px;
    }

    .actividadcont {
        width: 400px;
    }
    
    .actividad1borde, .actividad2borde, .actividad3borde, .actividad4borde, .actividad5borde, .actividad6borde {
        width: 400px;
    }

    .texto2 {
        width: 800px;
    }

    .contenidocolaborar {
        width: 800px;
    }

    .borde img {    
        width: 800px;
    }
    
    .form {
        width: 800px;
    }

    .form1Div {    
        width: 225px;
    }

    .form2Div {    
        width: 525px;
    }

    .footer2Div1 {
        width: 100%;

    }
}

@media (max-width: 850px) {

    /* Cabecera */

    .letras1 img {  
        width: 725px;
    }
    
    .letras2 p {  
        font-size: 23px;
    }

    /* Seccion */

    .textoimagen1, .parrafo4Div, .parrafo5Div, .textoimagen2, .parrafo9div, .colaborar, .info {
        width: 725px;
    }
    
    .texto1 {
        width: 700px;  
    }

    .carrusel2 {    
        width: 725px;
    }

    .actividadcont {
        width: 350px;
    }
    
    .actividad1borde, .actividad2borde, .actividad3borde, .actividad4borde, .actividad5borde, .actividad6borde {
        width: 350px;
    }

    .parrafoslider1 {
        width: 325px;
        font-size: 35px;
    }
    
    .parrafoslider2 {
        width: 325px;
        font-size: 20px;
    }

    .texto2 {
        width: 700px;
    }

    .contenidocolaborar {
        width: 700px;
    }

    .borde img {    
        width: 700px;
    }
    
    .form {
        width: 700px;
    }

    .form1Div {    
        width: 175px;
    }

    .form2Div {    
        width: 475px;
    }

    #nombre, #correo {    
        width: 425px;
    }
    
    #comentarios {        
        width: 425px;
    }

    .footer2 {
        height: 190px;
        align-items: start;
        flex-direction: column-reverse;
    }

    .footer2Div1 {
        margin-top: 10px;
        margin-bottom: 20px;
    }
    
    .footer2Div2 {    
        margin-top: 12px;
        
        align-items: center;
        flex-direction: column;
        width: 100%;
    }

    .footer2Div2 a{    
        margin-top: 10px;
    }
    
    .footer2Div2 a {    
        margin-right: 0;
    }
}
    
@media (max-width: 750px) {

    /* Cabecera */

    .logo {
        margin-right: 50px;
    }
    
    .menudpg {
        margin-left: 50px;
    }    

    .slider-section img {
        width: 400px;        
    }

    .letras1 img {  
        width: 625px;
    }
    
    .letras2 p {  
        font-size: 21px;
    }

    /* Seccion */

    .textoimagen1, .parrafo4Div, .parrafo5Div, .textoimagen2, .parrafo9div, .colaborar, .info {
        width: 625px;
    }
    
    .texto1 {
        width: 600px;  
    }

    .carrusel2 {    
        width: 625px;
    }

    .fila1, .fila2, .fila3, .fila1borde, .fila2borde, .fila3borde {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }   

    .fila1, .fila2, .fila3 {
        margin: 0;
    }

    .actividadcont {
        width: 400px;
        margin: 20px;
    }
    
    .actividad1borde, .actividad2borde, .actividad3borde, .actividad4borde, .actividad5borde, .actividad6borde {
        width: 400px;
        margin: 0; 
        margin-bottom: -935px;
        top: -945px;
    }

    .actividad1borde, .actividad3borde, .actividad5borde {
        width: 400px;
        margin: 0;        
        top: -985px;
    }

    .parrafoslider1 {
        width: 372px;
        font-size: 35px;
    }
    
    .parrafoslider2 {
        width: 372px;
        font-size: 20px;
    }

    .texto2 {
        width: 600px;
    }

    .contenidocolaborar {
        width: 600px;
    }

    .borde img {    
        width: 600px;
    }

    .info {
        height: 1275px;
    }
    
    .form {        
        width: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .form1Div {  
        width: 200px; 
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }

    .form2Div {         
        width: 500px;
        margin-top: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .btnform {
        text-align: center;
    }

    .correct-message {
        text-align: center;
    }
    
    .error-message {
        text-align: center;
    }

    .parrafo37{
        text-align: center;
    }
}

@media (max-width: 650px) {

    /* Cabecera */

    .letras1 img {  
        width: 525px;
    }
    
    .letras2 p {  
        font-size: 19px;
    }

    /* Seccion */

    .textoimagen1, .parrafo4Div, .parrafo5Div, .textoimagen2, .parrafo9div, .colaborar, .info {
        width: 525px;
    }
    
    .texto1 {
        width: 500px;  
    }

    .carrusel2 {    
        width: 525px;
    }

    .actividadcont {
        width: 400px;
    }
    
    .actividad1borde, .actividad2borde, .actividad3borde, .actividad4borde, .actividad5borde, .actividad6borde {
        width: 400px;
    }

    .actividad1borde, .actividad3borde, .actividad5borde {
        width: 400px;
    }

    .parrafoslider1 {
        width: 372px;
        font-size: 35px;
    }
    
    .parrafoslider2 {
        width: 372px;
        font-size: 20px;
    }

    .texto2 {
        width: 500px;
    }

    .contenidocolaborar {
        width: 500px;
    }

    .borde img {    
        width: 500px;
    }
    
    .form {        
        width: 500px;
    }

    .form1Div {  
        width: 200px; 
    }

    .form2Div {         
        width: 450px;
    }
}

@media (max-width: 550px) {

    /* Cabecera */

    .cabecera {
        height: 950px;
    }

    .logo {        
        width: 150px;
        margin-right: 15px;
    }

    .logo img {        
        width: 150px;
    }

    .menudpg {
        margin-left: 15px;
    }

    .btn {
        height: 45px;
        width: 45px;
    }

    .menu {
        top: 60px;
    }

    .slider-section img {
        width: 350px;        
    }

    .slider-section span {
        width: 350px;
    }

    .letras1 img {  
        width: 425px;
    }
    
    .letras2 p {  
        font-size: 15px;
    }

    /* Seccion */

    .textoimagen1, .parrafo4Div, .parrafo5Div, .textoimagen2, .parrafo9div, .colaborar, .info {
        width: 425px;
    }
    
    .texto1 {
        width: 400px;  
    }

    .carrusel2 {    
        width: 425px;
    }

    .actividadcont {
        width: 350px;
    }
    
    .actividad1borde, .actividad2borde, .actividad3borde, .actividad4borde, .actividad5borde, .actividad6borde {
        width: 350px;
    }

    .actividad1borde, .actividad3borde, .actividad5borde {
        width: 350px;
    }

    .parrafoslider1 {
        width: 300px;
        font-size: 35px;
    }
    
    .parrafoslider2 {
        width: 300px;
        font-size: 20px;
    }

    .texto2 {
        width: 400px;
    }

    .contenidocolaborar {
        width: 400px;
    }

    .borde img {    
        width: 400px;
    }

    .info {
        height: 100%;
    }
    
    .form {        
        width: 400px;
    }

    .form1Div {  
        width: 200px; 
    }

    .form2Div {         
        width: 350px;
    }
}

@media (max-width: 450px) {

    /* Cabecera */

    .logo {        
        width: 150px;
        margin-right: 10px;
    }

    .logo img {        
        width: 150px;
    }
    
    .menudpg {
        margin-left: 10px;
    }

    .btn {
        height: 45px;
        width: 45px;
    }

    .menu {
        width: 120px;
        top: 60px;
    }

    .slider-section img {
        width: 300px;        
    }

    .slider-section span {
        width: 300px;
    }

    .btn-left {
        right: 80%;
    }

    .btn-right {
        left: 80%;
    }

    .letras1 img {  
        width: 325px;
    }
    
    .letras2 p {  
        font-size: 12px;
    }

    /* Seccion */

    .textoimagen1, .parrafo4Div, .parrafo5Div, .textoimagen2, .parrafo9div, .colaborar, .info {
        width: 325px;
    }
    
    .texto1 {
        width: 300px;  
    }

    .imagen1 img {
        width: 250px;
    }

    .carrusel2 {    
        width: 325px;
    }

    .actividadcont {
        width: 250px;
    }

    .slider-section2 img {
        width: 200px;
    }
    
    .actividad1borde, .actividad2borde, .actividad3borde, .actividad4borde, .actividad5borde, .actividad6borde {
        width: 250px;
    }

    .actividad1borde, .actividad3borde, .actividad5borde {
        width: 250px;
    }

    .parrafoslider1 {
        width: 200px;
        font-size: 25px;
    }
    
    .parrafoslider2 {
        width: 200px;
        font-size: 15px;
    }

    .texto2 {
        width: 300px;
    }

    .contenidocolaborar {
        width: 300px;
    }

    .borde img {    
        width: 300px;
    }

    .info {
        height: 100%;
    }
    
    .form {        
        width: 300px;
    }

    .form1Div {  
        width: 200px; 
    }

    .form2Div {         
        width: 250px;
    }

    .form2 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    
    .parrafo40 {
        width: 225px;
    }

}

@media (max-width: 350px) {

    /* Cabecera */

    .cabecera {
        height: 800px;
    }

    .logo {        
        width: 150px;
        margin-right: 10px;
    }

    .logo img {        
        width: 150px;
    }
    
    .menudpg {
        margin-left: 10px;
    }

    .btn {
        height: 45px;
        width: 45px;
    }

    .menu {
        width: 120px;
        top: 60px;
    }

    .menu li a {
        font-size: 12px;
    }

    .slider-section img {
        width: 200px;        
    }

    .slider-section span {
        width: 200px;
    }

    .btn-left {
        right: 80%;
    }

    .btn-right {
        left: 80%;
    }

    .letras1 img {  
        width: 225px;
    }
    
    .letras2 p {  
        font-size: 9px;
    }

    /* Seccion */

    .textoimagen1, .parrafo4Div, .parrafo5Div, .textoimagen2, .parrafo9div, .colaborar, .info {
        width: 225px;
    }
    
    .texto1 {
        width: 200px;  
    }

    .imagen1 img {
        width: 200px;
    }

    .carrusel2 {    
        width: 225px;
    }

    .actividadcont {
        width: 225px;
    }

    .slider-section2 img {
        width: 200px;
    }
    
    .actividad1borde, .actividad2borde, .actividad3borde, .actividad4borde, .actividad5borde, .actividad6borde {
        width: 225px;
    }

    .actividad1borde, .actividad3borde, .actividad5borde {
        width: 225px;
    }

    .parrafoslider1 {
        width: 200px;
        font-size: 25px;
    }
    
    .parrafoslider2 {
        width: 200px;
        font-size: 15px;
    }

    .texto2 {
        width: 200px;
    }

    .contenidocolaborar {
        width: 200px;
    }

    .parrafo9 {
        padding: 10px;
    }

    .borde img {    
        width: 200px;
    }

    .info {
        height: 100%;
    }
    
    .form {        
        width: 200px;
    }

    .form1Div {  
        width: 200px; 
    }

    .form2Div { 
        width: 200px;
    }

    .form2 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    
    .parrafo40 {
        width: 125px;
    }
    

}