@font-face {
  font-family: "Caviar";
  src: url("../fonts/Raleway-ExtraLight.ttf");
}
@font-face {
  font-family: "Debock";
  src: url("../fonts/Raleway-Medium.ttf");
}
#index-gallery {
	display: grid;
	grid-template-colums: 1fr 1fr 1fr 1fr;
	grid-template-row: auto;
	font-family: "Caviar";
	grid-gap:10px;
	grid-template-areas: 
		"gallery-p gallery-p gallery-p gallery-p"
		"gallery-h2 gallery-h2 gallery-h2 gallery-h2"
		"img1 img2 img3 img4"
		"img5 img6 img3 img7"
		"img8 img8 img9 img10"
}
#index-gallery .gallery-img{
	width:100%;
	height:200px;
	background-size:cover;
	background-repeat: no-repeat;
	background-position:center;
	cursor: pointer;
}
.texto-galeria{
	grid-area: gallery-p;
}
#index-gallery h2{
	grid-area: gallery-h2;
}
#index-gallery .img1{
	grid-area: img1 ;
	background-image: url("../galeria/img1.jpg");
}
#index-gallery .img2{
	grid-area: img2 ;
	background-image: url("../galeria/img2.jpg");
}
#index-gallery .img3{
	grid-area: img3 ;
	background-image: url("../galeria/img3.jpg");
	height: 410px;
}
#index-gallery .img4{
	grid-area: img4 ;
	background-image: url("../galeria/img4.jpg");
}
#index-gallery .img5{
	grid-area: img5 ;
	background-image: url("../galeria/img5.jpg");
}
#index-gallery .img6{
	grid-area: img6 ;
	background-image: url("../galeria/img6.jpg");
}
#index-gallery .img7{
	grid-area: img7 ;
	background-image: url("../galeria/img7.jpg");
}
#index-gallery .img8{
	grid-area: img8 ;
	background-image: url("../galeria/img8.jpg");
}
#index-gallery .img9{
	grid-area: img9 ;
	background-image: url("../galeria/img9.jpg");
}
#index-gallery .img10{
	grid-area: img10 ;
	background-image: url("../galeria/img10.jpg");
}


.gallery-img div {
	width:100%;
	height: 100%;
	background-color: #000;
	opacity: 0;
	display: flex;
	justify-content: center;
	align-items: center;
		text-decoration: none;
	color: #fff;
}

.texto-galeria{
	text-decoration: none;
	color: #fff;
	padding: 10px;
	text-align: center;
	font-size: 15px;
}

.texto-img-gal{
	font-family: Debock;
	font-size: 20px;
	color:#fff;
	text-decoration: none;
	text-transform: uppercase;
	width: 100%;
	text-align: center;
}

.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: 999999999999999;
}

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

.img-btn-next {
	display: block;
	padding: 6px 10px;
	border-radius: 4px;
	background-color: #111;
	position: fixed;
	top:48vh;
	z-index:99999999999999999999;
	font-family: Caviar;
	color: #fff;
	cursor: pointer;
	text-transform: uppercase;
}

.img-btn-next:hover {
	opacity: 0.8;
}


.img-btn-prev {
	display: block;
	padding: 6px 10px;
	border-radius: 4px;
	background-color: #111;
	position: fixed;
	top:48vh;
	z-index: 99999999999999999999;
	font-family: Caviar;
	color: #fff;
	cursor: pointer;
	text-transform: uppercase;
}

.img-btn-prev:hover {
	opacity: 0.8;
}

/*-------RESPONSIVE TABLETS--------*/
@media screen and (min-width: 701px) and (max-width: 999px) {

	#index-gallery {
		display: grid;
		grid-template-colums: 1fr 1fr 1fr;
		grid-template-row: auto;
		grid-gap:10px;
		grid-template-areas: 
			"gallery-p gallery-p gallery-p"
			"gallery-h2 gallery-h2 gallery-h2"
			"img1 img2 img3"
			"img4 img5 img3"
			"img6 img7 img9"
			"img8 img8 img10"
	}
	#index-gallery .gallery-img{
	width:100%;
	height:200px;
	background-size:cover;
	background-repeat: no-repeat;
	background-position:center;
	cursor: pointer;
}
	#index-gallery .img3{
	grid-area: img3 ;
	background-image: url("../galeria/img3.jpg");
	height: 410px;
}
}
@media screen and (min-width: 300px) and (max-width: 700px) {
		#index-gallery {
		display: grid;
		grid-template-colums: 1fr 1fr 1fr;
		grid-template-row: auto;
		grid-gap:10px;
		grid-template-areas: 
			"gallery-p gallery-p gallery-p"
			"gallery-h2 gallery-h2 gallery-h2"
			"img1 img2 img3"
			"img4 img5 img3"
			"img6 img7 img9"
			"img8 img8 img10"
	}
	#index-gallery .gallery-img{
	width:100%;
	height:100px;
	background-size:cover;
	background-repeat: no-repeat;
	background-position:center;
	cursor: pointer;
}
	#index-gallery .img3{
	grid-area: img3 ;
	background-image: url("../galeria/img3.jpg");
	height: 210px;
}
        .gallery-img div {
	width:100px;
	height: 100%;
	background-color: #000;
	opacity: 0;
	display: flex;
	justify-content: center;
	align-items: center;
		text-decoration: none;
	color: #fff;
}
}
@media screen and (min-width: 300px) and (max-width: 330px) {
		#index-gallery {
		display: grid;
		grid-template-colums: 1fr 1fr 1fr;
		grid-template-row: auto;
		grid-gap:10px;
		grid-template-areas: 
			"gallery-p gallery-p gallery-p"
			"gallery-h2 gallery-h2 gallery-h2"
			"img1 img2 img3"
			"img4 img5 img3"
			"img6 img7 img9"
			"img8 img8 img10"
	}
	#index-gallery .gallery-img{
	width:100%;
	height:100px;
	background-size:cover;
	background-repeat: no-repeat;
	background-position:center;
	cursor: pointer;
}
	#index-gallery .img3{
	grid-area: img3 ;
	background-image: url("../galeria/img3.jpg");
	height: 210px;
}
    .gallery-img div {
	width:100px;
	height: 100%;
	background-color: #000;
	opacity: 0;
	display: flex;
	justify-content: center;
	align-items: center;
		text-decoration: none;
	color: #fff;
        margin-left: 10px;
}
}