body {
    font-family: 'Gilroy', sans-serif;
    color: #21274d;
}

.color-initial {
    color: #21274d;
}

h1 {
    font-size: 54px;
}

.font-xsmall {
    font-size: 14px;
    line-height: 22px;
}

.navbar-brand img {
    width: 85%;
}

.font-small {
    font-size: 17px;
    line-height: 26px;
}

.font-medium {
    font-size: 21px;
}

.font-extra-medium {
    font-size: 29px;
}

.font-large {
    font-size: 35px;
}

.font-xlarge {
    font-size: 48px;
}

.font-xxlarge {
    font-size: 71px;
}

.navbar-light .navbar-nav .nav-link {
    color: black;
    font-size: 21px;
    padding: 8px 16px;
}

.dropdown-menu .nav-item .nav-link {
    font-size: 16px;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #007bff !important;
    text-shadow: -0.06ex 0 #007bff, 0.06ex 0 #007bff;
}

.navbar-light .navbar-nav .nav-link.active {
    color: #007bff !important;
    text-shadow: -0.06ex 0 #007bff, 0.06ex 0 #007bff;
}

.color-purple {
    color: #21274d;
}

.color-white {
    color: white;
}

.btn.color-white:hover {
    color: white;
}

.navbar {
    margin: 10px 0;
}

.shadow-glow {
    -webkit-box-shadow: 0 0 50px 10px rgba(237, 237, 233, 1);
    -moz-box-shadow: 0 0 50px 10px rgba(237, 237, 233, 1);
    box-shadow: 0 0 50px 10px rgba(237, 237, 233, 1);
}

.navbar-light .navbar-nav .nav-link img {
    position: relative;
    top: -3px;
}

.navbar-light .navbar-nav .order-now .nav-link {
    background-color: #3276ff;
    color: #FFF !important;
}

.navbar-light .navbar-nav .order-now .nav-link:hover,
.navbar-light .navbar-nav .order-now .nav-link:focus {
    background-color: #000;
}



.nobr {
    white-space: nowrap;
}

a:link, a:visited {
    color: inherit !important;
}

a:hover {
    text-decoration: none;
}

.image {
    max-width: 100%;
}

.extra-bold {
    font-weight: 800;
}

.font-normal {
    font-weight: 400;
}

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

.thin {
    font-weight: 200;
}

.uppercase {
    text-transform: uppercase;
}

.img-text-fix {
    margin-top: -3px;
}

.spacer {
    margin-top: 20px;
}

.spacer-small {
    margin-top: 10px;
}

.spacer-large {
    margin-top: 50px;
}

.spacer-bottom-small {
    margin-bottom: 20px;
}

.spacer-bottom {
    margin-bottom: 50px;
}

.news-banner-item {
    display: inline;
    padding-right: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.page {
    margin-bottom: 125px;
}

.image-header {
    height: 560px;
    position: relative;
    width: 100%;
    color: white;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.image-header-one {
    background-image: url("../img/banner-1.png");
}

.image-header-two {
    background-image: url("../img/banner-2.png");
}

.image-header-three {
    background-image: url("../img/banner-3.png");
    height: 390px;
}

.header-questions {
    position: absolute;
    top: 50%;
    right: 0%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #3276ff;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 20px;
}

.header-questions * {
    color: #FFF;
}

.header-questions p:last-child {
    margin-bottom: 0px;
    font-size: 20px;
}


.bullet {
    font-family: 'Gilroy', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: #007bff;
}

.bullet .col-1 {
    line-height: 38px;
}

.bullet .col-11 {
    border-bottom: 5px solid #20264e;
    -ms-flex: 0 0 calc(91.666667% - 30px);
    flex: 0 0 calc(91.666667% - 30px);
    max-width: calc(91.666667% - 30px);
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 15px;
    margin-right: 15px;
}

.screenshot {
    margin-top: 30px;
}

.screenshot * {
    font-family: 'Gilroy', sans-serif;
    color: #21274d;
}

.screenshot ol {
    list-style: none;
    counter-reset: li;
    padding-left: 0px;
}

.screenshot li {
    counter-increment: li;
    position: relative;
    padding-left: 51px;
    line-height: 36px;
}

.screenshot li::before {
    position: absolute;
    top: 0;
    left: 0;
    content: counter(li);
    background-color: #3276ff;
    color: #FFF;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    /*margin-left: -51PX;*/
    padding: 0px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 50%;
}

.screenshot li + li {
    margin-top: 20px;
}

.screenshot + .bullet {
    margin-top: 30px;
}

.screenshot .text {
    margin-top: 25px;
}


.screenshot .img {
    text-align: center;
}

.screenshot img {
    width: auto !important;
    max-width: 100%;
}

.how-to-order-main-content {
    padding-bottom: 40px;
}

.how-to-order-main-content h2 {
    margin-bottom: 40px;
}

.delivery-option .selected-icon {
    display: none !important;
}

.delivery-option.active .selected-icon {
    display: block !important;
}

.delivery-option.active {
    border: 4px solid #2adc00;
}

.delivery-option.active  .right-top-corner {
    position: absolute;
    top: -23px;
    right: -20px;
}

.bestelling-ophalen-of-laten-leveren {
    font-size: 22px;
    font-weight: bold;
}

.preOrderBtn {
    padding: 15px 40px;
    font-size: 21px;
    font-weight: 800;
}

.accessoryPreOrderBtn {
    width: 100%;
}

.expectedDateInStock {
    background: #F00;
    color: #FFF;
    width: 100%;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-bottom: 6px;
}

.mollie-payment > div > div,
.payment-at-pickup > div > div {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.mollie-payment > div > div > form,
.payment-at-pickup > div > div > form {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}

.mollie-payment-col1, .mollie-payment-col2 {
    display: inline-block;
}

.mollie-payment-col2 {
    margin-left: auto;
    margin-right: 0;
}

.paymentbutton {
    background-color: #3276ff;
    color: #FFF !important;
    font-size: 18px;
    padding: 8px 16px;
}


@media (max-width: 1080px) {

    .hoe-bestellen .product-detail-container {
        margin-top: 0;
    }

    .header-questions {display: none;}
}

.btn, .btn:active .btn:focus, .btn:active:focus {
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0;
}

.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:focus:active {
    background-color: #3276ff;
    border: none;
}

.btn-success, .btn-success:hover, .btn-success:focus, .btn-success:focus:active, .btn-success:hover {
    background-color: #2adc00 !important;
    border: none;
    outline: none !important;
    box-shadow: none !important;
    color: white;
}

.product-detail-container .btn-primary {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    color: white !important;
    margin-bottom: 40px;
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
}

.product-detail-container > .spacer:nth-child(2) {
    margin-top: 60px;
}

.product-detail-container .spacer {
    margin-top: 40px;
}

ul {
    margin-bottom: 0;
}

.bg-blue {
    background-color: #3276ff;
}

.bg-light-blue {
    background-color: #e8f0ff;
}

.bg-green {
    background-color: #2adc00;
}

form label {
    line-height: 33px;
}

.z-max {
    z-index: 500;
    position: relative;
}

.hide-default {
    display: none;
}

.blue {
    color: #3276ff;
}

.color-red {
    color: red;
}

.bg-grey {
    background-color: #f7f7f8;
}

.bg-dark-blue {
    background-color: #21274d;
}

ul.custom-bullet {
    list-style: none;
}

.product-detail-container .description li {
    margin: 10px 0;
}

img {
    max-width: 100%;
}

.navbar-toggler, .navbar-toggler:active, .navbar-toggler:active:focus {
    outline: none !important;;
}

.breadcrumb {
    padding-left: 0;
    margin-top: 1.5em;
}

.breadcrumb, .breadcrumb-item.active a, .breadcrumb-item + .breadcrumb-item::before {
    background-color: transparent;
    color: #9e9e9e !important;
}

/* theming */
ul.custom-bullet li::before {
    content: "\2022";
    color: #3276ff;
    font-weight: bold;
    display: inline-block;
    width: 2em;
    margin-left: -2em;
}

.underline {
    text-decoration: underline;
}

.news-banner {
    background-color: #3276ff;
    color: white;
    padding: 10px 0;
    text-transform: uppercase;
    font-size: 21px;
}

.news-banner-black {
    background-color: #000;
}

.news-banner > div.container {
    max-width: none;
}

select.form-control, select.form-control:active, select.form-control:focus, select.form-control:active:focus, select.form-control:hover {
    outline: none !important;
    box-shadow: none;
    border-color: rgb(206, 212, 218);
}

.selectable {
    cursor: pointer;
}

.count-badge {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 14px;
    background-color: #21274d;
    color: white;
    border-radius: 50%;
    font-weight: 800;
    width: 20px;
    height: 20px;
    text-align: center;
}

footer {
    background-color: #292a30;
    color: white;
    padding: 50px 0;
    font-weight: 200;
}

footer a {
    text-decoration: underline;
}

.overlay {
    position: absolute;
    top: 0;
    left: -200px;
    z-index: 1;
    width: 60%;
    min-width: 700px;
    height: 100%;
    max-width: 100% !important;
    background: rgba(50, 118, 255, 1);
    transform: skew(168.0deg);
}

.right-top-corner {
    position: absolute;
    top: -13px;
    right: -13px;
}

.orders table td {
    vertical-align: middle !important;
}

.table-active th, .supplies .table-active td {
    background-color: #f5f5f5 !important;
}

.stock-status {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    cursor: pointer
}

.available {
    background-color: green;
}

.unavailable {
    background-color: red;
}

@media (min-width: 1340px) {
    .container {
        max-width: 1300px;
    }
}

@media (max-width: 1200px) {
    .navbar .container {
        width: 100%;
        margin: 0 10px;
        max-width: 100%;
    }

    .navbar-brand {
        max-width: 320px;
    }

    footer > div > div > div > div a {
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

@media (max-width: 1340px) {
    .font-xxlarge {
        font-size: 65px;
    }
}

@media (max-width: 1340px) {
    .navbar-light .navbar-nav .nav-link {
        padding: 8px 11px;
    }
}

@media (min-width: 1681px) {
    .navbar-light .navbar-nav .nav-link {
        font-size: 18px;
    }
}

@media (min-width: 992px) and (max-width:1680px) {
    .navbar-light .navbar-nav .nav-link {
        font-size: 18px;
    }
}

@media (min-width: 992px) and (max-width:1200px) {
    .navbar-brand {
        max-width: 200px;
    }
}

@media (min-width: 1101px) and (max-width:1200px) {
    .navbar-light .navbar-nav .nav-link {
        padding: 8px 10px;
    }
}


@media (min-width: 1201px) and (max-width:1400px) {
    .navbar-light .navbar-nav .nav-link {
        padding: 8px 12px;
        font-size: 16px;
    }
}

@media (min-width: 992px) and (max-width:1140px) {
    .navbar-light .navbar-nav .nav-link {
        padding: 8px 4px;
        font-size: 16px;
    }
}

@media (max-width: 992px) {
    h1 {
        font-size: 45px;
    }

    .font-medium {
        font-size: 21px;
    }

    .font-small {
        font-size: 17px;
        line-height: 26px;
    }

    .font-large {
        font-size: 30px;
    }

    .font-xlarge {
        font-size: 38px;
    }

    .font-xxlarge {
        font-size: 60px;
    }

    .navbar {
        text-align: center;
    }

    .navbar-nav {
        margin-top: 25px;
    }

    .dropdown-menu .nav-item .nav-link {
        text-align: center;
    }

    .dropdown-menu {
        border: none;
    }
}

@media (max-width: 769px) {
    .news-banner .news-banner-item {
        display: block;
        text-align: center;
        width: 100%;
        padding: 5px;
    }

    :root {
        --font-size-title: 19px;
    }

    h1 {
        font-size: 30px;
    }

    .font-xlarge {
        font-size: 28px;
    }

    .font-xxlarge {
        font-size: 50px;
    }

    .image-header-two {
        background: url("../img/products/heavy-duty/banner-2.png") no-repeat left center;
        background-size: cover;
    }
}

@media (max-width: 576px) {
    h1 {
        font-size: 28px;
    }

    .font-xlarge {
        font-size: 28px;
    }

    .font-xxlarge {
        font-size: 40px;
    }

    .image-header-two {
        background: url("../img/products/heavy-duty/banner-2.png") no-repeat left center;
        background-size: cover;
    }

    .navbar-brand {
        max-width: 75%;
    }
}

.contactform label {
    font-weight: 400 !important;
}

.leadix-form .submit {
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0;
    background-color: #3276ff;
    border: none;
    color: white;
    padding: 6px 12px;
}

.choice-confirmation {
    background-color: #3276ff;
    color: white;
    margin-bottom: 1.5rem;
    border-radius: 5px;
    padding: 1rem;
}

@media (min-width: 768px) {
    .leadix-form label {
        width: 30% !important;
    }

    .leadix-form input[type="text"], .leadix-form input[type="e-mail"], .leadix-form textarea {
        width: 70% !important;
    }

    .leadix-form .privacy-notice-paragraph, .leadix-form button {
        margin-left: 30%;
    }

    .leadix-form .submit {
        margin-left: 30%;
    }

    .leadix-form .spinner {
        margin-left: 30%;
    }
}

@media (max-width: 767px) {
    .leadix-form label {
        width: 100% !important;
    }

    .leadix-form input, .leadix-form textarea {
        width: 100% !important;
    }
}

.btn-primary, a.btn-primary {
    color: #FFF !important;
}

.btn-primary:hover, a.btn-primary:hover,
.btn-primary:focus, a.btn-primary:focus {
    background-color: #20264e;
}





.contact-form .legal label,
.contact-form .legal label small,
.contact-form .legal label a
{
    font-size: 12px;
    line-height: 18px;
}


.contact-form button {
    cursor: pointer;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-style: normal;
    padding: 5px 10px;
    box-shadow: 0px 4px 4px rgba(3, 0, 60, 0.19);
    border-radius: 0px;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.75rem;
    background-color: #3276ff;
    border-color: #3276ff;
    border: 1px solid #3276ff;
    color: #FFF;
    font-weight: 400;
}


.contact-form button:hover,
.contact-form button:focus {
    background-color: #0959FA;
    border-color: #0959FA;
    border: 1px solid #0959FA;
    color: #FFF;
}

.contact-form label {
    margin-bottom: 10px;
}

.contact-form .required-input {
    color: #c10000;
}

.contact-form input,
.contact-form textarea {
    border-radius: 0px;
    border: 1px solid #bbb;
}

.contact-form input:focus, .contact-form textarea:focus {
    box-shadow: none;
}

.contact-form .form-check-input:focus {
    box-shadow: none;
}

#orderDiscounts, #possibleDiscounts {
    /*color: #0959FA;*/
}

#possibleDiscounts + #orderDiscounts {
    margin-top: 0px !important;
}