@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    border: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
        text-decoration: none;
        color: inherit;
    }

button {
    margin: 0;
    padding: 0;
    background: none;
}

input:active,
    select:active,
    button:active,
    input:focus,
    select:focus,
    button:focus,
    input:visited,
    select:visited,
    button:visited {
        outline: 0;
    }

details summary {
        list-style: none;
    }

details summary::-webkit-details-marker {
            display: none;
        }

strong {
    font-weight: 600;
}

i {
    font-style: italic;
}

p {
    margin: 5px 0;
    line-height: 1.2;
}

ul li {
    display: block;
    list-style: none;
}

.splide__container{box-sizing:border-box;position:relative;}

.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important;}

.splide.is-initialized:not(.is-active) .splide__list{display:block;}

.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none;}

.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto;}

.splide:not(.is-overflow) .splide__pagination{display:none;}

.splide__progress__bar{width:0;}

.splide{position:relative;visibility:hidden;}

.splide.is-initialized,.splide.is-rendered{visibility:visible;}

.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;position:relative;}

.splide__slide img{vertical-align:bottom;}

.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px;}

.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}

.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none;}

.splide__toggle.is-active .splide__toggle__pause{display:inline;}

.splide__track{overflow:hidden;position:relative;z-index:0;}

@keyframes splide-loading{0%{transform:rotate(0);}to{transform:rotate(1turn);}}

.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}

.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0;}

.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1;}

.splide--rtl{direction:rtl;}

.splide__track--ttb>.splide__list{display:block;}

.splide__arrow{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1;}

.splide__arrow svg{fill:#000;height:1.2em;width:1.2em;}

.splide__arrow:hover:not(:disabled){opacity:.9;}

.splide__arrow:disabled{opacity:.3;}

.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px;}

.splide__arrow--prev{left:1em;}

.splide__arrow--prev svg{transform:scaleX(-1);}

.splide__arrow--next{right:1em;}

.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px;}

.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1;}

.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px;}

.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1;}

.splide__pagination__page:hover{cursor:pointer;opacity:.9;}

.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px;}

.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px;}

.splide__progress__bar{background:#ccc;height:3px;}

.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0);}

.splide__slide:focus{outline:0;}

@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px;}}

@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf;}}

@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px;}}

@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf;}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf;}}

.splide__toggle{cursor:pointer;}

.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px;}

.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px;}

.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer;}

.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000;}

.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em;}

.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1);}

.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto;}

.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1);}

.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%);}

.splide__arrows--ttb .splide__arrow--prev{top:1em;}

.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg);}

.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto;}

.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg);}

.splide__pagination--ttb{bottom:0;display:flex;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0;}

/*variables*/

:root {
    --animation-bg-scale: scale(1.05);
    --animation-bg-scale-duration: 3s;
}

:root {
    --screen__xxs: 320px;
    --screen__xs: 480px;
    --screen__s: 640px;
    --screen__m: 768px;
    --screen__l: 992px;
    --screen__xl: 1024px;
    --screen__xxl: 1440px;

    --content-max-width: 1260px;
}

@media only screen and (min-width: 641px) {
    .only-mobile {
        display: none;
    }
}

:root {
    --color-black: #000;
    --color-white: #fff;
    --color-creole: #0d0602;
    --color-mineshaft: #212121;
    --color-mineshaft-alt: #3f3f3f;
    --color-boulder: #757575;
    --color-blaze-orange: #ff7000;
    --color-mercury: #e4e4e4;

    --background-color: var(--color-creole);
    --text-color: var(--color-white);
    --background-color-alt: var(--color-mineshaft-alt);

    --primary__color: var(--color-blaze-orange);
    --primary__color-alt: var(--text-color);
    --secondary__color: var(--color-white);
    --secondary__color-alt: rgba(var(--secondary__color), 20%);

    --linear-background-color: linear-gradient(0deg, var(--background-color) 0%, rgba(0,0,0,.3) 15%, rgba(0,0,0,.3) 85%, var(--background-color) 100%);

    --color-red-youtube: red;
    --color-red-riotgames: #d32f2f;
    --color-blue-twitter: #1da1f2;
    --color-blue-facebook: #4267b2;
    --color-violet-discord: #7289da;
    --color-grey-github: #24292f;
}

html:has(#theme:checked) body {
        --background-color: #e1e1e1 !important;
        --text-color: var(--color-mineshaft) !important;
        --background-color-alt: var(--color-mercury) !important;
        --primary__color-alt: var(--text-color);
        --linear-background-color: linear-gradient(0deg, var(--background-color) 0%, hsla(0,0%,100%,.3) 15%, hsla(0,0%,100%,.3) 85%, var(--background-color) 100%);
    }

@font-face {
    font-family: Futura;
    src: url("../fonts/futura/Futura_Book_font.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Futura;
    src: url("../fonts/futura/Futura_Book_Italic_font.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: Futura;
    src: url("../fonts/futura/futura_medium_bt.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: Futura;
    src: url("../fonts/futura/Futura_Extra_Bold_font.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: Futura;
    src: url("../fonts/futura/futura_light_bt.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Muli;
    src: url("../fonts/muli/Muli-Regular.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: Muli;
    src: url("../fonts/muli/Muli-Italic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: Muli;
    src: url("../fonts/muli/Muli-Light.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Muli;
    src: url("../fonts/muli/Muli-Bold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: Muli;
    src: url("../fonts/muli/Muli-Bold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: Muli;
    src: url("../fonts/muli/Muli-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

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

:root {
    --f-family-futura: Futura, 'Arial', sans-serif;
    --f-family-muli: Muli, 'Arial', sans-serif;

    --primary__font-family: var(--f-family-futura);
    --secondary__font-family: var(--f-family-muli);
}

@keyframes scrollUpDown {
    0% {
        transform: translateY(-30%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes l26 {
    12.5% {
        box-shadow: 19px -19px 0 0, 38px -19px 0 0, 57px -19px 0 5px,
        19px 0 0 5px, 38px 0 0 0, 57px 0 0 5px,
        19px 19px 0 0, 38px 19px 0 0, 57px 19px 0 0;
    }
    25% {
        box-shadow: 19px -19px 0 5px, 38px -19px 0 0, 57px -19px 0 5px,
        19px 0 0 0, 38px 0 0 0, 57px 0 0 0,
        19px 19px 0 0, 38px 19px 0 5px, 57px 19px 0 0;
    }
    50% {
        box-shadow: 19px -19px 0 5px, 38px -19px 0 5px, 57px -19px 0 0,
        19px 0 0 0, 38px 0 0 0, 57px 0 0 0,
        19px 19px 0 0, 38px 19px 0 0, 57px 19px 0 5px;
    }
    62.5% {
        box-shadow: 19px -19px 0 0, 38px -19px 0 0, 57px -19px 0 0,
        19px 0 0 5px, 38px 0 0 0, 57px 0 0 0,
        19px 19px 0 0, 38px 19px 0 5px, 57px 19px 0 5px;
    }
    75% {
        box-shadow: 19px -19px 0 0, 38px -19px 0 5px, 57px -19px 0 0,
        19px 0 0 0, 38px 0 0 0, 57px 0 0 5px,
        19px 19px 0 0, 38px 19px 0 0, 57px 19px 0 5px;
    }
    87.5% {
        box-shadow: 19px -19px 0 0, 38px -19px 0 5px, 57px -19px 0 0,
        19px 0 0 0, 38px 0 0 5px, 57px 0 0 0,
        19px 19px 0 5px, 38px 19px 0 0, 57px 19px 0 0;
    }
}

:root {
    --icon-font-color: var(--primary__color);
    --icon-font-content: var(--icon-corner-right-down);
    --icon-font-size: 1rem;

    --icon-corner-right-down: "\e908";
    --icon-corner-right-up: "\e90e";
    --icon-arrow-down: "\e900";
    --icon-arrow-left: "\e901";
    --icon-arrow-right: "\e902";
    --icon-arrow-up: "\e903";
    --icon-chevron-down: "\e904";
    --icon-chevron-left: "\e905";
    --icon-chevron-right: "\e906";
    --icon-chevron-up: "\e907";
    --icon-menu: "\e909";
    --icon-search: "\e90a";
    --icon-sliders: "\e90b";
    --icon-tag: "\e90c";
    --icon-x: "\e90d";
}

/*components*/

.main-content {
    margin-top: 6.6rem;
}

.main-content:has(.section.fixed) {
        margin-top: 10.6rem;
    }

.main-content .section {
        margin-bottom: 2rem;
    }

.main-content .section .section-link {
            padding-top: 2rem;
        }

.main-content .section .section-link.center {
                text-align: center;
            }

.main-content .section.center {
            text-align: center;
        }

.main-content .section.fixed {
            position: fixed;
            width: 100vw;
        }

.main-content .grid-showcase-banner {
        height: 60vh;
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: center;
        justify-content: center;
        background-image: var(--background-image);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

.main-content .grid-showcase-banner .title,
        .main-content .grid-showcase-banner .subtitle {
            text-align: center;
            -webkit-backdrop-filter: brightness(40%);
                    backdrop-filter: brightness(40%);
            z-index: 2;
            width: 65vw;
            color: var(--color-white);
        }

@media only screen and (max-width: 768px) {

.main-content .grid-showcase-banner .title,
        .main-content .grid-showcase-banner .subtitle {
                width: calc(100vw - 4rem);
        }
            }

.main-content .grid-showcase-banner .title {
            padding-top: 1rem;
            text-align: center;
            font-size: 5rem;
        }

.main-content .grid-showcase-banner .subtitle {
            font-size: 2.5rem;
            font-style: italic;
            padding-bottom: 2rem;
        }

@media only screen and (max-width: 768px) {

.main-content .grid-showcase-banner {
            height: 40vh;
    }
        }

@media only screen and (min-width: 1025px) {
            .main-content .section.large {
                padding: 0 1rem;
            }

            .main-content .section:not(.full-width):not(.large) {
                max-width: var(--screen__xl);
                margin: 0 auto 2rem;
                padding: 0 1rem;
            }
}

@media only screen and (max-width: 1024px) {
            .main-content .section:not(.full-width) {
                padding: 0 2rem;
            }
}

a,
button {
    display: inline-block;
    transition: all 400ms ease-out;
}

a:not(.ghost):hover, button:not(.ghost):hover {
            color: var(--primary__color);
        }

a.ghost, button.ghost {
        position: relative;
    }

a.link, button.link {
        text-transform: uppercase;
        font-weight: 600;
    }

a.primary, button.primary {
        color: var(--primary__color);
    }

a.primary:hover, button.primary:hover {
            color: var(--primary__color-alt);
        }

a.inline, button.inline {
        display: inline;
        text-transform: none;
        position: relative;
        transition: all 400ms ease-out;
    }

a.inline:after, button.inline:after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            position: absolute;
            bottom: -2px;
            left: 0;
            transition: all 400ms ease-out;
            background-color: var(--text-color);
        }

a.inline:hover:after, button.inline:hover:after {
                width: 100%;
            }

a.btn, button.btn {
        padding: 8px 15px;
        border: 1px solid var(--primary__color);
        display: inline-block;
        position: relative;
        transition: color .3s ease;
    }

a.btn:after, button.btn:after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 100%;
            z-index: -1;
            transition: width .3s ease;
            background-color: var(--primary__color);
        }

a.btn:hover:after, button.btn:hover:after {
                width: 100%;
            }

a:hover, button:hover {
        cursor: pointer;
    }

button[disabled] {
        opacity: .5;
    }

button[disabled]:hover {
            cursor: not-allowed;
        }

button[disabled]:hover:after {
                width: 0;
            }

html h1,
    html h2,
    html h3,
    html h4 {
        text-transform: uppercase;
        font-weight: 600;
        font-family: var(--secondary__font-family);
    }

html .section-title,
    html .section-subtitle {
        margin: 50px 0 30px;
        position: relative;
    }

html .section-title:not(.no-line) .title > span, html .section-subtitle:not(.no-line) .title > span {
                    background-color: var(--background-color);
                    z-index: 1;
                    position: relative;
                }

html .section-title:not(.no-line):before,
            html .section-subtitle:not(.no-line):before,
            html .section-title:not(.no-line):after,
            html .section-subtitle:not(.no-line):after {
                content: '';
                width: 50%;
                height: 2px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }

html .section-title:not(.no-line):before, html .section-subtitle:not(.no-line):before {
                background: linear-gradient(to left, var(--text-color), var(--background-color));
                left: 0;
            }

html .section-title:not(.no-line):after, html .section-subtitle:not(.no-line):after {
                background: linear-gradient(to right, var(--text-color), var(--background-color));
                right: 0;
            }

html .section-title.center, html .section-subtitle.center {
            text-align: center;
        }

html .section-title.center .title > span, html .section-subtitle.center .title > span {
                    padding: 0 1rem;
                }

html .section-title.left, html .section-subtitle.left {
            text-align: left;
        }

html .section-title.left span, html .section-subtitle.left span {
                padding-right: 1rem;
            }

html .section-title.left:before, html .section-subtitle.left:before {
                display: none;
            }

html .section-title.left:not(.no-line):after, html .section-subtitle.left:not(.no-line):after {
                    width: 100%;
                    left: 0;
                }

html .section-title.primary, html .section-subtitle.primary {
            color: var(--primary__color);
        }

html .section-subtitle:before,
        html .section-subtitle:after {
            top: 59%;
        }

@media only screen and (min-width: 769px) {
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    h3 {
        font-size: 2rem;
    }

    h4 {
        font-size: 1.6rem;
    }
}

@media only screen and (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    h4 {
        font-size: 1.2rem;
    }
}

html .fullscreen-gallery {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1001;
        width: 100vw;
        height: 100vh;
    }

html .fullscreen-gallery:before {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            content: '';
            background-color: var(--color-black);
            opacity: .8;
            z-index: -1;
        }

html .fullscreen-gallery .close-gallery {
            position: absolute;
            display: block;
            right: 50px;
            top: 20px;
            width: 3.5rem;
            height: 3.5rem;
            background-color: var(--color-white);
            -webkit-mask: url(../img/svg/x.svg) no-repeat 50% 50%;
                    mask: url(../img/svg/x.svg) no-repeat 50% 50%;
            -webkit-mask-size: cover;
                    mask-size: cover;
            z-index: 1;
        }

html .fullscreen-gallery .close-gallery:hover {
                cursor: pointer;
            }

html .fullscreen-gallery .image-container {
            margin: 0 auto;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

html .fullscreen-gallery .image-container img {
                width: 95vw;
                display: block;
                position: relative;
                animation: fadeIn .5s ease-out forwards;
            }

html .fullscreen-gallery.visible {
            display: block;
        }

.card {
    display: grid;
    grid-template-rows: 100%;
    position: relative;
    overflow: hidden;
}

.card .card-bg {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: var(--background-image);
        min-height: 25rem;
        transition: all 400ms ease-out;
    }

@media only screen and (max-width: 768px) {

.card .card-bg {
            min-height: 18rem;
            background-position: top center;
    }
        }

.card .card-infos {
        background-color: var(--color-mineshaft);
        color: var(--color-white);
        text-align: center;
        position: absolute;
        bottom: 2px;
        width: calc(100% - 4px);
        left: 2px;
        padding: .5rem;
        box-sizing: border-box;
        overflow: hidden;
        transition: all .2s ease-out;
    }

.card .card-infos .name,
        .card .card-infos .title {
            text-transform: uppercase;
            font-weight: bold;
            display: block;
        }

.card .card-infos .date {
            display: block;
        }

.card .card-infos .name {
            font-size: 1.2rem;
        }

.card .card-infos .title,
        .card .card-infos .date {
            font-size: 1rem;
            color: var(--primary__color);
        }

.card.champion .card-infos .name:after {
                    content: '';
                    display: inline-block;
                    background-color: currentColor;
                    -webkit-mask-image: url("../img/svg/chevron-right.svg");
                            mask-image: url("../img/svg/chevron-right.svg");
                    -webkit-mask-position: center;
                            mask-position: center;
                    -webkit-mask-size: cover;
                            mask-size: cover;
                    -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                    width: .7rem;
                    height: .7rem;
                    padding-left: 1rem;
                    position: absolute;
                    top: .8rem;
                    transition: all .2s ease-out;
                    opacity: 0;
                    transform: translateX(-100%);
                }

.card.skin .card-infos .skin,
            .card.skin .card-infos .name {
                display: inline-block;
            }

.card.skin:hover {
            cursor: pointer;
        }

.card.prestige {
        overflow: visible;
    }

.card.prestige:after {
            content: '';
            height: 4rem;
            width: 4.3rem;
            background-image: url("../img/prestige.png");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            display: block;
            position: absolute;
            top: -7px;
            right: -6px;
        }

.card:hover .card-bg {
            transform: var(--animation-bg-scale);
            transition: all var(--animation-bg-scale-duration) ease-out;
        }

.card:hover .card-infos .name:after {
                    transform: translateX(0);
                    opacity: 1;
                }

.splide .splide__arrows .splide__arrow {
            border: 1px solid var(--color-mineshaft-alt);
            background-color: var(--background-color);
            opacity: 1;
        }

.splide .splide__arrows .splide__arrow svg {
                fill: var(--primary__color);
            }

.splide .splide__pagination .splide__pagination__page {
            background: var(--primary__color);
        }

.splide .splide__pagination .splide__pagination__page.is-active {
                background: var(--primary__color);
                opacity: 1;
            }

.section.search {
    top: 6.6rem;
    background: var(--background-color);
    z-index: 99;
    padding: 1rem;
    border-bottom: 1px solid var(--background-color-alt);
    display: grid;
    grid-template-columns: 1fr auto;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.section.search .input {
        padding: 0 2.5rem;
        position: relative;
    }

.section.search .input:before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: -3px;
            background-color: var(--text-color);
            -webkit-mask-image: url("../img/svg/search.svg");
                    mask-image: url("../img/svg/search.svg");
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: left;
                    mask-position: left;
            -webkit-mask-size: cover;
                    mask-size: cover;
            width: 2rem;
            height: 2rem;
        }

.section.search .input input {
            background-color: var(--background-color);
            padding: 0;
            font-size: 1.5rem;
            width: 100%;
            color: var(--text-color);
        }

.section.search .input label {
            display: none;
        }

.section.search .select {
        display: flex;
        align-items: center;
    }

.section.search .select select {
            background: var(--background-color);
            color: var(--text-color);
            font-size: 1.2rem;
        }

.section.search .select #order:after {
                content: '';
                display: inline-block;
                position: relative;
                background-color: var(--text-color);
                -webkit-mask-image: url("../img/svg/sort-alpha-down.svg");
                        mask-image: url("../img/svg/sort-alpha-down.svg");
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-position: left;
                        mask-position: left;
                -webkit-mask-size: cover;
                        mask-size: cover;
                height: 2rem;
                width: 2rem;
            }

.section.search .select #order[data-order="desc"]:after {
                    -webkit-mask-image: url("../img/svg/sort-alpha-up.svg");
                            mask-image: url("../img/svg/sort-alpha-up.svg");
                }

.section.search .select:before {
            content: '';
            display: inline-block;
            position: relative;
            background-color: var(--text-color);
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: left;
                    mask-position: left;
            -webkit-mask-size: cover;
                    mask-size: cover;
            height: 2rem;
            width: 1rem;
            -webkit-mask-image: url("../img/svg/sliders.svg");
                    mask-image: url("../img/svg/sliders.svg");
            padding-right: 1rem;
            left: -1rem;
        }

/*parts*/

.nav {
    width: 100%;
    top: 0;
    position: fixed;
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr auto;
    color: var(--color-white);
    background-color: var(--color-mineshaft);
    border-bottom: 2px solid var(--color-mineshaft-alt);
    box-sizing: border-box;
    z-index: 99;
    height: 5.5em;
}

.nav .nav-logo {
        padding: .5rem;
    }

.nav .nav-logo > img {
            max-height: 3.9rem;
        }

.nav .nav-menu {
        padding: 0 1rem;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
    }

.nav .nav-menu ul {
            display: flex;
            flex-direction: row;
            gap: 2rem;
            height: 100%;
        }

.nav .nav-menu ul li {
                text-transform: uppercase;
                font-weight: bold;
                height: 100%;
            }

.nav .nav-menu ul li > a {
                    position: relative;
                    height: 100%;
                    display: flex;
                    align-items: center;
                }

.nav .nav-menu ul li > a:after {
                        content: '';
                        width: 0;
                        height: 2px;
                        background-color: var(--primary__color);
                        transition: all .2s ease-out;
                        position: absolute;
                        bottom: -2px;
                        left: 0;
                    }

.nav .nav-menu ul li > a:hover:after {
                            width: 100%;
                        }

.nav .nav-menu .menu-toggle.close {
                position: absolute;
                top: 1rem;
                right: 3rem;
                background-color: var(--color-white);
                height: 3rem;
                width: 3rem;
                -webkit-mask-image: url("../img/svg/x.svg");
                        mask-image: url("../img/svg/x.svg");
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-size: cover;
                        mask-size: cover;
            }

.nav .nav-menu .menu-toggle.close:hover {
                    cursor: pointer;
                }

.nav .nav-adds {
        padding: 1rem .5rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

.nav .nav-adds .menu-toggle {
            background-color: var(--color-white);
            height: 2rem;
            width: 2rem;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-image: url('../img/svg/menu.svg');
                    mask-image: url('../img/svg/menu.svg');
        }

.nav .nav-adds .menu-toggle:hover {
                cursor: pointer;
            }

.nav .nav-adds .lang {
            position: relative;
        }

.nav .nav-adds .lang label {
                display: none;
            }

.nav .nav-adds .lang .select__flag {
                display: inline-block;
                width: 1rem;
                height: 1rem;
                pointer-events: none;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: .4rem;
                background-position: center;
                background-repeat: no-repeat;
                background-size: 1rem;
                background-image: url("../img/svg/lang.svg");
            }

.nav .nav-adds .lang .select__input {
                -webkit-appearance: none;
                   -moz-appearance: none;
                        appearance: none;
                border: 0;
                margin: 0;
                font-size: 1rem;
                width: 100%;
                height: 100%;
                padding: .5rem .5rem .5rem 1.8rem;
                box-shadow: inset 0 1px hsla(0,0%,100%,.1);
                border-radius: .375rem;
                transition: box-shadow .2s;
            }

.nav .nav-adds .lang .select__input:focus {
                    outline: none;
                }

.nav .nav-adds .lang:has(option[value="en"]:checked) .select__flag {
                    background-image: url('../img/svg/en.svg');
                }

.nav .nav-adds .lang:has(option[value="fr"]:checked) .select__flag {
                    background-image: url('../img/svg/fr.svg');
                }

.nav .nav-adds .theme input {
                display: none;
            }

.nav .nav-adds .theme .toggle {
                -webkit-mask-image: url("../img/svg/moon.svg");
                        mask-image: url("../img/svg/moon.svg");
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                height: 2rem;
                width: 2rem;
                display: block;
                position: relative;
                background-color: var(--color-white);
                -webkit-mask-position: center;
                        mask-position: center;
            }

.nav .nav-adds .theme .toggle:hover {
                    cursor: pointer;
                }

.nav .nav-adds .theme #theme:checked + .toggle {
                    -webkit-mask-image: url('../img/svg/sun.svg');
                            mask-image: url('../img/svg/sun.svg');
                }

@media only screen and (max-width: 640px) {

.nav {
        justify-content: space-between;
        grid-template-columns: 1fr auto;
}

        .nav .nav-menu {
            translate: 100%;
            position: fixed;
            top: 0;
            width: 100vw;
            z-index: 10;
            height: 100vh;
            background-color: var(--color-mineshaft);
            justify-content: center;
            text-align: center;
            transition: translate .2s ease-out;
        }

            .nav .nav-menu ul {
                flex-direction: column;
                height: auto;
                align-items: center;
                font-size: 3rem;
            }
            .nav.open .nav-menu {
                translate: 0;
            }
    }

.footer {
    background-color: var(--color-mineshaft);
    color: var(--color-white);
}

.footer .content {
        max-width: var(--content-max-width);
        margin: 0 auto;
        padding: 1rem;
    }

.footer .footer-top {
        background-color: var(--color-mineshaft-alt);
    }

.footer .footer-top > ul {
            display: flex;
            flex-direction: row;
            text-transform: uppercase;
            align-items: center;
            justify-content: center;
            gap: 1rem 5rem;
            font-weight: bold;
            font-size: 1rem;
            flex-wrap: wrap;
        }

@media only screen and (max-width: 480px) {

.footer .footer-top > ul {
                flex-direction: column;
        }

                .footer .footer-top > ul li {
                    width: 100%;
                }

                    .footer .footer-top > ul li a {
                        position: relative;
                        width: 100%;
                        display: block;
                    }

                        .footer .footer-top > ul li a:after {
                            content: '';
                            position: absolute;
                            right: 0;
                            top: 2px;
                            height: 1rem;
                            width: 1rem;
                            background-color: var(--color-white);
                            -webkit-mask-image: url("../img/svg/chevron-right.svg");
                                    mask-image: url("../img/svg/chevron-right.svg");
                            -webkit-mask-repeat: no-repeat;
                                    mask-repeat: no-repeat;
                            -webkit-mask-size: cover;
                                    mask-size: cover;
                            -webkit-mask-position: center;
                                    mask-position: center;
                        }
                            .footer .footer-top > ul li a:hover:after {
                                background-color: var(--primary__color);
                            }
                            .footer .footer-top > ul li:not(:last-child) a:before {
                                content: '';
                                width: 100%;
                                height: 1px;
                                background-color: var(--color-white);
                                position: absolute;
                                bottom: -10px;
                                left: 0;
                                right: 0;
                            }
            }

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

.footer .footer-middle .socials {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            padding: 1rem 0;
        }

.footer .footer-middle .socials li {
                background-color: var(--color-mineshaft-alt);
                border-radius: 2rem;
                height: 3rem;
                width: 3rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

.footer .footer-middle .socials li a {
                    background-color: var(--color-white);
                    -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                    -webkit-mask-position: center;
                            mask-position: center;
                    -webkit-mask-size: cover;
                            mask-size: cover;
                    height: 2.5rem;
                    width: 2.5rem;
                    position: relative;
                }

.footer .footer-middle .socials li a.riotgames {
                        -webkit-mask-image: url("../img/svg/riot-games.svg");
                                mask-image: url("../img/svg/riot-games.svg");
                    }

.footer .footer-middle .socials li a.riotgames:hover {
                            background-color: var(--color-red-riotgames);
                        }

.footer .footer-middle .socials li a.youtube {
                        -webkit-mask-image: url("../img/svg/youtube.svg");
                                mask-image: url("../img/svg/youtube.svg");
                    }

.footer .footer-middle .socials li a.youtube:hover {
                            background-color: var(--color-red-youtube);
                        }

.footer .footer-middle .socials li a.discord {
                        -webkit-mask-image: url("../img/svg/discord.svg");
                                mask-image: url("../img/svg/discord.svg");
                    }

.footer .footer-middle .socials li a.discord:hover {
                            background-color: var(--color-violet-discord);
                        }

.footer .footer-middle .socials li a.github {
                        -webkit-mask-image: url("../img/svg/github.svg");
                                mask-image: url("../img/svg/github.svg");
                    }

.footer .footer-middle .socials li a.github:hover {
                            background-color: var(--color-grey-github);
                        }

.footer .footer-middle .copyright {
            opacity: .8;
            font-size: 1rem;
        }

.footer .footer-middle .copyright a:hover {
                    color: var(--color-white);
                }

.footer .footer-middle .copyright a:hover:after {
                        background-color: var(--color-white);
                    }

.footer .footer-bottom {
        text-align: center;
        background-color: var(--color-creole);
        font-size: 1rem;
    }

.footer .footer-bottom a:hover {
                color: var(--color-white);
            }

.footer .footer-bottom a:hover:after {
                    background-color: var(--color-white);
                }

/*pages*/

.page-view-index .main-content .section .section-content .grid-showcase {
                    display: grid;
                    gap: 1rem;
                }

@media only screen and (min-width: 769px) {

.page-view-index .main-content .section .section-content .grid-showcase {
                        grid-template-columns: 35% 1fr;
                        grid-template-rows: repeat(3, 1fr);
                }

                        .page-view-index .main-content .section .section-content .grid-showcase .card:nth-child(2) {
                            grid-row: span 2;
                        }
                    }

@media only screen and (min-width: 993px) {

.page-view-index .main-content .section .section-content .grid-showcase {
                        grid-template-columns: 25% 25% 1fr;
                        grid-template-rows: repeat(2, 1fr);
                }

                        .page-view-index .main-content .section .section-content .grid-showcase .card:nth-child(2) {
                            grid-row: span 1;
                        }

                        .page-view-index .main-content .section .section-content .grid-showcase .card:nth-child(3) {
                            grid-row: span 2;
                        }

                        .page-view-index .main-content .section .section-content .grid-showcase .card:nth-child(4),
                        .page-view-index .main-content .section .section-content .grid-showcase .card:nth-child(5) {
                            grid-column: span 1;
                        }
                    }

@media only screen and (max-width: 768px) {

.page-view-index .main-content .section .section-content .grid-showcase {
                        grid-template-columns: 1fr;
                        grid-template-rows: repeat(5, 1fr);
                }
                    }

.page-view-index .main-content .section .section-content .grid-showcase-large {
                    display: grid;
                    gap: 1rem;
                }

.page-view-index .main-content .section .section-content .grid-showcase-large img {
                        width: 100%;
                    }

@media only screen and (min-width: 769px) {

.page-view-index .main-content .section .section-content .grid-showcase-large {
                        grid-template-columns: repeat(2, 1fr);
                }

                        .page-view-index .main-content .section .section-content .grid-showcase-large :nth-child(1),
                        .page-view-index .main-content .section .section-content .grid-showcase-large :nth-child(6) {
                            grid-column: span 2;
                        }
                    }

@media only screen and (max-width: 768px) {

.page-view-index .main-content .section .section-content .grid-showcase-large {
                        grid-template-columns: 1fr;
                }
                    }

.page-view-index .main-content .section.home-slider {
                padding-top: 1rem;
            }

.page-view-index .main-content .section.home-slider .splide__track {
                    padding-top: 2rem;
                    padding-bottom: 2rem;
                }

.page-view-index .main-content .section.home-slider .splide__list {
                    align-items: center;
                    height: 60vh;
                }

.page-view-index .main-content .section.home-slider .splide__slide {
                    filter: grayscale(1);
                    transition: height 400ms ease-out;
                    height: 50vh !important;
                }

.page-view-index .main-content .section.home-slider .splide__slide > a {
                        width: 100%;
                        height: 100%;
                    }

.page-view-index .main-content .section.home-slider .splide__slide .content {
                        position: absolute;
                        bottom: 2rem;
                        left: 0;
                        width: -moz-fit-content;
                        width: fit-content;
                        padding: 1rem 3rem 1rem 1rem;
                        background-color: var(--background-color);
                        transition: background-color .4s ease-out;
                        box-sizing: border-box;
                        text-align: left;
                    }

.page-view-index .main-content .section.home-slider .splide__slide .content > span {
                            opacity: .2;
                            transition: all .4s ease-out;
                            transform: scale(.5);
                            transform-origin: left;
                        }

.page-view-index .main-content .section.home-slider .splide__slide .content > span.name,
                            .page-view-index .main-content .section.home-slider .splide__slide .content > span.champion {
                                color: var(--text-color);
                                display: block;
                                text-transform: uppercase;
                                font-weight: 600;
                                font-size: 1.8rem;
                            }

@media only screen and (max-width: 768px) {

.page-view-index .main-content .section.home-slider .splide__slide .content {
                            bottom: .5rem;
                            width: 100%;
                    }
                                .page-view-index .main-content .section.home-slider .splide__slide .content > span.name,
                                .page-view-index .main-content .section.home-slider .splide__slide .content > span.champion {
                                    font-size: 1.2rem;
                                }
                        }

.page-view-index .main-content .section.home-slider .splide__slide.-animated {
                        z-index: 50 !important;
                        filter: none;
                        height: 60vh !important;
                    }

.page-view-index .main-content .section.home-slider .splide__slide.-animated .content {
                            background-color: var(--background-color-alt);
                            transition: background-color .4s ease-out;
                        }

.page-view-index .main-content .section.home-slider .splide__slide.-animated .content > span {
                                opacity: 1;
                                transform: scale(1);
                            }

.champions-view-index .grid-showcase-animated {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        height: 50vh;
        overflow: hidden;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        position: relative;
    }

.champions-view-index .grid-showcase-animated .col {
            display: grid;
            grid-template-rows: repeat(5, 1fr);
            gap: 1rem;
            transform: translateY(-15%);
        }

.champions-view-index .grid-showcase-animated .col:nth-child(1) {
                animation: scrollUpDown 50s linear alternate infinite;
            }

.champions-view-index .grid-showcase-animated .col:nth-child(2) {
                animation: scrollUpDown 70s linear alternate-reverse infinite;
            }

.champions-view-index .grid-showcase-animated .col:nth-child(3) {
                animation: scrollUpDown 30s linear alternate infinite;
            }

.champions-view-index .grid-showcase-animated .col > img {
                max-width: 100%;
            }

@media (prefers-reduced-motion: reduce) {

.champions-view-index .grid-showcase-animated .col {
                animation: none !important;
        }
            }

.champions-view-index .grid-showcase-animated:before {
            content: '';
            display: block;
            background: var(--linear-background-color);
            position: absolute;
            width: 100%;
            height: calc(100% + 2px);
            z-index: 1;
        }

.champions-view-index .grid-showcase-animated .title {
            grid-column: 1 / -1;
            text-align: center;
            width: 100%;
            position: absolute;
            font-size: 5rem;
            z-index: 2;
            color: var(--color-white);
            text-shadow: 1px 1px 10px var(--color-black);
        }

.champions-view-index .grid-showcase {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

.champions-view-index .grid-showcase .section-subtitle.role,
            .champions-view-index .grid-showcase .section-subtitle.region {
                grid-column: 1 / -1;
            }

.champions-view-index .grid-showcase .section-subtitle.role .name, .champions-view-index .grid-showcase .section-subtitle.region .name {
                    display: none;
                }

.champions-view-index .grid-showcase .section-subtitle.role .title, .champions-view-index .grid-showcase .section-subtitle.region .title {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

.champions-view-index .grid-showcase .section-subtitle.role img, .champions-view-index .grid-showcase .section-subtitle.region img {
                    max-width: 5rem;
                    background-color: var(--background-color);
                    z-index: 1;
                }

.champions-view-index .grid-showcase .card img {
                width: 100%;
            }

.champions-view-index .grid-showcase .card .card-infos .title,
                .champions-view-index .grid-showcase .card .card-infos .name {
                    display: block;
                }

@media only screen and (max-width: 992px) {

.champions-view-index .grid-showcase {
            grid-template-columns: repeat(3, 1fr);
    }
        }

@media only screen and (max-width: 768px) {

.champions-view-index .grid-showcase {
            grid-template-columns: repeat(2, 1fr);
    }
        }

@media only screen and (max-width: 640px) {

.champions-view-index .grid-showcase {
            grid-template-columns: 1fr;
    }
        }

.champions-view-index .no-result {
        text-align: center;
    }

.champions-view-champion .grid-showcase-center {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        max-width: 75vw;
        margin: 0 auto;
        align-items: center;
    }

.champions-view-champion .grid-showcase-center .info {
            display: flex;
            align-items: center;
            justify-content: center;
            text-transform: uppercase;
            font-size: 2rem;
        }

.champions-view-champion .grid-showcase-center .info span {
                margin-right: 1rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

.champions-view-champion .grid-showcase-center .info img {
                max-width: 5rem;
            }

@media only screen and (max-width: 768px) {

.champions-view-champion .grid-showcase-center {
            grid-template-columns: 1fr;
    }
        }

.champions-view-champion .grid-showcase-large {
        display: grid;
        gap: 1rem;
    }

.champions-view-champion .grid-showcase-large img {
            width: 100%;
        }

@media only screen and (min-width: 769px) {

.champions-view-champion .grid-showcase-large {
            grid-template-columns: repeat(2, 1fr);
    }
                .champions-view-champion .grid-showcase-large .card:nth-child(5n + 1) {
                    grid-column: span 2;
                }
        }

@media only screen and (max-width: 768px) {

.champions-view-champion .grid-showcase-large {
            grid-template-columns: 1fr;
    }
        }

.champions-view-champion .grid-showcase {
        display: grid;
        grid-template-columns: repeat(2, 45%);
        justify-content: space-between;
        gap: 2rem;
    }

.champions-view-champion .grid-showcase .subtitle {
            font-size: 2rem;
            padding-bottom: 1rem;
        }

.champions-view-champion .grid-showcase .card-bg {
            background-position: top center;
        }

@media only screen and (max-width: 768px) {

.champions-view-champion .grid-showcase {
            grid-template-columns: 1fr;
    }
        }

html .section.-champions .section-content .text-area .flex-container {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        width: 100%;
                    }

html .section.-champions .section-content .text-area .flex-container .flex-child {
                            overflow: hidden;
                        }

html .section.-champions .section-content .text-area .flex-container .flex-child img {
                                width: 100%;
                                transition: all .3s ease;
                            }

html .section.-champions .section-content .text-area .flex-container .flex-child .champion-container {
                                position: relative;
                            }

html .section.-champions .section-content .text-area .flex-container .flex-child .champion-title {
                                position: absolute;
                                bottom: 5px;
                                left: 0;
                                width: 100%;
                                background: #000;
                                background: linear-gradient(90deg, transparent 0%, rgba(33,33,33,.7) 15%, rgba(33,33,33,.7) 85%, transparent 100%);
                                color: var(--color-white);
                                text-transform: uppercase;
                                text-align: center;
                                padding: 20px 5px;
                                overflow: hidden;
                                font-weight: 600;
                            }

html .section.-champions .section-content .text-area .flex-container .flex-child .champion-title .champion-name {
                                    font-size: 1.1rem;
                                    display: block;
                                    position: relative;
                                    transition: all .2s ease;
                                }

html .section.-champions .section-content .text-area .flex-container .flex-child .champion-title .link.inline {
                                    display: block;
                                    position: absolute;
                                    bottom: 5px;
                                    width: 100%;
                                    text-align: center;
                                    font-size: .9rem;
                                    text-transform: inherit;
                                    transform: translateY(200%);
                                    transition: all .2s ease;
                                }

html .section.-champions .section-content .text-area .flex-container .flex-child .champion-title .link.inline:after {
                                        top: -2px;
                                    }

html .section.-champions .section-content .text-area .flex-container .flex-child:hover .champion-title .champion-name {
                                        transform: translateY(-5px);
                                    }

html .section.-champions .section-content .text-area .flex-container .flex-child:hover .champion-title .link {
                                        transform: translateY(0);
                                    }

html .section.-champions .section-content .text-area .flex-container > div {
                            position: relative;
                        }

@media only screen and (min-width: 993px) {
                    .section.-champions .section-content .text-area .flex-container {
                        justify-content: space-between;
                    }
}

@media only screen and (max-width: 992px) {
                    .section.-champions .section-content .text-area .flex-container {
                        flex-wrap: wrap;
                        justify-content: center;
                        gap: 10px 5px;
                    }
}

.skins-view-index .grid-showcase-animated {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        height: 50vh;
        overflow: hidden;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        position: relative;
    }

.skins-view-index .grid-showcase-animated .col {
            display: grid;
            grid-template-rows: repeat(5, 1fr);
            gap: 1rem;
            transform: translateY(-15%);
        }

.skins-view-index .grid-showcase-animated .col:nth-child(1) {
                animation: scrollUpDown 50s linear alternate infinite;
            }

.skins-view-index .grid-showcase-animated .col:nth-child(2) {
                animation: scrollUpDown 70s linear alternate-reverse infinite;
            }

.skins-view-index .grid-showcase-animated .col:nth-child(3) {
                animation: scrollUpDown 30s linear alternate infinite;
            }

.skins-view-index .grid-showcase-animated .col > img {
                max-width: 100%;
            }

@media (prefers-reduced-motion: reduce) {

.skins-view-index .grid-showcase-animated .col {
                animation: none !important;
        }
            }

.skins-view-index .grid-showcase-animated:before {
            content: '';
            display: block;
            background: var(--linear-background-color);
            position: absolute;
            width: 100%;
            height: calc(100% + 2px);
            z-index: 1;
        }

.skins-view-index .grid-showcase-animated .title {
            grid-column: 1 / -1;
            text-align: center;
            width: 100%;
            position: absolute;
            font-size: 5rem;
            z-index: 2;
            color: var(--color-white);
            text-shadow: 1px 1px 10px var(--color-black);
        }

.skins-view-index .grid-showcase {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

.skins-view-index .grid-showcase .card img {
                width: 100%;
            }

.skins-view-index .grid-showcase .card .card-infos .skin,
                .skins-view-index .grid-showcase .card .card-infos .name {
                    display: block;
                }

@media only screen and (max-width: 992px) {

.skins-view-index .grid-showcase {
            grid-template-columns: repeat(3, 1fr);
    }
        }

@media only screen and (max-width: 768px) {

.skins-view-index .grid-showcase {
            grid-template-columns: repeat(2, 1fr);
    }
        }

@media only screen and (max-width: 640px) {

.skins-view-index .grid-showcase {
            grid-template-columns: 1fr;
    }
        }

.skins-view-index .grid-showcase-large {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

.skins-view-index .grid-showcase-large .outline-card {
            overflow: hidden;
            min-height: 12rem;
            background-image: var(--bg-img);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: all 400ms ease-out;
        }

.skins-view-index .grid-showcase-large .outline-card .name {
                font-size: 2.5rem;
                font-weight: bold;
                text-align: center;
                text-overflow: ellipsis;
                overflow: hidden;
                text-shadow: 1px 1px 10px var(--color-creole);
                -webkit-backdrop-filter: brightness(30%);
                        backdrop-filter: brightness(30%);
                padding: 0 .5rem;
                width: 100%;
                white-space: nowrap;
                color: var(--color-white);
            }

.skins-view-index .grid-showcase-large .outline-card:hover {
                cursor: pointer;
            }

.skins-view-index .grid-showcase-large .outline-card:hover .name {
                    color: var(--primary__color);
                }

@media only screen and (max-width: 768px) {

.skins-view-index .grid-showcase-large {
            grid-template-columns: repeat(2, 1fr);
    }
        }

@media only screen and (max-width: 640px) {

.skins-view-index .grid-showcase-large {
            grid-template-columns: 1fr;
    }
        }

.skins-view-index .section .section-subtitle {
            grid-column: 1 / -1;
        }

.skins-view-index .section.result .section-title:after {
                    top: 35%;
                }

.skins-view-index .section.result .section-title .search-term {
  padding-right: 0;
}

.skins-view-index .section.result .section-title .count {
                    padding: 0;
                }

.skins-view-index .section.result:not(.visible) {
                display: none;
            }

.skins-view-index .section.result .no-result:not(.visible) {
                    display: none;
                }

.skins-view-index .loading {
        display: none;
        text-align: center;
        width: 4px;
        margin: 2rem auto;
        color: var(--primary__color);
        aspect-ratio: 1;
        border-radius: 50%;
        box-shadow: 19px -19px 0 0, 38px -19px 0 0, 57px -19px 0 0,
        19px 0 0 5px, 38px 0 0 5px, 57px 0 0 5px,
        19px 19px 0 0, 38px 19px 0 0, 57px 19px 0 0;
        transform: translateX(-38px);
        animation: l26 2s infinite linear;
    }

.skins-view-index .loading.visible {
            display: block;
        }

.skins-view-all .main-content .section.skins {
                padding: 0 2rem;
            }

.skins-view-all .main-content .section.skins .section-content .grid-showcase {
                        display: grid;
                        justify-content: center;
                    }

.skins-view-all .main-content .section.skins .section-content .grid-showcase img {
                            width: 100%;
                        }

.skins-view-all .main-content .section.skins .section-content .grid-showcase .name,
                        .skins-view-all .main-content .section.skins .section-content .grid-showcase .champion {
                            display: block;
                        }

@media only screen and (min-width: 769px) {

.skins-view-all .main-content .section.skins .section-content .grid-showcase {
                            grid-template-columns: repeat(4, 1fr);
                    }
                        }

@media only screen and (min-width: 993px) {

.skins-view-all .main-content .section.skins .section-content .grid-showcase {
                            grid-template-columns: repeat(6, 1fr);
                    }
                        }

@media only screen and (max-width: 768px) {

.skins-view-all .main-content .section.skins .section-content .grid-showcase {
                            grid-template-columns: 1fr 1fr;
                    }
                        }

.skins-view-all .section-link .ajax .no-more, .skins-view-index .section-link .ajax .no-more {
                padding: 1rem 0 0;
            }

.skins-view-all .section-link .ajax .no-more:not(.visible), .skins-view-index .section-link .ajax .no-more:not(.visible) {
                    display: none;
                }

.page-view-stats .details {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

.page-view-stats .details details summary {
                background-color: var(--color-mineshaft);
                border-radius: 5px 5px 0 0;
                padding: .5rem 3rem;
                position: relative;
                color: var(--color-white);
            }

.page-view-stats .details details summary:before {
                    content: '';
                    background-color: var(--color-white);
                    -webkit-mask-image: url("../img/svg/chevron-right.svg");
                            mask-image: url("../img/svg/chevron-right.svg");
                    -webkit-mask-size: cover;
                            mask-size: cover;
                    -webkit-mask-position: center;
                            mask-position: center;
                    -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                    width: 2rem;
                    height: 2rem;
                    display: inline-block;
                    position: absolute;
                    left: .7rem;
                    top: 11px;
                    transform-origin: center;
                    transition: transform 400ms ease-out;
                }

.page-view-stats .details details[open] summary {
                    color: var(--primary__color);
                }

.page-view-stats .details details[open] summary:before {
                        transform: rotate(90deg);
                        background-color: currentColor;
                    }

.page-view-stats .details details .content {
                padding: 1rem 0 1rem 3rem;
                background-color: var(--background-color-alt);
            }

.page-view-stats .details details .content img:not(.portrait) {
                    width: 100%;
                }

.page-view-stats .details details .content table {
                    border: 1px solid var(--color-mineshaft-alt);
                    width: 100%;
                    table-layout: auto;
                }

.page-view-stats .details details .content table > thead tr {
                            background-color: var(--background-color);
                        }

.page-view-stats .details details .content table > thead tr th {
                                padding: .5rem;
                            }

.page-view-stats .details details .content table td {
                        padding: .5rem;
                    }

.page-view-error .section.-error {
            margin: 20px 0;
        }

.page-view-error .section.-error img {
                margin: 0 auto 20px;
                display: block;
            }

.page-view-error .section.-error .section.section-title {
                    margin-top: 0;
                }

.page-view-error .section.-error .section.section-content {
                    color: var(--color-white);
                    text-align: center;
                    font-weight: 600;
                }

html {
    scroll-behavior: smooth;
}

html body {
        background-color: var(--background-color);
        color: var(--text-color);
        font-family: var(--secondary__font-family);
        line-height: 1.2;
        font-size: 1.2rem;
    }

html body .hidden {
            display: none;
        }