/**************************************************************************************/
/*******VARIABLES***************************/
/**************************************************************************************/

:root {
    /*azul drakhar*/
    --primary-color: #00afe9;
    /*negro fondo*/
    --secondary-color: #1a1a1a;
    /*white*/
    --white: #ffffff;
    /*whiteTransp*/
    --whiteTransp: #ffffff66;
    /*grey color ( menu) */
    --greyColor: #222222;
}

/*evitar se subrayen imagen en mobile al hacer click*/

* {
    -webkit-tap-highlight-color: transparent;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 1.6vw;
    font-weight: 400;
    font-family: 'gilroylight';
}

@media(max-width:767px) {
    * {
        font-size: 20px;
        font-weight: 400;
        font-family: 'gilroylight';
    }
}

/*subrayado al seleccionar textos*/

::-moz-selection { /* Code for Firefox */
    color: var(--white);
    background: var(--primary-color);
}

::selection {
    color: var(--white);
    background: var(--primary-color);
}

/*tipografía parrafos*/

@font-face {
    font-family: 'gilroylight';
    src: url('../fonts/gilroy-light-webfont.eot');
    src: url('../fonts/gilroy-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/gilroy-light-webfont.woff2') format('woff2'), url('../fonts/gilroy-light-webfont.woff') format('woff'), url('../fonts/gilroy-light-webfont.ttf') format('truetype'), url('../fonts/gilroy-light-webfont.svg#gilroylight') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*tipografía titulos*/

@font-face {
    font-family: 'a_area_kilometer_50_regular';
    src: url('../fonts/aareakilometer50-webfont.eot');
    src: url('../fonts/aareakilometer50-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/aareakilometer50-webfont.woff2') format('woff2'), url('../fonts/aareakilometer50-webfont.woff') format('woff'), url('../fonts/aareakilometer50-webfont.ttf') format('truetype'), url('../fonts/aareakilometer50-webfont.svg#a_area_kilometer_50_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}



/**************************************************************************************/
/*******PANEL LOADING***************************/
/**************************************************************************************/

#divLoading {
    height: 100%;
    width: 100%;
    color: #ADAFB6;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.loader {
    width: 100px;
    height: 100px;
    display: flex;
    color: var(--primary-color);
    background: linear-gradient(currentColor 0 0) right /51% 100%, linear-gradient(currentColor 0 0) bottom /100% 51%;
    background-repeat: no-repeat;
    animation: l17-0 2s infinite linear .25s;
}

    .loader::before {
        content: "";
        width: 50%;
        height: 50%;
        background: currentColor;
        transform-origin: 10% 10%;
        animation: l17-1 .5s infinite linear;
    }

@keyframes l17-0 {
    0%,12.49% {
        transform: rotate(0deg)
    }

    12.5%,37.49% {
        transform: rotate(90deg)
    }

    37.5%,62.49% {
        transform: rotate(180deg)
    }

    62.5%,87.49% {
        transform: rotate(270deg)
    }

    87.5%,100% {
        transform: rotate(360deg)
    }
}

@keyframes l17-1 {
    0% {
        transform: perspective(80px) rotate3d(-1,1,0, 0)
    }

    80%,100% {
        transform: perspective(80px) rotate3d(-1,1,0,-360deg)
    }
}


/**************************************************************************************/
/*******ROWS, COLUMNAS , GAPS (SEPARACION ENTRE COLUMNAS)...***************************/
/**************************************************************************************/

.gap10 {
    grid-gap: 10px;
}

.gap20 {
    grid-gap: 20px;
}

.gap30 {
    grid-gap: 30px;
}

.gap40 {
    grid-gap: 40px;
}

.gap50 {
    grid-gap: 50px;
}

.gap80 {
    grid-gap: 80px;
}

.gap3vw {
    grid-gap: 3vw;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.row-space-between {
    display: flex;
    justify-content: space-between;
}

.row-space-evenly {
    justify-content: space-evenly;
}

.rowcenterHorizontal {
    justify-content: center;
}

.rowFlexEnd {
    justify-content: flex-end;
}

.rowcenterVertical {
    align-items: center;
}

.nowrap {
    flex-wrap: nowrap;
}

.rownowrapPc {
    flex-wrap: wrap;
}

.columnflex1 {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100%;
    width: 100%;
}

.colCenterVertical {
    justify-content: center;
}

.colSpaceBetweenVertical {
    justify-content: space-between;
}

.colBottomVertical {
    justify-content: flex-end;
}

.colRightHorizontal {
    align-items: flex-end;
}

.colLeftHorizontal {
    align-items: flex-start;
}

.colCenterHorizontal {
    align-items: flex-start;
}

.flex1 {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.rowFlex1 {
    display: flex;
    flex-direction: row;
    flex: 1;
}

.col-md {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}

.col-md-7 {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}

.col-md-8 {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}

.col-md-10 {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}

.col-md-11 {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}


@media screen and (min-width: 768px) {
    .col-md {
        flex: 1
    }

    .col-md-7 {
        flex: 1.3
    }

    .col-md-8 {
        flex: 2
    }

    .col-md-10 {
        flex: 3;
    }

    .col-md-11 {
        flex: 6;
    }
}


.col {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1
}

.col-7 {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1.5
}

.col-8 {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 2
}

.col-10 {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 3;
}

.col-11 {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 3;
}


/**************************************************************************************/
/*******IMÁGENES**********************************************/
/**************************************************************************************/

.rwd {
    max-width: 100%;
}

.rwd60 {
    max-width: 60%;
}

.rwd100pc90Mobile {
    max-width: 100%;
}

.h80 {
    height: 80%;
}

@media(max-width:768px) {
    .rwd100pc90Mobile {
        max-width: 90%;
    }
}
/**************************************************************************************/
/*******MARGENES, PADDINGS**********************************************/
/**************************************************************************************/

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mt40 {
    margin-top: 40px;
}

.mt50 {
    margin-top: 50px;
}

.mt60 {
    margin-top: 60px;
}

.mt70 {
    margin-top: 70px;
}

.mt80 {
    margin-top: 80px;
}

.mt90 {
    margin-top: 90px;
}

.mt100 {
    margin-top: 100px;
}

.mt160 {
    margin-top: 160px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.pb100 {
    padding-bottom: 100px;
}

.pb150 {
    padding-bottom: 150px;
}

.pb200 {
    padding-bottom: 200px;
}

.pb8vw {
    padding-bottom: 8vw;
}

.mt20Portrait {
    margin-top: 20px;
}

@media(min-width:768px) {
    .mt20Portrait {
        margin-top: 0;
    }
}


/**************************************************************************************/
/*******CUSTOM SCROLL BAR SOLO PARA DISPOSITIVOS NO TOUCH (PC)**********************************************/
/**************************************************************************************/

@media (hover: hover) {
    body::-webkit-scrollbar {
        width: 14px;
    }

    body::-webkit-scrollbar-track {
        background: var(--greyColor);
    }

    body::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 5px;
        cursor: pointer;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--primary-color);
    }
}



/**************************************************************************************/
/************************************LAYOUT MASTER**********************************************/
/**************************************************************************************/


html, body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-height: 100%;
    color: var(--white);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /*smoothscroll en las anclas por css  sin hacerlo por js*/
    scroll-behavior: smooth;
    /*padding del scroll al ancla. así se queda 120px antes dle inciio de la seccion y el menu que esta stiky (estilo fixed) no tapa el inicio de la seccion al moverse el ancla hasta ahi.
    /* tiene que ser la altura del menú, lo machaco por.js. despues pero  lo inicializo a 120 px aquí*/
    scroll-padding-top: 120px;
}

body {
    background-color: var(--secondary-color);
    background-image: url("../images/master/bg3000.png");
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    overflow-y: auto;
    /*necesario porque EN SECCIÓN GAMES EL CONTENCOR DEL LOS SLIDERS tinen  ancho 100vw no considera el scrollvertical y me hac eun poco de scroll horizontal*/
    overflow-x: hidden;
}

main {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    color: var(--white);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.containerPpal {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
}

footer {
    width: 100%;
    min-height: calc((100vw*1437)/3804);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/master/bgFooter.png");
    background-size: contain;
    padding: 40px 50px;
    background-repeat: no-repeat;
    margin-top: -6vw;
}

.mbSalvarFooter {
    margin-bottom: 9vw !important;
}

.pbSalvarFooter {
    padding-bottom: 9vw !important;
}


@media(max-width:1067px) {

    footer {
        background-size: auto 100%;
        background-position: center center;
        padding: 140px 20px 80px 20px;
        margin-top: -10vw;
    }

    .pbSalvarFooter {
        padding-bottom: 12vw !important;
    }

    .mbSalvarFooter {
        margin-bottom: 12vw !important;
    }
}

.contentBig {
    width: calc(100% - 120px);
    box-sizing: border-box;
    margin: 0 auto;
}

.content {
    width: calc(75% - 120px);
    margin: 0 auto;
}

.contentPlataformas {
    width: calc(80% - 120px);
    margin: 0 auto;
}

.gapIconosPlataformas {
    grid-gap: 4vw;
}

@media(max-width:1200px) {

    .contentPlataformas {
        width: calc(90% - 40px);
    }

    .gapIconosPlataformas {
        grid-gap: 40px;
    }
}

@media(max-width:767px) {
    .contentBig {
        width: calc(100% - 40px);
    }

    .content {
        width: calc(80% - 40px);
    }

    .contentPlataformas {
        width: calc(50% - 40px);
    }

    .gapIconosPlataformas {
        grid-gap: 40px;
    }
}


/**************************************************************************************/
/************************************TEXTOS**********************************************/
/**************************************************************************************/


a {
    transition: all linear 0.5s;
    cursor: pointer;
    color: var(--white);
    text-decoration: none;
    display: block;
}

    a:hover {
        color: var(--primary-color)
    }

.pointer {
    cursor: pointer;
}


.titleSection {
    font-family: 'a_area_kilometer_50_regular';
    font-size: 1.4em;
    margin-bottom: 20px;
}

.rssFooter {
    font-size: 60px;
}


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

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

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

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


/**************************************************************************************/
/*******BOTONES***************************/
/**************************************************************************************/

.btnImg {
    width: 14vw;
    transition: all linear 0.5s;
}

.btnEmail {
    transition: all linear 0.5s;
}

/*solo para dispositivos que aceptan hover ( pcs) */

@media (hover: hover) {
    .btnImg:hover {
        opacity: 0.6;
    }

    .btnEmail:hover {
        opacity: 0.6;
    }
}

/*columna botón view all de la home sección games*/
.colBtnImg {
    display: flex;
    flex-direction: column;
    flex: 0 0 14vw;
}

@media(max-width:1200px) {

    .btnImg {
        width: 14vw;
    }

    .colBtnImg {
        flex: 0 0 14vw;
    }
}

@media(max-width:900px) {

    .btnImg {
        width: 16vw;
    }

    .colBtnImg {
        flex: 0 0 16vw;
    }
}

@media(max-width:767px) {

    .btnImg {
        min-width: 200px;
    }

    .btnEmail {
        max-width: 70vw;
    }
}

.btn-primary {
    border-radius: 0;
    width: 100%;
    padding: 0px 20px;
    min-height: 60px;
    display: flex;
    flex-direction: row;
    grid-gap: 8px;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    color: #ffffff;
    text-transform: uppercase;
    font-family: 'a_area_kilometer_50_regular';
    background-color: var(--primary-color);
    color: var(--white);
    transition: all linear 0.5s;
}

/*solo para dispositivos que aceptan hover ( pcs) */

@media (hover: hover) {
    .btn-primary:hover {
        color: var(--primary-color);
        background-color: var(--whiteTransp)
    }
}

/**************************************************************************************/
/*******MENU NAVBAR***************************/
/**************************************************************************************/

nav {
    background-color: transparent;
    display: flex;
    z-index: 5;
    flex-direction: row;
    justify-content: space-between;
    grid-gap: 10px;
    width: 100%;
    background-color: var(--greyColor);
    padding: 20px 60px;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
}

.icoMenu {
    width: 40px;
    cursor: pointer;
}

    .icoMenu:before,
    .icoMenu:after,
    .icoMenu div {
        background: #fff;
        content: "";
        display: block;
        height: 6px;
        border-radius: 3px;
        margin: 7px 0;
        transition: 0.5s;
    }

    .icoMenu.icoActive:before {
        transform: translateY(12px) rotate(135deg);
    }

    .icoMenu.icoActive:after {
        transform: translateY(-12px) rotate(-135deg);
    }

    .icoMenu.icoActive div {
        transform: scale(0);
    }


.contentMenuMobile {
    display: flex;
    z-index: 2;
    flex-direction: column;
    grid-gap: 30px;
    width: 60vw;
    background-color: var(--greyColor);
    padding: 130px 20px 20px 20px;
    position: fixed;
    top: 0;
    right: -60vw;
    transition: right linear 0.5s;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
}

    .contentMenuMobile.show {
        right: 0;
    }

    .contentMenuMobile a {
        text-transform: uppercase;
    }

        .contentMenuMobile a.active {
            color: var(--primary-color);
        }

.displayPc {
    display: flex;
}

.displayMobile {
    display: none;
}


@media(max-width:767px) {

    nav {
        padding: 20px 20px;
    }

    .displayPc {
        display: none;
    }

    .displayMobile {
        display: flex;
    }
}

.colLogoMenu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 0 0 30%;
}

.logoMenu {
    max-width: 200px;
}

.colMenu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    flex: 1;
}

.menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    grid-gap: 30px;
}

    .menu a {
        text-transform: uppercase
    }

        .menu a.active {
            color: var(--primary-color);
        }


/**************************************************************************************/
/*******FORMULARIO ELEMENTS***************************/
/**************************************************************************************/

.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-control {
    background-color: transparent;
    color: var(--white);
    transition: all .4s cubic-bezier(.43,.39,.23,1.01);
    min-height: 30px;
    width: 100%;
    border: none;
}

    .form-control:focus {
        outline: none;
    }

/*placeholders*/

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: var(--white);
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: var(--white);
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: var(--white);
    opacity: 1;
}


/*autofill inputs*/

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    /*color texto*/
    -webkit-text-fill-color: var(--white);
    /*fondo*/
    -webkit-box-shadow: 0 0 0px 1000px var(--primary-color) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.containerFormControlLines {
    background-color: transparent;
    color: var(--white);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-gap: 10px;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 3px 0;
    border-bottom: 1px solid var(--white);
}

/**************************************************************************************/
/*******MODAL***************************/
/**************************************************************************************/

html.modal-active,
body.modal-active {
    overflow: hidden;
}

#modal-container {
    position: fixed;
    display: table;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transform: scale(0);
    z-index: 8;
}

    #modal-container.one {
        transform: scaleY(0.01) scaleX(0);
        animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }

        #modal-container.one .modal-background .modal {
            transform: scale(0);
            animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }

        #modal-container.one.out {
            transform: scale(1);
            animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }

            #modal-container.one.out .modal-background .modal {
                animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
            }

    #modal-container .modal-background {
        display: table-cell;
        background: rgba(0, 0, 0, 0.8);
        text-align: center;
        vertical-align: middle;
    }

        #modal-container .modal-background .modal {
            background: transparent;
            box-sizing: border-box;
            padding: 25px 50px;
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 3px;
            font-weight: 300;
            position: relative;
            overflow-y: auto;
            max-height: 85vh;
            max-width: 100%;
        }

/*custom scroll custom del modal*/

.modal::-webkit-scrollbar {
    width: 10px;
}


.modal::-webkit-scrollbar-track {
    background: var(--greyColor);
}


.modal::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
}

    .modal::-webkit-scrollbar-thumb:hover {
        background: var(--greyColor);
    }



#modal-container .modal-background .modal h2 {
    font-size: 25px;
    line-height: 25px;
    margin-bottom: 15px;
}

#modal-container .modal-background .modal p {
    font-size: 18px;
    line-height: 22px;
}

#modal-container .modal-background .modal .modal-svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 3px;
}

    #modal-container .modal-background .modal .modal-svg rect {
        stroke: #fff;
        stroke-width: 2px;
        stroke-dasharray: 778;
        stroke-dashoffset: 778;
    }


.modal video {
    width: 60vw;
}

@media(orientation:portrait) {
    .modal video {
        width: calc(100% - 100px);
    }
}

@keyframes unfoldIn {
    0% {
        transform: scaleY(0.005) scaleX(0);
    }

    50% {
        transform: scaleY(0.005) scaleX(1);
    }

    100% {
        transform: scaleY(1) scaleX(1);
    }
}

@keyframes unfoldOut {
    0% {
        transform: scaleY(1) scaleX(1);
    }

    50% {
        transform: scaleY(0.005) scaleX(1);
    }

    100% {
        transform: scaleY(0.005) scaleX(0);
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes zoomOut {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}


/*******************************************************************/
/****************** HOME *********************************/
/*******************************************************************/


/*SECTION1:  LOGO*/

/*para las SECCIONES QUE TIENEN UNA IMAGEN DE FONDO ( casi todas) el ANCHO es 100vw*/
/*hacemos regla de tres para calcular la ALTURA MINIMA del div para esa imagen de fondo.*/
/*min-height: calc((100vw*altoImagenFondo)/anchoImagendeFondo);*/

.HomeSection1 {
    width: 100%;
    min-height: calc((100vw*1385)/3807);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/home/section1/bg.png");
    background-size: contain;
    padding: 0 60px;
    background-repeat: no-repeat;
}

/*SECTION 2: RENDER*/

/*para las SECCIONES QUE TIENEN UNA IMAGEN DE FONDO ( casi todas) el ANCHO es 100vw*/
/*hacemos regla de tres para calcular la ALTURA MINIMA del div para esa imagen de fondo.*/
/*min-height: calc((100vw*altoImagenFondo)/anchoImagendeFondo);*/
.HomeSection2 {
    width: 100%;
    min-height: calc((100vw*1443)/3811);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/home/section2/bg.png");
    background-size: contain;
    padding: 40px 60px;
    background-repeat: no-repeat;
}

.play {
    font-size: 100px;
}


/*SECTION 3 :  ABOUT*/

/*para las SECCIONES QUE TIENEN UNA IMAGEN DE FONDO ( casi todas) el ANCHO es 100vw*/
/*hacemos regla de tres para calcular la ALTURA MINIMA del div para esa imagen de fondo.*/
/*min-height: calc((100vw*altoImagenFondo)/anchoImagendeFondo);*/
.HomeSection3 {
    width: 100%;
    min-height: calc((100vw*1440)/3800);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/home/section3/bg2.png");
    background-size: contain;
    padding: 40px 60px 0 60px;
    background-repeat: no-repeat;
}


/*SECTION 4:  TAX INCENTIVE*/

/*para las SECCIONES QUE TIENEN UNA IMAGEN DE FONDO ( casi todas) el ANCHO es 100vw*/
/*hacemos regla de tres para calcular la ALTURA MINIMA del div para que entre entera esa imagen de fondo.*/
/*min-height: calc((100vw*altoImagenFondo)/anchoImagendeFondo);*/

.HomeSection4 {
    width: 100%;
    min-height: calc((100vw*1361)/3800);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/home/section4/bg2.png");
    background-size: contain;
    padding: 40px 60px;
    background-repeat: no-repeat;
}


/*SECTION 5:  OUR GAMES*/

/*para las SECCIONES QUE TIENEN UNA IMAGEN DE FONDO ( casi todas) el ANCHO es 100vw*/
/*hacemos regla de tres para calcular la ALTURA MINIMA del div para que entre entera esa imagen de fondo.*/
/*min-height: calc((100vw*altoImagenFondo)/anchoImagendeFondo);*/

.HomeSection5 {
    width: 100%;
    min-height: calc((100vw*1663)/3807);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/home/section5/bg.png");
    background-size: contain;
    padding: 40px 60px;
    background-repeat: no-repeat;
}

.containerSlider {
    position: relative;
    overflow: hidden;
}

/*SECTION 6: CONTACT US*/

/*para las SECCIONES QUE TIENEN UNA IMAGEN DE FONDO ( casi todas) el ANCHO es 100vw*/
/*hacemos regla de tres para calcular la ALTURA MINIMA del div para que entre entera esa imagen de fondo.*/
/*min-height: calc((100vw*altoImagenFondo)/anchoImagendeFondo);*/

.HomeSection6 {
    width: 100%;
    min-height: calc((100vw*1608)/3805);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/home/section6/bg.png");
    background-size: contain;
    padding: 40px 60px;
    background-repeat: no-repeat;
}

@media(max-width:1300px) {
    .HomeSection6 {
        padding: 40px 60px 90px 60px;
    }
}

@media(max-width:1067px) {

    .HomeSection6 {
        background-size: auto 100%;
        background-position: center center;
        padding: 80px 60px 200px 60px;
    }
}


/*LAS SECCIONES CON IMAGEN DE FONDO.. de anchos de pantalla de 767 para abajo dejan de mostrar toda la imagen de fondo, 
    muestra el total de la altura pero cropea por los lados y crece en alto dinámicamente.
*/

@media(max-width:767px) {
    .HomeSection1 {
        background-size: auto 100%;
        background-position: center center;
        padding: 80px 60px;
    }

    .HomeSection2 {
        background-size: auto 100%;
        background-position: center center;
        padding: 80px 20px;
    }

    .HomeSection3 {
        background-size: auto 100%;
        background-position: right center;
        padding: 80px 20px 40px 20px;
    }

    .HomeSection4 {
        background-size: auto 100%;
        background-position: center center;
        padding: 80px 20px;
    }

    .HomeSection5 {
        background-size: auto 100%;
        background-position: center center;
        padding: 80px 20px;
    }

    .HomeSection6 {
        background-size: auto 100%;
        background-position: center center;
        padding: 80px 20px 140px 20px;
    }
}


/*******************************************************************/
/****************** ABOUT US PAGE *********************************/
/*******************************************************************/


/*SECTION1:  LOGO*/

.AboutSection1 {
    width: 100%;
    min-height: calc((100vw*1172)/3811);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/about/section1/bg.png");
    background-size: contain;
    padding: 0 60px;
    background-repeat: no-repeat;
}

/*SECTION: WHO ARE WE?*/

.AboutSection2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 60px;
}



/*SECTION 3 :  BASED IN TENERIFE*/

.AboutSection3 {
    width: 100%;
    min-height: calc((100vw*1261)/3811);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/about/section3/bg.png");
    background-size: contain;
    padding: 40px 60px;
    background-repeat: no-repeat;
}


/*SECTION 4:  WANT TO JOIN US?*/

.AboutSection4 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 60px;
}


@media(max-width:767px) {

    .AboutSection1 {
        background-size: auto 100%;
        background-position: center center;
        padding: 80px 40px;
    }

    .AboutSection2 {
        padding: 20px 20px 20px 20px;
    }

    .AboutSection3 {
        background-size: auto 100%;
        background-position: right center;
        padding: 80px 20px;
    }

    .AboutSection4 {
        padding: 20px 20px 20px 20px;
    }
}



/*******************************************************************/
/****************** GAMES *********************************/
/*******************************************************************/

.slider-containerFullWidth {
    width: 100vw;
}

.slider-containerBig {
    width: calc(100vw - 120px);
}


@media(max-width:767px) {
    .slider-containerBig {
        width: calc(95vw - 40px);
        overflow: hidden;
    }
}


.swiper-scrollbar {
    background: #ffffff88;
}

.swiper-scrollbar-drag {
    background: var(--primary-color);
    height: 10px;
    top: -3px;
    cursor: pointer;
}


.swiper-horizontal > .swiper-scrollbar {
    position: relative !important;
    margin: 20px auto 20px auto;
    z-index: 1;
    height: 5px;
    width: 80%;
    border-radius: 2px;
    height: 5px;
}


#scrollBarSliderHomeServices, #scrollBarSliderHomeOwn {
    margin: 0 auto 20px auto;
}

/*SLIDER PAGE GAMES (SERVICES). la diapositiva activa, sin filtro. es decir brillo al 100%*/

#sliderServices .swiper-slide.swiper-slide-active img {
    filter: unset;
}


/*SLIDER PAGE GAMES (SERVICES). la diapositiva no activa, la imagen con un filtro  del brillo aL 20%*/

#sliderServices .swiper-slide img {
    transition: filter linear 0.5s;
    filter: brightness(20%);
}

/*SLIDER PAGE GAMES (OWNS). la diapositiva activa, sin filtro. es decir brillo al 100%*/

#sliderOwns .swiper-slide.swiper-slide-active img {
    filter: unset;
}


/*SLIDER PAGE GAMES (SERVICES). la diapositiva no activa, la imagen con un filtro  del brillo aL 20%*/

#sliderOwns .swiper-slide img {
    transition: filter linear 0.5s;
    filter: brightness(20%);
}


/**/
/*******************************************************************/
/****************** FICHA GAME *********************************/
/*******************************************************************/


.gameSection1 {
    width: 100%;
    min-height: calc((100vw*1534)/3811);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/fichasJuegos/juego1/header/headBg.png");
    background-size: contain;
    padding: 30px 60px;
    background-repeat: no-repeat;
}

.gameSection2 {
    width: 100%;
    min-height: calc((100vw*1534)/3811);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/fichasJuegos/juego2/header/headBg.png");
    background-size: contain;
    padding: 30px 60px;
    background-repeat: no-repeat;
}

.gameSection3 {
    width: 100%;
    min-height: calc((100vw*1534)/3811);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/fichasJuegos/juego3/header/headBg.png");
    background-size: contain;
    padding: 30px 60px;
    background-repeat: no-repeat;
}

.gameSection4 {
    width: 100%;
    min-height: calc((100vw*1534)/3811);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/fichasJuegos/juego4/header/headBg.png");
    background-size: contain;
    padding: 30px 60px;
    background-repeat: no-repeat;
}

.gameSection5 {
    width: 100%;
    min-height: calc((100vw*1534)/3811);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/fichasJuegos/juego5/header/headBg.png");
    background-size: contain;
    padding: 30px 60px;
    background-repeat: no-repeat;
}

.gameSection6 {
    width: 100%;
    min-height: calc((100vw*1534)/3811);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/fichasJuegos/juego6/header/headBg.png");
    background-size: contain;
    padding: 30px 60px;
    background-repeat: no-repeat;
}

.gameSection7 {
    width: 100%;
    min-height: calc((100vw*1534)/3811);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/fichasJuegos/juego7/header/headBg.png");
    background-size: contain;
    padding: 30px 60px;
    background-repeat: no-repeat;
}

.gameSection8 {
    width: 100%;
    min-height: calc((100vw*1534)/3811);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/fichasJuegos/juego8/header/headBg.png");
    background-size: contain;
    padding: 30px 60px;
    background-repeat: no-repeat;
}

.gameSection9 {
    width: 100%;
    min-height: calc((100vw*1534)/3811);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/fichasJuegos/juego9/header/headBg.png");
    background-size: contain;
    padding: 30px 60px;
    background-repeat: no-repeat;
}

.gameSection10 {
    width: 100%;
    min-height: calc((100vw*1534)/3811);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/fichasJuegos/juego10/header/headBg.png");
    background-size: contain;
    padding: 30px 60px;
    background-repeat: no-repeat;
}
@media(max-width:767px) {

    .gameSection1 {
        background-size: auto 100%;
        background-position: center center;
        padding: 30px 40px;
    }
                .gameSection2 {
                    background-size: auto 100%;
                    background-position: center center;
                    padding: 30px 40px;
                }
        
                .gameSection3 {
                    background-size: auto 100%;
                    background-position: center center;
                    padding: 30px 40px;
                }
        
                .gameSection4 {
                    background-size: auto 100%;
                    background-position: center center;
                    padding: 30px 40px;
                }
        
                .gameSection5 {
                    background-size: auto 100%;
                    background-position: center center;
                    padding: 30px 40px;
                }
        
                .gameSection6 {
                    background-size: auto 100%;
                    background-position: center center;
                    padding: 30px 40px;
                }
        
                .gameSection7 {
                    background-size: auto 100%;
                    background-position: center center;
                    padding: 30px 40px;
                }
        
                .gameSection8 {
                    background-size: auto 100%;
                    background-position: center center;
                    padding: 30px 40px;
                }
        
                .gameSection9 {
                    background-size: auto 100%;
                    background-position: center center;
                    padding: 30px 40px;
                }
        
                .gameSection10 {
                    background-size: auto 100%;
                    background-position: center center;
                    padding: 30px 40px;
                }
}

.relative {
    position: relative;
}

.playSliderJuego {
    font-size: 5vw;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    text-shadow: 5px 5px 10px #000000bb;
}

@media(max-width:767px) {

    .playSliderJuego {
        font-size: 70px;
    }
}

.maxWidth40pc {
    max-width: 40%;
}

/* estilos para el modal de la galería de imágenes */
.modal-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
    /* Permitir que los clics pasen a través del contenedor */
}

.modal-navigation button {
    background: none;
    border: none;
    color: #fff;
    pointer-events: all;
    /* Permitir que los botones reciban clics */
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, opacity 0.3s;
}

.modal-navigation button:hover {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

.modal-navigation button i {
    font-size: 2rem;
}

@media (max-width: 768px) {
    .modal-navigation button i {
        font-size: 1.5rem;
    }
}


#next-slide {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}