:root{
    --color-desactivado: rgb(17 82 211);
   --color-activado:rgb(7, 46, 131); 
   --color-negro-total: #000000;
   --color-negro-carbon: #0E0E0E;
   --color-negro-azulado:#333f48;
   --color-gris-tipografia: #F2F2F2;
   --color-rojo-botones:#B22222;
   --color-verde-mensajes-exito:#0A6E2D;
   --color-verde-secundario:#0F4529;
   --color-amarillo-dorado:#CA9E02;
   --color-gris-claro:#C7C7C7
}
*{
   /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
   font-family: Arial, Helvetica, sans-serif;
   /* color: var(--color-gris-tipografia); */

}
body{
   text-align: center;
    height: 10em;
    align-content: center;
    padding-bottom: 5em;
    background-color : var(--color-negro-carbon)
}
main{
   display: flex;
   flex-direction: column;
   width: 100%;
   background-color: var(--color-negro-total);

}


.modalDialog {
	position: fixed;

	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}
.modalDialog > div {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
   color: var(--color-gris-tipografia);
	background: var(--color-negro-azulado);
	/* background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999); */
  -webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 7px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #be1903; }


.btnActivado{
   background-color: var(--color-activado);
}
.opciones{
   /* background-color: hsl(37 98 80);; */
   background-color: var(--color-amarillo-dorado);
   margin: 0 .5em 1em;
   /* border: var(--color-amarillo-dorado) solid 3px; */
   border-radius: 7px;
   padding-top: .5em;

}
.informacion{
     /* background-color: hsl(37 98 80);; */
   background-color: var(--color-negro-azulado);
   color: var(--color-gris-tipografia);
   /* width: 20vw;
   float: left; */
   margin: 0 .5em 1em;
   border: #000 solid 1px;
   border-radius: 7px;
   padding-top: .5em;
}
.promociones{
   /* background-color: hsl(37 98 80);; */
   background-color: var(--color-negro-azulado);
   color: var(--color-gris-tipografia);

   margin: 0 .5em 1em;
   border: #000 solid 1px;
   border-radius: 7px;
   padding-top: .5em;

}

.boletos{
   background-color: aqua;

   margin: 0 .5em;

}
.cajas{
   width: 30%;
   float: left;
   margin: 0 1em;
}
.seccion-padre-boletos::after{
   content: "";
   display: block;
   clear: both;
   background-color: beige;
}

/* #c {

    text-align: center;
    height: 10em;
    align-content: center;
    padding-bottom: 5em;
    background-color: hsl(10 10 10);
 }  */

 #t1 {
    text-align: justify;
 }


/*  
  .item{
    float: left;
    margin: 0 1em;
    width: calc(100% - 2em);
    color: black;
  } */

  .boletos-disponibles{
   width: 4.3em;
   height: 2em;
   border-radius: 10px;
   /* background-color:hsl(44 100 49); */
   background-color: var(--color-rojo-botones);
    border: var(--color-negro-total) solid 1px; 
  color: hsl(10 10 10);;
  font-weight: bold;
  font-size: large;

  }

  .boletos-ruleta{
   width: 20vw;
   height: 20vh;
   border: #000 solid 1px;
   border-radius: 10px;
  }

  .btn-apartar{
   /* background-color: #4aac3c; */
   /* background-color: hsl(357 80 45); */
   background-color: var(--color-verde-mensajes-exito);
   color: #FFFFFF;
   /* width: 20vw; */
   height: 3em;
   border-radius: 7px;
   border: var(--color-verde-mensajes-exito) solid 1px;
   margin-bottom: 2em;
   font-weight: bold;
   font-size: 1em;
  }

  #boletos-seleccionados{
   margin-bottom: 1em;
  }

  .section-boletos{
   width: 90vw;
   min-height: 30vh;
   background-color: var(--color-gris-claro);
   text-align: start;
   margin: auto;
   margin-bottom: 2em;

  }

  .input-formulario{
   width: 80%;
   height: 30px;
   font-size: 20px;
   border: solid 2px;
   margin-bottom: 10px;
   font-family: Arial, Helvetica, sans-serif;
  }

  .compra-boletos{
   display: flex;
   flex-direction: column;
   align-content: center;
   align-items: center;
  }


  #titulo-boletos-disponibles{
   width: 100%;
   border: 1px solid black;
   background-color: var(--color-amarillo-dorado);
   font-size: 3em;
   font-weight: bold;
   color: #FFFFFF;
   text-transform: uppercase;
  }
  #titulo-boletos-disponibles>p{
   margin: .2em;
  }
  .botonera-comprar-boletos{
   display: flex;
   flex-direction: column;
   align-items: center;
   align-content: center;
   justify-content: center;
   /* background-color: #999; */
  }
  #title{
   font-size: 4em;
   font-weight: bold;
   text-transform: uppercase;
   color: var(--color-gris-tipografia);

   }
   #subtitle{
      font-size: 2em;
     text-transform: lowercase;
     color: var(--color-gris-tipografia);
   }
   #premio{
      font-size: 4em;
      font-weight: bold;
      text-transform: uppercase;
      /* color: hsl(47 99 50); */
      color: var(--color-rojo-botones);
   }

  .ruleta{
   font-size: 1em;
   background-color: #000;
   font-size: 1em;
   text-decoration: none;
   color: var(--color-gris-tipografia);
   text-transform: uppercase;
   border-radius: 8px;
   margin: 2px 0 10px 0;
   padding: .5em;
  }
   .ruleta>p{
   margin: 0
  }
  .ruleta>img{
   margin-top: 5px;
  }
  /* .botones-informacion{
   display: flex;
   flex-direction: row;
  } */


  .informacion>ul{
   text-align: center;
   font-size: 1.2em;
   font-weight: bold;
   list-style-type: none;
  }
  .promociones>ul{
   text-align: center;
   font-size: 1.2em;
   font-weight: bold;
   list-style-type: none;

  }

   .botones-informacion{
   display: flex;
   flex-direction: column;
   width: 80%;
  }

 @media (max-width: 600px) {
 .modalDialog > div {
   width: auto;
   margin-right: 1em;
   margin-left: 1em;
 }
  .botones-informacion{
   width: 100%;
  }
}