/* font converted using font-converter.net. thank you! */
@font-face {
    font-family: "BryantPro-Medium";
    src: url("../fonts/BryantPro-Medium.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/BryantPro-Medium.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../fonts/BryantPro-Medium.otf") format("opentype"),
        /* Open Type Font */
        url("../fonts/BryantPro-Medium.svg") format("svg"),
        /* Legacy iOS */
        url("../fonts/BryantPro-Medium.ttf") format("truetype"),
        /* Safari, Android, iOS */
        url("../fonts/BryantPro-Medium.woff") format("woff"),
        /* Modern Browsers */
        url("../fonts/BryantPro-Medium.woff2") format("woff2");
    /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

* {
    font-size: 100%;
    font-family: "BryantPro-Medium";
}

p {
    font-size: small;
}

body {
    background-color: #cccccc;
}

.mt-8 {
    margin-top: 8rem !important;
}

.w-15 {
    width: 15% !important;
}

.logo img {
    width: 85%;
}

.bg_dark {
    background-image: url("../img/background.jpg");
}

.bg_light {
    background-image: url("../img/back05.png");
}

.bg_lila {
    background-color: #a31984;
}

.bg_green {
    background-color: #c1d82f;
    padding: 10px;
}

.bg_green_dark {
    background-color: #05938e;
}

.bg_pend {
    background-color: #ED740F;
    border-radius: 25px;
    cursor: pointer;
}

.bg_modal {
    background-color: #00B5AE;
    border: #fff solid 5px;
    border-radius: 25px;
}

.bg_trans_modal {
    background-color: transparent;
    border: #a31984 solid 5px;
    border-radius: 25px;
    border: none;
}

.bg_modal h3 {
    color: #fff;
}

.bg_modal_premio {
    background-image: url("../img/back06.png");
    background-repeat: repeat;
    border-radius: 20px;
    background-position: center;
}

.overlay {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    cursor: progress;
}

.overlay .spinner-border {
    position: absolute;
    top: 50%;
    left: 45%;
}

.overlay p {
    top: 60%;
}

.btn_aqua {
    background-image: url("../img/button_aqua.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 600px;
    height: 100px;
    max-width: 100%;
}

.btn_text {
    position: absolute;
    left: 0;
    top: 30%;
    width: 100%;
    font-size: medium;
}

.btn_orange {
  background-image: url("../img/button_orange.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  border-radius: 20px;
  font-size: 1.5rem;
  padding: 6px 12px;
  color: #fff;
}

.btn:focus,
.btn:active {
    outline: none !important;
    box-shadow: none;
}

button:focus,
button:active {
    outline: none !important;
    box-shadow: none;
}

.text_verde {
    color: #05938e;
}

.text_verdecito {
    color: #abdc4e;
}

.text_lila {
    color: #9461A9;
}

.text_naranja {
    color: #ED740F;
}

.text_gris {
    color: #636363;
}

.jugar {
    width: 40%;
    margin-top: -10%;
}

.navbar-toggler.collapsed .normal {
    display: block;
}

.navbar-toggler .normal {
    display: none;
}

.navbar-toggler.collapsed .extended {
    display: none;
}

.navbar-toggler .extended {
    display: block;
}

.borde_white {
    border-color: #fff !important;
    border-style: solid;
    border-radius: 20px;
    border-width: 2px;
}

.mt-resp {
    margin-top: 2.1rem !important;
}

.mt-resp img {
    width: 30% !important;
}

@media only screen and (max-width: 299px) {
  .mt-resp {
    margin-top: 1.8rem !important;
  }

  .raspa {
    width: 75%;
  }

  #abrirPendiente .fa{
    font-size: 2.25rem;
  }

  #abrirPendiente h3{
    font-size: 1.25rem;
  }
}

@media only screen and (min-width: 300px) {
  .mt-resp {
    margin-top: 2.1rem !important;
  }

  .raspa {
    width: 75%;
  }

  #abrirPendiente .fa{
    font-size: 2.25rem;
  }

  #abrirPendiente h3{
    font-size: 1.25rem;
  }
}

@media only screen and (min-width: 330px) {
  .mt-resp {
    margin-top: 2.5rem !important;
  }

  .raspa {
    width: 75%;
  }

  #abrirPendiente .fa{
    font-size: 2.25rem;
  }

  #abrirPendiente h3{
    font-size: 1.25rem;
  }
}

@media only screen and (min-width: 350px) {
  .mt-resp {
    margin-top: 2.6rem !important;
  }

  .raspa {
    width: 75%;
  }

  #abrirPendiente .fa{
    font-size: 2.25rem;
  }

  #abrirPendiente h3{
    font-size: 1.25rem;
  }
}

@media only screen and (min-width: 400px) {
  .mt-resp {
    margin-top: 3rem !important;
  }

  .raspa {
    width: 75%;
  }

  #abrirPendiente .fa{
    font-size: 2.25rem;
  }

  #abrirPendiente h3{
    font-size: 1.25rem;
  }
}

@media only screen and (min-width: 450px) {
  .mt-resp {
    margin-top: 3.4rem !important;
  }

  .raspa {
    width: 75%;
  }

  #abrirPendiente .fa{
    font-size: 2.25rem;
  }

  #abrirPendiente h3{
    font-size: 1.25rem;
  }
}

@media only screen and (min-width: 500px) {
  .mt-resp {
    margin-top: 4rem !important;
  } 

  .raspa {
    width: 75%;
  }

  #abrirPendiente .fa{
    font-size: 2.25rem;
  }

  #abrirPendiente h3{
    font-size: 1.25rem;
  }
}

@media (min-width: 576px) {
  .btn_text {
    font-size: medium;
  }

  .logo img {
    width: 70%;
  }

  .mt-resp {
    margin-top: 1.8rem !important;
  }

  .mt-resp img {
    width: 25% !important;
  }

  .raspa {
    width: 100%;
  }

  #abrirPendiente .fa{
    font-size: 3rem;
  }

  #abrirPendiente h3{
    font-size: 1.75rem;
  }
}

@media (min-width: 768px) {
  .btn_text {
    font-size: large;
  }

  .logo img {
    width: 55%;
  }

  .mt-resp {
    margin-top: 2.5rem !important;
  }

  .mt-resp img {
    width: 20% !important;
  }
}

@media (min-width: 992px) {
  .btn_text {
    font-size: larger;
  }

  .logo img {
    width: 40%;
  }

  .mt-resp {
    margin-top: 4rem !important;
  }

  .mt-resp img {
    width: 15% !important;
  }
}

@media (min-width: 1200px) {
  .btn_text {
    font-size: x-large;
  }

  .logo img {
    width: 35%;
  }

  .mt-resp {
    margin-top: 5rem !important;
  }

  .mt-resp img {
    width: 10% !important;
  }
}