body{
    --accent-color: #F9C349;
    --accent-color-2: #FFB100;
    --gradient-start: #000;
    --gradient-end: #eab72b;
    --color: #fff;
    --btn-color: #010101;
    --btn-bg-color: var(--accent-color);
    --min-font-size: 10pt;
    --font-size: calc(max(3vw, var(--min-font-size)));
    --line-height: 1.7em;
    accent-color: var(--accent-color);
    background-color: #000;
    min-height: 100%;
    font-size: var(--font-size);
    line-height: var(--line-height);
    background-image: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    background-attachment: scroll;
    background-repeat:no-repeat;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto;
    color: var(--color);
    font-family: Montserrat, sans-serif;
    scroll-behavior: smooth;
}
header
{
    background-image: url(/img/Stephan-en-Pia-Sportspecifiq.webp);
    min-height: 26em;
    display: flex;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center 30%;
    justify-content: center;
    align-items: end;
    > h1
    {
        font-size: 7vw;
        text-align: center;
        margin-bottom: 0.5em;
        > span
        {
            display: block;
            font-size: 0.6em;
            line-height: 1.2em;
        }
    }
}
/*top-nav, top-nav * {overflow: hidden;}*/
top-nav > a
{    
    display: flex;
    align-items: center;
    > img
    {
        max-height: 1em;
        margin-right: 0.2em;
    }
    > svg
    {
        width: 1em;
        margin-left: 0.2em;
    }
}
top-nav
{
    --small-home-size: 2em;
}
footer
{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2em;
    background-color: #000;
    line-height: 1.5em;
    > p
    {
        text-align: center;
        color: #fff;
        &::before{
            display: block;
            font-weight: bold;
        }
    }
    > p
    {
        &::before
        {
            content: 'Openingstijden:';
        }
    }
    a, a:visited
    {
        color: var(--accent-color);
        text-decoration: none;
        &:hover{
            color: var(--accent-color-2);
        }
    }
    /* 3e link en alles daarna wit laten */
    a:nth-of-type(1n+3){
        color: #fff;
    }
    > img
    {
        max-width: 60%;
        margin-top: 2em;
    }
}
main
{
    > content {
        display: block;
        padding: 1em;
    }
    > h2{
        text-align: center;
        margin-bottom: 0;
    }
    > h2 + div
    {
        padding: 0 1em;
    }
    a, a:visited
    {
        color: var(--accent-color);
        text-decoration: none;
        &:hover{
            color: var(--accent-color-2);
        }
    }
button[cta], a[cta]
{
    text-transform: uppercase;
    background-color: var(--btn-bg-color);
    color: var(--btn-color);
    padding: 1em 3em;
    cursor: pointer;
    transition: background-color 0.3s;
    letter-spacing: 0.2em;
    font-size: 1em;
    &:hover{
        background-color: var(--accent-color-2);
    }
}
a[cta]
{
    font-size: 9pt;
    display: inline-block;
    &:visited, &:hover
    {
        color: var(--btn-color);
    }
}
}
h1, h2, h3, h4, h5, h6
{
    color: var(--color);
    outline-color: rgb(255,255,255);
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.99);
    line-height: 1.2em;
}
h2
{
    font-size: 2em;
}
hr
{
    border: none;
    &::after
    {
        display: block;
        content: '';
        width: 5em;
        height: 0.2em;
        background-color: var(--accent-color);
    }
}
content
{
    ul
    {
        --fill: var(--accent-color);
        list-style: none;
        padding: 0;
        font-size: 1rem;/*3vw;*/
        > li {
            padding: 0;
            line-height: 2em;
            display: flex;
            align-items: center;
            column-gap: 0.3em;
            > svg
            {
                max-height: 1em;
                max-width: 1em;
                align-self: start;
                margin-top: 0.5em;
            }
        }
    }
}
ol > li 
{
    overflow: visible;
}
img ~ p
{
    font-weight: bold;
}
form, contact-form {
    padding: 1em;
    max-width: 40em;
    margin: 0 auto;
    label + input {
        margin-bottom: 1em;
    }
    label {
        display: block;
        margin-bottom: 0.3em;
    }
    input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,button {
        width: 100%;
        padding: 8px;
        font-size: 1em;
        box-sizing: border-box;
    }
    fieldset {
        border: 1px solid #ccc;
        padding: 1em;
        margin-bottom: 1em;
    }
    legend {
        font-weight: bold;
        padding: 0 0.5em;
    }
    label, legend 
    {
        /* Required indicator */
        > span[aria-hidden="true"]
        {
            color: red;
            margin-left: 0.25em;
            display: inline;
        }
    }
    flex {
        display: flex;
        column-gap: 1em;
        > *{
            flex: 1;
        }
    }
}
contact-form
{
display: block;
margin: 4em auto;
}
contact-form input:not([type="radio"]), contact-form textarea, contact-form select
{                
    border: 1px solid #dadbdd;
    border-radius: 0.5em;
    font-family: -apple-system, "system-ui", Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    color: #606266;
    line-height: 1;
    max-width: 100%;
    padding: 11px 15px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    display: block;
    width: 100%;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
}
contact-form > div {
    display: flex;
    gap: 20px 20px;
}
img{
    max-width: 100%;
}
w43-footer
{
    font-size: 10pt;
}
li > span{
    font-size: 0.5em;
}
[c]
{
    text-align: center;
}
[b]
{
    font-weight: bold;
}
footer > p + social-media
{
    font-size: 0.5em;
    margin: 0 0 4em 0;
}
[aria-hidden="true"]
{
    display: none;
}
cf-ts{
text-align: center;
}
key-metrics
{
    --val-color: var(--accent-color);
    font-size: 0.9em;
    background-image: linear-gradient(45deg, #000000 0%, #876007 100%);
    background-position: 0% 0%;
    background-repeat: repeat;
    background-size: cover;
    border: solid 3px var(--accent-color);
    margin-bottom: 1em;
}
@media only screen and (min-width: 640px) {
    top-nav > a > img
    {
        max-height: 1em;
    }
    menu{
        font-size: 1.6vw;
        line-height: 2em;
        justify-content: start;
        > img
        {
            max-width: 2em;
            margin-right: 0.5em;
        }
    }
    ul {
        font-size: 1.5rem;
    }
}
@media only screen and (min-width: 1000px) {
    body
    { 
        font-size: calc(min(var(--font-size), 12pt));
        > header{
            min-height: 33em;
            background-size: auto;
            background-position: center 25%;
            > h1 {
                font-size: 3em;
            }
        }
        > main
        { 
            > content > div {
                display: flex;
                column-gap: 4em;
                /*border-bottom: solid 1px #000;*/
                padding-bottom: 3em;
                > div:nth-of-type(1)
                {
                    flex: 2;
                }
                > div:nth-of-type(2)
                {
                    flex: 1;
                    > ul
                    {
                        font-size: inherit;
                    }
                    > img{
                        margin-top: 2em;
                    }
                }
            }
            > div {
                display: flex;
                flex-wrap: wrap;
                column-gap: 1.5em;
                justify-content: center;
                margin-top: 2em;
                > product-info{
                    font-size: 1em;
                    width: 30em;
                }
            }
        }
    }
    button[cta]
    {                    
        font-size: inherit;
    }
    w43-footer
    {
        font-size: 1rem;
    }
    yt-video[video-id="ICfYEaDPjyQ"]
    {
        --w: unset;
        --h: unset;
        max-width: 100%;
    }
}
.mobile-margin
{
    margin: 1em;
}
center-mobile{
    justify-content: center;
    display: flex;
}
top-nav > a
{
    line-height: 1em;
    min-height: unset;
    border-bottom: dashed;
    border-bottom-width: 2px;
    border-bottom-color: var(--accent-color);
}
top-nav > a[slot="home"] {
    border-bottom: none;
}
@media only screen and (min-width: 700px) {
    h2 > br + br { display: none; }
    .mobile-margin
    {
        margin: 1em 0 0 0;
    }
    center-mobile{
        justify-content: unset;
        display: block;
    }
}
@media only screen and (min-width: 1281px) {
    top-nav > a
    {
        border-bottom: none;
    }
}
@media only screen and (min-width: 1440px) {
    body{
        font-size: 15pt;
        & > main {
            & > content{
                max-width: 1440px;
                margin: 0 auto;
            }
            & > div {
                > product-info {                    
                    font-size: 12pt;
                    border-bottom-right-radius: 3em;
                    border-top-right-radius: 3em;
                }
            }
            form
            {
                background-color: rgba(255, 255, 255, 0.1);
                border-radius: 1em;
                margin: 1em auto;
            }
        }
        img{
            border-radius: 1em;
        }
    }
}
@media (prefers-color-scheme: dark) {
    body:not(.light), body.dark
    {
        --gradient-end: #333;
        > main
        { 
            > content > div {
                /*border-bottom-color: var(--accent-color);*/
            }
        }
        before-after
        {
            --heading-color: #fff;
            --card-bg: rgba(0,0,0,0.2);
        }
    }
}
span.chk
{
    position: absolute;
    top: 0;
    left: 0;
    height: 1.4em;
    width: 1.4em;
    background-color: #444;
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    transition: background-color 0.2s;
    &:after {
        content: "";
        position: absolute;
        display: none;
        left: 0.6em;
        top: 0.3em;
        width: 0.3em;
        height: 0.6em;
        border: solid #fff;
        border-width: 0 0.15em 0.15em 0;
        transform: rotate(45deg);
    }
}
navigation-transition
{
    --show-opacity: 1;
    --bg-color: #000;
    --transition-duration: 0.3s;
    opacity: 0;
    display: none;
}
user-review{
    color: #000;
    overflow: visible;
}
scrolling-review-container
{
    --color: #fff; 
    --bg-color: transparent;
}/*
product-info[name="Digital Coaching"]
{
    --bg-img: url(/img/overhead-squat.webp);
}
product-info[name="Trainingsadvies"]
{
    --bg-img: url(/img/turkish.webp);
}
product-info[name="Voedingsadvies"]
{
    --bg-img: url(/img/steef-shake.webp);
}
product-info[name="Personal Training"]
{
    --bg-img: url(/img/overhead-squat.webp);
}
product-info[name="Trainings- OF Voedingsadvies"]
{
    --bg-img: url(/img/turkish.webp);
}*/
product-info[name="Digital Coaching"]
{
    --bg-img: url(/img/overhead-squat.webp);
}
product-info[name="Trainingsadvies"]
{
    --bg-img: url(/img/Pakketten-2.webp);
}
product-info[name="Voedingsadvies"]
{
    --bg-img: url(/img/steef-shake.webp);
}
product-info[name="Personal Training"]
{
    --bg-img: url(/img/Pakketten-1.webp);
}
product-info[name="Trainings- OF Voedingsadvies"]
{
    --bg-img: url(/img/turkish.webp);
}
product-info {
    --background-color: rgb(from #000 r g b / 60%);
    --hover-color: rgb(from #494b35 r g b / 70%);
}
blog-page::slotted(h2) {
    font-family: Montserrat, sans-serif;
    outline-color: unset;
    text-shadow: none;
    color: #000;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 0;
}
#reviews > div:nth-of-type(1) > div:nth-of-type(1)
{
    flex-direction: column;
}
/*tijdelijke fix*/
#paginas {
    & > div {
        &:nth-of-type(2) {
            overflow: auto;
            > div {
                overflow: auto;
            }
        }
    }
}
blog-page
{
    overflow: auto;
}