/*------------------------------------------------CUSTOM------------------------------*/

:root {
    --black: #000000;
    --gray: #696565;
    --dark-gray: #201c1c;
    --orange: #ec4006;
    --red: #ff3404;
}

.btn-welcome{
    border: none;
    background-color: var(--red);
    border-radius: 32px;
    width: 200px;
    height: 32px;
}

.nav {
    height: 50px;
}

.arriba_ecuador {
    width: 200%;
}

.font_participa {
    font-size: 40px;
}

.font_gana {
    font-size: 56px;
}

.menu-display {
    display: none;
    background-color: white;
}

.cont-title {
    width: 250px;
    -webkit-transform: skew(-16deg);
    -moz-transform: skew(-16deg);
    -o-transform: skew(-16deg);
    background: #e12019;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-weight: bold;
    margin: 40px;
}

form {
    width: 50%;
}

.btn-primary {
    width: 100%;
    border-radius: 20px;
    background-color: #e12019;
    border: 0;
}

.btn-login {
    border: none;
    border-radius: 20px;
    height: 48px;
    width: 70%;
    background-color: #383434;
    color: white;
    transition: background-color 0.5s ease;
}

.btn-login:hover {
    background-color: #272525;
}

.footer-form {
    height: 40px;
    background-color: var(--red);
    width: 250px;
    border-top-right-radius: 100px;
    border-top-left-radius: 100px;
    margin-right: 15%;
}

.foot {
    height: 30px;
    background-color: var(--red);
    width: 100%;
}

#logo-bar {
    position: absolute;
    z-index: 1;
    background-color: #fff;
    padding-left: 40px;
    padding-right: 40px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    margin-left: 1%;
    padding-bottom: 15px;
}

.premios{
    width: 80%;
}

.bg-orange-color {
    background-color: var(--red);
}

.bg-black {
    background-color: #474747;
}

.bg-really-black {
    background-color: #000000;
}

.bg-orange,
.bg-login,
.bg-signup {
    background-image: url("/assets/images/bgHome.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.bg-login {
    background-image: url("/assets/images/bgLogin.png");
}

.bg-signup {
    background-image: url("/assets/images/bgSignup.png");
}

.bg-gray {
    background-color: var(--gray);
}

.text-orange {
    color: var(--orange);
}

.text-red {
    color: var(--red);
}

.text-white {
    color: white;
}

.text-gray {
    color: var(--gray);
}

.text-t {
    color: transparent;
}

.text-center {
    text-align: center;
}

.check-orange {
    background-color: var(--orange);
}

.inputs-redondiados {
    border: none;
    border-radius: 20px;

    width: 70%;
    padding: 8px;
}

.inputs-redondiados:focus {
    outline-color: rgb(64, 186, 243);
}

.bold {
    font-weight: bolder;
}

.big-text {
    font-size: 24px;
}

.very-big-text {
    font-size: 32px;
}

.small-text {
    font-size: 10px;
}

.text-left {
    text-align: left;
}

.flex-center {
    display: flex;
    justify-content: center;
}

.flex-left {
    display: flex;
    flex-direction: column;
    justify-content: left;
}

#left-img {
    background-image: url("/assets/images/netlife_home_left.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 200px;
}

#title-home {
    color: #fff;
    font-family: "monserrat-medium";
    font-size: 3em;
    text-align: left;
    line-height: 50px;
}

#title-home span {
    font-family: "monserrat-black";
}

#content-anuncio-millas {
    text-align: center;
    color: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    line-height: 10px;
    border-radius: 15px;
}

#content-anuncio-millas h1 {
    margin: 0;
}

#content-btn-home {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#content-btn-home a span {
    background-color: #fff;
    color: #e12019;
    border-radius: 100px;
    padding-right: 13px;
    padding-left: 13px;
}

#content-text-polla,
.bg-rules,
.bg-award {
    background-image: url("https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/35e9bf55-0548-4df4-470a-121f15a31000/public");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

#content-text-polla,
.bg-rules,
.bg-award {
    text-align: center;
    padding: 3%;
    color: #fff;
}


.bg-award {
    background-image: url("https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/f4fba030-e00d-487c-4aad-cd1c1e8e1800/public") !important;
}

.ticket {
    height: 80px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #000;
    border-bottom-width: 2px;
    border-bottom-style: dotted;
    border-bottom-color: black;
}

.ticket2 {
    height: 200px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #000;
    border-bottom-width: 2px;
    border-bottom-style: dotted;
    border-bottom-color: black;
}

.ticket3 {
    height: 80px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: #000;
}

.ticket3 > button,
.btn-leer-mas {
    width: 110px;
    border: none;
    -webkit-transform: skew(-16deg);
    -moz-transform: skew(-16deg);
    -o-transform: skew(-16deg);
    background: var(--red);
    text-align: center;
    padding-top: 5px;
    padding-bottom: 8px;
    color: #fff;
    font-weight: bold;
    margin: 10px;
    box-shadow: 0px 0px 0px #97979700;
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

.ticket3 > button:hover,
.btn-leer-mas:hover {
    background: #f8514b;
    box-shadow: 0px 10px 10px #979797af;
}

.thead {
    border-radius: 20px;
    background-color: var(--red);
}

.tbody {
    border-radius: 20px;
    width: 70%;
    box-shadow: 0px 10px 10px #2b2b2bb6;
    background-color: white;
}

.tbody-50 {
    border-radius: 20px;
    width: 50%;
    box-shadow: 0px 10px 10px #2b2b2bb6;
    background-color: var(--dark-gray);
}

.bg-d {
    background: var(--red);
    background: linear-gradient(
        110deg,
        var(--red) 0%,
        var(--red) 65%,
        #000000 65%,
        #000000 100%
    );
}

.shadow-welcome{
    filter: drop-shadow(-15px -35px 50px #666666);
}

#gana-title {
    font-family: "monserrat-black";
    font-size: 3em;
}

#text-gana {
    font-size: 2em;
}

#content-title-participa {
    display: grid;
    align-items: center;
    justify-content: left;
    padding-top: 1%;
}

.row {
    margin: 0;
}

a:hover {
    text-decoration: none;
}

/*------------------Responsive-------------------------*/

@media (max-width: 480px) {
    .footer-form {
        margin-right: 19%;
    }
    #title-home {
        color: #fff;
        font-size: 2em;
        line-height: 30px;
    }
    #content-title-participa {
        padding-top: 25%;
        padding-left: 5%;
        padding-right: 5%;
    }
}

#contEquiposA,
#contEquiposB,
#contEquiposC,
#contEquiposD,
#contEquiposE,
#contEquiposF,
#contEquiposG,
#contEquiposH {
    background-image: url("/assets/images/tabla_grupos.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 250px;
    color: #000;
    margin-bottom: 10px;
    margin-top: 10px;
}

#octavosEquiposA,
#octavosEquiposB,
#octavosEquiposC,
#octavosEquiposD,
#octavosEquiposE,
#octavosEquiposF,
#octavosEquiposG,
#octavosEquiposH {
    background-image: url("/assets/images/cartilla.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 250px;
    color: #000;
    margin-bottom: 10px;
    margin-top: 10px;
}

.encuentros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;

    gap: 12px;
}

.final {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;

    gap: 12px;
}

.test {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 70% 10% 20%;
    grid-row: 1/-1;
    justify-items: center;
}

.octavos {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
    height: 70%;
    justify-items: center;
    align-items: center;
}

.octavos-semi {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 80% 12%;
    height: 80%;
    justify-items: center;
    align-items: center;
}

.checks1 {
    transform: scale(5, 2.5);
    border: solid 1px transparent;
    justify-self: left;
    margin-top: -5;
    margin-left: -18;
}

.checks2 {
    transform: scale(5, 2.5);
    border: solid 1px transparent;
    justify-self: right;
    margin-top: -5;
    margin-left: 35;
}

.grayBtn {
    background: #757373 !important;
}

#guardarGrupos {
    width: 150px;
    height: 50px;
    -webkit-transform: skew(-16deg);
    -moz-transform: skew(-16deg);
    -o-transform: skew(-16deg);
    background: var(--red);
    border: none;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 8px;
    color: #ffffff;
    font-weight: bold;
    margin: 10px;
    box-sizing: 0px 0px 0px #97979700;
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

#guardarGrupos:hover {
    background: #f8514b;
    box-sizing: 0px 10px 10px #979797af;
}

.menu-list {
    display: block;
}

.bg-premios{
    content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/f5e21ab5-2bc2-447c-7be2-2c21a323b300/public');
}

.bg-partidos{
    content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/c68c60f9-70d3-41a3-34ab-6f9e5014a500/public');
}

.bg-grupos{
    content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/7a844371-eab5-4670-0705-52fc0813d000/public');
}

.bg-boletos{
    content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/cfca8f53-2c38-48b7-0106-761cd2040400/public');
}

.bg-puntos{
    content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/2e3a62e3-afdb-4aaa-4bba-65550e1d9500/public');
}

.bg-reglas{
    content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/45456479-b40c-46c7-d8cd-01c038a93500/public');
}

.bg-welcome{
    content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/c2c059d3-017e-43d0-320e-a86241ae2d00/public');
}

.bg-winners{
    content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/bd992927-a437-445d-6688-a22d9ccd9f00/public');
}

.bg-winners-oct{
    content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/ec4ee4c1-0299-4afa-9034-bfaa11c58100/public');
}

.bg-winners-cua{
    content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/1e326796-007b-4605-4a72-53c3e466b300/public');
}

.bg-winners-semi{
    content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/91ef0687-fdaf-4282-54a1-e29bfb7a1300/public');
}

.bg-winners-final{
        content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/6080c194-8c79-40f4-8b52-4da14e353000/public');
    }

.swal2-close {
    background-color: #e12019;
    color: #fff;
    border-radius: 100px;
    font-size: 25px;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border: 0.25em solid var(--red);
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--red);
}

@media (max-width: 812px) and (orientation: landscape) {
    #content-title-participa {
        padding-top: 15%;
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
}

@media screen and (max-width: 500px) {
    .checks1 {
        transform: scale(5, 2.5);
        border: solid 1px transparent;
        justify-self: left;
        margin-top: -5;
        margin-left: -18;
    }

    .checks2 {
        transform: scale(5, 2.5);
        border: solid 1px transparent;
        justify-self: right;
        margin-top: -5;
        margin-left: 35;
    }

    #content-text-polla {
        text-align: center;
        padding: 3%;
        color: #fff;
        height: 100vh;
        overflow-x: hidden;
    }

    #contEquiposA,
    #contEquiposB,
    #contEquiposC,
    #contEquiposD,
    #contEquiposE,
    #contEquiposF,
    #contEquiposG,
    #contEquiposH {
        background-image: url(/assets/images/tabla_grupos.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 420px;
        color: #000;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .final {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto;
        gap: 12px;
    }

    .menu-list {
        display: none;
    }

    .menu-display {
        display: block;
    }

    .team-side {
        display: grid;
        grid-template-columns: 40% 30% 20% 10%;
    }

    .margin-b {
        margin-bottom: 40px;
    }

    .nav {
        height: 60px;
        display: grid !important;
        grid-template-columns: 50% 5% 45%;
    }

    .all-columns{
        grid-column: 1/-1;
    }

    .arriba_ecuador {
        width: 100%;
    }

    .font_participa {
        font-size: 36px;
    }

    .font_gana {
        font-size: 42px;
    }

    .shadow-welcome{
        filter: drop-shadow(0px 0px 0px #66666600);
    }

    .premios{
        width: 50%;
    }

    .premios-alineados{
        margin-right: 50px;
    }

    .bg-premios{
        content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/d81f098b-d1df-4d39-e23e-744ea742c100/public');
    }

    .bg-partidos{
        content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/a28dbcba-c4b3-4e17-1d7f-162cce0ade00/public');
    }

    .bg-grupos{
        content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/02830b91-b66c-4cb4-2f30-a4030d638f00/public');
    }

    .bg-boletos{
        content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/93394a2b-c7fb-42f5-454c-86dd1df6dc00/public');
    }

    .bg-puntos{
        content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/607ce9a9-5316-46e9-a162-3b61d1d0a700/public');
    }

    .bg-reglas{
        content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/8d628135-bcac-42b2-6a49-136651839e00/public');
    }

    .bg-welcome{
        content: none;
    }
    
    .bg-winners{
        content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/baf542d0-1f5b-4faa-cd13-8e368ee8ed00/public');
    }
    
    .bg-winners-oct{
        content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/418daf09-a8db-48b9-2cc1-e92115a0eb00/public');
    }

    .bg-winners-cua{
        content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/32b2d374-9134-4402-8102-eeea5d0a1c00/public');
    }
    
    .bg-winners-semi{
        content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/e8041891-5bcb-413f-2d9d-5bcc746dcb00/public');
    }
    
    .bg-winners-final{
        content: url('https://imagedelivery.net/NUiIP66VpPz374h46kC-PA/57744ced-84e5-41ca-5300-0877c2c0a700/public');
    }

    .factory-w{
        width: 160px !important;
    }
}

@media screen and (max-width: 900px) {
    .encuentros {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto;

        gap: 12px;
    }

    .checks1 {
        transform: scale(5, 2.5);
        border: solid 1px transparent;
        justify-self: left;
        margin-top: -1;
        margin-left: 2;
    }

    .checks2 {
        transform: scale(5, 2.5);
        border: solid 1px transparent;
        justify-self: right;
        margin-top: -1;
        margin-left: 10;
    }
}