/* Error de minimización. Devolviendo el contenido no minimizado.
(3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,22): run-time error CSS1039: Token not allowed after unary operator: '-fondo'
(37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,17): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(52,17): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(56,35): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(82,42): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(82,59): run-time error CSS1039: Token not allowed after unary operator: '-linkColorGradient'
(94,21): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(108,38): run-time error CSS1039: Token not allowed after unary operator: '-maxWidth'
(119,28): run-time error CSS1039: Token not allowed after unary operator: '-logoPaddingLeft'
(129,25): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(160,34): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(189,15): run-time error CSS1039: Token not allowed after unary operator: '-topNav'
(201,38): run-time error CSS1039: Token not allowed after unary operator: '-topNav'
(204,47): run-time error CSS1039: Token not allowed after unary operator: '-maxWidth'
(250,54): run-time error CSS1039: Token not allowed after unary operator: '-linkColorGradient'
(250,80): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(282,50): run-time error CSS1039: Token not allowed after unary operator: '-linkColorGradient'
(282,76): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(302,41): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(315,56): run-time error CSS1039: Token not allowed after unary operator: '-externalLinkHoverSVG'
(324,19): run-time error CSS1039: Token not allowed after unary operator: '-topNav'
(331,48): run-time error CSS1039: Token not allowed after unary operator: '-maxWidth'
(359,50): run-time error CSS1039: Token not allowed after unary operator: '-linkColorGradient'
(359,76): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(395,43): run-time error CSS1039: Token not allowed after unary operator: '-maxWidth'
(404,43): run-time error CSS1039: Token not allowed after unary operator: '-maxWidth'
(452,38): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(452,55): run-time error CSS1039: Token not allowed after unary operator: '-linkColorGradient'
(483,30): run-time error CSS1039: Token not allowed after unary operator: '-logo'
(573,22): run-time error CSS1039: Token not allowed after unary operator: '-fondo'
(573,52): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(573,69): run-time error CSS1039: Token not allowed after unary operator: '-linkColorGradient'
(580,22): run-time error CSS1039: Token not allowed after unary operator: '-fondo'
(580,52): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(580,69): run-time error CSS1039: Token not allowed after unary operator: '-linkColorGradient'
(599,43): run-time error CSS1039: Token not allowed after unary operator: '-maxWidth'
(622,26): run-time error CSS1039: Token not allowed after unary operator: '-logo'
(728,36): run-time error CSS1039: Token not allowed after unary operator: '-fondoEvento'
(801,18): run-time error CSS1039: Token not allowed after unary operator: '-fighterHeight'
(802,27): run-time error CSS1039: Token not allowed after unary operator: '-fighterHeight'
(811,27): run-time error CSS1039: Token not allowed after unary operator: '-fighterHeight'
(819,39): run-time error CSS1039: Token not allowed after unary operator: '-fighterHeight'
(823,22): run-time error CSS1039: Token not allowed after unary operator: '-fighterHeight'
(835,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(836,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(842,36): run-time error CSS1039: Token not allowed after unary operator: '-fighterHeight'
(843,37): run-time error CSS1039: Token not allowed after unary operator: '-flagWidth'
(857,29): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(871,29): run-time error CSS1039: Token not allowed after unary operator: '-flagWidth'
(872,30): run-time error CSS1039: Token not allowed after unary operator: '-flagHeight'
(874,32): run-time error CSS1039: Token not allowed after unary operator: '-fighterHeight'
(874,64): run-time error CSS1039: Token not allowed after unary operator: '-fighterHeight'
(874,107): run-time error CSS1039: Token not allowed after unary operator: '-flagHeight'
(883,44): run-time error CSS1039: Token not allowed after unary operator: '-fighterHeight'
(903,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(906,27): run-time error CSS1039: Token not allowed after unary operator: '-fighterHeight'
(971,30): run-time error CSS1039: Token not allowed after unary operator: '-logo'
(994,25): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(1056,43): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(1057,42): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(1275,30): run-time error CSS1039: Token not allowed after unary operator: '-fondo'
(1275,60): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(1275,77): run-time error CSS1039: Token not allowed after unary operator: '-linkColorGradient'
(1287,23): run-time error CSS1039: Token not allowed after unary operator: '-topNav'
(1299,38): run-time error CSS1039: Token not allowed after unary operator: '-topNav'
(1334,23): run-time error CSS1039: Token not allowed after unary operator: '-topNav'
(1373,33): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(1383,33): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(1448,37): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(1535,21): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(1538,37): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(1566,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1567,18): run-time error CSS1039: Token not allowed after unary operator: '-heroHeight'
(1621,22): run-time error CSS1039: Token not allowed after unary operator: '-heroHeight'
(1638,26): run-time error CSS1039: Token not allowed after unary operator: '-heroHeight'
(1653,18): run-time error CSS1039: Token not allowed after unary operator: '-heroHeight'
(1701,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1704,18): run-time error CSS1039: Token not allowed after unary operator: '-slidderNameHeight'
(1708,22): run-time error CSS1039: Token not allowed after unary operator: '-flag'
(1727,22): run-time error CSS1039: Token not allowed after unary operator: '-slidderNameHeight'
(1730,47): run-time error CSS1039: Token not allowed after unary operator: '-maxWidth'
(1733,34): run-time error CSS1039: Token not allowed after unary operator: '-slidderNameHeight'
(1792,29): run-time error CSS1039: Token not allowed after unary operator: '-linkColor'
(1793,43): run-time error CSS1039: Token not allowed after unary operator: '-letterShadow'
 */
/*GBF*/
body {
    --fondo: url('../img/fondoGBF.png');
    --logo: url('../img/logoGBF.png');
    --externalLinkHoverSVG: url('../img/externalLinkHoverGBF.svg');
    --logoPaddingLeft: 1.6em;
    --linkColor: #006cac;
    --linkColorGradient: #003293;
    --letterShadow: white;
}

/*#region inicio*/

@font-face {
    font-family: Exo2H1;
    src: url('/css/Exo2-ExtraBoldItalic.ttf');
}

html {
    --topNav: 0px;
}

    html.translated-ltr, html.translated-rtl {
        --topNav: 40px;
    }

body {
    margin: 0;
    padding: 0;
    background: black;
    color: white;
    padding-top: calc(2.6em * 0.7 + 4rem);
    font-family: 'Oswald', sans-serif;
    background: var(--fondo) right bottom no-repeat #000;
    background-attachment: fixed;
    background-size: auto 80vh;
    --maxWidth: 90rem;
}

h1 {
    font-size: 2rem;
    margin-bottom: 2em;
    color: var(--linkColor);
    margin-top: 1em;
    padding-top: 0;
}

h5 {
    font-size: 1.3rem;
    padding-bottom: 0.2em;
    margin-bottom: 0.5em;
    color: var(--linkColor);
    margin-top: 0;
    padding-top: 0;
    text-transform: uppercase;
    border-bottom: 1px solid var(--linkColor);
    text-align: left !important;
}
/*#endregion*/

/*#region cookies*/
#cookies {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 1em;
    background: white;
    color: black;
    text-align: center;
    z-index: 1000;
}

    #cookies.active {
        display: block;
    }

    #cookies > div {
        display: inline-block;
        text-align: center;
        background: linear-gradient(var(--linkColor),var(--linkColorGradient));
        color: white;
        padding: 0.5em 2em;
        cursor: pointer;
        margin-left: 1em;
    }

        #cookies > div:hover {
            opacity: 0.8;
        }

    #cookies > a {
        color: var(--linkColor);
        text-decoration: none;
    }

        #cookies > a:hover {
            text-decoration: underline;
        }
/*#endregion*/

/*#region logo*/
#logo {
    display: block;
    position: absolute;
    top: calc(0.7rem * 2.6);
    left: max(1em, calc((100% - var(--maxWidth)) / 2));
    text-align: left;
    font-family: 'Oswald', sans-serif;
    z-index: 5;
}

    #logo > a {
        display: block;
        border: 0;
        position: relative;
        box-sizing: border-box;
        padding-left: var(--logoPaddingLeft);
        text-decoration: none;
        pointer-events:auto !important;
    }
    #logo > a > * {
        pointer-events:none !important;
    }

        #logo > a > div.logoTitle {
            display: block;
            color: var(--linkColor);
            font-family: 'BioRhyme', serif;
            font-weight: bold;
            font-size: 2em;
            line-height: 1em;
            padding-left: 1em;
            margin-top: 0.15em;
        }

        #logo > a > div.logoSubtitle {
            position: relative;
            display: grid;
            margin-left: 1em;
            font-size: 0.8em;
        }

            #logo > a > div.logoSubtitle > div {
                display: block;
                color: white;
                display: block;
                text-align: center;
                grid-area: 1 / 1 / 2 / 2;
                width: 100%;
                padding: 0 1.8em 0 1.9em;
                z-index: 2;
                box-sizing: border-box;
            }

            #logo > a > div.logoSubtitle:after {
                content: '';
                display: block;
                background: var(--linkColor);
                display: block;
                text-align: center;
                grid-area: 1 / 1 / 2 / 2;
                z-index: 1;
                -webkit-transform: skew(-30deg);
                -moz-transform: skew(-30deg);
                -o-transform: skew(-30deg);
                width: 100%;
            }

        #logo > a > img {
            position: absolute;
            display: block;
            left: 0;
            height: 3.5em;
            top: 0.05em;
            z-index: 3;
        }

/*#endregion*/

/*#region menu*/
nav {
    display: block;
    width: 100%;
    z-index: 100;
    pointer-events: none;
    position: fixed;
    top: var(--topNav);
    left: 0;
}

    nav > div > #menuBig {
        display: block;
        list-style: none;
        padding: 0;
        margin: 0;
        background: white;
        position: fixed;
        pointer-events: auto;
        top: calc(2.6em * 0.7 + var(--topNav));
        margin: 0;
        width: 100%;
        padding: 0 max(1em, calc((100% - var(--maxWidth)) / 2));
        box-sizing: border-box;
        text-align: right;
        height: 4rem;
    }


        nav > div > #menuBig > li:not(#logo) {
            display: inline-block;
            position: relative;
        }

            nav > div > #menuBig > li:not(#logo) > a {
                display: grid;
                height: 4rem;
                width: auto;
                line-height: 4rem;
                vertical-align: middle;
                text-decoration: none;
                color: black;
                position: relative;
                align-items: center;
            }

                nav > div > #menuBig > li:not(#logo) > a > div {
                    display: block;
                    text-align: center;
                    grid-area: 1 / 1 / 2 / 2;
                    height: 4rem;
                    line-height: 4rem;
                    text-decoration: none;
                    color: #333;
                    align-items: center;
                    width: 100%;
                    padding: 0 1.5em;
                    box-sizing: border-box;
                    z-index: 2;
                    transition: color 0.25s ease-in-out;
                }

                nav > div > #menuBig > li:not(#logo) > a:after {
                    display: block;
                    grid-area: 1 / 1 / 2 / 2;
                    content: '';
                    height: 4rem;
                    width: 100%;
                    background: linear-gradient(var(--linkColorGradient), var(--linkColor) 50%);
                    line-height: 4rem;
                    z-index: 1;
                    -webkit-transform: skew(-30deg);
                    -moz-transform: skew(-30deg);
                    -o-transform: skew(-30deg);
                    opacity: 0;
                    transition: opacity 0.25s ease-in-out;
                }

            nav > div > #menuBig > li:not(#logo):hover > a:after {
                opacity: 1;
            }

            nav > div > #menuBig > li:not(#logo):hover > a > div {
                color: white;
            }

            nav > div > #menuBig > li:not(#logo) > div {
                display: none;
                position: absolute;
                padding: 0.5em;
                top: 4em;
                left: -2em;
            }

            nav > div > #menuBig > li:not(#logo):hover > div {
                display: block;
            }

            nav > div > #menuBig > li:not(#logo) > div > ul {
                display: block;
                background: linear-gradient(var(--linkColorGradient), var(--linkColor) 50%);
                color: white;
                padding: 1em;
                list-style: none;
                text-align: left;
                min-width: 12em;
            }

                nav > div > #menuBig > li:not(#logo) > div > ul > li {
                    display: block;
                }

                    nav > div > #menuBig > li:not(#logo) > div > ul > li > a {
                        color: white;
                        display: block;
                        text-decoration: none;
                        padding: 0.5em 1em 0.5em 1em;
                    }

                        nav > div > #menuBig > li:not(#logo) > div > ul > li > a:hover {
                            color: var(--linkColor);
                            background: white;
                        }

                        nav > div > #menuBig > li:not(#logo) > div > ul > li > a.extLink {
                            padding-right: 2em;
                            background-image: url('../img/externalLink.svg');
                            background-repeat: no-repeat;
                            background-size: 1em;
                            background-position: calc(100% - 0.5em) center;
                        }

                            nav > div > #menuBig > li:not(#logo) > div > ul > li > a.extLink:hover {
                                background-image: var(--externalLinkHoverSVG);
                            }

    nav > div > #menuSmall {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
        background: #999;
        top: var(--topNav);
        position: fixed;
        pointer-events: auto;
        width: 100%;
        text-align: right;
        font-size: 0.7rem;
        height: 2.6em;
        padding: 0 max(1rem, calc((100% - var(--maxWidth)) / 2));
        box-sizing: border-box;
    }


        nav > div > #menuSmall > li:not(#logo) {
            display: inline-block;
        }

            nav > div > #menuSmall > li:not(#logo) > a {
                color: white;
                text-decoration: none;
                text-transform: uppercase;
                margin-left: 2em;
                line-height: 2.6em;
                vertical-align: middle;
                font-family: 'Oswald', sans-serif;
            }

        nav > div > #menuSmall > li.tra {
            display: inline-block;
            position: relative;
            direction: rtl;
        }

            nav > div > #menuSmall > li.tra > div {
                display: none;
                position: absolute;
                background: linear-gradient(var(--linkColorGradient), var(--linkColor) 50%);
                color: white !important;
                padding: 1.5em;
            }

                nav > div > #menuSmall > li.tra > div select {
                    width: 100%;
                    padding: 0.5em 0;
                }

                nav > div > #menuSmall > li.tra > div > img {
                    display: block;
                    margin: 0 auto;
                }

                nav > div > #menuSmall > li.tra > div .goog-te-gadget {
                    color: white;
                }

                nav > div > #menuSmall > li.tra > div .VIpgJd-ZVi9od-l4eHX-hSRGPd,
                nav > div > #menuSmall > li.tra > div .VIpgJd-ZVi9od-l4eHX-hSRGPd:link,
                nav > div > #menuSmall > li.tra > div .VIpgJd-ZVi9od-l4eHX-hSRGPd:visited,
                nav > div > #menuSmall > li.tra > div .VIpgJd-ZVi9od-l4eHX-hSRGPd:hover,
                nav > div > #menuSmall > li.tra > div .VIpgJd-ZVi9od-l4eHX-hSRGPd:active {
                    color: white;
                }

            nav > div > #menuSmall > li.tra:hover > div {
                display: block;
            }
/*#endregion*/

/*#region content*/
#content {
    display: grid;
    width: 100%;
    padding: 0 max(1em, calc((100% - var(--maxWidth)) / 2));
    box-sizing: border-box;
    grid-template-columns: 15em auto;
    grid-column-gap: 2em;
}

#heroWrapper {
    display: block;
    width: 100%;
    padding: 0 max(1em, calc((100% - var(--maxWidth)) / 2));
    box-sizing: border-box;
}
/*#endregion*/

/*#region aside*/
#content > aside {
    grid-area: 1 / 1 / 2 / 2;
    padding-top: 1em;
}

#content > section {
    grid-area: 1 / 2 / 2 / 3;
    padding-top: 1em;
}

body.noCol > #content > section {
    grid-area: 1 / 1 / 2 / 3;
}

#content > aside .imgLink {
    display: block;
    width: min(100%, 22em);
    margin: 0 auto;
    border: 0;
    margin-top: 1em;
}

    #content > aside .imgLink:hover {
        opacity: 0.8;
    }

    #content > aside .imgLink > img {
        display: block;
        width: 100%;
    }

#content > aside .dynamicLink {
    display: grid;
    width: 100%;
    border: 0;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    height: 10em;
    width: min(100%, 22em);
    margin: 0 auto;
    margin-top: 1em;
    text-decoration: none;
    background: linear-gradient(var(--linkColor),var(--linkColorGradient));
    box-sizing: border-box;
    padding: 0 0.5em;
    position: relative;
    color: white;
    text-shadow: 0 1px 0 black;
    overflow: hidden;
}

    #content > aside .dynamicLink > div {
        display: grid;
        grid-template-columns: 25% calc(75% - 0.4em);
        grid-template-rows: 100%;
        grid-column-gap: 0.4em;
        height: 100%;
        width: 100%;
        position: relative;
    }

        #content > aside .dynamicLink > div > div:nth-child(1) * {
            display: block;
            max-height: 100%;
        }

        #content > aside .dynamicLink > div > div:nth-child(1) * {
            z-index: 2;
        }

        #content > aside .dynamicLink > div > .logoLink {
            display: block;
            height: 100%;
            background: var(--logo);
            width: 100%;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
        }

        #content > aside .dynamicLink > div > :nth-child(2) {
            box-sizing: border-box;
            padding: 0 0.5em;
            display: grid;
            width: 100%;
            height: 100%;
            font-size: 0.9rem;
            align-items: center;
            font-weight: lighter;
            text-align: right;
            z-index: 3;
        }

            #content > aside .dynamicLink > div > :nth-child(2) .big {
                font-size: 1.2em;
                font-weight: bold;
                margin-bottom: 0.2em;
            }

            #content > aside .dynamicLink > div > :nth-child(2) .action {
                display: inline-block;
                background: white;
                color: black;
                padding: 0.1em 1em;
                border-radius: 1em;
                font-weight: bold;
                margin-top: 0.5em;
                opacity: 0.8;
                text-shadow: none;
            }

    #content > aside .dynamicLink:hover > div > :nth-child(2) .action {
        opacity: 1;
    }

#content > aside > .dynamicLink > span.brillo {
    position: absolute;
    top: -10%;
    left: -80%;
    width: 50%;
    height: 130%;
    background: white;
    transform: skewX(-30deg);
    opacity: 0.2;
    filter: blur(5px);
    transition: none;
    transition-delay: 0s;
}

#content > aside > .dynamicLink:hover > span.brillo {
    left: 180%;
    transition-delay: 0.3s;
    transition: left 0.65s linear;
}

#content > aside > #asideProfileFighter {
    background: linear-gradient(#ed3d3c,black);
}

    #content > aside > #asideProfileFighter > span:not(.brillo) {
        position: absolute;
        top: -4rem;
        left: 0;
        font-family: Exo2H1;
        color: #ed3d3c;
        font-size: 13rem;
        opacity: 0.4;
        line-height: 1em;
        transform: rotate(15deg);
        transition: opacity 0.25s ease-in-out;
    }

        #content > aside > #asideProfileFighter > span:not(.brillo):nth-child(3) {
            top: 2.4rem;
            left: 0.4rem;
            color: black;
        }

    #content > aside > #asideProfileFighter:hover > span:not(.brillo) {
        opacity: 0.8;
    }

#content > aside > #asideLicense {
    background: var(--fondo), linear-gradient(var(--linkColor),var(--linkColorGradient));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
}

#content > aside > #asideFormation {
    background: var(--fondo), linear-gradient(var(--linkColor),var(--linkColorGradient));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
}

    #content > aside > #asideFormation img {
        opacity: 0.8;
        display: block;
        z-index: 1;
        margin-left: -3em;
        transform: rotateY(180deg);
    }
/*#endregion*/

/*#region footer*/
footer {
    display: block;
    width: 100%;
    padding: 0 max(1em, calc((100% - var(--maxWidth)) / 2));
    box-sizing: border-box;
    padding-top: 1em;
    padding-bottom: 2em;
    margin-top: 4em;
    background: rgba(0,0,0,0.5);
    padding-bottom: 6em;
}

    footer #footerCols {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%,15em), 1fr));
        grid-column-gap: 1em;
        grid-row-gap: 2em;
        width: 100%;
        padding-top: 1em;
    }

    footer a.footerLogo {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 10em;
        background: var(--logo) no-repeat;
        background-size: contain;
        box-sizing: content-box;
        background-position: center center;
    }

    footer > #footerCols > .contact > p:not(:nth-child(2)) {
        font-weight: lighter;
    }

    footer > #footerCols > div > a {
        display: block;
    }

    footer h5:not(:nth-child(1)) {
        margin-top: 1em;
    }

    footer > #sponsors {
        display: block;
        text-align: center;
        width: 100%;
        margin: 2em 0;
    }

        footer > #sponsors a {
            display: inline-block;
            margin: 1em;
            max-width: 10em;
            max-height: 5em;
            opacity: 0.8;
        }

            footer > #sponsors a:hover {
                opacity: 1;
            }

            footer > #sponsors a img {
                display: block;
                width: 100%;
                height: 100%;
            }

    footer > #advertising {
        font-weight: lighter;
        font-size: 0.9rem;
        margin-bottom: 2em;
        text-align: justify;
    }

    footer > #footerEnd {
        display: grid;
        width: 100%;
        grid-template-columns: 50% 50%;
    }

        footer > #footerEnd > :nth-child(1) {
            display: block;
            width: 100%;
            text-align: left;
            font-weight: lighter;
            font-size: 0.9rem;
        }

        footer > #footerEnd > :nth-child(2) {
            display: block;
            width: 100%;
            text-align: right;
            font-size: 0.9rem;
        }

    footer a {
        text-decoration: none;
        color: white;
    }

        footer a:hover {
            text-decoration: underline;
        }

    footer > #footerEnd > :nth-child(2) > a {
        margin-left: 1em;
    }

/*#endregion*/
/*#region events */
.event {
    width: 100%;
    display: grid;
    grid-template-rows: 30vh auto;
    height: auto;
    background: #fff;
}

    .event > div:nth-child(1) {
        display: grid;
        height: 30vh;
        position: relative;
        width: 100%;
        overflow: hidden;
        background: #000;
    }

        .event > div:nth-child(1):before {
            content: '';
            display: block;
            background-image: var(--fondoEvento);
            background-size: cover;
            background-position: center center;
            width: 100%;
            height: 30vh;
            grid-area: 1 / 1 / 2 / 2;
            filter: blur(0.2rem);
            opacity: 0.6;
        }

        .event > div:nth-child(1) > div {
            display: grid;
            position: relative;
            grid-area: 1 / 1 / 2 / 2;
            align-items: center;
            justify-content: center;
            max-width: 100%;
            max-height: 30vh;
        }

            .event > div:nth-child(1) > div > img {
                display: block;
                max-width: 100%;
                max-height: 30vh;
            }

    .event > div:nth-child(2) {
        display: grid;
        height: auto;
        grid-template-rows: 0.8em auto 2.5em;
        grid-row-gap: 1em;
        position: relative;
        width: 100%;
        overflow: hidden;
        background: white;
        box-sizing: border-box;
        padding: 1em;
        color: #333;
    }

        .event > div:nth-child(2) > div.dateName {
            display: grid;
            grid-template-columns: 50% 50%;
            width: 100%;
            font-size: 0.8em;
            position: relative;
            width: 100%;
            height: 1em;
        }

            .event > div:nth-child(2) > div.dateName > div:nth-child(1) {
                color: red;
                text-align: left;
            }

            .event > div:nth-child(2) > div.dateName > div:nth-child(2) {
                color: #333;
                text-align: right;
            }

        .event > div:nth-child(2) > h2 {
            display: block;
            margin: 0;
            padding: 0;
        }
/*#endregion*/

/*#region fighter*/
.fighter {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 100%;
    align-items: end;
    height: var(--fighterHeight);
    margin-top: calc(var(--fighterHeight) * -0.25);
    pointer-events: none;
}

    .fighter .fighterBckg {
        display: block;
        grid-area: 1 / 1 / 2 / 2;
        background: rgba(255,255,255,0.9);
        transform: skewX(-30deg);
        height: calc(var(--fighterHeight) * 0.7);
        z-index: 1;
    }

    .fighter .fighterContent {
        display: grid;
        grid-area: 1 / 1 / 2 / 2;
        z-index: 2;
        grid-template-rows: calc(var(--fighterHeight) - 40px) 40px;
        grid-template-columns: 30% calc(70% - 0.5em);
        grid-column-gap: 0.5em;
        align-items: end;
        height: var(--fighterHeight);
    }


        .fighter .fighterContent .fighterPhoto {
            display: block;
            grid-area: 1 / 1 / 2 / 2;
            height: 100%;
            width: 100%;
        }

        .fighter .fighterContent .fighterNombre {
            --flagWidth: 1.9em;
            --flagHeight: 1.3em;
            display: block;
            grid-area: 1 / 2 / 2 / 3;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            padding-top: calc(var(--fighterHeight) * 0.30);
            padding-left: calc(var(--flagWidth) + 0.5em);
            position: relative;
        }

            .fighter .fighterContent .fighterNombre > div {
                display: grid;
                align-items: center;
                width: 100%;
                height: 100%;
            }

            .fighter .fighterContent .fighterNombre h3 {
                padding: 0;
                margin: 0;
                color: var(--linkColor);
                text-transform: uppercase;
                font-size: 1em;
            }

            .fighter .fighterContent .fighterNombre h4 {
                padding: 0;
                margin: 0;
                color: black;
                font-size: 0.7em;
            }

            .fighter .fighterContent .fighterNombre .fighterFlag {
                display: block;
                width: var(--flagWidth);
                height: var(--flagHeight);
                position: absolute;
                top: calc(var(--fighterHeight) * 0.30 + ((var(--fighterHeight) * 0.7 - 40px) / 2) - (var(--flagHeight) / 2));
                left: 0;
            }

        .fighter .fighterContent .fighterButton {
            display: block;
            grid-area: 2 / 1 / 3 / 3;
            height: 100%;
            width: 100%;
            margin-left: calc(-0.35 * var(--fighterHeight) / tan(60deg));
            pointer-events: auto;
        }

            .fighter .fighterContent .fighterButton a.fightersrec {
                width: calc(100% - 6px);
                max-width: calc(100% - 6px);
                box-sizing: border-box;
                height: 40px;
                margin-top: -2px;
                margin-left: 15px;
            }

        .fighter .fighterContent .fighterPhoto img {
            display: block;
            height: 100%;
        }
/*#endregion*/

#body_topFighters > div {
    --fighterHeight: 10em;
    width: 90%;
    padding: 0 5%;
    margin-top: calc(var(--fighterHeight) * 0.25);
}

#body_topFighters > h2 {
    margin-top: 3em;
}
/*#region eventsAuto */
.eventAuto {
    width: 100%;
    display: grid;
    grid-template-rows: 30vh auto;
    height: auto;
    background: #fff;
    position: relative;
}

    .eventAuto > div:nth-child(1) {
        display: block;
        height: 30vh;
        position: relative;
        width: 100%;
        overflow: hidden;
        background: #000;
        background-image: url('/img/bgring.jpeg');
        background-size: cover;
        background-position: center center;
    }

        .eventAuto > div:nth-child(1) > img:nth-child(1) {
            display: block;
            position: absolute;
            right: 55%;
            height: 90%;
            bottom: 0;
            z-index: 2;
        }

        .eventAuto > div:nth-child(1) > img:nth-child(2) {
            display: block;
            position: absolute;
            left: 55%;
            height: 90%;
            bottom: 0;
            z-index: 2;
        }

        .eventAuto > div:nth-child(1) > .texto {
            display: block;
            position: absolute;
            left: 0.5em;
            width: calc(100% - 1em);
            color: white;
            top: 0.5em;
            z-index: 5;
            text-shadow: 0 1px 0 black, 1px 0 0 black, 1px 1px 0 black, 0 -1px 0 black, -1px 0 0 black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
            text-align: center;
            font-family: 'BioRhyme', serif;
        }

        .eventAuto > div:nth-child(1) > .logo {
            display: block;
            position: absolute;
            width: 20%;
            height: 0;
            padding-top: 20%;
            background: var(--logo);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center center;
            bottom: 1em;
            left: 40%;
            z-index: 6;
        }

        .eventAuto > div:nth-child(1) > .texto > .title {
            font-size: 1.2em;
        }

        .eventAuto > div:nth-child(1) > .texto > .subtitle {
            font-family: Oswald;
            font-size: 1.3em;
            text-shadow: 0 1px 0 white, 1px 0 0 white, 1px 1px 0 white, 0 -1px 0 white, -1px 0 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
            color: black;
        }

        .eventAuto > div:nth-child(1) > .texto > .subtitle2 {
            font-size: 0.9em;
            font-family: Oswald;
            color: var(--linkColor);
            text-shadow: 0 1px 0 black, 1px 0 0 black, 1px 1px 0 black, 0 -1px 0 black, -1px 0 0 black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
        }

        .eventAuto > div:nth-child(1):after {
            content: '';
            display: block;
            position: absolute;
            width: 5em;
            height: 100%;
            border-bottom: 80em solid rgba(255,255,255,0.25);
            border-left: 3em solid transparent;
            border-top: 0 solid #575;
            border-right: 3em solid transparent;
            background-color: transparent;
            transform-origin: 100% 0%;
            -webkit-transform-origin: 100% 0%;
            /* -webkit-transition-timing: ease-in-out; */
            left: 40%;
            filter: blur(1em);
            -webkit-animation: move 10s infinite;
            top: -60em;
            z-index: 3;
        }

        .eventAuto > div:nth-child(1):before {
            content: '';
            display: block;
            position: absolute;
            width: 5em;
            height: 100%;
            border-bottom: 80em solid rgba(255,255,255,0.25);
            border-left: 4em solid transparent;
            border-top: 0 solid #575;
            border-right: 4em solid transparent;
            background-color: transparent;
            transform-origin: 100% 0%;
            -webkit-transform-origin: 100% 0%;
            -webkit-transform: rotate(40deg);
            /* -webkit-transition-timing: ease-in-out; */
            left: -20%;
            filter: blur(2em);
            -webkit-animation: move 8s infinite;
            -webkit-animation-delay: 4s;
            top: -60em;
        }

        .eventAuto > div:nth-child(1) > .f1,
        .eventAuto > div:nth-child(1) > .f2 {
            display: block;
            position: absolute;
            bottom: 1em;
            left: 0;
            background: #fff;
            color: black;
            padding: 0.5em;
            width: 60%;
            left: -20%;
            box-sizing: border-box;
            z-index: 4;
            transform: skewX(-30deg);
            font-size: 0.7em;
            border-right: 10px solid var(--linkColor);
            border-left: 10px solid var(--linkColor);
            padding-left: 20%;
            padding-right: 1em;
            text-align: right;
        }

            .eventAuto > div:nth-child(1) > .f1 > img,
            .eventAuto > div:nth-child(1) > .f2 > img {
                display: inline-block;
                height: 1em;
            }

            .eventAuto > div:nth-child(1) > .f1 > div,
            .eventAuto > div:nth-child(1) > .f2 > div {
                display: inline-block;
                width: 100%;
                height: 1em;
            }

        .eventAuto > div:nth-child(1) > .f2 {
            right: -20%;
            left: auto;
            padding-left: 1em;
            padding-right: 20%;
            text-align: left;
        }

@-webkit-keyframes move {
    0% {
        -webkit-transform: rotate(30deg);
    }

    50% {
        -webkit-transform: rotate(-30deg);
    }

    100% {
        -webkit-transform: rotate(30deg);
    }
}

.eventAuto > div:nth-child(2) {
    display: grid;
    height: auto;
    grid-template-rows: 0.8em auto 2.5em;
    grid-row-gap: 1em;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: white;
    box-sizing: border-box;
    padding: 1em;
    color: #333;
}

    .eventAuto > div:nth-child(2) > div.dateName {
        display: grid;
        grid-template-columns: 50% 50%;
        width: 100%;
        font-size: 0.8em;
        position: relative;
        width: 100%;
        height: 1em;
    }

        .eventAuto > div:nth-child(2) > div.dateName > div:nth-child(1) {
            color: red;
            text-align: left;
        }

        .eventAuto > div:nth-child(2) > div.dateName > div:nth-child(2) {
            color: #333;
            text-align: right;
        }

    .eventAuto > div:nth-child(2) > h2 {
        display: block;
        margin: 0;
        padding: 0;
    }
/*#endregion*/


/*#region grids */
.grid3 {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(min(100%,18em), 1fr));
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    width: 100%;
    padding-top: 1em;
}

.grid4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%,20em), 1fr));
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    width: 100%;
    padding-top: 1em;
}
/*#endregion*/

/*#region animacion scroll */
.reveal {
    position: relative;
    transform: translateY(50px);
    opacity: 0;
    transition: 1s all ease;
}

    .reveal.active {
        transform: translateY(0);
        opacity: 1;
    }
/*#endregion*/

/*#region boton fightersrec*/

.fightersrec {
    display: block;
    width: 65%;
    max-width: 14em;
    min-width: 11em;
    position: relative;
    background: black; /* Old browsers */
    transform: skewX(-30deg);
    font-family: Oswald;
    color: white !important;
    padding: 0.5em 2em;
    text-decoration: none;
    box-sizing: content-box;
    cursor: pointer;
    overflow: hidden;
    text-transform: uppercase;
    height: 2em;
    margin: 0 auto;
    font-size: 0.8em;
    text-align: center;
}

    .fightersrec > * {
        transform: skewX(30deg);
        display: inline-block;
        vertical-align: middle;
    }

    .fightersrec:before {
        content: '';
        display: Block;
        width: 250%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 70%;
        background: #ed3d3c;
        transition: left ease-in-out 0.5s;
    }

    .fightersrec:hover:before, .fightersrec:focus:before {
        left: -40%;
    }
/*#endregion*/

p {
    margin: 0;
    padding: 0;
}

@media (max-width:1000px) {
    /*#region menu*/

    body {
        padding-top: calc(4.3rem);
    }

        body::-webkit-scrollbar {
            display: none;
        }

        body.menuActive {
            height: 100dvh;
            overflow-Y: hidden;
            background: transparent;
        }

        body > nav {
            display: fixed;
            top: 0;
            left: 0;
            overflow-y: hidden;
            height: calc(100dvh - 4.3rem) !important;
            width: 100%;
            overflow-x: hidden;
            z-index: 100;
            background: transparent;
            pointer-events: none;
            top: -100vh;
        }

            body > nav > div:nth-child(2) {
                display: fixed;
                top: 4.3rem;
                left: 0;
                overflow-y: hidden;
                height: calc(100dvh - 4.3rem) !important;
                width: 100%;
                overflow-x: hidden;
                z-index: 100;
                background: transparent;
                pointer-events: none;
                transition: top 0.25s ease-in-out;
                top: -100vh;
            }

        body.menuActive > nav > div:nth-child(2) {
            position: fixed;
            pointer-events: auto;
            background: var(--fondo), linear-gradient(var(--linkColor),var(--linkColorGradient));
            background-size: cover;
            box-sizing: border-box;
            overflow-y: scroll;
            top: 4.3rem;
            padding-top: 1rem;
        }

        body > nav:before {
            content: '';
            position: fixed;
            left: 0;
            top: var(--topNav);
            display: block;
            width: 100%;
            height: 4.3rem;
            background: white;
            z-index: 2000;
        }

        body > nav > span {
            content: '';
            position: fixed;
            right: 1.15rem;
            top: calc(1.15rem + var(--topNav));
            display: block;
            width: 2rem;
            height: 2rem;
            background: url('../img/menuIcon.svg');
            background-size: cover;
            background-position: center center;
            cursor: pointer;
            pointer-events: auto;
            z-index: 2001;
        }

            body > nav > span:hover {
                opacity: 0.5;
            }

        body > nav > div > #menuSmall {
            display: none;
        }

        body.menuActive > nav > div > #menuSmall {
            display: block;
            position: relative;
            height: auto;
            background: transparent;
        }

        body > nav > #logo {
            position: fixed;
            z-index: 2002;
            top: 0;
        }

        body > nav > div > #menuBig {
            display: block;
            top: var(--topNav);
            left: 0;
            position: relative;
            height: auto;
            background: transparent;
        }

        body.menuActive > nav > div > ul#menuBig > li:not(#logo) > div {
            display: block;
            top: 0;
            left: 0;
            position: relative;
            height: auto;
            background: transparent;
        }

            body.menuActive > nav > div > ul#menuBig > li:not(#logo) > div > ul {
                background: transparent;
            }

        body > nav > div > #menuBig > li:not(#logo) {
            display: none;
            width: 100%;
        }

        body.menuActive > nav > div > #menuBig > li:not(#logo) {
            display: block;
            text-align: left;
        }

            body.menuActive > nav > div > #menuBig > li:not(#logo) > a {
                display: block;
                text-align: left;
                height: 3rem;
                line-height: 3rem;
            }

                body.menuActive > nav > div > #menuBig > li:not(#logo) > a:hover {
                    background: white;
                    color: var(--linkColor);
                }

                body.menuActive > nav > div > #menuBig > li:not(#logo) > a > div {
                    transition: none;
                    height: 3rem;
                    line-height: 3rem;
                }

                body.menuActive > nav > div > #menuBig > li:not(#logo) > a:hover > div {
                    color: var(--linkColor);
                }

                body.menuActive > nav > div > #menuBig > li:not(#logo) > a > div {
                    display: block;
                    text-align: left;
                    color: white;
                    padding-top: 0;
                    padding-bottom: 0;
                    margin-top: 0;
                    margin-bottom: 0;
                }

            body.menuActive > nav > div > #menuBig > li:not(#logo) > div {
                padding-top: 0;
                padding-bottom: 0;
                margin-top: 0;
                margin-bottom: 0;
            }

                body.menuActive > nav > div > #menuBig > li:not(#logo) > div > ul {
                    padding-top: 0;
                    padding-bottom: 0;
                    margin-top: 0;
                    margin-bottom: 0;
                }

                    body.menuActive > nav > div > #menuBig > li:not(#logo) > div > ul > li > a {
                        font-weight: lighter;
                    }

            body.menuActive > nav > div > #menuBig > li:not(#logo) > a:after {
                display: none;
            }

        body.menuActive > nav > div > #menuSmall {
            border-top: 1px solid #fff;
            padding-top: 1em;
            padding-bottom: 1em;
            margin-top: 1em;
        }

            body.menuActive > nav > div > #menuSmall > li:not(#logo) {
                display: block;
                width: 100%;
                height: 3rem;
                line-height: 3rem;
                padding: 0 0em;
                box-sizing: border-box;
            }

                body.menuActive > nav > div > #menuSmall > li:not(#logo) > a {
                    text-align: left;
                    display: block;
                    width: 100%;
                    height: 3rem;
                    line-height: 3rem;
                    padding: 0 1.5em;
                    box-sizing: border-box;
                    margin: 0;
                    font-size: 1rem;
                }

                    body.menuActive > nav > div > #menuSmall > li:not(#logo) > a:hover {
                        background: #fff;
                        color: var(--linkColor);
                    }

            body.menuActive > nav > div > #menuSmall > li.tra {
                height: auto !important;
            }

                body.menuActive > nav > div > #menuSmall > li.tra > a {
                    display: none !important;
                }

                body.menuActive > nav > div > #menuSmall > li.tra > div {
                    display: block;
                    position: relative;
                    background: transparent;
                    color: white !important;
                    padding: 0.5em;
                    height: auto !important;
                    display: grid !important;
                    direction: ltr;
                    grid-template-columns: 6em auto;
                }

                    body.menuActive > nav > div > #menuSmall > li.tra > div select {
                        width: 100%;
                        padding: 0.5em 0;
                    }

                    body.menuActive > nav > div > #menuSmall > li.tra > div > img {
                        display: block;
                        margin: 0 auto;
                    }


        body.menuActive > *:not(nav):not(.skiptranslate) {
            overflow-Y: hidden;
            pointer-events: none;
        }
    /*#endregion*/

    /*#region content*/
    #content {
        display: block;
    }

        #content > aside {
            display: block;
            width: 100%;
            text-align: center;
        }

        #content > section {
            display: block;
        }
    /*#endregion*/
}

body.GBF .onlyFIDAM {
    display: none !important;
}

body.FIDAM .onlyGBF {
    display: none !important;
}

/*#region PDFlink*/
.PDFlink {
    display: block;
    margin: 1.5em 0;
    font-size: 1.1rem;
    position: relative;
    padding-left: 3em;
}

    .PDFlink > img {
        display: block;
        height: 1em;
        width: 2em;
        margin-right: 1em;
        position: absolute;
        left: 0;
        top: 0.3em;
    }

    .PDFlink > a {
        margin-left: 0.5em;
        padding-left: 0.5em;
        color: var(--linkColor);
        text-decoration: none;
        text-transform: uppercase;
        border-left: 1px solid var(--linkColor);
    }

        .PDFlink > a:hover {
            text-decoration: underline;
        }
/*#endregion*/
.nofighter {
    color: lightgray;
    text-shadow: 0 1px 0 black;
    font-style: italic;
    font-size: 1.1em;
    display: block;
    text-align: center;
}

/*#region hero slider */

#heroWrapper {
    display: block;
    width: 100%;
    padding: 0;
    max-width: 100%;
    pointer-events: none;
}

#heroWrapperBox {
    display: block;
    --heroHeight: max(50vh, 400px);
    height: var(--heroHeight);
    position: relative;
    overflow: hidden;
    background: url('/img/bckgChampions.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

    #heroWrapperBox > div:nth-child(1):after {
        content: '';
        display: block;
        position: absolute;
        width: 15em;
        height: 100%;
        border-bottom: 80em solid rgba(255,255,255,0.25);
        border-left: 3em solid transparent;
        border-top: 0 solid #575;
        border-right: 3em solid transparent;
        background-color: transparent;
        transform-origin: 100% 0%;
        -webkit-transform-origin: 100% 0%;
        /* -webkit-transition-timing: ease-in-out; */
        left: 40%;
        filter: blur(2em);
        -webkit-animation: move 10s infinite;
        top: -60em;
        z-index: 3;
    }

    #heroWrapperBox > div:nth-child(1):before {
        content: '';
        display: block;
        position: absolute;
        width: 25em;
        height: 100%;
        border-bottom: 80em solid rgba(255,255,255,0.15);
        border-left: 4em solid transparent;
        border-top: 0 solid #575;
        border-right: 4em solid transparent;
        background-color: transparent;
        transform-origin: 100% 0%;
        -webkit-transform-origin: 100% 0%;
        -webkit-transform: rotate(40deg);
        /* -webkit-transition-timing: ease-in-out; */
        right: 20%;
        filter: blur(3em);
        -webkit-animation: move 8s infinite;
        -webkit-animation-delay: -4s;
        top: -60em;
    }

    #heroWrapperBox:before {
        display: block;
        height: var(--heroHeight);
        width: 100%;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        overflow: hidden;
        background: url('/img/bckgChampions.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        filter: blur(5px);
    }

    #heroWrapperBox > * {
        display: block;
        max-height: var(--heroHeight);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 2;
    }

    #heroWrapperBox > canvas:nth-child(3) {
        z-index: 3;
    }

#heroSection_sliderFighters {
    display: block;
    width: 100%;
    height: var(--heroHeight);
    margin-top: 1em;
    overflow: hidden;
}

    #heroSection_sliderFighters .sliderFighter {
        display: block;
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        transition: opacity 0.35s ease-in-out;
    }

        #heroSection_sliderFighters .sliderFighter.active {
            opacity: 1;
            transition-delay: 0.5s;
            pointer-events: auto;
        }

        #heroSection_sliderFighters .sliderFighter .fighterContent {
            display: block;
            width: 100%;
            height: 100%;
        }

            #heroSection_sliderFighters .sliderFighter .fighterContent .fighterPhoto {
                display: block;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding-top: 3vh;
            }

            #heroSection_sliderFighters .sliderFighter .fighterContent .fighterNombre {
                display: none;
            }

        #heroSection_sliderFighters .sliderFighter img {
            display: block;
            height: 100%;
            margin: 0 auto;
        }

#heroWrapper #sliderFightersName {
    --slidderNameHeight: calc(var(--heroHeight) * 0.32);
    display: block;
    width: 100%;
    height: var(--slidderNameHeight);
    bottom: 1em;
    position: absolute;
    z-index: 10;
    background: var(--flag);
    background-size: contain;
    background-position: center;
}

    #heroWrapper #sliderFightersName:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(rgba(255,255,255,0.9), rgba(155,155,155,0.9));
        z-index: 0;
    }

    #heroWrapper #sliderFightersName > div {
        display: grid;
        height: var(--slidderNameHeight);
        color: black;
        width: 100%;
        padding: 0 max(1em, calc((100% - var(--maxWidth)) / 2));
        box-sizing: border-box;
        grid-template-columns: 3em auto 3em;
        grid-template-rows: var(--slidderNameHeight);
        grid-column-gap: 0.5em;
        align-items: center;
        z-index: 1;
        position: absolute;
    }

        #heroWrapper #sliderFightersName > div > div:nth-child(1),
        #heroWrapper #sliderFightersName > div > div:nth-child(3) {
            text-align: left;
            cursor: pointer;
            opacity: 0.8;
            grid-area: 1 / 1 / 2 / 2;
            pointer-events: auto;
        }

            #heroWrapper #sliderFightersName > div > div:nth-child(1):hover,
            #heroWrapper #sliderFightersName > div > div:nth-child(3):hover {
                opacity: 1;
            }

            #heroWrapper #sliderFightersName > div > div:nth-child(1) img,
            #heroWrapper #sliderFightersName > div > div:nth-child(3) img {
                display: inline-block;
                vertical-align: middle;
                width: 100%;
            }

        #heroWrapper #sliderFightersName > div > div.nameSlider {
            text-align: center;
            grid-area: 1 / 1 / 2 / 4;
            pointer-events: none;
        }

            #heroWrapper #sliderFightersName > div > div.nameSlider a {
                pointer-events: auto;
            }

        #heroWrapper #sliderFightersName > div > div:nth-child(3) {
            text-align: right;
            grid-area: 1 / 3 / 2 / 4;
        }

        #heroWrapper #sliderFightersName > div > div.nameSlider {
            text-align: center;
            display: grid;
            grid-template-rows: auto auto 3em;
            grid-template-columns: 100%;
            align-items: end;
        }

            #heroWrapper #sliderFightersName > div > div.nameSlider > div:nth-child(1) {
                text-align: center;
                font-size: 1.4em;
                font-weight: bold;
                text-transform: uppercase;
            }

            #heroWrapper #sliderFightersName > div > div.nameSlider > div:nth-child(1) {
                color: var(--linkColor);
                text-shadow: 0 1px 0 var(--letterShadow);
                font-weight: bold;
            }

            #heroWrapper #sliderFightersName > div > div.nameSlider > div:nth-child(2) {
                font-size: 0.9em;
                text-shadow: 0 1px 0 white;
                font-weight: bold;
            }

            #heroWrapper #sliderFightersName > div > div.nameSlider * {
                white-space: nowrap;
            }

            #heroWrapper #sliderFightersName > div > div.nameSlider img {
                display: inline-block;
                height: 1em;
            }

/*#endregion*/