/*--parametros generales del cuerpo de imagenes 360--*/
body {
	background-color: rgb(27, 27, 27);
	
}

.main {
	margin: 0 auto;
	margin-top: 100px;
	position: relative;
	height: 100%;
	width: 50%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(5, 1fr);
	grid-gap: 0.6vh;
}

.box-img {
	overflow: hidden;
	opacity: 0;
	transform: scale(0.8);
	animation: fadeInScale 1s ease-in-out forwards;
}

.box-img:nth-child(1) { animation-delay: 0.2s; }
.box-img:nth-child(2) { animation-delay: 0.4s; }
.box-img:nth-child(3) { animation-delay: 0.6s; }
.box-img:nth-child(4) { animation-delay: 0.8s; }
.box-img:nth-child(5) { animation-delay: 1s; }
.box-img:nth-child(6) { animation-delay: 1.2s; }
.box-img:nth-child(7) { animation-delay: 1.4s; }
.box-img:nth-child(8) { animation-delay: 1.6s; }
.box-img:nth-child(9) { animation-delay: 1.8s; }

.box-img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	-khtml-user-select: none;
	-o-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	transition: transform 0.5s;
}

.box-img:hover img {
	transform: scale(1.1);
}

@keyframes fadeInScale {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Responsive design */
@media only screen and (max-width: 850px) {

}




#iframe1 {
	grid-row: 1/2;
	grid-column: 1/2;}

#iframe2 {
	grid-row: 1/2;
	grid-column: 2/3;}

#iframe3 {
	grid-row: 1/2;
	grid-column: 3/4;}

#iframe4 {
	grid-row: 2/4;
	grid-column: 1/2;}
	
#iframe5 {
	grid-row: 2/4;
	grid-column: 2/3;}

#iframe6 {
	grid-row: 2/3;
	grid-column: 3/4;}

#iframe7 {
	grid-row: 3/4;
	grid-column: 3/4;}

#iframe8 {
	grid-row: 4/5;
	grid-column: 1/2;}

#iframe9 {
	grid-row: 4/5;
	grid-column: 2/4;}
		

	footer hr {
		
		width: 90%;
		margin-left: 5%;
		color: white;
	}
	
	footer p {
		font-size: 12px;
	
		text-align: center;
		color: white;
	}
	
		

/*--mobile responsive--*/

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



.box-img iframe{
	
	object-fit: cover;
	cursor: pointer;
	-khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
	user-select: none;
	transition: all 2s;
}
.main {
	display: flex;
	flex-direction: column;
	margin-top: 150px;
	width: 90%;
}

.box-img {
	animation-delay: 0s; /* All animations fire at once for mobile */
}



}