@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

body {font-family: 'Open Sans', sans-serif; font-weight: 400}

/* HEADER */
.nav-link {color: #202529; font-size: 13px; padding: 0.5rem 1.5rem !important; line-height: 28px; font-weight: 400}
.nav-link:hover {color: #000000;}
.brand-img {width: 65%;}
a.nav-link.active {font-weight: 600;}
a {text-decoration: none; color: inherit;}

/* COLORS */
.grey {color: #8E8E8E}
.grey-light {color: #BABABA}
.white {color: #FFFFFF}
.bg-red {background-color: #F86151}
.yellow {color: #FFEB00}
.bg-black {background-color: #000000}
.bg-grey {background-color: #EFEFEF}

/* FONTS */
.w400 {font-weight: 400}
.w600 {font-weight: 600}
.w700 {font-weight: 700}
h1 {font-size: 50px; line-height: 50px;}
p {font-size: 14px; line-height: 23px;}
h3 {font-size: 22px;}
h2 {font-size: 47px;}
h4 {font-size: 19px;}
.font11 {font-size: 11px !important;}
.font17 {font-size: 17px !important;}
.font16 {font-size: 16px !important;}
.font19 {font-size: 19px !important;}
.txt-prode {font-size: 54px;}
.font13 {font-size: 13px;}
.font32 {font-size: 32px;}

/* LOGIN */
.bg-login {background-image: url(../img/bg-login.jpeg); background-size: cover; background-position: center; height: 100vh;}
.bg-prode {background-image: url(../img/prode2022.png); background-position: center center; background-size: 100%; background-repeat: no-repeat;}
.box-login {border-radius: 18px; margin-top: -40px;}
.box-logo {background-color: #EAEAEA;}
.box-border-top {border-top-left-radius: 18px; border-top-right-radius: 18px;}
.box-header p {font-size: 13px;}
.box-login input {font-size: 12px;}
.small {font-size: 10px; line-height: 13px;}
.red {color: #F86151;}
.bg-blue {background-color: #157BFB;}
.box-logo img {width: 47%;}
.footer-login {position: absolute; bottom: 0; left: 0; right: 0; background-color: #000000; padding: 10px 0px;}
.footer-login p {font-size: 13px;}

/* HOME */
.navbar {z-index: 99;}
.misce-1 {top: 15%;}
.misce-1 img {width: 70%;}
.misce-2 {width: 7%; top: 15%;}
.misce-3 {width: 10%;}
.form-team::before {position: absolute; left: -2px; top: -1px; content: ''; width: 57px; height: 40px; background-repeat: no-repeat;
    background-position: center; background-size: contain;}
.bg-home {padding: 5% 0% 10%; background-image: url(../img/bg-home.jpg); background-repeat: no-repeat; background-size: cover; background-position: center}
.rounded-5 {border-radius: 0.8rem!important;}
.btn-arrow::before {border-radius: 50%; border: 2px solid #FFFFFf; width: 30px; height: 30px; text-align: center;line-height: 27px;}
.img-trivia {right: -50px; top: -30px; width: 60%;}
.img-time {left: -3%; width: 8%; top: 11%;}
.mh20 {min-height: 21px;}
.g-6, .gx-6 {--bs-gutter-x: 5rem;}
.form-label {font-size: 11px;}
.black {color: #000000;}
.bg-green {background-color: #22D57A !important; color: #FFFFFF;}
.bg-yellow2 {background-color: #F9C92E !important; color: #FFFFFF;}
.bg-yellow2 p {line-height: 20px;}
.bg-blue {background-color: #157BFB !important; color: #FFFFFF;}
.btn-jugar-ya.bg-black-btn {background-color: #000000; color: #FFFFFF;}
.btn-jugar-ya.bg-black-btn:hover {background-color: #FFFFFF; color: #157BFB;}
.bg-blue p {line-height: 20px;}
.bg-green2 {background-color: #1EBF84 !important; color: #FFFFFF;}
.bg-green2 p {line-height: 20px;}
.bg-red {background-color: #FC4848 !important; color: #FFFFFF;}
.bg-red p {line-height: 20px;}
.btn-guardar-solid{background-color: #007BFF; border: 0; border-radius: 30px; padding: 7px 25px; color: #FFFFFF;
    font-size: 12px; pointer-events: none;
}
.btn-guardar {background-color: #007BFF; border: 0; border-radius: 30px; padding: 7px 25px; color: #FFFFFF;
    font-size: 12px; -webkit-transition: background-color 0.3s ease-out;-moz-transition: background-color 0.3s ease-out;
  -o-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out;}
.btn-guardar:hover {background-color: #000000}
.btn-jugar-ya {background-color: #007bff; border: 0; border-radius: 30px; padding: 8px 35px; color: #FFFFFF; font-size: 14px; -webkit-transition: background-color 0.3s ease-out;
    -moz-transition: background-color 0.3s ease-out; -o-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out;}
.btn-jugar-ya:hover {background-color: #FFFFFF; color: #007bff;}
.mt-6 {margin-top: -6%;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {background-color: transparent; border: 0; text-decoration: underline; color: #000;  font-weight: 700;}
.nav-tabs .nav-link {font-size: 18px; color: #848484; border: 0; padding: 0.5rem 1rem !important;}
.nav-tabs {border-bottom: 0;}
.card-body {padding: 2rem 3rem;}
.card {border: 0; margin-top: 4%; min-height: 275px;}
.form-select {font-size: 14px;}
.box-right {width: 20%; position: absolute; right: -2px; top: -7px; padding: 6px; text-align: center;}
.bandera {width: 21%; position: absolute; left: -3px; top: -8px;}
.form-team {min-height: 34px; border: 1px solid #CED4DA;}
.bandera-rh {width: 21%; position: absolute; right: -3px; top: -8px;}
.box-left {width: 20%; position: absolute; left: -2px; top: -7px; padding: 6px; text-align: center;}
.input-resul {width: 9%; border: 1px solid #E0E0E0; text-align: center;}
.card-body p {font-size: 13px;}
.btn-yellow {background-color: #FFF500; color: #000000}
.btn-yellow:hover {color: #FFFFFF}
.btn-blue {background-color: #157BFB; color: #FFFFFF}
.btn-blue:hover {color: #FFFFFF}
.btn-verde {background-color: #1EBF84; color: #FFFFFF}
.btn-gris-osc {background-color: #848484; color: #FFFFFF}
.btn-negro {background-color: #000000; color: #FFFFFF}
.btn-celeste:hover {color: #FFFFFF}
.navbar-toggler-icon {line-height: 1.5em;}
.form-team input {font-size: 20px;}
.btn-disabled {background-color: #1EBF84; color: #ffffff;}
.nav-link:disabled {color: #c6c6c6;}
.btn-disabled:hover {background-color: #1EBF84; color: #FFFFFF}
.puntaje-bg {background-color: #F9C92E; padding: 6px 20px; border-radius: 5px;}
.puntaje-bg::before {background-image: url(../img/puntaje.png); position: absolute; content: ''; top: -18px; right: -33px; width: 60px; height: 40px; background-size: contain; background-position: center;
    background-repeat: no-repeat;}
.empate {font-size: 11px; line-height: 16px;}
.form-check-input:checked {background-color: #000000;border-color: #000000;}
.form-check-input:focus {box-shadow: none;}
.actualizacion {font-size: 12px; line-height: 12px; margin-left: 57px;}

/* TRIVIA */
.bg-trivia {background-color: #FC4848; height: 100vh;}
.bg-cultura {background-color: #1EBF84 !important}
.bg-finales {background-color: #F9C92E !important;}
.bg-argenta {background-color: #157BFB !important;}
.tit-trivia {font-size: 80px; line-height: 84px; z-index: 9;}
.btn-jugar {font-size: 17px; width: 35%; display: block; margin: 0 auto;}
.btn-jugar:hover {color: #FFFFFF;}
.mt-63 {margin-top: -61px;}
.trivia-izq {width: 24%; top: 20%; position: absolute; left: 11%; z-index: 0;}
.trivia-der {position: absolute; right: 3%; width: 24%; top: 15%;}
.pt63 {padding-top: 63px;}
.btn-guardar.bg-black-btn {background-color: #000000; color: #FFFFFF;}
.btn-guardar.bg-black-btn:hover {background-color: #FFFFFF; color: #157BFB;}
.misce-juego-izq {left: 0; position: absolute; top: 15%; width: 23%;}
.misce-juego-der {right: 0; position: absolute; bottom: 0; width: 12%;}
.header-trivia {background-color: #F76151; padding: 2% 5%; border-top-left-radius: 20px; border-top-right-radius: 20px; min-height: 110px;}
.header-trivia p {font-size: 18px;}
.header-trivia .bi-star-fill {color: #FFE200; text-shadow: 0px 0px 4px rgb(0 0 0 / 15%);}
.puesto {background-color: #FFFFFF; color: #f76151; padding: 1px 26px; border-radius: 15px; font-size: 17px;}
.icon-timer {background-color: #FFFFFF; border-radius: 50%; width: 33px; height: 33px; color: #f76151; display: inline-block;
    line-height: 35px;}
.body-trivia {background-color: #FFFFFF; padding: 4% 5%; box-shadow: 0px 4px 11px rgb(0 0 0 / 5%); border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;}
.body-trivia h2 {font-size: 21px; font-weight: 600;}
.btn-answer {cursor: pointer; box-shadow: 0 0 4px rgb(0 0 0 / 5%); background-color: #EFEFEF; min-height: 100px; border-radius: 10px;
    font-weight: 600; font-size: 19px; display: flex; justify-content: center; align-items: center;}
.img-puntaje {position: absolute; top: -10px; width: 15%; left: 45%;}



/* POSICIONES */
.table {border-color: #c7c7c7;}
th {font-weight: 400; color: #707070;}
table td {color: #707070; font-size: 14px; vertical-align: middle;}
.table-title th {color: #000000; font-size: 17px}
.table>:not(caption)>*>* {padding: 0.8rem 0.5rem;}
.bg-posiciones {padding: 15% 0% 5%; background-image: url(../img/bg-posiciones.jpeg); background-repeat: no-repeat; background-size: cover; background-position: center}
.page-link {padding: 0.375rem 1rem; background-color: transparent; border: 0; color: #000000; font-size: 14px;}
.page-link i {font-size: 10px;}
.page-item:first-child .page-link {border-radius: 0;}
.page-link:hover {z-index: 2; color: #000000; background-color: #e6e6e6; border-color: #e6e6e6;}
::selection {background-color: #000000; color: #FFFFFF;}

/* PUNTAJE */
.bg-puntaje {background-image: url(../img/bg-puntaje.jpg); background-size: cover; background-position: center; height: 100vh; background-repeat: no-repeat;}
.lineas-img {top: 63px; width: 14%;}
.puntaje h1 {font-size: 58px; line-height: 58px;}
.puntaje h2 {font-size: 36px; line-height: 43px;}
.txt-obtuviste {background-color: #FFFFFF;  width: fit-content; margin: 0 auto; padding: 1% 5%; border-top-left-radius: 15px;
    border-top-right-radius: 15px;}
.txt-obtuviste p {font-size: 25px;}
.txt-puntaje {background-color: #F76151; width: fit-content; margin: 0 auto; padding: 1.2% 2%; border-radius: 15px; min-width: 340px;}
.txt-puntaje p {font-size: 40px; line-height: 40px;}
.txt-puntaje i {color: #FFE200; text-shadow: 0px 0px 4px rgb(0 0 0 / 15%);}
.star-left {top: 22%;}
.star-left img {width: 65%;}
.circle-right {width: 8%; bottom: 6%;}
.misce-puntaje {background-image: url(../img/misce-puntaje.png); background-repeat: no-repeat; background-position: 52% 25%;
    background-size: 50%;}
.bg-puntaje .btn-guardar:hover {background-color: #FFFFFF;}

/* REGLAMENTO */
.lineas {position: absolute; right: 0; bottom: 0;}
.lineas img {width: 60%;}
.title-reglamento::before {content: ''; background-image: url(../img/reglamento.svg); background-position: center;
    background-size: contain; position: absolute; width: 10rem; height: 6rem; background-repeat: no-repeat;
    left: 18%; top: -70px;}
.reglamento .nav-tabs .nav-link:first-child {padding-left: 0 !important;}

/* PREMIOS */
.bg-premios {padding: 5% 0% 10%; background-image: url(../img/bg-premios.jpeg); background-repeat: no-repeat; background-size: cover; background-position: center}
.title-premios::before {content: ''; background-image: url(../img/premios.svg); background-position: center;
    background-size: contain; position: absolute; width: 10rem; height: 8rem; background-repeat: no-repeat;
    left: 16%; top: -80px;}
.img-premios {min-height: 320px; border: 1px solid #DDDDDD; border-radius: 20px; box-shadow: 0 0 10px 2px rgb(0 0 0 / 4%);}

@media (max-width: 1400px) {
.form-team {min-height: 30px;}
.bandera {width: 22%; top: -6px; left: -5px;}
.bandera-rh {width: 22%; top: -6px; right: -5px;}
.box-right {top: -6px; padding: 5px;}
.box-left {top: -6px; padding: 5px;}
.card-body p {font-size: 12px;}
.btn-guardar {font-size: 12px;}
.input-resul {width: 11%;}
.form-team input {font-size: 18px;}
.btn-jugar {font-size: 18px;}
.table-title th {font-size: 15px;}
.actualizacion {margin-left: 49px;}
}


@media (max-width: 1200px) {
.img-puntaje {width: 18%;}
.title-reglamento::before {left: 24%;}
.card-body {padding: 2rem 2rem;}
.bandera-rh {width: 21%; top: -7px;}
.bandera {width: 21%; top: -7px;}
h1 {font-size: 40px; line-height: 40px;}
.img-time {left: -5%; width: 11%; top: 10%;}
.g-6, .gx-6 {--bs-gutter-x: 2rem;}
.trivia-izq {width: 29%; left: 2%;}
.trivia-der {width: 26%; top: 14%; right: 0%;}
.tit-trivia {font-size: 90px; line-height: 94px;}

}

@media (max-width: 1080px) {
.bandera-rh {width: 24%;}
.bandera {width: 24%;}
}

@media (max-width: 990px) {
.header-trivia {min-height: 90px;}
table td {font-size: 11px;}
.img-puntaje {width: 22%;}
th {font-size: 12px;}
.g-6, .gx-6 {--bs-gutter-x: 1rem;}
h3 {font-size: 19px;}
h2 {font-size: 41px;}
.form-team {min-height: 40px;}
.bandera {left: -20px; top: -10px; height: 60px; width: 24%;}
.bandera-rh {right: -20px; top: -10px; height: 60px; width: 24%;}
.box-right {top: -6px; padding: 12px; width: 15%;}
.box-left {top: -6px; padding: 12px; width: 15%;}
.card-body p {font-size: 14px;}
.input-resul {width: 7%;}
.nav-tabs .nav-link {font-size: 14px; padding: 0.5rem 1.3rem !important;}
.btn-arrow::before {border: 1px solid #FFFFFf; width: 25px; height: 25px; line-height: 24px;}
.btn-arrow {font-size: 12px;}
.img-time {display: none}
.nav-link {padding: 0.5rem 0rem !important}
.misce-2 {width: 11%; top: 17%;}
.misce-1 {top: 18%;}
.body-trivia h2 {font-size: 18px;}
.btn-answer {font-size: 17px;}
.actualizacion {margin-left: 32px;}

}

@media (max-width: 768px) {
.header-trivia {min-height: auto;}
.actualizacion {margin-left: 22px; margin-bottom: 0;}
.table-title th {font-size: 11px;}
.title-reglamento::before {left: 37%;}
.img-trivia {right: 0; top: -30px; width: 50%;}
.tit-trivia {font-size: 60px;line-height: 64px;}
.font17 {font-size: 15px !important;}
.btn-jugar {font-size: 15px; width: 60%;}
.puesto {padding: 1px 20px; font-size: 15px;}
.body-trivia h2 {font-size: 17px;}
.header-trivia h1 {font-size: 34px; line-height: 40px; width: 100%;}
.header-trivia p {font-size: 15px;}
.misce-juego-izq {width: 40%;}
.misce-juego-der {width: 17%;}
.img-puntaje {display: none;}
}

@media (max-width: 576px) {
.header-mob {flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-evenly !important;}
.btn-guardar-solid {font-size: 15px;}
.btn-guardar {font-size: 15px;}
.rec-mob p {font-size: 16px; line-height: 19px;}
.rec-mob {border: 1px solid #CED4DA; border-radius: 10px; min-height: 200px;}
.bandera {position: relative; width: 40%; height: auto; left: auto; top: auto; margin-top: -30px;}
.bandera-rh {position: relative; width: 40%; height: auto; right: auto; top: auto; margin-top: -30px;}
#score_points {font-size: 15px;}
.w100mob {width: 100%;}
.text-center-mob {text-align: center;}
.actualizacion {margin-left: 15px;}
.body-trivia {padding: 8% 5%;}
footer .col-auto {width: 100% !important; text-align: center;}
.misce-1 {top: 15%;}
.nav-tabs .nav-link {font-size: 16px; padding: 0.4rem 0.8rem !important;}
.txt-prode {font-size: 44px;}
.font19 {font-size: 16px !important;}
.brand-img {width: 60%;}
.puntaje-bg::before {top: -15px; right: -22px; width: 35px; height: 40px;}
.img-trivia {width: 55%;}
.input-resul {width: 14%;}
.btn-group, .btn-group-vertical {display: flex}
.box-left {width: 100%; position: relative; left: auto; right: auto; top: auto; margin-top: 56%; border-radius: 10px;}
.box-right {width: 100%; position: relative; left: auto; top: auto; right: auto; margin-top: 56%; border-radius: 10px;}
.form-team input {font-size: 16px;}
.star-left {top: 14%;}
.star-left img {width: 35%;}
.puntaje h1 {font-size: 45px; line-height: 45px;}
.puntaje h2 {font-size: 28px; line-height: 32px;}
.txt-puntaje p {font-size: 33px; line-height: 33px;}
.txt-puntaje {padding: 3% 4%; min-width: 280px;}
.txt-obtuviste p {font-size: 18px;}
.txt-obtuviste {padding: 2% 13%;}
.circle-right {width: 15%; bottom: 3%;}
.misce-puntaje {background-image: none;}
.empate {font-size: 14px; line-height: 17px;}
.font11 {font-size: 14px !important;}
}

@media (max-width: 480px) {
.rec-mob p {font-size: 13px; line-height: 17px;}
.rec-mob {border: 1px solid #CED4DA; border-radius: 10px; min-height: 150px;}
.bandera {width: 60%;  margin-top: -23px;}
.bandera-rh {width: 60%; margin-top: -23px;}
.box-left {margin-top: 33px;}
.box-right {margin-top: 33px;}
#score_points {font-size: 13px;}
.empate {font-size: 12px; line-height: 14px;}
.font11 {font-size: 12px !important;}
.btn-guardar-solid {font-size: 13px;}
.btn-guardar {font-size: 13px;}
a.navbar-brand {width: 80%;}

}