:root {
    --HSV-grey: rgb(76, 84, 92);
    --HSV-orange: rgb(225, 128, 68);
    --White: rgb(255, 255, 255);
    --Courses-blue: rgb(0, 181, 226);
    /*Opacity as declared in the official HSV Brand Guideline*/
    --HSV-grey-80: rgba(76, 84, 92, 0.8);
    --HSV-grey-60: rgba(76, 84, 92, 0.6);
    --HSV-grey-40: rgba(76, 84, 92, 0.4);
    --HSV-grey-20: rgba(76, 84, 92, 0.2);
    --HSV-orange-80: rgba(225, 128, 68, 0.8);
    --HSV-orange-60: rgba(225, 128, 68, 0.6);
    --HSV-orange-40: rgba(225, 128, 68, 0.4);
    --HSV-orange-20: rgba(225, 128, 68, 0.2);
    --Courses-blue-80: rgba(0, 181, 226, 0.8);
    --Courses-blue-60: rgba(0, 181, 226, 0.6);
    --Courses-blue-40: rgba(0, 181, 226, 0.4);
    --Courses-blue-20: rgba(0, 181, 226, 0.2);
}

h1 {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    line-height: 26.4px;
}

h3 {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    line-height: 15.4px;
}

p {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 20px;
}

blockquote {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 21px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 30px;
}

pre {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 18.5714px;
}

/*@font-face {
    font-family: "neris-black";
    font-weight: normal;
    font-style: normal;
    src: url("/fonts/neris-blackitalic-webfont.eot"), url("/fonts/neris-blackitalic-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/neris-blackitalic-webfont.woff2") format("woff2"), url("/fonts/neris-blackitalic-webfont.woff") format("woff");
}

@font-face {
    font-family: "neris-light";
    font-weight: normal;
    font-style: normal;
    src: url("/fonts/neris-light-webfont.eot"), url("/fonts/neris-light-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/neris-light-webfont.woff2") format("woff2"), url("/fonts/neris-light-webfont.woff") format("woff");
}*/

@font-face {
    font-family: "icomoon";
    src: url("/fonts/icomoon.eot"), url("/fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("/fonts/icomoon.svg") format("svg"), url("/fonts/icomoon.woff") format("woff");
}

.activity-availability-container {
    display: flex;
    flex-direction: column;
}

.activity-availability-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 10px;
    align-items: center;
    background-color: #EDEDED;
}

.activity-availability-item {
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}


.activity-booking-details-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: #ededed;
    margin-top: .5rem;
}

.activity-booking-details-item {
    display: flex;
    align-items: center;
    margin: 1rem;
}

    .activity-booking-details-item.activity-description {
        font-size: 0.8rem;
        font-style: italic;
        grid-column: 1 / span 4;
        color: var(--HSV-grey);
        margin-top: 0;
    }

.cancel-button {
    transform: skewX(-10deg) scale(.75) !important;
}

.cancel-text {
    color: darkgrey;
    margin-right: 4.5rem;
    text-transform: uppercase;
    font-weight: bold;
}

.new-booking {
    font-weight: bold;
    color: #76b82a;
}

.activity-container {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 30px;
    /*background-color: chocolate;*/
    /*border: 30px solid transparent;*/
}

.activity-item {
    min-height: 250px;
    /*background-color: darkcyan;*/
    /*border:1px solid #000;*/
}

.activity-item-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    border: 1px solid #EDEDED;
}

.activity-item-body {
    margin: 10px 10px;
}

.activity-item-footer {
    margin: 1em auto;
}

.energie-input-datepicker {
    -webkit-appearance: none;
    font-size: 1em;
    background-color: #fff;
    padding: 10px 20px;
    outline: 0;
    border: 1px solid #000;
    /*height: 50px;*/
    border-radius: 0 !important;
    font-family: "neris-black", sans-serif;
    font-weight: 500;
    color: #1A1818 !important;
}

.font-primary {
    font-family: "neris-light", sans-serif;
}

.font-secondary {
    font-family: "neris-black", sans-serif;
}

fieldset.quarter {
    width: 25%;
}

.mainbutton {
    background: none;
    border: 1px solid white;
    cursor: pointer;
    transition: 0.4s;
    padding: 0;
}

    .mainbutton > span {
        background: none;
        font-family: "neris-black", sans-serif;
        font-weight: 600;
        text-transform: uppercase;
        color: white;
        padding: 11px 20px;
        display: block;
        font-size: 1.15em;
    }

    .mainbutton.solid-white {
        background: white;
    }

        .mainbutton.solid-white span {
            color: #76B82A;
        }

    .mainbutton.angular {
        background: #E18044;
        border-color: #E18044;
        /*transform: skewX(-10deg);*/
        margin-right: 20px;
    }

        .mainbutton.angular span {
            color: white;
            /*transform: skewX(10deg);*/
            padding: 15px 25px;
        }

button.mainbutton.angular.right {
    float: right;
}

.payment-summary.right {
    float: right;
}

@media screen and (max-width: 768px) {
    .mainbutton.angular span {
        padding: 10px 15px;
    }
}

.mainbutton.courses-blue {
    background: #4C545C;
    border: 1px solid #4C545C;
}

    .mainbutton.courses-blue:hover {
        background: #E18044;
        border: 1px solid #E18044;
    }

.mainbutton.grey {
    background: #EDEDED;
    border: 1px solid #EDEDED;
}

    .mainbutton.grey span {
        color: #A2A2A2;
    }

    .mainbutton.grey:hover {
        background: #A2A2A2;
        border: 1px solid #A2A2A2;
    }

        .mainbutton.grey:hover span {
            color: white;
        }

.mainbutton.full {
    width: 100%;
}

.mainbutton:hover {
    background: #4C545C;
    border-color: #4C545C;
    transition: 0.4s;
}

    .mainbutton:hover span {
        color: white;
    }

header {
    position: fixed;
    width: calc(100% - 80px);
    background: #FFFFFF;
    padding: 40px;
    top: 0;
    z-index: 1;
    top: -107px;
    transition: 0.4s;
}

@media screen and (max-width: 768px) {
    header {
        width: calc(100% - 60px);
        padding: 25px 30px;
    }
}

header.scroll-active {
    transition: 0.4s;
    top: 0;
    z-index: 99;
    padding: 47px;
}

header nav {
    width: 100%;
    height: 100vw;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    transition: 0.4s;
    opacity: 0;
}

    header nav.active {
        transition: 0.4s;
        display: block;
        opacity: 1;
    }

        header nav.active .contents {
            left: 0;
            transition: 0.2s;
        }

    header nav .sidebar {
        width: 100%;
        height: 100vw;
        background: rgba(0, 0, 0, 0.5);
        float: right;
    }

    header nav .contents {
        max-width: 450px;
        width: 100%;
        background-color: #E18044;
        padding: 70px 40px;
        position: absolute;
        left: 0;
        top: 0;
        height: 100vh;
        color: white;
        left: -530px;
        transition: 0.2s;
    }

@media screen and (max-width: 768px) {
    header nav .contents {
        width: calc(100% - 60px);
    }
}

header nav .contents .social-media {
    position: absolute;
    top: 35px;
    right: 30px;
}

    header nav .contents .social-media a {
        display: inline-block;
        width: 21px;
        height: 21px;
        margin-left: 21px;
        text-decoration: none;
    }

        header nav .contents .social-media a:first-child {
            margin-left: 0;
        }

        header nav .contents .social-media a span {
            display: block;
            text-indent: -9999px;
            position: relative;
            font-size: 21px;
            height: 18px;
            line-height: 18.4px;
        }

            header nav .contents .social-media a span:before {
                position: absolute;
                left: 0;
                top: 0;
                font-family: "icomoon";
                color: white;
                transition: 0.2s;
                text-indent: 0;
                width: 21px;
                text-decoration: none;
                text-align: center;
            }

            header nav .contents .social-media a span:hover:before {
                color: #76B82A;
            }

            header nav .contents .social-media a span.youtube-icon:before {
                content: "\e904";
            }

            header nav .contents .social-media a span.facebook-icon:before {
                content: "\e906";
            }

            header nav .contents .social-media a span.instagram-icon:before {
                content: "\e907";
            }

            header nav .contents .social-media a span.spotify-icon:before {
                content: "\e908";
            }

            header nav .contents .social-media a span.twitter-icon:before {
                content: "\e909";
            }                  

header nav .contents .highlight-links {
    margin-top: 30px;
}

    header nav .contents .highlight-links ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        header nav .contents .highlight-links ul li {
            margin-bottom: 10px;
        }

            header nav .contents .highlight-links ul li a {
                font-family: "";
                color: white;
                transition: 0.2s;
                font-size: 2.25em;
                text-decoration: none;
                font-family: "neris-black", sans-serif;
                transition: 0.4s;
                text-transform: uppercase;
            }

                header nav .contents .highlight-links ul li a:hover {
                    transition: 0.4s;
                    color: #4C545C;
                }

header nav .contents .menu-links {
    margin-top: 30px;
}

    header nav .contents .menu-links ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        header nav .contents .menu-links ul li {
            margin-bottom: 10px;
            font-size: 1.25em;
        }

            header nav .contents .menu-links ul li:last-of-type {
                margin-bottom: 0;
            }

            header nav .contents .menu-links ul li a {
                text-decoration: none;
                color: white;
                transition: 0.4s;
                text-transform: uppercase;
                font-family: "neris-black", sans-serif;
            }

                header nav .contents .menu-links ul li a:hover {
                    transition: 0.4s;
                    color: #4C545C;
                }

header .nav-button {
    float: left;
    position: relative;
    display: block;
    z-index: 2;
}

    header .nav-button .padding {
        display: inline;
    }

        header .nav-button .padding button {
            background: none;
            outline: 0px;
            border: 0px;
            border-radius: 0px;
            transition: 0.4s;
            left: -12px;
            position: relative;
        }

            header .nav-button .padding button > .spanarray {
                float: left;
                margin-right: 15px;
                padding: 0 !important;
            }

                header .nav-button .padding button > .spanarray span {
                    height: 3px;
                    width: 26px;
                    background-color: #4C545C;
                    display: block;
                    margin-bottom: 5px;
                    margin-left: 4px;
                    margin-right: 4px;
                    transition: 0.4s;
                }

@media screen and (max-width: 340px) {
    header .nav-button .padding button > .spanarray span {
        width: 18px;
    }
}

header .nav-button .padding button > .spanarray span:last-of-kind {
    margin-bottom: 0px;
}

header .nav-button .padding button > .spanarray span:nth-child(2) {
    margin-left: 0px;
    margin-right: 0px;
    width: 34px;
}

@media screen and (max-width: 340px) {
    header .nav-button .padding button > .spanarray span:nth-child(2) {
        width: 26px;
    }
}

header .nav-button .padding button:hover {
    cursor: pointer;
}

header .nav-button .padding button .spanarray span {
    background-color: #E18044 !important;
    transition: 0.4s;
}

header .nav-button .padding button:hover .spanarray span {
    background-color: #4C545C !important;
    transition: 0.4s;
}

header .nav-button .padding button > .label {
    float: left;
    margin: 0;
    padding: 0;
    top: 0px;
    position: relative;
}

    header .nav-button .padding button > .label > span {
        color: #4C545C;
        transform: skewX(10deg);
        font-family: "neris-black", sans-serif;
        text-transform: uppercase;
        font-size: 1.15em;
    }

@media screen and (max-width: 768px) {
    header .nav-button .padding button > .label > span {
        font-size: 0.9em;
        top: 3px;
        position: relative;
    }
}

header .nav-button .padding button > .label > span:first-of-type {
    display: block;
    transition: 0.4s;
}

header .nav-button .padding button > .label > span:last-of-type {
    display: none;
    transition: 0.4s;
}

@media screen and (max-width: 340px) {
    header .nav-button .padding button > .label {
        left: -8px;
    }
}

header .nav-button .padding button.active > .label span:first-of-type {
    display: none;
    transition: 0.4s;
}

header .nav-button .padding button.active > .label span:last-of-type {
    display: block;
    transition: 0.4s;
}

header .nav-button .padding button.active > .spanarray {
    display: block;
}

    header .nav-button .padding button.active > .spanarray > span {
        background-color: lime;
        opacity: 1;
    }

        header .nav-button .padding button.active > .spanarray > span:first-of-type {
            transform: rotate(45deg);
            background: #FFFFFF;
            top: 8px;
            position: relative;
            transition: 0.4s;
        }

        header .nav-button .padding button.active > .spanarray > span:nth-child(2) {
            opacity: 0;
        }

        header .nav-button .padding button.active > .spanarray > span:last-of-type {
            transform: rotate(-45deg);
            background: #FFFFFF;
            top: -8px;
            position: relative;
            transition: 0.4s;
        }

header .logo {
    position: absolute;
    top: 30px;
}

@media screen and (min-width: 769px) {
    header .logo {
        width: 425px;
        left: calc(50% - 212.5px);
        top: 5%;
    }

        header .logo .desktop {
            display: block;
        }

        header .logo .mobile {
            display: none;
        }

        header .logo img {
        }
}

@media screen and (max-width: 768px) {
    header .logo {
        top: 20px;
        width: 100px;
        left: calc(50% - 50px);
    }

        header .logo .desktop {
            display: none;
        }

        header .logo .mobile {
            display: block;
        }
}

header .members {
    position: absolute;
    top: 30px;
    right: 30px;
}

@media screen and (max-width: 768px) {
    header .members {
        top: 20px;
        right: 20px;
    }
}

.mainbutton.angular span.no-padding {
    /*padding: 0px;*/
}

header .members .mainbutton {
    /*border: 1px solid var(--HSV-orange);*/
}

    header .members .mainbutton:hover {
        border: 1px solid #4C545C;
        color: #E18044;
    }

header .members > a {
    display: inline-block;
    margin-left: 10px;
    text-decoration: none;
    background: #4C545C;
}

    header .members > a:hover {
        color: #E18044;
        background: #4C545C;
    }

    header .members > a > span:hover {
        color: #E18044;
    }

@media screen and (max-width: 768px) {
    header .members > a span {
        padding: 12px;
    }

    header .members > a:first-of-type {
        /*display: none;*/
        position: absolute;
        left: -144px;
        top: 8px;
    }
}

@media screen and (max-width: 340px) {
    header .members > a span {
        padding: 10px 8px;
        font-size: 0.9em;
    }

    header .members > a:first-of-type {
        /*display: none;*/
       /* position: absolute;
        left: -144px;*/
    }
}

header .members > .user-area {
    display: none;
    border: none;
    padding: 0;
    color: white;
    transition: 0.4s;
    cursor: pointer;
    text-decoration: none;
}

    header .members > .user-area:hover {
        color: #76B82A;
        background-color: none;
    }

    header .members > .user-area span:before {
        height: 14px;
        width: 12px;
        margin-right: 5px;
        content: "";
        display: inline-block;
        background-image: url(/images/login-avatar.svg);
        background-position: center center;
        background-size: cover;
        position: relative;
        top: 2px;
    }

@media screen and (max-width: 1150px) {
    header .members > .user-area {
        font-size: 0px;
        height: 40px;
        width: 40px;
        top: -28px;
        position: relative;
    }

        header .members > .user-area span:before {
            height: 39px;
            width: 36px;
            position: absolute;
        }
}

@media screen and (max-width: 768px) {
    header .members > .user-area {
        display: none !important;
    }
}

header .members.logged-in .user-area {
    display: none;
}

@media screen and (max-width: 768px) {
    header .members.logged-in .user-area {
        display: none !important;
    }
}

header .members.logged-in .login {
    display: inline-block;
}

body {
    font-family: "neris-light", sans-serif;
    font-weight: 400;
    font-size: 14px;
}

main {
    position: relative;
    max-width: 760px;
    padding: 0 20px;
    margin: 70px auto 70px auto;
}

@media all and (max-width: 768px) {
    main {
        margin: 40px auto 40px auto;
    }
}

main.large {
    max-width: 1080px;
}

a {
    color: var(--HSV-orange);
}

    a:hover {
        color: var(--HSV-grey);
        transition: 0.4s;
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 20px 0;
    padding: 0;
    font-family: "neris-black", sans-serif;
    text-transform: uppercase;
    color: #4C545C;
}

h1 {
    font-size: 2.6em;
}

p {
    margin-top: 0px;
    line-height: 1.4em;
    padding-bottom: 20px;
    margin-bottom: 0;
}

strong {
    font-weight: 600;
}

input[type=text],
input[type=tel],
input[type=number],
input[type=email],
input[type=password],
textarea[type=text] {
    background: rgb(76, 84, 92, 0.2);
    width: calc(100% - 30px);
    padding: 15px;
    outline: 0;
    border: 0;
    -webkit-appearance: none;
    border-radius: 0;
    font-family: "neris-black", sans-serif;
    /*text-transform: uppercase;*/
    font-size: 1.1em;
    color: #1A1818 !important;
}

input::placeholder {
    color: #A2A2A2 !important;
}

.error {
    outline: 2px solid #EB031E;
    color: #EB031E;
    transition: 0.4s;
}

.text.errors {
    outline: 2px solid #EB031E;
    color: white;
    background: #EB031E;
    padding: 20px;
}

    .text.errors ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

select {
    -webkit-appearance: none;
    font-size: 1.1em;
    border-radius: 0 !important;
    width: 100%;
    font-family: "neris-black", sans-serif;
    padding: 15px;
    outline: 0;
    border: 0;
    background: rgb(76, 84, 92, 0.2);
    text-transform: uppercase;
    background-image: url(/images/arrow-solid-down.svg);
    background-position: calc(100% - 15px) 50%;
    background-repeat: no-repeat;
    color: #A2A2A2;
}

.radiobox {
    display: inline;
    margin-right: 10px;
}

    .radiobox input {
        font-size: 1.1em;
    }

        .radiobox input:hover {
            opacity: 0.8;
            cursor: pointer;
            transition: 0.4s;
        }

        .radiobox input:after {
            content: "";
            clear: both;
            display: table;
        }

        .radiobox input[type=radio] {
            display: none;
            margin: 10px;
            top: -10px;
        }

            .radiobox input[type=radio] + label {
                margin-right: 20px;
                position: relative;
            }

                .radiobox input[type=radio] + label:before {
                    content: "";
                    cursor: pointer;
                    opacity: 1;
                    height: 37px;
                    width: 37px;
                    display: inline-block;
                    background-size: cover;
                    background-position: center center;
                    background: url(/images/check-unselected.svg) left center no-repeat;
                    transition: 0.4s;
                    position: relative;
                    margin-right: 10px;
                    z-index: 0;
                }

            .radiobox input[type=radio]:checked + label:before {
                background: url(/images/radio-selected.svg) left center no-repeat !important;
                transition: 0.4s;
                cursor: pointer;
            }

    .radiobox label > span {
        top: -12px;
        position: relative;
    }

@media all and (max-width: 768px) {
    .radiobox label > span {
        font-size: 0.89em;
    }
}

.checkbox {
    display: inline;
    margin-right: 10px;
}

    .checkbox input {
        font-size: 1.1em;
    }

        .checkbox input:hover {
            opacity: 0.8;
            cursor: pointer;
            transition: 0.4s;
        }

        .checkbox input:after {
            content: "";
            clear: both;
            display: table;
        }

        .checkbox input[type=checkbox] {
            display: none;
            margin: 10px;
            top: -10px;
        }

            .checkbox input[type=checkbox] + label {
                margin-right: 20px;
                position: relative;
            }

                .checkbox input[type=checkbox] + label:before {
                    content: "";
                    cursor: pointer;
                    opacity: 1;
                    height: 37px;
                    width: 37px;
                    display: inline-block;
                    background-size: cover;
                    background-position: center center;
                    background: url(/images/check-unselected.svg) left center no-repeat;
                    transition: 0.4s;
                    position: relative;
                    margin-right: 10px;
                    z-index: 0;
                }

            .checkbox input[type=checkbox]:checked + label:before {
                background: url(/images/radio-selected.svg) left center no-repeat !important;
                transition: 0.4s;
                cursor: pointer;
            }

    .checkbox label > span {
        top: -12px;
        position: relative;
    }

@media all and (max-width: 768px) {
    .checkbox label > span {
        font-size: 0.89em;
    }
}

.checkbox,
.radioboxcontainer {
    margin-bottom: 20px;
}

@media all and (max-width: 768px) {
    .checkbox > div,
    .radioboxcontainer > div {
        display: block;
        margin-bottom: 20px;
    }
}

.checkbox.single .radiobox,
.radioboxcontainer.single .radiobox {
    display: block;
    margin-bottom: 10px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-label {
    display: inline;
    font-size: 1.2em;
    font-family: "neris-black", sans-serif;
    text-transform: uppercase;
    color: #4C545C;
    margin-right: 20px;
    position: relative;
}

    .form-label > span {
        top: -12px;
        position: relative;
    }

@media all and (max-width: 768px) {
    .form-label > span {
        top: auto;
    }
}

.column-control > .column > .form-label > span {
    top: 33%;
}

footer {
    background: var(--White);
    padding: 40px;
    color: white;
    position: relative;
    border-top: 1px solid var(--HSV-orange);
}

    footer .logo-container img {
        width: 25%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    footer .primary-footer-list {
        color: var(--HSV-grey);
    }

.size-h5-sm {
    font-size: 111%;
}

@media screen and (max-width: 425px) {
    /*header .logo {
        width: 100%;
    }*/
    footer {
        text-align:center;
    }
    footer .logo-container img {
        width:100%;
    }
}
@media screen and (min-width: 426px) and (max-width: 768px){
    footer {
        text-align: center;
    }
    footer .logo-container img {
        width: 50%;
    }
}
@media screen and (min-width: 769px) and  (max-width: 1024px) {
    footer .logo-container img {
        width: 40%;
    }
}
    footer .social-media {
        /*  position: absolute;
    top: 40px;
    right: 40px;*/
        padding-bottom: 20px;
    }

    @media screen and (max-width: 768px) {
        footer .social-media {
            position: relative;
            top: auto;
            right: auto;
            width: 100%;
            /* padding-bottom: 30px;
        margin: 0 auto 30px auto;*/
            text-align: center;
            /*border-bottom: 1px solid #3c3c3c;*/
        }
    }

    footer .social-media a {
        display: inline-block;
        width: 21px;
        height: 21px;
        margin-left: 21px;
        text-decoration: none;
    }

        footer .social-media a:first-child {
            margin-left: 0;
        }

        footer .social-media a span {
            display: block;
            text-indent: -9999px;
            position: relative;
            font-size: 16px;
            height: 18px;
            line-height: 18.4px;
        }

            footer .social-media a span:before {
                position: absolute;
                left: 0;
                top: 0;
                font-family: "icomoon";
                color: var(--HSV-grey);
                transition: 0.2s;
                text-indent: 0;
                width: 21px;
                text-decoration: none;
                text-align: center;
            }

            footer .social-media a span:hover:before {
                color: var(--HSV-orange);
            }

            footer .social-media a span.youtube-icon:before {
                content: "\e904";
            }

            footer .social-media a span.facebook-icon:before {
                content: "\e906";
            }

            footer .social-media a span.instagram-icon:before {
                content: "\e907";
            }

            footer .social-media a span.twitter-icon:before {
                content: "\e909";
            }

            footer .social-media a span.spotify-icon:before {
                content: "\e908";
            }

    footer nav {
        margin-top: 35px;
    }

        footer nav .primary-footer-list {
            border-bottom: 1px solid var(--HSV-grey);
            padding-bottom: 20px;
            margin-bottom: 30px;
            display: flex;
            justify-content: center;
        }

            footer nav .primary-footer-list ul {
                margin: 0;
                padding: 0;
                display: flex;
                list-style: none;
                flex: auto;
                flex-wrap: wrap;
                max-width: 1000px;
            }

                footer nav .primary-footer-list ul li {
                    flex: 0 0 33.3333%;
                    flex-direction: column;
                    flex-grow: 0;
                    flex-shrink: 0;
                    flex-basis: 33.3333%;
                    margin-bottom: 20px;
                }

    @media screen and (max-width: 768px) {
        footer nav .primary-footer-list ul li {
            flex: 0 0 33%;
            flex-basis: 33%;
        }
    }

    @media screen and (max-width: 440px) {
        footer nav .primary-footer-list ul li {
            flex: 0 0 50%;
            flex-basis: 100%;
        }
    }

    footer nav .primary-footer-list ul li a {
        font-size: 1em;
        color: var(--HSV-grey);
        font-family: "neris-black", sans-serif;
        /*text-transform: uppercase;*/
        text-decoration: none;
        transition: 0.4s;
    }

    @media screen and (max-width: 768px) {
        footer nav .primary-footer-list ul li a {
            font-size: 0.9em;
        }
    }

    footer nav .primary-footer-list ul li a.highlight {
        color: var(--HSV-grey);
    }

    footer nav .primary-footer-list ul li a:hover {
        color: var(--HSV-grey);
        transition: 0.4s;
    }

    footer nav .secondary-footer-list {
        position: relative;
    }

        footer nav .secondary-footer-list .copyright {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 1em;
            color: #606060;
        }

    @media screen and (max-width: 768px) {
        footer nav .secondary-footer-list .copyright {
            margin-top: 30px;
            top: auto;
            right: auto;
            position: relative;
        }
    }

    footer nav .secondary-footer-list ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    @media screen and (max-width: 768px) {
        footer nav .secondary-footer-list ul {
            display: flex;
            list-style: none;
            flex: auto;
            flex-wrap: wrap;
        }
    }

    footer nav .secondary-footer-list ul li {
        display: inline;
    }

    @media screen and (max-width: 768px) {
        footer nav .secondary-footer-list ul li {
            flex: 0 0 50%;
            flex-basis: 50%;
        }
    }

    footer nav .secondary-footer-list ul li a {
        color: #FFFFFF;
        text-decoration: none;
        margin-right: 20px;
        transition: 0.4s;
    }

        footer nav .secondary-footer-list ul li a:hover {
            color: black;
            transition: 0.4s;
        }

    .banner {
        background-color: #E18044;
        padding-top: 107px;
    }

    @media all and (max-width: 768px) {
        .banner {
            padding-top: 77px;
        }
    }

    .banner .padding {
        max-width: 1080px;
        padding: 0 20px;
        margin: 0 auto;
    }

        .banner .padding h1 {
            text-transform: uppercase;
            font-family: "neris-black", sans-serif;
            color: white;
            padding-top: 60px;
            padding-bottom: 120px;
            text-align: left;
            font-size: 6.4em;
            margin: 0;
            line-height: 0.8em;
        }

    @media all and (max-width: 768px) {
        .banner .padding h1 {
            padding-top: 50px;
            font-size: 3em;
        }
    }

    html * {
        outline: 1p;
    }

    @media screen and (max-width: 1100px) {
        .wayfarer-memberarea::-webkit-scrollbar {
            width: 5px;
            margin: 20px 0px;
            height: 4px;
        }
        /* Track */
        .wayfarer-memberarea::-webkit-scrollbar-track {
            background: #EDEDED;
        }
        /* Handle */
        .wayfarer-memberarea::-webkit-scrollbar-thumb {
            background: black;
        }
            /* Handle on hover */
            .wayfarer-memberarea::-webkit-scrollbar-thumb:hover {
                background: black;
            }
    }

    .wayfarer-memberarea {
        background-color: #EDEDED;
        padding-top: 107px;
        overflow-y: hidden;
    }

    @media all and (max-width: 768px) {
        .wayfarer-memberarea {
            padding-top: 77px;
        }
    }

    .wayfarer-memberarea:after {
        background: #ffffff;
        background: -moz-linear-gradient(right, rgba(255, 255, 255, 0), #ededed);
        background: -webkit-linear-gradient(right, rgba(255, 255, 255, 0), #ededed);
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #ededed);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 0)', endColorstr='rgb(237, 237, 237)', GradientType=1);
        z-index: 10;
        width: 50px;
        content: "";
        display: inline-block;
        position: absolute;
        right: 0;
        top: 108px;
        height: 136px;
    }

    @media all and (max-width: 768px) {
        .wayfarer-memberarea:after {
            top: 78px;
            height: 76px;
        }
    }

    .wayfarer-memberarea:before {
        background: #ffffff;
        background: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #ededed);
        background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #ededed);
        background: linear-gradient(to left, rgba(255, 255, 255, 0), #ededed);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 0)', endColorstr='rrgb(237, 237, 237)', GradientType=1);
        z-index: 10;
        width: 50px;
        content: "";
        display: inline-block;
        position: absolute;
        right: unset;
        left: 0;
        top: 108px;
        height: 136px;
    }

    @media all and (max-width: 768px) {
        .wayfarer-memberarea:before {
            top: 78px;
            height: 76px;
        }
    }

    .wayfarer-memberarea .padding {
        padding: 0;
        margin: 0 auto;
        overflow-y: hidden;
    }

        .wayfarer-memberarea .padding a {
            color: #1A1818;
            text-decoration: none;
        }

        .wayfarer-memberarea .padding h1 {
            text-transform: uppercase;
            font-family: "neris-black", sans-serif;
            color: white;
            padding-top: 60px;
            text-align: center;
            font-size: 5em;
            margin: 0;
        }

    @media all and (max-width: 768px) {
        .wayfarer-memberarea .padding h1 {
            padding-top: 50px;
            font-size: 3em;
        }
    }

    .wayfarer-memberarea .padding ul {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
        position: relative;
        margin: 0 auto;
    }

        .wayfarer-memberarea .padding ul li {
            display: inline-block;
            padding: 0 20px;
            margin: 60px 0 60px 0;
        }

    @media all and (max-width: 768px) {
        .wayfarer-memberarea .padding ul li {
            margin: 30px 0;
        }
    }

    .wayfarer-memberarea .padding ul li a {
        font-family: "neris-black", sans-serif;
        text-transform: uppercase;
        font-size: 1.3em;
        color: #B4B4B4;
        transition: 0.4s;
    }

    .wayfarer-memberarea .padding ul li.active a {
        color: #1A1818;
        transition: 0.4s;
    }

    .wayfarer-memberarea .padding ul li:hover a {
        color: #1A1818;
        transition: 0.4s;
    }

    .wayfarer {
        background-color: #1A1818;
        padding-top: 107px;
    }

    @media all and (max-width: 768px) {
        .wayfarer {
            padding-top: 77px;
        }
    }

    .wayfarer .padding {
        max-width: 760px;
        padding: 0 20px;
        margin: 0 auto;
    }

        .wayfarer .padding h1 {
            text-transform: uppercase;
            font-family: "neris-black", sans-serif;
            color: white;
            padding-top: 60px;
            text-align: center;
            font-size: 5em;
            margin: 0;
        }

    @media all and (max-width: 768px) {
        .wayfarer .padding h1 {
            padding-top: 50px;
            font-size: 3em;
        }
    }

    .wayfarer .padding .progress-bar {
        padding-top: 60px;
    }

        .wayfarer .padding .progress-bar .inner {
            display: flex;
        }

            .wayfarer .padding .progress-bar .inner .element {
                flex: 1;
                margin-bottom: 40px;
            }

                .wayfarer .padding .progress-bar .inner .element:before {
                    height: 1px;
                    width: 100%;
                    background-color: white;
                    display: inline-block;
                    content: "";
                    top: -2px;
                    position: relative;
                }

                .wayfarer .padding .progress-bar .inner .element:first-of-type:before {
                    width: 50%;
                    margin-left: 50%;
                }

                .wayfarer .padding .progress-bar .inner .element:last-of-type:before {
                    width: 50%;
                    margin-right: 50%;
                }

                .wayfarer .padding .progress-bar .inner .element .icon {
                    width: 100%;
                }

                    .wayfarer .padding .progress-bar .inner .element .icon span {
                        background: url(/images/wayfarer-inactive.png);
                        height: 23px;
                        width: 20px;
                        background-size: cover !important;
                        background-position: center center !important;
                        display: block;
                        margin: 0 auto;
                        top: -17px;
                        position: relative;
                    }

                .wayfarer .padding .progress-bar .inner .element p {
                    text-align: center;
                    max-width: 110px;
                    margin: 0 auto;
                }

                    .wayfarer .padding .progress-bar .inner .element p span {
                        font-family: "neris-black", sans-serif;
                        color: white;
                        text-transform: uppercase;
                    }

    @media all and (max-width: 768px) {
        .wayfarer .padding .progress-bar .inner .element p {
            max-width: 70px;
            line-height: 0.7em;
        }

            .wayfarer .padding .progress-bar .inner .element p span {
                font-size: 0.7em;
            }
    }

    .wayfarer .padding .progress-bar .inner .element.active .icon span {
        background: url(/images/wayfarer-active.png);
    }

    .wayfarer .padding .progress-bar .inner .element.active p span {
        color: #76B82A;
    }

    .button-container {
        margin-top: 30px;
    }

    .membership-teaser {
        height: calc(100% - 64px);
    }

        .membership-teaser .title {
            background-color: #1A1818;
            padding: 20px;
        }

            .membership-teaser .title h2 {
                padding: 0;
                margin: 0;
                color: white;
                text-transform: uppercase;
                transform: skewX(-10deg);
            }

        .membership-teaser .contents {
            background: #EDEDED;
            padding: 30px;
            height: calc(100% - 64px);
            position: relative;
            margin-bottom: 55px;
        }

    @media all and (max-width: 768px) {
        .membership-teaser .contents {
            margin-bottom: 0;
        }
    }

    .membership-teaser .contents h3 {
        font-family: "neris-black", sans-serif;
        text-transform: uppercase;
        margin: 0;
        padding: 0;
        font-size: 1.45em;
    }

    .membership-teaser .contents h4 {
        font-family: "neris-black", sans-serif;
        text-transform: uppercase;
        font-size: 2.9em;
        margin: 0;
        padding: 0;
        color: #76B82A;
    }

        .membership-teaser .contents h4 span {
            padding-left: 5px;
            text-transform: none;
            font-size: 0.45em;
            color: #C2DF9F;
        }

    .membership-teaser .contents p.intro {
        padding: 25px 0;
        margin: 0;
        font-size: 1.2em;
        line-height: 1.4em;
    }

    .membership-teaser .contents ul {
        margin: 0 0 50px 0;
        padding: 0;
        list-style: none;
    }

    @media all and (max-width: 768px) {
        .membership-teaser .contents ul {
            margin: 0 0 30px 0;
        }
    }

    .membership-teaser .contents ul li {
        color: #8d8c8c;
        position: relative;
        margin-bottom: 15px;
        margin-left: 30px;
    }

        .membership-teaser .contents ul li:before {
            background-image: url(/images/tick.svg);
            background-position: center;
            background-size: cover;
            width: 18px;
            height: 14px;
            display: inline-block;
            content: "";
            left: -30px;
            position: absolute;
        }

    .membership-teaser .contents .button-container {
        position: absolute;
        width: calc(100% - 60px);
        bottom: 30px;
    }

    @media all and (max-width: 768px) {
        .membership-teaser .contents .button-container {
            bottom: auto;
            position: relative;
            width: 100%;
        }
    }

    .membership-teaser.green .contents {
        background: #76B82A;
    }

    .membership-teaser.green h4,
    .membership-teaser.green p {
        color: white;
    }

    .membership-teaser.green ul li {
        color: white;
    }

        .membership-teaser.green ul li:before {
            background-image: url(/images/tick-white.svg);
        }

    .membership-teaser.green .button-container .mainbutton.angular {
        background-color: white;
    }

        .membership-teaser.green .button-container .mainbutton.angular:hover {
            background: #E18044;
            border-color: #E18044;
        }

            .membership-teaser.green .button-container .mainbutton.angular:hover span {
                color: white;
            }

        .membership-teaser.green .button-container .mainbutton.angular span {
            color: black;
        }

    .pagination {
        margin-top: 40px;
    }

        .pagination button {
            margin-bottom: 20px;
        }

    main > .text.teaser {
        margin-top: 20px !important;
    }

    main > .text:nth-child(n+2) {
        margin-top: 60px;
    }

    .toggle {
        border-bottom: 1px solid #CECECE;
        padding-bottom: 20px;
    }

        .toggle:last-of-type {
            border-bottom: 0px;
        }

        .toggle .toggle-label {
            color: #4C545C;
            margin: 10px 0 10px 20px;
        }

        .toggle button {
            float: right;
            background: #4C545C;
            height: 35px;
            width: 75px;
            padding: 0;
            transition: none;
            transform: none;
            position: relative;
            border-radius: 25px;
            transition: 0.5s;
            transition-property: all;
            transition-property: transform;
            cursor: pointer;
            border: 0px;
        }

            .toggle button span {
                padding: 0;
                transform: none;
                font-size: 0;
                transition: 0.5s;
            }

            .toggle button > .circle {
                height: 28px;
                width: 28px;
                background: white;
                border-radius: 50%;
                top: 13px;
                position: absolute;
                transition: all 0.5s;
                transition-property: all;
                transition-property: transform;
            }

            .toggle button > .off {
                font-family: "neris-light", sans-serif;
                font-size: 12px;
                color: #FFFFFF;
                font-weight: 600;
                font-style: italic;
                position: absolute;
                top: 10px;
                right: 12px;
                transition: 0.1s;
                opacity: 0;
            }

            .toggle button > .on {
                font-family: "neris-light", sans-serif;
                font-size: 12px;
                color: white;
                font-weight: 600;
                font-style: italic;
                position: absolute;
                top: 10px;
                left: 12px;
                transition: 0.4s;
                opacity: 0;
            }

            .toggle button.on {
                background: #E18044;
                font-size: 12px;
            }

                .toggle button.on:active,
                .toggle button.on:focus {
                    border-radius: 25px;
                    box-shadow: 0 0 5px #76B82A;
                    outline: 0px;
                }

                .toggle button.on > .circle {
                    top: 3px;
                    position: absolute;
                    right: 3px;
                    transition: all 0.5s;
                }

                .toggle button.on > .on {
                    transition: 0.5s;
                    opacity: 1;
                    left: 15px;
                }

            .toggle button.off:active,
            .toggle button.off:focus {
                border-radius: 25px;
                box-shadow: 0 0 5px #CECECE;
                outline: 0px;
            }

            .toggle button.off > .circle {
                top: 3px;
                position: absolute;
                left: 3px;
                transition: 0.5s;
            }

            .toggle button.off > .off {
                transition: all 0.5s;
                opacity: 1;
                right: 15px;
            }

    @media all and (max-width: 768px) {
        .toggle {
            display: flex !important;
        }

            .toggle .column {
                margin: 0 !important;
            }

                .toggle .column .toggle-label {
                    margin-left: 0;
                }
    }

    .visits h2 span {
        color: #76B82A;
    }

    .bordered-column {
        border-bottom: 1px solid #CECECE;
        padding: 10px 0;
    }

        .bordered-column:last-of-type {
            border-bottom: 0;
        }

    table {
        width: 100%;
        cellpadding: 10px;
        border-collapse: collapse;
        border: 1px solid #CECECE;
    }

        table thead {
            font-family: "neris-black", sans-serif;
            text-transform: uppercase;
        }

            table thead tr {
                background-color: #E18044;
                color: white;
            }

        table tbody tr:nth-child(odd) {
            background: rgb(76, 84, 92, 0.2);
        }

        table tbody tr:nth-child(even) {
            background: rgb(76, 84, 92, 0.4);
        }

        table tr td {
            border: 1px solid #CECECE;
            padding: 10px;
        }

    .textteaser .title {
        background: #1A1818;
    }

        .textteaser .title h2 {
            color: white;
            padding: 20px;
            margin: 0;
        }

    .textteaser .contents {
        padding: 30px;
        background: #EDEDED;
    }

        .textteaser .contents ul {
            margin: 0 0 0px 0;
            padding: 0;
            list-style: none;
        }

    @media all and (max-width: 768px) {
        .textteaser .contents ul {
            margin: 0 0 30px 0;
        }
    }

    .textteaser .contents ul li {
        color: #8d8c8c;
        position: relative;
        margin-bottom: 15px;
        margin-left: 30px;
    }

        .textteaser .contents ul li:last-of-type {
            margin-bottom: 0;
        }

        .textteaser .contents ul li:before {
            background-image: url(/images/tick.svg);
            background-position: center;
            background-size: cover;
            width: 18px;
            height: 14px;
            display: inline-block;
            content: "";
            left: -30px;
            position: absolute;
        }

    .booking-form .intro .button-container {
        margin-top: 0;
        float: right;
    }

    @media all and (max-width: 768px) {
        .booking-form .intro .button-container {
            float: none;
            margin-bottom: 40px;
        }
    }

    .booking-form .intro .button-container .mainbutton {
        margin-right: 0;
        margin-left: 20px;
    }

    @media all and (max-width: 768px) {
        .booking-form .intro .button-container .mainbutton {
            margin-right: 20px;
            margin-left: 0;
        }
    }

    .booking-form .intro .dates {
        font-family: "neris-black", sans-serif;
        font-size: 2.2em;
        color: #e18044;
        padding-top: 7px;
        position: relative;
    }

    .booking-form .bookings {
        display: none;
        border-bottom: 1px solid #CECECE;
        margin: 30px 0;
        padding: 20px 0;
    }

        .booking-form .bookings p {
            margin: 0px;
            padding: 0 0 20px 0;
            font-family: "neris-black", sans-serif;
            text-transform: uppercase;
            color: #76B82A;
            position: relative;
        }

    @media all and (min-width: 769px) {
        .booking-form .bookings p:last-of-type {
            margin: 0px;
            padding: 0px;
        }
    }

    @media all and (max-width: 768px) {
        .booking-form .bookings p {
            margin: 0 20px 0 0;
            padding: 0 0 20px 0;
        }
    }

    .booking-form .bookings p button {
        background-image: url(/images/close-green.svg);
        background-position: center;
        background-size: cover;
        width: 18px;
        height: 18px;
        display: inline-block;
        content: "";
        font-size: 0;
        position: relative;
        border: 0;
        float: right;
        cursor: pointer;
        background-color: white;
    }

    @media all and (max-width: 768px) {
        .booking-form .bookings p button {
            position: absolute;
            top: 1px;
            right: -20px;
        }
    }

    .booking-form .bookings.active {
        display: block;
    }

    .booking-form .calendar--grid {
        text-transform: uppercase;
        margin-bottom: 40px;
        display: flex !important;
        font-weight: bold;
        font-style: italic;
        border: 1px solid rgb(76 84 92);
        margin-top: 60px;
        background: white;
    }

    @media screen and (max-width: 768px) {
        .booking-form .calendar--grid {
            margin-top: 0px;
            display: block !important;
        }
    }

    .booking-form .calendar--grid .calendar-column {
        flex: 1;
    }

    @media screen and (max-width: 768px) {
        .booking-form .calendar--grid .calendar-column {
            display: block;
            width: 100%;
            flex: none;
            opacity: 0;
            display: none;
            transition: 0.2s;
        }

            .booking-form .calendar--grid .calendar-column.active {
                opacity: 1;
                display: block;
                transition: 0.2s;
            }
    }

    .booking-form .calendar--grid .calendar-column .calendar-card-inner {
        margin: 0;
        outline: none;
        border: 0;
        display: block;
        position: absolute;
        padding: 0 20px;
        width: 100%;
        height: 100%;
        transition: 0.4s;
        cursor: pointer;
        background: white;
        outline: 1px solid #4C545C;
    }

    @media screen and (max-width: 940px) {
        .booking-form .calendar--grid .calendar-column .calendar-card-inner {
            width: calc(100% - 20px);
            padding: 0 10px;
        }
    }

    @media screen and (max-width: 768px) {
        .booking-form .calendar--grid .calendar-column .calendar-card-inner {
            position: relative;
            width: auto;
            top: auto;
            transform: none;
            padding: 20px 0;
            width: 100%;
            background: rgb(225, 128, 68);
        }
    }

    .booking-form .calendar--grid .calendar-column .calendar-card-inner:hover {
        background: rgb(225, 128, 68, 0.8);
        color: white;
    }

        .booking-form .calendar--grid .calendar-column .calendar-card-inner:hover .calendar-card_time {
            color: white;
        }

    .booking-form .calendar--grid .calendar-column .calendar-card-inner:active {
        background: rgb(225, 128, 68, 1);
        color: #4C545C;
    }

        .booking-form .calendar--grid .calendar-column .calendar-card-inner:active .card_class {
            color: #4C545C;
        }

        .booking-form .calendar--grid .calendar-column .calendar-card-inner:active .calendar-card_time {
            color: #4C545C;
        }

    .booking-form .calendar--grid .calendar-column .calendar-column_title {
        font-family: "neris-black", sans-serif;
        color: #FFFFFF;
        text-align: center;
        padding: 10px;
        background: #4C545C;
    }

    @media screen and (max-width: 768px) {
        .booking-form .calendar--grid .calendar-column .calendar-column_title {
            display: none;
        }
    }

    .booking-form .calendar--grid .calendar-column .calendar-card {
        font-family: "neris-black", sans-serif;
        text-align: center;
        min-height: 132px;
        background-color: white;
        margin-bottom: 1px;
        margin-left: 1px;
        position: relative;
    }

    @media screen and (max-width: 768px) {
        .booking-form .calendar--grid .calendar-column .calendar-card {
            min-height: 0px;
            border-bottom: 1px solid #c3c3c3;
        }
    }

    .booking-form .calendar--grid .calendar-column .calendar-card:last-of-type {
        border-bottom: 0px;
    }

    .booking-form .calendar--grid .calendar-column .calendar-card.booked {
        background: #76B82A;
        transition: 0.4s;
    }

        .booking-form .calendar--grid .calendar-column .calendar-card.booked:hover {
            background: #007c34;
            transition: 0.4s;
        }

    .booking-form .calendar--grid .calendar-column .calendar-card:last-child {
        margin-bottom: 0px;
    }

    .booking-form .calendar--grid .calendar-column .calendar-card .card_class {
        font-family: "neris-black", sans-serif;
        text-transform: uppercase;
        color: #4C545C;
    }

    .calendar-card:hover.card_class {
        color: #E18044;
    }

    .booking-form .calendar--grid .calendar-column .calendar-card .calendar-card_time {
        font-family: "neris-black", sans-serif;
        color: #4C545C;
        display: block;
    }

    .booking-form .calendar--grid .calendar-column:first-child .calendar-card {
        margin-left: 0px;
    }

    .popup {
        z-index: -1;
        display: block;
        position: relative;
        position: fixed;
        transition: opacity 0.25s ease-in-out;
        -moz-transition: opacity 0.25s ease-in-out;
        -webkit-transition: opacity 0.25s ease-in-out;
        opacity: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        float: right;
    }

        .popup.active {
            opacity: 1;
            z-index: 9;
            background: rgba(0, 0, 0, 0.5);
            transition: opacity 0.25s ease-in-out;
            -moz-transition: opacity 0.25s ease-in-out;
            -webkit-transition: opacity 0.25s ease-in-out;
        }

        .popup .modal {
            background: white;
            margin: 0 auto;
            padding: 30px;
            width: 760px;
            max-width: 760px;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }

            .popup .modal button {
                cursor: pointer;
            }

            .popup .modal .info {
                font-family: "neris-black", sans-serif;
                color: #76b82a;
                display: block;
                text-transform: uppercase;
                font-size: 1.2em;
            }

            .popup .modal .close {
                background-image: url(/images/close-grey.svg);
                background-position: center;
                background-size: cover;
                width: 18px;
                height: 18px;
                display: inline-block;
                content: "";
                font-size: 0;
                float: right;
                border: 0;
                background-color: white;
            }

            .popup .modal p:last-of-type {
                padding-bottom: 0;
            }

    @media screen and (max-width: 768px) {
        .popup {
            padding: 20px;
            width: calc(100% - 40px);
        }

            .popup .modal {
                width: auto;
            }
    }

    .navbuttonsmobile {
        display: none;
        margin-top: 40px;
    }

    @media screen and (max-width: 768px) {
        .navbuttonsmobile {
            display: block;
        }
    }

    .navbuttonsmobile button {
        transform: none;
        padding: 0;
        color: black;
        height: 103px;
        outline: 0px;
        border: 0px;
    }

        .navbuttonsmobile button:hover {
            cursor: pointer;
        }

        .navbuttonsmobile button span {
            color: white;
            text-transform: uppercase;
            font-family: "neris-black", sans-serif;
        }

    .navbuttonsmobile .extra-button.right.disabled,
    .navbuttonsmobile .extra-button.left.disabled {
        transition: 0.2s;
    }

        .navbuttonsmobile .extra-button.right.disabled button span,
        .navbuttonsmobile .extra-button.left.disabled button span {
            color: rgba(255, 255, 255, 0.2);
        }

    .navbuttonsmobile .left button {
        padding: 41px 0;
    }

        .navbuttonsmobile .left button:after {
            background-image: url(/images/arrow-white-wayfinder.svg);
            content: "";
            height: 16px;
            width: 9px;
            display: inline-block;
            background-position: center center;
            background-size: cover;
            transform: rotate(180deg);
        }

    .navbuttonsmobile .right button {
        padding: 41px 0;
    }

        .navbuttonsmobile .right button:after {
            background-image: url(/images/arrow-white-wayfinder.svg);
            content: "";
            height: 16px;
            width: 9px;
            display: inline-block;
            background-position: center center;
            background-size: cover;
        }

    .navbuttonsmobile > div:nth-child(1) {
        width: 40px;
        float: left;
    }

        .navbuttonsmobile > div:nth-child(1) button {
            padding: 41px 0;
            border-right: 1px solid rgb(225, 128, 68, 0.8);
            background: rgb(225, 128, 68);
            width: 100%;
        }

    .navbuttonsmobile > div:nth-child(2) {
        width: calc(100% - 80px);
        float: left;
        overflow: hidden;
        display: block;
    }

        .navbuttonsmobile > div:nth-child(2) button {
            float: left;
            text-transform: uppercase;
            text-align: center;
            background: rgb(225, 128, 68, 0.8);
            display: none;
            width: calc(100% / 3);
        }

            .navbuttonsmobile > div:nth-child(2) button span {
                padding: 42px 0;
                transform: none;
            }

    @media screen and (max-width: 400px) {
        .navbuttonsmobile > div:nth-child(2) button span {
            font-size: 0.8em;
            padding: 44px 0;
        }
    }

    .navbuttonsmobile > div:nth-child(2) button.active {
        background: rgb(225, 128, 68);
        display: block;
    }

    .navbuttonsmobile > div:nth-child(2) button.active-next {
        display: block;
    }

    .navbuttonsmobile > div:nth-child(3) {
        width: 40px;
        float: left;
    }

        .navbuttonsmobile > div:nth-child(3) button {
            padding: 41px 0;
            background: rgb(225, 128, 68);
            width: 100%;
        }

    .navbuttonsmobile:after {
        content: "";
        clear: both;
        display: table;
    }

    .column-control {
        display: flex;
        flex-grow: 0;
        flex-shrink: 0;
        margin-bottom: 20px;
    }

        .column-control > .column {
            margin-right: 20px;
            flex: 1;
        }

            .column-control > .column:last-of-type {
                margin-right: 0px;
            }

    @media all and (max-width: 768px) {
        .column-control {
            display: block;
        }

            .column-control > .column {
                margin: 20px 0 0 0;
            }

                .column-control > .column:first-child {
                    margin: 0 0 0 0;
                }
    }

    .form-control.day {
        /*width: 30% !important;*/
        width: 29% !important;
    }

    .form-control.month {
        width: 35% !important;
    }

    .form-control.year {
        width: 33% !important;
    }

    /*# sourceMappingURL=web/styles/all.css.map */


    .simple-booking-container {
        max-width: 500px;
        margin-bottom: 10px;
        user-select: none;
    }

    .simple-booking {
        display: flex;
        justify-content: space-between;
    }

    .simple-booking-text--cancel {
        cursor: pointer;
        border-bottom: 1px dotted red;
    }

        .simple-booking-text--cancel:hover {
            color: red;
            border-bottom: none;
        }

    .simple-class-container {
        display: flex;
        flex-wrap: wrap;
    }

    .simple-class-card {
        display: flex;
        margin: 2px;
        outline: none;
        border: 0;
        width: 153px;
        height: 132px;
        transition: 0.4s;
        background: white;
        outline: 1px solid #c3c3c3;
        user-select: none;
    }

    .card--active:hover {
        background: #76B82A;
        color: white;
        cursor: pointer;
    }

        .card--active:hover .simple-class-time, .card--active:hover .simple-class-title {
            cursor: pointer;
            color: white;
        }

    .card--booked {
        background: lightgreen;
    }

    .card--cancelled {
        background: lightgrey;
    }

    .card--full {
        background: lightpink;
    }

    .card--too-late {
        background: lightgrey;
    }

    .simple-class-card-text-container {
        width: 100px;
        margin: auto;
        text-align: center;
    }

    .simple-class-title {
        font-family: "neris-black", sans-serif;
        text-transform: uppercase;
        color: black;
    }

    .simple-class-time {
        font-family: "neris-black", sans-serif;
        color: #76b82a;
    }

    .simple-class-time--booked {
        font-family: "neris-black", sans-serif;
        color: #007c34;
    }

    .simple-class-time--full {
        font-family: "neris-black", sans-serif;
        color: #f27474;
    }

    .simple-class-notice--booked {
        padding-top: 10px;
        color: #76b82a;
        font-weight: bold;
    }

    .simple-class-notice--cancelled {
        padding-top: 10px;
        color: #606060;
        font-weight: bold;
    }

    .simple-class-notice--full {
        padding-top: 10px;
        color: red;
        font-weight: bold;
    }

    .energie-ul {
        padding: 0px;
    }

    .energie-li {
        background-image: url('../images/green-tick.png');
        background-size: 2em;
        background-repeat: no-repeat;
        background-position: left top;
        font-size: 1em;
        font-weight: bold;
        line-height: 2em;
        list-style: none;
        margin-left: 2em;
        padding-left: 2.5em;
        padding-bottom: .5em;
    }

    img.responsive {
        width: 100%;
        height: auto;
    }

    .no-text-transform {
        text-transform: none;
    }

    .text-uppercase {
        text-transform: uppercase;
    }

    .text-orange {
        color: var(--HSV-orange);
    }

    .text-danger {
        color: #ff3333;
    }

    @media screen and (min-width: 1200px) {
        .size-h5 {
            font-size: 133%;
        }

        .size-h5-sm {
            font-size: 122%;
        }
    }

    .button-container.locations button {
        margin-bottom: 6px;
    }

    @media print {
        body > *:not(main),
        body > main > *:not(form),
        body > main > form > *:not(.print-area) {
            display: none;
        }
    }

.course-container {
    background-color: lavender;
    margin-bottom: .5rem;
    padding: .5rem;
    display: grid;
    grid-template-columns: 2.5fr 2.5fr 1fr 2fr 1fr;
    grid-row-gap: .5rem;
    align-items: center;
}

.course-bookable {
    justify-self: center;
    text-align: center;
}

.more-info-course,.more-info-sessions {
    cursor: pointer;
    margin-left: .5rem;
}

.booked-courses-container {
    background-color: #ededed;
    margin-bottom: .5rem;
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    align-items: center;
    padding: 1rem;
    grid-column-gap: 1rem;
}

.sessions-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: .25rem;
}

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

    .course-bookable {
        grid-column: 1/3;
    }

    .sessions-container {
        grid-template-columns: 1fr 1fr;
    }

    .session-name {
        grid-column: 1/3;
    }
}