@charset "utf-8";
/* CSS Document */
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Antonio', sans-serif;
    font-family: 'Barlow Condensed', sans-serif;
    font-family: 'Bebas Neue', sans-serif;
    
}


/* For mobile phones: */
[class*="col-"] {
	width: 100%;
  }
  
  @media only screen and (min-width: 768px) {
	/* For desktop: */
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;} 
  }


[class*="col-"] {
	float: left;
	padding: 15px;
	border: 1px solid red;
  }

.header{
    display: grid;
    margin-top:1%;
    column-gap: 10px;
	grid-template-columns: auto auto;
	grid-template-rows: auto;

}
.home{
    color: #000;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Antonio;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-left:2%;
    margin-top:1%;
}

.left_bar{
    display: grid;
    margin-top:1%;
    margin-right: 3%;
    column-gap: 10px;
	grid-template-columns: auto auto auto auto auto auto;
	grid-template-rows: auto;
    align-items: center;
    align-self: right;
}

.line{
    margin-top:10px;
    background: #000;
    height: 2px;
    flex-shrink: 0;
    stroke-width: 2px;
    margin-left:1%;
    width: 97%;
    align-self: center;
       
}

.square_link{
	text-decoration: none;
	text-align: center;
	font-family: Antonio;
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
	color: #000;
	padding: 5px 20px;
	border: 1px solid #000;
	transition: 0.6s ease;	
}

.journal{
	text-align: center;
	font-family: Antonio;
	font-size: 16px;
	font-style: normal;
	color: #000;
	font-weight: 300;
	line-height: normal;
	text-decoration: underline;
}

.main_tit{
    margin-top: 1%;
    color: #000;
    text-align: center;
    font-family: Barlow Condensed;
    font-size: 96px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.legend{
    color: #7D7D7D;
    text-align: center;
    font-family: Antonio;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    flex-direction: column;
    justify-content: flex-end;
    flex-shrink: 0;
}

.ed{
    margin:auto;
    display: grid;
    margin-top:4%;
    max-width:75%;
    column-gap:15px;
	grid-template-columns: auto auto auto auto;
	grid-template-rows: auto;
    align-items: center;
}

.nav_ed{
    text-decoration: none;
	text-align: center;
	font-family: Antonio;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	color: #000;
	padding: 5px 20px;
	border: 2px solid #000;
    border-radius: 5px;
	transition: 0.6s ease;
    cursor: pointer;
}

.nav_ed:hover{
    background-color: #000;
	color: #fff;
    transition: 0.6s ease;
}

.nav_ed_active{
    text-decoration: none;
	text-align: center;
	font-family: Antonio;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	padding: 5px 20px;
	border: 2px solid #000;
    border-radius: 5px;
	transition: 0.6s ease;
    cursor: pointer;
    background-color: #000;
	color: #fff;
}

.wrapper-gallery{
    max-width: 85%;
    margin: auto;
    margin-top: 5%;
    margin-bottom: 2%;
}

#index-gallery{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 20px;
   
}

#index-gallery .gallery-img{
    width: 100%;
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.25);
}
#index-gallery .img1{
        background-image: url("/imagenes/Infographics/thumbs/img1.jpg");
}
#index-gallery .img2{
        background-image: url("/imagenes/Infographics/thumbs/img2.jpg");
}
#index-gallery .img3{
        background-image: url("/imagenes/Infographics/thumbs/img3.jpg");
}
#index-gallery .img4{
        background-image: url("/imagenes/Infographics/thumbs/img4.jpg");
}
#index-gallery .img5{
        background-image: url("/imagenes/Infographics/thumbs/img5.jpg");
}
#index-gallery .img6{
        background-image: url("/imagenes/Infographics/thumbs/img6.jpg");
}
#index-gallery .img7{
        background-image: url("/imagenes/Infographics/thumbs/img7.jpg");
}
#index-gallery .img8{
        background-image: url("/imagenes/Infographics/thumbs/img8.jpg");
}
#index-gallery .img9{
        background-image: url("/imagenes/Infographics/thumbs/img9.jpg");
}
#index-gallery .img10{
    
    background-image: url("/imagenes/Infographics/thumbs/img10.jpg");
}
#index-gallery .img11{
    
    background-image: url("/imagenes/Infographics/thumbs/img11.jpg");
}
#index-gallery .img12{
    
    background-image: url("/imagenes/Infographics/thumbs/img12.jpg");
}

.gallery-img div {
    width: 100%;
    height:100%;
    background-color: #000;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.gallery-img a {
    text-align: center;
    font-size: 24px;
    font:Antonio;
    color: #ffff;
    text-decoration: none;
    text-transform: uppercase;
}

.gallery-img div:hover {
    opacity: 0.8;
    transition: all ease-in-out 100ms;
}

.img-window {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.img-window img{
    max-height: 80vh;
    max-width: 80vw;

}

.table {
    margin-left:1%;
    margin-top:2%;
    overflow-x:auto;
    overflow: hidden;
    width: 98%;
    

}
    
.table th{
        background-color: rgb(0, 0, 0);
        padding: 12px 15px;
        text-align: left;
        border-radius: 5px;
        border: 1px solid #000;
        color: #FFF;
        font-family: Barlow Condensed;
        line-height: normal;
        font-style: normal;
        
    }


.table td{
    color: #000;
    font-family: Antonio;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    
}
.table tbody tr:nth-last-of-type(even){
	background-color: #d2d2d2;
    border: solid;
    border-width: 1px;
}


@media only screen and (max-width: 770px) {
    .home{
        color: #000;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-family: Antonio;
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-left:2%;
        margin-top:8%;
    }
    
    .left_bar{
        display: grid;
        margin-top:1%;
        margin-right: 1%;
        column-gap: 5px;
        row-gap: 5px;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        align-items: center;
        align-self: right;
    }
    .square_link{
        text-decoration: none;
        text-align: center;
        font-family: Antonio;
        font-size: 14px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        color: #000;
        padding: 5px 10px;
        border: 1px solid #000;
        transition: 0.6s ease;	
    }
    
    .journal{
        text-align: center;
        font-family: Antonio;
        font-size: 14px;
        font-style: normal;
        color: #000;
        font-weight: 300;
        line-height: normal;
        text-decoration: underline;
    }
    .line{
        margin-top:10px;
        background: #000;
        height: 2px;
        flex-shrink: 0;
        stroke-width: 2px;
        margin-left:1%;
        width: 98%;
        align-self: center;
           
    }
    .main_tit{
        margin-top: 1%;
        color: #000;
        text-align: center;
        font-family: Barlow Condensed;
        font-size: 70px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    .gallery-img a {
        text-align: center;
        font-size: 14px;
        font:Antonio;
        color: #ffff;
        text-decoration: none;
        text-transform: uppercase;
    }
}