@font-face {
    font-family: 'Gotham Book';
    src: url('../fonts/Gotham-Book.woff2') format('woff2'),
        url('../fonts/Gotham-Book.woff') format('woff'),
        url('../fonts/Gotham-Book.ttf') format('truetype'),
        url('../fonts/Gotham-Book.svg#Gotham-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/GothamBold.woff2') format('woff2'),
        url('../fonts/GothamBold.woff') format('woff'),
        url('../fonts/GothamBold.ttf') format('truetype'),
        url('../fonts/GothamBold.svg#GothamBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



.verde_principal {
    color: #e12e2a !important;
}

.amarrillo_principal {
    color: #f7dd00 !important;
}

.bg-amarrillo {
    background-color: #f7dd00 !important;
}

.bg-verde {
    background-color: #e12e2a !important;
}

.min-h-screen {
    background-image: url("../../img/maggi/fondo.png");
    background-repeat: no-repeat;
    background-size: cover;
}


.logo img {
    width           : 100%;
    background-color: inherit;
}

.contenido {
    width : 90%;
    margin: 0 auto;
}

/* .client-game img {
    width: 100%;
} */


.ajugar {
    font-size         : 40px;
    background        : #EAD643;
    color             : #E12E2A;
    padding           : 0px 80px 0px 80px;
    font-weight       : 900;
    /* border-radius     : 999px; */
    border            : 2px solid #E12E2A;
    -webkit-box-shadow: 6px 7px 0px 0px #E12E2A;
    box-shadow        : 6px 7px 0px 0px #E12E2A;
}

.guagua {
    /* position: absolute; */
    width: 80%;
    margin-top: -445px !important;
    margin-left: 88px;
}

.buttonGame {
    margin-top: -170px;
    width: 100%;
    position: absolute;
}
.calle {
    margin-top: 15rem;
}

.nestle_abajo {
    width: 36%;
    float: right;
}

/* .buttonGame,
.text-IMGqr {
    background-image   : url("../../img/sobre_fondo_nido.png");
    background-repeat  : no-repeat;
    background-position: right;
    background-size    : contain;
} */

.tuamornido {
    position: absolute;
    left: 20px;
    bottom: -30px;
    text-align: start;
    color: #e12e2a;
}

.tuamornido>.p_one{
    font-size: 20px;
    font-weight: 700;
    text-shadow: -1px 0 #C8B908, 0 1px #C8B908, 1px 0 #C8B908, 0 -1px #C8B908;
    font-family: "Aria";
    
}


.tuamornido>p>span{
    font-size: 24px;
    font-weight: bold;
}

.tuamornido>.p_two{
    font-size: 12px;
    font-weight: bold;
    width: 67%;
}

.spannido {
    display: inline-flex;
}

.spannido span:last-child {
    font-size : 15px;
    margin-top: -7px;
}

.data-form label {
    font-size  : 24px;
    font-weight: bold;
    text-align : start;
    color      : #e12e2a;
}

.data-form p {
    font-size  : 20px;
    font-weight: bold;
    color      : #e12e2a;
}

.data-form input {
    font-size    : 20px;
    /* border-radius: 8px; */
    background   : #fff;
    border       : 1px solid #e12e2a;
    color        : #e12e2a;
    font-weight  : 800;
    padding      : 5px;
}


.data-form select {
    font-size    : 16px;
    font-weight  : 800;
    padding      : 5px;
    /* border-radius: 8px; */
    border       : 1px solid #E12E2A;
    box-shadow: 3px 3px 0px 0px #e12e2a;
    color        : #E12E2A;
}

.form-data-button button {
    background   : #EAD643;
    padding      : 5px 30px 5px 30px;
    font-size    : 20px;
    /* border-radius: 999px; */
    border: solid 2px #E12E2A;
    box-shadow: 5px 5px 0px 0px #e12e2a;
    color        : #E12E2A;
    font-weight  : bold;
}

.product_buy>div>p {
    font-size: 11px;
}

.product_buy>div>img {
    margin-bottom: 10px;
    height: 135px;
}

.one_procut {
    width: 100px;
}

.two_procut {
    width: 100px;
}

.theLast {
    width: 145px;
}

.product_buy>div>select {
    width     : 50px;
    margin-top: 15px;
    text-align: center;
    color     : #E12E2A;
}

.product_buy>div>div>select {
    width     : 50px;
    margin-top: 15px;
    text-align: center;
    color     : #E12E2A;
}

.product_buy>div.text-left>select {
    left    : 30%;
    top     : 9%;
    position: relative;
}

.product_buy>div.text-left>textarea {
    border: none;
    border-radius: 7px;
}

.buy_mt35 {
    /* width: 95px; */
}

.buy_mt35 p span{
    /* margin-top: 35px; */
    font-size: 12px;
    display: block;
    text-align: start;
    margin-bottom: 5px;
}

.product_buy {
    display: flex;
}


.client-camara {
    width           : 90%;
    margin          : auto;
    background-color: transparent;
}

.content-camara {
    background: transparent;
    min-width : 90%;
    margin    : auto;
    height    : auto;
    min-height: 428px;

}

.content-camara div {
    height    : auto;
    margin    : auto;
    background: #fff;
}

.content-camara video {
    border: 15px dashed #ccc;
}


.text-qr {
    width: 65%;
}

.text-qr span {
    font-size  : 22px;
    font-weight: bold;
    color      : #e12e2a;
}

.mt-45_5 {
    margin-top: 48.5rem;
}

/* .client-result {
    min-height: 658px;
} */

.ganaste, .text_premio {
    font-family: "Gotham" !important;
    color: #e12e2a;
}

.client-result .pegatina div:last-child {
    position: absolute;
    top: 25%;
    left: 19%;
    z-index: 999;
}


@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.client-result .pegatina div:last-child {
    -webkit-animation       : 2s rotate linear infinite;
    animation               : 2s rotate linear infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin        : 50% 50%;
}

.star_rotate {
    -webkit-animation       : 2s rotate linear infinite;
    animation               : 2s rotate linear infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin        : 50% 50%;
}

.sincronizando {
    font-size  : 24px;
    font-weight: bold;
    color      : #e12e2a;
}

.sincronizando span{
    font-family: 'Gotham';
}

.hamburger {
    position           : absolute;
    background-color   : transparent;
    right              : 44px;
    top                : 10px;
    height             : 30px;
    width              : 30px;
    padding            : 20px 20px;
    -webkit-transform  : translate3d(0, 0, 0);
    transform          : translate3d(0, 0, 0);
    -webkit-transition : -webkit-transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
    transition         : transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
    z-index            : 999999999;
    cursor             : pointer;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none
}

.hamburger.is-active {
    background-color: none;
}

._layer {
    background        : #E12E2A;
    margin-bottom     : 4px;
    border-radius     : 2px;
    width             : 28px;
    height            : 4px;
    opacity           : 1;
    -webkit-transform : translate3d(0, 0, 0);
    transform         : translate3d(0, 0, 0);
    -webkit-transition: all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
    transition        : all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
}

.hamburger:hover .-top {
    -webkit-transform: translateY(-100%);
    -ms-transform    : translateY(-100%);
    transform        : translateY(-100%);
}

.hamburger:hover .-bottom {
    -webkit-transform: translateY(100%);
    -ms-transform    : translateY(100%);
    transform        : translateY(100%);
}

.hamburger.is-active .-top {
    -webkit-transform: translateY(200%) rotate(45deg) !important;
    -ms-transform    : translateY(200%) rotate(45deg) !important;
    transform        : translateY(200%) rotate(45deg) !important;
}

.hamburger.is-active .-mid {
    opacity: 0;
}

.hamburger.is-active .-bottom {
    -webkit-transform: translateY(-200%) rotate(135deg) !important;
    -ms-transform    : translateY(-200%) rotate(135deg) !important;
    transform        : translateY(-200%) rotate(135deg) !important;
}

.menuppal.is_active {
    transform: translate3d(0px, 0px, 0px);
}

.menuppal {
    /* display         : flex;
    justify-content : center;
    align-items     : center; */
    padding-top: 70px;
    background-color: #f7dc00c9;
    bottom          : 0;
    min-height      : 100%;
    left            : 0;
    overflow-y      : scroll;
    position        : absolute;
    top             : 0;
    transform       : translate3d(0px, -100%, 0px);
    transition      : transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98) 0s;
    width           : 100%;
    z-index         : 99999999;
}

.menuppal ul {
    width  : 410px;
    margin : auto;
    padding: 0;
}

.menuppal ul li {
    list-style    : none;
    text-align    : center;
    font-family   : Verdadna, Arial, Helvetica;
    font-size     : 1.5rem;
    line-height   : 3em;
    height        : 3em;
    text-transform: none;
    font-weight   : bold;
    margin-bottom : 30px;
}

.menuppal ul li a {
    display        : block;
    width          : 100%;
    background     : #e12e2a;
    font-size      : 30px;
    font-weight    : 700;
    border         : 1px solid #e12e2a;
    border-radius  : 999px;
    text-decoration: none;
    color          : #f7dd00;
}

.menuppal ul li a:hover {
    text-decoration: none;
    color          : #333;
}

.menuOption form a {
    padding: 22px !important;
}

input.jsgrid-delete-button {
    display: none;
}

.jsgrid-table {
    width : 90%;
    margin: 0px auto !important;
}

.jsgrid-cell {
    font-size  : 24px;
    font-weight: 800;
    color      : #e12e2a;
}

.jsgrid-alt-row>.jsgrid-cell {
    background: transparent !important;
    border    : none !important;
}

.jsgrid-row>.jsgrid-cell {
    background: #C8B908 !important;
    border    : 1px solid #C8B908 !important;
}

.jsgrid-grid-body,
.jsgrid-grid-header {
    border: none !important;
}

#formAdmin {
    width: 100%;
}

#formAdmin div {
    margin-bottom: 20px;
}

#formAdmin input {
    width        : 100%;
    text-align   : center;
    padding      : 20px;
    font-size    : 24px;
    font-weight  : 900;
    background   : transparent;
    border       : 1px solid #e12e2a;
    border-radius: 999px;
    color        : #e12e2a;
}


.login {
    text-align: end;
}

.login button {
    background   : #e12e2a;
    color        : #f7dd00;
    font-size    : 24px;
    font-weight  : bold;
    padding      : 15px 60px 15px 60px;
    border       : 1px solid #e12e2a;
    border-radius: 999px;
}

#formAdmin .parsley-errors-list li {
    font-size: 15px;
    color    : red;
}

.loginAdmin {
    width : 410px;
    margin: auto;
}

.menuOption select {
    font-size       : 1.5rem;
    line-height     : 2em;
    text-transform  : none;
    font-weight     : bold;
    width           : 100%;
    border-radius   : 999px;
    text-align-last : center;
    background-color: #e12e2a;
    color           : #f7dd00;
}

.equipo>div {
    width        : 90%;
    margin       : auto;
    margin-bottom: 10px;
}

.equipo div p {
    font-size  : 30px;
    font-weight: bold;
    padding    : 10px 0px 10px 0px;
    color      : #e12e2a;
}


.visible {
    background-color: transparent !important;
    color           : #e12e2a !important;
}

/* ICONO PARA CAMBIAR EL DIA */

.input-icono {
    /* background-image: url("data:image/svg+xml,***<>***"); */
    background-repeat  : no-repeat;
    background-position: 4px center;
    background-size    : 50px;
    display            : flex;
    align-items        : center;
    /* width           : 55px; */
    padding-left       : 28px;
    height             : 70px;
    border             : none !important;
    border-radius      : 3px;
}

.input-icono svg {
    margin-right: -37px;
}

.input-icono input {
    background: transparent;
    color     : transparent;
    border    : none;
    width     : 30px;
}

.input-icono input:focus {
    outline: none;
    border : none;
    color  : transparent;
}

.dateDay {
    width: 80%;
}

.equipo>div:last-child {
    border-bottom: 2px solid #e12e2a;
    border-top   : 2px solid #e12e2a;
}

#ui-datepicker-div {
    left : 48% !important;
    width: 50% !important;
}


.refresh {
    position        : absolute;
    background-color: transparent;
    top             : 0px;
    height          : 30px;
    width           : 30px;
    padding         : 20px 20px;
    left            : 10px;
}

/* COLMADO */

.data-form-colmado label {
    font-size  : 24px;
    font-weight: bold;
    text-align : start;
    color      : #E12E2A;

}

.data-form-colmado input,
.data-form-colmado select,
.data-form-colmado p,
.data-form-colmado span {
    font-size    : 18px;
    font-weight  : 800;
    padding      : 10px;
    border       : none;
    /* border-radius: 7px; */
    border: solid 2px #E12E2A;
    box-shadow: 5px 5px 0px 0px #e12e2a;
    color        : #e12e2a;
}

#ruta {
    font-size: 15px !important;
    padding: 0 30px 0 10px !important;
    -webkit-padding-end: 31px !important;
    -webkit-padding-start: 10px !important;
}

.amorImg img {
    position: absolute;
    width: 45%;
    margin-left: 25px;
    margin-top: 35px;
}

.partiCambar button{
    font-size: 20px;
    font-weight: bold;
    background: #EAD643;;
    color: #e12e2a;
    padding: 2px 20px 2px 20px;
    border: 1px solid #fff;
    margin: 5px;
    border            : 2px solid #E12E2A;
    -webkit-box-shadow: 6px 7px 0px 0px #E12E2A;
    box-shadow        : 6px 7px 0px 0px #E12E2A;
}

.invisible1 {
    display: none;
}

.partiCambar{
    margin-top: 40px;
}

.modal {
    z-index: 999999;
}

.modal_colmado {
    z-index: 999999;
}

.form-radio {
    font-size: 25px !important;
}