/*
Theme Name: StormCore
Theme URI: https://www.brainstormenconcept.nl
Author: brainstorm en concept
Author URI: https://www.brainstormenconcept.nl
Description: Geeft kleur aan uw communicatie
*/

:root {
  --lightgray: #f7f7f7;
  --gray: #e6e6e6;
  --darkgray: #9e9e9e;
  --plyr-color-main:var(--element_color);
  --red:#66292e;
  --sand:#F0E5D6;
  --white:#FAF6F1;
  --brown:#C9AFA2;
  --orange:#FDA050;
}


body, html {
  margin:0 auto;
  font-family:"Montserrat", sans-serif;
  background-color:var(--background_color);
  color: var(--text_color);
  height:auto;

}
body {
    overflow-x:hidden;
}
body.admin-bar nav {
	top:32px;
}

p {
  font-weight:300;
  line-height:30px;
  font-size:18px;
}
p + ul {
  font-weight:300;
  font-size:18px; 
}
@media (max-width:782px) {
	body.admin-bar nav {
		top:46px;
	}
}

.bg-elementcolor {
 background-color:var(--element_color);
}
.text-elementcolor {
 color:var(--element_color);
}

#wpadminbar {
  background:black !important;
}

.rounded {
  border-radius:var(--border_radius);
}
.padded {
  padding:15px;
  width:calc(100% - 30px);
  margin-top:25px;
  margin-bottom:25px;
}
.white-space {
  margin-top:100px;
  margin-bottom:100px;
}
@media screen and (max-width:991px) {
  .white-space {
    margin-top:50px;
    margin-bottom:50px;
  }
}

#gdprc_bar .gdprc_button, #gdprc_settings .gdprc_button {
  background:var(--element_color) !important;
  border:0;
  border-radius:var(--border_radius);
}
#gdprc_settings .gdprc_item .gdprc_item__label, #gdprc_bar .gdprc_content__desc a[href], #gdprc_settings .gdprc_item__desc a[href], #gdprc_settings .gdprc_header__subtitle a[href], #gdprc_bar .gdprc_link, #gdprc_settings .gdprc_link {
  color:var(--element_color) !important;
}
#gdprc_bar, #gdprc_settings, #gdprc_settings * {
  border:0 !important;
}
#gdprc_settings .gdprc_item .gdprc_item__label, #gdprc_settings .gdprc_item .gdprc_item__desc {
  color:var(--text_color) !important;
}
#gdprc_settings .gdprc_item .gdprc_item__label {
  height:30px;
}
#gdprc_settings .gdprc_item .gdprc_item__icon {
  display:none;
}
#gdprc_settings .gdprc_item__toggle__wrapper label, #gdprc_settings .gdprc_item__toggle__wrapper label:after {
  border-radius:var(--border_radius);
}
#gdprc_settings .gdprc_item__checkbox__wrapper input[type=checkbox]:checked:not(:disabled) + label, #gdprc_settings .gdprc_item__toggle__wrapper input[type=checkbox]:checked:not(:disabled) + label {
  background:var(--element_color) !important;
}

.v-align {
	position: relative;
  top: 50%;
  height: auto;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.breadcrumbs {
  color:var(--white);
  font-size:14px;
  padding:20px 0;
}
  .breadcrumbs a {
    color:inherit;
  }
  .breadcrumbs a:hover {
    *color:var(--darkgray);
    *text-decoration:none;
  }

  .breadcrumbs i {
    bottom:-1.5px;
    position:relative;
  }
  q {
    quotes: "“" "”" "‘" "’";
  }

  body .slick-arrow {
    transform:0;
    padding:0;
  }
  body .slick-arrow::before {
    color: var(--text_color) !important;
  }
  body .slick-arrow:hover {
    transform:translateY(-50%);
  }




/*
=======
Headers
=======
*/
  header {
    margin-top:70px;
  }
  header.no-image-header {
    margin-top:100px;
  }
  header:after {
    content:" ";
    position:absolute;
    bottom:0;
    left:0;
    width:80%;
    height:100%;
    background: rgb(255,255,255);
    background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 100%);
    z-index:-1;
    *mix-blend-mode:hard-light;
    backdrop-filter: blur(120px);
    -webkit-backdrop-filter: blur(120px);
    mask-image: linear-gradient(
      to right,
      white 0%,
      white 15%,
      rgba(255,255,255,.7) 50%,
      rgba(255,255,255,.3) 75%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        white 0%,
        white 15%,
        rgba(255,255,255,.7) 50%,
        rgba(255,255,255,.3) 75%,
        transparent 100%
      );
	}
  header.sub-header:after {
    background:var(--red);
    mix-blend-mode:multiply;


  }
.home-header {
	width:100%;
	height:56vw;
	max-height:80vh;
	min-height:200px;
	background-color:#eee;
	background-size:cover;
	background-position:center;
	position:relative;
	overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:flex-start;
	z-index:1;
  background-color:#eee;
}

    header .content {
      width:calc(100% - 60px);
      max-width:700px;
      color:white;
    }
    	 header .content h1 {
    		 color:var(--red);
    	   font-size:50px;
    	   font-weight:700;

    		 margin:0;
    	 }
       header .content p {
         color:var(--red);
         padding:25px 0;
         font-size:18px;
       }

@media screen and (max-width:991px) {
  .home-header { min-height:600px; }
	.home-header .content h1 { font-size:50px; }
}
@media screen and (max-width:767px) {
	.home-header .content h1 { font-size:40px; }
}
@media screen and (max-width:576px) {
	.home-header .content h1 { font-size:30px; }

}
  .home-header .videoplayer {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background-color:var(--white);
    z-index:-1;
  }
    .home-header .videoplayer video {
      height:auto;
      width:auto;
      height:100%;
      width:100%;
      object-fit:cover;
      object-position:center top;

    }



    .sub-header {
    	width:100%;
    	height:56vh;
    	max-height:80vh;
    	min-height:200px;
    	background-color:#eee;
    	background-size:cover;
    	background-position:center;
    	position:relative;
    	overflow:hidden;
    	display:block;
    	*margin-bottom:50px;
    	z-index:1;
    	display:flex;
    	align-items:center;

      justify-content:flex-start;
    }

      .sub-header.schermvullend_laag, .sub-header.normaal_laag {
        max-height:450px;
      }
      .sub-header.normaal_hoog, .sub-header.normaal_laag {
        max-width:1400px;
        margin:0px auto 50px auto;
      }
    	 .sub-header .content h1 {
    		 color:white;
    	   font-size:50px;
    	   font-weight:700;
    		 margin:0;
         color:var(--white);
    	 }
       .sub-header .content p {
         color:var(--white);
         padding:15px 0;
       }
    	 .sub-header .cts {
    		 display:inline-block;
    		 color:white;
    		 text-shadow:0px 0px 10px rgba(0,0,0,.4);
    		 font-size:18px;
    		 margin-bottom:50px;
    		 cursor:pointer;
    		 font-size:30px;
         position:absolute;
         left:calc(50% - 5.5px);
         bottom:4px;
    	 }
    	 	.sub-header .cts:after {
          content: " ";
          width: 11px;
          height:11px;
          border-bottom: 1.5px solid white;
          border-right: 1.5px solid white;
          display: inline-block;
          transform: rotate(45deg);

          top:28px;
          pointer-events:none;

    		}

    @media screen and (max-width:991px) {
    	.sub-header .content h1 { font-size:50px; }
    }
    @media screen and (max-width:767px) {
    	.sub-header .content h1 { font-size:40px; }
    	.sub-header .content .cts {	font-size:24px; margin-bottom:20px;	}
    }
    @media screen and (max-width:576px) {
    	.sub-header .content h1 { font-size:30px; }
    	.sub-header .content .cts {	font-size:20px; margin-bottom:10px;	}

    }


    .no-image-header {
      background-color:black;
      padding:25px 0;
      color:white;
    }

/*
=============
Einde headers
=============
*/

/*
===
CTA
===
*/

.cta-cont {
  width:100%;
  min-height:200px;
  text-align:center;
  padding-bottom:50px;
}

  .cta-cont .cta {
    display:block;
    position:relative;
    overflow:visible;
  }

  .cta-cont .cta {
    margin:0px auto;
    display:inline-flex;
    align-items:center;
    color:var(--text_color);
    text-decoration:none;
    padding:15px;
    margin:0px auto;
    text-align:left;
  }
  .cta-cont.size-2 .cta {
    padding:15px 30px;
  }
  .cta-cont .cta .img {
    width:200px;
    height:200px;
    background-size:cover;
    background-position:center;
    margin-right:25px;
    box-shadow:0px 10px 25px -10px rgba(0,0,0,.5);
    transition:transform .3s;
  }
    .cta-cont .cta:hover .img {
      transform:scale(0.95);
    }

    .cta-cont .cta .content h2 {
      margin:0;
    }

@media screen and (max-width:767px) {
  .cta-cont .cta {
    padding:10px 0px !important;
  }
  .cta-cont .cta .img {
    width:20vw;
    height:20vw;
    min-width:100px;
    min-height:100px;
    margin-right:15px;
  }
}
@media screen and (max-width:991px) {
  .cta-cont .container {
    display:flex;
    flex-direction:column;
  }
}

@media screen and (min-width:991px) {
  .cta-cont.size-3 .container {
    display:flex;
    flex-direction:row;
  }
    .cta-cont.size-3 .cta {
      margin:0px auto;
      width:calc(33.3% - 100px);
      display:block;
      flex-direction:column;
      align-items:center;
      color:var(--text_color);
      text-decoration:none;
      margin:15px 50px;
      padding:0;
      text-align:left;
    }
    .cta-cont.size-3 .cta:first-of-type { margin:15px 100px 15px 0px; }
    .cta-cont.size-3 .cta:last-of-type { margin:15px 0px 15px 100px; }


      .cta-cont.size-3 .cta .img {
        width:100%;
        height:0px;
        padding-top:100%;
      }


      .cta-cont.size-3 .content {
        position:absolute;
        width:calc(100% - 30px);
        height:calc(100% - 30px);
        background-color:rgba(0,0,0,.3);
        border-radius:var(--border_radius);
        top:0px;
        left:0px;
        display:flex;
        align-items:flex-start;
        justify-content: flex-end;
        flex-direction:column;
        color:white;
        transition:.3s;
        padding:15px;
        background: rgb(0,0,0);
        background: linear-gradient(0deg, rgba(0,0,0,0.4010197829131653) 0%, rgba(255,255,255,0) 76%);
      }
        .cta-cont.size-3 .cta:hover .content {
          transform:scale(.95);
        }
      }


/*
=========
Einde CTA
=========
*/

/*
======
Footer
======
*/

footer {
  background: var(--red);
  color:white;
  padding:50px 0px 15px 0px;
  clear: both;
  position: relative;
  z-index:1;
  *border-top:15px solid rgba(0,0,0,.3);
}

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


  footer .logo {
    height:auto;
    width:100%;
    max-width:250px;
    cursor:pointer;
    z-index:2;
    background-size:contain;
    background-position:center left;
    background-repeat:no-repeat;
    filter:grayscale(1) brightness(0) invert(1);
    display:block;
    margin-bottom:25px;
  }
  footer hr {
    border-color:var(--white);
  }

  footer address {
    font-style:normal;
  }

  footer .footer-nav ul {
    list-style-type:none;
    padding-left:0;
    flex-direction:column;
    gap:12px;
    margin-bottom:10px;
  }
    footer .footer-nav ul li a {
      text-decoration:none;
      font-size:12px;
    }
    footer .footer-nav ul li a:hover {
      text-decoration:underline;
    }
    footer .footer-nav .sub-menu {
      padding-left:20px;
      display:none;
    }

  footer .search-form {
    display:block;
    width:100%;
    overflow:hidden;
    position:relative;
  }
    footer .search-field {
      width:80%;
      border:0;
      background-color:white;
      color:black;
      outline:none;
      height:30px;
      line-height:30px;
      padding:0px 10px;
      display:inline-block;
      transition:.3s;
      border-radius:var(--border_radius);
    }

    footer .search-field:focus, footer .search-field.typed {
      width:100%;
    }
    footer .search-field.typed {
      padding-left:30px;
    }
    footer .search-submit {
      width:30px;
      height:30px;
      font-size:0;
      outline:none;
      border:0;
      display:inline-block;
      cursor:pointer;
      position:absolute;
      right:0;
      top:0;
      background:transparent;
      box-shadow:none;
    }
      footer .search-submit {

      }
    footer .search-form .icon {
      width:30px;
      height:30px;
      font-size:0;
      outline:none;
      border:0;
      background-color:transparent;
      display:inline-block;
      cursor:pointer;
      position:absolute;
      right:0;
      top:-2px;
      border-radius:100%;
      pointer-events:none;
      transform:rotate(45deg);
      transition:.3s;
    }
    footer .search-field:focus ~ .icon, footer .search-field.typed ~ .icon {
      transform:rotate(-45deg);

    }
      footer .icon:before {
        content:" ";
        width:10px;
        height:10px;
        border-radius:100%;
        border:1px solid black;
        position:absolute;
        left:calc(50% - 5px);
        top:calc(50% - 5px);
        display:block;
      }
      footer .icon:after {
        height:6px;
        border-left:1px solid black;
        width:0px;
        position:absolute;
        left:calc(50% - 0.5px);
        top:calc(50% + 5px);
        content:" ";
      }
  footer .search-form .clear {
    position:absolute;
    top:0px;
    left:20%;
    width:30px;
    height:30px;
    line-height:30px;
    text-align:center;
    transition:.3s;
    transform:translateX(-100%);
    opacity:0;
    pointer-events:none;
    font-size:0;
    display:block;
    overflow:hidden;
    cursor:pointer;
  }
    footer .search-field:focus ~ .clear {  left:0px;   }
    footer .search-field.typed ~ .clear {
      opacity:1;
      transform:translateX(0);
      pointer-events:auto;
      left:0px;
    }

    footer .search-form .clear:after, footer .search-form .clear:before {
      content:" ";
      width:16px;
      border-top:1px solid black;
      height:0px;
      position:absolute;
      top:calc(50% - 0.5px);
      left:calc(50% - 8px);
      transition:.2s;
    }
      footer .search-form .clear:before { transform:rotate(45deg); }
      footer .search-form .clear:after { transform:rotate(-45deg); }

      footer .search-form .clear:hover:after, footer .search-form .clear:hover:before {
        width:10px;
        left:calc(50% - 5px);
      }

@media screen and (max-width:991px) {
  footer .columns.left, footer .columns.right {
    text-align:left !important;
    padding:0px 30px;
    width:calc(100% - 60px);
  }
     footer .columns .column {
       width:calc(100% - 60px) !important;
       display:block;
       border:0px !important;
       padding:0px !important;
       min-height:auto;
       text-align:left !important;
       margin-bottom:40px;
     }

     footer .search-form .search-field {
       width:100% !important;
     }

}


.subfooter {
  color:white;
  padding:10px 0;

  display:flex;
  justify-content:flex-end;
  gap:50px;
}
  .subfooter a {
    font-size:12px;
    padding:3px 0;
  }

  @media (max-width:991px) {
    .subfooter {
      justify-content:flex-start;
      flex-direction:column;
      gap:12px;
    }
  }

/*
============
Einde Footer
============
*/

/*
===========
Formulieren
===========
*/
.nf-form-content input, .nf-form-content textarea {
  border-radius:var(--border_radius) !important;
  font-family:inherit;
}
.nf-form-content input[type="button"] {
  cursor:pointer;
}
.nf-before-form-content .nf-form-fields-required {
  font-size:12px;
  color:rgb(80,80,80);
  padding:5px;
  display:none;
}
/*
=================
Einde Formulieren
=================
*/





/* Styling algemeen */
h1,h2,h3,h4,h5,h6 {
  font-weight:600;
}
h2 {
  font-size:40px;
}
h2 + p,
h2 + .wp-block-buttons {
  margin-top:25px;
}
.bg-red-textured {
  background-color:var(--red);
  border-radius:25px;
  background-image:url('img/bg-red-textured.webp');
  background-size:cover;
  background-position:center;

}
  .bg-red-textured .wp-block-paragraph,
  .bg-red-textured .wp-block-heading {
    color:white;
  }


@media (max-width:991px) {
  h2 {
    font-size:26px;
  }
}




/* Locatiekaart */

.locatiekaart {
  padding:50px 0;
}
.locatiekaart .map {
	width:100%;

	aspect-ratio: 1 / 1.2;
	background-image:url('img/locatiekaart.png');
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	overflow:visible;
}
	.locatiekaart .map .pin {
		position:absolute;
		width:30px;
		color:var(--brown);
		border-radius:100%;
		aspect-ratio:1;
		transform:translate(-50%, -50%);
		cursor:pointer;
		transition:.3s;
    font-size:30px;
	}

		.locatiekaart .map .pin:hover {
      color:var(--orange);
      opacity:.6;
		}


		.locatiekaart .map .pin.selected {
			color:var(--orange);
      opacity:1;
		}

.locatiekaart .info {
	margin-top:30px;
	position:relative;
	overflow:visible;
  display:flex;
  align-items:center;
  justify-content: center;
}
.locatiekaart .info .locatie {

	gap:10px;
	transition:.4s;
	position:relative;
	left:0;
	top:0;
}
	.locatiekaart .info .locatie:not(.selected) {
		position:absolute;
		left:-50px;
		opacity:0;
    pointer-events:none;
	}
  .locatiekaart .info a:hover {
    color:var(--element_color);
  }



/* GDPRC */
#gdprc_bar {
  padding:50px 10px;
}
#gdprc_bar, #gdprc_settings .gdprc_actions, #gdprc_settings .gdprc_header {
  background:var(--sand) !important;
}
#gdprc_settings {
  max-width:1000px;
}