/* Alle keyframes voor animaties */
@keyframes fadeIn {
	0% { opacity:0%; }
	30% { opacity:0%; }
	100% { opacity:100%; }
}
@keyframes fadeInDelay {
	0% { opacity:0%; }
	40% { opacity:0%; }
	100% { opacity:100%; }
}
@keyframes fadeInDelay2 {
	0% { opacity:0%; }
	40% { opacity:0%; }
	100% { opacity:100%; }
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-10%);
	opacity:0%;
  }
  100% {
    transform: translateX(0);
	opacity:100% !important;
  }
}
@keyframes slideInFromBottom {
  0% {
    transform: translateY(10%);
	opacity:0%;
  }
  100% {
    transform: translateY(0%);
	opacity:100% !important;
  }
}
@keyframes slideInFromBottomLARGE {
  0% {
    transform: translateY(80%);
	opacity:0%;
  }
  100% {
    transform: translateY(0%);
	opacity:100% !important;
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }	
}
@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }	
}
@keyframes popUp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }	
}

/* Stijlen om keyframes te gebruiken en andere animaties */
.fadeonscroll { opacity:0; transition: all .3s ease;}
.fadeIn {
	animation: 1s ease 0s 1 fadeIn;
	opacity:1;
}
.fadeInDelay {
	animation: 2s ease 0s 1 fadeInDelay;
}
.fadeInDelay2 {
	animation: 3s ease 0s 1 fadeInDelay2;
}
.ease {
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
.slideInFromBottom { 
	animation: .5s ease 0s 1 slideInFromBottom;
	opacity:1;
}
.slideInFromBottomLARGE { 
	animation: 1s ease 0s 1 slideInFromBottomLARGE;
	opacity:1;
}
.slideInFromLeft { 
	animation: .5s ease 0s 1 slideInFromLeft;
	opacity:1;
}
.nodelay { transition: all 0.5s ease; }

/* Stijlen voor media */
@media only screen and (max-width:767px) {
	.menuDesktop { display:none !important; }
	.tagline { }
	.home .arrowdown { text-align:left !important; padding-right:20px; }
	.mobilenone { display:none; }
}

/* Algemene stijlen */
.visible { opacity:1;}
.taxonomy-post_tag a { 
	display: inline !important; 
	border-style: none;
    border-width: 0px;
    background-color: #0000001a;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 400; 
	pointer-events: none;
    cursor: default;
}
.is-style-text-annotation { display: inline !important; }
.rounded, .rounded img { -webkit-border-radius: 5px !important; border-radius: 5px !important; border-color: transparent; }
.roundedcorner, .footertje { -webkit-border-radius: 30px 0 0 0 !important; border-radius: 30px 0 0 0 !important; border-color: transparent; }
.footertje { filter: drop-shadow(0px -5px 10px rgba(17, 17, 17, .1)); }
.zoom { position:relative; overflow:hidden; }
.zoom img {transition: ease 1s;}
.zoom:hover img { transform: scale(1.1); }
:where(.wp-site-blocks) > * { margin-block-start:0; }

/* Stijlen voor specifieke elementen */
.foo { height:100dvh !important; position:fixed; width:100%; z-index:0; }
.firstafterfoohome { filter: drop-shadow(0px -5px 10px rgba(17, 17, 17, .4)); margin-top:100svh !important; }
.firstafterfoo { filter: drop-shadow(0px -5px 10px rgba(17, 17, 17, .4)); }
.overlay { height: 100svh !important; min-height: 100svh !important; }
	.overlay .wp-block-cover__background { opacity:0 !important; }

.fixedheader {
	color:#111;
    height: 75px;
    z-index: 999;
    margin: 0 auto;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
.page-template-pagina-fullheader .fixedheader, .page-template-pagina-fullheader .fixedheader a, .single .fixedheader, .single .fixedheader a, .error404 .fixedheader, .error404 .fixedheader a { color: #FAD41A !important; }
.page-template-pagina-fullheader .fixedheader .wp-block-site-logo, .fullheader .wp-block-site-logo, .single .fixedheader .wp-block-site-logo, .error404 .fixedheader .wp-block-site-logo {
	transform: translateY(-100%) translateX(-100%) rotate(-90deg);
	transform-origin:bottom right;
	top:10px;
	left:40px;
	width:200px;
}
.wp-block-post-content { position:relative; }
.arrowdown { cursor: pointer; }
.page-template-pagina-fullheader:not(.home) .belowfullheight, .single .belowfullheight, .home .belowfullheighthome { color:#111 !important;}
.sitelogogroup { height:40px; width:200px; position:relative; }
.sitelogogroup .wp-block-site-logo { position:absolute; }
.headerhideOFF { opacity:1; }
.headerscrolled {
	opacity:0 !important;
	-moz-transform: translateY(-20px);
	-webkit-transform: translateY(-20px);
	-o-transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	transform: translateY(-20px);
}
.wp-block-template-part { margin-top:0; }
.wp-block-navigation__responsive-container {
	background: url("http://studiodevandalen.nl/wp-content/uploads/2025/09/SDV-logo.png") bottom right no-repeat;
	background-color: #111 !important;
	background-position: bottom 30px right 20px;
	background-size: clamp(150px, 75%, 700px);
	min-height: calc(100svh - 30px);
	height: calc(100% - 30px);
	animation: .3s ease 0s 1 slideUp;
	transform: translateY(-100%);
    display: block;
}
.wp-block-navigation__responsive-container.is-menu-open {
	animation: .3s ease 0s 1 slideDown;
	transform: translateY(0%);
}
.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) { background-color:#111 !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top:calc(2rem + 24px);
}
.wp-block-navigation__responsive-container-close {
	right: 5px;
	height:75px;
	margin-top:-1rem;
}
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    align-items: var(--navigation-layout-justification-setting, initial);
    display: flex;
    flex-direction: column;
}
.wp-block-navigation__responsive-close {
	margin-left: auto;
    margin-right: auto;
    max-width: var(--wp--style--global--wide-size, 100%);
}
.swiper-button-next { right:calc(var(--wp--custom--carousel-block--navigation-size, 22px)*-1/44*27 - var(--wp--custom--carousel-block--navigation-sides-offset, 15px)) !important; }
.swiper-button-prev { left:calc(var(--wp--custom--carousel-block--navigation-size, 22px)*-1/44*27 - var(--wp--custom--carousel-block--navigation-sides-offset, 15px)) !important; }
:where(.wp-site-blocks *:focus) { outline:none; }
.werk a { text-decoration:none; }

/* NEW website 2026 */

.newlogohome { animation-duration: 1s; }
.newbutton a:hover { border-color: #FAD41A !important; color:#FAD41A !important; }
.page-template-pagina-new-fullheader .fixedheader, .page-template-pagina-new-fullheader .fixedheader a { color: #FAD41A !important; } 
.page-template-pagina-new-fullheader:not(.home) .belowfullheight, .single .belowfullheight, .home .belowfullheighthome { color:#111 !important;}
.page-template-pagina-new-fullheader .sitelogogroup, .page-template-pagina-new-fullheader .menuDesktop { opacity:0; }
.newfoo { height:100dvh !important; }
.newoverlay { height: 100svh !important; min-height: 100svh !important; }

@media only screen and (max-width:768px) {
	.mobilealignleft { float:left;  }
}