@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&family=Sriracha&family=Caveat+Brush&family=Itim&family=Shadows+Into+Light+Two&family=Patrick+Hand&family=Shadows+Into+Light&family=Damion&family=Rancho&family=Annie+Use+Your+Telescope&family=Nanum+Brush+Script&family=Sue+Ellen+Francisco&family=Short+Stack&display=swap');

@font-face {
    font-family: 'komika-axis';
    src: url('../fonts/komika-axis.ttf');
}

@font-face {
    font-family: "decalk";
    src: url("../fonts/Decalk.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "DecalkBold";
    src: url("../fonts/DecalkBold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "DecalkItalic";
    src: url("../fonts/DecalkItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "DecalkBoldItalic";
    src: url("../fonts/DecalkBoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "Saturday Alright";
    src: url("../fonts/Saturday Alright.otf") format("truetype");
}

@font-face {
    font-family: "Painting_With_Chocolate";
    src: url("../fonts/Painting_with_chocolate.ttf")
}

@font-face {
    font-family: "DSMarkerFelt";
    src: url("../fonts/DSMarkerFelt.ttf")
}

@font-face {
    font-family: "komika-display.shadow";
    src: url("../fonts/komika-display.shadow.ttf")
}

/* Fonts --------------------------------------------------------- */
html {font-size: 18px;}
body {font-family: 'Sriracha', sans-serif; font-size: 1rem; line-height: 1.6rem;}

h1, h1 a {font-size: 1.7rem ;font-weight: 400; line-height: 2rem; margin-bottom: 1rem;}
h2, h2 a {font-size: 1.7rem ;font-weight: 400; line-height: 2rem; margin-bottom: 1rem;}
h3, h3 a {font-size: 1.3rem ;font-weight: 400; line-height: 1rem; margin-bottom: 1rem;}

p {font-size: 1rem; font-weight: 400;line-height: 1.6; margin-top: 0; margin-bottom: 1.6rem;}


h2, h3, h3.sp-module-title {
    font-family: 'komika-axis';
    color: #273481 !important;
    font-weight: 400;
}

p {
    font-family: 'Sriracha', cursive;
}


/* Icons ---------------------------------------------------------- */
.fa-times-circle {color: red}
.fa-check-circle {color: green;}

/* GENERAL--------------------------------------------------------- */
body {background-color: #e9eaed;}

.chronoforms6_credits {display: none;}

.element-invisible {display: none;}

strong {font-weight: 700; }

/* Pagination */
.pagination .pagination-list li {list-style: none; float: left; padding: 0 1rem;}


/* Moduleposities ------------------------------------------------ */
.body-innerwrapper {background-color: #fff;}
#sp-header {height: auto; background-color: #fff;}
#sp-header .logo {display: inherit; width: 600px; height: 171px; margin: auto;}
#sp-header .logo a {width: 100%; height: auto;}
#sp-logo {
    background-image: url('../images/header/achtergrond_header_1240px_400px_45pct.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 107px 0 24px;
    width: 100%;
}
#sp-menu-2 {background-color: #eee;}
#sp-section-1 {background-color: #eee;}
#sp-bottom {font-size: 1rem; background-color: #eee; color: #666;}
#sp-footer {background-color: #000; color: #fff;}
#sp-footer p, #sp-footer a, #sp-footer a:hover {color: #fff;}
#system-debug {display: none;}

#sp-bottom .sp-module .sp-module-title {
    font-size: 1.3rem;
    margin: 0 0 1rem;
}

.login {padding: 2rem 0;}

#sp-header {
    height: 335px;
}

#sp-header .container,
#sp-header .container-inner,
#sp-header .container .container-inner .row {height: 100%;}

#sp-menu {
    position: absolute !important;
    bottom: 0px;
}

#sp-logo {
    height: calc(100% - 62.5px);
    padding: 0;
}
#sp-logo .sp-column {
    display: flex;
    height: 100%;
}


#sp-header.header-sticky {
    height: 180px;
}

/* Moduleposities: links ----------------------------------------- */

#sp-left .sp-module  {border: 1px solid rgba(225,82,7,1.0);}

#sp-left .sp-module .sp-module-title,
#sp-right .sp-module .sp-module-title {
    font-weight: 400;
}

/* END: Moduleposities: links ------------------------------------ */



/* MENU  --------------------------------------------------------- */


#sp-menu {
    background-color: #fff;;
    border-top: 1px dashed #fff;
    border-bottom: 1px dashed #999;
}

.sp-menu-item a {font-size: 1rem !important; text-transform: uppercase}
.sp-megamenu-parent > li > a,
.sp-megamenu-parent .sp-dropdown li a {color: #666;}
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {color: #333; font-weight: 700;}
.sp-megamenu-parent > li:hover > a {color: #f60;}

.sp-menu-item .sp-dropdown {background-color: #fff;}

.sp-megamenu-parent .active a:after {
    border: 5px solid #e3e3e3;
    border-radius: 50%;
    bottom: -10px;
    content: "";
    height: 1.3rem;
    left: 0px;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: auto;
    width: 1.3rem;
    z-index: 99;
    background-color: #1a2369;
}

.sp-megamenu-parent .active .sp-dropdown  a::after {
    border: 0;
    border-radius: 0;
    bottom:0;
    content: "";
    height: 0;
    left: 0px;
    width: 0;
    z-index: 99;
    background-color: transparent;;
}


/* Sticky stuff */
.header-sticky .sp-megamenu-parent > li > a,
.header-sticky.sp-megamenu-parent > li > span {line-height: 60px;}

/* Menu 2 ------------------------------------------------------------------ */
#sp-menu-2 .menu {margin: 0; padding: 0;}
#sp-menu-2 .menu {list-style: none;}
#sp-menu-2 .menu li {width: auto; list-style: none; float: left; padding: 1rem 1rem; position: relative;}
#sp-menu-2 .menu li::marker {content: none;}
#sp-menu-2 .menu .menu-deeper::after {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0d7"; float: right; margin-left:  0.5rem;}

/* Submenu's */
#sp-menu-2 .menu li a,
#sp-menu-2 .menu li.menu-deeper a,
#sp-menu-2 .menu li.menu-parent a,
#sp-menu-2 .menu li.menu-deeper .nav-header,
#sp-menu-2 .menu li.menu-parent .nav-header,
#sp-menu-2 .menu li.menu-deeper .menu-spearator,
#sp-menu-2 .menu li.menu-parent .menu-separator  {text-decoration: none; text-transform: uppercase;color: rgba(12,45,163,1)}
#sp-menu-2 .menu li.menu-deeper:hover > .menu-child {animation: spFadeInUp 400ms ease-in;}
#sp-menu-2 .menu li.menu-deeper:hover > .menu-child {display: block; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);}

#sp-menu-2 .menu .menu-child  {top: 100%;}
#sp-menu-2 .menu .menu-child {background-color: #eee; margin: 0; padding: 1rem; position: absolute; z-index: 10; display: none;}
#sp-menu-2 .menu .menu-deeper:hover .menu-child {display: block;}
#sp-menu-2 .menu .menu-deeper li {padding: 0;}


/* Off canvas menu --------------------------------------------------------- */
.offcanvas-menu {background-color: #fff;}
#offcanvas-toggler > .fa {color: #000;}


/* Sticky header ----------------------------------------------------------- */
#sp-header.header-sticky .logo {width: 175px;}

/*.header-sticky #sp-logo {padding: 50px;}*/
.header-sticky .logo-image {Display: initial; width: 175px; animation: fadeIn 1s 1 cubic-bezier(.77,0,.175,1);}

/* Front en edit */
.front-end-edit {margin: 0 30px;}


/* JS Toolbar --------------------------------------------------------------*/
.js-stools-container-bar {width: 100%;padding: 10px}
.js-stools-container-bar .btn-wrapper.input-append {min-width: 300px;}
.js-stools-container-bar .btn-wrapper.input-append input {width: 80%; float: left;}
.js-stools-container-bar .btn-wrapper.input-append  button {min-width: 40px; float: right;}
.js-stools-container-bar .btn-wrapper {float: left;}


/* HOMEPAGE TOPSIDE---------------------------------------------------------*/
.intro img {
    margin: 0 auto;
    width: 40%;
}

#sp-main-body {
    padding: 0;
    margin-top: 30px;
margin-bottom: 30px;
}

#sp-header.header-sticky ~ section#sp-main-body {
    padding-top: 0;
}

/* LOGO ----------------------------------------------------------------- */
/*.logo-image {width: 350px; height: auto !important; margin: 0 auto; animation: fadeIn 1s 1 cubic-bezier(.77,0,.175,1);}*/
.logo-image {
    height: auto !important;
    margin: 0 auto;
    animation: fadeIn 1s 1 cubic-bezier(.77,0,.175,1);
}


/* USP ICONS ------------------------------------------------------------ */
#sp-usps {
    background-color: #eef2f7
    padding-bottom: 25px;
}

.usp_icons a {
    text-decoration: none;
    color: #000;
}

.usp_icon h3 {
    height: 5rem;
    font-size: 1.4rem;
    color: #e6570c;
    line-height: 2rem;
    margin-bottom: 1rem;
    vertical-align: bottom;
}

.usp_icon {
    float: left;
    margin: 50px 0 0 0;
    padding: 0 20px;
    text-align: center;
    min-width: 200px;
}

.usp_icon .top-icon {
    font-size: 54px;
    color: rgba(108,160,218,1);
    margin-bottom: 20px;
}

.fa-arrow-right {
    font-size: 20px;
    color: #a3490c;
}

/* SLIDER ---------------------------------------------------------*/
.slide-desc-in, .slide-desc {
    height: 100%;
}

.slider_title {
    text-align: center;
}

.slide-desc-bg {
    height: 100%;
    background: rgba(3, 69, 191, 0.75) !important;
}

.slide-desc-text {
    position: relative;
    color: #fff;
    padding: 15px 15px 5px;
    text-align: left;
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100% !important;
}

.slide-title {
    display: none !important;
}

.slider_title h3 {
    font-size: 20px;
}

.slider_title h2 {
    font-size: 85px;
}

/* Kruimelpad ----------------------------------------------------------- */

.breadcrumb {
    background-color: transparent;
}

/* CONTACT BLOCK---------------------------------------------------------*/
#sp-contact {
    margin-bottom: 50px;
    background-color: #eef2f7;
    padding-top: 50px;
    padding-bottom: 50px;
}

#sp-contact button {
    background-color: #e6570c !important;
    color: #ffffff;
}

#sp-bottom1 {
    /*background-color: #f7f9fc;*/
    /* border-right: 1px solid rgba(230, 87, 12, 0.5); */
    max-width: 100% !important;
}

#sp-position1 #portfolio-gallery-img-beautiful {
    padding: 0 35px;
}

#portfolio-gallery-img-beautiful > div:nth-child(3) {
    display: none;
}

/* CONTENT PAGE---------------------------------------------------------*/
.page_introduction {
    margin: 50px auto;
}

.article-details  {
    padding:  0 50px;
    margin: 50px 0;
}


/* TEXT BLOCK ---------------------------------------------------------*/

#sp-tekst {
    margin: 50px 0;
}




/* CONTACT PAGE---------------------------------------------------------*/
.contact_map iframe {width: 100%;}

#sp-contact input, #sp-contact textarea {border-radius: 0;}

.ui.form p, .ui.form li {
    margin: 0 !important;
    font-size: 1rem ;
    line-height: 24px;
}

.contact_p {
    margin: 0;
    display: inline-block;
    vertical-align: top;

}

/* MAP BLOCK---------------------------------------------------------*/
#sp-map {margin-bottom: 50px;padding: 0 50px;}

/* FOOTER---------------------------------------------------------*/
#sp-footer2 ul {
    list-style-type: none !important;
}

#sp-footer2 ul li {
    display: inline-block;
    margin: 0 20px;
}

/* CDRM Applicatie ------------------------------------------------------------- */
#hourList thead th, #hourList d {width: auto;}
#hourList thead th {font-size: 0.8rem; vertical-align: top;} 
#hourList td {font-size: 0.8rem; padding: .4rem;}
#hourList .btn.btn-mini {float: left; padding: 0.5rem; padding-right: 0;}

/* MEDIA QUERIES --------------------------------------------------------------- */

@media screen and (max-width: 991px) {
     #sp-bottom1 {
         border: none;
         padding: 0;
         margin-bottom: 25px;
         min-width: 282px;
     }

    #sp-bottom2 {
        flex: 100%;
        width: 100%;
        max-width: 100%;
    }

    .contact_p {
        margin: 0 15px;
        width: 40%;
        font-size: 0.95rem;
    }

    .usp_icons h3{
        font-size: 1.25rem;
        height: 2.5rem;
    }

    .intro img {
        width: 50%;
    }

    .usp_icon {
        max-width: 50%;
        margin: 50px 0 0 0;
    }

    .usp_break {
        display: none;
    }

    .header-sticky .logo-image-phone {
        height: 80px !important;
        display: block !important;
        margin: 0 auto;
    }

}

@media screen and (max-width: 860px) {
    .usp_icon{
        width: 50%;
        max-width: 50%;
        margin: 50px 0 0 0;
    }

    .slider_title h2 {
        font-size: 4rem;
    }

}


@media screen and (max-width: 767px) {
    .usp_icon h3 {
        height: 3.5rem;
    }
}


@media screen and (max-width: 700px) {
    .intro img {
        width: 75%;
    }
}

@media screen and (max-width: 621px) {
    .contact_p {
        width: 100%;
    }
}

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

    /*padding for main blocks */
    #sp-bottom1, #sp-tekst, #sp-map {
        padding-left: 50px;
        padding-right: 50px;
    }

    /* special blocks padidng*/
    #sp-bottom2 {
        padding-left: 65px;
        padding-right: 65px;
    }

    #sp-map .container {
        padding: 0;
    }

    /* slider titles */
    .slider_title h2 {
        font-size: 2rem;
    }

    .slider_title h3 {
        font-size: 1rem;
    }

    #sp-header {
        height: 245px;
    }

    #sp-header .logo {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }


    .logo-image-phone {
        height: 80px !important;
        display: block !important;
        margin: 0 auto;
    }

}

@media screen and (max-width: 460px) {
    .usp_icon{
        width: 100%;
        max-width: 100%;
    }

    #portfolio-gallery-img-beautiful .all {
        max-width: 100%;
    }

    .usp_icon h3 {
        height: 3rem;
    }

    .page_introduction img {
        margin: 0 !important;
    }
}