html {
	background-color: #005100; /* de #165100 */
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	scroll-behavior: smooth;
}

#mainbg {
	width: 100vw;
	height: 100vh;
	background-image: url( '../img/bg_dsktp.png' );
	background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -99999;
    padding: 0;
    margin: 0;
}
#cinema {
	width: 64vw;
	height: 36vw;
    position: absolute;    
    top: 32vw;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    background-image: url( '../img/PILA_aerea.jpg' );
	background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
    padding: 0;
}
#pila_logo{
    background-image: url( '../img/PILA_logo.png' );
	background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
	width: 54vw;
	height: 36vw;
    position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    z-index: 1;
	filter:drop-shadow(1px 1px 0px black);
}
.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.parche {
	background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    padding: 0;
    margin: 0;
}
#topbg {
	width: 100vw;
	height: 30vw;
	background-image: url( '../img/top_bg_desktop.png' );
    z-index: 1;
    pointer-events: none;
}
#milogo {
	width: 38vw;
	height: 10vw;
	top: 2vw;
	left: 3vw;
	background-image: url( '../img/mi_logo.png' );
    z-index: 2;
}
#ciamlogo {
	width: 38vw;
	height: 10vw;
	top: 2vw;
	right: 3vw;
	background-image: url( '../img/ciam_logo.png' );
    z-index: 2;
}
#nuestro {
	width: 52vw;
	height: 16vw;
	top: 14vw;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
	background-image: url( '../img/nuestro.png' );
    z-index: 2;
}
#mizq, #mder {
	width: 44vw;
	height: 35vw;
	top: 56vw;
    z-index: 3;
    pointer-events: none;
}
#mizq {
    left: 0;
	background-image: url( '../img/mder.png' );
}
#mder {
    right: 0;
	background-image: url( '../img/mizq.png' );
}
#protector {
	width: 42vw;
	height: 18vw;
	top: 152vw;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
	background-image: url( '../img/protector.png' );
    z-index: 2;
    cursor: pointer;
}
#protector:hover {
	filter:drop-shadow(2px 2px 2px black);
}

.bloque_principal {
	position: relative;
    top: 110vh;
    color: white;
    z-index: 3;
    margin: 0 auto;
    width: 90%;
    line-height: 1.6;
    padding-bottom: 40px;
}
.mitem {
	width: 44vw;
	height: 28vw;
    z-index: 3;
    cursor: pointer;
}
.mitem:hover {
	filter:drop-shadow(2px 2px 2px black);
}
#m01 {
    left: 5vw; 
	top: 88vw;
	background-image: url( '../img/m_01.png' );
}
#m02 {
    left: 5vw; 
	top: 120vw;
	background-image: url( '../img/m_02.png' );
}
#m03 {
    right: 5vw; 
	top: 88vw;
	background-image: url( '../img/m_03.png' );
}
#m04 {
    right: 5vw; 
	top: 120vw;
	background-image: url( '../img/m_04.png' );
}
#virtual {
	width: 18vw;
	height: 18vw;
    right: 3vw; 
	top: 45vw;
	background-image: url( '../img/visitavirtual.png' );
    cursor: pointer;
}
#virtual:hover {
	filter:drop-shadow(2px 2px 2px black);
}

.pronto{
    opacity: 0.6;
    cursor: not-allowed;
}
.pronto:hover{
    opacity: 0.4;
    cursor: not-allowed;
}
section {
	margin-top: 10px;
	padding-top: 50px;
}
h2 { text-align:center; }
a, a:visited {color: white}
.inicio{
	font-size: 12px;
	color: white;
	width: 100%;
	text-align: right;
	display: block;
	margin: 10px;
	text-decoration: none;
}
.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
.fcard {
    flex: 0 1 72%;
    aspect-ratio: 1;
    padding: 1%;
}
.ycard {
    flex: 0 1 80%;
    aspect-ratio: 1;
    padding: 1%;
}
.ycard img, .fcard img{
    width: 100%;
}
@media (min-width: 768px) {

	/* rules here apply to devices from from 768px to 991px (inclusive)*/
	.fcard { flex: 0 1 18%; }
	.ycard { flex: 0 1 23%; }

	#virtual {
		width: 10vw;
		height: 10vw;
	}
}
@media (min-width: 992px) {
	/* rules here apply to devices 1200px and greater */
	#mainbg {
		width: 100vw;
		height: 100vw;
		background-image: url( '../img/bg_dsktp.png' );
		background-position: top;
	    background-size: cover;
	    position: absolute;
	    z-index: -99999;
	    padding: 0;
	    margin: 0;
	}
	#cinema {
		width: 38vw;
		height: 21.375vw;
	    position: absolute;    
	    top: 16.5vw;
	    left: 50%;
	    margin-right: -50%;
	    transform: translate(-50%, 0);
	    z-index: 0;
	    padding: 0;
		}
	#pila_logo{
		width: 24vw;
		height: 21vw;
	}
	.video {
	  aspect-ratio: 16 / 9;
	  width: 100%;
	}
	.parche {
		background-position: top;
	    background-size: contain;
	    background-repeat: no-repeat;
	    position: absolute;
	    padding: 0;
	    margin: 0;
	}
	#topbg {
		width: 100vw;
		height: 30vw;
		background-image: url( '../img/top_bg_desktop.png' );
	    z-index: 1;
	    pointer-events: none;
	}
	#milogo {
		width: 21.1vw;
		height: 8vw;
		top: 2vw;
		left: 3vw;
		background-image: url( '../img/mi_logo.png' );
	    z-index: 2;
	}
	#ciamlogo {
		width: 19.2vw;
		height: 8vw;
		top: 2vw;
		right: 3vw;
		background-image: url( '../img/ciam_logo.png' );
	    z-index: 2;
	}
	#nuestro {
		width: 39.6vw;
		height: 12vw;
		top: 4vw;
	    left: 50%;
	    margin-right: -50%;
	    transform: translate(-50%, 0);
		background-image: url( '../img/nuestro.png' );
	    z-index: 2;
	}
	#mizq, #mder {
		width: 38vw;
		height: 28.8vw;
		top: 24vw;
	    z-index: 3;
	    pointer-events: none;
	}
	#mizq {
	    left: 0;
		background-image: url( '../img/mder.png' );
	}
	#mder {
	    right: 0;
		background-image: url( '../img/mizq.png' );
	}
	#protector {
		width: 25vw;
		height: 11vw;
		top: 40vw;
	    left: 50%;
	    margin-right: -50%;
	    transform: translate(-50%, 0);
		background-image: url( '../img/aliado.png' );
	    z-index: 2;
	    cursor: pointer;
	}
	#protector:hover {
		filter:drop-shadow(2px 2px 2px black);
	}

	.bloque_principal {
		position: relative;
	    top: 110vh;
	    color: white;
	    z-index: 3;
	    margin: 0 auto;
	    width: 50%;
	    min-width: 600px;
	    line-height: 1.6;
	    padding-bottom: 40px;
	}
	.mitem {
		width: 16vw;
		height: 10vw;
	    z-index: 3;
	}
	.mitem:hover {
		filter:drop-shadow(2px 2px 2px black);
	}
	#m01 {
	    left: 10vw; 
		top: 10vw;
		background-image: url( '../img/m_01.png' );
	}
	#m02 {
	    left: 10vw; 
		top: 20vw;
		background-image: url( '../img/m_02.png' );
	}
	#m03 {
	    right: 10vw; 
		top: 10vw;
		background-image: url( '../img/m_03.png' );
	}
	#m04 {
	    right: 10vw; 
		top: 20vw;
		background-image: url( '../img/m_04.png' );
	}
	#sticker_pack {
		width: 10vw;
		height: 10vw;
	    right: 3vw; 
		top: 45vw;
		background-image: url( '../img/sticker.png' );
	    cursor: pointer;
	}
	#sticker_pack:hover {
		filter:drop-shadow(2px 2px 2px black);
	}
	.inicio{
		font-size: 12px;
		color: white;
		width: 100%;
		text-align: right;
		display: block;
		margin: 10px;
		text-decoration: none;
	}
	.fcard { flex: 0 1 18%; }
	.ycard { flex: 0 1 23%; }
	.abtn {
		display: inline-block;
		padding: 5px 12px 4px;
		background-color: white;
		color: green;
		text-decoration: none;
	}
}
@media (min-width: 1200px) {	
	/* rules here apply to devices from 992px to 1199px (inclusive)*/

}