@font-face {
  font-family: BryantPro;
  src: url("fonts/BryantPro-Regular.otf") format("opentype");
}

@font-face {
  font-family: BryantPro;
  font-weight: bold;
  src: url("fonts/BryantPro-Bold.otf") format("opentype");
}

@font-face {
  font-family: Fontyou;
  font-weight: bold;
  src: url("fonts/Fontyou\ -\ Bruum\ FY\ Bold.otf") format("opentype");
}

body
{
    font-family: arial;
    /*background-color:#2f2f2f;*/
    /*background-color:#ee1d62;*/
    background-color:#159897;
    margin:0px;
    padding:0px;
    /*padding-top:40px;*/
    border:0px;
    height:100%;
    max-width: 100%;
    overflow-x: hidden;
    
}
[v-cloak] { display:none; }

.container{
    width:500px;
    margin: auto;
    margin-top:0px;
    background-color:#00b5ae;
    /*height: 100vh;*/
    min-height: 100%;
}
.cartel{
    background-image: url(../img/fondo-violeta.png);
    background-repeat: no-repeat;
    /*background-color: #faff00;*/
    width:431px;
    height:95px;
    margin: 0 auto;
    padding:6px;
    color:#ffffff;
    /*transform: rotate(-5deg);*/
    /*border:6px #000000 solid;*/
}


.the_wheel
{
    width:315px;
    background-image: url(../img/wheel_back.png);
    background-position: center;
    background-repeat: none;
    background-repeat: no-repeat;
    margin: 0 auto;
    margin-top: -5px;
    /*margin-left:35px;*/
    border-bottom:10px #000000 solid;
}

.spin_button {
  margin-top:-70px;
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;
  /* When the animation is finished, start again */
  animation-iteration-count: infinite;


  width:100%;
  padding:15px;  
  font-family: 'Fontyou', bold;
  background-color: #6a2c90;
  border: 1px #ffffff solid;
  font-size: 2em;
  height:80px;
  color: #ffffff;
  border-radius: 15px;
}
.spin_button_clicked {
  animation:none;
  background-color: #6600b6;
  outline: none;
}
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.cartel h1{
  text-align:center;
  font-size: 1.3em;
  color:#ffffff;
  font-weight: 0;
  font-family: 'Fontyou', bold;
  padding-right: 7px;


  /*font-family: 'Bangers', cursive;*/
  /*font-family: 'Caveat Brush', cursive;*/
  /*/font-family: 'Chewy', cursive;*/
}


.answer_screen{
  position:absolute;
  /*background-color: #03f654;*/
  top: 50%;
  left: 50%;  
  width:300px;
  height:295px;
  margin-top: -200px;
  margin-left:-170px;
  padding:7px;
  /*transform: rotate(7deg);*/
  border:2px #ef4632 solid;
  border-radius: 25px;
  z-index: 6;
}
.answer_title{
  text-align:center;
  font-size: 2.5em;
  color:#000000;
  padding-top:10px;
  padding-bottom:10px;
  font-family: BryantPro;
  font-weight: bold;  
}
.continue_button {
  /*margin-top:-70px;*/
  /*width:90%;*/
  padding:10px;
  width:100%;

  font-family: 'Fontyou', bold;
  background-color: #646b70;
  border: 1px #646b70 solid;

  font-size: 1.4em;
  /*height:80px;*/
  color: #ffffff;
  border-radius: 15px;
  animation-name: pulse-grow;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;  
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);  
  outline: none;
}
@keyframes pulse-grow {
  to {
    transform: scale(1.05);
  }
}

.loader{
  position:absolute;
  z-index: 25;
  left: 5;
  top: 0;
  display: block;  
  /*background-color:#ffffff88;*/
  padding:2px;
  width:30px;
}
.message_screen{
  position:absolute;
  width:100%;
  min-height: 100%;
  z-index: 6;
  /*background-color: #2f2f2f;*/
  background-color:#00b5ae;
  left: 0;
  top: 0;
  color: #ffffff;
  font-family: BryantPro;
  font-size: 2em;  
  text-align:center;
  padding-top:30px;
}

.question_screen{
  position:absolute;
  width:100%;
  min-height: 100%;
  z-index: 5;
  /*background-color: #2f2f2f;*/
  /*background-color:#107dcf;*/
  left: 500;
  top: 0;
  display: none;
}


.question_screen_slidein {
  -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 2s;
  animation: slide 0.5s forwards;
  animation-delay: 0s;
  display: block !important;
}

.question_screen_slideout {
  -webkit-animation: slideout 0.5s forwards;
  -webkit-animation-delay: 2s;
  animation: slideout 0.5s forwards;
  animation-delay: 0s;
  display: block !important;
  left: 0;
}

.deportes_category{
  background-color:#fcef00;
}
.espectaculos_category{
  background-color:#007cc1;
}
.musica_category{
  background-color:#fb00dd;
}
.curiosidades_category{
  background-color:#ff0000;
}
.ciencia_category{
  background-color:#ff8200;
}
.otras_category{
  background-color:#00b800;
}
@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

@-webkit-keyframes slideout {
  100% { left: -2500; }
}

@keyframes slideout {
  100% { left: -2500; }
}

.category_title {
  text-align:center;
  font-size: 1.8em;
  color:#ffffff;
  font-weight: 0;
  font-family: BryantPro;
  font-weight: bold;  
  /*background-color: #ff0000;*/
  width:80%;
  margin: 0 auto;
  padding:15px;
  transform: rotate(-2deg);
  border:6px #000000 solid;
  border-bottom:15px #000000 solid;
}
.points_title {
  float:right;
  text-align:center;
  font-size: 1.2em;
  color:#ffffff;
  font-weight: 0;
  font-family: 'Fontyou';
  background-color: #000000;
  /*background-color: #8f00ff;*/
  margin: 0 auto;
  padding:15px;
  transform: rotate(3deg);
  /*border:6px #000000 solid;*/
  margin-right:10px;
  border-radius: 15px;
}

.enter_button {
  /*margin-top:-70px;*/
  /*width:90%;*/
  padding:20px;
  width:100%;
  
  font-family: 'Fontyou', bold;
  background-color: #6a2c90;
  border: 1px #ffffff solid;

  font-size: 0.8em;
  /*height:80px;*/
  color: #ffffff;
  border-radius: 15px;
  animation-name: pulse-grow;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;  
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0); 
  text-decoration:none; 
  outline: none;
  margin-top:5px;
}
.msisdn_error{
  font-size: 0.6em;
  color:#ffffff;  
  font-family: Arial, Helvetica, sans-serif;  
}
.text_input{
  font-size: 1.3em;
  color:#000000;  
  font-family: 'BryantPro';
  width:100%;
  text-align:center;
  margin-bottom:5px;
}
.question_text{
  width:80%;
  text-align:center;
  font-size: 2em;
  margin: 0 auto;
  color:#000000;
  background-color: #ffffff;
  border:4px #000000 solid;
  font-weight: 0;
  margin-top:-60px;
  padding-top:50px;
  padding-bottom:20px;
  /*font-family: 'Luckiest Guy', cursive;*/


  /*font-family: 'Bangers', cursive;*/
  /*font-family: 'Caveat Brush', cursive;*/
  font-family: BryantPro;  

}

.choices_list{
  width:80%;
  margin: 0 auto;
}
.choices_list ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.choices_list ul li{
  font-size: 1.7em;  
  font-family: BryantPro;
  /*font-family: 'Caveat Brush', cursive;*/
  /*font-family: 'Chewy', cursive;*/
  padding:10px;
  color:#000000;
  margin: 10px 0 10px 0;
  background-color:#646b70;
  border: 1px #000000 solid;
}


.bounce-enter-active {
  animation: bounce-in .5s;
}
/*
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
*/
@keyframes bounce-in {
  0% {
    transform: scale(0);    
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}