﻿body {
    font-family: "pinup";
    background-color: #151210;
}

/*#btn-menu1 .active {
    content: url(/Content/assets/gamingmx/home/btn_mecanica_select.png);
}

#btn-menu2 .active {
    content: url(/Content/assets/gamingmx/home/btn_premios_select.png);
}

#btn-menu3 .active {
    content: url(/Content/assets/gamingmx/home/btn_mvp_select.png);
}*/



.welcome {
    background-repeat: no-repeat;
    /*position: relative;*/
    /*margin-top: 0%;*/
    background-size: 100% 100%;
    background-position: center;
    background-image: url(/Content/assets/gamingmx/home/fondos/FONDO_HOME_1.png);
    /*height: 100vh;*/
}

.welcome-images {
    padding-top: 6rem;
    /*margin: 0% auto;*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    /*width: 90%;*/
}

.container-fondo-sectino1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-fondo-sectino1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
}

.logo-booyah {
    max-width: 70%;
    min-width: 400px;
}

.title-registralatas {
    max-width: 23rem;
}

.title {
    z-index: 9;
    text-align: center;
    font-size: 2.5vw;
    /* padding-top: 45px; */
    text-transform: initial;
    /* margin-top: -47px; */
    color: white;
    /*max-width: 500px;*/
    /* max-width: 23rem; */
}

.logo-booyah-subenivel {
    width: 15rem;
}

.text-amarillo {
    color: #ffcb26;
}

.welcome-translate {
    background-size: 100% 100%;
    background-position: center;
    background-image: url(/Content/assets/gamingmx/home/fondos/FONDO_HOME_2.png);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    display: flex;
    height: 100vh;
}

#ganapremios {
    overflow: hidden;
}
/*carruseal*/
.btn_flechas-carouselp {
    top: 30px;
}

.carousel-control-p {
    top: 43% !important;
}

.carousel {
    z-index: 9;
    position: relative;
    /* width: 75%; */
    overflow: hidden;
    border-radius: 10px;
    margin: 0% auto;
}

#carousel2 {
    background-repeat: no-repeat;
    background-size: 45%;
    background-position: center;
    z-index: 9;
    position: relative;
    /* width: 65%; */
    overflow: hidden;
    border-radius: 10px;
    margin: -3% auto 0%;
    background-image: url(/Content/assets/gamingmx/home/COD_Fondo_premios.png);
}

.carousel-inner {
    display: flex;
    transition: transform 1s ease;
    /* align-items: center; */
    /* width: 20rem; */
}

.carousel-item1 {
    min-width: 100%;
    box-sizing: border-box;
}

    .carousel-item1 img {
        /* margin-left: 33%; */
        width: 38%;
        display: block;
    }

.carousel-item2 {
    min-width: 100%;
    box-sizing: border-box;
}

    .carousel-item2 img {
        width: 40%;
        display: block;
        margin: 0% auto;
    }

.carousel-control {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
}

    .carousel-control.left {
        left: -90px;
    }

    .carousel-control.right {
        right: -90px;
    }

.btn_flechas-carousel {
    width: 50px;
}

.carousel-item1 img {
    /* margin-left: 24%; */
    width: 36%;
    display: block;
    margin: 0 auto;
}
/*fin carrusel*/
img#img-papa-izq {
    position: absolute;
    left: -3px;
    top: 220px;
    width: 15%;
}

img#img-papa-der {
    position: absolute;
    right: 0px;
    bottom: 0;
    width: 15%;
}


/*termina estilos arreglados*/
.btn-select1 {
    width: 33.33%;
}

.btn-select2 {
    width: 33%;
}

.btn-select3 {
    width: 33%;
}

.seleccion-lugar {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
}

.seleccion-lugar {
    bottom: -30px;
    position: fixed;
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    z-index: 99;
    background-image: url(/Content/assets/gamingmx/home/marco-menu-abajo.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
}

.image-button {
    width: 25rem;
    position: relative;
    text-align: center;
    margin: 15px auto;
    z-index: 30;
}


img#img-lata {
    display: none;
    width: 35%;
}

img.img-btn-menu-abajo {
    margin: 0%;
    width: 100%;
    height: auto;
}

.container-text-carrusel-bottom p {
    margin-top: -49px;
    margin-bottom: 5%;
    position: relative;
    color: white;
    text-align: center;
}

.section2 {
    background-image: url(/Content/assets/gamingmx/home/fondos/FONDO_HOME_3.png);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
}

.section5 {
    background-size: 100%;
    background-position: top;
    background-image: url(/Content/assets/gamingmx/home/fondos/FONDO_HOME_4.png);
    margin-top: -10rem;
    background-color: black;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5rem 10px 0 10px;
}

.container-btn-registra-lata {
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.conatainer-registrar-latas {
    margin: -5% 0% 5%;
    width: 100%;
}

.conatainer-registrar-latas {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
}

.container-text-carrusel-bottom {
}

.input-registra-latas {
    margin-left: 6%;
    margin-right: 6%;
    border-radius: 40px;
    padding: 2rem;
    width: 52%;
    border: none;
    font-family: 'Helvetica';
    color: #757575;
    font-size: 1.2rem;
}

    .input-registra-latas::placeholder {
        text-align: left;
        font-size: 1rem;
    }


.input-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
}

.input-icon {
    max-width: 33px;
    border-radius: 40px;
    background: white;
    position: absolute;
    right: 100px;
}

img.icono-info-registra-latas {
    width: 13%;
    position: absolute;
    right: 15%;
    /* top: 85%; */
}

.container-btn-registra-lata {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

button {
    background-color: transparent;
    border: none;
    width: 70%;
}

.img-registra-lata {
    content: url(/Content/assets/gamingmx/home/COD_btn_registrar_mi_lata.png);
    max-width: 70%;
    min-width: 250px;
}

.container-fondo-text-section1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 65%;
    gap: 15px;
    z-index: 1;
    /* margin-top: -10rem; */
}

.section2-title p span {
    color: #ffcb00;
}

.ranking-list {
    background-color: #DFDACF;
    height: 215px;
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    overflow: auto;
    list-style-position: inside;
    scrollbar-color: red black;
}
/*section3  premios*/
.container-title-ranking {
    text-align: center;
    color: white;
    font-size: 24px;
    /* padding-top: 20%; */
    /* background: gray; */
    /* padding-bottom: 25%; */
    margin: 0;
    padding: 0;
}

.container-carrusel-premios {
    display: flex;
    justify-content: center;
    align-items: center;
}



.img-fondo-premios {
    background-image: url(/Content/assets/gamingmx/home/COD_Fondo_premios.png);
    background-size: 100%;
    width: 320px;
    height: 300px;
    background-repeat: no-repeat;
    position: absolute;
    top: 210px;
    left: 55px;
}

x.container-text-carrusel-bottom {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-family: 'pinup';
    color: white;
    margin-top: 12%;
}

.image-button img {
    width: 40%;
}

.image-button {
    width: 15rem;
    position: relative;
    text-align: center;
    margin: 15px auto;
    z-index: 30;
}

.footnotes .footnote {
    font-size: 23px;
    line-height: 20px;
}

.footnote {
    color: white;
    margin: 0;
    text-align: center;
    font-family: 'Helvetica';
    font-size: 1.3rem;
}
/*seccion ranking*/
div#ComoGanar {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    font-family: 'pinup';
    color: white;
}

p.title-ranking {
    font-family: 'pinup';
    text-align: center;
    color: white;
    font-size: 2rem;
    margin: 10px;
}

span.mvp {
    color: #FFCB26;
}

span.text-mivictoria {
    color: #FFCB26;
    font-size: 30px;
    font-family: 'pinup';
    display: flex;
    justify-content: center;
    align-items: center;
}

.ranking-list li {
    /* width: 50%; */
    /* margin-left: 10%; */
    display: flex;
    color: #E9273A;
    font-family: 'pinup';
    font-weight: 100;
    font-size: 22;
    /* margin-bottom: 25px; */
    word-wrap: break-word;
    /* flex-direction: column; */
    align-items: flex-start;
    padding: 0 0 10px 10px;
    text-align: left;
}

img.icono-ranking {
    width: 60px;
}

.table-container {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
    z-index: 10;
    position: relative;
    /* margin-top: 80px; */
}

/*RANKING CON BADGET*/

.section5-arriba-der, .section5-abajo-izq {
    position: absolute;
}

.section5-abajo-izq {
    left: 0;
}

.section5-arriba-der {
    right: 0;
    bottom: 0;
}

.logo_auros-subni {
    max-width: 15%;
    min-width: 200px;
}

.container_ranking-titles {
    display: flex;
    /* justify-content: space-around; */
    align-items: center;
}

.r_titles-title {
    text-transform: uppercase;
    padding: 10px;
}

.badget-nickname {
    width: 70%;
    display: inline-grid;
}

div.badget-ptos {
    display: inline-block;
    inline-size: center;
    width: 20%;
    text-align: right;
}

#mvp > div.table-container > div > div > span:nth-child(1) {
    width: 70%;
}

#mvp > div.table-container > div > div > span:nth-child(2) {
    width: 30%;
}

.user_badget-nickname {
}

@media (max-width: 480px) {
    .logo_auros-subni {
        max-width: 40%;
    }

    .welcome-images {
        flex-direction: column;
    }

    .input-container::after {
        right: 50px;
    }

    .logo-booyah-subenivel {
        width: 15rem;
    }

    .logo-booyah {
        width: 24rem;
        max-width: none;
        min-width: 10rem;
        margin-top: 0px;
    }

    #mecanica_1-img {
        content: url("../../assets/gamingmx/home/MO_MECANICA_1.png");
    }

    #mecanica_2-img {
        content: url("../../assets/gamingmx/home/MO_MECANICA_2.png");
    }

    #mecanica_3-img {
        content: url("../../assets/gamingmx/home/MO_MECANICA_3.png");
    }

    .footnote {
        max-width: 15rem;
    }

    #ganapremios span {
        max-width: 23rem;
    }
}

@media only screen and (max-width: 600px) {
    /*#btn-menu1 {
        content: url(/Content/assets/gamingmx/home/btn_mecanica.png);
    }

    #btn-menu2 {
        content: url(/Content/assets/gamingmx/home/btn_premios.png);
    }

    #btn-menu3 {
        content: url(/Content/assets/gamingmx/home/btn_mvp.png);
    }

    #btn-menu1 .active {
        content: url(/Content/assets/gamingmx/home/btn_mecanica_select.png);
    }

    #btn-menu2 .active {
        content: url(/Content/assets/gamingmx/home/btn_premios_select.png);
    }

    #btn-menu3 .active {
        content: url(/Content/assets/gamingmx/home/btn_mvp_select.png);
    }*/
    .input-icon {
        right: 40px;
    }

    .ranking-list {
        min-width: 350px;
        max-width: 400px;
        position: static;
        margin: -40px auto 0;
    }

    img#img-papa-der {
        position: absolute;
        right: 0px;
        bottom: 0;
        width: 35%;
    }

    .welcome-images {
        padding-top: 3rem;
        margin: 0% auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
        /*height: 100vh;*/
    }


    img.img-btn-menu-abajo {
        width: 100%;
        height: auto;
    }

    #btn-img-menu .active {
        content: url(/Content/assets/gamingmx/home/btn_mecanica_select.png);
    }

    img.img-btn-menu-abajo .active {
        content: url(/Content/assets/gamingmx/home/btn_mecanica_select.png);
    }

    .seleccion-lugar {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: center;
    }

    .title {
        text-align: center;
        font-size: 22px;
        /* padding: 45px; */
        text-transform: initial;
        /* margin-bottom: -20px; */
        margin-top: -5px;
        color: white;
    }

    .container-title-ranking {
        margin-top: -100px;
    }

    .conatainer-registrar-latas {
        margin: 0% 0% 5%;
    }

    .section5-abajo-izq {
        width: 34%;
        bottom: -55px;
    }

    .seleccion-lugar {
        bottom: -15px;
        position: fixed;
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        z-index: 99;
    }

    .img-btn-menu-abajo:hover {
    }
    /*/content/dam/latinamerica/promo-pringles/assets/gamingmexico/COD_Fondo_01.png*/
    .container-fondo-sectino1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .table-container {
        text-align: center;
        margin: 0;
        z-index: 10;
        position: static;
        margin-top: -150px;
    }

    .section5-arriba-der {
        width: 80px;
        top: -40px;
        right: 0;
    }

    .container-fondo-text-section1 {
        display: block;
        margin-top: -10%;
        background-image: unset;
        background-size: 100%;
        height: 275px;
        width: 100%;
        /*padding-bottom: 40%;*/
        position: relative;
        z-index: 9;
    }



    .conatainer-registrar-latas {
        display: flex;
    }

    input.input-registra-latas {
        border-radius: 25px;
        padding: 6%;
        width: 90%;
    }

    img.icono-info-registra-latas {
        width: 13%;
        position: absolute;
        right: 15%;
        /* top: 85%; */
    }

    .container-btn-registra-lata {
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    button {
        background-color: transparent;
        border: none;
        width: 70%;
    }

    .img-registra-lata {
        content: url(/Content/assets/gamingmx/home/COD_btn_registrar_mi_lata.png);
        width: 100%;
    }


    /*section2*/
    .welcome-translate {
        display: flex;
        justify-content: center;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }


    .section2 {
        padding-top: 30%;
        display: block;
        margin-top: 0;
    }

    .section5 {
        background-color: black;
        padding-top: 0px;
    }

    .img-lata-section2 {
        width: 50%;
    }

    .title-section2 {
        font-size: 32px !important;
    }
    /*carruseal*/
    .carousel {
        z-index: 9;
        position: relative;
        /* width: 80%; */
        overflow: hidden;
        border-radius: 10px;
    }

    .carousel-inner {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .carousel-inner {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .carousel-item1,
    .carousel-item2 {
        min-width: 100%;
        transition: opacity 0.5s ease;
    }

        .carousel-item1.active,
        .carousel-item2.active {
            opacity: 1;
        }

        .carousel-item1:not(.active),
        .carousel-item2:not(.active) {
            opacity: 0;
        }

    .carousel-inner {
        display: flex;
        transition: transform 1s ease;
    }

    .carousel-item1 {
        min-width: 100%;
        box-sizing: border-box;
    }

        .carousel-item1 img {
            width: 80%;
            display: block;
            margin: 0% 20% 0% 11%;
        }

    .carousel-item2 {
        min-width: 100%;
        box-sizing: border-box;
    }

        .carousel-item2 img {
            width: 80%;
            display: block;
            margin: 0% 20% 0% 11%;
        }

    .carousel-control {
        position: absolute;
        top: 75%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        outline: none;
    }

        .carousel-control.left {
            left: -90px;
        }

        .carousel-control.right {
            right: -90px;
        }

        .carousel-control img {
            width: 20px;
            /* height: 30px; */
        }
    /*fin carrusel*/


    .welcome {
        /*padding-bottom: 30%;*/
        margin-bottom: 0px;
        padding-top: 10%;
    }

    /*section3  premios*/
    div#posicion3 {
        padding-top: 20%;
        background: gray;
        padding-bottom: 25%;
    }

    .container-carrusel-premios {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    p.title {
        /*margin-bottom: 15%;*/
    }

    .img-fondo-premios {
        background-image: url(/Content/assets/gamingmx/home/COD_Fondo_premios.png);
        background-size: 100%;
        width: 320px;
        height: 300px;
        background-repeat: no-repeat;
        position: absolute;
        top: 210px;
        left: 55px;
    }

    .container-text-carrusel-bottom {
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        font-family: 'pinup';
        color: white;
        margin-top: 12%;
    }

    .image-button img {
        width: 75%;
    }



    .footnotes .footnote {
        font-size: 23px;
        line-height: 20px;
        font-weight: 100;
        margin-bottom: 40%;
    }
    /*seccion ranking*/
    div#ComoGanar {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32px;
        font-family: 'pinup';
        color: white;
        margin: 15% auto 0%;
    }

    p.title-ranking {
        margin: 1rem 2rem;
    }

    span.mvp {
        color: #FFCB26;
    }

    span.text-mivictoria {
        color: #FFCB26;
        font-size: 30px;
        font-family: 'pinup';
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1rem;
    }

    .ranking-list li {
        display: flex;
        color: #E9273A;
        font-family: 'pinup';
        font-weight: 50;
        /* font-size: 22px; */
        /* margin-bottom: 25px; */
        letter-spacing: 1px;
        flex-direction: column;
        align-items: flex-start;
        /* width: 100%; */
        /* max-width: 50%; */
        display: block;
    }

    img.icono-ranking {
        width: 20px;
    }

    span.text-mivictoria {
        font-size: 28px;
    }

    .title-ranking {
        line-height: 22px;
    }
}

@media (max-width: 780px) {
    .welcome-images {
        flex-direction: column;
    }

    .welcome {
        background-image: url(/Content/assets/gamingmx/home/fondos/FONDO_HOME_1-min.png);
    }

    .welcome-translate {
        background-image: url(/Content/assets/gamingmx/home/fondos/FONDO_HOME_2-min.png);
    }

    .section2 {
        background-image: url(/Content/assets/gamingmx/home/fondos/FONDO_HOME_3-min.png);
    }

    .section5 {
        background-image: url(/Content/assets/gamingmx/home/fondos/FONDO_HOME_4-min.png);
        padding-top: 4rem;
    }
}

@media(min-width: 801px) {
    .logo_auros-subni {
        position: relative;
        top: -30px;
    }
}

@media(min-width: 920px) {
    .input-icon {
        right: 140px;
    }

    .input-registra-latas::placeholder {
        font-size: 1.5rem;
    }

    .section2 {
        padding-bottom: 5rem;
    }
}

@media(min-width: 1300px) {
    .input-icon {
        right: 185px;
    }

    .section2 {
        padding-bottom: 10rem;
    }
}
