:root {
    --main-color: #E60881;
    --dark-main-color: #000000;
    --dark-secondary-color: #282828;
    --roboto-regular: 'Roboto Regular';
    --roboto-bold: 'Roboto Bold';
    --roboto-regular-condensed: 'Roboto Regular Condensed';
    --roboto-bold-condensed: 'Roboto Bold Condensed';
    --berlin-demibold: 'Berlin DemiBold';
}

@font-face {
    font-family: 'Roboto Regular';
    src: url('/css/fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: 'Roboto Bold';
    src: url('/css/fonts/Roboto-Bold.ttf');
}

@font-face {
    font-family: 'Berlin DemiBold';
    src: URL('/css/fonts/BRLNSDB.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto Bold Condensed';
    src: url('/css/fonts/RobotoCondensed-Bold.ttf');
}

@font-face {
    font-family: 'Roboto Regular Condensed';
    src: url('/css/fonts/RobotoCondensed-Regular.ttf');
}

.text-main-color {
    color: var(--main-color) !important;
}

.primary-button {
    all: unset;
    width: fit-content;
    border-radius: 3px;
    font-family: var(--roboto-bold);
    background-color: var(--main-color);
    text-align: center;
    cursor: pointer;
    color: #ffffff;
    padding: 5px 15px;
}

.locked,
.btn--locked{
    pointer-events: none;
}

.flex-column {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.tdAnual{
    background-color: white!important;
}

.thStyles{
    white-space: nowrap;
    padding: 10px;
}

.flex-column-center {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-column-between {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-column-around {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.flex-row {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex-row-center {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex-row-vertical-center {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-row-between {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-row-between-center {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-row-around {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.flex-center-center {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/*** Checkbox y Radiobutton ***/
/* Contenedor */
.radio-check {
    /*display: block; /*comentar para items en linea*/
    position: relative;
    padding-left: 22px;
    /*margin-bottom: 0 !important;*/
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* oculta la casilla que hay por defecto */
.radio-check input {
    height: 0;
    width: 0;
    opacity: 0;
    /*position: absolute;*/
}

/* crea una casilla nueva */
.checkmark, .radiomark {
    top: 1px;
    left: 0;
    height: 15px;
    width: 15px;
    position: absolute;
    background-color: #FFF;
    border: 2px solid #000;
}

/* redondea la casilla para el radio */
.radiomark {
    border-radius: 50%;
}

/* puntito interior del radiobutton */
.radio-check .radiomark:after {
    top: 2px;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e60881;
}

/* marca check solo para chechbox */
.radio-check .checkmark:after {
    left: 2px;
    top: -1px;
    width: 7px;
    height: 11px;
    border: solid #e60881;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* color de fondo hover (no funciona en mobile no hay hover)*/
.radio-check:hover input ~ .checkmark, .radio-check:hover input ~ .radiomark {
    /*background-color: #f8c3da;*/
    border: 2px solid #000;
}

/* color de fondo cuando esta seleccionado */
.radio-check input:checked ~ .checkmark, .radio-check input:checked ~ .radiomark {
    /*background-color: #ccc;*/
    border: 2px solid #000;
}

/* muestra la marca cuando esta activo */
.radio-check input:checked ~ .checkmark:after, .radio-check input:checked ~ .radiomark:after {
    display: block;
}

/* activa o desactiva la marca */
.checkmark:after, .radiomark:after {
    content: "";
    position: absolute;
    display: none;
}

/*******************************/
/******* tablas ***************/
.tables {
    width: 100%;
}

.tables td {
    text-align: center;
}

._hj-cp7UI__HotjarBranding__hotjarBranding{
    display:none;
}

/*@media all and (max-width: 639px) {*/
    /* Fuerza a la tabla para que ya no sean como las tablas */ 
/*    .tables, .tables thead, .tables tbody, .tables th, .tables td, .tables tr {*/
/*        display: block;*/
/*    }*/

    /* Ocultar encabezados de tabla (pero no display:none;, para accesibilidad) */
/*    .tables thead tr {*/
/*        position: absolute;*/
/*        top: -9999px;*/
/*        left: -9999px;*/
/*    }*/

/*    .tables tr {*/
/*        margin: 0 0 10px 0;*/
/*        background-color: #FFF;*/
/*    }*/

/*    .tables tr:nth-child(odd) {*/
        /*background-color: #ccc;*/
/*    }*/

/*    .tables td {*/
        /* Compórtate como una "fila" */
/*        border: none;*/
        /*border-bottom: 1px solid #eee;*/
/*        position: relative;*/
/*        padding-left: 42%;*/
/*        text-align: left;*/
/*    }*/

/*    .tables td:before {*/
        /* encabezado de tabla (th)*/
/*        position: absolute;*/
/*        top: 0;*/
/*        left: 0;*/
/*        width: 37%;*/
/*        height: 100%;*/
/*        padding: 0 10px;*/
        /*white-space: nowrap;*/
/*        font-weight: bold;*/
/*    }*/
/*}*/

#reglas, #maxDepositRequests, #retiradasPendientes, #terminos, #misDocumentos, #historial, #finanzas, #resumenAnual, #resumenSession, #cookies, #tickets, #torneos, .tablecookies {
    background-color: #FFF;
    color: #000;
    border-collapse: collapse;
    margin: 0 0 15px 0;
}

#reglas thead, #cookies thead, .tablecookies thead {
    /*background-color: #f8c3da;*/
    background-color: #e60881;
}

#reglas th, #reglas td, #cookies th, #cookies td, #torneos th, #torneos td, .tablecookies th, .tablecookies td {
    border: 1px solid #000;
    padding-top: 3px;
    padding-bottom: 3px;
}

#reglas th, #cookies th, .tablecookies th {
    /*color: #333;*/
    color: #FFF;
}

#reglas td, #cookies td, .tablecookies td {
    color: #636363;
}

#maxDepositRequests thead, #retiradasPendientes thead, #terminos thead, #misDocumentos thead, #historial thead, #finanzas thead, #resumenAnual thead, #resumenSession thead, #tickets thead, #torneos thead {
    background-color: #f8c3da;
    color: #333;
}

#maxDepositRequests td, #retiradasPendientes td, #terminos td, #misDocumentos td, #historial td, #finanzas td, #resumenAnual td, #resumenSession td, #tickets td, #torneos td {
    background-color: #ccc;
}

#maxDepositRequests th, #maxDepositRequests td, #retiradasPendientes th, #retiradasPendientes td, #terminos th, #terminos td, #misDocumentos th, #misDocumentos td, #historial th, #historial td, #finanzas th, #finanzas td, #resumenAnual th, #resumenAnual td, #resumenSession th, #resumenSession td, #tickets th, #tickets td {
    border: 1px solid #FFF;
    padding-top: 3px;
    padding-bottom: 3px;
}

#table-promos {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

#table-promos .tp_row {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}

#table-promos .tp_row>div {
    border: 1px solid #FFFF;
    font-size: 0.65rem;
}

#table-promos .tp_row .tp_title {
    min-width: 144px;
    padding-left: 5px;
    font-size: 0.8rem;
}

#table-promos .tp_row .n_selecciones, #table-promos .tp_row .n_ganancias {
    width: -webkit-fill-available;
}

#table-promos .tp_row .tp_cell {
    display: flex;
    justify-content: center;
    font-size: 14px;
}

#table-promos .tp_row .n_ganancias {
    color: #E40090;
    font-weight: bold;
}

section.seo-sect.vip-seo {
    background: #000;
}
.seo_pink_inside.vip-seo .txt-seo {
    background-color: #000;
}

@media (max-width: 1024px) {
    #table-promos {
        min-width: 300px;
        flex-direction: row;
        width: 40%;
        margin: 0 auto;
    }

    #table-promos .tp_row {
        flex-direction: column;
    }

    #table-promos .tp_row .tp_title {
        text-align: center;
        min-width: 90px;
        font-size: 0.9rem;
        font-weight: bold;
    }

    #table-promos .tp_row>div {
        font-size: 0.9rem;
    }

    #table-promos .tp_row:first-child {
        width: 30%;
    }

    #table-promos .tp_row:nth-child(2) {
        width: 60%;
    }
}

@media all and (max-width: 639px) {
    /* para el espacio entre bloques */ #reglas, #cookies, #torneos, .tablecookies {
        background-color: transparent;
    }

    #reglas td, #cookies td, .tablecookies td {
        border: 0;
        border-bottom: 1px solid #000;
        <!--display: flex; --> padding-top: 5%;
        align-items: center;
        text-overflow: ellipsis;
        overflow: hidden
    }

    #reglas td:before, #cookies td:before, .tablecookies td:before {
        background-color: #e60881;
        color: #FFF;
        /*background-color: #f8c3da;*/
        /*color: #333;*/
        padding: 3px 10px;
        display: flex;
        align-items: center;
    }

    #maxDepositRequests tr, #retiradasPendientes tr, #terminos tr, #misDocumentos tr, #historial tr, #finanzas tr, #resumenAnual tr, #resumenSession tr, #tickets tr {
        background-color: #ccc;
    }

    #maxDepositRequests td, #retiradasPendientes td, #terminos td, #misDocumentos td, #historial td, #finanzas td, #resumenAnual td, #resumenSession td, #tickets td, #torneos td {
        border: 0;
        border-bottom: 1px solid #FFF;
        ; }

    #maxDepositRequests td:before, #retiradasPendientes td:before, #terminos td:before, #misDocumentos td:before, #historial td:before, #finanzas td:before, #resumenAnual td:before, #resumenSession td:before, #tickets td:before, #torneos td:before {
        background-color: #f8c3da;
        color: #333;
        padding: 3px 10px;
        white-space: nowrap;
    }

    #reglas td:nth-of-type(1):before {
        content: "Nombre:";
    }

    #reglas td:nth-of-type(2):before {
        content: "Tipo:";
    }

    #reglas td:nth-of-type(3):before {
        content: "Mayo:";
    }

    #reglas td:nth-of-type(4):before {
        content: "Junio:";
    }

    #reglas td:nth-of-type(5):before {
        content: "Julio:";
    }

    #reglas td:nth-of-type(6):before {
        content: "Agosto:";
    }

    #reglas td:nth-of-type(7):before {
        content: "Septiembre:";
    }

    #reglas td:nth-of-type(8):before {
        content: "Octubre:";
    }

    #maxDepositRequests td:nth-of-type(1):before {
        content: "Fecha";
    }

    #maxDepositRequests td:nth-of-type(2):before {
        content: "Hora";
    }

    #maxDepositRequests td:nth-of-type(3):before {
        content: "Límite";
    }

    #maxDepositRequests td:nth-of-type(4):before {
        content: "Tipo";
    }

    #maxDepositRequests td:nth-of-type(5):before {
        content: "Estado";
    }

    #retiradasPendientes td:nth-of-type(1):before {
        content: "Número Ref.:";
    }

    #retiradasPendientes td:nth-of-type(2):before {
        content: "Fecha:";
    }

    #retiradasPendientes td:nth-of-type(3):before {
        content: "Hora:";
    }

    #retiradasPendientes td:nth-of-type(4):before {
        content: "Método:";
    }

    #retiradasPendientes td:nth-of-type(5):before {
        content: "Cantidad:";
    }

    #terminos td:nth-of-type(1):before {
        content: "Fecha:";
    }

    #terminos td:nth-of-type(2):before {
        content: "Hora:";
    }

    #terminos td:nth-of-type(3):before {
        content: "Descripcion:";
    }

    #terminos td:nth-of-type(4):before {
        content: "Documento:";
    }

    #misDocumentos td:nth-of-type(1):before {
        content: "Fecha:";
    }

    #misDocumentos td:nth-of-type(2):before {
        content: "Hora:";
    }

    #misDocumentos td:nth-of-type(3):before {
        content: "Tipo:";
    }

    #misDocumentos td:nth-of-type(4):before {
        content: "Estado:";
    }

    #misDocumentos td:nth-of-type(5):before {
        content: "Nombre:";
    }

    #misDocumentos td:nth-of-type(6):before {
        content: "Opciones:";
    }

    #historial td:nth-of-type(1):before {
        content: "Fecha:";
    }

    #historial td:nth-of-type(2):before {
        content: "Hora:";
    }

    #historial td:nth-of-type(3):before {
        content: "Tipo:";
    }

    #historial td:nth-of-type(4):before {
        content: "Identificador:";
    }

    #historial td:nth-of-type(5):before {
        content: "Operacion:";
    }

    #historial td:nth-of-type(6):before {
        content: "Cuenta:";
    }

    #historial td:nth-of-type(7):before {
        content: "Cantidad:";
    }

    #historial td:nth-of-type(8):before {
        content: "Balance:";
    }

    #finanzas td:nth-of-type(1):before {
        content: "Id:";
    }

    #finanzas td:nth-of-type(2):before {
        content: "Fecha:";
    }

    #finanzas td:nth-of-type(3):before {
        content: "Hora:";
    }

    #finanzas td:nth-of-type(4):before {
        content: "Tipo:";
    }

    #finanzas td:nth-of-type(5):before {
        content: "Estado:";
    }

    #finanzas td:nth-of-type(6):before {
        content: "Metodo:";
    }

    #finanzas td:nth-of-type(7):before {
        content: "Cantidad:";
    }

    #finanzas td:nth-of-type(8):before {
        content: "Codigo barras:";
    }

    #resumenAnual td:nth-of-type(1):before {
        content: "Año:";
    }

    #resumenAnual td:nth-of-type(2):before {
        content: "Bal. Inicial:";
    }

    #resumenAnual td:nth-of-type(3):before {
        content: "Bal. Final:";
    }

    #resumenAnual td:nth-of-type(4):before {
        content: "Depósitos:";
    }

    #resumenAnual td:nth-of-type(5):before {
        content: "Retiradas:";
    }

    #resumenAnual td:nth-of-type(6):before {
        content: "Apuestas:";
    }

    #resumenAnual td:nth-of-type(7):before {
        content: "Ganancias:";
    }

    #resumenAnual td:nth-of-type(8):before {
        content: "Bonos:";
    }

    #resumenSession td:nth-of-type(1):before {
        content: "Jogo:";
    }

    #resumenSession td:nth-of-type(2):before {
        content: "Apostado:";
    }

    #resumenSession td:nth-of-type(3):before {
        content: "Ganho:";
    }
    
    #resumenSession thead{
        display: none;
    }
    
    #resumenSession tbody tr,
    #resumenSession tbody tr td{
        display: block;
        text-align: left;
    }

    #cookies td:nth-of-type(1):before {
        content: "Tipo de cookie:";
    }

    #cookies td:nth-of-type(2):before {
        content: "Descripción:";
    }

    #cookies td:nth-of-type(3):before {
        content: "Ejemplos de uso:";
    }

    #cookies td:nth-of-type(4):before {
        content: "Servicios de terceros:";
    }

    #cookies td:nth-of-type(1) {
        height: 60px;
    }

    #cookies td:nth-of-type(3) {
        min-height: 60px;
    }

    #cookies td:nth-of-type(4) {
        height: 60px;
    }

    .tablecookies td:nth-of-type(1):before {
        content: "Nome:";
    }

    .tablecookies td:nth-of-type(2):before {
        content: "Domínio:";
    }

    .tablecookies td:nth-of-type(3):before {
        content: "Expiração:";
    }

    .tablecookies td:nth-of-type(4):before {
        content: "Descrição:";
    }

    .tablecookies td:nth-of-type(1) {
        height: 60px;
        padding-top: 3%;
    }

    .tablecookies td:nth-of-type(3) {
        min-height: 60px;
    }

    .tablecookies td:nth-of-type(4) {
        height: auto;
    }

    /*#finalidad td:nth-of-type(4):before {*/
    /*    content: "Finalidad:";*/
    /*}*/

    /*#tickets td:nth-of-type(1):before {*/
    /*    content: "Ticket:";*/
    /*}*/

    /*#tickets td:nth-of-type(2):before {*/
    /*    content: "Fecha:";*/
    /*}*/

    /*#tickets td:nth-of-type(3):before {*/
    /*    content: "Hora:";*/
    /*}*/

    /*#tickets td:nth-of-type(4):before {*/
    /*    content: "Asunto:";*/
    /*}*/

    /*#tickets td:nth-of-type(5):before {*/
    /*    content: "Estado:";*/
    /*}*/

    #torneos td:nth-of-type(1):before {
        content: "Ranking:";
    }

    #torneos td:nth-of-type(2):before {
        content: "Usuario:";
    }

    #torneos td:nth-of-type(3):before {
        content: "Premio:";
    }

    #misDocumentos td[title="Nombre"] p {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-bottom: 0;
    }

    .descripcionUltimoTd {
        display: block;
    }
}

@media (min-width: 640px) {
    .descripcionUltimoTd {
        display: none;
    }
}

/***** paginacion **********/
#pagination ul li {
    padding-left: 0;
    display: inline;
}

.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 3px 3px;
}

.pagination a.active {
    background-color: #e60881;
    color: white;
    border: 1px solid #e60881;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
}

.cuestionario {
    background-color: #FFF;
}

/*******************************/
.bg-white, .bg-white-tot {
    background-color: #FFF;
    margin: 0 auto;
    padding: 25px;
    margin-bottom: 20px;
}

.bg-white {
    width: 96%;
}

.bg-pink {
    background-color: #e60881;
}

.imge {
    max-width: 100%;
    height: auto;
    display: block;
    /*para quitar el borde fantasma de abajo*/
}

.imge-header {
    width: 100%;
    display: block;
}

/* vale para <a href> y <button> */
.btn-pink {
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    background-color: #e60881;
    padding: 6px 40px;
    text-decoration: none;
    border: 0;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 2px;
}

.forms {
    width: 100%;
}

.txt-seo {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 20px;
}
.seo_pink_inside{
    background-color: #E60881;
    width: 100%;
    padding: 21px 6.5% 70px 6.5%;
    min-height: 0;
}
.seo_pink_inside .txt-seo{
    background-color: #C10069;
    padding: 20px 11%;
    width: 97%;
    
    border-radius: 3px;
}
.seo_pink_inside.vip-seo .txt-seo {
    background-color: #000;
}
.txt-seo-home{
    padding-top: 0.67em;
}
.txt-seo hr {
    margin: 50px 0 25px 0;
    color: #e1e1e1;
}

.txt-general p, .txt-general ul li {
    font-size: 16px;
    color: #FFFF;
}


.txt-seo .btn-unwrap {
    width: 170px;
    border: 1px solid #FFFF;
    text-align: center;
    border-radius: 3px;
    margin: 0 auto;
    margin-top: 25px;
    height: 28px;
    cursor: pointer;
}

.txt-seo .btn-unwrap a, .txt-seo .btn-unwrap a:hover{
    font-family: 'Roboto Condensed';
    font-weight: normal;
    color: #FFF;
}

.txt-general h1 {
    /*text-align: center;*/
    
}

.txt-general h2 {
    color: #e60881;
    background-color: transparent;
    text-align: left;
}

.txt-general h3{
    color: #FFF;
    background-color: transparent;
    text-align: left;
    font-size: 20px;
    position: relative;
    width: 95%;
    cursor: pointer;
}

.txt-general h3:after{
    background: url(/img/layout/flecha_der.svg) no-repeat center;
    background-size: contain;
    display: block;
    width: 10px;
    height: 20px;
    content:"";
    position: absolute;
    right: -25px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%) rotate(90deg);
    transition: transform 200ms;
    cursor: pointer;
}
.txt-general h3.active:after{
    transform: translateY(-50%) rotate(270deg);
    transition: transform 200ms;
}
.txt-general h3 ~ p, .txt-general h3 ~ ul{
    display: none;
}
.txt-general h3:first-of-type + p{
    display:block;
}
.txt-general.txt-seo-home h2, .txt-general.txt-seo-home h3{
    color: #FFFF;
}

.info-small {
    font-size: 12px;
    padding: 5px 30px;
    line-height: normal;
    margin-bottom: 20px;
}


.seo_pink_inside .txt-general h3:after {
    background: url(/img/layout/flecha_der.svg) no-repeat center;
    background-size: contain;
    display: block;
    width: 10px;
    height: 20px;
    content: "";
    position: absolute;
    right: -25px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%) rotate(90deg);
    transition: transform 200ms;
    cursor: pointer;
}

.seo_pink_inside .txt-general h3.active:after {
    transform: translateY(-50%) rotate(270deg);
    transition: transform 200ms;
}

.seo_pink_inside .txt-general h3 ~ p, .txt-general h3 ~ ul, .txt-general h3 ~ ol {
    display: none;
}
/************ promociones ********/
.h1-promos {
    width: 90%;
    min-width: 320px;
    margin: 0 auto;
}

.header-pink {
    font-size: 1.5rem;
    color: #FFF;
    background-color: #e60881;
    margin: 0;
    padding-left: 3%;
    line-height: 2.5rem;
}

#bg-white-promos {
    width: 100%;
    background-color: #FFF;
    padding: 15px;
}

.bg-gray {
    background-color: #e1e1e1;
}

.tt-bold-promos {
    width: 100%;
    font-weight: 900;
    padding: 0 10px;
}

.txt-promos {
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.retiradas-automaticas {
    margin: 30px 0 30px 0;
}

/****** popup promo devolucion ****/
.txt-marco {
    width: 100%;
    min-height: 100px;
    border: 1px solid #838383;
    padding: 20px;
    margin: 10px 0;
    text-align: center;
    font-weight: 700;
}

.txt-cantidad {
    font-size: 24px;
    font-weight: 900;
    color: #e60881;
    margin: 40px 0;
    text-align: center;
}

.select-bono {
    width: 100%;
    text-align: left;
    margin-bottom: 30px;
    font-size: 16px;
}

.select-bono select {
    width: 100%;
}

.canjOK {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}

.canjOK p {
    font-size: 16px;
    padding-left: 10px;
    margin: 0;
}

#ajaxResponseSuccess img {
    width: 25px;
    height: 25px;
}

/*********************************/
/****** error pages *************/
.imge2 {
    max-width: 100%;
    height: auto;
}

.container-error404 {
    width: 90%;
    height: 100vh;
    margin: 0 auto;
}

.container-error404 h1 {
    padding-top: 30px;
    color: #e40090;
    font-size: 2rem;
    font-weight: 900;
}

.container-error404 h2 {
    color: #e1e1e1;
    font-size: 16px;
    font-weight: normal;
    padding-bottom: 30px;
    background-color: #000;
}

/*******************************/
/********** welcome ***********/
.welcome-container {
    width: 90%;
    border: 1px solid #FFF;
    padding: 4px;
    margin: 0 auto;
    margin-top: 5%;
    background-color: #000;
}

.welcome-container h1 {
    padding-left: 5%;
    margin-bottom: 4px;
}

.welcome {
    position: relative;
    top: 0;
    left: 0;
}

.butts-welcome {
    position: absolute;
    bottom: 2%;
}

.btn-welcome {
    /*width: 48%;*/
    width: 94%;
    background-color: #e60881;
    height: 30px;
}

.btn-welcome a {
    width: 100%;
    text-align: center;
    color: #FFF;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
}

/******************************/
/********** registrate *******/
#reg1 {
    width: 100%;
}

/*.radio-reg {
    justify-content: flex-end;
}*/
.lb-reg {
    width: auto;
}

.oculto {
    display: none;
}

.multiuser {
    padding: 0 9% 20px 9%;
    text-align: center;
}

/*** mis datos ***/
#espacio-bottom {
    padding-bottom: 20px;
}

/*****************************/
/****** forgotPass ***********/
.recPass {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
}

.recPass h1.titlePink {
    margin: 0;
}

#recPass1, #recPass2 {
    color: #000;
    margin-bottom: 15px;
}

#recPass1 label, #recPass2 label, #recPass1 input, #recPass2 input {
    width: 100%;
}

#ojoNewpass, #ojoRepass {
    top: -14px;
}

@media all and (min-width: 640px) {
    .recPass {
        width: calc(80%);
    }
}

@media all and (min-width: 768px) {
    .recPass {
        width: calc(60%);
    }
}

/****************************/
/**** machacados de otros css ******/
#contentdedicatedpage a, .juegosPromoTxt a, .txt-seo a, .rtp-link {
    color: #e60881;
    font-weight: 700;
    text-decoration: none;
}

.txt-seo.txt-seo-home a{
    color: #FFFF;
}

#contentdedicatedpage a:hover, .juegosPromoTxt a:hover, .txt-seo a:hover, .rtp-link:hover {
    color: #f08cb9;
    font-weight: 900;
    cursor: pointer;
}

#notloggedin h3 {
    width: 65%;
    margin-top: 35px;
}

#popupWindow {
    margin-bottom: 50px;
}

.header-members {
    width: 200px;
    min-width: 200px;
}

.btn-header {
    min-width: 190px;
    text-align: center;
    padding: 5px 0;
    border-radius: 2px;
}

.btn-table-reglas {
    margin-bottom: 20px;
}

.btn-TCpromos {
    /*width: 272px;*/
    width: 290px;
}

.btn-TCpromos2 {
    width: 290px;
    margin: 30px 0 20px 0;
}

.containerText .promo-form {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
}

.juegosPromo {
    max-width: 800px;
    padding: 90px 0 0 30px;
}

.juegosPromoTt {
    font-size: 42px;
    font-weight: 900;
    color: #e60881;
    margin-bottom: 20px;
    line-height: normal;
}

.juegosPromoTt2 {
    font-size: 24px;
    margin-bottom: 15px;
}

.juegosPromoTxt {
    font-size: 20px;
}

.juegosPromoImg {
    margin-top: 20px;
    text-align: center;
}

#recomendadosDesktop .gamescontainer {
    height: 252px;
}

.textoLobby p {
    margin-bottom: 0;
}

.textoLobby h4 {
    color: #e60881;
    margin-bottom: 10px;
}

@media all and (max-width: 700px) and (orientation: landscape) {
    .btn-TCpromos {
        width: 230px;
    }
}

@media all and (min-width: 838px) {
    .ojo::before, .ojoMembers::before {
        right: 10px;
    }
}

@media all and (min-width: 768px) {
    #membersarea .flex--between > div {
        width: 48%;
    }
}

/***********************************/
/********* afiliados ***************/
.marginTop-h3-Afiliados, .marginTop-h3-Afiliados2 {
    margin-top: 10px;
}

.img-ico-Afiliados {
    min-width: 70px;
    max-width: 120px;
    height: auto;
    padding-right: 10px;
}

@media all and (min-width: 768px) {
    .marginTop-h3-Afiliados {
        margin-top: 15px;
    }

    .img-ico-Afiliados {
        padding-right: 20px;
    }
}

@media all and (min-width: 1240px) {
    .marginTop-h3-Afiliados2 {
        margin-top: 30px;
    }
}

/********************************/
/********** login popup **********/
.bg-login {
    color: #000;
    background-color: #FFF;
    padding: 50px;
}

.bg-login a {
    color: #000;
}

.bg-login a:hover {
    color: #e60881;
    font-weight: 700;
}

.btn-login {
    width: 48%;
    height: 50px;
    border: 3px solid #000;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background-color: #FFF;
    background-repeat: no-repeat;
    background-position: 10% 50%;
    margin: 10px 0;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

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

#signin {
    background-image: url(/img/layout/icons/icon-pencil.jpg);
    background-size: 35px;
    padding-left: 30px;
}

#signin:hover {
    background-image: url(/img/layout/icons/icon-pencil.jpg);
}

@media all and (min-width: 380px) and (max-width: 767px), (min-width: 1150px) and (max-width: 1400px) {
    .btn-login {
        /*width: 45%;*/
    }

    #forgotpassword {
        padding-left: 40px;
    }
}

@media all and (min-width: 768px) {
    .bg-login {
        width: auto;
        margin: 5px;
    }

    #login-buttons {
        padding: 0 15.5%;
    }
}

@media all and (min-width: 1240px) {
    .formLogin {
        width: 80%;
        margin: 0 auto;
    }
}

/*********************************/
/********** login jugar **********/
.notlog {
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    background-image: url(/img/login/GP_IMG_PaginaLogin_MobileV1.jpg);
}

.notlog input[type="text"], .notlog input[type="password"] {
    background-color: #FFF;
}

.notlog span {
    cursor: pointer;
    margin-right: 20px;
    float: right;
}

.notlog span img {
    width: 20px;
    position: relative;
    top: 2px;
}

@media all and (min-width: 540px) {
    .notlog-enter {
        justify-content: flex-end;
        padding-right: 8px;
    }
}

@media all and (min-width: 500px) and (orientation: landscape) {
    .notlog {
        background-image: url(/img/login/GP_IMG_PaginaLogin_MobileH1.jpg);
    }
}

@media all and (min-width: 768px) {
    .notlog {
        background-image: url(/img/login/GP_IMG_PaginaLogin_TabletV1.jpg);
    }
}

@media all and (min-width: 1024px) {
    .notlog {
        background-image: url(/img/login/GP_IMG_PaginaLogin_TabletH1.jpg);
    }
    .seo_pink_inside .txt-seo{
        /*padding: 20px 85px;*/
        padding:20px 11%;
    }
}

@media all and (min-width: 1400px) {
    .notlog {
        background-image: url(/img/login/GP_IMG_PaginaLogin_Desktop1.jpg);
    }
}

/****************************/
/******** popup Demo y verificar cuenta *********/
.titleDemo {
    background-color: #e60881;
    color: #FFF;
    font-size: 1.4rem;
    line-height: 2.2rem;
    margin: 0 0 15px 0;
    padding-left: 3%;
}

.pink-bold {
    font-weight: 900;
    color: #e60881;
    text-align: center;
}

.txt-center {
    text-align: center;
    margin: 10px 0;
    color: #000;
}

.txt-center p {
    margin: 0;
}

.img-alert {
    width: 50px;
    height: auto;
}

#demo-buttons {
    height: 90px;
    width: 200px;
    margin: 20px 0;
}

#demo-buttons a {
    text-align: center;
}

.btn-popup {
    margin: 20px 0 10px 0;
}

@media all and (min-width: 530px) {
    #demo-buttons {
        height: auto;
        flex-direction: row;
        justify-content: center;
    }

    .txt-center {
        margin: 0;
    }
}

/***************************/
/******* cuestionario ******/
#questionnaireContainer h3 {
    margin-bottom: 15px;
}

.cuest-margin {
    padding: 15px 0;
}

.cuest-radiobuts {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media all and (min-width: 768px) {
    #questionnaireContainer > div {
        flex-direction: row;
    }

    .cuest-margin {
        width: 80%;
        padding: 15px 15px 15px 0;
    }

    .cuest-radiobuts {
        width: 20%;
    }
}

@media all and (min-width: 1440px) {
    .cuest-margin {
        width: 70%;
        padding: 15px 20px 15px 0;
    }

    .cuest-radiobuts {
        width: 30%;
    }
}

/***************************/
/******* animaciones *********/
.contenedor-slider2 {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.slider3 {
    display: flex;
    width: 400%;
    /* cambiar porcentaje segun numero de img (ej. 5 img - 500%) */
}

.slider__section, .retiradas-automaticas {
    width: 100%;
}

.index-0 {
    width: 100%;
    position: absolute;
    z-index: 0;
    display: none;
}

.slider-home {
    width: 100%;
    margin: auto;
    overflow: hidden;
}

.slider-home ul {
    display: flex;
    padding: 0;
    width: 100%;
}

.slider-home li {
    width: 100%;
    list-style: none;
    padding: 0;
}

.slider-home div {
    width: 100%;
}

.slider-animation ul {
    animation: move 10s infinite alternate;
}

@keyframes move {
    0% {
        margin-left: 0;
    }

    43.75% {
        margin-left: 0;
    }

    56.25% {
        margin-left: -100%;
    }

    100% {
        margin-left: -100%;
    }
}

.slider-animation2 ul {
    animation: moveTwo 26s infinite;
}

@keyframes moveTwo {
    0% {
        margin-left: 0;
    }

    29.6% {
        margin-left: 0;
    }

    33.3% {
        margin-left: -100%;
    }

    62.9% {
        margin-left: -100%;
    }

    66.6% {
        margin-left: -200%;
    }

    96.2% {
        margin-left: -200%;
    }

    100% {
        margin-left: 0;
    }
}

/**************************/
/******* bonos y saldo *****/
#tablita-saldo {
    width: 98%;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    margin: 0 auto 40px auto;
}

.titSaldo {
    width: 60%;
    height: 35px;
    background-color: #ccc;
    font-weight: 700;
    padding-left: 15px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    display: flex;
    align-items: center;
}

.impSaldo {
    width: 40%;
    border-bottom: 1px solid #000;
}

.cancelBono {
    background-color: #000;
    border: 1px solid #FFF;
    text-align: center;
}

@media all and (min-width: 560px) and (max-width: 767px), (min-width: 1024px) {
    #tablita-saldo {
        width: 80%;
    }

    .cancelBono {
        width: 50%;
    }
}

/***************************/
/******* buscador *********/
.buscador {
    width: 400px;
    margin: 20px;
}

.buscador button {
    /*width: 50px;
    height: 50px;*/
    font-size: 1rem;
    padding: 5px;
    background-color: transparent;
    color: #FFF;
    border: 1px solid #FFF;
}

/**************************/
/******* favoritos ********/
#div-fav {
    display: none;
    width: 400px;
    position: fixed;
    left: calc(50% - 200px);
    top: calc(40% - 10px);
    z-index: 2;
}

/****************************/
#myvideo {
    width: 100%;
    height: auto;
}

.pruebasPRO {
    font-size: 36px;
    font-weight: 700;
    color: #000;
    text-align: center;
}

#buscadorDesktop {
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 435px;
}

.buscadorDesktop {
    width: calc(100% - 700px) !important;
}

#buscadorMobile {
    height: 50px;
}

#lupa {
    width: 70px;
}

.lupa {
    width: 45px;
    background-size: 34px;
    background-position: 0px -2px;
}

.mobileheader .lupa {
    width: 37px;
}

.lupa, #buscadorDesktop input {
    border: 0;
    cursor: pointer;
    background-color: transparent;
    background-image: url(/img/layout/icons/GP_Lupa_Buscador.png);
    background-repeat: no-repeat;
}

#buscadorDesktop input {
    /*width: 50px;*/
    background-position: 0 50%;
    /*background-size: 25px;*/
    padding: 0 0 0 50px;
    -webkit-transition: width 1.2s ease-in-out;
    transition: width 1.2s ease-in-out;
    /*-webkit-transition: background-color 0.6s ease-in-out 0.4s;
    transition: background-color 0.6s ease-in-out 0.4s;*/
}

#buscadorMobile input, #buscadorDesktop input:focus {
    border-radius: 0;
    width: calc(100% - 50px);
    cursor: text;
    color: #FFF;
    background-color: #e40090;
    border: 0;
}

#buscadorMobile input {
    /*height: 100%;*/
    height: 40px;
    background-image: url(/img/layout/icons/GP_Lupa_Buscador.png);
    background-repeat: no-repeat;
    background-position: 15px 50%;
    background-size: 25px;
    padding: 0 0 0 60px;
}

.span-close {
    width: 50px;
    background-image: url(/img/layout/icons/ico-cierre-white.png);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 15px 50%;
    background-color: #e40090;
    cursor: pointer;
}

#resultatsMobile, #resultatsDesktop {
    position: absolute;
    padding: 20px;
    background-color: #FFF;
    border-bottom: 5px solid #e40090;
}

#resultatsDesktop {
    width: calc(100% - 700px);
    top: 50px;
    right: 435px;
    justify-content: stretch;
    height: 380px;
    overflow: scroll;
}

#resultatsMobile {
    width: calc(100% - 20px);
    top: 139px;
    left: 10px;
    height: 380px;
    overflow: scroll;
    justify-content: stretch;
}

#terminoInputMobile::-webkit-input-placeholder, #terminoInputDesktop::-webkit-input-placeholder {
    color: #FFF;
    opacity: 1;
}

#terminoInputMobile:-ms-input-placeholder, #terminoInputDesktop:-ms-input-placeholder {
    color: #FFF;
    opacity: 1;
}

#terminoInputMobile::-ms-input-placeholder, #terminoInputDesktop::-ms-input-placeholder {
    color: #FFF;
    opacity: 1;
}

#terminoInputMobile::placeholder, #terminoInputDesktop::placeholder {
    color: #FFF;
    opacity: 1;
}

.categoria {
    font-size: 18px;
    font-weight: 900;
    color: #000;
    margin-top: 10px;
    margin-bottom: 5px;
}

.tituloJue, .tituloJue a {
    font-size: 14px;
    color: #000;
    /*font-style: italic;*/
}

.tituloJue a:hover {
    font-weight: 900;
    color: #e40090;
}

/*************************************/
/****** titulos sliders ************/
#promocionesMobile h3 {
    margin-bottom: 0;
}

.titslider {
    margin: 10px 0 0 10px;
}

.subtitslider {
    color: #e60881;
    margin: 0 0 10px 10px;
}

/************************************/
/****** tickets ****************/
#detail_div {
    padding: 10px;
}

.resp-soporte {
    margin: 10px 0 10px 40px;
    background-color: #f8c3da;
    border: 1px solid #c286a6;
}

.resp-user {
    margin: 10px 40px 10px 0;
    background-color: #e1e1e1;
    border: 1px solid #999;
}

.resp-soporte, .resp-user {
    border-radius: 7px;
    padding: 10px;
}

@media all and (min-width: 678px) {
    .resp-soporte {
        margin: 20px 0 20px 100px;
        padding: 20px;
    }

    .resp-user {
        margin: 20px 100px 20px 0;
        padding: 20px;
    }

    .resp-btns {
        width: 50%;
        margin: 0 auto;
    }
}

@media all and (min-width: 1024px) {
    .resp-soporte {
        margin: 20px 0 20px 150px;
        padding: 30px;
    }

    .resp-user {
        margin: 20px 150px 20px 0;
        padding: 30px;
    }

    .resp-btns {
        width: 40%;
    }
}

/*******************************/
/******* input file ***********/
.upload {
    display: none;
}

.uploader {
    border: 1px solid #ccc;
    /*width: 300px;*/
    width: 100%;
    position: relative;
    height: 40px;
    display: flex;
}

.uploader .input-value {
    /*width: 250px;*/
    width: 90%;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    /*line-height: 25px;*/
    font-family: sans-serif;
    font-size: 16px;
}

.uploader label {
    cursor: pointer;
    margin: 0;
    width: 37px;
    height: 37px;
    position: absolute;
    right: 0;
    background: #f8c3da url('https://www.interactius.com/wp-content/uploads/2017/09/folder.png') no-repeat center;
}

@media all and (min-width: 678px) {
}

/*****************************************/
.h100 {
    height: 500px;
}

#socialob {
    width: 100%;
}

#socialob ul {
    padding: 0;
    margin: 0;
    text-align: center;
    list-style: none;
}

#socialob ul li {
    display: inline-block;
    border-radius: 5px;
    background-color: #ccc;
    width: 50px;
    height: 50px;
    position: relative;
    /*-webkit-box-shadow: inset 0px 0px 10px #128cc9;
            box-shadow: inset 0px 0px 10px #128cc9;*/
}

/* color fondo del div */
#socialob ul li div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    background: #282828;
    /*background: -moz-linear-gradient(top,  #e60881 0%, #128cc9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e60881), color-stop(100%,#128cc9));
    background: -webkit-linear-gradient(top,  #e60881 0%,#128cc9 100%);
    background: -o-linear-gradient(top,  #e60881 0%,#128cc9 100%);
    background: -ms-linear-gradient(top,  #e60881 0%,#128cc9 100%);*/
    /****background: -webkit-gradient(linear,  left top, left bottom,  from(#e60881),to(#128cc9));
    background: -webkit-linear-gradient(top,  #e60881 0%,#128cc9 100%);
    background: -o-linear-gradient(top,  #e60881 0%,#128cc9 100%);
    background: linear-gradient(to bottom,  #e60881 0%,#128cc9 100%);
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e60881', endColorstr='#128cc9',GradientType=0 );*/
    -webkit-transition: width 1s, height 1s, top 1s, left 1s;
    -o-transition: width 1s, height 1s, top 1s, left 1s;
    transition: width 1s, height 1s, top 1s, left 1s;
}

#socialob ul li a {
    width: 50px;
    height: 50px;
    text-decoration: none;
    position: absolute;
    top: -5px;
    left: 0px;
    -webkit-transition: top 1s, left 1s;
    -o-transition: top 1s, left 1s;
    transition: top 1s, left 1s;
}

#socialob ul li a span, #socialob ul li a i {
    font-size: 58px;
    color: #ccc;
    -webkit-transition: color 1s;
    -o-transition: color 1s;
    transition: color 1s;
}

/* posicion div hover */
#socialob ul li:hover div {
    width: 0px;
    height: 0px;
    top: 25px;
    left: 25px;
}

/* posicion texto hover*/
#socialob ul li:hover a {
    top: -30px;
    left: -25px;
}

/* color texto hover */
#socialob ul li:hover a span, #socialob ul li:hover a i {
    /*color: #e60881;*/
    color: #282828;
}

.pruebasinputsimg {
    width: 100%;
    background-color: #FFF;
}

.h120 {
    height: 120px;
}

.h50 {
    height: 50px;
}

@media all and (min-width: 375px) {
    .h1-promos {
        width: 84%;
    }
}

@media all and (min-width: 410px) and (max-width: 924px) {
    .h1-promos {
        width: 80%;
    }
}

@media all and (min-width: 480px) {
}

@media all and (max-width: 480px) {
}

@media all and (min-width: 768px) {
    .txt-seo {
        width: 80%;
    }

    #bg-white-promos > div {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .tt-bold-promos {
        width: 30%;
        border-bottom: 1px solid #ccc;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .txt-promos {
        width: 70%;
    }

    .welcome-container {
        width: calc(70%);
    }

    .btn-welcome {
        height: 40px;
    }

    .btn-welcome a {
        font-size: 1.4rem;
    }

    #membersarea > div {
        padding: 30px;
    }

    #slot-destacada, #finde-ruletas, #happy-hour, #finde-bonos, #torneos-GP, #promo-deportes,#mega-domingo {
        width: 84%
    }
}

@media all and (min-width: 1024px) {
    .txt-seo {
        width: 70%;
    }

    .container-error404 h1 {
        font-size: 3rem;
    }

    .welcome-container {
        width: calc(60%);
    }

    .welcome {
        margin: 5%;
    }

    #membersarea > div {
        padding: 50px;
    }
}

@media all and (min-width: 1280px) {
    .welcome-container {
        width: calc(50%);
    }
}

@media all and (min-width: 1440px) {
}

@media all and (min-width: 1600px) {
}

.pe-none {
    pointer-events: none;
}

.fade-in {
    animation: fadeIn 500ms forwards;
}

.fade-out {
    animation: fadeOut 500ms forwards;
}

.slide-left-in {
    animation: slideLeftIn 500ms forwards;
}

.slide-left-out {
    animation: slideLeftOut 500ms forwards;
}

.slide-right-in {
    animation: slideRightIn 500ms forwards;
}

.slide-right-out {
    animation: slideRightOut 500ms forwards;
}

@keyframes slideLeftIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideLeftOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}


@keyframes slideRightIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideRightOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

 @keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}