/*Quitar margen*/

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

body{
    font-family: 'open sans';
    margin: 0;
    padding: 0;
    background-image: url(../img/LogoFondo.png);
    /*background-color: #f5f0dc9a;*/
    height: 800px;
    max-width: 100%;
    background-size: cover;
    background-size: 45rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}


.contenedor{

    padding: 40px 0;

    width: 90%;

    max-width: 1800px;

    margin: auto;

    overflow: auto;

    display: flex;

    

}



.conteiner{

    padding: 0;

    width: 90%;

    max-width: 1800px;

    margin: 0 auto;

    overflow: hidden;

}



.titulo{

    color: rgba(3, 52, 83, 0.943);

    font-size: 20px;

    text-align: center;

    margin-bottom: 20px; /*Esacio entre titulo y fotos*/



}



main{

    padding-top: 1.5rem;

}





    /* Hearder */



header{



    background:#f2f2f2;/*#f7f7f7;*/

    padding: 1rem 0;

    position: relative;

    left: 0;

    top: 0;

    width: 100%;

    height: 110px;

}



.header .logo{

    color: rgba(3, 52, 83, 0.943);

    text-decoration: none;

    border-bottom: 2px solid #3F888F;

    font-size: 1em;

    font-weight: bold;

    cursor: pointer;

    /*transition-duration: 10s;*/

}



.contenedor-logo{

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.imagen-header{

    height: 75px;

    width: 210px;

    text-decoration: none;

    border-bottom: none;

}



.imagen2-header{

    height: 85px;

    width: 210px;

    text-decoration: none;

    border-bottom: none;

}



    /* Slider */

.slideshow{	
    width: 100%;
    position: relative;
    opacity: 0.8;
}

.slider {
    margin: 0 auto;
    max-width: 100%;
    list-style: none;
}

.slider li, ul{
	width: 100%;
}

.slider li{
	overflow: hidden;
}

.slider li img{
	width: 100%;
    border-radius: 12px;
}

.slider .caption{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 15px 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
	z-index: 1;
}

.pagination{
	position: absolute;
	top: 98%; /*posicion de puntos de slider*/
	width: 100%;
	display: flex;
	justify-content: center;
    list-style: none;
}

.pagination li{
	font-size: 20px;
	margin: 2px 5px;
	color: #858585;
	cursor: pointer;
}

.left, .right{
	position: absolute;
	top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	color: rgb(2, 37, 58);
	font-size: 35px;
	cursor: pointer;
	z-index: 2;
}

.left{
	left: 10px;
}

.right{
	right: 10px;
}


    /* Cards */



.contenedor .card1, .card2 {

    width: 800px;

    max-width: auto;

    height: 600px;

    border-radius: 8px;

    box-shadow: 0 2px 2px #3f888fc0;

    margin: 20px;

    /*background: #dadadaee;*/

    flex-direction: column;

    overflow: hidden;

    padding: 40px 0;

    overflow-y: auto;

}



.contenedor .card1{

    background: #7ee452d8;

}



.contenedor .card2{

    background: #40c1e1d3;

}



.card::-webkit-scrollbar{

    width: 7px;

    height: 7px;

    z-index: -1;

}



.card::-webkit-scrollbar-track {

    background: #e2e2e2d5; 

  }



.card::-webkit-scrollbar-thumb{

    background: rgba(56, 55, 55, 0.137);

    border-radius: 4px;

}



.card::-webkit-scrollbar-thumb:hover {

    background: #b3b3b3dc;

    z-index: -1;

    

}





    /* Card Declaracion */



.contenedor-declaracion{

    display: flex;

    justify-content: space-evenly;

   

}



.imagen-declaracion{

    width: 60%;

    position: relative;

    align-content: center;

    padding: 0;

    margin: auto;

    display: flex;

    opacity: 0.9;

}



.contenedor-declaracion .contenido-texto{

    width: 85%;

}



.contenido-texto p{

    padding: 0px 0px 15px 0px;

    font-weight: 280;

    text-align: justify;

    font-size: 16px;

    font-weight: normal;

}



a {

    outline: none;

    text-decoration: none;

    color: #fff;

    text-align: center;

    padding: 0 5px 0 5px;

    font-size: 9px;

}



a:hover {

    font-weight: bold;

    font-size: 8px;

    text-align: center;

    

}



    /* CSS para cada imagen y texto de acordeon */



.comite{

    background: #f2f2f2;

}



.menu-comite{

    display:flex;

    justify-content: space-evenly;

    flex-wrap: wrap; /*separar imagenes*/

}



.imagen-comite{

    width: 30%;

    margin-bottom: 10px;

    margin-right: 4px;

    height: 120px;

    overflow: hidden;

    position: relative;

    /*cursor: pointer;*/

    box-shadow: 0 0 6px 0 rgb(0, 0, 0, 0.5);

    border-radius: 5px;

}



.imagen-comite > img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.hover-comite{

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    transform: scale(0);

    background: hsla(222, 7%, 27%, 0.7);

    border-color: #343436;

    transition: transform .5s;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}



.hover-comite img{

    width: 20px;

}



.hover-comite a:hover{

    border-bottom: 1px solid white;

}



.hover-comite p{

    color: #fff;

}



.imagen-comite:hover .hover-comite{

    transform: scale(1);

}



    /* Boton de Declaración */



.btn_modal{

    background-color: #707274af;

    margin-left: 60px;

    margin-right: 60px;

    border: none;

    color: #fff;

    padding: 1rem 1rem;

    cursor: pointer;

    font-size: 14px;

    border-radius: 10px;

    font-weight: bolder;

    max-width: 90%;

    -webkit-border-radius: 28;

    -moz-border-radius: 28;

    border-radius: 28px;

    -webkit-box-shadow: 4px 3px 10px #666666;

    -moz-box-shadow: 4px 3px 10px #666666;

    box-shadow: 4px 3px 10px #666666;

}

      

.btn_modal:hover {
    background-color: #70727494;

}



    /* Modal para PDF's */



.modal1 {

    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 77, 77, .7);
    transition: all .4s;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    z-index: 4;
}



.modal1:target {

    visibility: visible;

    opacity: 1;

}

  

.modal__content {

    border-radius: 5px;

    position: absolute;

    width: 80%;

    height: 100%;

    background-color: #fefefe;    

    margin: 15% auto; /* 15% from the top and centered */

    padding: 20px;

    border: 1px solid #888;

}

  

.modal__content[open]{
    overflow: none;
   
}



.modal__close {
    position: absolute;
    color: rgb(192, 5, 5);
    top: 0;
    right: 10px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
}

.modal__close:hover,
.modal__close:focus {
    color: black;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
}

.button1 {

    position: fixed;

    overflow: hidden;

  }

    /* Card listas */



.menu-lista h3{

    margin-bottom: 15px;

    text-align: justify;

    padding: 0 65px;

    font-weight: 300;

    font-size: 18px;



}



.menu-lista h3 span{

    background: #3f888f;

    color: #fff;

    border-radius: 50%;

    display: inline-block;

    width: 26px;

    height: 26px;

    padding: 2px;

    margin-right: 10px;

    text-align: center;

    /*font-weight: bold;*/

}



   /* Estilos de Acordeon */



.hide {

    display: none;

}

  

  /* Acordeón */

.acordeon {

    margin-bottom: 25px;

    width: 100%;

    overflow: hidden;

    position: relative;

    border-radius:  20px;

    padding: 15px 22px;  

}

  

  /* Contenedor del los títulos del acordeón e iconos "+" tally */

.acordeon .ctn-title-content-acordeon {

    align-items: center;

    background-color: rgba(163, 159, 159, 0.836);

    border-radius: 10px 10px 6px 6px;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    width: 100%;

    overflow: hidden;

    height: 70px;

    font-weight: bold;

    color: #343436;

    border-color: rgba(63, 63, 63, 0.338);

    font-size: 16px;

    padding: 20px 20px;

    text-align: left;  

}



    /* Títulos del acordeón */

.acordeon .ctn-title-content-acordeon .title-content-acordeon {

    color: #343436;

    border-color: #343436b7;

    font-size: 16px;

}

  

  /* Iconos del acordeón y efecto para cuando el acordeón se cierra tally */

.acordeon .ctn-title-content-acordeon .icon-acordeon {

    color: black;

    content: url(../img/abajo.png);

    transform: rotateZ(0deg);

    transition: 0.5s ease all;

}

  

  /* Efecto en el icono para cuando el acordeón se abre tally */

.acordeon .ctn-title-content-acordeon .rotate-icon-acordeon {

      transform: rotateZ(180deg);

}

  

  /* Contenido del acordeón tally */

.acordeon .ctn-content-acordeon .content-acordeon {

    background-color: rgba(163, 159, 159, 0.836);

    padding: 2em;

    border-radius: 6px 6px 10px 10px;

}



   /* SLIDER INFINITO: Acciones a favor del personal*/



.carrusel {

    height: 250px;

    margin: auto;

    overflow: hidden;

    background-color:   #f1b10fb6;

    display: flex;

    align-items: center;

}

  

.carrusel-items {

    display: flex;

    animation: scroll 50s linear infinite;

    -webkit-animation: scroll 50s linear infinite;

    width: calc(150px * 24);

}

  

.carrusel-item {

    min-width: 150px;

    max-width: 150px;

    height: 200px;

    object-fit: cover;

    cursor: default;

}



.titulo-carrusel {

    width: 100%;

    height: 40px;

    padding:  0.8em 0 0;

    background-color: #f1b10fb6;

    color: white;

    font-size: 21px;

    text-align: center;

}

  

.carrusel-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-fit:cover

}

  

.carrusel-item:hover {

    transform: scale(1.05);

}



@keyframes scroll {

    0% {

        -webkit-transform: translateX(0);

        transform: translateX(0);

    }



    100% {

        -webkit-transform: translateX(calc(-150px * 12));

        transform:translateX(calc(-150px * 12));

    }

}



.carrusel2 {

    height: 250px;

    margin: auto;

    overflow: hidden;

    background-color: #7b1fa2b6;

    display: flex;

    align-items: center;

}



.titulo-carrusel2 {

    width: 100%;

    height: 40px;

    padding:  0.8em 0 0;

    background-color: #7b1fa2b6;

    color: white;

    font-size: 21px;

    text-align: center;

}

  

.carrusel-items2 {

    display: flex;

    animation: scroll 30s linear infinite;

    -webkit-animation: scroll 30s linear infinite;

    width: calc(250px * 12);

}

.carrusel-item2 {

    min-width: 250px;

    max-width: 250px;

    height: 200px;

    object-fit: cover;

    cursor: default;

}

.carrusel-item2 img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-fit:cover

}

  

.carrusel-item2:hover {

    transform: scale(1.05);

}

@keyframes scroll {

    0% {

        -webkit-transform: translateX(0);

        transform: translateX(0);

    }



    100% {

        -webkit-transform: translateX(calc(-250px * 6));

        transform:translateX(calc(-250px * 6));

    }

}



    /* VIDEOS */



.contenedor-videos{

    padding: 0;

    width: 100%;

    max-width: 100%;

    margin: 0 auto;

    overflow: hidden;

    text-align: center;

}





.header-videos {

    background-color: #5f4f24b6;
    border-color: #5f4f24b6;

    color: white;

    font-size: 21px;

    text-align: center;

    padding:  0.8em 0 0;

}



.galeria {

    width: 100%;

    max-width: 100%;

    margin: auto;

    padding: 0;

    background-color: #5f4f24b6;
    border-color: #5f4f24b6;

    flex-wrap: wrap;

    display: flex;

    align-items: center;

    justify-content: space-evenly;



}



.video {

    margin: 20px auto;

    width: calc(33.3333% - 60px);

    position: relative;

    padding: 0;

    overflow:hidden;

    display: block;

   

}



video{

    width: 100%;

    height: auto;

    border-radius: 10px;

    margin: 0;

    padding: 0;

    display: block;

}



.video p {

    text-align: center;

    padding: 15px 15px;

    display: inline-block;

    margin-bottom: 2em;

    text-align:center;

    font-weight: bold;

    color: #e2dfdf;

}



    /* Footer */



footer{

    background: #1b1b1b;

    margin: auto;

    overflow: hidden;

    height: 300px;
    width: 100%;

    position: relative;

}



.contenedor-footer{

    display: flex;



    width: 100%;

    justify-content: space-evenly;

    margin: auto;

    padding-bottom: 10px;

    padding: 0 180px 0px 100px; /*margenes izquierdo y derecho*/

}



.content-foo{

    text-align: center;

    margin-top: 50px;

    margin-left: 80px;

}



.content-foo h4{

    color: #fff;

    padding-bottom: 5px;/* espacio entre lineas de p*/

    margin-bottom: 11px;/*espacio entre h4 y p*/

    text-align: left;

}



.content-foo p{

    color: #ccc;

    font-size: 13.5px;

    text-align: left;  

    cursor: pointer;

}



.a-footer{

    color: #ccc;

    font-size: 13.5px;

    text-align: left;  

    cursor: pointer;

}



.a-footer:hover{

    color: #ccc;

    font-size: 13.5px;

    text-align: left;  

    cursor: pointer;

}





.titulo-final{

    text-align: center;

    font-size: 14px;

    margin: 20px 0 0 0;

    color: #fff;

}



.content-foo img{

    width: 100px;

    margin-right: 60px;

}


@media only screen and (max-width: 1200px) {

    .video {

        width: calc(33.3333% - 40px);

        flex-wrap: wrap;

    }

}



@media only screen and (max-width: 1110px) {

    .galeria{

        flex-direction: column;

    }

    .video {

        display:list-item;

        width: calc(60% - 60px);

        align-items: center;

        align-content: center;

    }

}



@media only screen and (max-width: 1100px){



    .header .logo{

        font-size: 0.8em;

    }



    .menu-comite{

        flex-direction: column;

        display: flex;

        align-items: left;

        width: 40rem;

        margin-left: 60px;

    }

    

}



@media only screen and (max-width: 1000px) {

    .menu-comite{

        margin-left: 35px;

    }  

}



@media only screen and (max-width: 900px) {

    .menu-comite{

        margin-left: 20px;

    }  



    .imagen-comite{

        width: 28%;

        margin-right: 0px;

        height: 120px;

    }



    .acordeon .ctn-title-content-acordeon {

        height: 80px;

    }



    .acordeon .ctn-title-content-acordeon .icon-acordeon {

        margin-left: 15px;

    }

}



@media only screen and (max-width: 800px){
    body {
        background-size: 36rem;
    }


    .imagen-header, .imagen2-header{

        margin-top: 8px;

        height: 50px;

        width: 130px;

    }



    .menu-comite{

        margin-left: 0px;

        text-align: justify;

    } 



    footer{

        height: 800px;

    }

    

    .contenedor-footer{

        flex-direction: column;

        padding: 0;

    }



    .content-foo{

        margin-left: 0px;

    }

    

    .content-foo h4{

        text-align: center;

    }

    

    .content-foo p{

        text-align: center;  

    }

    

    .titulo-final{

        margin: 40px 10px 0 10px;

    }

    

    .content-foo img{

        margin-right: 0px;

    }



    .video {

        width: calc(70% - 60px);

    }

}



@media only screen and (max-width: 730px) {

    .menu-comite{

        margin-left: 0px;

        text-align: justify;

    }  



    .acordeon .ctn-title-content-acordeon .title-content-acordeon {

        font-size: 14px;

    }



    .imagen-comite{

        width: 24%;

        height: 100px;

    }



    .hover-comite a{

        font-size: 9px;

    }

}



@media only screen and (max-width: 680px) {



    .btn_modal{

        margin-right: 40px;

        margin-left: 40px;

    }



    .acordeon .ctn-title-content-acordeon .title-content-acordeon {

        font-size: 12px;

    }



    .imagen-comite{

        width: 20%;

        height: 120px;

    }



    .hover-comite a{

        font-size: 7px;

    }

}



@media screen and (max-width: 600px){

    body {
        background-size: 34rem;
    }


	.left, .right{

		font-size: 30px;

	}



	.slider li img{

		width: 600px;

	}



	.pagination{

		display: flex;

	}



    .slider li img{

        width: 100%;

    }



    .btn_modal {

        font-size: 10px;

        margin-left: 20px;

    }



    .acordeon .ctn-title-content-acordeon {

        height: 100px;

        padding: 10px 15px;

    }



    .acordeon .ctn-title-content-acordeon .icon-acordeon {

        margin-left: 5px;

    }



    .imagen-comite{

        width: 15%;

        height: 100px;

    }



    .hover-comite a{

        font-size: 5px;

    }

}

@media only screen and (max-width: 580px) {
    .contenedor {
        flex-direction: column;
        
    }
    .contenedor .card1, .card2 {

        width: 90%;
    
        max-width: auto;
    
    }

    .imagen-comite{

        width: 40%;
        left: 2rem;

        height: 160px;

        margin-right: 10rem;
        

    }
}


@media only screen and (max-width: 550px) {

    body {
        background-size: 30rem;
    }

    


    .menu-lista h3{

        padding: 0 45px;

    }



    .header .logo {

        font-size: 0.7em;

    }



    .video {

        width: calc(75% - 60px);

    }



}

@media only screen and (max-width: 540px) {

    .imagen-comite{

        left: 1rem;

    }
}

@media only screen and (max-width: 530px) {



    .acordeon .ctn-title-content-acordeon {

        padding: 0px 10px;

    }



    .imagen-declaracion{

        width: 80%;

    }

}

@media only screen and (max-width: 540px) {

    .imagen-comite{

        left: 0rem;

    }
}


@media only screen and (max-width: 500px) {
   

    .video {

        width: calc(85% - 60px);

    }



    .video p {

        font-size: 12px;

        padding: 5px 5px;

    }

}


@media only screen and (max-width: 480px){

    body {
        background-size: 27rem;
    }

    .header {

        height: 90px;

    }

    .imagen-header{

        height: 35px;

        width: 110px;

    }



    .imagen2-header{

        height: 38px;

        width: 100px;

    }

    .imagen-comite{

        width: 30%;

        height: 110px;

        left: 1.5rem;
        

    }
 

}

@media only screen and (max-width: 450px) {

    .imagen-comite{

        left: 1rem;

    }
}

@media only screen and (max-width: 440px){

    body {
        background-size: 23rem;
    }

    .contenedor {
        padding: 50px 0;
    }

}

@media only screen and (max-width: 420px) {

    .imagen-comite{

        left: 0rem;

    }
}

@media only screen and (max-width: 400px){
  

    body{
        
        background-repeat: repeat-y;
        background-repeat: space;


    }

    .imagen-comite{

        width: 25%;

        height: 85px;

        left: 1.5rem;
        

    }
 

}

@media only screen and (max-width: 390px){

    body {
        background-size: 20rem;
    }

    .imagen-declaracion{

        width: 90%;

    }



    .contenedor{

        width: 96%;

    }



    .acordeon {

        margin-bottom: 5px;

        padding: 15px 18px;

    }



    .menu-lista h3{

        padding: 0 25px;

        font-size: 14px;

    }

    

    .contenido-texto p{

        font-size: 14px;

    }



    .header .logo {

        font-size: 0.6em;

    }

 

}



@media only screen and (max-width: 380px){



    .acordeon {

        padding: 15px 10px;

      }



    .video {

        width: calc(90% - 60px);

    }

 

}



@media only screen and (max-width: 360px){

    body {
        background-size: 17rem;
    }

    .header .logo {

        font-size: 0.5em;

        padding: 0;

    }

    .imagen-comite{

        left: 1rem;
        

    }
 

}



@media only screen and (max-width: 340px){

    body {
        background-size: 15rem;
    }

    .contenedor {
        align-items: center;
    }
   
    .contenedor .card1, .card2{

        margin: 4px;

        padding: 20px 0;

    }


    .btn_modal{

        margin-left: 5px;

    }



    .acordeon {

        padding: 13px 5px;

    }



    .imagen-header{

        height: 31px;

        width: 95px;

    }



    .imagen2-header{

        height: 30px;

        width: 75px;

    }



    .header .logo {

        font-size: 0.45em;

    }



    .acordeon .ctn-content-acordeon .content-acordeon {

        padding: 1em;


    }
    
    .imagen-comite{

        left: 1.4rem;
        

    }
 

}



@media only screen and (max-width: 325px){



    .acordeon .ctn-content-acordeon .content-acordeon {

        padding: 0.4em;

    }

}







/*Estilo Modal*/

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: .3s ease;
    z-index: -1; 
    background: #000;
}

.overlay.active {
	opacity: 0.5;
	z-index: 2;
}

.mod0, .mod1, .mod2, .mod3, .mod4, .mod5, .mod6, .mod7, .mod8,
.mod9, .mod10, .mod11, .mod12, .mod13, .mod14, .mod15, .mod16, .modH,
.mod17, .mod18, .mod19, .mod20, .mod21, .mod22, .mod23, .mod24,
.mod25, .mod26, .mod27, .mod28, .mod29, .mod30, .mod31, .mod32 {
	color: #fff;
    background: rgba(77, 77, 77, .7);
	max-height:100%;
	position: fixed;
	top: 50%;
	left: 50%;
	max-width: 100%;
	transform: translate(-50%, -50%);
	visibility: hidden;
	opacity: 0;
	transition: .3s ease;
}

.mod0.active, .mod1.active, .mod2.active, .mod3.active, .mod4.active, .mod5.active, .mod6.active, .mod7.active, .mod8.active,
.mod9.active, .mod10.active, .mod11.active, .mod12.active, .mod13.active, .mod14.active, .mod15.active, .mod16.active, .modH.active,
.mod17.active, .mod18.active, .mod19.active, .mod20.active, .mod21.active, .mod22.active, .mod23.active, .mod24.active,
.mod25.active, .mod26.active, .mod27.active, .mod28.active, .mod29.active, .mod30.active, .mod31.active, .mod32.active {
	visibility: visible;
    z-index: 2;
	opacity: 1;
}

.open, .open1, .open2, .open3, .open4, .open5, .open6, .open7, .open8,
.open9, .open10, .open11, .open12, .open13, .open14, .open15, .open16, .openH,
.open17, .open18, .open19, .open20, .open21, .open22, .open23, .open24,
.open25, .open26, .open27, .open28, .open29, .open30, .open31, .open32 {
    cursor: pointer;
}

.close{
    position: absolute;
    color: rgb(192, 5, 5);
    background: none;
    border: none;
    top: 0;
    right: 40px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
}

.close:hover, 
.close:focus {
    color: black;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
}

.descarga{
    position: absolute;
    color: #ffff;
    background: #3F888F;
    border: #3F888F;
    border-radius: 5px;
    bottom:0;
    right: 12px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 3px;
}

.descarga:hover,
.descarga:focus  {

    font-weight: bold;

    font-size: 12px;

    text-align: center;
    color: black;
    

}

/*iframe{
    vertical-align: middle;
}*/