@charset "utf-8";
/* CSS Document */

.modal-contenido{
  margin: 20% auto;
  position: relative;
  
   margin:1% auto;
   padding:30px 50px;
   border-radius: 3px;
   width:80%;
   height:auto;
   border-style:solid;
   border-width:5px;
   overflow:hidden;
   font-size:18px;
   opacity:1;

}

.modal-contenido h2{
	color:#006;
	text-shadow:1px 1px #FFF;
	text-transform:uppercase;
}

.modal-contenido div{
	background:url(../imgs/fdoTransp2.png);
	padding:10px;
	border-radius:10px;
	color:#FFF;
	text-shadow: 1px 1px #333;
}


.modal{
  background-color: rgba(0,0,0,.8);
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  opacity:0;
  pointer-events:none;
  transition: all 1s;
  z-index:500;
}
#miModal:target{
  opacity:1;
  pointer-events:auto;
}
#miModal2:target{
  opacity:1;
  pointer-events:auto;
}

#limpieza{
	background:url(../imgs/desinfeccion.jpg);
	background-position: right center;
    background-repeat:no-repeat;
	background-size: 100% auto;
}
#espVerde{
	background:url(../imgs/espVerdes2.jpg);
	background-position: right center;
    background-repeat:no-repeat;
	background-size: 100% auto;
}

#x{
	font-weight: bold;
	color:#FFF;
	background-color:#F00;
	border-radius:10px;
	border-style:solid;
	border-width:4px;
	border-color:#FFF;
	position:absolute;
	right:1px;
	top:1px;
	padding:5px;
	text-decoration:none;
}

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

	.modal-contenido{
		width:75%;
		height:90%;
		overflow:scroll;
		padding: 3%;
	}
	.modal-contenido::-webkit-scrollbar {
      /* width: 8px;   Tamaño del scroll en vertical */
    /*height: 8px;     Tamaño del scroll en horizontal */
    display: none;  /* Ocultar scroll */
	}
	
	
	.modal-contenido div{
		width:90%;
		padding:4px;
		font-size:16px;
		text-shadow: 2px 1px #333;
	}

	#limpieza{
	background-position: right top;
    background-repeat:no-repeat;
	background-size: auto 100%;
}
	#espVerde{
	background-position: right top;
    background-repeat:no-repeat;
	background-size: auto 100%;
}

}