@font-face {
  font-family:'Disintegration';
  src: url('./fonts/DISINTEG.TTF');
  font-weight: 100;
}

* {
  font-family: Disintegration, Open Sans, sans-serif;
}

#fondo {
  position:fixed;
  background: url("img/dotz_maptim_sidea.jpg") no-repeat center center fixed;
  background-size: cover;
  width:100%;
  height:100%;
  top: 0rem;
  left: 0rem;
  z-index: -2;
}

#portada {
  position: fixed;
  z-index: -1;
}

.barra {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  background: url('./icons/header-bg-long.jpg') #282323;
  padding-top: 0.8em;
  box-shadow: 0 1px 2px #333;
  z-index: 16;
}

.txt_intro {
  font-size: 3em;
  text-align: center;
  color: #f60a05;
  text-shadow: -0.1em 0.1em 0.04em #000;
}

.pregunta_mazos {
  font-size: 2.0em;
  color: #f60a05;
  text-align: center;
  text-shadow: -0.1em 0.1em 0.04em #000;
}

.corto {
  font-size: 3.5em;
  color: #f60a05;
  text-shadow: -0.1em 0.2em 0.1em #000;
}

.normal {
  font-size: 3.5em;
  color: #f60a05;
  text-shadow: -0.1em 0.2em 0.1em #000;
}

.campana {
  font-size: 3.5em;
  color: #f60a05;
  text-shadow: -0.1em 0.2em 0.1em #000;
}

.siguiente:after {
  position: fixed;
  right: 0%;
  bottom: 8%;
  display: flex;
  content: url('./icons/arrow_right.png');
  max-width: 100%;
  color: white !important;
  font-size: 26pt;
  padding: 0;
  z-index: 1;
  height: 2em;
  width: 2em;
  opacity: 0.7;
}

.anterior:after {
  left: 0%;
  position: fixed;
  bottom: 8%;
  display: flex;
  content: url('./icons/arrow_left.png');
  max-width: 100%;
  color: white !important;
  font-size: 26pt;
  padding: 0;
  z-index: 1;
  height: 2em;
  width: 2em;
  opacity: 0.7;
}

.carta {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4em;
  max-width: 85%;
  max-height: 85%;
  box-shadow: -12px 10px 5px 0px rgba(0,0,0,0.75);
  z-index: 1;
}

.pre_siguiente {
  position: fixed; 
  margin-left: auto;
  margin-right: auto;
  margin-top: 4em;
  max-width: 85%;
  max-height: 85%;
  z-index: -7;
}

.empezar {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: table;
  margin-top: 15%;
  text-align: center;
  padding: 0; 
}

.marteuse {
  position: fixed;
  top: 0%;
  left: 25%;
  z-index: 17;
  animation: parpadeo 2s;
  animation-iteration-count: infinite;
}
@keyframes parpadeo {	
        0%	{opacity: 1;}
	50%	{opacity: 0.2;}
	100%    {opacity: 1;}
}

.esperando {
  position: fixed;
  top: 0%;
  left: 25%;
  z-index: 17;
}

.num_carta {
  position: fixed;
  top: 0.5%;
  left: 1%;
  font-size: 2em;
  color: white;
  z-index: 17;
}

.guardia_nacional_5, .guardia_nacional_8 {
  position: fixed;
  top: 25%;
  right: 1%;
  font-size: 3em;
  color: black;
  animation: parpadeo 2s;
  animation-iteration-count: infinite;
}

.guardia_nacional_8 {
  top: 50% !important;
}

.guardia_cinco_fijo {
  position: fixed;
  top: 25%;
  right: 1%;
  font-size: 3em;
  color: black;
}

.guardia_ocho_fijo {
  position: fixed;
  top: 50%;
  right: 1%;
  font-size: 3em;
  color: black;
}

.destino {
  margin-left: 60%;
}

.dado {
  margin-left: 3%;
}

.evento {
  margin-left: 3%;
}

.icono_evento {
  width: 32px;
  height: 32px;
  position: relative;
  top: -0.4em;
}

.icono_destino {
  width: 32px;
  height: 32px;
  position: relative;
  top: -0.4em;
}

.icono_dado {
  width: 32px;
  height: 32px;
  position: relative;
  top: -0.3em;
}

.paleta_destino {
  background: url('img/dotz_mapfarmingdale.jpg') no-repeat center center fixed;
  background-size: cover;
  position: fixed;
  right: 0%;
  top: 110%;
  z-index: 5;
  color: white;
  height: 100%;
  width: 100%;
}

.sms_flechas {
  position: fixed;
  font-size: 2em;
  left: -70%;
  bottom: 10%;
  text-align: justify;
  overflow: hidden;
  width: 100%;
  color: #f60a05;
  text-shadow: -1px 2px 1px #000;
}

@keyframes parriba {	
        0%	{top: 110%;}
	100%    {top: 0%;}
}

@keyframes parriba_dado {	
        0%	{top: 110%;}
	100%    {top: 50%;}
}

@keyframes girapabajo {	
        0%	{transform: rotate(0deg);}
	100%    {transform: rotate(180deg);}
}

@keyframes pabajo {	
        0%	{top: 0%;}
	100%    {top: 110%;}
}

@keyframes giraparriba {	
        0%	{transform: rotate(180deg);}
	100%    {transform: rotate(0deg);}
}

@keyframes palao {	
        0%	{left: -70%;}
	100%     {left: 165%;}
}

#des_flechas {
  visibility: hidden;
  z-index: 5;
}

.des_siguiente:after {
  position: fixed;
  right: 0.5%;
  bottom: 8%;
  display: flex;
  content: url('./icons/arrow_right.png');
  max-width: 100%;
  color: white !important;
  font-size: 26pt;
  padding: 0;
  z-index: 5;
  height: 2em;
  width: 2em;
  opacity: 0.7;
}

.des_anterior:after {
  left: 0.5%;
  position: fixed;
  bottom: 8%;
  display: flex;
  content: url('./icons/arrow_left.png');
  max-width: 100%;
  color: white !important;
  font-size: 26pt;
  padding: 0;
  z-index: 5;
  height: 2em;
  width: 2em;
  opacity: 0.7;
}

#des_acto {
  visibility: hidden;
}

.cen_lat_dcho {
  position: fixed;
  top: 110%;
  left: 20%;
  margin-top: -2.85rem;
}

.cen_lat_izq {
  position: fixed;
  top: 110%;
  right: 20%;
  margin-top: -2.85rem;
}

.cubo3d {
  animation-timing-function: ease-in-out;
  animation-iteration-count: initial;
  animation-duration: 1.50s;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transform-origin: 1.64rem 1.64rem 0;
  transform-origin: 1.64rem 1.64rem 0;
  animation-fill-mode: forwards;
  z-index: 11;
}

.cubo3d div{
  position: fixed;
  width: 3.28rem;
  height: 3.28rem;
  border: 0.05rem solid #6E6E6E;
  background: #fff;
}

.solo {
  width: 3.26rem !important;
  height: 3.26rem !important;
  -moz-transform-origin: 1.64rem 1.64rem 0 !important;
  transform-origin: 1.64rem 1.64rem 0 !important;
}

.cara1_uno {
  -moz-transform: translateZ(1.64rem);
  transform: translateZ(1.64rem);
}

.cara2_uno {
  -moz-transform: rotateY(90deg) translateZ(1.64rem);
  transform: rotateY(90deg) translateZ(1.64rem);
}

.cara3_uno {
  -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(1.64rem);
  transform: rotateY(90deg) rotateX(90deg) translateZ(1.64rem);
}

.cara4_uno {
  -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(1.64rem);
  transform: rotateY(180deg) rotateZ(90deg) translateZ(1.64rem);
}

.cara5_uno {
  -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(1.64rem);
  transform: rotateY(-90deg) rotateZ(90deg) translateZ(1.64rem);
}

.cara6_uno {
  -moz-transform: rotateX(-90deg) translateZ(1.64rem);
  transform: rotateX(-90deg) translateZ(1.64rem);
}

.c_uno:before {
  content: url('icons/c_uno.png');
  -moz-transform: scale(0.75);
  display: flex;
  left: -17%;
  position: absolute;
  top: -17%;
}

.c_dos:before {
  content: url('./icons/c_dos.png');
  -moz-transform: scale(0.75);
  display: flex;
  left: -17%;
  position: absolute;
  top: -17%;
}

.c_tres:before {
  content: url('./icons/c_tres.png');
  -moz-transform: scale(0.75);;
  display: flex;
  left: -17%;
  position: absolute;
  top: -17%;
}

.c_cuatro:before {
  content: url('./icons/c_cuatro.png');
  -moz-transform: scale(0.75);
  display: flex;
  left: -17%;
  position: absolute;
  top: -17%;
}

.c_cinco:before {
  content: url('./icons/c_cinco.png');
  -moz-transform: scale(0.75);
  display: flex;
  left: -17%;
  position: absolute;
  top: -17%;
}

.c_seis:before {
  content: url('./icons/c_seis.png');
  -moz-transform: scale(0.75);
  display: flex;
  left: -17%;
  position: absolute;
  top: -17%;
}

.tirador {
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index: 10;
}

.tirar {
  position: fixed;
  left: 50%;
  bottom: 5%;
  margin-left: -3.57rem;
  min-width: 7.14rem;
  min-height: 2.85rem;
  font-size: 1.5em;
  border-radius: 0.2rem;
  background-color: #fff;
  box-shadow: none;
  color: #000;
  cursor: pointer;
  z-index: 10;
  border: 0.08rem solid #6E6E6E;
}

.fondados {
  background: url('img/pic1705546.jpg') no-repeat center center fixed;
  background-size: cover;
  position: fixed;
  right: 0%;
  top: 110%;
  z-index: 10;
  color: white;
  height: 100%;
  width: 100%;
}

.preloaddest {
  visibility: hidden;
}

@keyframes uno {
  0% { transform: translate3d(0rem,0rem,0rem) translateZ(0rem) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: translate3d(0rem,0rem,0rem) translateZ(0rem) rotateX(0deg) rotateY(360deg) rotateZ(360deg); }
}

@keyframes dos {
  0% { transform: translate3d(0rem,0rem,0rem) translateZ(0rem) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: translate3d(0rem,0rem,0rem) translateZ(0rem) rotateX(0deg) rotateY(270deg) rotateZ(360deg); }
}

@keyframes tres {
  0% { transform: translate3d(0rem,0rem,0rem) translateZ(0rem) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: translate3d(0rem,0rem,0rem) translateZ(0rem) rotateX(360deg) rotateY(-90deg) rotateZ(-270deg); }
}

@keyframes cuatro {
  0% { transform: translate3d(0rem,0rem,0rem) translateZ(0rem) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: translate3d(0rem,0rem,0rem) translateZ(0rem) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }
}

@keyframes cinco {
  0% { transform: translate3d(0rem,0rem,0rem) translateZ(0rem) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: translate3d(0rem,0rem,0rem) translateZ(0rem) rotateX(270deg) rotateY(180deg) rotateZ(90deg); }
}

@keyframes seis {
  0% { transform: translate3d(0rem,0rem,0rem) translateZ(0rem) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: translate3d(0rem,0rem,0rem) translateZ(0rem) rotateX(90deg) rotateY(-360deg) rotateZ(360deg); }
}

.mantener {
  position: absolute;
  top: 25%;
  left: 1%;
}

.destino_reserva {
  position: absolute;
  right: 2%;
  top: 25%;
  visibility: hidden;
  animation: parpadeo 2s;
  animation-iteration-count: infinite;
}

.almacen_card {
  z-index: 5;
  background: url('img/dotz_mapfarmingdale.jpg') no-repeat center center fixed;
  background-size: cover;
  position: fixed;
  right: 0%;
  top: 110%;
  z-index: 5;
  color: white;
  height: 100%;
  width: 100%;
}

.al_siguiente:after {
  position: fixed;
  right: 0.5%;
  bottom: 8%;
  display: flex;
  content: url('./icons/arrow_right.png');
  max-width: 100%;
  color: white !important;
  font-size: 26pt;
  padding: 0;
  z-index: 5;
  height: 2em;
  width: 2em;
  opacity: 0.7;
}

.al_anterior:after {
  left: 0.5%;
  position: fixed;
  bottom: 8%;
  display: flex;
  content: url('./icons/arrow_left.png');
  max-width: 100%;
  color: white !important;
  font-size: 26pt;
  padding: 0;
  z-index: 5;
  height: 2em;
  width: 2em;
  opacity: 0.7;
}

#alm_flechas {
  visibility: hidden;
  z-index: 5;
}

.alma {
  display: none;
}

.reserva_destino {
  visibility: hidden;
}

.szeds {
  position: fixed;
  top: 25%;
  left: 0.5%;
  animation: parpadeo 5s;
  animation-iteration-count: infinite;
}

.zeds {
  box-shadow: -0.4em 0.5em 0.2em 0px rgba(0, 0, 0, 0.75);
  border-radius: 0.5em 0.5em 0.5em 0.5em;
}
