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

.barrita {
    position: absolute;
    top: 0;
    background: #222;
    color: #fff;
    width: 100%;
    min-height: 20px;
/*    display: flex;*/
}

.progreso {
    margin: auto;
    width: 100%;
    height: 20px;
    background: rgba(255,255,255,0.1);
    position: relative;
}

.progreso:before {
    content: "";
    position: absolute;
    background: red;
    width: 0;
    height: 20px;
    animation: progreso 223s ;
	animation-fill-mode: forwards;
}

.progreso p {
    margin: 0;
    line-height: 20px;
    font-size: 14px;
    font-weight: bold;
    
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/*.cerrar {
    transform: translateY(-100%);
    transition: all 0.5s;
}*/

@keyframes progreso {
	  20% {
        width: 20%;
		opacity: 0,5;
    }
    30% {
        width: 30%;
		opacity: 0,5;
    }
	  40% {
        width: 40%;
    }
   50% {
        width: 50%;
    }
	  60% {
        width: 60%;
    }
    70% {
        width: 70%;
    }
	  80% {
        width: 80%;
    }
    90% {
        width: 90%;
    }

    100% {
        width: 100%;
    }
}

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 90%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.adaptada {
    width: 60%;
    height: auto;
}

.centradaMovil {
 	 display:block;
	 text-align: center;
	     width: 100%;
    height: auto;
	}

.cuerpo {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1rem;
	color: #CCC;
}
.BOTON {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.3rem;
	font-weight: bold;
	color: #3BE0E6;
}
a:link {
	color: #3ADFE5;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #2BDFD6;
}
a:hover {
	text-decoration: underline;
	color: #D3E63F;
}
a:active {
	text-decoration: none;
	color: #39E0E8;
}
.copete {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.2rem;
	color: #FFF;
}
.FIRMA {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	color: #33E5E5;
}
.borde {
	color: #CCC;
	border: thin dotted #999;
}

		#sound {
 	 display:none;
	}
		.cajita {
 	 display:none;
	}
	
			#moviles {
 	display:none;

	}
	
			#ordenadores {
 	 display:block;
	 text-align: center;
	}
	
	
	.cajaMandala 
 {
    position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
	 width: 100%;
}
				

	
	
@media screen and (min-device-width : 320px) and (max-device-width : 1024px) {
	
	.adaptada {
    width: 100%;
    height: auto;
}

.cuerpo {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 0.8rem;
	color: #CCC;
}
.BOTON {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1rem;
	font-weight: bold;
	color: #3BE0E6;
}
.copete {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.1rem;
	font-weight: bold;
	color: #FFF;
}
.FIRMA {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.2rem;
	font-weight: bold;
	color: #33E5E5;
}

		#ordenadores {
 	 display:none;
	}
	
				#moviles {
 	 display:block;
	 text-align: center;
	}
	
.centradaMovil {
 	 display:block;
	 text-align: center;
	 width: 100%;
    height: auto;
	}
 }
 
 
 @media only screen and (-webkit-device-pixel-ratio: 2) {
.adaptada {
    width: 100%;
    height: auto;
}
}