@import url("/themes/sbdesign/css/bootstrap-icons.css");/*1.8.2*/

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

@import url('radmenu.skin.css');

html {
  position: relative;
  min-height: 100%;
}

body {
    overflow-x: hidden!important;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 1.12rem;
    line-height: 2.2rem;
    color: var(--maintextcolor);
    margin-bottom: 290px;
}

p {line-height: 2.1rem;}

.container-fluid {
    max-width: 95vw;
}

.container {max-width:1200px;}

a {transition: all 0.3s;}

a:not(.btn), a:not(.btn):not(.rmLink) {
/*color: var(--linkhover);*/
text-decoration:underline;
}

a.vraag {
        color: var(--vraag)!important;
        text-decoration: none!important;
    }

a.vraag:hover {
            color: var(--vraaghover) !important;
            text-decoration: none !important;
        }

    a.vraag:before {
        float: right !important;
        font-size: 1.2rem;
        font-family: "bootstrap-icons";
        content: "\F286";
        padding-right: 5px;
    }

    a.vraag.collapsed:before {
        float: right !important;
        content: "\F282";
    }

a:hover {
/*color: var(--linkhover)!important;*/
text-decoration:none;
transition: all 0.3s;
}

a.social {
    color: #5E5C5C!important;/*dit is een hack*/
}

a.social:hover {
    color: var(--mainbtncolor)!important;
    opacity:1!important;
}

  footer.footer a.social:hover {
        color: White !important;/*kan dit in alle templates?*/
        opacity: 1 !important;
    }

.overzicht:hover {
    background-color: var(--sbdesignbrown)!important;
    color: var(--sbdesignwhite);
    transition: .3s all;
}

.footer .text-white a {color:white!important;text-decoration:none!important;}
.footer .text-white a:hover {color:var(--sbdesignbrown)!important;text-decoration:none!important;}

.text-footerup {
    font-family: "Open Sans";
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.text-footerdown {
    font-family: "Open Sans";
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:.75;
}

    .text-footerdown a, .text-footerdown a:hover {
        text-decoration:none!important;
        color: var(--footerlink)!important;
    }

    .bg-light {
    background-color: var(--light)!important;
}

.bg-footer {
    background-color: var(--maincolor);
}

.bg-antwoord {
    background-color: var(--antwoord);
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,.card .h1,
.card .h2, .card .h3, .card .h4,.card .h5,.card .h6 {color: var(--sbdesignblack);}

h1, .h1 {
    font-size: 36px;
    margin-bottom: 1.8rem;
    line-height: 1.1;
}

h1.bigger {
        font-size: 46px;
    }

h2, .h2 {
font-size: 24px;
margin-bottom:1.4rem;
}

h3, .h3 {
font-family: "Open Sans";
font-weight:400;
font-size: 18px;
text-transform:uppercase;
letter-spacing: 2px;
}

h4, .h4 {/*voor de social icons*/
font-size: 1.4rem;
}

section {
  padding: 0 0 150px 0;
}

.btn {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-size:.75rem;
  letter-spacing:2px;
  font-weight: 400;
  border-radius: 5px!important;
  text-transform:uppercase;
  padding: 10px 28px 10px 28px;
}

.btn.text-left {text-align:left!important;}
.btn-lg {
/*  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5) !important;
  box-shadow: 0 0 0 0.2rem rgba(0,0,0, 0.5) !important;*/
}

.btn-xl {
  font-size: 18px;
  padding: 20px 40px;
}

.btn-primary {
    background-color: transparent;
/*    border: 1px solid var(--mainbtncolor)!important;
    color: var(--mainbtncolor)!important;*/
    transition: all 0.3s !important;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover, .RadButton_Bootstrap.rbButton:not(.iconOnly):hover {
        background-color: transparent;
     /*   color: var(--mainbtncolor)!important;
        border: 1px solid var(--mainbtncolor);*/
    }

.btn-secondary {
    opacity:1;
    transition: all 0.3s !important;
}

    .btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover, .RadButton_Bootstrap.rbButton:not(.iconOnly):hover {
        opacity: .7;
        transition: all 0.3s !important;
    }

img::-moz-selection {
  background: transparent;
}

img::selection {
  background: transparent;
}

img::-moz-selection {
  background: transparent;
}

.footer {
 position: absolute;
 bottom: 0;
 width: 100%;
 color: white;
}

.py-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.visual {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
@media (min-width: 992px) {
  .header {min-height:140px;}
  .footer {height:250px;}
    .visual {
        min-height:600px;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

@media (min-width:416px) and (max-width:991px) {
    .header {
        height: 126px;
    }
    h1, .h1 {
        font-size:2rem;
    }
    h2, .h2 {
        font-size: 1.6rem;
    }
	.footer {height:240px;}
    .container {max-width: 100vw!important;
    }
}

@media (min-width:322px) and (max-width:415px) {
    .header {
        height: 126px;
    }
	.footer {height:240px;}
}

@media (max-width:321px) {
    .header {
        height: 126px;
    }
    .footer {height:240px;}
}

/*mobile first*/
@media (min-width: 576px) {
body {margin-bottom: 100px;}
}

.RadSearchBox .rsbInput {
	height: 31px!important;
	margin:0 0 0 5px!important;
}
.RadSearchBox .rsbLoadingIcon {
	margin-left:-35px!important;
}

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 150px;
    right: 20px;
    display:none;
	z-index:9999;
    transition:none!important;/*gebeurt met js; conflict voorkomen*/
}

#map_canvas_wrap {
	height: 100%;
	width: 100%;
	/*position: fixed;
	top: 0rem;
	left: 0rem;*/
}

#map-canvas {
	height: 100%;
	position: relative;
	left: 0rem;
	top: 0rem;
	z-index: 1;
}

/*google maps*/
.gm-style iframe + div { border:none!important;}

.gm-style .gm-style-iw + div {
    display: none; /* <-- this will generally work on the fly. */
    visibility: hidden; /* this 2 lines below are just for hard hiding. :) */
    opacity: 0;
}

button.gm-ui-hover-effect {
   visibility: hidden;
}

.gm-style .gm-style-iw-c {border-radius:0px;padding:0px!important;box-shadow:none;}
.gm-style .gm-style-iw-t::after {
    background: none;
    box-shadow:none;
}

.RadSiteMap_Bootstrap { font-family: 'Roboto Slab', Arial, sans-serif!important;}
.RadSiteMap .rsmTwoLevels > .rsmItem > .rsmLink {
    border:none!important;
    font-size:1rem!important;
}

.RadSiteMap_Bootstrap .rsmOneLevel .rsmLink:hover {background-color:transparent!important;border-color:transparent!important;}

.RadForm_Bootstrap .rfdTextInput:active, .RadForm_Bootstrap.rfdTextarea textarea:active, .RadForm_Bootstrap .rfdTextInput:focus, .RadForm_Bootstrap.rfdTextarea textarea:focus {
    box-shadow:none!important;
}

.rfdRadioUnchecked, .rfdRadioChecked {margin-right:20px!important;}

.gm-style-iw-d { overflow: hidden!important;}

  @media (min-width: 576px) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
        orphans: 1;
        widows: 1;
    }}




@media (max-width: 1200px) {
  .card  {
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.15);
}
    .container-fluid {
        max-width: 100vw;
    }
}




    .card {
        border-radius: 0px;
        border: none;
        transition: .3s all;
    }

    .card-title {
        font-family: "Libre Baskerville";
        font-size: 1.8rem;
    }

    .card-img-top {
        width: 50%;
    }

    .card:not(.nohover):hover {
        box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.15);
        transition: .3s all;
    }

    .card.noborder {
        border: none !important;
    }

    .card-footer {
        background-color: transparent;
        border: none;
    }

    .RadForm_Bootstrap.rfdLabel label {
        color: var(--sbdesignblack) !important;
    }

    .RadForm_Bootstrap .rfdRadioChecked::before, .RadForm_Bootstrap .rfdCheckboxChecked::before {
        color: var(--sbdesignblack) !important;
    }

    .RadForm_Bootstrap .rfdRadioUnchecked:hover::before, .RadForm_Bootstrap .rfdCheckboxUnchecked:hover::before, .RadForm_Bootstrap .rfdRadioChecked:hover::before, .RadForm_Bootstrap .rfdCheckboxChecked:hover::before {
        color: var(--sbdesignblack) !important;
    }

    .RadInput_Bootstrap a {
        background-color: var(--sbdesignwhite) !important;
    }

    .riUp, .riDown {
        padding-left: 2px !important;
    }

    .p-icon {
        color: var(--sbdesignblack) !important;
    }

    .box-shadow {
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    }

    /*lees meer panel*/
    #module #collapseExample.collapse:not(.show) {
        display: block;
        height: 2.5rem;
        overflow: hidden;
    }

    #module #collapseExample.collapsing {
        height: 2.5rem;
    }

    #module #collapseStaffel.collapse:not(.show) {
        display: block;
        height: 2.5rem;
        overflow: hidden;
    }

    #module a {
        font-weight: bold;
        text-decoration: none;
    }

    a.toggler:not(.collapsed)::after {
        content: '- Toon minder';
    }

    a.toggler.collapsed::after {
        content: '+ Toon meer';
    }

.ErrorControl:not(.RadComboBox), .ErrorControl .rcbInner {
    border: 1px solid var(--bs-danger) !important;
}

    /*einde lees meer panel*/
    .RadForm_Bootstrap .rfdTextInput:active, .RadForm_Bootstrap.rfdTextarea textarea:active, .RadForm_Bootstrap .rfdTextInput:focus, .RadForm_Bootstrap.rfdTextarea textarea:focus {
        border-color: #333 !important;
    }

.RadDrawer_Bootstrap .k-drawer {
    background-color: var(--bg-menu) !important;
    
    font-family: "Open Sans", Arial, Helvetica, sans-serif !important;

    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

.drawerlink {
    color: var(--maintextcolor) !important;
    display: block;
    font-size: .75rem !important;
    width: 100%;
    text-decoration: none !important;
}
.RadDrawer_Bootstrap .k-drawer-separator {
    background-color: #ddd!important;
}

#cb-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    border-radius: 0;
    display: none;
}

.logostaand {
    max-height:100px!important;
    width:auto!important;
}