/* --------------------------------- */
/*          General Styling          */
/* --------------------------------- */
#regular-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}
#regular-column .image-column {
    display: flex;
    justify-content: center;
    align-items: center;
}
#regular-column .image-column svg {
    display: block;
    max-width: 500px;
}
.side-by-side-left h2, #regular-column h2 {
    margin-bottom: 15px;
}

/* ------------------------------------ */
/*          Responsive Styling          */
/* ------------------------------------ */
@media screen and (max-width: 850px) {
    #regular-column {
        grid-template-columns: 1fr;
    }
    #regular-column .image-column img {
        max-width: 50vw;
    }
}

/* ------------------------------ */
/*          Animated SVG          */
/* ------------------------------ */
#regular-column .image-column svg {
    display: none;
}
#regular-column .image-column svg.animateclass {
    display: block;
}
/* y-links */
    #animated-logo.animateclass #mask-y-links {
        height: 0;
        animation: a-y-links 1s cubic-bezier(0.7, 0, 0.3, 1) 0s forwards;
    }
    @keyframes a-y-links {
        to {
            height: 220.75px;
        }
    }
/* y-rechts */
    #animated-logo.animateclass #mask-y-rechts {
        height: 0;
        y: 427.37px;
        animation: a-y-rechts 1s cubic-bezier(0.7, 0, 0.3, 1) 2s forwards;
    }
    @keyframes a-y-rechts {
        to {
            height: 322.93px;
            y: 104.44px;
        }
    }
/* z-boven */
    #animated-logo.animateclass #mask-z-boven {
        width: 0px;
        x: 745px;
        animation: a-z-boven 1s cubic-bezier(0.7, 0, 0.3, 1) 0.5s forwards;
    }
    @keyframes a-z-boven {
        to {
            width: 204.36px;
            x: 540.64px;
        }
    }
/* z-midden */
    #animated-logo.animateclass #mask-z-midden {
        height: 0px;
        animation: a-z-midden 1s cubic-bezier(0.7, 0, 0.3, 1) 2s forwards;
    }
    @keyframes a-z-midden {
        to {
            height: 248.72px;
        }
    }
/* z-boven */
    #animated-logo.animateclass #mask-z-onder {
        width: 0px;
        animation: a-z-onder 1s cubic-bezier(0.7, 0, 0.3, 1) 0.5s forwards;
    }
    @keyframes a-z-onder {
        to {
            width: 215.93px;
        }
    }
/* e-boven-midden */
    #animated-logo.animateclass #e-boven-midden {
        width: 0px;
        animation: a-e-boven-midden 1s cubic-bezier(0.7, 0, 0.3, 1) 0s forwards;
    }
    @keyframes a-e-boven-midden {
        to {
            width: 128.21px;
        }
    }
/* e-boven-buiten */
    #animated-logo.animateclass #mask-e-boven-buiten {
        stroke-dasharray: 0 552.1636352539062;
        animation: a-e-boven-buiten 1.5s cubic-bezier(0.7, 0, 0.3, 1) 1s forwards;
    }
    @keyframes a-e-boven-buiten {
        to {
            stroke-dasharray: 552.1636352539062 0;
        }
    }
/* e-onder-midden */
    #animated-logo.animateclass #e-onder-midden {
        width: 0px;
        animation: a-e-onder-midden 1s cubic-bezier(0.7, 0, 0.3, 1) 0s forwards;
    }
    @keyframes a-e-onder-midden {
        to {
            width: 128.21px;
        }
    }
/* e-onder-buiten */
    #animated-logo.animateclass #mask-e-onder-buiten {
        stroke-dasharray: 0 552.1636352539062;
        animation: a-e-onder-buiten 1.5s cubic-bezier(0.7, 0, 0.3, 1) 1s forwards;
    }
    @keyframes a-e-onder-buiten {
        to {
            stroke-dasharray: 552.1636352539062 0;
        }
    }
/* rb-rechthoek */
    #animated-logo.animateclass #rb-rechthoek {
        height: 0px;
        y: 668.37px;
        animation: a-rb-rechthoek 1s cubic-bezier(0.7, 0, 0.3, 1) 0s forwards;
    }
    @keyframes a-rb-rechthoek {
        to {
            height: 563.8px;
            y: 104.57px;
        }
    }
/* b-cirkel */
    #animated-logo.animateclass #mask-b-cirkel {
        stroke-dasharray: 0 580.1268310546875;
        stroke-dashoffset: -290.063415527;
        animation: a-b-cirkel 1.5s cubic-bezier(0.7, 0, 0.3, 1) 1s forwards;
    }
    @keyframes a-b-cirkel {
        to {
            stroke-dasharray: 580.1268310546875 0;
            stroke-dashoffset: 290.063415527;
        }
    }
/* r-krul */
    #animated-logo.animateclass #mask-r-krul {
        width: 0px;
        animation: a-r-krul 1s cubic-bezier(0.7, 0, 0.3, 1) 2s forwards;
    }
    @keyframes a-r-krul {
        to {
            width: 83.26px;
        }
    }
/* w-links-buiten */
    #animated-logo.animateclass #mask-w-links-buiten {
        height: 0px;
        animation: a-w-links-buiten 1s cubic-bezier(0.7, 0, 0.3, 1) 0s forwards;
    }
    @keyframes a-w-links-buiten {
        to {
            height: 229.99px;
        }
    }
/* w-links-binnen */
    #animated-logo.animateclass #mask-w-links-binnen {
        height: 0px;
        y: 663.56px;
        animation: a-w-links-binnen 1s cubic-bezier(0.7, 0, 0.3, 1) 2s forwards;
    }
    @keyframes a-w-links-binnen {
        to {
            height: 236.18px;
            y: 427.38px;
        }
    }
/* w-rechts-binnen */
    #animated-logo.animateclass #mask-w-rechts-binnen {
        height: 0px;
        y: 663.56px;
        animation: a-w-rechts-binnen 1s cubic-bezier(0.7, 0, 0.3, 1) 0s forwards;
    }
    @keyframes a-w-rechts-binnen {
        to {
            height: 236.18px;
            y: 427.38px;
        }
    }
/* w-rechts-buiten */
    #animated-logo.animateclass #mask-w-rechts-buiten {
        height: 0px;
        animation: a-w-rechts-buiten 1s cubic-bezier(0.7, 0, 0.3, 1) 2s forwards;
    }
    @keyframes a-w-rechts-buiten {
        to {
            height: 236.18px;
        }
    }
/* y-groot-rechts */
    #animated-logo.animateclass #mask-y-groot-rechts {
        height: 0px;
        animation: a-y-groot-rechts 0.75s cubic-bezier(0.7, 0, 0.3, 1) 3.4s forwards;
    }
    @keyframes a-y-groot-rechts {
        to {
            height: 559.17px;
        }
    }
/* y-groot-links */
    #animated-logo.animateclass #mask-y-groot-links {
        height: 0px;
        y: 663.56px;
        animation: a-y-groot-links 0.5s cubic-bezier(0.7, 0, 0.3, 1) 3s forwards;
    }
    @keyframes a-y-groot-links {
        to {
            height: 357.41px;
            y: 306.15px;
        }
    }