style.css
@font-face {
    font-family: "Gotham-Greek";
    src: url("/Areas/Voting/Content/2026/fonts/gotham/GothamGreek-Book.eot");
    src: url("/Areas/Voting/Content/2026/fonts/gotham/GothamGreek-Book.eot?#iefix") format("embedded-opentype"), url("/Areas/Voting/Content/2026/fonts/gotham/GothamGreek-Book.woff2") format("woff2"), url("/Areas/Voting/Content/2026/fonts/gotham/GothamGreek-Book.woff") format("woff"), url("/Areas/Voting/Content/2026/fonts/gotham/GothamGreek-Book.svg#GothamGreek-Book") format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Gotham-Greek";
    src: url("/Areas/Voting/Content/2026/fonts/gotham/GothamGreek-Medium.eot");
    src: url("/Areas/Voting/Content/2026/fonts/gotham/GothamGreek-Medium.eot?#iefix") format("embedded-opentype"), url("/Areas/Voting/Content/2026/fonts/gotham/GothamGreek-Medium.woff2") format("woff2"), url("/Areas/Voting/Content/2026/fonts/gotham/GothamGreek-Medium.woff") format("woff"), url("/Areas/Voting/Content/2026/fonts/gotham/GothamGreek-Medium.svg#GothamGreek-Medium") format("svg");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "MFred";
    src: url("/Areas/Voting/Content/2026/fonts/mfred/hinted-MFred-Regular.eot");
    src: url("/Areas/Voting/Content/2026/fonts/mfred/hinted-MFred-Regular.eot?#iefix") format("embedded-opentype"), url("/Areas/Voting/Content/2026/fonts/mfred/hinted-MFred-Regular.woff2") format("woff2"), url("/Areas/Voting/Content/2026/fonts/mfred/hinted-MFred-Regular.woff") format("woff"), url("/Areas/Voting/Content/2026/fonts/mfred/hinted-MFred-Regular.svg#MFred-Regular") format("svg");
    font-weight: 400;
    font-style: normal;
}

:root {
    --fred: "MFred", sans-serif;
    --gotham: "Gotham-Greek", sans-serif;
    --size-h1: clamp(2.027rem, 0.492vw + 1.9rem, 2.392rem);
    --size-h2: clamp(1.802rem, 0.437vw + 1.689rem, 2.126rem);
    --size-h3: clamp(1.602rem, 0.389vw + 1.501rem, 1.89rem);
    --size-h4: clamp(1.424rem, 0.345vw + 1.335rem, 1.68rem);
    --size-h5: clamp(1.266rem, 0.306vw + 1.187rem, 1.493rem);
    --size-h6: clamp(1.125rem, 0.274vw + 1.054rem, 1.328rem);
    --color-1: #081647;
    --color-2: #e31058;
    --color-2-hover: #a1093c;
    --color-3: #e3ce10;
    --black: black;
    --white: white;
    --gray: #d3d3d3;
    --border: 1px solid var(--gray);
}

/****************************************************************************************************************

    RESET

****************************************************************************************************************/

*:where( :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *) ) {
    all: unset;
    display: revert;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a,
button {
    cursor: revert;
}

menu {
    list-style: none;
}

img {
    max-inline-size: 100%;
    max-block-size: 100%;
}

table {
    border-collapse: collapse;
}

input,
textarea {
    -webkit-user-select: auto;
}

textarea {
    white-space: revert;
}

meter {
    -webkit-appearance: revert;
    appearance: revert;
}

pre {
    all: revert;
}

::placeholder {
    color: unset;
}

*:where([hidden]) {
    display: none;
}

*:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}

*:where([draggable="true"]) {
    -webkit-user-drag: element;
}

*:where(dialog:modal) {
    all: revert;
}

/****************************************************************************************************************

    PRIMARY

****************************************************************************************************************/

body {
    margin: 0;
    background-color: var(--white);
    font-family: var(--gotham);
    font-size: clamp(1rem, 0.135vw + 0.965rem, 1.1rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--black);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
    margin: 0.5rem 0;
    color: var(--black);
    border: 0;
    border-top: var(--border);
    opacity: 0.8;
}

figure {
    margin: 0 0 1rem;
}

img,
svg {
    vertical-align: middle;
}

h1 {
    font-size: var(--size-h1);
    line-height: calc(var(--size-h1) * 1.15);
}

h2 {
    font-size: var(--size-h2);
    line-height: calc(var(--size-h2) * 1.14);
}

h3 {
    font-size: var(--size-h3);
    line-height: calc(var(--size-h3) * 1.3);
}

h4 {
    font-size: var(--size-h4);
    line-height: calc(var(--size-h4) * 1.3);
}

h5 {
    font-size: var(--size-h5);
    line-height: calc(var(--size-h5) * 1.25);
}

h6 {
    font-size: var(--size-h6);
    line-height: calc(var(--size-h6) * 1.25);
}

/****************************************************************************************************************

    PRELOADER

****************************************************************************************************************/

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    visibility: visible;
    will-change: visibility;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    z-index: 100;
}

    .preloader .mask {
        flex: 1 1 0;
        width: 100%;
        background-color: var(--color-1);
        transform: scaleY(1);
        will-change: transform;
    }

        .preloader .mask:first-of-type {
            transform-origin: top left;
        }

        .preloader .mask:last-of-type {
            transform-origin: bottom left;
        }

/****************************************************************************************************************

    ICONS

****************************************************************************************************************/

.icon {
    display: inline-block;
    color: #060606;
    fill: currentColor;
    height: 1em;
    width: 1em;
    line-height: 1;
}

.icon-text {
    display: inline-flex;
    align-items: center;
}

    .icon-text .icon {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        color: inherit;
        line-height: inherit;
    }

.icon use {
    color: inherit;
    fill: currentColor;
}

/****************************************************************************************************************

    LAYOUT

****************************************************************************************************************/

main {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

    main section {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 84px 14%;
    }

footer {
    padding: 72px 14% 24px 14%;
}

@media screen and (max-width: 1050px) {
    main section,
    footer {
        padding-inline: 10vmin;
    }
}

@media screen and (max-width: 850px) {
    main section {
        padding-block: 7dvh;
    }
}

/****************************************************************************************************************

    BREAKING TITLE

****************************************************************************************************************/

.breaking-title {
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

    .breaking-title .logo-badge {
        width: clamp(5rem, 40vw, 15rem);
        aspect-ratio: 1 / 1;
        margin-bottom: 1rem;
    }

        .breaking-title .logo-badge a {
            width: 100%;
            height: 100%;
        }

        .breaking-title .logo-badge img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .breaking-title h1,
    .breaking-title h2,
    .breaking-title h3,
    .breaking-title h4 {
        font-weight: 500;
    }

    .breaking-title p {
        max-width: 65ch;
    }

/****************************************************************************************************************

    HERO

****************************************************************************************************************/

section.hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 7dvh min-content min-content 1fr 7dvh;
    background: #081647;
    place-items: center;
    gap: 2rem;
    padding-block: 0;
}

    section.hero::before {
        content: "";
        position: absolute;
        width: 100vw;
        height: 100%;
        grid-column: 1/-1;
        grid-row: 3/-1;
        background-color: rgba(0, 0, 0, 0.7);
    }

    section.hero > * {
        z-index: 10;
    }

    section.hero .awards-logo {
        width: clamp(14rem, 50vw, 40rem);
        aspect-ratio: 1 / 1;
        height: auto;
        filter: drop-shadow(0 0 10rem rgba(0, 0, 0, 0.4));
        grid-column: 1 / -1;
        grid-row: 2 / span 2;
    }

        section.hero .awards-logo img {
            width: 100%;
            height: auto;
        }

    section.hero .breaking-title {
        grid-column: 1/-1;
        grid-row: 4/4;
        margin-bottom: 0;
    }

        section.hero .breaking-title > * {
            color: var(--white);
        }

        section.hero .breaking-title > h1 {
            font-size: var(--size-h3);
            line-height: calc(var(--size-h3) * 1.3);
            text-wrap: pretty;
        }

        section.hero .breaking-title > p {
            line-height: 1.5;
        }

            section.hero .breaking-title > p .highlight {
                text-decoration: underline;
                text-underline-offset: 6px;
                text-decoration-color: var(--color-3);
            }

    section.hero .cta {
        margin-top: 3rem;
        background-color: var(--color-2);
        color: var(--white);
        text-transform: uppercase;
        font-size: 1.1rem;
        padding: 1.3em 3em;
        transition: background-color 300ms ease;
    }

        section.hero .cta:hover {
            background-color: var(--color-2-hover);
        }

@media screen and (max-width: 850px) {
    section.hero {
        gap: 0;
    }

        section.hero .breaking-title > h1 {
            padding-top: 2rem;
            max-width: 20ch;
        }

        section.hero .breaking-title > p {
            max-width: 45ch;
        }
}

@media screen and (max-width: 650px) {
    section.hero .cta {
        padding-inline: 0;
        width: 100%;
    }
}

/****************************************************************************************************************

    INSTRUCTIONS

****************************************************************************************************************/

section.instructions {
    background-color: var(--black);
}

    section.instructions img {
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        width: 100%;
        height: 100%;
        opacity: 0.3;
    }

    section.instructions .item-description {
        position: relative;
        padding-block: 4rem;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

        section.instructions .item-description > * {
            color: var(--white);
            margin: 0;
        }

        section.instructions .item-description h2 {
            font-family: var(--fred);
            font-size: clamp(3rem, 3vw, 4rem);
            line-height: 1em;
            text-transform: uppercase;
        }

        section.instructions .item-description p {
            max-width: 45ch;
        }

@media screen and (max-width: 850px) {
    section.instructions .item-description {
        padding-block: 0;
    }
}

@media screen and (max-width: 650px) {
    section.instructions .item-description {
        gap: 0.5rem;
    }

        section.instructions .item-description h4 {
            font-size: var(--size-h6);
            line-height: 1.3;
        }
}

/****************************************************************************************************************

    SPONSORS

****************************************************************************************************************/

section.sponsors h3 {
    margin-bottom: 48px;
    font-size: 20px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    gap: 2rem;
}

    section.sponsors h3::after,
    section.sponsors h3::before {
        content: "";
        flex: 1 1 0;
        height: 1px;
        background-color: var(--gray);
    }

section.sponsors .grid {
    display: grid;
    grid-auto-flow: column;
    gap: 2vw;
}

    section.sponsors .grid > a {
        box-shadow: 0 0 30px 0 rgba(6, 6, 6, 0.2);
    }

@media screen and (max-width: 850px) {
    section.sponsors h3 {
        margin-bottom: 1rem;
    }
}

@media screen and (max-width: 650px) {
    section.sponsors .grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-flow: row;
    }

        section.sponsors .grid > a {
            grid-column-end: span 2;
        }

            section.sponsors .grid > a:last-child:nth-child(odd) {
                grid-column-start: 2;
            }
}

/****************************************************************************************************************

    CATEGORY

****************************************************************************************************************/

#main section.category {
    padding-bottom: 0;
}

/* category breaking title */
section.category .breaking-title {
    width: 100%;
    margin-bottom: 5dvh;
}

    section.category .breaking-title h1 {
        font-family: var(--fred);
        font-size: clamp(4rem, 5vw, 7rem);
        line-height: 0.9;
    }

    section.category .breaking-title p {
        max-width: 45ch;
    }

/* categories grid */
.categories-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
    column-gap: 5rem;
    row-gap: 2.5rem;
}

.item {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding-bottom: 2.5rem;
    border-bottom: var(--border);
}

.item-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

    .item-image[data-watermark] {
        position: relative;
        overflow: hidden;
    }

        .item-image[data-watermark]::after {
            content: attr(data-watermark);
            background-color: var(--color-2);
            font-size: 0.85rem;
            font-weight: 500;
            color: white;
            line-height: 2;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            padding-inline: 3rem;
            transform-origin: top left;
            transform: rotate(-45deg) translateY(200%) translateX(-50%);
        }

    .item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.item-content {
    padding-block: 1.5rem;
}

    .item-content h3 {
        font-size: var(--size-h4);
        font-weight: 500;
        margin-bottom: 0.25rem;
    }

    .item-content p {
        color: #4c4c4c;
    }

.controls {
    display: flex;
    align-items: center;
    margin-top: auto;
}

    .controls > * {
        flex: 1 1 0;
        cursor: pointer;
        text-align: center;
        cursor: pointer;
        line-height: 1;
        font-weight: 500;
        text-transform: uppercase;
    }

    .controls .vote-btn {
        font-size: 0.9rem;
        background-color: var(--color-2);
        padding-block: 1.15em;
        border: none;
        outline: none;
        color: white;
        transition: background-color 300ms ease;
    }

        .controls .vote-btn:hover {
            background-color: var(--color-2-hover);
        }

    .controls .gallery-trigger {
        font-size: 0.8rem;
        color: #9e9e9e;
        text-decoration: underline;
        text-underline-offset: 5px;
        transition: color 300ms ease;
    }

        .controls .gallery-trigger:hover {
            color: #717171;
        }

/* pager */
.pager {
    position: relative;
    width: 100%;
    margin-block: 10dvh;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

    .pager a,
    .pager span {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1;
        text-transform: uppercase;
        text-align: center;
    }

    .pager a {
        background-color: black;
        color: white;
        transition: background-color 300ms ease;
    }

        .pager a:hover {
            background-color: rgb(78, 78, 78);
        }

        .pager a.selected {
            background-color: var(--color-2);
            color: white;
            cursor: default;
            pointer-events: none;
        }

    .pager span {
        color: black;
    }

    .pager nav {
        flex: 1 1 0;
        display: flex;
        align-items: stretch;
        gap: 0.25rem;
    }

    .pager a.next-page {
        padding-inline: 4rem;
    }

@media screen and (max-width: 850px) {
    .pager {
        margin-block: 3rem;
        flex-direction: column;
        gap: 0.25rem;
    }

        .pager nav {
            flex-wrap: wrap;
        }

            .pager nav > * {
                flex: 1 1 0;
                padding-inline: 0;
            }

        .pager a.next-page {
            padding-inline: 0;
            width: 100%;
        }
}

@media screen and (max-width: 650px) {
    .categories-grid {
        row-gap: 2.5rem;
    }

    .item {
        padding-bottom: 0;
        border-bottom: 0;
    }

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

    .controls {
        flex-direction: column;
        gap: 1rem;
    }

        .controls > * {
            width: 100%;
        }
}

/****************************************************************************************************************

    FOOTER

****************************************************************************************************************/

footer {
    background-color: var(--gray);
    text-align: center;
}

    footer .teaser {
        font-family: var(--fred);
        font-size: clamp(3rem, 7vw, 12rem);
        line-height: 1.2em;
        color: var(--color-1);
        text-transform: uppercase;
    }

.footer-infos {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

    .footer-infos > * {
        margin: 0px;
    }

    .footer-infos h3 {
        flex: 1 1 0;
        font-size: 16px;
        text-align: center;
        line-height: 80px;
        font-weight: 500;
        background-color: var(--white);
    }

        .footer-infos h3 a {
            color: inherit;
        }

    .footer-infos ul.social {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        gap: inherit;
    }

        .footer-infos ul.social li {
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--white);
        }

            .footer-infos ul.social li a {
                font-size: 1.2rem;
            }

.copyright p {
    font-size: 14px;
    color: var(--black);
    margin: 2rem auto 0;
}

@media screen and (max-width: 1050px) {
    .footer-infos > *:first-child,
    .footer-infos > *:nth-child(2) {
        flex-basis: 41%;
    }

    .footer-infos ul.social {
        flex-basis: 100%;
    }

        .footer-infos ul.social li {
            flex: 1 1 0;
            width: auto;
        }

            .footer-infos ul.social li a {
                font-size: 1.2rem;
            }
}

@media screen and (max-width: 850px) {
    footer .teaser {
        margin-bottom: 0.75rem;
    }
}

@media screen and (max-width: 650px) {
    .footer-infos > *:first-child,
    .footer-infos > *:nth-child(2) {
        flex-shrink: 0;
        flex-basis: 100%;
    }

    .footer-infos h3 {
        line-height: 60px;
    }

    .footer-infos ul.social li {
        height: 60px;
    }
}

/* ==========================================================================
   SECTION CATEGORIES SLIDER
   ========================================================================== */

section.categories-slider {
    background-color: #060606; /* $gray-darker */
    overflow: hidden;
}

    /* ==========================================================================
   BREAKING TITLE OVERRIDES
   ========================================================================== */

    section.categories-slider .breaking-title {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        text-align: center;
        margin: 12px auto 72px;
    }

        section.categories-slider .breaking-title h2 {
            color: #c1bba1; /* $color-1 */
            font-weight: 500;
            margin-bottom: 12px;
        }

        section.categories-slider .breaking-title p {
            color: #fff; /* $white */
            max-width: 950px;
            margin: auto;
        }

@media only screen and (max-width: 1441px) {
    section.categories-slider .breaking-title {
        margin-bottom: 48px;
    }
}

@media only screen and (max-width: 1170px) {
    section.categories-slider .breaking-title {
        margin-bottom: 36px;
    }
}

@media only screen and (max-width: 670px) {
    section.categories-slider .breaking-title {
        margin-bottom: 24px;
    }
}

/* ==========================================================================
   SLIDER CONTAINER
   ========================================================================== */

.slider-container {
    position: relative;
    display: block; /* +block */
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 48px; /* $space-lg */
}

    .slider-container .draggable-slider {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

        .slider-container .draggable-slider .slide {
            position: relative;
            height: auto;
            background-color: #fff;
        }

            .slider-container .draggable-slider .slide img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

/* ==========================================================================
   RESPONSIVE LAPTOP
   ========================================================================== */
@media only screen and (max-width: 1920px) {
    .slider-container .draggable-slider {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 1300px) {
    .slider-container .draggable-slider {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 800px) {
    .slider-container .draggable-slider {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SLIDE INNER IMAGE
   ========================================================================== */

.slider-container .slide .slide-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
}

    .slider-container .slide .slide-inner a.slide-image {
        position: relative;
        display: block;
        width: 100%;
        height: 350px;
    }

@media only screen and (max-width: 1441px) {
    .slider-container .slide .slide-inner a.slide-image {
        height: 270px;
    }
}

@media only screen and (max-width: 1170px) {
    .slider-container .slide .slide-inner a.slide-image {
        height: 250px;
    }
}

@media only screen and (max-width: 670px) {
    .slider-container .slide .slide-inner a.slide-image {
        height: 180px;
    }
}

/* ==========================================================================
   SLIDE INNER CONTENT
   ========================================================================== */

.slider-container .slide .slide-inner .slide-content {
    position: relative;
    padding: 40px;
    white-space: normal;
    flex: 1 1 auto;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
}

    /* Number */

    .slider-container .slide .slide-inner .slide-content .number {
        position: relative;
        display: inline-block;
        flex: 0 1 auto;
        width: 100%;
        margin-bottom: 24px;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
    }
        .slider-container {
            counter-reset: div;
        }
        .slider-container .slide .slide-inner .slide-content .number::before {
            counter-increment: div;
            content: counter(div, decimal-leading-zero);
            position: relative;
            display: inline-block;
            flex: 0 1 auto;
            order: 0;
        }

        .slider-container .slide .slide-inner .slide-content .number::after {
            content: "";
            position: relative;
            display: inline-block;
            width: 25px;
            height: 2px;
            margin: 0 12px;
            background-color: black;
            flex: 0 1 auto;
            order: 1;
        }

        .slider-container .slide .slide-inner .slide-content .number span {
            position: relative;
            display: inline-block;
            flex: 0 1 auto;
            order: 2;
        }

    /* Category title, text, arrow */

    .slider-container .slide .slide-inner .slide-content .category-title {
        position: relative;
        display: inline-block;
        flex: 0 1 auto;
        transition: all 0.3s ease;
        color: black;
        font-weight: 500;
        margin-bottom: 24px;
    }

        .slider-container .slide .slide-inner .slide-content .category-title a {
            color: inherit;
        }

    .slider-container .slide .slide-inner .slide-content p {
        position: relative;
        display: inline-block;
        flex: 1 1 auto;
        font-size: 15px;
        line-height: 1.4em;
        color: black;
        margin-bottom: 24px;
    }

    .slider-container .slide .slide-inner .slide-content a.slide-arrow {
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
        align-content: stretch;
    }

        .slider-container .slide .slide-inner .slide-content a.slide-arrow .text {
            position: relative;
            display: inline-block;
            background-color: #b8560b;
            padding: 0 24px;
            text-transform: uppercase;
            font-size: 13px;
            color: #fff;
            line-height: 44px;
        }

/* Hover effects only on desktop */

@media (hover: hover) and (pointer: fine) {
    .slider-container .slide .slide-inner .slide-content a.slide-arrow .text {
        transition: background-color 0.3s ease;
    }

        .slider-container
        .slide
        .slide-inner
        .slide-content
        a.slide-arrow
        .text:hover {
            background-color: #b8560bc7;
        }

    .slider-container .slide .slide-inner .slide-content .category-title a {
        transition: color 0.3s ease;
    }

        .slider-container .slide .slide-inner .slide-content .category-title a:hover {
            color: #b8560b;
        }

    .slider-container .slide .slide-inner a.slide-image {
        transition: all 0.3s ease;
    }

        .slider-container .slide .slide-inner a.slide-image:hover {
            opacity: 0.9;
        }
}

/* Responsive laptop */

@media only screen and (max-width: 1441px) {
    .slider-container .slide .slide-inner .slide-content {
        padding: 24px;
    }

        .slider-container .slide .slide-inner .slide-content .number {
            font-size: 13px;
            margin-bottom: 24px;
        }

            .slider-container .slide .slide-inner .slide-content .number::after {
                width: 20px;
            }

        .slider-container .slide .slide-inner .slide-content .category-title {
            font-size: 25px;
        }

        .slider-container .slide .slide-inner .slide-content p {
            font-size: 14px;
        }
}

/* Responsive tablet */

@media only screen and (max-width: 1171px) {
    .slider-container .slide .slide-inner .slide-content .number,
    .slider-container .slide .slide-inner .slide-content .category-title {
        margin-bottom: 12px;
    }

    .slider-container .slide .slide-inner .slide-content p {
        font-size: 13px;
        margin-bottom: 20px;
    }
}

/* Responsive mobile */

@media only screen and (max-width: 670px) {
    .slider-container .slide .slide-inner .slide-content {
        padding: 16px;
    }

        .slider-container .slide .slide-inner .slide-content .number {
            font-size: 12px;
        }

            .slider-container .slide .slide-inner .slide-content .number::after {
                width: 15px;
            }

        .slider-container .slide .slide-inner .slide-content .category-title {
            font-size: 22px;
        }
}

/* ==========================================================================
   SLIDER DRAGGER
   ========================================================================== */

section.categories-slider .dragger {
    position: relative;
    display: block;
    width: 100%;
    height: 44px;
    margin: 0 auto;
    background-color: inherit;
}

    section.categories-slider .dragger::after {
        content: " ";
        position: absolute;
        top: 50%;
        right: 0;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        border-top: 1px dotted #9d9d9d;
        width: 100%;
        height: 2px;
    }

    section.categories-slider .dragger h5 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 250px;
        height: auto;
        margin: 0;
        z-index: 5;
        background-color: black;
        text-align: center;
        font-size: 13px;
        color: #9d9d9d;
        text-transform: uppercase;
    }

@media only screen and (max-width: 1171px) {
    section.categories-slider .dragger {
        width: 100%;
        height: 45px;
    }
}

@media only screen and (max-width: 670px) {
    section.categories-slider .dragger h5 {
        width: 210px;
        font-size: 11px;
    }
}