/*/////////////////////////////////////////////////////////////////////
 // 
 // Custom styles Visual Steps
 // AppStrap 3.1.2
 // original theme written by Themelize.me (http://themelize.me)
 // 
 // This is an empty starter template for overriding styles
 // set by Bootstrap & the theme
 // 
 // ----------------------------------------------------
 // 
 // Remove unused code for better performances
 // 
 // ----------------------------------------------------
 // 
 // $see - Usefuls tools online for editing
 // 1. http://charliepark.org/bootstrap_buttons/ - Button style generator
 // 2. http://www.colorzilla.com/gradient-editor/ - CSS3 gradient maker
 // 
 // $note
 // To ensure custom styles are picked up
 // wrap definitions in body tag
 // ie.
 // body .navbar-inner {
 //   background: #ff0000;
 // }
 // 
 /////////////////////////////////////////////////////////////////////*/

/*******************************************************
 * Custom theme code styles
 * Written by Themelize.me (http://themelize.me)
 *
 * Includes the base variables & mixins needed for all
 * scss files
 *******************************************************/

/*
 * --------------------------------------------------
 * color switcher turn off
 *--------------------------------------------------
 */
.colour-switcher { display: none; } 
 
/*
 * --------------------------------------------------
 * 1. General Elements
 *--------------------------------------------------
 */
h2, .h2 { font-size: 1.7rem; }
h3, .h3 { font-size: 1.4rem; }
h4, .h4 { font-size: 1.2rem; line-height: 1.25;
}
.blog-post h4.title {line-height: 1.35;}

h5 {line-height: 1.25;}
h6 {line-height: 1.4;}

/*
 * --------------------------------------------------
 * 2. Color changes
 *-------------------------------------------------- 
 */
 .card-footer {
  background-color: #ffffff;
  border-top:none;
}

/* nav-section-menu */
.nav-section-menu .nav, .nav-section-menu.nav {
  padding-top: 1px;
  padding-bottom: 1px;
}
/* go to top button */
.btn-secondary.btn-invert:focus, .btn-secondary.btn-invert:hover {
    background-color: #fff;
}
.btn-secondary.btn-invert {
    background-color: #f8f8ff;
}

.nav-section-menu .nav .nav-link, .nav-section-menu.nav .nav-link {
  font-size: 16px;
  padding-top: 4px;
  padding-right: 10px;
  padding-bottom: 4px;
  padding-left: 13px;
}
/* docenten header border-bottom */
.header.docent {
    border-bottom-color: #708090;
}

/* border voor omslagen */
.bordgrijs {
    border: 1px solid #f2f2f2;
}

/*
 * --------------------------------------------------
 * 3. Responsiveness/media queries
 *--------------------------------------------------
 */

/* Extra small devices (phones, less than 768px) */

/* No media query since this is the default in Bootstrap */

@media (min-width: 576px) {
  /* Small devices (576px and up). Mixin: media-breakpoint-up(sm) */
}

@media (min-width: 768px) {
  /* Medium devices (768px and up). Mixin: media-breakpoint-up(md) */
}

@media (min-width: 992px) {
  /* Large devices (992px and up). Mixin: media-breakpoint-up(lg) */
}

@media (min-width: 1200px) {
  /* X-Large devices (1200px and up). Mixin: media-breakpoint-up(xl) */
}

/* max-width */

@media (max-width: 575.98px) {
  /* Small devices (575px and down). Mixin: media-breakpoint-down(xs) */
}

@media (max-width: 767.98px) {
  /* Medium devices (767px and down). Mixin: media-breakpoint-down(sm) */
}

@media (max-width: 991.98px) {
  /* Large devices (992px and down). Mixin: media-breakpoint-down(md) */
}

@media (max-width: 1199.98px) {
  /* X-Large devices (1200px and down). Mixin: media-breakpoint-down(lg) */
}

/* target one breakpoint */

@media (min-width: 576px) and (max-width: 767.98px) {
  /* Small devices (between 576px and 767px). Mixin: media-breakpoint-only(sm) */
}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* Medium devices (tablets, between 768px and 991px). Mixin: media-breakpoint-only(md) */
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Large devices (desktops, between 992px and 1199px). Mixin: media-breakpoint-only(lg) */
}

@media (min-width: 1200px) {
  /* Extra large devices (large desktops, 1200px and up). Mixin: media-breakpoint-only(xl) */
}

/* span multiple screenwidths */

@media (min-width: 768px) {
  /* From medium to large (between 768px and 1199px). Mixin: media-breakpoint-between(md, xl)  */
}

/*
 * --------------------------------------------------
 * 4. Misc
 *--------------------------------------------------
 */
  .nav-tabs-bold .nav-link {
  padding-right: 0.75em;
  padding-left: 0.75em;
}
.tag-cloud .tag, .tag-cloud span {
  text-transform: none;
}
.cart-content-footer {
  padding-top: 5px;
}
.bg-inverse-dark {
    background-color: #222324 !important;
}
.title-divider {
  margin-bottom: 1.2em;
}
.title-divider small {
  margin-top: 7px;
  line-height: 1.6rem;
}

.side-bar .nav-tabs{border-bottom:none;}
.side-bar .nav-tabs .nav-link {color: #aeaeae; text-transform: uppercase; border: none;}
.side-bar .nav-tabs .nav-link.active, .side-bar .nav-tabs .nav-link:hover{border-bottom:2px solid #ff0000;  text-transform: uppercase; color: #222}
.sidebar-tabing .media{margin-top: 20px}
.sidebar-tabing img{width: 120px;height: 173px;}
.sidebar-tabing .title-small {line-height: 23px; margin-top: 5px; font-size: 18px}


/*
 * --------------------------------------------------
 * 5. carousel
 *--------------------------------------------------
 */
#carousel-example-generic ol.carousel-indicators {bottom: -25px}
#carousel-example-generic ol.carousel-indicators li {border:1px solid #000;}
#carousel-example-generic ol.carousel-indicators .active {background:#000;}
.carousel-control.left, .carousel-control.right {background: none;}

.title-small { color: #141517; font-size: 16px; font-weight: 400; line-height: 23px; margin: 0 0;}
.news-block .news-title .title-large {font-size: 20px; margin: 15px 0 5px; line-height: 27px; color: #141517;}
.time-text {color: #ff0000; font-style: italic;}
.card-img-overlay {padding: 0; top: 5px; left: 10px; height: 20%}

/*
 * --------------------------------------------------
 * 6. font size navbar dropdown menu
 *--------------------------------------------------
 */
 .navbar-toggleable.navbar-main.collapse .dropdown-menu .dropdown-item,
 .navbar-toggleable .navbar-main.collapse .dropdown-menu .dropdown-item {
    font-size: 13px;
  }
  
 .navbar-toggleable.navbar-main.collapse .dropdown-menu .dropdown-item:before,
 .navbar-toggleable .navbar-main.collapse .dropdown-menu .dropdown-item:before {
    font-size: 13px;

  }
  
 /*
 * --------------------------------------------------
 * 7. Cookie Dialog 
 *--------------------------------------------------
 */ 

    #gdpr-cookie-message {
        position: fixed;
        right: 30px;
        bottom: 30px;
        max-width: 375px;
        background-color: var(--purple);
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 6px 6px rgba(0,0,0,0.25);
        margin-left: 30px;
        font-family: system-ui;
    }
    #gdpr-cookie-message h4 {
        color: var(--red);
        font-family: 'Quicksand', sans-serif;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 10px;
    }
    #gdpr-cookie-message p {
        color: white;
        font-size: 15px;
        line-height: 1.5em;
    }
    #gdpr-cookie-message p:last-child {
        margin-bottom: 0;
        text-align: right;
    }
    #gdpr-cookie-message a {
        color: var(--red);
        text-decoration: none;
        font-size: 15px;
        padding-bottom: 2px;
        border-bottom: 1px dotted rgba(255,255,255,0.75);
        transition: all 0.3s ease-in;
    }
    #gdpr-cookie-message a:hover {
        color: white;
        border-bottom-color: var(--red);
        transition: all 0.3s ease-in;
    }
    #gdpr-cookie-message button {
        border: none;
        background: var(--red);
        color: white;
        font-family: 'Quicksand', sans-serif;
        font-size: 15px;
        padding: 7px;
        border-radius: 3px;
        margin-left: 15px;
        cursor: pointer;
        transition: all 0.3s ease-in;
    }
    #gdpr-cookie-message button:hover {
        background: white;
        color: var(--red);
        transition: all 0.3s ease-in;
    }
/*
     FILE ARCHIVED ON 05:00:12 May 05, 2025 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 18:29:16 Jul 03, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.66
  exclusion.robots: 0.074
  exclusion.robots.policy: 0.059
  esindex: 0.01
  cdx.remote: 68.082
  LoadShardBlock: 157.184 (3)
  PetaboxLoader3.datanode: 83.619 (5)
  PetaboxLoader3.resolve: 152.424 (2)
  load_resource: 217.254
  loaddict: 69.594
*/