@charset "UTF-8";

* {
    padding: 0;
    margin: 0;
    border: none;
    box-sizing: border-box;
    flex: 0 0 auto;
}

:root {
    scroll-behavior: smooth;
    font-size: 100%;
    --color-bg: #CEE0E9;
    --color-brand: #283867;
    --color-brand-light: #5F73AD;
    --color-brand-dark: #1E2D57;
    --color-brand-verydark: #202B30;
    --color-cta: #2961FF;
    --color-text-light: #F2F2F2;
    --color-text-dark: #0D0D0D;
    --clip-path-height-0-5x: polygon(0 0, 100% 0, calc(100% - 1.5rem) 100%, 0 100%);
    --clip-path-height-0-75x: polygon(0 0, 100% 0, calc(100% - 2.21rem) 100%, 0 100%);
    --clip-path-height-1x: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0 100%);
    --clip-path-height-3x: polygon(0 0, 100% 0, calc(100% - 9rem) 100%, 0 100%);
    --clip-path-height-4x: polygon(0 0, 100% 0, calc(100% - 12rem) 100%, 0 100%);
    --clip-path-height-0-5x-reverse: polygon(0 0, 100% 0, 100% 100%, 1.5rem 100%);
    --clip-path-height-0-75x-reverse: polygon(0 0, 100% 0, 100% 100%, 2.21rem 100%);
    --clip-path-height-2-5x-reverse: polygon(0 0, 100% 0, 100% 100%, 7.5rem 100%);
    --clip-path-element-height-0-5x: 2.375rem;
    --clip-path-element-height-0-75x: 3.5rem;
    --clip-path-element-height-1x: 4.75rem;
    --clip-path-element-height-2-5x: 11.875rem;
    --clip-path-element-height-3x: 14.25rem;
    --clip-path-element-height-4x: 19rem;
    --shadow-subtle: 0 0 0.5rem 0.125rem rgba(0, 0, 0, 0.35);
    --shadow-subtle-offset: 0.125rem 0.125rem 0.5rem 0.125rem rgba(0, 0, 0, 0.35);
}

@supports (-webkit-appearance: none) {
    :root {
        --clip-path-height-0-5x-reverse: polygon(0 0, 101% 0, 101% 101%, 1.5rem 101%);
    }
}

body {
    font-family: "Roboto", sans-serif;
    background-color: var(--color-bg);
}

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

.with-title > hr {
    height: 0.25rem;
    background: var(--color-brand-dark);
}

.with-title > header {
    width: max-content;
    height: var(--clip-path-element-height-1x);
    line-height: var(--clip-path-element-height-1x);
    color: var(--color-text-light);
    background: var(--color-brand-dark);
    -webkit-clip-path: var(--clip-path-height-1x);
    clip-path: var(--clip-path-height-1x);
    padding: 0 4rem 0 3rem;
}

    .with-title > header h2 {
        display: inline;
    }

.offset-top {
    margin-top: 6rem;
}

.text-bold {
    font-weight: bold;
}

.category-nest-0 {
    padding-left: 0;
}

.category-nest-1 {
    padding-left: 0.75rem;
}

    .category-nest-1:before {
        content: "-";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
    }

.category-nest-2 {
    padding-left: 1.5rem;
}

    .category-nest-2:before {
        content: "-";
        position: absolute;
        top: 0;
        left: 0.75rem;
        display: block;
    }

.category-nest-3 {
    padding-left: 2.25rem;
}

    .category-nest-3:before {
        content: "-";
        position: absolute;
        top: 0;
        left: 1.5rem;
        display: block;
    }

.category-nest-4 {
    padding-left: 3rem;
}

    .category-nest-4:before {
        content: "-";
        position: absolute;
        top: 0;
        left: 2.25rem;
        display: block;
    }

.category-nest-5 {
    padding-left: 3.75rem;
}

    .category-nest-5:before {
        content: "-";
        position: absolute;
        top: 0;
        left: 3rem;
        display: block;
    }

.top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    font-family: "Baloo Da 2", cursive;
    display: grid;
    grid-template-columns: 1fr min-content 1fr;
    grid-template-areas: "nav-left logo nav-right";
    align-items: center;
    color: var(--color-text-light);
    background-color: var(--color-brand);
    font-size: 1.5rem;
    height: 6rem;
    padding: 1.5rem 3rem;
    z-index: 100;
    box-shadow: var(--shadow-subtle);
}

    .top .fixed {
        position: fixed;
    }

    .top nav {
        display: flex;
        justify-content: space-evenly;
    }

        .top nav.nav-left {
            grid-area: nav-left;
        }

        .top nav.nav-right {
            grid-area: nav-right;
        }

    .top .logo-container {
        grid-area: logo;
        line-height: 0;
        height: 100%;
        width: max-content;
        display: block;
    }

        .top .logo-container .logo {
            height: 3rem;
            object-fit: contain;
        }

    .top .mobile-nav-icon {
        display: none;
    }

.nav-mobile-container {
    display: none;
}

.mobile-veil {
    display: none;
}

.pages-container {
    display: grid;
    grid-template-columns: 5fr 4rem repeat(5, 1fr) 4rem 5fr;
    grid-template-areas: ". . first-page previous-page current-page next-page last-page . .";
    justify-items: center;
}

    .pages-container a {
        width: 3rem;
        height: 3rem;
        text-align: center;
        line-height: 3rem;
        background: var(--color-brand-light);
        border-radius: 0.5rem;
        color: var(--color-text-light);
    }

        .pages-container a.first-page {
            grid-area: first-page;
        }

        .pages-container a.previous-page {
            grid-area: previous-page;
        }

        .pages-container a.current-page {
            grid-area: current-page;
            background: var(--color-brand);
        }

        .pages-container a.next-page {
            grid-area: next-page;
        }

        .pages-container a.last-page {
            grid-area: last-page;
        }

#hero {
    height: 100vh;
    background: url("/resources/hero-image-alt.jpg") right 5%;
    background-size: cover;
    position: relative;
    color: var(--color-text-light);
    display: none;
}

    #hero .cta-box {
        height: var(--clip-path-element-height-4x);
        -webkit-clip-path: var(--clip-path-height-4x);
        clip-path: var(--clip-path-height-4x);
        position: absolute;
        bottom: 40%;
        background: var(--color-brand-dark);
        max-width: 50%;
        padding: 0 0 0 3rem;
        font-size: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        #hero .cta-box .primary {
            font-size: 3rem;
            line-height: 3.25rem;
            margin-bottom: 2rem;
            padding-right: 6rem;
        }

        #hero .cta-box .secondary {
            font-size: 2.25rem;
            line-height: 2.5rem;
            padding-right: 12rem;
        }

    #hero .cta-button {
        line-height: var(--clip-path-element-height-1x);
        height: var(--clip-path-element-height-1x);
        -webkit-clip-path: var(--clip-path-height-1x);
        clip-path: var(--clip-path-height-1x);
        display: block;
        position: absolute;
        bottom: 25%;
        left: 0;
        background: var(--color-cta);
        padding: 0 4rem 0 4rem;
        color: inherit;
        text-transform: uppercase;
        font-size: 1.5rem;
        font-weight: bold;
        transform: translateX(-1rem);
        transition: transform 0.15s ease;
    }

        #hero .cta-button:hover {
            transform: translateX(0);
        }

#articles {
    display: flex;
    flex-direction: column;
    display: none;
}

    #articles.with-aside {
        display: grid;
        grid-template: min-content 1fr/9fr 2fr;
    }

        #articles.with-aside header {
            grid-area: 1/1/1/3;
        }

        #articles.with-aside main {
            justify-self: center;
            align-self: initial;
        }

    #articles main {
        display: grid;
        grid-template-columns: repeat(3, minmax(auto, 24rem));
        grid-auto-rows: min-content;
        grid-gap: 4rem;
        justify-content: center;
        width: calc(100% - 6rem);
        margin: 3rem 0;
        color: var(--color-text-dark);
        align-self: center;
    }

        #articles main article {
            align-self: stretch;
            display: flex;
            flex-direction: column;
        }

            #articles main article > *:not(:last-child) {
                margin-bottom: 0.5rem;
            }

            #articles main article > a:first-child {
                line-height: 0;
            }

            #articles main article > a:nth-child(2) {
                flex-grow: 1;
            }

            #articles main article > a .image {
                width: 100%;
                box-shadow: var(--shadow-subtle-offset);
                border-radius: 0.5rem;
                height: 16rem;
                object-fit: cover;
                display: block;
            }

            #articles main article > a .title {
                font-size: 1.25rem;
                line-height: 2rem;
                padding: 0 0.75rem;
            }

            #articles main article hr {
                height: 0.0625rem;
                color: inherit;
                background: currentColor;
            }

            #articles main article .details {
                position: relative;
                display: flex;
                justify-content: space-between;
                padding: 0 0.75rem;
            }

                #articles main article .details .comments {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                }

                    #articles main article .details .comments:before {
                        display: inline-block;
                        content: "";
                        background: url("/resources/icons/comment.svg") center 50%;
                        background-size: contain;
                        width: 1.25rem;
                        height: 1.25rem;
                        margin-right: 0.5rem;
                        vertical-align: bottom;
                    }

    #articles .pages-container {
        grid-column: 1 / -1;
    }

#article-view {
    display: grid;
    grid-template: min-content min-content 1fr min-content/4fr 2fr;
    grid-template-areas: "header header" "metadata ." "content aside" "comments aside";
}

    #article-view header {
        grid-area: header;
    }

    #article-view .metadata {
        grid-area: metadata;
        margin: 1.5rem 3rem 3rem;
    }

        #article-view .metadata .publication-date {
            margin-right: 3rem;
        }

    #article-view .content {
        grid-area: content;
        margin: 0 3rem 3rem;
        max-width: 60rem;
    }

        #article-view .content .main-image {
            margin-bottom: 1.5rem;
            border-radius: 0.5rem;
            max-width: 100%;
        }

        #article-view .content p {
            margin: 1.5rem 0;
        }

    #article-view .aside-container {
        grid-area: aside;
        margin-top: 0;
    }

    #article-view .comments {
        grid-area: comments;
        margin: 3rem 0;
    }

        #article-view .comments header {
            line-height: var(--clip-path-element-height-1x);
            height: var(--clip-path-element-height-1x);
            -webkit-clip-path: var(--clip-path-height-1x);
            clip-path: var(--clip-path-height-1x);
            width: max-content;
            color: var(--color-text-light);
            background: var(--color-brand-light);
            padding: 0 4rem 0 3rem;
            margin-bottom: 1.5rem;
        }

            #article-view .comments header h2 {
                display: inline;
            }

        #article-view .comments #disqus_thread {
            max-width: 60rem;
            margin-left: 3rem;
        }

.aside-container {
    margin: 3rem 0;
    position: relative;
}

    .aside-container h3 {
        line-height: var(--clip-path-element-height-0-75x);
        height: var(--clip-path-element-height-0-75x);
        -webkit-clip-path: var(--clip-path-height-0-75x-reverse);
        clip-path: var(--clip-path-height-0-75x-reverse);
        align-self: flex-end;
        display: inline-block;
        color: var(--color-text-light);
        padding: 0 3rem;
        background: var(--color-brand-light);
    }

    .aside-container > *:not(:first-child) {
        margin-top: 6rem;
    }

    .aside-container .categories, .aside-container .social, .aside-container .similar-articles {
        display: flex;
        flex-direction: column;
    }

        .aside-container .categories h3 {
            margin-bottom: 1.5rem;
        }

        .aside-container .categories .category-wrapper {
            margin-top: 0.5rem;
            padding: 0.25rem 0;
        }

            .aside-container .categories .category-wrapper:first-of-type {
                margin-top: 0;
            }

        .aside-container .categories .category {
            display: flex;
            justify-content: space-between;
            padding-right: 3rem;
        }

        .aside-container .social.wide {
            display: grid;
            grid-template: min-content 1fr/1fr 1fr;
        }

            .aside-container .social.wide h3 {
                grid-area: 1/1/2/3;
                justify-self: end;
            }

            .aside-container .social.wide .network:first-of-type {
                margin-top: 1rem;
            }

        .aside-container .social .network {
            display: grid;
            grid-template: 1fr 1fr/3rem 0.5rem 1fr;
            grid-template-areas: "logo . title" "logo . extra";
            grid-gap: 0.5rem;
            margin-top: 1rem;
            height: 3rem;
        }

            .aside-container .social .network .logo {
                max-height: 100%;
                max-width: 100%;
                grid-area: logo;
            }

            .aside-container .social .network .title {
                grid-area: title;
                font-weight: bold;
                align-self: end;
            }

            .aside-container .social .network .extra {
                grid-area: extra;
                font-size: 0.8rem;
                align-self: start;
            }

            .aside-container .social .network:first-of-type {
                margin-top: 2rem;
            }

        .aside-container .similar-articles .articles-container {
            display: grid;
            grid-template: auto/1fr 1fr;
            grid-gap: 1.5rem;
            padding: 1.5rem 3rem 0 0;
        }

            .aside-container .similar-articles .articles-container .article-single {
                display: flex;
                flex-direction: column;
                width: 100%;
            }

                .aside-container .similar-articles .articles-container .article-single img {
                    border-radius: 0.5rem;
                    width: 100%;
                    height: 12rem;
                    object-fit: cover;
                    display: block;
                }

                .aside-container .similar-articles .articles-container .article-single > a:first-child {
                    line-height: 0;
                }

                .aside-container .similar-articles .articles-container .article-single > a:nth-child(2) {
                    padding: 0.75rem 0.75rem 0;
                }

#video {
    position: relative;
}

    #video:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: var(--color-brand);
        mix-blend-mode: multiply;
    }

    #video video {
        width: 100%;
        object-fit: cover;
    }

#trainer-list main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 4rem;
    justify-content: center;
    width: min-content;
    margin: 3rem auto;
    color: var(--color-text-dark);
}

    #trainer-list main article {
        width: 24rem;
        height: 16rem;
        display: grid;
        grid-template-rows: min-content 1fr min-content;
        grid-template-columns: 1fr;
        color: var(--color-text-light);
        box-shadow: var(--shadow-subtle-offset);
        overflow: hidden;
        position: relative;
    }

        #trainer-list main article.great-price:after {
            line-height: var(--clip-path-element-height-0-5x);
            height: var(--clip-path-element-height-0-5x);
            -webkit-clip-path: var(--clip-path-height-0-5x);
            clip-path: var(--clip-path-height-0-5x);
            position: absolute;
            top: var(--clip-path-element-height-0-75x);
            left: 0;
            content: "Skvělá cena";
            display: block;
            background: #FF3D00;
            padding: 0 2rem 0 1.5rem;
        }

        #trainer-list main article .title {
            line-height: var(--clip-path-element-height-0-75x);
            height: var(--clip-path-element-height-0-75x);
            -webkit-clip-path: var(--clip-path-height-0-75x);
            clip-path: var(--clip-path-height-0-75x);
            grid-column: 1;
            grid-row: 1;
            z-index: 2;
            padding: 0 1.5rem;
            background: var(--color-brand);
        }

        #trainer-list main article .image-container {
            width: 100%;
            height: 100%;
            grid-column: 1;
            grid-row: 1/4;
        }

        #trainer-list main article img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.15s ease;
        }

            #trainer-list main article img:hover {
                transform: scale(1.1);
            }

        #trainer-list main article .price {
            line-height: var(--clip-path-element-height-0-5x);
            height: var(--clip-path-element-height-0-5x);
            -webkit-clip-path: var(--clip-path-height-0-5x-reverse);
            clip-path: var(--clip-path-height-0-5x-reverse);
            grid-column: 1;
            grid-row: 3;
            background: rgba(0, 0, 0, 0.5);
            z-index: 2;
            width: max-content;
            padding: 0 1.5rem 0 2rem;
            justify-self: end;
            background: var(--color-brand-light);
            font-weight: bold;
            letter-spacing: 0.03em;
        }

#order-form {
    display: grid;
    grid-template: min-content 1fr/9fr 2fr;
}

    #order-form header {
        grid-area: 1/1/1/3;
    }

    #order-form form {
        padding: 3rem 0;
    }

        #order-form form section h2 {
            line-height: var(--clip-path-element-height-0-75x);
            height: var(--clip-path-element-height-0-75x);
            -webkit-clip-path: var(--clip-path-height-0-75x);
            clip-path: var(--clip-path-height-0-75x);
            width: max-content;
            color: var(--color-text-light);
            background: var(--color-brand-light);
            padding: 0 4rem 0 3rem;
        }

        #order-form form section main {
            padding: 1.5rem 3rem 0;
        }

            #order-form form section main p {
                font-weight: bold;
                letter-spacing: 0.02em;
                margin-bottom: 0.25rem;
            }

                #order-form form section main p label {
                    cursor: text;
                }

                #order-form form section main p .required {
                    color: red;
                }

                #order-form form section main p:not(:first-of-type) {
                    margin-top: 1rem;
                }

            #order-form form section main .radio-group {
                display: flex;
            }

                #order-form form section main .radio-group label {
                    height: 2.5rem;
                    line-height: 2.375rem;
                    width: 12rem;
                    background: white;
                    border: 0.0625rem solid var(--color-brand-light);
                    border-radius: 0.5rem;
                    text-align: center;
                    cursor: pointer;
                }

                    #order-form form section main .radio-group label:not(:first-of-type) {
                        margin-left: 1.5rem;
                    }

                #order-form form section main .radio-group input:checked + label {
                    line-height: 2.25rem;
                    border: 0.125rem solid var(--color-brand-dark);
                }

            #order-form form section main .text-group {
                margin-top: 1rem;
                display: grid;
                grid-template-rows: min-content min-content;
                grid-auto-columns: min-content;
                grid-column-gap: 1.5rem;
                grid-auto-flow: column;
            }

                #order-form form section main .text-group:first-child {
                    margin-top: 0;
                }

                #order-form form section main .text-group p {
                    margin-top: 0;
                }

            #order-form form section main .checkbox-container {
                display: flex;
                margin-top: 1rem;
            }

                #order-form form section main .checkbox-container input {
                    margin-right: 1rem;
                }

            #order-form form section main .g-recaptcha {
                margin-top: 0.75rem;
            }

            #order-form form section main button[type=submit] {
                margin-top: 1rem;
                height: 2.5rem;
                width: 6rem;
                background: var(--color-brand-dark);
                color: var(--color-text-light);
                font-size: 1rem;
                border-radius: 0.5rem;
                cursor: pointer;
            }

        #order-form form section:not(:first-of-type) {
            margin-top: 3rem;
        }

        #order-form form input[type=number] {
            height: 2.5rem;
            line-height: 2.375rem;
            width: 12rem;
            background: white;
            border: 0.0625rem solid var(--color-brand-light);
            border-radius: 0.5rem;
            padding: 0 0.75rem;
        }

        #order-form form input[type=text], #order-form form input[type=tel], #order-form form input[type=email] {
            height: 2.5rem;
            line-height: 2.375rem;
            width: 12rem;
            background: white;
            border: 0.0625rem solid var(--color-brand-light);
            border-radius: 0.5rem;
            padding: 0 0.75rem;
        }

        #order-form form input.wide {
            width: 25.5rem;
        }

        #order-form form input:focus {
            outline: none;
        }

        #order-form form select {
            height: 2.5rem;
            line-height: 2.375rem;
            width: 12rem;
            background: white;
            border: 0.0625rem solid var(--color-brand-light);
            border-radius: 0.5rem;
            padding: 0 0.75rem;
        }

        #order-form form input[type=radio] {
            appearance: none;
            -webkit-appearance: none;
            box-shadow: none;
        }

    #order-form input[type=text].invalid,
    #order-form input[type=tel].invalid,
    #order-form input[type=email].invalid,
    #order-form input[type=number].invalid,
    #order-form input[type=file].invalid,
    #order-form input[type=checkbox].invalid,
    #order-form select.invalid,
    #order-form .radio-group input.invalid + label {
        box-shadow: 0 0 0.25rem 0.125rem rgba(245, 0, 0, 0.6);
    }

    #order-form form .invalid:valid,
    #order-form .radio-group input.invalid:valid + label {
        box-shadow: none;
    }

.order-confirm {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 96px - 447px);
    justify-content: center;
    align-items: center;
}

    .order-confirm h2 {
        margin-top: 0.75rem;
    }

.text-page-container {
    min-height: calc(100vh - 96px - 447px);
}

    .text-page-container .content-container {
        padding: 1.5rem 3rem;
        max-width: 80rem;
    }

    .text-page-container h3 {
        margin: 1.5rem 0 0.75rem;
    }

    .text-page-container p {
        margin: 0.5rem 0;
    }

.bottom {
    background: var(--color-brand-verydark);
    display: grid;
    grid-template: max-content max-content/repeat(4, 1fr);
    grid-gap: 3rem;
    align-items: start;
    padding: 3rem 3rem 1.5rem;
    color: var(--color-text-light);
}

    .bottom .partners {
        display: grid;
        grid-template: min-content 7rem / repeat(2, 1fr);
        justify-items: center;
        align-items: center;
        grid-gap: 4rem;
        grid-column: span 2;
    }

        .bottom .partners .title {
            grid-area: 1/1/2/4;
            margin-bottom: 1rem;
        }

        .bottom .partners img {
            max-width: 75%;
            max-height: 75%;
        }

    .bottom .social .network {
        display: grid;
        grid-template: 1fr 1fr/3rem 0.5rem 1fr;
        grid-template-areas: "logo . title" "logo . extra";
        grid-gap: 0.5rem;
        margin-top: 1rem;
        height: 3rem;
    }

        .bottom .social .network .logo {
            max-height: 100%;
            max-width: 100%;
            grid-area: logo;
        }

        .bottom .social .network .title {
            grid-area: title;
            font-weight: bold;
            align-self: end;
        }

        .bottom .social .network .extra {
            grid-area: extra;
            font-size: 0.8rem;
            align-self: start;
        }

        .bottom .social .network:first-of-type {
            margin-top: 2rem;
        }

    .bottom .links {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

        .bottom .links .title {
            margin-bottom: 1rem;
        }

        .bottom .links .link {
            margin-top: 1rem;
        }

    .bottom .copyright {
        grid-area: 2/1/3/3;
        justify-self: end;
        align-self: center;
    }

    .bottom .ahron-mark {
        grid-area: 2/3/3/5;
        position: relative;
        padding-left: 2.5rem;
        height: 2rem;
        line-height: 2rem;
        color: inherit;
        text-decoration: none;
    }

        .bottom .ahron-mark:before {
            content: " ";
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 2rem;
            height: 2rem;
            background-image: url("https://ahron.cz/logo.svg");
            background-size: contain;
            filter: saturate(0) brightness(10);
            transition: filter 0.15s ease;
        }

        .bottom .ahron-mark:hover:before {
            filter: saturate(1) brightness(1);
        }

@media screen and (min-width: 1280px) and (max-width: 1366px) {
    .offset-top {
        margin-top: 4rem;
    }

    .top {
        height: 4rem;
        padding: 1rem 3rem;
    }

        .top .logo-container .logo {
            height: 2rem;
        }

    #hero .cta-box .primary {
        font-size: 2.5rem;
        line-height: 2.75rem;
        margin-bottom: 1rem;
    }

    #hero .cta-box .secondary {
        font-size: 1.75rem;
        line-height: 2rem;
    }

    #articles main {
        grid-template-columns: repeat(3, minmax(auto, 20rem));
    }

    #video {
        height: 15rem;
    }

    #trainer-list main article {
        width: 20rem;
        height: 14rem;
    }
}

@media screen and (min-width: 800px) and (max-width: 1279.99999999px) {
    .with-title > hr {
        height: 0.25rem;
    }

    .with-title header {
        line-height: var(--clip-path-element-height-0-75x);
        height: var(--clip-path-element-height-0-75x);
        -webkit-clip-path: var(--clip-path-height-0-75x);
        clip-path: var(--clip-path-height-0-75x);
        padding: 0 4rem 0 1.5rem;
    }

        .with-title header h2 {
            font-size: 1.25rem;
        }

    .offset-top {
        margin-top: 4rem;
    }

    .top {
        height: 4rem;
        font-size: 1.25rem;
        padding: 1rem 3rem;
    }

        .top .logo-container .logo {
            height: 2rem;
        }

    #hero {
        background-position: 65% 10%;
    }

        #hero .cta-box {
            height: var(--clip-path-element-height-3x);
            -webkit-clip-path: var(--clip-path-height-3x);
            clip-path: var(--clip-path-height-3x);
            bottom: 25%;
            max-width: 85%;
            padding: 0 0 0 1.5rem;
        }

            #hero .cta-box .primary {
                font-size: 2.25rem;
                line-height: 2.5rem;
                margin-bottom: 1rem;
            }

            #hero .cta-box .secondary {
                font-size: 1.5rem;
                line-height: 1.75rem;
            }

        #hero .cta-button {
            line-height: var(--clip-path-element-height-0-75x);
            height: var(--clip-path-element-height-0-75x);
            -webkit-clip-path: var(--clip-path-height-0-75x);
            clip-path: var(--clip-path-height-0-75x);
            bottom: 15%;
            padding: 0 4rem 0 2.5rem;
            font-size: 1.25rem;
        }

    #articles main {
        display: flex;
        flex-direction: column;
        padding: 0 1.5rem;
        margin: 1.5rem 0;
        width: initial;
    }

        #articles main article {
            width: 100%;
        }

    #video {
        height: 15rem;
    }

    #trainer-list main {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-gap: 2rem;
        grid-auto-flow: column;
        padding: 0 1.5rem;
        margin: 1.5rem 0;
        width: initial;
    }

        #trainer-list main article {
            width: initial;
            height: 16rem;
        }

    .bottom {
        grid-template: repeat(3, max-content)/repeat(2, 1fr);
        grid-gap: 3rem 1.5rem;
        align-items: start;
        padding: 1.5rem 1.5rem 0.75rem;
        grid-auto-flow: dense;
    }

        .bottom .partners {
            grid-template: min-content 5rem/repeat(3, 1fr);
            grid-gap: 1rem;
        }

            .bottom .partners .title {
                margin-bottom: 0;
            }

        .bottom .social .network {
            grid-template: 1fr 1fr/2rem 0.5rem 1fr;
            grid-template-areas: "logo . title" "logo . extra";
            grid-gap: 0.25rem;
            margin-top: 1rem;
            height: 2rem;
        }

            .bottom .social .network .title {
                font-size: 0.75rem;
            }

            .bottom .social .network .extra {
                font-size: 0.65rem;
            }

            .bottom .social .network:first-of-type {
                margin-top: 1rem;
            }

        .bottom .links .title {
            margin-bottom: 0.5rem;
        }

        .bottom .links .link {
            margin-top: 0.5rem;
        }

        .bottom .copyright {
            grid-area: 3/1/4/2;
            justify-self: start;
        }

        .bottom .ahron-mark {
            grid-area: 3/2/4/3;
            justify-self: end;
        }
}

@media screen and (max-width: 799.99999999px) {
    .with-title > hr {
        height: 0.25rem;
    }

    .with-title header {
        line-height: var(--clip-path-element-height-0-75x);
        height: var(--clip-path-element-height-0-75x);
        -webkit-clip-path: var(--clip-path-height-0-75x);
        clip-path: var(--clip-path-height-0-75x);
        padding: 0 4rem 0 1.5rem;
    }

        .with-title header h2 {
            font-size: 1.25rem;
        }

    .offset-top {
        margin-top: 4rem;
    }

    .aside-container .categories .category.category-nest-1 {
        padding-left: 2.25rem;
    }

    .aside-container .categories .category.category-nest-2 {
        padding-left: 3rem;
    }

    .aside-container .categories .category.category-nest-3 {
        padding-left: 3.75rem;
    }

    .aside-container .categories .category.category-nest-4 {
        padding-left: 4.5rem;
    }

    .aside-container .categories .category.category-nest-5 {
        padding-left: 5.25rem;
    }

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.25rem;
        padding: 0.5rem 1.5rem;
        height: 4rem;
        -moz-user-select: none;
        user-select: none;
    }

        .top .logo-container .logo {
            height: 3rem;
        }

        .top .nav-desktop {
            display: none;
        }

        .top .mobile-nav-icon {
            display: initial;
            -moz-user-select: none;
            user-select: none;
        }

    .nav-mobile-container {
        display: initial;
        position: fixed;
        right: 0;
        top: 4rem;
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.35));
        z-index: 60;
        transition: filter 0.25s ease, transform 0.25s ease;
        transform: translateX(100%);
    }

        .nav-mobile-container.active {
            filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.35));
            transform: translateX(0);
        }

    .nav-mobile {
        height: var(--clip-path-element-height-2-5x);
        -webkit-clip-path: var(--clip-path-height-2-5x-reverse);
        clip-path: var(--clip-path-height-2-5x-reverse);
        padding: 0 1.5rem 0 7rem;
        background: var(--color-brand);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        color: var(--color-text-light);
        box-shadow: var(--shadow-subtle);
        text-align: right;
    }

    .mobile-veil {
        display: initial;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.75);
        z-index: 50;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

        .mobile-veil.active {
            opacity: 1;
            pointer-events: initial;
        }

    #hero {
        background-position: 70% 10%;
    }

        #hero .cta-box {
            height: var(--clip-path-element-height-3x);
            -webkit-clip-path: var(--clip-path-height-3x);
            clip-path: var(--clip-path-height-3x);
            bottom: 15%;
            max-width: 95%;
            padding: 0 0 0 1.5rem;
        }

            #hero .cta-box .primary {
                font-size: 1.75rem;
                line-height: 2rem;
                margin-bottom: 0.75rem;
                padding-right: 3rem;
            }

            #hero .cta-box .secondary {
                font-size: 1.25rem;
                line-height: 1.5rem;
                padding-right: 8rem;
            }

        #hero .cta-button {
            line-height: var(--clip-path-element-height-0-75x);
            height: var(--clip-path-element-height-0-75x);
            -webkit-clip-path: var(--clip-path-height-0-75x);
            clip-path: var(--clip-path-height-0-75x);
            bottom: 5%;
            padding: 0 4rem 0 2.5rem;
            font-size: 1.25rem;
        }

    #articles main {
        display: flex;
        flex-direction: column;
        padding: 0 1.5rem;
        margin: 1.5rem 0;
        width: 100%;
        grid-gap: initial;
    }

        #articles main article {
            width: 100%;
        }

            #articles main article:not(:first-of-type) {
                margin-top: 3rem;
            }

    #articles.with-aside {
        display: flex;
        flex-direction: column;
    }

    #article-view {
        display: flex;
        flex-direction: column;
    }

        #article-view header {
            width: 100%;
            -webkit-clip-path: none;
            clip-path: none;
            height: initial;
            padding: 0.75rem 1.5rem;
        }

            #article-view header h2 {
                display: block;
                line-height: 1.3;
            }

        #article-view .metadata {
            margin: 1.5rem 1.5rem 1.5rem;
            display: flex;
            flex-direction: column;
        }

            #article-view .metadata .publication-date {
                margin-right: 3rem;
            }

        #article-view .content {
            margin: 0 1.5rem 1.5rem;
        }

            #article-view .content .main-image {
                max-width: 100%;
                margin-bottom: 0.5rem;
            }

            #article-view .content p {
                margin: 1.5rem 0;
            }

        #article-view .aside-container {
            margin-top: 0;
        }

        #article-view .comments {
            margin: 0 0 1.5rem;
        }

            #article-view .comments header {
                line-height: var(--clip-path-element-height-0-75x);
                height: var(--clip-path-element-height-0-75x);
                -webkit-clip-path: var(--clip-path-height-0-75x);
                clip-path: var(--clip-path-height-0-75x);
                width: max-content;
                padding: 0 4rem 0 1.5rem;
                margin-bottom: 1.5rem;
            }

            #article-view .comments #disqus_thread {
                max-width: 60rem;
                margin: 0 1.5rem;
            }

    .aside-container {
        margin: 1.5rem 0;
    }

        .aside-container > *:not(:first-child) {
            margin-top: 3rem;
        }

        .aside-container h3 {
            padding: 0 1.5rem 0 3rem;
        }

        .aside-container .categories h3 {
            margin-bottom: 1.5rem;
        }

        .aside-container .categories .category {
            padding: 0 1.5rem;
        }

        .aside-container .similar-articles .articles-container {
            display: flex;
            flex-direction: column;
            padding: 1.5rem 1.5rem 0;
        }

        .aside-container .social.wide {
            display: flex;
            flex-direction: column;
        }

            .aside-container .social.wide .network:first-of-type {
                margin-top: 1rem;
            }

        .aside-container .social .network {
            padding-left: 1.5rem;
        }

    #video {
        display: none;
    }

    #trainer-list main {
        display: flex;
        flex-direction: column;
        padding: 0 1.5rem;
        margin: 1.5rem 0;
        width: 100%;
        grid-gap: initial;
    }

        #trainer-list main article {
            width: 100%;
            height: 16rem;
        }

            #trainer-list main article:not(:first-of-type) {
                margin-top: 1.5rem;
            }

    #order-form {
        display: flex;
        flex-direction: column;
    }

        #order-form form {
            padding: 1.5rem 0;
        }

            #order-form form section h2 {
                padding: 0 4rem 0 1.5rem;
            }

            #order-form form section main {
                padding: 1.5rem 1.5rem 0;
            }

                #order-form form section main p {
                    margin-bottom: 0.25rem;
                }

                    #order-form form section main p:not(:first-of-type) {
                        margin-top: 1rem;
                    }

                #order-form form section main .radio-group {
                    display: flex;
                    flex-direction: column;
                }

                    #order-form form section main .radio-group label {
                        width: 100%;
                    }

                        #order-form form section main .radio-group label:not(:first-of-type) {
                            margin-top: 0.75rem;
                            margin-left: 0;
                        }

                #order-form form section main .text-group {
                    margin-top: 1rem;
                    display: flex;
                    flex-direction: column;
                    grid-gap: initial;
                }

                    #order-form form section main .text-group:first-child {
                        margin-top: 0;
                    }

                    #order-form form section main .text-group p:not(:first-of-type) {
                        margin-top: 0.75rem;
                    }

                #order-form form section main .checkbox-container label {
                    flex-shrink: 1;
                }

                #order-form form section main button[type=submit] {
                    width: 100%;
                }

            #order-form form input[type=number], #order-form form input[type=text], #order-form form input[type=tel], #order-form form input[type=email], #order-form form input.wide, #order-form form select {
                width: 100%;
            }

            #order-form form input[type=file] {
                height: 2.5rem;
                width: 100%;
                border-radius: 0.5rem;
            }

    .bottom {
        display: flex;
        flex-direction: column;
        grid-gap: initial;
        padding: 1.5rem 1.5rem 0.75rem;
    }

        .bottom .partners {
            margin-top: 3rem;
            display: flex;
            flex-direction: column;
            align-self: stretch;
            grid-gap: initial;
        }

            .bottom .partners img {
                object-fit: contain;
                height: 5rem;
                width: 100%;
                margin-top: 1rem;
            }

            .bottom .partners .title {
                margin-bottom: 0;
                align-self: start;
            }

        .bottom .social {
        }

            .bottom .social .network {
                grid-template: 1fr 1fr/2rem 0.5rem 1fr;
                grid-template-areas: "logo . title" "logo . extra";
                grid-gap: 0.25rem;
                margin-top: 1rem;
                height: 2rem;
            }

                .bottom .social .network .title {
                    font-size: 0.75rem;
                }

                .bottom .social .network .extra {
                    font-size: 0.65rem;
                }

                .bottom .social .network:first-of-type {
                    margin-top: 1rem;
                }

        .bottom .links {
            margin-top: 3rem;
            text-align: left;
        }

            .bottom .links .title {
                margin-bottom: 0.5rem;
            }

            .bottom .links .link {
                margin-top: 0.5rem;
            }

        .bottom .copyright {
            margin-top: 3rem;
            align-self: center;
        }

        .bottom .ahron-mark {
            margin-top: 1.5rem;
            align-self: center;
        }
}

/*# sourceMappingURL=style.css.map */