* {
     font-family: 'Open Sans';
     padding: 0;
     margin: 0;
     box-sizing: border-box;
    }

    body {
      padding: 0;
      margin: 0;
      text-align: center;
      font-size: 120%;
    }

    .contenedor {
width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .encabezado {
      background: white;
        width: 100%;
        max-width: 600px;
        padding: 2em;
		        position: relative;
    }

    .categoria {
      opacity: 0.3;
      text-align: left;
    }

    .pregunta {
      padding: 1em;
    }

    .imagen {
      object-fit: cover;
      height: 0px;
      width: 0px;
    }

    .btn {
      background: white;
      cursor: pointer;
        padding: .5em;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .8em;
              transition: all 0.3s;
    }

    .btn:hover {
      transform: scale(1.05);
              transition: all 0.3s;
    }
    
    .numero{
      position: absolute;
      opacity:0.3;
      top: 10px;
      right: 10px;
    }
    
    .puntaje{
      padding:10px;
      color:white;
    }
     
      .hidden{
          display: none;
      }

body {
    width: 100%;
    min-height: 100vh;
    background-image: url("../../images/BG_LANDING_2.jpg");
    background-size: contain;
    background-position: center center;
    background-repeat: repeat-y;
    
}

.vara {
    height: 70px;
    width: 15px;
    background-color: #aaa;
    margin: auto;
    position: relative;
    top: 10px;
    border-radius: 0px 0px 8px 8px;
    border: 1px solid #000;
    border-top: 5px solid #000;
    z-index: 1000;
}

img {
    z-index: 100;
    transition: all 5s;
    max-width: 100%;
}

#premio {
    color: white;
    font-weight: bold;
    font-size: 16px;
    padding: 0px;
}

.full-width {
	width: 100%;
}

#progressBar {
  width: 95%;
  margin: 10px auto;
  height: 10px;
  background-color: whitesmoke;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 10px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #f68642;
  box-sizing: border-box;
}

.boton{
    display: block;
    max-width: 220px;
    text-decoration: none;
    padding: 1em;
    margin: 1em auto;
    text-transform: uppercase;
    color: white;
    background: #f68642;
    cursor: pointer;
    font-size: 1em;
	border:1px solid white;
}

.boton:hover{
    text-decoration: none;
    color: #f68642;
    border: 1px solid #f68642;
    background: white;
}

.container{
    color: white;
    display: grid;
   place-self:center;
    align-self: center;
}

.respuestas{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 600px;
    padding: 2em;
    grid-gap: 1em;
}
h1{
    text-transform: uppercase;
font-size: 3rem;
    font-weight: 300;
    line-height: 3rem;
}

.ruleta{
    width: 100%;
    max-width: 600px;
    margin: auto;
}

 .icon-ruleta {
     position: absolute;
     left: -75px;
     top: -75px;
     max-width: 150px;
     display: block;
 }

 .icon-regalo {
     position: absolute;
     right: -75px;
     bottom: -75px;
     max-width: 150px;
     display: block;
 }

 @media (min-width: 320px) and (max-width: 480px) {
h1{
    font-size: 30px;
    line-height: initial;
}
     .encabezado{
         margin: 15px;
     }
.icon-ruleta{
         display: none;
     }

     .icon-regalo{
         display: none;
     }
 }

 .titulo {
     font-family: "Exo 2", sans-serif;
     font-optical-sizing: auto;
     font-weight: 800;
     font-style: normal;
     color: #f68642;
     margin-bottom: .5em;
     text-wrap: balance;
 }

 .exo{
     font-family: "Exo 2", sans-serif;
     font-weight: normal;
     margin-bottom: 1em;
     text-align: left;
 }