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

#principal{ 
	width: 60%;
	margin: auto;
	//margin-left: 300px;
}

#lista_1A,#lista_2A,#lista_3A,#lista_4A,#lista_5A,#lista_6A,#lista_7A,#lista_8A,#lista_30A{	
	//font: bold 25px "Trebuchet MS", Arial, Helvetica, sans-serif ;
	font-size: 25px;
	width: 100%;
	margin: auto;
	text-decoration:underline;
	margin-bottom: 15px;
}

#lista_1B,#lista_2B,#lista_3B,#lista_4B,#lista_5B,#lista_6B,#lista_7B,#lista_8B{
	display:none;
	width: 90%;
	margin: auto;
}

#id0,#id1,#id2,#id3,#id4,#id11,#id12,#id13,#id17,#id19,#id21,#id22,#id28,#id29,#id31,#id32,#id33,#id34,#id40,#id41,#id43,#id45,#id50,#id52,#id53,#id54,#id55,#id56,#id57,#id60,#id63,#id65,#id66{
	margin-bottom: 10px;
}

#sublistas{
	//font: bold 25px "Trebuchet MS", Arial, Helvetica, sans-serif ;
	font-size: 25px;
	color:#F00;
	font-weight:600;
}

#cargando{
	font: bold 25px "Trebuchet MS", Arial, Helvetica, sans-serif ;
	color:#000;
}


#boton1,#boton2,#boton3,#boton4{
	width:140px;
	height:100px;
	font: bolder 40px "Trebuchet MS", Arial, Helvetica, sans-serif;
	border-radius: 8px;
	box-shadow: 12px 12px 15px #999;
}

#boton5{
	width:560px;
	height:50px;
	font: bolder 25px "Trebuchet MS", Arial, Helvetica, sans-serif;
	border-radius: 8px;
	box-shadow: 12px 12px 15px #999;
}

#botones{
	display:none;
}

#cargando{
	display:none;
    width: 400px;       
    margin: 0 auto;
}

#panel{
	display:none;
}


#preg{
	width:900px;
	height:70px;
	border: solid #039 4px;
	vertical-align:middle;
	text-align:left;
	display:table-cell;
	border-radius: 10px;
	background-color:#CCC;
}

#res1,#res2,#res3,#res4{
	width:900px;
	height:70px;
	border: solid #C03 2px;
	vertical-align:middle;
	text-align:left;
	display:table-cell;
	border-radius: 10px;
}

#r1,#r2,#r3,#r4,#pr{
	margin-left: 10px;
	font: bold 20px "Trebuchet MS", Arial, Helvetica, sans-serif ;
}

#continuar,#pasar,#repetir{
	width:300px;
	height:50px;
	font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	border-radius: 15px;
}

#cortar{
	width:80px;
	height:50px;
	font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	border-radius: 50%;
	//box-shadow: 12px 12px 15px #999;
}

#final{
	display:none;
}

#repe{
	display:none;
}

#tot{
	border-radius: 10px;
	border: solid #000 2px;
	display:table-cell;
	padding: 10px;
}

#tex{
	text-decoration:underline;
}


sup{
	font: bolder 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#03F;
}

#carta{
	display:none;
	width: 50%;
	margin: auto;
}

/* The container */
/*-------------------------------------------------------------------------*/
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



/* Cargando */
/*=====================================================================*/
#preloader_1{
    position:relative;
}
#preloader_1 span{
    display:block;
    bottom:0px;
    width: 72px;
    height: 40px;
    background:#9b59b6;
    position:absolute;
    animation: preloader_1 1.5s  infinite ease-in-out;
}
 
#preloader_1 span:nth-child(2){
left:88px;
animation-delay: .2s;
 
}
#preloader_1 span:nth-child(3){
left:176px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:264px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:352px;
animation-delay: .8s;
}
@keyframes preloader_1 {
    0% {height:40px;transform:translateY(0px);background:#9b59b6;}
    25% {height:240px;transform:translateY(120px);background:#3498db;}
    50% {height:40px;transform:translateY(0px);background:#9b59b6;}
    100% {height:40px;transform:translateY(0px);background:#9b59b6;}
}