@charset "utf-8";

/* ==========================================================
   CB SPORT - HUISSTIJL
   ========================================================== */

:root {
    --cb-bordeaux: #6c1a41;
    --cb-groen: #BED54A;
    --cb-donker: #222;
    --cb-grijs: #555;
    --cb-lichtgrijs: #f3f3f3;
}


/* ==========================================================
   CB SPORT - BASIS
   ========================================================== */

html {
    padding: 0;
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;

    background: var(--cb-groen);

    font-family: Arial, Helvetica, sans-serif;
    color: var(--cb-grijs);
}


/* ==========================================================
   HEADER - MODERNE CB SPORT STIJL
   ========================================================== */

.header {
    padding: 0;
    margin: 0 auto;
}

.block_header {
    width: 980px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}


/* ==========================================================
   LOGO
   ========================================================== */

.logo {
    padding: 20px 0 0 10px;
    margin: 0;
    width: 185px;
    float: left;
}

.logo img {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}


/* ==========================================================
   COOKIE / TAAL / BEDRIJFSINFO
   ========================================================== */

.menutaal {
    float: right;

    width: 705px;

    margin: 0;
    padding: 17px 7px 0 0;

    box-sizing: border-box;

    text-align: right;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 1.45;

    color: #666;
}

.menutaal a {
    color: #666;
    text-decoration: none;
}

.menutaal a:active {
    color: #666;
}

.menutaal a:hover {
    color: var(--cb-bordeaux);
}


/* ==========================================================
   NAVIGATIE CONTAINER
   ========================================================== */

.menu {
    float: right;

    width: 780px;

    margin: 13px 0 0;
    padding: 0;

    position: relative;

    z-index: 1000;
}


/* ==========================================================
   ALGEMENE BODY
   ========================================================== */

.body {
    padding: 0;
    margin: 0;
}


/* ==========================================================
   BESTAANDE CONTENT BLOKKEN
   ========================================================== */

.body .main1 .blogga {
    width: 745px;
    margin: 0;
    padding: 10px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;

    float: left;
    color: #666;
}

.body .main1 .blogga3 {
    width: 955px;
    margin: 0;
    padding: 10px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;

    float: left;
    color: #666;
}

.body .main1 .blogga4 {
    width: 955px;
    margin: 0;
    padding: 10px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;

    float: left;
    color: #666;
}

.body .main1 .foto {
    width: 950px;
    margin: 0;
    padding: 10px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;

    float: left;
    color: #666;

    line-height: 35px;
}

.body .main1 .blogga5 {
    width: 150px;
    float: left;
}


/* ==========================================================
   OUDE CONTENT BOX
   ========================================================== */

.body .main1 .blogga2 {
    width: 150px;
    float: left;

    margin: 0 auto 10px 0;
    margin-right: 10px;

    padding: 25px 10px 25px 25px;

    background: #8b8b8b;

    border-radius: 2em;

    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;

    box-shadow: 0 1px 3px rgba(0,0,0,.4);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;

    color: #fff;

    border: solid 1px var(--cb-groen);

    font-style: italic;
}

.body .main1 .blogga2 a {
    color: #fff;
    text-decoration: none;
}

.body .main1 .blogga2 a:active {
    color: #666;
}

.body .main1 .blogga2 a:hover {
    color: var(--cb-groen);
}


/* ==========================================================
   MAIN CONTAINER
   ========================================================== */

.body .main1 {
    width: 962px;

    margin: 10px auto;
    padding: 0;

    background: #f3f3f3;

    border: 1px solid #dedede;
}


/* ==========================================================
   ALGEMENE TITELS
   ========================================================== */

.body .main1 h2 {
    background: #e9e9e9;

    padding: 10px 16px;
    margin: 0;

    font: bold 18px Arial, Helvetica, sans-serif;
    border-left: 4px solid var(--cb-bordeaux);
    color: #2c2c2c;
}

.body .main1 h1 {
    background: #e9e9e9;

    padding: 10px 16px;
    margin: 0;

    font: bold 18px Arial, Helvetica, sans-serif;

    color: var(--cb-bordeaux);

    line-height: 1.5em;
}

.body .main1 h3 {
    font: bold 15px Arial, Helvetica, sans-serif;

    color: #2c2c2c;

    padding: 5px;
    margin: 0;
}

.body .main1 h5 {
    font: bold 15px Arial, Helvetica, sans-serif;

    color: #666;

    margin: 0;
}


/* ==========================================================
   PARAGRAFEN
   ========================================================== */

.body .main1 p {
    font: normal 13px Arial, Helvetica, sans-serif;

    color: #666;

    padding: 5px;
    margin: 0;

    line-height: 1.8em;
}

.body .main1 p1 {
    font: normal 11px Arial, Helvetica, sans-serif;

    color: #666;

    padding: 5px;
    margin: 0;

    line-height: 1.4em;
}

.body .main1 p2 {
    font: normal 10px Arial, Helvetica, sans-serif;

    color: #666;

    padding: 5px;
    margin: 0;

    line-height: 1.4em;
}

.body .main1 p3 {
    font: normal 15px Arial, Helvetica, sans-serif;

    color: #666;

    padding: 25px;
    margin: 0 0 0 10px;

    line-height: 1.6em;
}


/* ==========================================================
   ALGEMENE BODY TITELS
   ========================================================== */

.body h2 {
    margin: 0;
    padding: 0;

    font: normal 30px Arial, Helvetica, sans-serif;

    color: #666;
}

.body h3 {
    font: bold 19px Arial, Helvetica, sans-serif;

    color: #666;

    padding: 15px 5px;
    margin: 0;
}

.body h4 {
    font: bold 15px Arial, Helvetica, sans-serif;

    color: #666;

    padding: 15px 5px;
    margin: 0;

    line-height: 1.5em;
}

.body h4rood {
    font: bold 16px Arial, Helvetica, sans-serif;

    color: var(--cb-bordeaux);

    padding: 15px 5px;
    margin: 0;

    line-height: 1.5em;
}

.body p {
    font: normal 13px Arial, Helvetica, sans-serif;

    color: #666;

    line-height: 1.8em;

    padding: 15px;
    margin: 0;
}

.body psmall {
    font: normal 10px Arial, Helvetica, sans-serif;

    color: #666;

    line-height: 1.8em;

    padding: 15px;
    margin: 0;
}

.body p span {
    color: #999;
}


/* ==========================================================
   ALGEMENE LINKS
   ========================================================== */

.body a {
    color: #666;
    text-decoration: none;
}

.body a:active {
    color: #555;
}

.body a:hover {
    color: var(--cb-bordeaux);
    text-decoration: none;
}


/* ==========================================================
   AFBEELDINGEN
   ========================================================== */

.body img {
    margin: 5px;
    padding-right: 10px;
    border: 0;
}


/* ==========================================================
   CONTENT LAYOUT
   ========================================================== */

.port_resize {
    width: 290px;

    float: left;

    margin: 10px 5px 10px 8px;
    padding: 0;
}

.body_resize {
    width: 940px;

    margin: 0 auto;
    padding: 10px 10px;
}


/* ==========================================================
   KOLOMMEN
   ========================================================== */

.right_33 {
    width: 298px;

    border: 1px solid #e1e1e1;

    margin: 10px 8px 10px 0 !important;
    padding: 10px 20px;

    float: right;
}

.left_66 {
    width: 570px;

    border: 1px solid #e1e1e1;

    margin: 10px 0 10px 8px !important;
    padding: 10px 20px;

    float: left;
}

.right_66 {
    width: 570px;

    border: 1px solid #e1e1e1;

    margin: 10px 8px 10px 0 !important;
    padding: 10px 20px;


    float: right;
}

.left_33 {
    width: 298px;

    border: 1px solid #e1e1e1;

    margin: 10px 0 10px 8px !important;
    padding: 10px 20px;

    float: left;
}

.right_50 {
    width: 434px;

    border: 1px solid #e1e1e1;

    margin: 10px 8px 10px 0 !important;
    padding: 10px 20px;

    float: right;
}

.left_50 {
    width: 434px;

    border: 1px solid #e1e1e1;

    margin: 10px 0 10px 8px !important;
    padding: 10px 20px;

    float: left;
}

.right_100 {
    width: 919px;

    border: 1px solid #e1e1e1;

    margin: 10px 8px 10px 0 !important;
    padding: 10px 20px;

    float: right;
}

.red {
    color: var(--cb-bordeaux);
}


/* ==========================================================
   CONTACT
   ========================================================== */

.contus_left {
    width: 200px;
    border: 0;

    margin: 10px 0 10px 8px !important;
    padding: 1px 2px;

    float: left;
}

.contus_right {
    width: 350px;
    border: 0;

    margin: 10px 8px 10px 0 !important;
    padding: 1px 2px;

    float: right;
}

.contus_codevalidleft {
    width: 500px;
    border: 0;

    margin: 0;
    padding: 0;

    float: none;
}

.contus_codeleft {
    width: 195px;
    border: 0;

    margin: 10px 0 10px 8px !important;
    padding: 0;

    float: left;
}

.contus_validright {
    width: 250px;
    border: 0;

    margin: 10px 8px 10px 0 !important;
    padding: 0;

    float: right;
}


/* ==========================================================
   FOUTMELDINGEN
   ========================================================== */

.error_lable_header {
    font: bold 20px Arial, Helvetica, sans-serif;

    color: var(--cb-bordeaux);

    padding: 15px;
    margin: 10px;

    vertical-align: middle;
}

.error_lable {
    font: 15px Arial, Helvetica, sans-serif;

    color: #666;

    padding: 15px 5px;
    margin: 0;
}

.error_lable_msg {
    font: 15px Arial, Helvetica, sans-serif;

    background-color: #f0f0f0;
}


/* ==========================================================
   CB SPORT FOOTER
   ========================================================== */

.footer {
    background: #222;

    color: #aaa;

    margin-top: 50px;
    padding: 45px 0 0;

    border-top: 4px solid var(--cb-bordeaux);
}


.footer-inner {
    width: 94%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.4fr;

    gap: 50px;
}


/* ==========================================================
   FOOTER ALGEMEEN
   ========================================================== */

.footer-col h3 {
    margin: 0 0 15px;

    color: #fff;

    font-size: 18px;
    font-weight: 600;
}

.footer-col p {
    margin: 0 0 12px;

    font-size: 13px;
    line-height: 1.6;
}

.footer-col i {
    color: #BED54A;
}

.footer-col .fa-instagram {
    color: #BED54A !important;
}

.footer a {
    color: #aaa;

    text-decoration: none;

    transition: all .2s ease;
}

.footer a:hover {
    color: var(--cb-groen);
}


/* ==========================================================
   FOOTER BEDRIJF
   ========================================================== */

.footer-tagline {
    color: #fff;

    font-size: 14px !important;
}

.footer-address {
    margin-top: 20px !important;
}


/* ==========================================================
   FOOTER NAVIGATIE
   ========================================================== */

.footer-navigation > a {
    display: block;

    margin-bottom: 8px;

    font-size: 13px;
}

.footer-subnav {
    margin-top: 18px;

    padding-top: 15px;

    border-top: 1px solid #444;
}

.footer-subnav a {
    display: inline-block;

    margin: 0 12px 7px 0;

    font-size: 12px;
}


/* ==========================================================
   INSTAGRAM
   ========================================================== */

.instagram-title {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 15px;
}

.instagram-title h3 {
    margin: 0;
    padding: 0;

    color: #fff;
}

.instagram-title h3 i {
    color: var(--cb-bordeaux);
}

.instagram-subtitle {
    display: block;

    color: #777;

    font-size: 11px;
}

.instagram-follow {
    padding-top: 3px;

    font-size: 12px;

    white-space: nowrap;
}

.instagram-follow:hover {
    color: var(--cb-groen) !important;
}


/* ==========================================================
   INSTAGRAM FOTO GRID
   ========================================================== */

#instagram-grid,
.instagram-grid {
    display: grid;

    grid-template-columns: repeat(4, 108px);

    gap: 7px;

    width: max-content;
    max-width: 100%;
}


/* ==========================================================
   INSTAGRAM THUMBNAILS
   ========================================================== */

#instagram-grid a,
.instagram-grid a {
    display: block;

    width: 108px;
    height: 108px;

    overflow: hidden;

    background: #333;

    border-radius: 2px;

    padding: 0;
    margin: 0;
}


/* FOTO */

#instagram-grid img,
.instagram-grid img {
    display: block;

    width: 108px;
    height: 108px;

    object-fit: cover;

    margin: 0;
    padding: 0;

    border: 0;

    transition:
        transform .3s ease,
        opacity .3s ease;
}


/* HOVER */

#instagram-grid a:hover img,
.instagram-grid a:hover img {
    transform: scale(1.08);

    opacity: .75;
}


/* =========================================================
   SOCIAL MEDIA FOOTER
   ========================================================= */

.footer-social {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;

    margin-top: 35px;
    padding: 18px 0;

    border-top: 1px solid #383838;
}


.footer-social a {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #333;

    color: #BED54A;

    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.footer-social a i {
    margin: 0;
    padding: 0;

    width: auto;

    font-size: 17px;

    color: #BED54A;
}


.footer-social a:hover {
    background: #6C1A41;

    transform: translateY(-2px);
}


.footer-social a:hover i {
    color: #fff;
}


/* ==========================================================
   FOOTER COPYRIGHT
   ========================================================== */

.footer-bottom {
    width: 94%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 18px 0 22px;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px 20px;

    border-top: 1px solid #333;

    color: #666;

    font-size: 11px;
}

.footer-bottom a {
    color: #888;
}

.footer-bottom a:hover {
    color: var(--cb-groen);
}


/* ==========================================================
   TABLET FOOTER
   ========================================================== */

@media (max-width: 900px) {

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .footer-instagram {
        grid-column: 1 / -1;
    }

}


/* ==========================================================
   MOBIEL FOOTER
   ========================================================== */

@media (max-width: 600px) {

    .footer {
        padding-top: 30px;
    }

    .footer-inner {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .footer-instagram {
        grid-column: auto;
    }

    #instagram-grid,
    .instagram-grid {
        grid-template-columns: repeat(3, 108px);
    }

    .footer-bottom {
        text-align: center;
    }

}


/* ==========================================================
   ZEER KLEINE SCHERMEN
   ========================================================== */

@media (max-width: 380px) {

    #instagram-grid,
    .instagram-grid {
        grid-template-columns: repeat(2, 108px);
    }

}


/* ==========================================================
   CLEAR
   ========================================================== */

p.clr,
.clr {
    clear: both;

    padding: 0;
    margin: 0;

    background: none;
}

li.bg,
.bg {
    clear: both;

    border-top: 1px solid #ccc;

    padding: 0;
    margin: 10px 0;

    background: none;

    line-height: 0;
}


/* ==========================================================
   SLIDER
   ========================================================== */

.gallery {
    width: 964px;
    height: 310px;

    margin: 0 auto;
    padding: 10px 0 0 0;
}

#slider {
    margin: 0;
    padding: 0;

    list-style: none;
}

#slider ul,
#slider li {
    margin: 0;
    padding: 0;

    list-style: none;
}

#slider li {
    width: 964px;
    height: 310px;

    overflow: hidden;
}

p#controls {
    margin: 0;
    padding: 0;

    position: relative;
}



/* ==========================================================
   SLIDER PIJLEN - KLEINER
   ========================================================== */

#prevBtn {
    display: block;

    margin: 0;

    overflow: hidden;

    width: 28px;
    height: 28px;

    position: absolute;

    left: 3px;
    top: -32px;

    z-index: 4;
}

#nextBtn {
    display: block;

    margin: 0;

    overflow: hidden;

    width: 28px;
    height: 28px;

    position: absolute;

    left: 930px;
    top: -32px;

    z-index: 4;
}


/* LINKER PIJL */

#prevBtn a {
    display: block;

    width: 28px;
    height: 28px;

    background: rgba(255,255,255,.85);

    border-radius: 50%;

    text-align: center;

    text-decoration: none;
}

#prevBtn a:before {
    content: "\f053";

    font-family: FontAwesome;

    font-size: 12px;

    line-height: 28px;

    color: #666;
}


/* RECHTER PIJL */

#nextBtn a {
    display: block;

    width: 28px;
    height: 28px;

    background: rgba(255,255,255,.85);

    border-radius: 50%;

    text-align: center;

    text-decoration: none;
}

#nextBtn a:before {
    content: "\f054";

    font-family: FontAwesome;

    font-size: 12px;

    line-height: 28px;

    color: #666;
}


/* HOVER */

#prevBtn a:hover,
#nextBtn a:hover {
    background: var(--cb-groen);
}

#prevBtn a:hover:before,
#nextBtn a:hover:before {
    color: #fff;
}


/* ==========================================================
   SLIDER BESCHRIJVING
   ========================================================== */

#description {
    position: relative;

    bottom: 38px;

    width: 964px;

    background-color: #515151;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    color: #ffffff;

    opacity: .9;

    filter: alpha(opacity=90);

    z-index: 3;

    left: 0;
}

p.description_content {
    padding: 10px;

    margin: 0 0 0 40px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: normal;

    color: #ffffff;
}


#description2 {
    position: relative;

    bottom: 38px;

    width: 964px;

    background-color: #515151;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    color: #ffffff;

    opacity: .9;

    filter: alpha(opacity=90);

    z-index: 3;

    left: 0;
}

p.description2_content {
    padding: 7px;

    margin: 0 0 0 40px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    color: #ffffff;
}


#description3 {
    position: relative;

    bottom: 38px;

    width: 964px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    color: #666;

    opacity: .8;

    filter: alpha(opacity=80);

    z-index: 3;

    left: 0;
}

p.description_content3 {
    padding: 10px;

    margin: 0 0 0 40px;
}


/* ==========================================================
   NO SLIDER
   ========================================================== */

.nogallery {
    width: 964px;

    height: 1px;

    margin: 0 auto;

    padding: 10px 0 0 0;
}


/* FOTO ZONDER SLIDER */

#sliderno {
    margin: 0;
    padding: 0;

    list-style: none;
}

#sliderno ul,
#sliderno li {
    margin: 0;
    padding: 0;

    list-style: none;
}

#sliderno li {
    width: 964px;
    height: 310px;

    overflow: hidden;
}

p.description_contentno {
    padding: 10px;

    margin: 0 0 0 8px;
}


/* ==========================================================
   NAVIGATIE
   ========================================================== */

#nav {
    margin: 0;
    padding: 6px 8px 0;

    line-height: 100%;

    display: inline-block;

    background: #777;

    border: 1px solid #666;

    border-radius: 8px;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;

    box-shadow: 0 2px 5px rgba(0,0,0,.25);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;
}


/* HOOFDMENU */

#nav li {
    margin: 0 3px;

    padding: 0 0 7px;

    float: left;

    position: relative;

    list-style: none;
}


/* LINKS */

#nav > li > a,
#nav li > a {
    display: block;

    padding: 9px 18px;

    margin: 0;

    color: #eee;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: bold;

    text-decoration: none;

    border-radius: 6px;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;

    text-shadow: 0 1px 1px rgba(0,0,0,.35);

    transition:
        background-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}


/* ==========================================================
   ACTIEVE PAGINA / HOVER
   ========================================================== */

#nav .current > a,
#nav li:hover > a,
body#home a#home_link,
body#bestanden a#bestanden_link,
body#producten a#producten_link,
body#contact a#contact_link,
body#onderhoud a#onderhoud_link,
body#foto a#foto_link {

    background: var(--cb-bordeaux);

    color: #fff;

    border-top: 1px solid #a94a65;

    box-shadow: 0 2px 4px rgba(0,0,0,.20);

    text-shadow: 0 1px 1px rgba(0,0,0,.25);
}


/* ==========================================================
   SUBMENU
   ========================================================== */

#nav ul {

    display: none;

    position: absolute;

    top: 38px;
    left: 0;

    width: 205px;

    margin: 0;
    padding: 5px 0;

    background: #f5f5f5;

    border: 1px solid #ccc;

    border-radius: 6px;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;

    box-shadow: 0 3px 10px rgba(0,0,0,.25);

    z-index: 100;
}


/* SUBMENU ZICHTBAAR */

#nav li:hover > ul {
    display: block;
}


/* SUBMENU ITEMS */

#nav ul li {
    float: none;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* SUBMENU LINKS */

#nav ul li a {

    display: block;

    box-sizing: border-box;

    width: 100%;

    padding: 9px 14px;

    color: #444;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: normal;

    background: transparent;

    border: none;

    border-radius: 0;

    text-shadow: none;

    box-shadow: none;
}


/* SUBMENU HOVER */

#nav ul li a:hover {

    background: var(--cb-bordeaux);

    color: #fff;

    border: none;

    box-shadow: none;

    text-shadow: none;
}


/* SUBMENU RONDE HOEKEN */

#nav ul li:first-child > a {
    border-radius: 5px 5px 0 0;
}

#nav ul li:last-child > a {
    border-radius: 0 0 5px 5px;
}


/* NIVEAU 3 */

#nav ul ul {
    left: 201px;
    top: -5px;
}


/* ==========================================================
   CB SPORT - NIEUWE HOMEPAGE
   ========================================================== */

.body .main1.cb-main .cb-section {

    width: 100%;
    box-sizing: border-box;

    padding: 30px 32px 35px;

    background: #f3f3f3;

    color: #555;

    font-family: Arial, Helvetica, sans-serif;
}


/* ==========================================================
   INTRO
   ========================================================== */

.body .main1.cb-main .cb-intro {

    margin: 0 0 32px;
    padding: 0;
}

.body .main1.cb-main .cb-intro h3 {

    margin: 0 0 12px;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;
    line-height: 1.35;

    font-weight: bold;

    color: #333;
}

.body .main1.cb-main .cb-intro p {

    margin: 0;
    padding: 0;

    max-width: 900px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    line-height: 1.75;

    color: #555;
}


/* ==========================================================
   PRODUCTKAARTEN
   ========================================================== */

.body .main1.cb-main .cb-products {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    width: 100%;

    margin: 0 0 35px;
    padding: 0;
}


/* ==========================================================
   PRODUCTKAART
   ========================================================== */

.body .main1.cb-main .cb-card {

    box-sizing: border-box;

    min-height: 175px;

    margin: 0;
    padding: 22px 22px 20px;

    background: #fff;

    border: 1px solid #ddd;
    border-top: 4px solid var(--cb-bordeaux);

    box-shadow: 0 2px 6px rgba(0,0,0,.07);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


/* ==========================================================
   HOVER
   ========================================================== */

.body .main1.cb-main .cb-card:hover {

    border-top-color: var(--cb-groen);

    box-shadow: 0 5px 14px rgba(0,0,0,.12);

    transform: translateY(-2px);
}


/* ==========================================================
   TITEL
   ========================================================== */

.body .main1.cb-main .cb-card h3 {

    margin: 0 0 14px;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 18px;
    line-height: 1.35;

    font-weight: bold;

    color: #333;
}


/* ==========================================================
   LIJST
   ========================================================== */

.body .main1.cb-main .cb-card ul {

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ==========================================================
   LI
   ========================================================== */

.body .main1.cb-main .cb-card li {

    position: relative;

    margin: 0;
    padding: 4px 0 4px 17px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;
    line-height: 1.5;

    color: #555;
}


/* ==========================================================
   BULLET
   ========================================================== */

/* FONT AWESOME PIJLTJE */

/* ==========================================================
   FONT AWESOME PIJLTJE
   ========================================================== */

.body .main1.cb-main .cb-card li:before {

    content: "\f054";

    position: absolute;

    left: 0;
    top: 5px;

    font-family: FontAwesome;

    color: var(--cb-bordeaux);

    font-size: 10px;

    font-weight: normal;

    transition: color .2s ease;
}


/* PIJLTJE GROEN BIJ HOVER */

.body .main1.cb-main .cb-card li:hover:before {

    color: var(--cb-groen);
}


/* ==========================================================
   LINKS
   ========================================================== */

.body .main1.cb-main .cb-card a {

    color: inherit;

    text-decoration: none;
}

.body .main1.cb-main .cb-card h3 a {

    color: #333;

    text-decoration: none;
}

.body .main1.cb-main .cb-card li a {

    color: #555;

    text-decoration: none;
}


/* ==========================================================
   LINK HOVER
   ========================================================== */

.body .main1.cb-main .cb-card a:hover {

    color: var(--cb-bordeaux);

    text-decoration: none;
}


/* ==========================================================
   WAAROM KIEZEN VOOR CB SPORT
   ========================================================== */

.body .main1.cb-main .cb-why {

    box-sizing: border-box;

    width: 100%;

    margin: 0 0 32px;

    padding: 28px 30px;

    background: #515151;

    border-left: 5px solid var(--cb-groen);

    box-shadow: 0 2px 5px rgba(0,0,0,.08);
}


/* TITEL */

.body .main1.cb-main .cb-why h3 {

    margin: 0 0 23px;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 22px;
    line-height: 1.3;

    font-weight: bold;

    color: #fff;
}


/* VOORDELEN */

.body .main1.cb-main .cb-benefits {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px 35px;

    margin: 0;
    padding: 0;
}


/* VOORDEEL */

.body .main1.cb-main .cb-benefit {

    margin: 0;
    padding: 0 0 0 18px;

    border-left: 2px solid #777;
}


/* TITEL VOORDEEL */

.body .main1.cb-main .cb-benefit h4 {

    margin: 0 0 7px;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;
    line-height: 1.4;

    font-weight: bold;

    color: #fff;
}


/* TEKST */

.body .main1.cb-main .cb-benefit p {

    margin: 0;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;
    line-height: 1.65;

    color: #ddd;
}


/* LINKS */

.body .main1.cb-main .cb-benefit a {

    color: #ddd !important;

    text-decoration: none !important;
}

.body .main1.cb-main .cb-benefit a:hover {

    color: var(--cb-groen) !important;

    text-decoration: none !important;
}


/* ==========================================================
   DOWNLOAD / ACTIES
   ========================================================== */

.body .main1.cb-main .cb-actions {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    margin: 5px 0 0;
    padding: 15px 0 0;

    border-top: 1px solid #ddd;
}


/* DOWNLOAD */

.body .main1.cb-main .cb-download {

    display: flex;

    align-items: center;

    color: #555;

    text-decoration: none;
}

.body .main1.cb-main .cb-download img {

    display: block;

    margin: 0 10px 0 0;
    padding: 0;
}

.body .main1.cb-main .cb-download span {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;
    line-height: 1.5;

    color: #555;
}

.body .main1.cb-main .cb-download strong {

    color: var(--cb-bordeaux);
}

.body .main1.cb-main .cb-download:hover {

    opacity: .75;

    text-decoration: none;
}


/* ==========================================================
   SOCIAL
   ========================================================== */

.body .main1.cb-main .cb-social {

    display: flex;

    align-items: center;

    gap: 15px;
}


/* ==========================================================
   WIE ZIJN WE
   ========================================================== */

.body .main1.cb-main .cb-about {

    padding-top: 22px;
}


/* TEKST */

.body .main1.cb-main .cb-about .cb-intro {

    margin: 0 0 22px;
    padding: 0;
}

.body .main1.cb-main .cb-about .cb-intro p {

    margin: 0;
    padding: 0;

    max-width: 900px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    line-height: 1.75;

    color: #555;
}


/* ==========================================================
   SOCIAL MEDIA + OFFERTE
   ========================================================== */

.body .main1.cb-main .cb-about-actions {

    display: flex;

    align-items: center;

    gap: 14px;

    margin: 15px 0 0;
    padding: 5px 0 0;
}


/* ==========================================================
   SOCIAL MEDIA KNOPPEN
   ========================================================== */

.body .main1.cb-main .cb-about-social {

    display: flex;

    align-items: center;

    gap: 8px;
}


/* RONDE KNOP */

.body .main1.cb-main .cb-about-social a {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    border-radius: 50%;

    background: #515151;

    color: var(--cb-groen);

    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


/* ICOON */

.body .main1.cb-main .cb-about-social a i {

    margin: 0;
    padding: 0;

    font-size: 17px;

    color: var(--cb-groen);
}


/* HOVER */

.body .main1.cb-main .cb-about-social a:hover {

    background: var(--cb-bordeaux);

    color: #fff;

    transform: translateY(-2px);
}

.body .main1.cb-main .cb-about-social a:hover i {

    color: #fff;
}


/* ==========================================================
   OFFERTE KNOP
   ========================================================== */

.body .main1.cb-main .cb-about-offerte {

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 38px;

    box-sizing: border-box;

    padding: 0 17px;

    background: #515151;

    border-radius: 19px;

    color: var(--cb-groen);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;
    font-weight: bold;

    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


/* ICOON */

.body .main1.cb-main .cb-about-offerte i {

    font-size: 15px;

    color: var(--cb-groen);

    margin: 0;
    padding: 0;
}


/* HOVER */

.body .main1.cb-main .cb-about-offerte:hover {

    background: var(--cb-bordeaux);

    color: #fff;

    transform: translateY(-2px);
}

.body .main1.cb-main .cb-about-offerte:hover i {

    color: #fff;
}


/* ==========================================================
   HOMEPAGE - TABLET
   ========================================================== */

@media screen and (max-width: 850px) {

    .body .main1.cb-main .cb-products {

        grid-template-columns: repeat(2, 1fr);

    }

    .body .main1.cb-main .cb-card h3 {

        font-size: 17px;

    }

    .body .main1.cb-main .cb-card li {

        font-size: 14px;

    }

}


/* ==========================================================
   HOMEPAGE - GSM
   ========================================================== */

@media screen and (max-width: 600px) {

    .body .main1.cb-main .cb-section {

        padding: 22px 15px 28px;

    }


    /* PRODUCTEN */

    .body .main1.cb-main .cb-products {

        grid-template-columns: 1fr;

        gap: 12px;

    }

    .body .main1.cb-main .cb-card {

        min-height: auto;

        padding: 18px;

    }


    /* WAAROM */

    .body .main1.cb-main .cb-benefits {

        grid-template-columns: 1fr;

        gap: 22px;

    }

    .body .main1.cb-main .cb-why {

        padding: 23px 20px;

    }


    /* ACTIES */

    .body .main1.cb-main .cb-actions {

        display: block;

    }

    .body .main1.cb-main .cb-social {

        margin-top: 20px;

    }


    /* ABOUT */

    .body .main1.cb-main .cb-about .cb-intro p {

        font-size: 15px;

        line-height: 1.7;

    }

    .body .main1.cb-main .cb-about-actions {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media screen and (max-width: 850px) {

    .block_header {
        width: 96%;
    }

    .body .main1 {
        width: 96%;
    }

    .body .main1.cb-main .cb-products {
        grid-template-columns: repeat(2, 1fr);
    }

    .body .main1.cb-main .cb-card h3 {
        font-size: 17px;
    }

    .body .main1.cb-main .cb-card li {
        font-size: 14px;
    }

}


/* ==========================================================
   GSM
   ========================================================== */

@media screen and (max-width: 600px) {

    .block_header {
        width: 100%;
    }

    .body .main1 {
        width: 100%;

        box-sizing: border-box;
    }

    .body .main1.cb-main .cb-section {
        padding: 20px 15px 25px;
    }


    /* PRODUCTEN */

    .body .main1.cb-main .cb-products {

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .body .main1.cb-main .cb-card {

        min-height: auto;

        padding: 18px;
    }


    /* WAAROM */

    .body .main1.cb-main .cb-benefits {

        grid-template-columns: 1fr;
    }

    .body .main1.cb-main .cb-why {

        padding: 22px;
    }


    /* ACTIES */

    .body .main1.cb-main .cb-actions {

        display: block;
    }

    .body .main1.cb-main .cb-social {

        margin-top: 20px;
    }


    /* NAVIGATIE */

    #nav {

        width: 100%;

        box-sizing: border-box;

        border-radius: 5px;
    }

    #nav li {

        margin: 0;
    }

    #nav > li > a {

        padding: 9px 10px;

        font-size: 12px;
    }


    /* ABOUT */

    .body .main1.cb-main .cb-about .cb-intro p {

        font-size: 15px;

        line-height: 1.7;
    }

    .body .main1.cb-main .cb-about-actions {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }

}
/* ==========================================================
   WIE ZIJN WE - SOCIAL MEDIA + OFFERTE
   ========================================================== */

.body .main1.cb-main .cb-about-actions {

    display: flex;

    align-items: center;

    gap: 14px;

    margin: 15px 0 0;

    padding: 5px 0 0;
}


/* ==========================================================
   SOCIAL MEDIA KNOPPEN
   ========================================================== */

.body .main1.cb-main .cb-about-social {

    display: flex;

    align-items: center;

    gap: 8px;
}


/* RONDE KNOP */

.body .main1.cb-main .cb-about-social a {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    border-radius: 50%;

    background: #515151;

    color: var(--cb-groen);

    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


/* ICOON */

.body .main1.cb-main .cb-about-social a i {

    margin: 0;
    padding: 0;

    font-size: 17px;

    color: var(--cb-groen);
}


/* HOVER */

.body .main1.cb-main .cb-about-social a:hover {

    background: var(--cb-bordeaux);

    color: #fff;

    transform: translateY(-2px);
}


.body .main1.cb-main .cb-about-social a:hover i {

    color: #fff;
}


/* ==========================================================
   OFFERTE KNOP
   ========================================================== */

.body .main1.cb-main .cb-about-offerte {

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 38px;

    box-sizing: border-box;

    padding: 0 17px;

    background: #515151;

    border-radius: 19px;

    color: var(--cb-groen);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;
    font-weight: bold;

    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


/* OFFERTE ICOON */

.body .main1.cb-main .cb-about-offerte i {

    font-size: 15px;

    color: var(--cb-groen);

    margin: 0;
    padding: 0;
}


/* OFFERTE HOVER */

.body .main1.cb-main .cb-about-offerte:hover {

    background: var(--cb-bordeaux);

    color: #fff;

    transform: translateY(-2px);
}


.body .main1.cb-main .cb-about-offerte:hover i {

    color: #fff;
}

/* ==========================================================
   PRODUCTKAARTEN - VLAGGENPAGINA
   ========================================================== */

.body .main1 .blogga.cb-product-overview .cb-products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 25px 0 35px !important;
    padding: 0 !important;
}


/* KAART */

.body .main1 .blogga.cb-product-overview .cb-card {
    display: block !important;
    box-sizing: border-box !important;

    min-height: 175px !important;

    margin: 0 !important;
    padding: 21px 22px !important;

    background: #fff !important;

    border: 1px solid #ddd !important;
    border-top: 4px solid var(--cb-bordeaux) !important;

    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease !important;
}


/* HOVER */

.body .main1 .blogga.cb-product-overview .cb-card:hover {
    border-top-color: var(--cb-groen) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.10) !important;
    transform: translateY(-2px) !important;
}


/* TITEL */

.body .main1 .blogga.cb-product-overview .cb-card h3 {
    margin: 0 0 13px !important;
    padding: 0 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: bold !important;

    color: #333 !important;
}


/* ICOON */

.body .main1 .blogga.cb-product-overview .cb-card h3 i {
    margin-right: 8px;
    color: var(--cb-bordeaux);
}


/* LIJST */

.body .main1 .blogga.cb-product-overview .cb-card ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}


/* LI */

.body .main1 .blogga.cb-product-overview .cb-card li {
    position: relative;

    margin: 0 !important;
    padding: 4px 0 4px 17px !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;

    color: #555 !important;
}


/* BULLET */

.body .main1 .blogga.cb-product-overview .cb-card li:before {
    content: "•";

    position: absolute;
    left: 0;
    top: 4px;

    color: var(--cb-bordeaux);
    font-size: 15px;
}


/* LINKS */

.body .main1 .blogga.cb-product-overview .cb-card a {
    color: inherit;
    text-decoration: none;
}


/* TITEL LINK */

.body .main1 .blogga.cb-product-overview .cb-card h3 a {
    color: #333;
    text-decoration: none;
}


/* LINK HOVER + PIJLTJE */

.body .main1 .blogga.cb-product-overview .cb-card h3 a:hover {
    color: var(--cb-groen);
}

.body .main1 .blogga.cb-product-overview .cb-card h3 a:hover i {
    color: var(--cb-groen);
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .body .main1 .blogga.cb-product-overview .cb-products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}

@media (max-width: 600px) {

    .body .main1 .blogga.cb-product-overview .cb-products {
        grid-template-columns: 1fr !important;
    }

}

/* ==========================================================
   FOTOGALLERIJ
   ========================================================== */
.cb-gallery-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 200px;

    margin: 0 10px 15px 0;
    overflow: hidden;
    vertical-align: top;
}

.cb-gallery-item img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.cb-gallery-zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    background: rgba(0,0,0,0.65);
    color: #fff;

    border-radius: 50%;

    z-index: 10;
}

.cb-gallery-zoom i {
    font-size: 16px;
}
.cb-gallery-item:hover .cb-gallery-zoom {
    background: var(--cb-groen);
}
```css
/* ==========================================================
   CONTACTPAGINA
   ========================================================== */

.cb-contact-page {
    overflow: hidden;
}


/* ==========================================================
   CONTACT - BOVENSTE GEDEELTE
   ========================================================== */

.cb-contact-page .cb-contact-intro {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    box-sizing: border-box;

    width: 100%;

    margin: 0;

    padding: 28px 25px 30px;

    background: #f3f3f3;
}

/* ==========================================================
   CONTACT - INTRO
   ========================================================== */

.body .main1.cb-contact-page .cb-contact-lead {

    box-sizing: border-box;

    width: 100%;

    margin: 0 0 10px;
    padding: 30px 32px 28px;

    background: #f3f3f3;
}


.body .main1.cb-contact-page .cb-contact-lead h3 {

    margin: 0 0 12px;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    line-height: 1.35;

    font-weight: bold;

    color: #333;
}


.body .main1.cb-contact-page .cb-contact-lead p {

    max-width: 900px;

    margin: 0 !important;
    padding: 0 !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;
    line-height: 1.75;

    color: #555;
}


.body .main1.cb-contact-page .cb-contact-lead p strong {

    color: var(--cb-bordeaux);

}


/* ==========================================================
   CONTACTGEGEVENS
   ========================================================== */

.cb-contact-page .cb-contact-info {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    margin: 0;

    padding: 0;
}


.cb-contact-page .cb-contact-image {

    display: block;

    width: 210px;
    height: auto;

    margin: 0 !important;
    padding: 0 !important;

    border: 0;
}


.cb-contact-page .cb-contact-details {

    padding-top: 3px;
}


.cb-contact-page .cb-contact-details h4 {

    margin: 0 0 12px;

    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 21px;

    line-height: 1.3;

    font-weight: bold;

    color: #333;

}


.cb-contact-page .cb-contact-details p {

    margin: 0 !important;

    padding: 0 !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    line-height: 1.7;

    color: #555;
}


/* ==========================================================
   CONTACT KNOPPEN
   ========================================================== */

.cb-contact-page .cb-contact-actions {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 10px;

    margin: 0;

    padding: 0;
}


.cb-contact-page .cb-contact-button {

    display: flex;

    align-items: center;

    min-height: 58px;

    box-sizing: border-box;

    padding: 10px 16px;

    background: #fff;

    border: 1px solid #ddd;

    border-left: 4px solid var(--cb-bordeaux);

    color: #555 !important;

    text-decoration: none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.cb-contact-page .cb-contact-button i {

    width: 35px;

    margin: 0 12px 0 0;

    padding: 0;

    text-align: center;

    font-size: 20px;

    color: var(--cb-bordeaux);
}


.cb-contact-page .cb-contact-button span {

    display: flex;

    flex-direction: column;

    font-size: 12px;

    line-height: 1.4;
}


.cb-contact-page .cb-contact-button strong {

    font-size: 14px;

    color: #333;
}


.cb-contact-page .cb-contact-button:hover {

    border-left-color: var(--cb-groen);

    box-shadow: 0 3px 10px rgba(0,0,0,.10);

    transform: translateX(2px);
}


.cb-contact-page .cb-contact-button:hover i {

    color: var(--cb-groen);
}


/* ==========================================================
   SOCIAL MEDIA
   ========================================================== */

.cb-contact-page .cb-contact-social {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 2px;

    padding: 0;
}


.cb-contact-page .cb-contact-social a {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border-radius: 50%;

    background: #515151;

    color: var(--cb-groen) !important;

    text-decoration: none !important;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.cb-contact-page .cb-contact-social a i {

    margin: 0;
    padding: 0;

    width: auto;

    font-size: 17px;

    color: var(--cb-groen);
}


.cb-contact-page .cb-contact-social a:hover {

    background: var(--cb-bordeaux);

    color: #fff !important;

    transform: translateY(-2px);
}


.cb-contact-page .cb-contact-social a:hover i {

    color: #fff;
}


/* ==========================================================
   OPENINGSINFO
   ========================================================== */

.cb-contact-page .cb-contact-section {

    margin: 0;

    padding: 0 25px 30px;
}


.cb-contact-page .cb-contact-section h5 {

    margin: 0 0 15px !important;

    padding: 12px 15px !important;

    background: #e9e9e9;

    border-left: 4px solid var(--cb-bordeaux);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 17px !important;

    line-height: 1.3;

    color: #333 !important;
}


.cb-contact-page .cb-opening-box {

    box-sizing: border-box;

    width: 100%;

    margin: 0;

    padding: 20px;

    background: #fff;

    border: 1px solid #ddd;
}


.cb-contact-page .cb-opening-box p {

    margin: 0 0 10px !important;

    padding: 0 !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    line-height: 1.7;

    color: #555;
}


.cb-contact-page .cb-opening-box p:last-child {

    margin-bottom: 0 !important;
}


.cb-contact-page .cb-opening-box a {

    color: var(--cb-bordeaux);

    font-weight: bold;

    text-decoration: none;
}


.cb-contact-page .cb-opening-box a:hover {

    color: var(--cb-groen);
}


/* ==========================================================
   OPENINGSINFO HIGHLIGHT
   ========================================================== */

.cb-contact-page .cb-opening-highlight {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin: 0 0 15px;

    padding: 0 0 15px;

    border-bottom: 1px solid #eee;
}


.cb-contact-page .cb-opening-highlight > i {

    margin: 2px 0 0;

    padding: 0;

    font-size: 24px;

    color: var(--cb-bordeaux);
}


.cb-contact-page .cb-opening-highlight strong {

    font-size: 15px;

    color: #333;
}


.cb-contact-page .cb-opening-highlight p {

    margin-top: 4px !important;
}


/* ==========================================================
   CONTACT - MOBIEL
   ========================================================== */

@media screen and (max-width: 700px) {

    .cb-contact-page .cb-contact-intro {

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 20px 15px 25px;
    }


    .cb-contact-page .cb-contact-info {

        flex-direction: column;

        gap: 15px;
    }


    .cb-contact-page .cb-contact-image {

        width: 100%;

        max-width: 300px;
    }


    .cb-contact-page .cb-contact-section {

        padding: 0 15px 25px;
    }

}

/* ==========================================================
   CONTACT - FEEST- & SLUITINGSDAGEN
   ========================================================== */

.cb-holidays-box {
    margin-top: 18px;
}

.cb-holidays-list {
    padding: 5px 0 0;
}

.cb-holidays-list p {
    margin: 0;
    padding: 4px 5px;
    line-height: 1.6;
}

.cb-holidays-list a {
    color: #666;
}

.cb-holidays-list a:hover {
    color: var(--cb-bordeaux);
}
/* ==========================================================
   CONTACT - GOOGLE MAP
   ========================================================== */

.cb-map-box {
    width: 100%;
    box-sizing: border-box;

    padding: 0;

    background: #fff;

    border: 1px solid #ddd;

    overflow: hidden;
}

.cb-map-box iframe {
    display: block;

    width: 100%;
    height: 450px;

    margin: 0;
    padding: 0;

    border: 0;
}


/* MOBIEL */

@media screen and (max-width: 700px) {

    .cb-map-box iframe {
        height: 350px;
    }

}
.cb-contact-details .footer-tagline {
    color: #333;
    font-size: 14px !important;
}

.cb-contact-details .footer-address {
    margin-top: 5px !important;
    color: #555;
}

.cb-contact-details .footer-address br {
    line-height: 1.6;
}

.cb-contact-details .cb-contact-phone {
    margin: 12px 0 0 !important;
    padding: 0 !important;
}

.cb-contact-details .cb-contact-phone i {
    color: var(--cb-bordeaux);
    margin-right: 7px;
}

.cb-contact-details .cb-contact-phone a {
    color: #555;
    font-weight: bold;
}
/* ==========================================================
   CONTACTFORMULIER
   ========================================================== */

.cb-contact-form {

    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 15px 10px 20px;

    font-family: Arial, Helvetica, sans-serif;
}


/* ==========================================================
   FORMULIER GRID
   ========================================================== */

.cb-form-grid {

    width: 100%;

    margin: 0;
    padding: 15px 0 0;
}


/* ==========================================================
   RIJ
   ========================================================== */

.cb-form-row {

    display: grid;

    grid-template-columns: 175px minmax(0, 1fr);

    align-items: center;

    gap: 15px;

    margin: 0 0 10px;

    padding: 0;
}


/* ==========================================================
   LABEL
   ========================================================== */

.cb-form-row label {

    margin: 0;

    padding: 0;

    text-align: right;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    line-height: 1.4;

    color: #555;
}


.cb-form-row label sup {

    color: var(--cb-bordeaux);

    font-weight: bold;
}


/* ==========================================================
   VERPLICHT STERRETJE BIJ VELD
   ========================================================== */

.cb-form-required-star {

    margin-left: 2px;

    color: var(--cb-bordeaux);

    font-size: 11px;

    font-weight: bold;
}


/* ==========================================================
   INPUTS
   ========================================================== */

.cb-form-row input,
.cb-form-row textarea {

    width: 100%;

    box-sizing: border-box;

    margin: 0;
    padding: 9px 11px;

    border: 1px solid #ccc;

    background: #fff;

    border-radius: 3px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    color: #555;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.cb-form-row input {

    height: 38px;
}


.cb-form-row textarea {

    resize: vertical;

    min-height: 75px;

    line-height: 1.5;
}


/* ==========================================================
   FOCUS
   ========================================================== */

.cb-form-row input:focus,
.cb-form-row textarea:focus {

    border-color: var(--cb-bordeaux);

    box-shadow: 0 0 0 2px rgba(108,26,65,.08);
}


/* ==========================================================
   BREDE RIJEN
   ========================================================== */

.cb-form-row-wide {

    align-items: flex-start;

    margin-top: 15px;
}


.cb-form-row-wide label {

    padding-top: 10px;
}


/* ==========================================================
   VOORWAARDEN
   ========================================================== */

.cb-form-conditions {

    margin: 20px 0 18px;

    padding: 15px;

    background: #fff;

    border: 1px solid #ddd;

    border-left: 4px solid var(--cb-bordeaux);
}


.cb-checkbox {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 0;

    padding: 0;

    font-size: 12px;

    line-height: 1.6;

    color: #555;

    cursor: pointer;
}


.cb-checkbox input {

    width: 16px;
    height: 16px;

    flex: 0 0 auto;

    margin: 2px 0 0;

    accent-color: var(--cb-bordeaux);
}


.cb-checkbox a {

    color: var(--cb-bordeaux);

    font-weight: bold;

    text-decoration: none;
}


.cb-checkbox a:hover {

    color: var(--cb-groen);
}


/* ==========================================================
   RECAPTCHA
   ========================================================== */

.cb-form-captcha {

    margin: 15px 0 20px 190px;

    padding: 0;
}


/* ==========================================================
   KNOPPEN
   ========================================================== */

.cb-form-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0 0 10px 190px;

    padding: 0;
}


.cb-form-actions button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 40px;

    padding: 0 18px;

    border: 0;

    border-radius: 3px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: bold;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.cb-form-actions button i {

    margin: 0;

    padding: 0;

    font-size: 13px;
}


/* ==========================================================
   VERZENDEN
   ========================================================== */

.cb-form-submit {

    background: var(--cb-groen);

    color: #555;
}


.cb-form-submit:hover {

    background: var(--cb-bordeaux);

    color: #fff;

    transform: translateY(-1px);
}


/* ==========================================================
   WISSEN
   ========================================================== */

.cb-form-reset {

    background: #777;

    color: #fff;
}


.cb-form-reset:hover {

    background: #555;

    transform: translateY(-1px);
}


/* ==========================================================
   VERPLICHTE VELDEN
   ========================================================== */

.cb-form-required {

    display: block;

    margin: 5px 0 0 190px;

    padding: 0;

    font-size: 11px;

    line-height: 1.4;

    color: #888;
}


.cb-form-required sup {

    color: var(--cb-bordeaux);
}


/* ==========================================================
   FOUTMELDING / SUCCES
   ========================================================== */

.cb-form-error {

    margin: 0 10px 20px;

    padding: 15px 18px;

    background: #fff;

    border-left: 4px solid var(--cb-bordeaux);

    color: #555;

    font-size: 13px;

    line-height: 1.6;
}


.cb-form-success {

    margin: 0 10px 20px;

    padding: 18px;

    background: #fff;

    border-left: 4px solid var(--cb-groen);

    color: #555;

    font-size: 14px;

    line-height: 1.7;
}


/* ==========================================================
   CONTACTKNOPPEN ONDER FORMULIER
   ========================================================== */

.cb-form-footer-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 20px 0 0;

    padding-top: 18px;

    border-top: 1px solid #ddd;
}


.cb-form-footer-actions a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 38px;

    box-sizing: border-box;

    padding: 0 15px;

    background: #515151;

    border-radius: 3px;

    color: var(--cb-groen) !important;

    font-size: 12px;

    font-weight: bold;

    text-decoration: none !important;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.cb-form-footer-actions a:hover {

    background: var(--cb-bordeaux);

    color: #fff !important;

    transform: translateY(-1px);
}


/* ==========================================================
   MOBIEL
   ========================================================== */

@media screen and (max-width: 700px) {

    .cb-contact-form {

        padding: 15px 0 20px;
    }


    .cb-form-grid {

        padding-top: 15px;
    }


    .cb-form-row {

        display: block;

        margin-bottom: 15px;
    }


    .cb-form-row label {

        display: block;

        margin-bottom: 5px;

        text-align: left;
    }


    .cb-form-captcha {

        margin-left: 0;

        overflow-x: auto;
    }


    .cb-form-actions {

        margin-left: 0;

        flex-wrap: wrap;
    }


    .cb-form-required {

        margin: 5px 0 0;

        padding: 0;
    }

}
.cb-form-required-info {

    margin: 5px 0 0 190px;

    padding: 0;

    font-size: 11px;

    line-height: 1.4;

    color: #888;

}


.cb-form-required-info .cb-form-required-star {

    margin-left: 0;

    margin-right: 3px;

    color: var(--cb-bordeaux);

    font-size: 11px;

    font-weight: bold;
}
.cb-form-intro {
    margin: 0 0 28px;
}

.cb-form-intro h3 {
    margin: 0 0 8px;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    line-height: 1.35;
    font-weight: bold;

    color: #333;
}

.cb-form-intro p {
    margin: 0 0 8px;
    padding: 0;

    max-width: 800px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: #666;
}

.cb-form-intro-specialist {
    font-weight: bold;
    color: #515151 !important;
}

.cb-form-intro-strong {
    margin-top: 10px !important;

    font-weight: bold;
    color: #515151 !important;
}

.cb-contact-lead {
    margin: 0 0 25px;
    padding: 0 0 20px;
    border-bottom: 2px solid #BED54A;
}

.cb-contact-lead h4 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.3;
    color: #515151;
}

.cb-contact-lead p {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

.cb-contact-lead p:last-child {
    margin-bottom: 0;
}

.cb-contact-lead strong {
    color: #515151;
}