/**
 * The main styling of the website
 *
 * 1.  Base
 * 2.  Colors
 * 3.  Fixes
 * 4.  Utilities
 * 4.1   Type
 * 4.2   Border
 * 4.3   Image
 * 4.4   Terug link
 * 4.5   Highlight
 * 4.6   Card columns
 * 4.7   Other
 * 5.  Header
 * 6.  Navbar
 * 7.  Return to top
 * 8.  Modules
 * 8.1   FAQ
 * 8.2   Foto slider
 * 8.3   Foto slider basic
 * 8.4   Nieuws
 * 9.  Form
 */

/* ==========================================================================
   1. Base
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
:root {
  --color-primary:   #212c53;
  --color-secondary: #C5FFFD;
  --color-light:     #EFF4F7;
  --color-dark:      #202c54;
  --font-color:      #343434;
  --zaag-fanatisme:  -30deg;
  --header-font:     'Open Sans','Work Sans', sans-serif;
}

html, body {
  color: var(--font-color);
  letter-spacing: .08rem;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4,
.text-display {
  font-family: var(--header-font);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0;
}

.fancy-header {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.fancy-header::after {
  content: '';
  width: 200px;
  height: 1rem;
  margin: 1rem 0 1rem;
  border-radius:10px;
  background: #3d98bf;
}

.fancy-header-dark-thingy::after {
  background: var(--color-dark);
}

.btn {
  border-radius: 0;
  text-transform: uppercase;
  padding: .5rem 2rem;
  letter-spacing: .1em;
}

.gradient a.text-decoration-none{
	background: #212b54;
    color: white;
    padding: 10px 20px;
}

.bg-white.opacity-5{
	background-color:#ffffff70 !important;
}

.color-primary{ color:var(--color-primary);}

.gradient a.text-decoration-none:hover{
	background: #3d98bf;	
    color: white;
}
.border-radius{border-radius:15px;}

/* ==========================================================================
   2. Colors
   ========================================================================== */

/* Primary */
.btn-link,.btn-outline-primary.disabled,.btn-outline-primary:disabled,.page-link,a,a:hover{color:var(--color-primary)}.teruglink a,.text-primary{color:var(--color-primary)!important}.badge-primary,.bg-primary,.custom-checkbox .custom-control-input:checked~.custom-control-label::before,.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before,.custom-control-input:checked~.custom-control-label::before,.custom-radio .custom-control-input:checked~.custom-control-label::before,.dropdown-item.active,.dropdown-item:active,.nav-pills .nav-link.active,.nav-pills .show>.nav-link,.progress-bar{background-color:var(--color-primary)!important}.btn-outline-primary:hover,.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-primary,.btn-primary.disabled,.btn-primary:disabled,.list-group-item.active,.page-item.active .page-link,.show>.btn-outline-primary.dropdown-toggle,.terug-link a:focus,.terug-link a:hover{background-color:var(--color-primary);border-color:var(--color-primary)}.btn-outline-primary{color:var(--color-primary);border-color:var(--color-primary)}.border-primary,.teruglink a{border-color:var(--color-primary)!important}

/* Secondary */
.btn-secondary,.btn-secondary.disabled,.btn-secondary:disabled,.btn-outline-secondary:hover,.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle{background-color:var(--color-secondary);border-color:var(--color-secondary)}.badge-secondary{background-color:var(--color-secondary)}.border-secondary{border-color:var(--color-secondary)!important}.bg-secondary{background-color:var(--color-secondary)!important}.btn-outline-secondary{color:var(--color-secondary);border-color:var(--color-secondary)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:var(--color-secondary)}.text-secondary{color:var(--color-secondary)!important}


/* Light */
.btn-light,.btn-light.disabled,.btn-light:disabled,.btn-outline-light:hover,.btn-outline-light:not(:disabled):not(.disabled).active,.btn-outline-light:not(:disabled):not(.disabled):active,.show>.btn-outline-light.dropdown-toggle{background-color:var(--color-light);border-color:var(--color-light)}.badge-light,.dropdown-item:focus,.dropdown-item:hover,.list-group-item-action:focus,.list-group-item-action:hover{background-color:var(--color-light)}.border-light{border-color:var(--color-light)!important}.bg-light{background-color:var(--color-light)!important}.btn-outline-light{color:var(--color-light);border-color:var(--color-light)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:var(--color-light)}.text-light{color:var(--color-light)!important}

/* Dark */
.btn-dark,.btn-dark.disabled,.btn-dark:disabled,.btn-outline-dark:hover,.btn-outline-dark:not(:disabled):not(.disabled).active,.btn-outline-dark:not(:disabled):not(.disabled):active,.show>.btn-outline-dark.dropdown-toggle,.btn-primary:hover,.btn-primary:focus{background-color:var(--color-dark);border-color:var(--color-dark)}.badge-dark{background-color:var(--color-dark)}.border-dark{border-color:var(--color-dark)!important}.bg-dark{background-color:var(--color-dark)!important}.btn-outline-dark{color:var(--color-dark);border-color:var(--color-dark)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:var(--color-dark)}.text-dark{color:var(--color-dark)!important}

/* Reset */
.text-white a:hover,.text-light a:hover{color:#fff}

#Footer .text-light a {
  color: var(--color-light);
}
#Footer .text-light a:hover {
  color: #cbd3da!important;
}


/* ==========================================================================
   3. Fixes
   ========================================================================== */

img {
  max-width: 100%;
}

.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.table th,
.table td {
  border-color: rgba(0,0,0,.1) !important;
}

.text-white .border,
.text-white .border-top,
.text-white .border-right,
.text-white .border-bottom,
.text-white .border-left,
.text-white .table th,
.text-white .table td,
.text-light .border,
.text-light .border-top,
.text-light .border-right,
.text-light .border-bottom,
.text-light .border-left,
.text-light .table th,
.text-light .table td {
  border-color: rgba(255,255,255,.25) !important;
}

.text-muted {
  color: rgba(0,0,0,.45) !important;
}

.text-white .text-muted,
.text-white.text-muted,
.text-light .text-muted,
.text-light.text-muted {
  color: rgba(255,255,255,.7) !important;
}

.text-white .table,
.text-white.table {
  color: #fff;
}


/* ==========================================================================
   4. Utilities
   ========================================================================== */


/* 4.1 Type
   ========================================================================== */

/**
 * Adding Bootstraps .text-decoration-none class because it wasn't included in
 * the Bootstrap.min.css for some reason
 */
.text-decoration-none {
  text-decoration: none !important;
}

/**
 * Adding .hoverable utility class to apply a background to links on hover
 */
.hoverable:hover {
  background: rgba(0,0,0,.075);
}


/* 4.2 Border
   ========================================================================== */

/**
 * A border that is visible on dark backgrounds.
 */
.border-light,
.text-white th,
.text-white td,
.text-light th,
.text-light td {
  border-color: rgba(255,255,255,.1) !important;
}

@media (min-width: 768px) {
  .border-md-left {
    border-left: 1px solid rgba(0,0,0,.1) !important;
  }

  .border-md-right {
    border-right: 1px solid rgba(0,0,0,.1) !important;
  }
}


/* 4.3 Image
   ========================================================================== */

.img-cover {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  outline: 6px solid #212b54;
}

.img-cover-fixed-height-sm {
  height: 200px;
}

.img-cover-fixed-height-md {
  height: 300px;
}

.img-cover-fixed-height-lg {
  height: 400px;
}

.img-cover-fixed-height-xl {
  height: 500px;
}


/* 4.4 Terug link
   ========================================================================== */

.terug-link {
  position: absolute;
  top: 0;
  right: 0%;
}

.terug-link a {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  background-color: transparent;
  background-image: none;
  padding: .25rem 1rem;
  font-size: .875rem;
  line-height: 1.5;
}

.terug-link a:hover {
  color: #fff;
}


/* 4.5 Highlight
 * Used on small highlighted sections to make template specific styling easier.
   ========================================================================== */

/* Hover hoekjes */

.highlight-corners {
  position: relative;
}

.gradient{
	background: rgb(0,151,178);
background: linear-gradient(90deg, rgba(0,151,178,1) 0%, rgba(126,217,87,1) 100%);
}

.border-primary{
	border: 20px solid #212b54;
    border-radius: 15px;
}

.rotate{
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 20px solid #212b54;
    border-radius: 15px;
    transform: rotate(45deg);
    width: 80%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    overflow: hidden;
}

.rotate img{
	transform: rotate(-45deg) scale(1.5);
}

/* Skew balken */

.skew-both,
.skew-top,
.skew-bottom {
  position: relative;
  overflow: hidden;
}

.skew-both::before,
.skew-both::after,
.skew-top::after,
.skew-bottom::after {
  content: '';
  position: absolute;
  background: #fff;
  z-index: 9999;
  transform: skewX(var(--zaag-fanatisme));
  transform-origin: top;
}

section.bg-primary{
	position:relative;
	overflow:hidden;
}

.navbar-wrapper{
	position:relative;
}


.navbar-wrapper::before{
content: '';
    display: block;
    width: 150px;
    height: 150px;
    background: #212c53;
    transform: rotate(45deg);
    position: absolute;
    top: -113px;
    left: 63%;
    border-radius: 15px;
    border: 20px solid #1c6e92;
    margin: 20px;
    outline: 20px solid #3d98bf;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


section.bg-primary::before{
content: '';
    display: block;
    width: 150px;
    height: 150px;
    background: #212c53;
    transform: rotate(45deg);
    position: absolute;
    top: -113px;
    left: 100px;
    border-radius: 15px;
    border: 20px solid #1c6e92;
    margin: 20px;
    outline: 20px solid #3d98bf;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


#copyright{	
position:relative;
	overflow:hidden;
}
	
	
#copyright::after{
content: '';
    display: block;
    width: 150px;
    height: 150px;
    background: #212c53;
    transform: rotate(45deg);
    position: absolute;
    top: -113px;
    right: 100px;
    border-radius: 15px;
    border: 20px solid #1c6e92;
    margin: 20px;
    outline: 20px solid #3d98bf;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.skew-both::before,
.skew-top::before {
  top: 0;
  left: 0;
  right: 60%;
  bottom: calc(100% - 2rem);
  transform-origin: top;
}

.skew-both::after,
.skew-bottom::after {
  bottom: 0;
  right: 0;
  left: 60%;
  top: calc(100% - 2rem);
  transform-origin: bottom;
}

/* Img overlay */

.img-overlay-container {
  position: relative;
}

.img-overlay {
  position: absolute;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,.5);
  color: #fff !important;
  padding: 1rem;
}


/* 4.6 Card columns
 * These classes act as utility classes for Bootstraps .card-column class.
   ========================================================================== */

/**
 * Change the column count:
 * sm: 2
 * md: 3
 * lg: 4
 */
.card-columns-sm {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

@media (min-width: 576px) {
  .card-columns-sm {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

@media (min-width: 768px) {
  .card-columns-sm {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
  
}

/**
 * Set the column gap to a Bootstrap margin of 3
 */
.card-columns-column-gap-3 {
  -webkit-column-gap: 1rem;
  -moz-column-gap: 1rem;
}


/* 4.7 Other
   ========================================================================== */

.border-between-two-col:nth-child(even) {
  border-left: 1px solid #dee2e6;
}

.shadow-indent {
  -moz-box-shadow: inset 0 2px 15px rgba(0,0,0,.15);
  -webkit-box-shadow: inset 0 2px 15px rgba(0,0,0,.15);
  box-shadow: inset 0 2px 15px rgba(0,0,0,.15);
}

.cursor-pointer {
  cursor: pointer;
}


/* ==========================================================================
   5. Header
   ========================================================================== */

.logo-wrapper {
  position: relative;
  z-index: 1;
}




/* ==========================================================================
   6. Navbar
   ========================================================================== */

.navbar-main-wrapper {
  position: relative;
  z-index: 1;
}

.text-black{
	color:black;
}
.text-black a{
	color:black;
}
.text-black a:hover{
	color:white;
}

.navbar{
	background:#212c53;
	border-radius: 15px 0px 0px 0px;
}

/* ==========================================================================
   7. Return to top
   ========================================================================== */

#return-to-top {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  z-index: 9999;
  width: 2rem;
  height: 2rem;
  text-align: center;
  background: #fff;
  color: #444;
  cursor: pointer;
  text-decoration: none;
  display: none;
  align-items: center;
  justify-content: center;
}

#return-to-top.show {
  display: flex;
}


/* ==========================================================================
   8.  Modules
   ========================================================================== */

/* 8.1 FAQ
   ========================================================================== */
.faq-title {
  transition: transform .35s;
}

.faq-title::after {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: .75rem;
  text-rendering: auto;
  content: "\f078";
  margin-right: .75rem;
}

.faq-title[aria-expanded="true"] {
  transform: scale(1.025);
}

.faq-title[aria-expanded="true"]::after {
  content: "\f077";
}


/* 8.2 Foto slider
   ========================================================================== */
.slick-list {
  margin: 0!important;
}
.slick-next, .slick-prev {
  z-index: 100;
}
#slider .slide {
  position: relative;
}
#slider .slide, #slider .slide a {
  color: white;
}
#slider .slide img {
  width: 100%;
}
#slider .slide .slide-caption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(0,0,0,.5);
  padding: 1rem;
}

@media (max-width: 767px) {
  #slider .slide .slide-caption {
    display: none!important;
  }
  .navbar-wrapper::before{
	  left:25%;
  }
}


/* 8.3 Foto slider basic
   ========================================================================== */
#slider_basic .slide {
    padding: 0 10px;
}
#slider_basic .slide, #slider_basic .slide a{
    color: white;
}
#slider_basic .slide img {
    width: 100%;
}
#slider_basic .slide h2, #slider_basic .slide p{
    position: absolute;
    max-width: 100%;
}
#slider_basic .slide h2 {
    bottom: 15%;
    left: 2%;
    font-size: 36px;
}
#slider_basic .slide p {
    bottom: 8%;
    left: 2%;
    font-weight: 600;
}

#slider_basic .slick-dots {
  display: flex;
  justify-content: center;
  padding: 0;
  list-style: none;
  margin: 1.5rem 0 0;
}

#slider_basic .slick-dots li {
  padding: 0 .25rem;
}

#slider_basic .slick-dots button {
  cursor: pointer;
  color: rgba(255,255,255,.6);
  background: none;
  border: none;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: .125rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  transition: color .25s ease-in-out;
}

#slider_basic .slick-dots button:focus {
  outline: 0;
  box-shadow: none;
}

#slider_basic .slick-dots li.slick-active button {
  color: #fff;
}


/* 8.4 Nieuws
   ========================================================================== */

.nieuws-jaar-heading,
.nieuws-maand-heading {
    border-radius: .25rem;
    transition: background .15s;
}

.nieuws-jaar-heading:hover,
.nieuws-jaar-heading:focus,
.nieuws-maand-heading:hover,
.nieuws-maand-heading:focus {
    background: rgba(0,0,0,.025);
}

.nieuws-link {
    transition: transform .15s;
}

.nieuws-link:hover:not(.disabled),
.nieuws-link:focus:not(.disabled) {
    transform: translateX(.25rem);
}


/* ==========================================================================
   7. Form
   ========================================================================== */

.form-control {
  background: transparent;
  border: none;
  border-radius: 0;
  background-color: var(--color-light) !important;
}


/* SM */
@media (max-width: 767.98px) {  
.rotate{width:50%;margin-bottom:50px;}
}

@media (max-width: 575.98px) { 

.extraimg .rotate{width:50%;margin-bottom:50px;}
}


.nieuws-overzicht .row{
	display:flex;
}

.nieuws-overzicht{
	margin-bottom:100px;
}
.nieuws-overzicht:first-child(1){
	margin-bottom:100px;
}


.nieuws-overzicht:nth-child(2) .row{
	display:flex;
	flex-direction: row-reverse
}
.terug-link a{
	border-radius:15px;
}

.module_nieuws_overzicht:nth-child(odd) .row{
	display:flex;
	flex-direction: row-reverse
}

.nieuws-overzicht .rotate{
	width:66%;
	border: 10px solid #3d98bf;
    outline: 10px solid #212b54;
}



.borderoutline{
/*	border: 10px solid #3d98bf;*/
  outline: 6px solid #212b54;
  border-radius: 10px;
}

#slider h2{
	font-size:7em;
}
 
.navbar-wrapper .text-primary a:hover{color:white !important;}

.navbar-wrapper .fa:before{
	color:#3d98bf;
}
.navbar-wrapper .fa:hover:before{
	color:#212c53;
}

@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {  max-width: 1480px;}
}

@font-face {
    font-family: 'CanvaBreeze-Regular';
    src: url('/Forms/fonts/CanvaBreeze-Regular.woff2') format('woff2'),
         url('/Forms/fonts/CanvaBreeze-Regular.woff') format('woff'),
         url('/Forms/fonts/CanvaBreeze-Regular.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;

}


.CanvaBreeze-Regular{
	  font-family: "CanvaBreeze-Regular", serif !important;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:    "wdth" 100;
}

.open-sans{
	  font-family: "Open Sans", serif !important;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:    "wdth" 100;
}

.nieuwsdetail .rotate{width:50%;}

.informatie_overzicht .img-overlay-container{
	display:flex;
	    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.informatie_overzicht .img-overlay-container .rotate{width:70%;}
.zoom-effect{ transition: transform .2s;}
.zoom-effect:hover{
	transform: scale(1.1);
}

.br-10{border-radius:10px;}

.bg-white-7{
	background:#ffffff70 !important;
}
.bg-lightblue{
	background:#3d98bf !important;
}

.informatie_overzicht h4{
	    background: #212b54;
    padding: 10px;
    border-radius: 10px;
}

/* LG */
@media (max-width: 1199.98px) {
#slider h2{
	font-size:5em;
}
}


/* MD */
@media (max-width: 991.98px) {  
#slider h2{
	font-size:3.5em;
}

}


/* SM */
@media (max-width: 767.98px) {  
}


/* XS */
@media (max-width: 575.98px) { 

}