@import url('https://fonts.googleapis.com/css?family=Press+Start+2P|Delius+Unicase:700');
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P|Delius+Unicase:700');
@font-face {
    font-family: 'Obelix'; /*a name to be used later*/
    src: url('../fonts/ObelixProB-cyr.ttf'); /*URL to font*/
}
body {
	margin-top: 50px;
	margin-bottom: 50px;
	background: none;
	font-size: 14px;
}

#canvas {
	border-radius: 20px;
	border: 3px solid rgba(0,0,0,1.00);
	margin-top: 130px;
	}

.full {
  background: url(../images/mainback.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.footer {
	margin: 0.5%;
	color: rgba(255,255,255,0.32);
	font-size: 12px;
}
.vertical-center {
  min-height: 100%;  /* Imagen de back al centro */
  min-height: 100vh; 
  display: flex;
  align-items: center;
}
.modal-dialog {
	top: 3vh;
}
.modal-dialog-pequenos {
	top: 20vh;
}
.color-modal-fail {
	background-color: rgba(154,7,7,1.00);
}
.color-modal-nivel-1 {
	width: 100%;
	background: url(../images/back-nivel-1.png) repeat center center fixed; 
}
.color-modal-nivel-2 {
	width: 100%;
	background: url(../images/back-nivel-2.png) repeat center center fixed; 
}
.color-modal-nivel-3 {
	width: 100%;
	background: url(../images/back-nivel-3.png) repeat center center fixed; 
}
.color-modal-nivel-4 {
	width: 100%;
	background: url(../images/back-nivel-4.png) repeat center center fixed; 
}
.color-modal-success {
	background-color: rgba(14,115,210,1.00);
}
.color-modal-fb {
	background-color: rgba(20,29,181,1.00);
}
.hand {
	cursor: pointer;
	cursor: hand;
}
#continuar {
	cursor: pointer;
	cursor: hand;
}
#logovueltas {
	max-width: 150px;
}
#panic {
	color: rgba(51,51,51,1.00);
	cursor: pointer;
	cursor: hand;
}
.card {
	min-height: 50px;
	min-width: 50px;
	margin: 5%;
	display: inline-block;
}
.card img {
	max-width: 100%;
	border-radius: 6px;
}
.sizeA {
	width: 250px;
}
.sizeB {
	width: 220px;
}
.sizeC {
	width: 200px;
}
.sizeD {
	width: 180px;
}
.front, .back {
	/*border: 2px rgba(166,103,0,1.00) solid;*/
	border-radius: 6px;
	padding: 2%;
	-webkit-box-shadow: 2px 5px 5px rgba(0,0,0,0.35);
	box-shadow: 2px 5px 5px rgba(0,0,0,0.35);
}
.front {
	background-color: rgb(255,158,0);
}
.back {
	background-color: #E6FFED;
}
.segundos {
	font-size: 40px;
	font-family: 'Obelix';
	color: #FFFFFF;
	text-shadow: 4px 4px 0px #000;
}
.grandeInicio {
	font-size: 80px;
	font-family: 'Obelix', cursive;
	color: rgba(20,20,20,1.00);
	text-shadow: 10px 10px 0px rgba(250,250,250,1.00);
	z-index: 100;
}
.comenzar {
	font-size: 55px;
	font-family: 'Obelix', cursive;
	color: rgba(255,255,20,1.00);
	text-shadow: 6px 6px 0px rgba(0,0,0,1.00);
	z-index: 100;
	cursor: pointer;
	cursor: hand;
}
.grande {
	font-size: 80px;
	font-family: 'Obelix', cursive;
	color: rgba(255,0,0,1.00);
	text-shadow: 0px 5px 0px rgba(0,0,0,1.0);
	z-index: 100;
}
.mediano {
	font-size: 40px;
	font-family: 'Obelix', cursive;
	color: rgb(0,0,0);
	text-shadow: 0px 5px 0px rgba(210,210,210,1.00);
	cursor: pointer;
	cursor: hand;
}
.medianoB {
	font-size: 30px;
	font-family: 'Obelix', cursive;
	color: rgba(115,115,115,1.00);
	text-shadow: 0px 5px 0px rgba(255,255,255,1.0);
	cursor: pointer;
	cursor: hand;
}
.medianoC {
	font-size: 40px;
	font-family: 'Obelix', cursive;
	color: rgba(255,255,255,1.00);
	text-shadow: 0px 5px 0px rgba(0,0,0,1.00);
	cursor: pointer;
	cursor: hand;
}
.medianoF {
	font-size: 25px;
	font-family: 'Obelix', cursive;
	color: rgba(13,201,232,1.00);
	text-shadow: 2px 2px 0px rgba(0,0,80,1.00);
	cursor: pointer;
	cursor: hand;
}
.chica {
	font-size: 15px;
	font-family: 'Obelix', cursive;
	color: rgba(0,0,0,1.00);
	/*text-shadow: 2px 2px 0px rgba(0,0,80,1.00);*/
	cursor: pointer;
	cursor: hand;
}
.esosBotones {
	font-size: 40px;
	font-family: 'Obelix', cursive;
	color: rgba(0,0,0,1.0);
	text-shadow: 0px 5px 0px rgba(0,255,255,1.00);
	cursor: pointer;
	cursor: hand;
}
.puntos {
	font-size: 30px;
	font-size: 4vw;
	font-family: 'Press Start 2P', cursive;
  color: #FFF;
  visibility: visible;
  text-shadow: 4px 4px 0px #ff0000;
	position: absolute;
	top: 0;
	vertical-align: middle;
	line-height: 400%;
	z-index: 500;
	opacity: 1.00;
	width: 100%; 
  text-align: center; 
}
.puntosLlevas {
	color: yellow;
}
.logoInicio {
	max-width: 150px; 
	-webkit-filter: drop-shadow(2px 2px 0px rgba(11,15,168,1.00));
  filter: drop-shadow(2px 2px 0px rgba(11,15,168,1.00));
}
.comicBook {
	max-width: 450px;
	-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.34);
	box-shadow: 10px 10px 10px rgba(0,0,0,0.34);
}


@media screen and (min-width: 768px) {
.custom-class {
	width: 80%;
	height: 80%;
}
}

@media screen and (max-width: 999px) {
.sizeA {
	width: 120px;
}
.sizeB {
	width: 100px;
}
.sizeC {
	width: 70px;
}
.sizeD {
	width: 70px;
}
.grandeInicio {
	font-size: 50px;
}
.comenzar {
	font-size: 40px;
}	
.segundos {
	font-size: 20px;
}
.grande {
	font-size: 40px;
}
.mediano {
	font-size: 25px;
}
.medianoB {
	font-size: 20px;
}
.medianoC {
	font-size: 250px;
}
.medianoF {
	font-size: 15px;
}	
	
}