/* Logo 
.logo-container #Group_1601,
.logo-container #Group_1605 {opacity:0; transition:.3s;}
.logo-container #Group_2115 {transform:translateX(-174px); transition:.3s;}*/

.logo-container #Group_1601,
.logo-container #Group_1605 {opacity:1; transition:.3s;}
.logo-container #Group_2115 {transform:translateX(0px); transition:.3s;}

.header-invisible .logo-container #Group_1601,
.header-invisible .logo-container #Group_1605 {opacity:0; transition:.3s;}
.header-invisible .logo-container #Group_2115 {transform:translateX(-174px); transition:.3s;}

.header-invisible .logo-container:hover #Group_1601,
.header-invisible .logo-container:hover #Group_1605 {opacity:1; transition:.3s;}
.header-invisible .logo-container:hover #Group_2115 {transform:translateX(0px); transition:.3s;}

/* header */
.header {width:100%; padding:0 32px; z-index:9999999998; position:sticky; top:0; transition:.3s;}
.header:after {content:""; position:absolute; left:0; top:0; right:0; height:100%; background:var(--soft_sand_50); z-index:-1; transition:.3s;}
.header.header-invisible:after {transform:translateY(-100%);}
.admin-bar .header {top:32px;}
.menu-open .header {background:transparent;}
.header .header-row {width:100%; display:flex; justify-content:space-between;}

.header .header-row .logo-container {margin:19px 0; z-index: 9999; display:flex;}
.header .header-row .logo-container a {display:flex;}
.menu-open .header .header-row .logo-container {transition:.3s;}
.menu-open .header .header-row .logo-container a svg path {fill:var(--deep_sea)}

.header .header-row .menu-container {display:flex; }
.header .header-row .menu-container .menu-link {margin-right:40px; transition:.3s; display:flex; align-items:center; justify-content:center; position:relative;}
.header .header-row .menu-container .menu-link.active {color:var(--aqua_marine)}

.header .header-row .menu-container .menu-icon-container {z-index: 9999; display:flex; display:flex; align-items:center;}
.header .header-row .menu-container .menu-icon-container .menu-toggle {display:flex; align-items:center; transition:.3s; z-index: 9998}
.header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon {width:24px; display: flex;align-items: center;justify-content: center; line-height:1;}
.header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon {width:24px; position:relative; height:16px; transition:.3s;}
.header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:before,
.header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:after {content:""; position:absolute; width:24px; height:3px; border-radius:3px; background: var(--aqua_marine); transition: .3s;}
.header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:before {top:0; right:0; transform-origin: right center;}
.header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:after {bottom:0; left:0; transform-origin: left center;}
.header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon-text {padding-left:16px; transition:.3s;}

.header-invisible.header {}
.header-invisible.header .menu-container .menu-link {transform:translateY(-100%);} 

.header .header-row .menu-container .menu-icon-container .menu-toggle:hover {cursor:pointer;}
.header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon,
.menu-open .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon {width:15px;}
.header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:before,
.menu-open .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:before {transform: rotate(-41deg); width:21px;}
.header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:after,
.menu-open .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:after {transform: rotate(-41deg); width:21px;}
.header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon-text {color:var(--aqua_marine)}

.menu-open .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon-text {color:#fff}
.menu-open .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:before, 
.menu-open .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:after {background-color:#fff !important;}

.flyout-menu-wrapper {position:fixed; background:#fff; left:0; height:100%; min-height:800px; right:0; top:0; padding-top:80px; z-index:9998; display:none; opacity:0;}
.admin-bar .flyout-menu-wrapper {top:32px;}

.menu-open .flyout-menu-wrapper {display:block; opacity:1;}
.menu-open .flyout-menu-wrapper:before {content:""; position:fixed; left:0; top:0; bottom:0; right:0; width:205vw; height:205vh;  background-color:var(--neon_coral); clip-path: polygon(calc(100% - 25%) 0, 100% 0, 100% 100%, 25% 100%); animation-name: animation_1; animation-duration: 0.3s; animation-fill-mode: forwards; }
.menu-open.admin-bar .flyout-menu-wrapper:before {top:32px;}
.menu-open .flyout-menu-wrapper:after {content:""; position:fixed; left:0; top:0; bottom:0; right:0; width:200vw; height:200vh; background-color:var(--aqua_marine); clip-path: polygon(calc(100% - 25%) 0, 100% 0, 100% 100%, 25% 100%); animation-name: animation_2; animation-duration: 0.3s; animation-fill-mode: forwards; }
.menu-open.admin-bar .flyout-menu-wrapper:after {top:32px;}

.swiper.happy-clients-swiper,
.swiper.knowledge-sharing-swiper {overflow:visible}

@keyframes animation_1 {
  from {transform: translate(100vw, 100vh);}
  to {transform: translate(-105vw, -105vh)}
}

@keyframes animation_2 {
  from {transform: translate(105vw, 105vh);}
  to {transform: translate(-100vw, -100vh)}
}

/* Submenu */
.header .header-row .menu-container .menu-item.has-sub {display:flex; position:relative;}
.header .header-row .menu-container .menu-item.has-sub .submenu {position:absolute; top:100%; left:0; min-width:200px; background:#fff; box-shadow:0 12px 32px rgba(0,0,0,0.08); padding:0; z-index:9999; flex-direction:column; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .4s ease;}
.header .header-row .menu-container .menu-item.has-sub .submenu a {display:block; padding:8px 16px; color:var(--deep_sea); font-size:0.9em; text-decoration:none; margin-right:0; transition:color .2s ease, transform .2s ease;}
.header .header-row .menu-container .menu-item.has-sub .submenu a:hover {color:var(--aqua_marine); transform:translateX(4px);}
.header .header-row .menu-container .menu-item.has-sub:hover .submenu {transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto;}

@media (max-width:1080px){
  .header .header-row .logo-container a svg {max-width:184px;}
  .header .header-row .menu-container .menu-link {margin-right:24px;}
  .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon-text {display:none;}
}

@media (max-width:800px){
  .header .header-row .menu-container .menu-item.has-sub {display:none;}
}

/* flyout menu*/ 
.flyout-menu-wrapper .flyout-menu-container {width: 100%;height: 100%; padding:32px; display: flex; align-items: center; color:#fff; background-size:1100px auto; background-image:url(img/lines-deep-sea.svg); background-position:top right; position:relative; z-index:1;}
.flyout-menu-wrapper .flyout-menu-container .container {z-index:1; }
.flyout-menu-wrapper .flyout-menu-container .container .row ul {margin:0; padding:0; list-style: none; }
.flyout-menu-wrapper .flyout-menu-container .container .row ul li {overflow:hidden;}
.flyout-menu-wrapper .flyout-menu-container .container .row ul li a {float:left; display:flex; align-items:center; transition: padding .3s;}
.flyout-menu-wrapper .flyout-menu-container .container .row ul li a.active {}
.flyout-menu-wrapper .flyout-menu-container .container .row ul li a:hover{padding-left:16px;}
.flyout-menu-wrapper .flyout-menu-container .container .row ul li a .counter {font-size: 16px; color:#fff; font-weight:500; width: 26px; height: 26px;background: var(--deep_sea);display: flex;align-items: center;justify-content: center;border-radius: 50%;margin-left: 16px;}
.flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-big {font-size: 64px; line-height:1.4; font-family: metronic-slab, sans-serif; font-weight: 600; margin-bottom:0;}

.flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-big li a,
.flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-small li a {opacity:0; transform:translateY(24px)}

.menu-open .flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-big li a,
.menu-open .flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-small li a {animation-name:fade_in; animation-duration:0.3s; animation-fill-mode:forwards;}

.menu-open .flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-big li:nth-child(1) a{animation-delay:.3s;}
.menu-open .flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-big li:nth-child(2) a{animation-delay:.35s;}
.menu-open .flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-big li:nth-child(3) a{animation-delay:.4s;}
.menu-open .flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-big li:nth-child(4) a{animation-delay:.45s;}
.menu-open .flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-big li:nth-child(5) a{animation-delay:.5s;}

.menu-open .flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-small li:nth-child(1) a{animation-delay:.45s;}
.menu-open .flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-small li:nth-child(2) a{animation-delay:.5s;}
.menu-open .flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-small li:nth-child(3) a{animation-delay:.55s;}
.menu-open .flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-small li:nth-child(4) a{animation-delay:.6s;}
.menu-open .flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-small li:nth-child(5) a{animation-delay:.65s;}

.flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-small {font-size:24px; line-height:1.4;}
.flyout-menu-wrapper .flyout-menu-container .container .row ul.menu-small li {margin:16px 0;}
.flyout-menu-wrapper .flyout-menu-container .container .row .socials {font-size:32px}
.flyout-menu-wrapper .flyout-menu-container .container .row .socials a {margin-right:48px; transition:.3s}
.flyout-menu-wrapper .flyout-menu-container .container .row .socials a:hover{color:#fff}
.flyout-menu-wrapper .flyout-menu-container .container .row .socials a:last-child {margin-right:0}

.flyout-menu-wrapper .flyout-menu-container .container .row .col {padding-top:0; padding-bottom:0;}

.flyout-menu-wrapper .flyout-menu-container .ba-animation-wrapper {position:absolute; right:32px; top:0; }

.flyout-menu-wrapper .flyout-menu-container .container .row .flyout-contact .col{display:flex; flex-direction:column;}
.flyout-menu-wrapper .flyout-menu-container .container .row .flyout-contact a {transition:.3s;}
.flyout-menu-wrapper .flyout-menu-container .container .row .flyout-contact a:hover {color:var(--deep_sea)}

@keyframes slide_up {
	from {transform: translateY(100%); opacity:0;}
	to {transform: translateY(0%); opacity:1;}
}

.flyout-fade-in {opacity:0;}
.menu-open .flyout-fade-in {animation-name: fade_in; animation-duration: 0.3s; animation-fill-mode: forwards; animation-delay: .3s;}

@keyframes fade_in {
	from {opacity:0; transform:translateY(24px)}
	to {opacity:1;  transform:translateY(0px)}
}

/* different header colors */
.cultuur .header:after {background:var(--deep_sea)}
.cultuur .header .menu-container {color:#fff;}

.post-type-archive-werk .header:after {background:var(--soft_sand)}
.post-type-archive-werk .header-row .logo-container a svg path {fill:var(--deep_sea)}
.post-type-archive-werk .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:before, 
.post-type-archive-werk .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:after {background:var(--deep_sea)}
.post-type-archive-werk .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:before, 
.post-type-archive-werk .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:after {background:var(--aqua_marine)}

.page-template-digitale-kalender .header:after {background:var(--soft_sand)}
.page-template-digitale-kalender .header-row .logo-container a svg path {fill:var(--deep_sea)}
.page-template-digitale-kalender .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:before, 
.page-template-digitale-kalender .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:after {background:var(--deep_sea)}
.page-template-digitale-kalender .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:before, 
.page-template-digitale-kalender .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:after {background:var(--aqua_marine)}

.vacatures .header:after {background:var(--pink_pearl)}
.vacatures .header-row .logo-container a svg path {fill:var(--deep_sea)}
.vacatures .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:before, 
.vacatures .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:after {background:var(--deep_sea)}
.vacatures .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:before, 
.vacatures .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:after {background:var(--aqua_marine)}

.single-vacatures .header-invisible.header:after {background-color:var(--soft_sand_50) !important; transform:none !important}

.page-template-bedankt .header:after {background:var(--pink_pearl)}
.page-template-bedankt .header-row .logo-container a svg path {fill:var(--neon_coral)}
.page-template-bedankt .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:before, 
.page-template-bedankt .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:after {background:var(--neon_coral)}
.page-template-bedankt .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:before, 
.page-template-bedankt .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:after {background:var(--aqua_marine)}

.single-downloads .header:after {background:var(--pink_pearl)}
.single-downloads .header-row .logo-container a svg path {fill:var(--neon_coral)}
.single-downloads .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:before, 
.single-downloads .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:after {background:var(--neon_coral)}
.single-downloads .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:before, 
.single-downloads .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:after {background:var(--aqua_marine)}

.page-template-nieuwsbrief .header:after {background:var(--soft_sand);}

.aanpak .header-row .logo-container a svg path {fill:var(--neon_coral)}
.aanpak .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:before, 
.aanpak .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:after {background:var(--neon_coral)}
.aanpak .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:before, 
.aanpak .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:after {background:var(--deep_sea)}
.aanpak .header .header-row .menu-container .menu-link.active {color:var(--neon_coral)}

.contact .header-row .logo-container a svg path {fill:var(--neon_coral)}
.contact .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:before, 
.contact .header .header-row .menu-container .menu-icon-container .menu-toggle .menu-icon .icon:after {background:var(--neon_coral)}
.contact .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:before, 
.contact .header .header-row .menu-container .menu-icon-container .menu-toggle:hover .menu-icon .icon:after {background:var(--deep_sea)}
.contact .header .header-row .menu-container .menu-link.active {color:var(--neon_coral)}