/*
Theme Name: Sydney Child
Theme URI: http://athemes.com/theme/sydney
Author: aThemes
Author URI: http://athemes.com
Template: sydney
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sydney
*/




body, html {
    background-color: var(--color-black);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y

    text-rendering: auto;
    height: 100%;
    text-rendering: optimizeSpeed;
    text-rendering: optimizeLegibility;
    text-rendering: geometricPrecision;
    font-family: var(--font-sans);
	--main-hue: 208;
	--main-color: hsl(var(--main-hue), 92%, 54%);
	--main-color-hover: hsl(var(--main-hue), 77%, 48%);
	--light-main-color: hsl(var(--main-hue), 91%, 55%);
	--input-bg: hsla(var(--main-hue), 50%, 50%, 6.5%);
	--input-bg-hover: hsla(var(--main-hue), 50%, 50%, 14%);
	--input-text: #8c9aaf;
	timeline-scope: --one, --two, --three, --four, --five;
}



*,*::before,*::after { box-sizing: border-box; }

:root { 
   --items: min(30rem, 80vw);
   --color-base: #181213;
   scroll-timeline: --page block;  
   
   @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
   }
}


:host, :root {

--spring-easing: linear(
    0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017,
    1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
    0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1
  );
  --spring-duration: 1.333s;
    --color-emerald-500: oklch(.696 .17 162.48);
    --color-slate-500: oklch(.554 .046 257.417);
    --color-gray-50: #818285;
    --color-gray-200: oklch(.928 .006 264.531);
    --color-gray-400: oklch(.707 .022 261.325);
    --color-gray-600: oklch(.446 .03 256.802);
    --color-gray-700: oklch(.373 .034 259.733);
    --color-zinc-50: oklch(.985 0 0);
    --color-zinc-200: oklch(.92 .004 286.32);
    --color-zinc-500: oklch(.552 .016 285.938);
    --color-zinc-700: oklch(.37 .013 285.805);
    --color-zinc-800: oklch(.274 .006 286.033);
    --color-neutral-600: oklch(.439 0 0);
    --color-black: #101214;
    --color-white: #fff;
    --spacing: 8px;
    --container-md: 28rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: 16px;
    --text-sm--line-height: 140%;
    --text-base: 18px;
    --text-base--line-height: 140%;
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wide: .025em;
    --leading-tight: 1.25;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-bounce: bounce 1s infinite;
    --blur-sm: 8px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
--font-min: 16px; /* Minimum size */
    --font-max: 32px; /* Maximum size */
    --font-preferred: 2vw; /* Preferred size */

}

.cursor{
	position:fixed;
	height:50px;
	width:50px;
	border-radius:100%;
	background:#fff;
	margin-left:-22px;
	margin-top:-22px;
	z-index:1000;
	backdrop-filter:grayscale(1);
	mix-blend-mode:difference;
	pointer-events:none;
	transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cursor.active{
	transform: scale:1.5;
}

     header.shfb{
		 
	 }
	 
	 
	 
	 @property --scroll {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --scroll-delayed {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --scroll-direction {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}


@keyframes setScrollProps {
	to {
		--scroll: 1000;
		--scroll-delayed: 1000;
	}
}

:root {
	animation: setScrollProps linear both;
	animation-timeline: scroll(root);
   --header-effect-duration: .5s;
}

body {
   transition: --scroll-delayed calc(var(--header-effect-duration) + .5s);
   /* the transition of the header should last a 
    * bit less than this transition otherwise, for 
    * extremely small scroll movements, the header 
    * won't be fully revealed or hidden (that's 
    * the reason for a + .1 sec. here)
    */
   
   --scroll-velocity: calc(var(--scroll) - var(--scroll-delayed));
   --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity));
   --scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed));
   color:#fff!important;
   font-weight:500;
  letter-spacing:0.0344em;
		font-size: 24px;
		font-size: clamp(var(--font-min), var(--font-preferred), var(--font-max));
		line-height: 1.7;
		font-family: Proxima Nova Lt, "FS Industrie",  "neo_sans_stdlight", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		
   
   
}

@font-face {
    font-family: 'neo_sans_stdlight';
    src: url('font/neo_sans_std_light-webfont.woff2') format('woff2'),
         url('font/neo_sans_std_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'Euclid Circular A Trial';
    src: url('font/EuclidCircularATrial-Medium.woff2') format('woff2'),
        url('font/EuclidCircularATrial-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular A Trial';
    src: url('font/EuclidCircularATrial-Regular.woff2') format('woff2'),
        url('font/EuclidCircularATrial-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular A Trial';
    src: url('font/EuclidCircularATrial-Semibold.woff2') format('woff2'),
        url('font/EuclidCircularATrial-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'FS Industrie';
    src: url('fonts/FSIndustrie-Regular.woff2') format('woff2'),
        url('fonts/FSIndustrie-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FS Industrie';
    src: url('fonts/FSIndustrie-Light.woff2') format('woff2'),
        url('fonts/FSIndustrie-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FS Industrie';
    src: url('fonts/FSIndustrie-Medium.woff2') format('woff2'),
        url('fonts/FSIndustrie-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FS Industrie Narrow';
    src: url('fonts/FSIndustrieNw-Medium.woff2') format('woff2'),
        url('fonts/FSIndustrieNw-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FS Industrie Narrow';
    src: url('fonts/FSIndustrieNw-Regular.woff2') format('woff2'),
        url('fonts/FSIndustrieNw-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FS Industrie Narrow';
    src: url('fonts/FSIndustrieNw-Medium.woff2') format('woff2'),
        url('fonts/FSIndustrieNw-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Lt';
    src: url('fonts1/ProximaNova-Light.woff2') format('woff2'),
        url('fonts1/ProximaNova-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Rg';
    src: url('fonts1/ProximaNova-Regular.woff2') format('woff2'),
        url('fonts1/ProximaNova-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Lt';
    src: url('fonts1/ProximaNova-Semibold.woff2') format('woff2'),
        url('fonts1/ProximaNova-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'dm_serif_displayregular';
    src: url('fonts/dmserifdisplay-regular-webfont.eot');
    src: url('fonts/dmserifdisplay-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dmserifdisplay-regular-webfont.woff2') format('woff2'),
         url('fonts/dmserifdisplay-regular-webfont.woff') format('woff'),
         url('fonts/dmserifdisplay-regular-webfont.svg#dm_serif_displayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


h1,h2,h3,h4{
	font-family: 'FS Industrie Narrow', Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight:500;
	font-size:clamp(2rem, calc( 7vw+), 5rem);
font-size: clamp(32px, 8vw, 96px);
letter-spacing:0.0144em!important;
}
h1{font-size: clamp(24px, 8vw, 72px);
}

h2{
	font-size: clamp(16px, 4vw, 48px);
	letter-spacing:0.0244em;
}
h3{
	font-size: clamp(12px, 3vw, 36px);
	letter-spacing:0.0244em;
}
h4{
	font-size: clamp(12px, 3vw, 36px)
}


.it{font-style:italic!important;
color:#800020!important;
font-family: 'dm_serif_displayregular', Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif!important;
}

header.shfb {
   position: fixed!important;
   margin-top:20px;
   z-index: 1;
   inset: 0 0 auto;
   will-change: transform;
   transition: transform var(--header-effect-duration) 0s;
   transform: translateY(var(--translate));
   z-index:999;
   @container style(--scroll-direction: 0) {
      /* Scroll is idle, so we keep the current header 
       * position by setting an extremely high 
       * transition delay. ~2 billion seconds should 
       * be enough even for the most patient user ;) 
       */
      transition-delay: calc(infinity * 1s);  
   }

   
   /*
   * Note: you could avoid the subsequent style 
   * queries if you set the --translate property 
   * like so:
   * 
   *   @container style(not (--scroll-direction: 0)) {
   *     --translate: calc((var(--scroll-direction) + 1) * -50%);
   *   }
   *
   * but it would only work for this specific use 
   * case and values, so I keep them for clarity.
   */

   @container style(--scroll-direction: -1) {
      /* Scrolling up, so we must reveal the header */
      --translate: 0;
   }

   @container style(--scroll-direction: 1) { 
      /* Scrolling down, so we must hide the header 
       *
       * Assign a lower value if you want to also hide
       * the box-shadow below the header
       * (e.g. --translate: calc(-100% - 15px))
       */
      --translate: calc( -100% - 20px);
	  transition-delay: 1.4s;
   }   
}

header.shfb .container-fluid{width:95%!important;

 background-color: #00000090; /* Black with transparency */
  padding: 6px 10px 0px 10px!important; /* Space around the content */
  border-radius: 100vw; /* Ensures a pill shape */
  backdrop-filter: blur(5px); /* Blurs content behind the header */
transition:all .5s ease;
height:auto!important;

}
@media only screen and (max-width: 1479px) {
header.shfb .container-fluid{
	 padding: 6px 10px 3px 10px!important;
}
}
@media only screen and (max-width: 1379px) {
	header.shfb .container-fluid{
	 padding: 6px 10px 6px 10px!important;
}
	
}

@media only screen and (max-width: 1279px) {
	header.shfb .container-fluid{
	 padding: 6px 10px 11px 10px!important;
}
	
}

@media only screen and (max-width: 1179px) {
	header.shfb .container-fluid{
	min-height:60px;
}
	
}


header.shfb.sticky .container-fluid{
	width:70%!important;
	position:relative;
	border:1px solid rgba(255, 255, 255, 0.5)!important;
	
}
.site-logo, .shfb-component-logo .site-logo{
	margin-top:-12px;
}


@media only screen and (max-width: 1679px) {
header.shfb.sticky .container-fluid{
	width:90%!important;
}
}
@media only screen and (max-width: 1020px) {
.site-logo, .shfb-component-logo .site-logo{
	margin-top:5px!important;
}
}

@media only screen and (max-width: 992px) {
.site-logo, .shfb-component-logo .site-logo

 {
        height: 40px;
		
    }

}
.shfb-component-mobile_hamburger{
	z-index:9999!important;
	width:30px!important;
	margin-top:9px;
}
.shfb-component-mobile_hamburger a i.sydney-svg-icon svg{
	width:29px!important;
	height:29px!important;
   fill: white!important;
}



.sydney-offcanvas-menu a.mobile-menu-close i{
	display:none
}
.shfb-mobile_offcanvas {
    background-color:#fff!important;

}

.shfb.shfb-mobile_offcanvas #mainnav a.sydney-dropdown-link

 {
    color: #000;
	background-image: linear-gradient(90deg, #000, #000);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s ease;
	
	
}

.sydney-offcanvas-menu #mainnav a.sydney-dropdown-link:hover,  .sydney-offcanvas-menu #mainnav ul li.current_page_item a{
   color:#000!important;
    background-size: 100% 2px!important;
}


.sydney-offcanvas-menu a.mobile-menu-close{
	height:38px;width:38px;
	display:flex;
	align-items:center;
	justify-content:center;
	float:right;
	color:transparent;
	font-weight:700;
	cursor:pointer;
	box-sizing:border-box;
	padding-top:4px;
	font-size:1.2em;
	position:relative;
	transition: all .4s ease-in-out;
	margin-top:-32px!important;
}
.sydney-offcanvas-menu a.mobile-menu-close::after,
  .sydney-offcanvas-menu a.mobile-menu-close::before {
        position: absolute;
        content: '';
        height: 22px;
        width: 1px;
        background: #000;
        right:16px;
        top: 50%;
        transition: transform 0.4s ease;
        transform: translate(-50%, -50%) rotate(45deg);
		
    }
	
	 .sydney-offcanvas-menu a.mobile-menu-close:hover::before {
        transition: transform 0.2s ease;
		
    }

 .sydney-offcanvas-menu a.mobile-menu-close::before {
        transform: translate(-50%, -50%) rotate(-45deg);
    }



 .sydney-offcanvas-menu a.mobile-menu-close:hover::after
     {
        transform: translate(-50%, -50%) rotate(-450deg);
    }

 
 .sydney-offcanvas-menu a.mobile-menu-close:hover::before {
        transform: translate(-50%, -50%) rotate(90deg);
    }
	
	






header.shfb .container-fluid .main-navigation ul li a{
	color:var(--color-white)!important;
	font-size:1.1rem;
}

    .shfb-main_header_row {
       min-height: 50px;
    }
	
	.shfb-header .shfb-main_header_row .shfb-column-1{
		max-width:200px;
	}
	
	.shfb-header .shfb-main_header_row .shfb-column-2{
		width:100%;
		display:flex;
		justify-content:center!important;
		 align-items:center!important;
	}
	
	
	
	header.shfb .container-fluid .main-navigation ul li.menu-item-47{
		position:absolute;
		background:#fff;
		color:#000!important;
		display:inline-block;
		right:15px!important;
		min-width:150px;
		display:flex;
		align-items:center;
		justify-content:center;
		border-radius:30px;
		transition: all .5s ease;
		
		overflow:hidden;
	}
	
	
	
	header.shfb .container-fluid .main-navigation ul li.menu-item-47 a{
		color:#000!important;
		position:relative;
		display:block;
		z-index:6;
	}
	header.shfb .container-fluid .main-navigation ul li.menu-item-47 a:hover {
		color:#fff!important;
		position:relative;
		display:block;
		z-index:6;
	}
	
	
	
	
	 header.shfb .container-fluid .main-navigation ul li.menu-item-47:after{
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background-color: #000;
	 border-radius: 10rem;
	 z-index: -2;
}
 header.shfb .container-fluid .main-navigation ul li.menu-item-47:before {
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 0%;
	 height: 100%;
	 background-color: #000;
	 transition: all 0.3s;
	 border-radius: 10rem;
	 z-index:0;
}
 header.shfb .container-fluid .main-navigation ul li.menu-item-47:hover {
	 color: #fff;
	  border:1px solid #fff!important;
}
 header.shfb .container-fluid .main-navigation ul li.menu-item-47:hover:before {
	 width: 100%;
}


.menu-hoofdmenu-container ul{
		align-items: center;
   justify-content: center;
	}
	header.shfb .container-fluid .main-navigation ul{margin-top:4px; width:100%;
	
	
	
	}
	
	header.shfb .container-fluid .main-navigation ul li ul.sub-menu{
 width:200px!important;
  
	}
header.shfb .container-fluid .main-navigation ul li ul.sub-menu li a{
 color:#000!important;
  
	}

header.shfb .container-fluid .main-navigation ul li a{
font-family: FS Industrie,  "neo_sans_stdlight", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	}	


header.shfb .container-fluid .main-navigation ul li a::after{
      content: '';
      position: absolute;
      left: 50%;
      bottom: -2px;
	  background-position: center bottom;
      width: 0%;
      height: 3px;
      background-color: #fff;

	  transition: all 0.2s;
  }
	

	header.shfb .container-fluid .main-navigation ul li a:hover::after {
      width: 100%;
	 left:0;
  }

	header.shfb .container-fluid .main-navigation ul li.current_page_item a::after{
		content: '';
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 100%;
      height: 3px;
      background-color: #fff;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	.shfb-header .shfb-main_header_row .shfb-column-2 {
		position:absolute;
        left: 50%;
    transform: translate(-50%, 0);
	
    }
	
	
	
	
	body.home .entry-header{display:none!important}
	.content-area{margin-top:10px!important}
	
	.shfb-component-search{display:none!important}
	
	.hentry .wp-block-quote.is-style-large, .hentry blockquote {
    
background: var(--color-black);

}

.svglogo{
	width:20%;
	position:absolute;
        left: 40%;
    transform: translate(-40%, 0);
	animation:fade-out-svg linear;
	animation-timeline:view();
	animation-range: exit -120px;
	
}


.blok.gradient{margin-top:-50px;
	padding-top:8%;
	text-align:center;
	padding-bottom:10%;
	position:relative;
	z-index:2;
	
}
.blok h1{
	color:#fff!important;
	font-size: clamp(40px, 10vw, 120px) !important;
	margin-top:30%
}

body.home .blok h1{margin-top:310px!important}
body.home .container.groot{margin-top:-120px!important}
.container.groot, .blok.over{
	font-size:clamp(20px, 7vw, 60px) !important;
	font-weight:700;
	
}
.blok.over.werk{
	font-size:clamp(16px, 6vw, 48px) !important;
	font-weight:700;
}

.blok.over.diensten{
	font-size:clamp(12px, 4vw, 36px) !important;
	font-weight:700;
	
}

.container.groot .buttondiv{
		position:absolute;
		clear:both;
		display:block;
		max-width:350px;
		font-size:.9em!important;
		overflow:hidden!important;
		background:#fff;
		color:#000!important;
		display:inline-block;
		border:1px solid #fff;
		min-width:150px;
		
		display:flex;
		align-items:center;
		justify-content:center;
		border-radius:30px;
		transition: all .5s ease;
		padding:7px 22px;
		overflow:hidden!important;
	 left: 45%;
    transform: translate(-45%, 0);
		
	}
	.container.groot .buttondiv a.buttons{font-size:.5em!important; 
	font-family: FS Industrie,  "neo_sans_stdlight", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
color:#000!important;
		font-weight:400;
	display:inline-block;
	z-index:1;
	
	}


.container.groot .buttondiv a.buttons:hover{color:#fff!important;

}


 
 .container.groot .buttondiv:hover {
	 color: #fff;
	  border:1px solid #fff!important;
	  background:#000!important
}
 
 
 .buttondiv1{
	 position:relative;
	 width:100%;
	 text-align:center;
	 clear:both;
	
 }
 .buttondiv1 a.bbb{
	 position:relative;
	 display:inline-block;
	 border:1px solid #fff;
	 border-radius:10em;
	 max-width:360px;
	 padding:0px 22px;
	 color:#000;
	 font-size:.5em!important; 
	font-family: FS Industrie,  "neo_sans_stdlight", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
color:#000!important;
		font-weight:400;
		overflow:hidden;
		clear:both;
	 background:#fff!important;
	 margin-top:20px;
 }

.buttondiv1 a.bbb:after{
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background-color: #000;
	 border-radius: 10rem;
	 z-index: -2;
}

.buttondiv1 a.bbb:before {
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 0%;
	 height: 100%;
	 background-color: #000;
	 transition: all 0.3s;
	 border-radius: 10rem;
	 z-index:0;
}
.buttondiv1 a.bbb:hover {
	 color: transparent!important;
	  border:1px solid #fff!important;
	  display:inline-block;
	  
	  
}
 .buttondiv1 a.bbb:hover:before {
	 content:"Bekijk portfolio";
	 color:#fff;
	 width: 100%;
}


@media only screen and (max-width: 1779px) {
	.container.groot .buttondiv{
		
	 left: 40%;
    transform: translate(-40%, 0);
		
	}
}


.fading, .blok-diensten, .blok-over-mij .container-fluid{
	animation:fade-out linear;
	animation-timeline:view();
	animation-range: exit -220px;
}
.blok.gradient {
	animation-name: appear_from_bottom;
	animation-timeline: scroll(root);
	animation-range: 0 100vh;;
}
.blok.over h2{
	color:#fff!important;
	text-align:center!important;
}
.blok.over{
	margin-top:-48px;
	background:var( --color-black );
	position:relative;
	z-index:39!important;
	line-height:4.5rem;
	padding-top:3%;
	padding-bottom:3%;
	margin-bottom:0px;
}
.blok.over.portfolio{
	line-height:2rem;
	font-weight:300!important
}
.blok.over.diensten{
	margin-top:128px;
}
.blok.over.redenen, .blok.over.redenen.diensten{
	width:100%;
	flex-direction:row;
	display:flex;
	flex-wrap:wrap;
	
	
	z-index:70!important;
	position:relative;
}
.blok.over.redenen{
	max-height:400vh;
}
.blok.over.redenen.diensten{
	margin-bottom:-129px;
}
.blok.diensten.faq{
	width:100%;
	flex-direction:row;
	display:flex;
	flex-wrap:wrap;
	z-index:99!important;
	position:relative;
	margin-top:129px;
}

.blok.diensten.faq{
	color:var(--black);
	background:#fff;
	padding-bottom:55px;
	
}
.blok.diensten.faq .left-block, .blok.diensten.faq .right-block{
	width:50%;
	float:left;
	display:flex;
	display:inline;
	position:relative;
	box-sizing:border-box;
	color:#000!important;
	
	font-size:.8em!important;
	
	padding-right:2%;
	padding-left:10%;
	height:inherit;
	padding-top:45px;
}
.blok.diensten.faq .right-block{
	padding-right:10%;
	padding-left:2%;
	padding-top:90px!important;
}


.blok.diensten.faq .right-block details{
	
}
.blok.diensten.faq h2{
	text-align:left!important;
	font-size:clamp(12px, 4vw, 36px) !important;
}
.blok.diensten.faq  h3{
	text-align:left!important;
	color:#fff!important;
	font-size:clamp(10px, 3vw, 30px) !important;
}
.blok.diensten.faq p {
font-size:clamp(7px, 3.5vw, 21px) !important;
}


.blok.over.redenen.diensten{
	max-height:400vh;
}



.blok.diensten.faq summary{
cursor:pointer;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	width:100%;
	padding:10px;
	margin-bottom:9px;
	font-weight:600;
	padding:8px;
	font-size:1.1em;
	position:relative;
	font-size:clamp(7px, 3.5vw, 21px) !important;
	font-weight:700!important;
	display:block;
}
.blok.diensten.faq details summary span{
	font-weight:700!important;
}

.blok.diensten.faq details summary::after, .blok.diensten.faq details summary::before{
	
        position: absolute;
        content: '';
        height: 18px;
        width: 1px;
        background: #000;
        right:16px;
        top: 50%;
        transition: transform 0.4s ease;
        transform: translate(-50%, -50%);
    
	
}

.blok.diensten.faq details[open] summary::before{
        transition: transform 0.4s ease;
    }
.blok.diensten.faq details summary::before {
        transform: translate(-50%, -50%) rotate(90deg);
    }

.blok.diensten.faq details[open] summary::after
     {
        transform: translate(-50%, -50%) rotate(-450deg);
    }
	
.blok.diensten.faq details[open] summary::before {
        transform: translate(-50%, -50%) rotate(90deg);
    }
	



.blok.over.redenen p{
	font-size:.45em!important;
	line-height:1.5em!important;
	font-weight:300!important
}
body.page-id-2 .blok.over.redenen.in-view .left-block{
	width:50%;
display:flex;
	position:relative;
	float:left;
	display:inline;

	box-sizing:border-box;
	padding-left:10%;
	padding-right:2%;
	height:inherit;
	padding-top:45px;
	padding-bottom:50px;
	opacity: .1;
 scale:0;
 
  animation: scale-in2 1.6s cubic-bezier(0,.46,.26,.99) forwards;
	
	

}





body.page-id-2 .blok.over.redenen.in-view .right-block{
	width:50%;
	float:left;
	display:flex;
	display:inline;
	position:relative;
	box-sizing:border-box;
	
	/*scale:0;
	opacity:.1;
	animation: scale-in2 1.6s cubic-bezier(0,.46,.26,.99) forwards;*/
	animation-delay:.6s;
	font-size:.8em!important;
	
	padding-right:10%;
	padding-left:2%;
	height:inherit;
	padding-top:45px;
	
}

body.page-id-2 .blok.over.redenen.in-view .right-block .value-item:nth-child(1){
	scale:0;
	opacity:.1;
	animation: scale-in2 1.6s cubic-bezier(0,.46,.26,.99) forwards;
	animation-delay:.3s;
}


body.page-id-2 .blok.over.redenen.in-view .right-block .value-item:nth-child(2){
	scale:0;
	opacity:.1;
	animation: scale-in2 1.6s cubic-bezier(0,.46,.26,.99) forwards;
	animation-delay:.6s;
}



body.page-id-2 .blok.over.redenen.in-view .right-block .value-item:nth-child(3){
	scale:0;
	opacity:.1;
	animation: scale-in2 1.6s cubic-bezier(0,.46,.26,.99) forwards;
	animation-delay:.9s;
}

body.page-id-2 .blok.over.redenen.in-view .right-block .value-item:nth-child(4){
	scale:0;
	opacity:.1;
	animation: scale-in2 1.6s cubic-bezier(0,.46,.26,.99) forwards;
	animation-delay:1.2s;
}





.blok.over.redenen.diensten .left-block{
	width:70%;
	display:flex;
	position:relative;
	float:left;
	display:inline;
	align-items:center;
	justify-content:center;
	padding-left:10%;

}


.blok.over.redenen.diensten svg{display:block;
position:relative;
height:200px;
z-index:500;
with:auto;

}


.blok.over.redenen.diensten .right-block{
	width:30%;
	display:flex;
	
	float:left;
	display:inline;
	align-items:center;
	justify-content:center;
	position:sticky;
	height:fit-content;
	top:0;
	padding-right:10%;
	padding-left:5%;
	padding-top:5%;
}





.blok.over.redenen.diensten h2{
	text-align:left!important;
	font-size:clamp(12px, 4vw, 36px) !important;
}
.blok.over.redenen.diensten  h3{
	text-align:left!important;
	color:#fff!important;
	font-size:clamp(10px, 3vw, 30px) !important;
}
.blok.over.redenen.diensten p, .blok.over.redenen.diensten ul li{
font-size:clamp(7px, 3.5vw, 21px) !important;
}

.blok.over.redenen.diensten ul li{
	padding:0!important;
	margin-bottom:0px!important;
	line-height:15px!important;
	font-weight:300!important;
	line-height:1.5em!important
}

.blok.over.redenen.diensten details span.meer-lezen{
	width:100%;
	display:inline-block;
	 text-align:center;
	 margin-top:15px;
	 position:relative;
	
}
.blok.over.redenen.diensten details span.meer-lezen:hover{
	cursor:pointer
	
}

.blok.over.redenen.diensten details span.meer-lezen span{
	display:flex;
	position:absolute;
	align-items:center;
	justify-content:center;
	height:50px;
	width:50px;
	border-radius:50%;
	border:1px solid #fff;
	left: 45%;
  transform: translate(-50%, -50%);
}

.blok.over.redenen.diensten details span.meer-lezen span:after {
	content:"";
	 border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 9px;
   position:absolute;
   transform: rotate(45deg);
   bottom:18px;
   
   transition: all .2s linear;
}

.blok.over.redenen.diensten details[open] span.meer-lezen span::after{
	transform: rotate(-135deg);
	bottom:10px;
}

.blok.over.redenen.diensten summary {
 display: block; /* This hides the summary's ::marker pseudo-element */
}
.post-348 .entry-content{
	background:#fff!important;
}
.post-348 .entry-content p, .post-348 .entry-content a, .post-348 .entry-content h1,  .post-348 .entry-content h2, .post-348 .entry-content h3, .post-348 ol li{
	color:#000!important;
}
.post-348 .entry-content p,  .post-348 ol li{
font-size:clamp(7px, 3.5vw, 21px) !important;
}
.post-348 .entry-content{padding:20px}
.post-348 .entry-content summary {
cursor:pointer;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	width:100%;
	padding:10px;
	
	font-weight:600;
	padding:8px;
	font-size:1.1em;
	position:relative;
	font-size:clamp(7px, 3.5vw, 21px) !important;
	font-weight:700!important;
	display:block;
	color:#000!important;
	position:relative;
}


.post-348 .entry-content details summary::after {
	content:"";
	background:url(images/arrow-down.svg) no-repeat right;
	background-size:16px 16px;
	display:inline-block;
	padding:14px;
	margin-top:3px;
	position:absolute;
	transition:all .3s linear;
	transform: rotate(0deg);
}

.post-348 .entry-content details[open] summary::after {
	transform: rotate(-95deg);
	
}

.post-348 .entry-content ol{
	
}
.post-348 .entry-content details, .post-348 .entry-content{
	color:#000!important
}

.post-348 .entry-content  details{
	
}

.post-348 .entry-content h2{
	text-align:left!important;
	font-size:clamp(12px, 4vw, 36px) !important;
}
.post-348 .entry-content  h3{
	text-align:left!important;
	color:#fff!important;
	font-size:clamp(10px, 3vw, 30px) !important;
}

::details-content {
  transition: height .3s ease, content-visibility .3s ease allow-discrete;
  height: 0;
  overflow: clip;
}


@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  [open]::details-content {
    height: auto;
  }
}


.scaleTitle{
	opacity:0;
	scale:0;
	animation: scale-title .9s ease-in-out forwards;
	animation-delay:.5s;
}

.slideText{
	transform: translateY(100px);
	
	opacity:0;
	animation:slide-in-below .9s ease-in-out forwards;
	animation-delay:.8s;
}

@keyframes slide-in-below{
	to{
		opacity:1;
		transform:translateY(0);
	}
}

@keyframes scale-title{
	to
	{opacity:1;
	scale:1;
		
	}
}

.slideText{
	transform: translateY(-100px)
	
	opacity:0;
}


@media only screen and (max-width: 829px) {
.color2.contact .contactleft, .color2.contact .contactright{
	width:100%!important
}
.color2.contact .contactright{
	margin-top:-30px!important; padding-top:0!important;
	margin-bottom:1px; padding-bottom:70px;
}
.contactright span.bellen, .contactright span.email, .contactright span.locatie{margin-bottom:18px}
}


@media only screen and (max-width: 1023px) {
	.blok.over.redenen{padding-left:10%; padding-right:11%}
	
	
	.blok.over.redenen .left-block, .blok.over.redenen .right-block, .geschiedenis .left-block, .geschiedenis .right-block{ 
		width:100%!important;
		padding-left:0;
		padding-right:0;
		margin-right:0;
		
	}
	.geschiedenis .left-block, .geschiedenis .right-block{ 
	padding-left:8%;
		padding-right:8%;
	
	}
	.geschiedenis .left-block{
		height:200px;
		margin-top:60px;margin-bottom:60px;
	}
	
	.blok.diensten.faq .left-block, .blok.diensten.faq .right-block{
		width:100%!important;
		padding-left:8%;
		padding-right:8%;
		margin-right:0;
	}
	
	.blok.diensten.faq{margin-top:170px}
	
	.blok.over.redenen .right-block .value-item{
		margin-right:-21%!important;
	}
	
	.blok.over.redenen.diensten.first{
	z-index:500!important;
	margin-top:200px;
	position:relative;
	
	
}

.blok.over.redenen.diensten .right-block{
	margin-left:45%;
	margin-top:30px;
}



.blok.over.redenen.diensten .right-block, .blok.over.redenen.diensten .left-block{
	position:relative!important;
	width:100%;
}
.blok.over.redenen.diensten svg{

height:100px;

}
	
	
}

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

.blok.over.redenen.diensten .right-block{
	margin-left:40%;
	margin-top:30px;
}

}
@media only screen and (max-width: 879px) {

.blok.over.redenen.diensten .right-block{
	margin-left:35%;
	margin-top:30px;
}

}
@media only screen and (max-width: 679px) {

.blok.over.redenen.diensten .right-block{
	margin-left:30%;
	margin-top:30px;
}

}


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

.blok.over.redenen.diensten .right-block{
	margin-left:25%;
	margin-top:30px;
}

}

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

.blok.over.redenen.diensten .right-block{
	margin-left:20%;
	margin-top:30px;
}

}


@keyframes scale-in2 {
  to {
    opacity: 1;
   scale:1;
  }
}



.value-item h3{
	color:#fff!important;
	margin-top:0px!important;
}
.value-item{
	margin-bottom:35px
}
.blok.over.redenen{
	
}

.blok.diensten.hoe{
	background:#fff!important;
	position:relative;
	z-index:39!important;
	padding-top:3%;
	padding-bottom:3%;
	color:#000!important;
	text-align:center;
}
.blok-over-mij img, .blok-diensten img{
	position:absolute;
	object-fit:cover;
	max-height:650px;
	right:15%;top:-100px;
	
opacity:.2;  
}
/*.blok-over-mij{
	 background:url(images/iphonehand.webp)no-repeat, linear-gradient(135deg, #000000 0%, #33292b 100%);
  background-position: bottom 0px center;
background-blend-mode: screen;
 background-size:cover;
}*/
 .blok-over-mij, .blok-over-mij-info, .blok-diensten{
	 width:100%;
	 text-align:center!important;
	 padding-top:4%;
	 padding-bottom:4%;
	 color:#fff!important
 }
 .blok-over-mij-info{
	background:#fff!important; 
	color:var(--color-black)!important;
	font-size:clamp(8px, 3vw, 24px) !important;
	text-align:left!important;
	position:relative;
	z-index:55!important
 }
 .blok-over-mij .container-fluid h1, .blok-diensten .container-fluid h1{
	 color:#fff!important;
	 font-size: clamp(24px, 8vw, 72px)!important;
margin-top:-60px;
 }
 
 
 
 
 
 .blok-over-mij-info h2{
	 color:var(--color-black)!important
 }
 
 .blok-over-mij .container-fluid, .blok-diensten .container-fluid{
	 width:60%;
	 position:relative;
 }
 
 .blok-over-mij-info .container-fluid{
	 width:65%;
	 position:relative;
	 z-index:600!important;
 }
 
 
 .blok-over-mij .container-fluid .text-over, .blok-diensten .container-fluid .text-over{
	 display:inline-block;
	 position:relative;
	 z-index:112;
 }
 
 .auteur{
	 width:60%;
	 display:flex;
	 align-items:left;
	 gap:1;
	 justify-content:left;
 }
 .auteur .column.een{
	 width:25%; float:left;
	 display:inline;
 }
 .auteur .column.twee{
	 width:70%;
	 float:left;
	 display:inline;
 }
 .auteur .column.een img{border-radius:50%; height:100px; width:auto;}
 .auteur .column.twee span{font-weight:700}
 body.page-id-2 section {
  position:sticky;
  position:-webkit-sticky;
  top: 0;
  
  min-height:50vh;
}


.geschiedenis .container-fluid{
	width:65%;
}
.geschiedenis .right-block  h3{
	text-align:left!important;
	color:#fff!important;
	font-size:clamp(10px, 3vw, 30px) !important;
}
.geschiedenis .right-block p{
font-size:clamp(7px, 3.5vw, 21px) !important;
}
.geschiedenis h2{
	text-align:left!important;
	font-size:clamp(12px, 4vw, 36px) !important;
}
.geschiedenis{
	width:100%;
	flex-direction:row;
	display:flex;
	flex-wrap:wrap;
	
	z-index:70!important;
	position:relative;
}
.geschiedenis .left-block{
	width:20%;
	display:flex;
	position:relative;
	float:left;
	display:inline;
	align-items:center;
	justify-content:center;
	height:inherit;
}





.geschiedenis .right-block{
	width:80%;
	display:flex;
	position:relative;
	float:left;
	display:inline;
	align-items:center;
	justify-content:center;
	height:inherit;
	padding-right:10%;
}
.geschiedenis svg{display:block;
position:relative;
height:200px;
z-index:500;
with:auto;
}


.geschiedenis .left-block .cijfers{
z-index:9!important;
position:absolute;
top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
display:inline-block;
height:85px!important;
width:auto;
}


.geschiedenis .left-block .cijfers svg{z-index:99!important;
height:85px!important;

width:auto;
	
}
.right-block .imagewrap{width:100%!important}


/*
.history{
	timeline-scope: --one, --two, --three, --four, --five;
}


.geschiedenis .container-fluid  .periode{
	animation: slideInOutHistory linear forwards;

  animation-timeline: view();
}






.geschiedenis .container-fluid .periode-1{
	view-timeline: --one;
}


.geschiedenis .container-fluid .periode-2{
	view-timeline: --two;
}


.geschiedenis .container-fluid .periode-3{
	view-timeline: --three;
}


.geschiedenis .container-fluid .periode-4{
	view-timeline: --four;
}

.geschiedenis .container-fluid .periode-5{
	view-timeline: --five;
}

.sticky-top .per-1{
	animation-timeline: --one;
	
}
.sticky-top .per-2{
	animation-timeline: --two;
	
}

.sticky-top .per-3{
	animation-timeline: --three;
	
}

.sticky-top .per-4{
	animation-timeline: --four;
}

.sticky-top .per-5{
	animation-timeline: --five;
}


.sticky-top{
	margin:0 auto;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	top:90px;
	height:90px;
	padding-top:3px;
	padding-bottom:3px;
	background:#000;
	text-align:center;
  position: sticky;
  transition:.4s all ease;
  z-index:9999!important
}

.sticky-top  .timeline{
	width: 20%; margin:0;padding:0;
	
}
.sticky-top  .timeline{
animation:light;
	opacity:0;
	
}
.sticky-top.shift{
	top:20px;
}

/* target range in keyframes */
/*@keyframes slideInOutHistory {
  entry 20% {
    transform: scale(.8) translateY(100px); 
    opacity: 0;
  }
  entry 100% { 
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  exit 20% {
    transform: scale(1) translateY(0); 
    opacity: 1;    
  }
  exit 100% { 
    transform: scale(.8) translateY(-100px);
    opacity: 0 
  }
}



  
  @keyframes light {
  from { 
  opacity: 0.2;
  }
  to {
	  opacity: 1
	  }
}

*/
/*
 
 .blok-over-mij .container-fluid div{
	position:absolute;
 
  
   background: linear-gradient(90deg, #000000 0%, #800020 50%, #000000 100%);
  z-index:-1;
  background: linear-gradient(45deg, #000000 0%, #ff00ff 100%);
 
	
  

  

 top:-160px;
 left:20%;
 animation: moveGrowRotate 124s infinite;
  aspect-ratio: 1;
  clip-path: shape(from 71.57% 52.13%,curve to 78.69% 72.05% with 74.98% 58.12%,
  curve to 70.34% 87.46% with 82.40% 85.98%,curve to 49.60% 83.45% with 58.28% 88.94%,curve to 39.76% 69.11% with 40.92% 77.96%,
  curve to 28.18% 58.56% with 38.60% 60.27%,curve to 22.19% 49.63% with 17.76% 56.85%,curve to 34.78% 42.28% with 26.62% 42.40%,curve to 42.88% 29.17% with 42.94% 42.16%,
  curve to 53.35% 11.71% with 42.81% 16.19%,curve to 63.35% 22.85% with 63.89% 7.24%,curve to 65.49% 42.30% with 62.82% 38.46%,curve to 71.57% 52.13% with 68.16% 46.14%);
  height:480px;
  width:480px;
filter:blur(130px);
 
}
@keyframes moveGrowRotate {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
	filter:blur(30px);
	opacity:.7
  }
  50% {
    transform: translate(200px, 50px) scale(1.5) rotate(180deg);
	filter:blur(100px);
	opacity:.4;
  }
  100% {
   
    transform: translate(0, 0) scale(1) rotate(360deg);
	filter:blur(30px);
	opacity:.7;
  }
}
*/




 
 
  
  .blok-diensten{
	  width:100%;
	  padding-top:4%;
	  padding-bottom:4%;
	  position:relative;
	 
  }
  
  .blok-diensten .container-fluid{
	  position:relative;
	  
  }
  
  
  
  
  
  
  .blobinner{position:absolute;
	  animation: moveShape 28s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
	  z-index:-1!important;
	  top:-300px;
	  display:inline-block;
	  opacity:.7;
	  left:10%;
  }
  body.page-id-14 .blobinner{
	   opacity:.9;
  }
  .blok-over-mij .blobinner{
	  left:-30px;
	  opacity:.7;
	  top:-120px;
	  z-index:-1;
	  position:relative;
  }
 
  .blob, .blob-over, .blob-werk, .blob-project{position:relative;
  z-index:1!important;
	  width:600px;
	  aspect-ratio:1/1;
	   background: linear-gradient(90deg,rgba(44, 48, 48, 1) 0%, rgba(194, 31, 164, 1) 35%, rgba(181, 13, 86, 1) 71%, rgba(44, 48, 48, 1) 100%, rgba(44, 48, 48, 1) 100%);
	  border-radius: 30% 70% 70% 30% / 30% 40% 70% 70%;
	  filter: blur(50px);
	  animation: changeShape 16s linear infinite, rotateShape 22s linear infinite, moveShape 28s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite, scaleShape 36s linear infinite,  alternate;
  }
  
  .blob-werk{
	  background: #080808;
background: linear-gradient(90deg,rgba(8, 8, 8, 1) 0%, rgba(213, 33, 79, 1) 35%, rgba(110, 90, 224, 1) 70%, rgba(8, 8, 8, 1) 100%);
  }
  
  .blob-over{
	  background: #080808;
background: linear-gradient(90deg,rgba(8, 8, 8, 1) 0%, rgba(213, 33, 79, 1) 35%, rgba(110, 90, 224, 1) 70%, rgba(8, 8, 8, 1) 100%);
	  z-index:0!important;
	  position:absolute;
	  left:20%;
	  top:-100px;
	   opacity:.7;
	   animation: changeShapeOver 16s linear infinite, rotateShape 24s linear infinite, moveShape 28s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite, scaleShapeOver 36s linear infinite,  alternate;
	   
  }
  .blob-project{
	  background: #161717;
background: linear-gradient(90deg,rgba(22, 23, 23, 1) 0%, rgba(207, 31, 75, 1) 30%, rgba(217, 85, 6, 1) 70%, rgba(18, 17, 17, 1) 100%);
  }
  
  
  @keyframes rotateShape{
	  0% {
		  transform:rotate(0deg);
	  }
	  100% {
		  transform: rotate(360deg);
	  }
	  
  }
  
  @keyframes moveShape{
	  0%,
	  100% {
		  transform: translate(10%, 0);
	  }
	  25% {
		   transform: translate(25%, 5vh);
	  }
	  
	  50% {
		   transform: translate(35%, 10vh);
	  }
	  75% {
	  transform: translate(20%, 20vh);
  }
  }
  
  
  
  @keyframes changeShape{
	  0%,
	  100% {
		  border-radius: 30% 70% 70% 30% / 30% 40% 70% 70%;
	  }
	  20% {
		    border-radius: 40% 65% 50% 50% / 40% 35% 35% 65%;
	  }
	  
	  40% {
		    border-radius: 35% 65% 65% 35% / 65% 50% 50% 25%;
	  }
	  60% {
	   border-radius: 40% 65% 50% 50% / 30% 30% 70% 75%;
  }
  80% {
	 border-radius: 40% 60% 40% 60% / 50% 50% 50% 60%;  
  }
  
  }
  
  
  @keyframes scaleShapeOver{
	  0% 
       100% {
		   width: 600px;
		 
        }
		20%{
			width: 350px;
		}
		
		40%{
			width:750px
		}
		
			60%{
				width:300px;
			}
			
        80% {
			
            width: 400px;
        }
	  
	  
  }
  
  
  
  @keyframes scaleShape{
	  0% 
       100% {
		   width: 600px;
		     height:600px;
        }
		20%{
			width: 350px;
			height: 550px;
		}
		
		40%{
			width:550px;
			height:250px;
		}
		
			60%{
				width:200px;
				height:500px;
			}
			
        80% {
			
            width: 400px;
			height:300px;
        }
	  
	  
  }
  
  
  
  
  
  
  
  
  
  
  @keyframes changeShapeOver{
	  0%,
	  100% {
		  border-radius: 30% 70% 70% 30% / 30% 40% 70% 70%;
	  }
	  20% {
		    border-radius: 40% 65% 50% 50% / 40% 35% 35% 65%;
	  }
	  
	  40% {
		    border-radius: 65% 35% 25% 85% / 45% 60% 30% 25%;
	  }
	  60% {
	   border-radius: 15% 65% 50% 50% / 30% 80% 30% 75%;
  }
  80% {
	 border-radius: 40% 60% 20% 25% / 50% 20% 20% 60%;  
  }
  
  }
  
  
  
  
  
  
  
  
  
  @media (max-width: 1100px) {
	  
	  .blob, .blob-over, .blob-werk, .blob-project{
		  width:400px;
	  }
	  
	  @keyframes moveShape{
	  0%,
	  100% {
		  transform: translate(20%, 10vh);
	  }
	  25% {
		   transform: translate(35%, 30vh);
	  }
	  
	  50% {
		   transform: translate(45%, 40vh);
	  }
	  75% {
	  transform: translate(25%, 50vh);
  }
  }
  
  
  
  @keyframes scaleShapeOver{
	  0% 
       100% {
		   width: 400px;
        }
		20%{
			width: 150px;
		}
		
		40%{
			width:450px
		}
		
			60%{
				width:200px;
			}
			
        80% {
			
            width: 300px;
        }
	  
	  
  }
  
  
  
  
	  
  }
  
  
  
  
  @media (max-width: 900px) {
  .blobinner{display:none;}
  
  .blob, .blob-over, .blob-werk, .blob-project{
		 display:none;
	  }
  
  }
  
  body.page-id-81 h1, body.page-id-44 h1, body.page-id-14 h1{margin-top:-90px!important}
  
  
  
  
  
  
  
  
  
  
  
 
  
  
  
 .container-fluid.centers.flex .column a:hover button .btn-content, .blok.over.redenen .left-block a:hover button .btn-content, .blok.over.portfolio .stack .card a:hover button .btn-content,
 .buttondiv a:hover button .btn-content{
	 color:#000!important
	
	 
 }
 
 .blok.over.redenen.diensten .left-block a:hover button .btn-content{
	 color:#fff!important;
 }

 
 .blok.over.redenen .left-block button, .blok.over.redenen.diensten .left-block button, .blok.over.portfolio .stack .card button{
	 margin-top:35px!important;
 }
 .blok.over.redenen.diensten .left-block a button .btn-content{
	 color:#000!important;
 }
 
 
 .container-fluid.centers.flex button, .blok.over.redenen .left-block button, .blok.over.redenen.diensten .left-block button, .blok.over.portfolio .stack .card button, .buttondiv button{
	 all:unset;
 }
.container-fluid.centers.flex button, .blok.over.redenen .left-block button, .blok.over.redenen.diensten .left-block button, .blok.over.portfolio .stack .card button, .buttondiv button  {
  --transition-duration: 400ms;
font-weight:400;
  font-size: 1.5rem!important;
  appearance: none;
  background: transparent;
  padding: .6em 1.8em;
  border-radius: 50px;
  border: 1px solid;
  color: white;
  position: relative;
  overflow: hidden;
  transition: color var(--transition-duration) ease;

  &:hover {
    color: #000!important;
  }
}


.blok.over.portfolio .stack .card button  {
	background:#000;
}




.blok.over.redenen.diensten .left-block button  {
	background:#fff;
	color: black!important;
	padding:0em 1.8em;
	
}




.btn-content {
  pointer-events: none;
  position: relative;
  z-index: 4!important;
  
  font-family: FS Industrie,  "neo_sans_stdlight", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	 color:#fff!important;
}
.container-fluid.centers.flex  .btn-content:hover, .blok.over.redenen .left-block .btn-content:hover{
	color:#000!important;
	z-index:7!important
}
.btn-cells {
  position: absolute;
  z-index: 0;
  inset: 0;
  
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* Make 5 columns for the spans */

  /* anchor positioning plays a big role here.
       right now, I'm just telling our element what
       anchor to, the real trick is lower down where
       we create the named anchor */
  &::before {
    content: "";
    position: absolute;
    position-anchor: --hovered-cell;
    left: calc(anchor(left) - 20px);
    right: calc(anchor(right) - 20px);
    top: calc(anchor(top) - 20px);
    bottom: calc(anchor(bottom) - 20px);
    /* pushes the element to the top */
    margin: 0 auto auto;

    width: 10px;
    aspect-ratio: 1;
    background: #51f0ed;
    background-image: linear-gradient(
      to right,
      #51f0ed,
      color-mix(in srgb, #51f0ed, white 50%)
    );
    border-radius: 100vw;

    /* The margin changes depending on whether we
           hover on the top or bottom row, and I want to
           delay that when we aren't hovering */
    transition: all var(--transition-duration) ease,
      margin 0ms var(--transition-duration);
    transition-behavior: allow-discrete;
    transform: scale(0);
  }

  /* if we're hovering on the 2nd row,
       we push it to the bottom, instead of the top */
  &:has(> :nth-child(n + 11):hover)::before {
    margin: auto auto 0;
  }

  /* when we do hover, I want the margin to instantly
       change, so I've removed the delay */
  &:hover::before {
    transform: scale(55);
    transition: transform var(--transition-duration) ease, margin 0ms 0ms;
  }

  & span {
/*     width: 100%;
    height: 100%;
    display: block; */
    position: relative;
  }

  &:not(:hover) span {
    /* we need the  allow-discrete here because
         we're going to be transitioning anchor-name
      
         I don't actually want to transition it, but when we
         aren't hovering, I want to delay the name from changing */
    transition: anchor-name 0ms var(--transition-duration);
    transition-behavior: allow-discrete;
  }
  /* when we hover, we need to the anchor-name to switch instantly */
  & span:hover {
    anchor-name: --hovered-cell;
    transition: anchor-name 0ms;
  }
}


body:has(#debug:checked) .btn-cells span {
  outline: 1px solid red;
}
 
 
 
 
 
 
 .container-fluid.centers.flex .column.twee .btn-cells::before{
background: #b991fa;
	 background-image: linear-gradient(to right, #b991fa, color-mix(in srgb, #b991fa, white 50%));

}

.container-fluid.centers.flex .column.drie .btn-cells::before, .blok.over.redenen .left-block .btn-cells::before, .blok.over.portfolio .stack .card .btn-cells::before, .buttondiv .btn-cells::before{
background: #fff;
	 background-image: linear-gradient(to right, #fff, color-mix(in srgb, #fff, white 50%));

}
 
 .blok.over.redenen.diensten .left-block .btn-cells::before{
background: #000;
	 background-image: linear-gradient(to right, #000, color-mix(in srgb, #000, white 50%));

}
 .blok.over.redenen.diensten .left-block button:hover{
	 border:1px solid #fff;
 }
 
 
 .blok.over.redenen.diensten .left-block button{
	 animation: fadeIn  forwards;
	 animation-timeline:view();
	 animation-range: entry 0% exit 5%;
 }
 
 @keyframes fadeIn {
  from { opacity: .5; scale:.8;}
  to { opacity: 1; scale:1;}
}
 
 .text.autoshow1{ height:300px;}
 
 .container-fluid.centers.flex{
	 width:100%;
	flex-direction:row;
	display:flex;
	flex-wrap:wrap;
	 margin-top:105px;
	 display:flex;
	 align-items:center;
	 justify-content:center;
	/* height:500px;*/
	 
 }
.blok.diensten.hoe .container-fluid.centers.flex .column{
	 width:30%;
	 max-height:650px;
	background:#101214!important;
	 color:#fff!important;
	 padding:30px;
	 margin-right:3%;
	 border-radius:1em;
	
 }
 
 @media only screen and (max-width: 1029px) {
	 
	.blok.diensten.hoe .container-fluid.centers.flex .column{
	 width:100%!important;
	 max-height:650px;
	margin-bottom:20px;
	
 }
 }
 
 
 
 .container-fluid.centers.flex .column h3{
	 color:#fff!important; font-size:1.0em!important;
	 margin-top:-5px!important;
 }
  .container-fluid.centers.flex .column p{
	  font-size:20px!important
  }
 
 
 
 .container-fluid.centers.flex.in-view .column.een{
	 
	  opacity: .5;
	transform: translateY(140px);
  animation-delay:.3s;
  animation: floatIn .8s cubic-bezier(0.22, 1, 0.36, 1);
	
	
	animation-timing-function:ease-in-out;
	animation-fill-mode: forwards;
	 
 }
 
 .container-fluid.centers.flex.in-view .column.twee{
	  opacity: .5;
  transform: translateY(180px);
   animation-delay: .8s;
  
	
 animation: floatIntwee 1.1s cubic-bezier(0.22, 1, 0.36, 1);
 animation-timing-function:ease-in-out;
 animation-fill-mode: forwards;
/*animation:fadeInUpB 3.7s cubic-bezier(0.92, 0, 1.0, 1.0)  forwards;
	animation-range: 100px 40%;
	 animation-timeline:view();
	transform: translateY(140%);
	opacity:.6;*/
	 
 }
 
 .container-fluid.centers.flex.in-view .column.drie{
	  opacity: .5;
  transform: translateY(250px);
   animation-delay: 1.2s;
   animation-timing-function:ease-in-out;
  animation: floatIndrie 1.4s cubic-bezier(0.22, 1, 0.36, 1);
	 animation-timing-function:ease-in-out;
	animation-fill-mode: forwards;
	 /*animation:fadeInUp 4.7s cubic-bezier(0.92, 0, 1.0, .5)  forwards;
	animation-range: 100px 40%;
	 animation-timeline:view();
	transform: translateY(160%);
	opacity:.6;*/
	 
	 
	 background:#101214!important;
	 margin-right:0%
 }
 
 .container-fluid.centers.flex .column .web1, .container-fluid.centers.flex .column .web2, .container-fluid.centers.flex .column .web3{
	 display:inline-block;
	 background:url(images/webshop.svg) no-repeat center;
	 background-size:65px 65px;
	 padding:50px;
	 
 }
 
 .container-fluid.centers.flex .column .web2{
	 background:url(images/webwinkel.svg) no-repeat center;
 }
 
 
 .container-fluid.centers.flex .column .web3{
	 background:url(images/webgraphics1.svg) no-repeat center;
 }
 
@keyframes floatInTest {
	 from
	 {
		 opacity:.5;
	    transform: translateY(400px);
	 }
}
 @keyframes floatIn {
	
  to {
    opacity: 1;
    transform: translateY(-180px);
  }
}
 
 @keyframes floatIntwee {
  to {
    opacity: 1;
    transform: translateY(-180px);
  }
}
 
 @keyframes floatIndrie {
  to {
    opacity: 1;
    transform: translateY(-180px);
  }
}
 
 
 
 
 
 @keyframes slideInOut {
  /* Animation for when the element enters the scrollport */
  from {
    transform:  translateY(100px); 
    opacity: 0;
  }
  to  { 
    transform: translateY(-180); 
    opacity: 1;
  }
  /* Animation for when the element exits the scrollport */
 }
 
 
 @media (max-width: 1320px) {
	 .container-fluid{
		 width:90%!important;
	 }
	.container-fluid.centers.flex .column .btn-content{
font-size:.7em!important
	}		
 }
 
 @media (max-width: 1020px) {
	
	.container-fluid.centers.flex .column{
width:100%!important
	}	


.container-fluid.centers.flex .column .btn-content{
font-size:.9em!important
	}	

	
 }
 @media (max-width: 429px) {
	
	


.container-fluid.centers.flex .column .btn-content{
font-size:.75em!important
	}	

	
 }
 
 .stack{
	 perspective: 1200px;
	 view-timeline-name: --cards;
	 view-timeline-axis: block;
 }

 
 
 
 .card{
	 position:sticky;
	 top: calc(var(--i) * 40px);
	 background:#fff;
	 width: min(1150px, 80%);
	 height:680px;
	 margin:0 auto;
	 border-radius:30px;
	 overflow:hidden;
	 animation: stack 1s linear both;
	 transform-style: preserve 3d;
	animation-timeline: --cards;
	animation-range: entry 0% exit 50%;
	
	
	flex-direction:row;
	display:flex;
	flex-wrap:wrap;
	 
 }
 
 .card .card-column{
	 width:50%;
display:flex;
	
	justify-content:center;
	float:left;
	display:inline;
	
	box-sizing:border-box;
	padding-left:20px;
	padding-right:20px;
	height:inherit;
	padding-top:20px;
	padding-bottom:20px;
 }
 .card .card-column.b{
	 padding:0;
 }
 .card .card-column.b img, .card .card-column.b.frisia img{
	 object-fit:cover;
	 width:100%;
	 height:100%;
	 background:#fde5fe
 }
 .card .card-column.b.frisia img{
	 background:#dcd9fb;
 }
 
 .stack{color:#000!important}
.stack .card .card-column.a{
	 font-size: clamp(12px, 2vw, 24px)!important;
	 color:var(--black)!important;
	 color:#000!important;
	
 }
 
 
 
 #card1{
	--i: 1; 
	background:#f6f6f6;
 }
 
 #card2{
	--i: 2; 
	background:#f6f6f6;
 }
 
 #card3{
	--i: 3; 
	background:#f6f6f6;
 }
 
 
 #card4{
	--i: 4; 
 }
 
 
 #card5{
	--i: 5; 
 }
 
 
 
 @keyframes stack{
	 0%{
		 transform: translateY(0) translateZ(0) rotateX(0) scale(1);
	 }
	 
	 35%{
		  transform: translateY(100px) translateZ(-200px) rotateX(8deg) scale(.92);
	 }
	 
	 70%{
		 transform: translateY(20px) translateZ(-120px) rotateX(2deg) scale(.95);
	 }
	 
	 100%{
		  transform: translateY(0) translateZ(0) rotateX(0) scale(1);
	 }
	 
 }
 
 
 
 
 
 
 
 





.container-fluid.centers span {
  color: hsl(0 0% 100% / 0.4);
  background-clip: text;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-image: linear-gradient(90deg, white, white);
  animation: scroll-reveal linear forwards;
  transition: background-size 0.4s ease-in-out, opacity 0.5s ease-in-out;
  animation-timeline: view(y);
 
}

.container-fluid.centers h2 span {
  animation-range-start: cover 20vh;
  animation-range-end: cover 30vh;
}

.container-fluid.centers p span {
  animation-range-start: cover 10.5vh;
  animation-range-end: cover 74.5vh;
}

@keyframes scroll-reveal {
  to {
    background-size: 100% 100%;
	opacity:1;
  }
}





.blok.over.redenen.diensten .left-block  span.cc1{
  filter: blur(15px);
  background-clip: text;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-image: linear-gradient(90deg, white, white);
  animation: blur-reveal linear forwards;
  transition: background-size 0.4s ease-in-out, opacity 0.5s ease-in-out;
  animation-timeline: view(y);
 
}

.blok.over.redenen.diensten .left-block h2 span.cc1 {
  animation-range-start: cover 2vh;
  animation-range-end: cover 20vh;
}

.blok.over.redenen.diensten .left-block p span.cc1 {
  animation-range-start: cover 5.5vh;
  animation-range-end: cover 34.5vh;
}

@keyframes blur-reveal {
  to {
    background-size: 100% 100%;
	filter:blur(0px);
  }
}










@media only screen and (max-width: 1479px) {
	.blok.over{
	margin-top:-40px;
		
	}
	
	
	
	
	.blok.gradient{margin-top:-50px;
	
	padding-bottom:15%;
	
	
}
	
	
}

@media only screen and (max-width: 1079px) {
	.blok.over{
	margin-top:-40px;
		
	}
}



.container-fluid.centers{
	width:80%!important;
	text-align:center!important
}
.gradient {
  background:url(images/laptop.webp)no-repeat, linear-gradient(135deg, #000000 0%, #a93d96 100%);
  background-position: bottom 0px center;
background-blend-mode: overlay;
 background-size:cover;
}


.content-area.no-sidebar {
    padding-left: 0px;
    padding-right: 0px;
}

@keyframes fade-out{
	to { opacity:0;}
}








@media (max-width: 1824px) {
	.blok h1{
	
	margin-top:20%
}
	
}




@supports (animation-timeline: scroll(root)) {
	.blok h1, .blok .svglogo, .blok .buttondiv, .blok-over-mij .container-fluid, .blok-diensten .container-fluid{
		animation-timeline: scroll(root);
		animation-range: 0vh 85vh;
		animation-fill-mode: both;
		animation-timing-function: linear;
		animation-name: hero_title_movesvg;
	}
}/*
@supports (animation-timeline: scroll(root)) {
	.container.groot *:where(p) {
		animation-timeline: scroll(root);
		animation-range: 0vh 75vh;
		animation-fill-mode: both;
		animation-timing-function: linear;
		animation-name: hero_text_move;
	}
}

*/

@supports (animation-timeline: scroll(root)) {
	 .blok-over-mij .container-fluid{
		animation-timeline: scroll(root);
		animation-range: 0vh 85vh;
		animation-fill-mode: both;
		animation-timing-function: linear;
		animation-name: hero_title_movesvg;
	}
}
@keyframes hero_title_movesvg {
	0% {
		color: #FFF;
		transform: translate3d( 0, 0, 0 );
	}
	50% {
		color: #FFF;
	}
	100% {
		color: #DF1279;
		transform: translate3d( 0, 110vh, 0 );
	}
}






@keyframes hero_title_move {
	0% {
		color: #FFF;
		transform: translate3d( 0, 0, 0 );
	}
	50% {
		color: #FFF;
	}
	100% {
		color: #DF1279;
		transform: translate3d( 0, 50vh, 0 );
	}
}

@keyframes hero_title_after {
	0% {
		opacity: 0;
		transform: translate3d( 0, 0, 0 ) scale( 1 );
		content: "I'm getting pink!";
	}
	50% {
		opacity: 1;
	}
	90% {
		transform: translate3d( 1em, 0, 0 ) scale( 1 );
	}
	100% {
		content: "I'm pink now!";
		transform: translate3d( 1em, 0, 0 ) scale( 1 );
	}
}

@keyframes hero_text_move {
	0% {
		color: rgba( 255, 255, 255, 0.5 );
		transform: translate3d( 0, 0, 0 );
	}
	100% {
		color: rgba( 255, 255, 255, 1 );
		transform: translate3d( 0, calc( 50vh + 1em ), 0 );
	}
}

@keyframes content_appear {
	0% {
		transform: translate3d( 0, 15vh, 0 );
	}
	100% {
		transform: translate3d( 0, 0, 0 );
	}
}




.blok.over.redenen.diensten .left-block .cijfers{
z-index:9!important;
position:absolute;
top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
display:inline-block;

width:auto;
}


.cijfers svg{z-index:99!important;
height:125px!important;

width:auto;
	
}


/*animation logo*/
@keyframes move-all {
    100% {
		
        stroke-dashoffset: 0;
    }
}

@keyframes stroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes move-eerste {
	0%{
		stroke-dashoffset 100;
	}
	75%{
		fill:transparent;
	}
    100% {
		fill:#fff;
        stroke-dashoffset: 0;
    }
}

@keyframes move-tweede {
	0%{
		stroke-dashoffset: 359;
	}
	75% {
		fill:transparent;
	}
    100% {
		fill:#fff;
        stroke-dashoffset: 0;
    }
}




.svglogo svg.logodraw .eerste{
	fill:transparent;
	animation: move-eerste 1.5s ease-in-out 1 forwards;
        animation-delay: 1s;
       stroke-dasharray: 100px;
    stroke-dashoffset: 100px;
	
}

.svglogo svg.logodraw .tweede{
	fill:transparent;
	animation: move-tweede 3s ease-in-out 1 forwards;
        animation-delay: 3s;
       stroke-dasharray: 359px;
    stroke-dashoffset: 359px;
	
}
/*
.cijfers svg.eerste{
	fill:#fff;
	stroke:#8aaf26;
	stroke-miterlimit:10;
	stroke-width:12px
}
*/

/*.blok.over.redenen.diensten .right-block.in-view .cijfers svg .cirkel_1{
fill:none;
	stroke:#fff;
	stroke-miterlimit:10;
	stroke-width:1px
}*/

 .geschiedenis .left-block.in-view .cijfers svg{
fill:none;
	stroke:#fff;
	stroke-miterlimit:10;
	stroke-width:4px
}
.blok.over.redenen.diensten .right-block.in-view .cijfers svg {
	fill:none;
	stroke:#fff;
	stroke-miterlimit:10;
	stroke-width:3px
}


.bellen span, .email span, .locatie span{
	font-weight:600;
}
.bellen, .email, .locatie{
	
	display:inline-block;
	font-size:1.0em;
	 /* background: url(images/phone1.svg) no-repeat left 0px center!important;
	  background-size:64px 64px!important;*/
	background-position:left 0px bottom 15px!important;
	padding-top:5px ;
	padding-bottom:5px;
	padding-left:70px;
	margin-right:10%;
	
	position:relative
	
	
}
/*
.email{
	background: url(images/email.svg) no-repeat left 0px center!important;
	 background-size:64px 64px!important;
	 background-position:left 0px bottom 15px!important;
}

.locatie{
	background: url(images/location.svg) no-repeat left 0px center!important;
	 background-size:64px 64px!important;
	 background-position:left 0px bottom 15px!important;
}

*/

.contactright .icoon{
	display:inline-block;
	width:64px;
	height:64px;
position:absolute;
	left:-5px;
	top:16px;
}
.contactright .icoon svg{
	
}
.contactright .bellen.in-view .icoon svg, .contactright .email.in-view .icoon svg , .contactright .locatie.in-view .icoon svg{
	fill:none;
	stroke:#000;
	stroke-miterlimit:10;
	stroke-width:3px
}

.contactright .bellen.in-view .icoon svg .cirkel, .contactright .email.in-view .icoon svg .cirkel, .contactright .locatie.in-view .icoon svg .cirkel{
	animation: move-all .7s linear forwards;

    stroke-dasharray: 454px;
    stroke-dashoffset: 454px;
   
     animation-fill-mode: forwards; 
}

.contactright .email.in-view .icoon svg .cirkel{
	 animation-delay:1.2s;
}

 .contactright .locatie.in-view .icoon svg .cirkel{
	 animation-delay:2.4s;
}



.contactright .bellen.in-view .icoon svg .phone{
	animation: move-all .7s linear forwards;

    stroke-dasharray: 264px;
    stroke-dashoffset: 264px;
   animation-delay:.5s;
     animation-fill-mode: forwards; 
}

.contactright .email.in-view .icoon svg .envelop{
	animation: move-all .7s linear forwards;

    stroke-dasharray: 294px;
    stroke-dashoffset: 294px;
   animation-delay:1.7s;
     animation-fill-mode: forwards; 
}

.contactright .email.in-view .icoon svg .sluit{
	animation: move-all .3s linear forwards;

    stroke-dasharray: 264px;
    stroke-dashoffset: 264px;
   animation-delay:2.1s;
     animation-fill-mode: forwards; 
}

.contactright .locatie.in-view .icoon svg .pin{
	animation: move-all .6s linear forwards;

    stroke-dasharray: 254px;
    stroke-dashoffset: 254px;
   animation-delay:2.6s;
     animation-fill-mode: forwards; 
}


.contactright .locatie.in-view .icoon svg .cirkel-small{
	animation: move-all .3s linear forwards;

    stroke-dasharray: 94px;
    stroke-dashoffset: 94px;
   animation-delay:2.8s;
     animation-fill-mode: forwards; 
}


/*
.blok.over.redenen.diensten .right-block.in-view .cijfers svg.eerste .cirkel_1{

animation: move-all .7s linear forwards;

    stroke-dasharray: 154px;
    stroke-dashoffset: 154px;
   
     animation-fill-mode: forwards; 
	 
}


.blok.over.redenen.diensten .right-block.in-view .cijfers svg.eerste .een{

animation: move-all .8s linear forwards;

    stroke-dasharray: 45px;
    stroke-dashoffset: 45px;
    animation-delay: .8s;
     animation-fill-mode: forwards; 
	 
}




.blok.over.redenen.diensten .right-block.in-view .cijfers svg.tweede .cirkel_1{
animation: move-all .9s linear forwards;
	

    stroke-dasharray: 154px;
    stroke-dashoffset: 154px;
   
     animation-fill-mode: forwards; 
	 
}


.blok.over.redenen.diensten .right-block.in-view .cijfers svg.tweede .een{

animation: move-all .8s linear forwards;
	
    stroke-dasharray: 66px;
    stroke-dashoffset: 66px;
    animation-delay: .7s;
     animation-fill-mode: forwards; 
	 
}





.blok.over.redenen.diensten .right-block.in-view .cijfers  svg.derde .cirkel_1{

animation: move-all .8s linear forwards;

    stroke-dasharray: 154px;
    stroke-dashoffset: 154px;
   
     animation-fill-mode: forwards; 
	 
}


.blok.over.redenen.diensten .right-block.in-view .cijfers svg.derde .een{

animation: move-all .8s linear forwards;

    stroke-dasharray: 71px;
    stroke-dashoffset: 71px;
    animation-delay: .7s;
     animation-fill-mode: forwards; 
	 
}*/

/*diensten svg*/


.blok.over.redenen.diensten .right-block.in-view .cijfers svg.webshop .monitor{

animation: move-all 1.2s linear forwards;

    stroke-dasharray: 584px;
    stroke-dashoffset: 584px;
    animation-delay: .7s;
     animation-fill-mode: forwards; 
	 
}



.blok.over.redenen.diensten .right-block.in-view .cijfers svg.webshop .product{

animation: move-all .8s linear forwards;

    stroke-dasharray: 302px;
    stroke-dashoffset: 302px;
    animation-delay: 1.7s;
     animation-fill-mode: forwards; 
	 
}



.blok.over.redenen.diensten .right-block.in-view .cijfers svg.webshop .text{

animation: move-all .6s linear forwards;

    stroke-dasharray: 144px;
    stroke-dashoffset: 144px;
    animation-delay: 2.1s;
     animation-fill-mode: forwards; 
	 
}







.blok.over.redenen.diensten .right-block.in-view .cijfers svg.webdesign .monitor{

animation: move-all 1.3s linear forwards;

    stroke-dasharray: 650px;
    stroke-dashoffset: 650px;
    animation-delay: 1.0s;
     animation-fill-mode: forwards; 
	 
}



.blok.over.redenen.diensten .right-block.in-view .cijfers svg.webdesign .header{

animation: move-all .5s linear forwards;

    stroke-dasharray: 135px;
    stroke-dashoffset: 135px;
    animation-delay: 2.2s;
     animation-fill-mode: forwards; 
	 
}



.blok.over.redenen.diensten .right-block.in-view .cijfers svg.webdesign .text{

animation: move-all .5s linear forwards;

    stroke-dasharray: 129px;
    stroke-dashoffset: 129px;
    animation-delay: 2.6s;
     animation-fill-mode: forwards; 
	 
}



.blok.over.redenen.diensten .right-block.in-view .cijfers svg.webdesign .code{

animation: move-all .5s linear forwards;

    stroke-dasharray: 75px;
    stroke-dashoffset: 75px;
    animation-delay: 3s;
     animation-fill-mode: forwards; 
	 
}








.blok.over.redenen.diensten .right-block.in-view .cijfers svg.graphics .monitor{

animation: move-all 1.2s linear forwards;

    stroke-dasharray: 525px;
    stroke-dashoffset: 525px;
    animation-delay: 1.7s;
     animation-fill-mode: forwards; 
	 
}



.blok.over.redenen.diensten .right-block.in-view .cijfers svg.graphics .image{

animation: move-all .8s linear forwards;

    stroke-dasharray: 198px;
    stroke-dashoffset: 198px;
    animation-delay: 2.8s;
     animation-fill-mode: forwards; 
	 
}



.blok.over.redenen.diensten .right-block.in-view .cijfers svg.graphics .kwast{

animation: move-all .9s linear forwards;

    stroke-dasharray: 207px;
    stroke-dashoffset: 207px;
    animation-delay: 3.4s;
     animation-fill-mode: forwards; 
	 
}










/*per-1*/
.geschiedenis .left-block.in-view .cijfers svg.per-1 .twee-1 {
	animation: move-all .5s linear forwards;

    stroke-dasharray: 66px;
    stroke-dashoffset: 66px;
    animation-delay: .3s;
     animation-fill-mode: forwards; 
}

.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-1{
	animation: move-all .5s linear forwards;

    stroke-dasharray: 80px;
    stroke-dashoffset: 80px;
    animation-delay: .6s;
     animation-fill-mode: forwards; 
}
.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-2{
	animation: move-all .5s linear forwards;

    stroke-dasharray: 80px;
    stroke-dashoffset: 80px;
    animation-delay: .9s;
     animation-fill-mode: forwards; 
}
.geschiedenis .left-block.in-view .cijfers svg.per-1 .een{
	animation: move-all .5s linear forwards;

    stroke-dasharray: 45px;
    stroke-dashoffset: 45px;
    animation-delay: 1.2s;
     animation-fill-mode: forwards; 
}



.geschiedenis .left-block.in-view .cijfers svg.per-1 .twee-2{
	animation: move-all .5s linear forwards;

    stroke-dasharray: 66px;
    stroke-dashoffset: 66px;
    animation-delay: 1.5s;
     animation-fill-mode: forwards; 
}
.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-3{
	animation: move-all .5s linear forwards;

    stroke-dasharray: 80px;
    stroke-dashoffset: 80px;
    animation-delay: 1.8s;
     animation-fill-mode: forwards; 
}




.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-4{
	animation: move-all .5s linear forwards;

    stroke-dasharray: 80px;
    stroke-dashoffset: 80px;
    animation-delay: 2.1s;
     animation-fill-mode: forwards; 
}






.geschiedenis .left-block.in-view .cijfers svg.per-1 .twee-3{
	animation: move-all .5s linear forwards;

    stroke-dasharray: 66px;
    stroke-dashoffset: 66px;
    animation-delay: 2.4s;
     animation-fill-mode: forwards; 
}







/*per-2*/
.geschiedenis .left-block.in-view .cijfers svg.per-1 .twee-4 {
	animation: move-all .5s linear forwards;

    stroke-dasharray: 66px;
    stroke-dashoffset: 66px;
    animation-delay: 1s;
     animation-fill-mode: forwards; 
}

.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-5{
	animation: move-all .5s linear forwards;

    stroke-dasharray: 80px;
    stroke-dashoffset: 80px;
    animation-delay: 1.3s;
     animation-fill-mode: forwards; 
}
.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-6{
	animation: move-all .5s linear forwards;

    stroke-dasharray: 80px;
    stroke-dashoffset: 80px;
    animation-delay: 1.6s;
     animation-fill-mode: forwards; 
}
.geschiedenis .left-block.in-view .cijfers svg.per-1 .vier{
	animation: move-all .5s linear forwards;

    stroke-dasharray: 79px;
    stroke-dashoffset: 79px;
    animation-delay: 1.9s;
     animation-fill-mode: forwards; 
}



.geschiedenis .left-block.in-view .cijfers svg.per-1 .twee-5{
	animation: move-all .5s linear forwards;

    stroke-dasharray: 66px;
    stroke-dashoffset: 66px;
    animation-delay: 2.2s;
     animation-fill-mode: forwards; 
}
.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-7{
	animation: move-all .5s linear forwards;

    stroke-dasharray: 80px;
    stroke-dashoffset: 80px;
    animation-delay: 2.5s;
     animation-fill-mode: forwards; 
}




.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-8{
	animation: move-all .5s linear forwards;

    stroke-dasharray: 80px;
    stroke-dashoffset: 80px;
    animation-delay: 2.8s;
     animation-fill-mode: forwards; 
}






.geschiedenis .left-block.in-view .cijfers svg.per-1 .vijf{
	animation: move-all .5s linear forwards;

    stroke-dasharray: 76px;
    stroke-dashoffset: 76px;
    animation-delay: 3.1s;
     animation-fill-mode: forwards; 
}


/*per-3*/
.geschiedenis .left-block.in-view .cijfers svg.per-1 .twee-6{
	animation: move-all .5s linear forwards;
	 animation-delay: 1s;
	 stroke-dasharray: 66px;
    stroke-dashoffset: 66px;
}



.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-9{
	animation: move-all .5s linear forwards;
	 animation-delay: 1.3s;
	 stroke-dasharray: 79px;
    stroke-dashoffset: 79px;
}


.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-10{
	animation: move-all .5s linear forwards;
	 animation-delay: 1.6s;
	 stroke-dasharray: 79px;
    stroke-dashoffset: 79px;
}

.geschiedenis .left-block.in-view .cijfers svg.per-1 .acht-1{
	animation: move-all .3s linear forwards;
	 animation-delay: 1.9s;
	 stroke-dasharray: 47px;
    stroke-dashoffset: 47px;
}
.geschiedenis .left-block.in-view .cijfers svg.per-1 .acht-2{
	animation: move-all .3s linear forwards;
	 animation-delay: 2s;
	 stroke-dasharray: 48px;
    stroke-dashoffset: 48px;
}


.geschiedenis .left-block.in-view .cijfers svg.per-1 .twee-7{
	animation: move-all .5s linear forwards;
	 animation-delay: 2.2s;
	 stroke-dasharray: 66px;
    stroke-dashoffset: 66px;
}


.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-11{
	animation: move-all .5s linear forwards;
	 animation-delay: 2.5s;
	 stroke-dasharray: 79px;
    stroke-dashoffset: 79px;
}


.geschiedenis .left-block.in-view .cijfers svg.per-1 .een-2{
	animation: move-all .5s linear forwards;
	 animation-delay: 2.8s;
	 stroke-dasharray: 45px;
    stroke-dashoffset: 45px;
}



.geschiedenis .left-block.in-view .cijfers svg.per-1 .drie{
	animation: move-all .5s linear forwards;
	 animation-delay: 3s;
	 stroke-dasharray: 71px;
    stroke-dashoffset: 71px;
}





/*per-4*/
.geschiedenis .left-block.in-view .cijfers svg.per-1 .twee-8{
	animation: move-all .5s linear forwards;
	 animation-delay: 1s;
	 stroke-dasharray: 66px;
    stroke-dashoffset: 66px;
}



.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-12{
	animation: move-all .5s linear forwards;
	 animation-delay: 1.3s;
	 stroke-dasharray: 79px;
    stroke-dashoffset: 79px;
}


.geschiedenis .left-block.in-view .cijfers svg.per-1 .een-3{
	animation: move-all .5s linear forwards;
	 animation-delay: 1.6s;
	 stroke-dasharray: 45px;
    stroke-dashoffset: 45px;
}

.geschiedenis .left-block.in-view .cijfers svg.per-1 .drie-2{
	animation: move-all .5s linear forwards;
	 animation-delay: 1.9s;
	 stroke-dasharray: 72px;
    stroke-dashoffset: 72px;
}



.geschiedenis .left-block.in-view .cijfers svg.per-1 .twee-9{
	animation: move-all .5s linear forwards;
	 animation-delay: 2.1s;
	 stroke-dasharray: 66px;
    stroke-dashoffset: 66px;
}


.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-13{
	animation: move-all .5s linear forwards;
	 animation-delay: 2.4s;
	 stroke-dasharray: 79px;
    stroke-dashoffset: 79px;
}


.geschiedenis .left-block.in-view .cijfers svg.per-1 .een-4{
	animation: move-all .5s linear forwards;
	 animation-delay: 2.7s;
	 stroke-dasharray: 45px;
    stroke-dashoffset: 45px;
}



.geschiedenis .left-block.in-view .cijfers svg.per-1 .vier-2{
	animation: move-all .5s linear forwards;
	 animation-delay: 3s;
	 stroke-dasharray: 79px;
    stroke-dashoffset: 79px;
}





/*per-5*/
.geschiedenis .left-block.in-view .cijfers svg.per-1 .twee-10{
	animation: move-all .5s linear forwards;
	 animation-delay: 1s;
	 stroke-dasharray: 66px;
    stroke-dashoffset: 66px;
}



.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-14{
	animation: move-all .5s linear forwards;
	 animation-delay: 1.3s;
	 stroke-dasharray: 79px;
    stroke-dashoffset: 79px;
}


.geschiedenis .left-block.in-view .cijfers svg.per-1 .een-5{
	animation: move-all .5s linear forwards;
	 animation-delay: 1.6s;
	 stroke-dasharray: 45px;
    stroke-dashoffset: 45px;
}

.geschiedenis .left-block.in-view .cijfers svg.per-1 .vijf-2{
	animation: move-all .5s linear forwards;
	 animation-delay: 1.9s;
	 stroke-dasharray: 75px;
    stroke-dashoffset: 75px;
}



.geschiedenis .left-block.in-view .cijfers svg.per-1 .twee-11{
	animation: move-all .5s linear forwards;
	 animation-delay: 2.1s;
	 stroke-dasharray: 66px;
    stroke-dashoffset: 66px;
}


.geschiedenis .left-block.in-view .cijfers svg.per-1 .nul-15{
	animation: move-all .5s linear forwards;
	 animation-delay: 2.4s;
	 stroke-dasharray: 79px;
    stroke-dashoffset: 79px;
}


.geschiedenis .left-block.in-view .cijfers svg.per-1 .een-6{
	animation: move-all .5s linear forwards;
	 animation-delay: 2.7s;
	 stroke-dasharray: 45px;
    stroke-dashoffset: 45px;
}



.geschiedenis .left-block.in-view .cijfers svg.per-1 .zeven{
	animation: move-all .5s linear forwards;
	 animation-delay: 3s;
	 stroke-dasharray: 52px;
    stroke-dashoffset: 52px;
}




.autoshow{
	animation: text-appear linear forwards;
	animation-timeline: view();
	
	animation-range: entry 10% cover 40%;
}


@keyframes text-appear{
	from{
		opacity:0;
		
		transform: translateY(100px);
	}
	
	to {
		opacity:1;
		transform: translateY(0);
		
	}
}

.autoshow1{
	animation: text-appear1 both;
	animation-timeline: view();
	/*animation-range: entry 20% cover 100%;*/
	
}
.autoshow2{
	opacity:.4;
	transform: scale(.7);
	animation: text-appear2 linear forwards;
	animation-timeline: view();
	animation-range: entry 10% exit 40%;
	
}

@keyframes text-appear1{
	from{
		opacity:.5;
		transform: translateY(100px);
		transform: scale(0.8);
	}
	
	to {
		opacity:1;
		transform: translateY(0);
		transform: scale(1);
	}
}


@keyframes text-appear2{
	
	
	to {
		opacity:1;
		transform: scale(1);
	}
}


/*
.right-block summary:nth-child(1){
	animation-range: entry 10% cover 20%;
}

.right-block summary:nth-child(2){
	animation-range: entry 20% cover 30%;
}

.right-block summary:nth-child(3){
	animation-range: entry 30% cover 40%;
}

.right-block summary:nth-child(4){
	animation-range: entry 40% cover 50%;
}

.right-block summary:nth-child(5){
	animation-range: entry 50% cover 60%;
}

.right-block summary:nth-child(6){
	animation-range: entry 60% cover 70%;
}

.right-block summary:nth-child(7){
	animation-range: entry 70% cover 80%;
}

.right-block summary:nth-child(8){
	animation-range: entry 80% cover 90%;
}

.right-block summary:nth-child(9){
	animation-range: entry 90% cover 100%;
}
*/











/*forms*/
.contactright .wpforms-container.wpforms-container-full#wpforms-286{
	background:rgb(255,255,255, .1)!important;
	padding:10px 10px 30px 10px;
	border-radius:30px!important;
	border: 1px solid rgb(255,255,255, .4)!important
}
.contactright .wpforms-field-container input[type=number].wpforms-field-medium, .contactleft .wpforms-field-container input[type=numberr].wpforms-field-medium{
	 background-color: #fff;
    box-sizing: border-box;
   border-radius:30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 42px;
	margin-bottom:10px;
    width: 100%;
    line-height: 1.3;
}
#wpforms-304 .wpforms-field-number label{ display:block!important}
.contactright .wpforms-field-container .wpforms-field, #wpforms-304 .wpforms-field-container .wpforms-field{
	margin-bottom:-50px!important;
}





 .contactright button.wpforms-submit, #wpforms-304 button.wpforms-submit{
	all:unset!important;
	margin-top:-90px!important;
	border:none!important;
	background:#fff!important;
	display:inline-block!important;
	color:#000!important;
	border-radius:35px!important;
	text-transform:none!important;
	font-size:.70em!important;
	font-weight:500!important;
	padding:11px 18px!important;
	cursor:pointer!important;
	min-width:250px!important;
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	overflow:hidden;
}




#wpforms-304 button.wpforms-submit{
	background:#000!important;
	color:#fff!important;
}



.googlemap{width:100%;
background:#000!important;
z-index:40;
}
.googlemap{}
 
.leaflet-container{
	
	opacity:.7!important;
	transition:all .5s ease;
	
}

.leaflet-container:hover{
	opacity:1!important
}



.contactright .wpforms-field-container, #wpforms-304 .wpforms-field-container{
margin-bottom:20px!important;}

.contactright .wpforms-field-checkbox fieldset, #wpforms-304 .wpforms-field-checkbox fieldset{
	margin-top:124px;
height:32px;
	margin-bottom:-10px;
}



.contactright .wpforms-submit-container, .contactleft .wpforms-submit-container{
	height:40px;

}

.wpforms-field-number label.wpforms-field-label{
	display:none;
}

.contactright .wpforms-field-checkbox, .contactleft .wpforms-submit-container{
	margin-top:30px;
	position:relative;
}

.contactright .wpforms-field-checkbox fieldset, .contactright .wpforms-field-checkbox fieldset a,
.contactleft .wpforms-field-checkbox fieldset, .contactright .wpforms-field-checkbox fieldset a{
	width:100%!important; 
	background:transparent;
	color:#fff!important

}
.contactleft .wpforms-field-checkbox fieldset, .contactright .wpforms-field-checkbox fieldset a{
	color:#000!important;
}
.contactright .wpforms-field-checkbox input[type=checkbox],
.contactleft .wpforms-field-checkbox input[type=checkbox]{
	display:block!important;
	width:20px;float:left;
	position:absolute;
	left:0px;
	top:53px;
}



.contactright .wpforms-field-description, .contactleft .wpforms-field-description{
	float:left!important;
	display:inline-block!important;
	width:400px!important;
	bottom:102px;
	position:absolute;
	color:#fff!important;
	left:30px;
}
.contactright .wpforms-field-description a{
	color:#fff!important
}
.contactleft .wpforms-field-description{
	color:#000!important
}




.contactright .wpforms-error{
	color:#fff!important
}
.contactleft .wpforms-error{
	color:#000!important
}

.contactright div.wpforms-confirmation-container-full {
    background: #fff!important;
    color: #164f02!important;
    border: none !important;
}
.contactright .wpforms-container label.wpforms-field-label {display:block;
color:#fff!important
}

 
 .wpforms-required-label{
	 color:red!important
 }
 
 
 .wpforms-required-label{
	 color:orange!important;
 }
 



  
.wpforms-container ::placeholder {
   color: #6e7323!important;
   opacity:1
}





.contactright .wpforms-container label.wpforms-field-label, .contactleft .wpforms-container label.wpforms-field-label{color:#fff!important;
display:inline-block!important;
width:auto!important
}



.contactleft .wpforms-container label.wpforms-field-label{
	color:#000!important
}








.color2.contact{
	width:100%;
	flex-direction:row;
	display:flex;
	flex-wrap:wrap;
}


.contactleft{
	width:50%;
display:flex;
	position:relative;
	float:left;
	display:inline;
	background:#fff;
	box-sizing:border-box;
	padding-left:10%;
	padding-right:2%;
	height:inherit;
	padding-top:58px;
	padding-bottom:50px;
	color:#000!important;
}
.contactright{
	width:50%;
	float:left;
	display:flex;
	display:inline;
	position:relative;
	box-sizing:border-box;
	background:#fff;
	z-index:400!important;
	background: var(--black);
	/*background: #659325 url(images/background-contact.png) no-repeat left 0px center!important;*/
	background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
	padding-right:10%;
	padding-left:10%;
	height:inherit;
	padding-top:58px;
	background:#000!important
}

.contactleft p, body.page-id-14 p{
	
font-size:clamp(12px, 4vw, 24px) !important;

}

body.page-id-14 .contactleft{
	background: #fff;
	padding-right:10%;
	padding-left:10%;
	z-index:300!important
	
}

body.page-id-14 .contactright{
	background:#fff!important;
	padding-left:10%;
	padding-right:2%;
	color:#000!important;
	z-index:400!important;
}




 .form .wpforms-container {
    position: relative;
}
 .form .floating label:nth-of-type(2){
    display: none;
}

form#wpforms-form-286 .floating input.wpforms-field-medium, form#wpforms-form-286 .floating textarea.wpforms-field-medium ,
form#wpforms-form-304 .floating input.wpforms-field-medium, form#wpforms-form-304 .floating textarea.wpforms-field-medium
{
	background:transparent!important;
	border:1px solid #fff!important;
	margin-bottom:-12px!important;
}
.wpforms-field-number input.wpforms-field-medium, .wpforms-field-number input.wpforms-field-medium:hover, .wpforms-field-number input.wpforms-field-medium:focus{
	overflow-y:hidden!important
}



.floating input, .floating input.wpforms-valid {
	background:transparent!important;
	border:1px solid #fff!important;
	color:#000!important;
    position: relative;
	 transition: all .3s ease-in-out;
    min-height: 42px;
      padding: 15px 10px 10px 15px !important;
}
.floating textarea {
    position: relative;
   
   

transition: all .3s ease-in-out;
}
.floating input:hover, .floating textarea:hover{
	border:1px solid #fff!important;
}




.floating input + label{
    position: relative !important;
  /*  top: -60px !important;*/
  top:-40px!important;
    padding: 0px 5px !important;
    opacity: .5;
    font-size: 19px !important;
	letter-spacing:0.04em;
   transition: all .3s var(--ease-in-out) 0s;
	font-weight:500;
	width:auto!important;
	left:1px;
	height:20px;
	
}
#wpforms-304 .wpforms-field-number.floating input + label{
	top:-32px!important
}

.floating textarea + label{
    position: relative !important;
	
    top: -57px !important;
	left:1px;
    padding: 0px 5px !important;
    opacity: .5;
    font-size: 19px !important;
	letter-spacing:0.04em;
    transition: all .3s var(--ease-in-out) 0s;
	height:1px;
}






.floating input:focus + label, .floating input:not(:placeholder-shown) + label
 {
    top: -60px !important;
    opacity: 1;
	background:transparent!important;
	font-size:16px!important;
	
}
#wpforms-304 .wpforms-field-number.floating  input:focus + label, #wpforms-304 .wpforms-field-number.floating input:not(:placeholder-shown) + label{
	top:-56px!important
}


.floating textarea:focus + label, .floating textarea:not(:placeholder-shown) + label
{
    top: -77px !important;
    opacity: 1;
	background:transparent;
	font-size:16px!important;
}


.floating.wpforms-has-error, .accordion-content .wpforms-has-error{
	position:relative;
}


.floating.wpforms-has-error em.wpforms-error{
	display:inline-block;
	background:none;
	padding: 0px 5px;
    position: relative;
    top: -51px;
    left: 5%;
	color:red!important;
	height:20px;
}


li.choice-1 label.wpforms-field-label-inline{
	display:none!important
}


.wpforms-field-textarea.floating.wpforms-has-error em.wpforms-error {
    position: relative;
    top: -18px;
    right: 10px;
}
.floating.wpforms-has-error label.wpforms-field-label, .accordion-content .wpforms-has-error label.wpforms-field-label {
    position:absolute;
	top:18px;
	left:4px;
	font-size:19px;
}

.floating ::placeholder, .accordion-content .wpforms-field ::placeholder { /* Chrome and Safari */
   color: transparent !important;
}
.contactright .wpforms-field-container .floating.wpforms-has-error input{
	margin-bottom:50px!important
}

.contactleft .wpforms-field-container .floating.wpforms-has-error input{
	margin-bottom:50px!important
}





.contactright .wpforms-field-container input, .contactright .wpforms-field-container textarea, .wpforms-field-container input, .wpforms-field-container textarea,
.contactleft .wpforms-field-container input, .contactleft .wpforms-field-container textarea, .wpforms-field-container input, .wpforms-field-container textarea{
	color:#fff!important;
	background-color:hsl(24, 3%, 30%)!important;
	background-color:transparent!important;
	padding:2.5rem 2rem  calc(1.25rem - 2px) 2rem!important;
	padding-left:6px!important;
  font-weight: 400!important;
  font-style: normal;
  text-transform:none;
  letter-spacing: 0.042em;
  transition: all .4s ease-in-out;
  /*border-radius:30px!important;*/
  border-bottom:1px solid hsl(79 2.1% 80.6%)!important;
  border-top:0px!important; border-left:0px!important; border-right:0px!important
}

.contactleft .wpforms-field-container input, .contactleft .wpforms-field-container textarea, .wpforms-field-container input, .wpforms-field-container textarea{
	color:#000!important;
}



.contactright .wpforms-field-container input:focus{
	border-bottom:3px solid #fff!important;
	outline:none!important
}


.contactleft .wpforms-field-container input:focus{
	border-bottom:3px solid hsl(79 2.1% 80.6%)!important;
	outline:none!important
}

form#wpforms-form-304 .wpforms-field-email.floating input.wpforms-field-large{
	margin-top:20px;
}

.wpforms-field-container input[type=checkbox]{
	border:none!important
}
form#wpforms-form-286 .floating textarea.wpforms-field-medium, form#wpforms-form-304 .floating textarea.wpforms-field-medium {
    background: transparent!important;
    border-bottom: 1px solid #fff!important;
    margin-bottom: -12px!important;
	border-top:0px!important; border-left:0px!important; border-right:0px!important;
	max-height:250px;
	overflow:hidden;
	resize:none;
	padding-top:30px!important
}
form#wpforms-form-286 .floating textarea.wpforms-field-medium, form#wpforms-form-304 .floating textarea.wpforms-field-medium {
	border-bottom:1px solid hsl(79 2.1% 80.6%)!important;
	margin-top:20px;
}


@media only screen and (max-width: 1869px) {
form#wpforms-form-286 .floating textarea.wpforms-field-medium,
form#wpforms-form-304 .floating textarea.wpforms-field-medium {
	margin-top:20px!important
}
}


@media only screen and (max-width: 1269px) {
form#wpforms-form-286 .floating textarea.wpforms-field-medium,
form#wpforms-form-304 .floating textarea.wpforms-field-medium {
	margin-top:40px!important
}
}









.contactright .wpforms-field-description a{
	color:#fff!important;
}

@media only screen and (max-width: 769px) {
	.contactright .wpforms-field-description{
		left:25px!important
	}
	.contactright .wpforms-field-container .wpforms-field label.wpforms-field-label{
		left:22px!important;
	}
	.contactright .floating textarea + label, .accordion-content .wpforms-field textarea + label{
		left:22px!important
	}
	.contactright .floating input + label, .accordion-content .wpforms-field input + label{
		left:22px!important
	}
	.contactright .form{text-align:left!important}
	.site-footer .col-full .textwidget .wpforms-container{
		text-align:left!important
	}
}

/*footer*/
#primary{margin-bottom:-100px}
.container-fluid.foot{background:#000!important; margin-top:-85px;position:relative; z-index:999!important;
padding-top:50px;





}
.container-fluid .footerinfo{

	width:100%;
	margin:0 auto;
display:flex;

	align-items:center;
	justify-content:center;
	color:#fff!important;
	font-size:.9em!important;
	
}
.footerblok{width:100%;

}
.container-fluid .footerinfo .column{
	width:43%;
	float:left;
	color:#fff;
	padding-left:50px;
	margin-right:3%;
	font-size:1em!important;
	position:relative;
	font-weight:700!important
}
.container-fluid .footerinfo a{
	color:#fff!important;
}


.footerinfo .column.email{
	background: url(images/email-wit.svg) no-repeat left 0px center!important;
	 background-size:44px 44px!important;
	 background-position:left 0px bottom 6px!important;
}
.footerinfo .column.bellen{
background: url(images/phone-wit.svg) no-repeat left 0px center!important;
	  background-size:44px 44px!important;
	background-position:left 0px bottom 6px!important;
	
}


#colophon{
	position:relative;z-index:999!important;
	background:#000!important;
}


@media (min-width: 1200px) {
    .container

 {
        width: 90%;
    }
}




.shfb-row.shfb-cols-layout-bigleft.shfb-cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
	border-top:1px solid rgba(255, 255, 255, 0.5)!important;
	padding-top:45px;
	
}



	.sydney-credits{font-size:.8em!important;
position:absolute;
bottom:20px;
left: 50%;
transform: translate(-50%, -50%);

}

.footer-widget .widget-column #custom_html-2{font-size:.8em!important}
.footer-widget h3{color:#fff!important; }

.footer-widget ul li a{
color:#bbbdbb!important;
font-size:.9em!important;
margin-left:-12px!important;
text-decoration: none!important;
    background-image: linear-gradient(90deg, #bbbdbb, #bbbdbb)!important;
    background-position: left bottom!important;
    background-repeat: no-repeat;
    background-size: 0% 2px!important;
    transition: background-size .3s ease!important;
	
}

.footer-widget ul li{list-style:none!important; font-size:.7em;padding-left:1px;position:relative}

.footer-widget ul.sub-menu{display:none!important}

.container-fluid a{
	
	color:#bbbdbb!important;


text-decoration: none!important;
    background-image: linear-gradient(90deg, #bbbdbb, #bbbdbb)!important;
    background-position: left bottom!important;
    background-repeat: no-repeat;
    background-size: 0% 2px!important;
    transition: background-size .3s ease!important;
	
}

.footer-widget ul li a:hover, .footer-widget ul li a:focus, .container-fluid a:hover{
	background-size: 100% 2px!important;
}
 .footer-widget ul li::before{
	 content:"";
	 position:absolute;
	 display:block;
	 
	 background:url(images/arrow-up.svg) no-repeat left;
	
	background-size:16px 16px;
	padding:12px;
margin-left:-42px;
top:6px;
 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 .dienstendiv {
	 --articleMargin: 60px;
	/* for space between articles */
	 --spacing: 90px;
	/* for space around article's children */
	 --photoPosition: sticky;
	 --photoTopTemp: 10px;
	 --photoTop: var(--photoTopTemp);
	 width: 100%;
	 height: 90vh;
	 position: relative;
	 container-type: size;
	 margin-block: var(--articleMargin);
	 background: #f8f8f9;
	 border-radius: 4px;
	 animation: toFixed;
	 animation-timeline: view(block calc(-1 * var(--articleMargin)) 100%);
}
 .dienstendiv .diensten-b {
	 width: 55%;
	 padding: var(--spacing);
	 box-sizing: border-box;
	 position: absolute;
}
 .dienstendiv .diensten-b p {
	 margin-block: var(--spacing);
}
 .dienstendiv .photo {
	 width: 40cqw;
	 aspect-ratio: 0.8;
	 margin-top: var(--spacing);
	 margin-left: calc(60cqw - var(--spacing));
	 border-radius: inherit;
	 z-index: 1;
	 position: var(--photoPosition);
	 top: var(--photoTop);
}
 .dienstendiv .photo img {
	 width: 50%;
	 height: 50%;
	 border-radius: inherit;
}
 @keyframes toFixed {
	 100% {
		 --photoPosition: fixed;
		 --photoTop: calc(var(--photoTopTemp) - var(--spacing));
	}
}

.dienstendiv .photo.in-view{
	opacity:0;
	animation: opaCity .5s ease;
}

@keyframes opaCity{
	to{
		opacity:0!important
	}
}