/* CSS Document */

@keyframes expandVideo {
	from   {width:100%; max-width:100%; left:0px;}
	to {width: calc(100% + 1.2rem); max-width: calc(100% + 1.2rem); left:-0.6rem;}
}
@keyframes shrinkVideo {
	from {width: calc(100% + 1.2rem); max-width: calc(100% + 1.2rem); left:-0.6rem;}
	to   {width:100%; max-width:100%; left:0px;}
}

@keyframes toFullWidth {
	0%  {width:0px;}
	100%  {width:100%;}
}
a.button:hover, .button:hover, input[type="submit"]:hover, .link:hover{transform: scale(1.03);}
.blog-slider a.swiper-slide:hover{transform: scale(0.97);}

.img-ani-wrapper {width: 100%; overflow: hidden; border-radius: var(--border-radius-large);}
img.img-ani {height: 100%; transform: scale(1.2); object-fit: cover;}

.expertises .parts{aspect-ratio:1152 / 553;}
.expertises .parts a, .expertises .parts.parts-2 a {aspect-ratio:unset;}

.text-big .text{animation: none;}
.text-big.reveal .text{color:var(--color-donker);}
.black{color:var(--color-donker);}
.black-reveal-text{color:var(--color-donker); overflow:hidden; position: absolute; margin-bottom: 3rem; font-size: 2.5rem; font-style: normal; line-height: 130%; top: 0px; left: 0px; z-index: 22; height:0px;}

.dimmed{color: #22282814;}
.photo-banner{width:fit-content; padding:0px; max-width:unset; margin-bottom:2rem;}
/* .photo-banner{transform: skew(1deg, 1deg);} */
/*.photo-banner .row1 {translate: -50%;}
.photo-banner .row2 {translate: 0px;}*/
.photo-banner .row1, .photo-banner .row2{width:100%;}

.progressbar-fill-ani{background-color: var(--color-accent); height: 1rem;}
.progressbar-filling{animation: toFullWidth 8s; animation-timing-function: linear;}

/* op onzichtbaar zetten voor animatie */
.working-method-cards{opacity:0;}
.working-method-list .intro-wrapper{height:fit-content; padding-right:2rem;}
/* correctie tbv mobiel */
@media screen and (max-width: 960px) {

	.working-method-list .intro-wrapper {
		padding-right: 0;
	}
}
.working-method-list .intro-wrapper{z-index:999;}
.working-method-list{gap:0px;}

.case-column-tile-img{overflow:hidden; border-radius: var(--border-radius-large);}
.case-column-tile-img img{transform:scale(1.2);}

.working-method-list .intro-wrapper:before {
    content: ""; display: block; width: calc(200% + 6rem);
	height: 6rem; background-color: white;
    position: absolute; top: -11rem;left:-3rem;
    z-index: 999;}

.working-method-list .intro-wrapper:after {
    content: "";
    background-color: var(--color-achtergrond);
    height: 2rem;
    width: calc(200% + 6rem);
    top: -6rem; z-index:9999;
    position: absolute;
    left: -3rem;
    border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}

.page-video-header-wrapper{max-height:unset !important; display: flex; justify-content: center; overflow:visible; z-index: 99999999; width: 100% !important; max-width: 100% !important;}
.page-video-header video{display:inline-block; object-fit:cover;}
.page-video-header .pin-spacer {max-width: 100% !important; width: 100% !important; height: 100% !important;}
.white-after::after {content: ""; height: 35vh; display: inline-block; width: 100%; background-color: white; position: absolute; bottom: -35vh;}

.case-flipcard-tile{overflow:hidden;}
.case-flipcard-tile .heading{position:relative; z-index:10;}
.project-flipcard-tile{overflow:hidden;}
.project-flipcard-tile .heading{position:relative; z-index:10;}
.project-include-tile{overflow:hidden;}
.project-include-tile .heading{position:relative; z-index:10;}
.bg {width: 112%; height: 112%; box-sizing: border-box; position: absolute; top: -6%; left: -6%; z-index: 0; background-size:cover; border-radius: var(--border-radius-large);}

.team-tiles .tile .tile-content{top:0; opacity: 0; transition: opacity 0.6s ease-in-out;}
.team-tiles .tile:hover .tile-content{display: flex; transform:unset; opacity:1;}
.team-tiles .tile:nth-child(3n + 2) {top: 3.2rem;}

.image-slider.clients .swiper-slide img{aspect-ratio:1/1;}
@media only screen and (min-width: 1280px) {.image-slider.clients .swiper .swiper-slide > img{max-width:80%;}}

@media only screen and (max-width: 1024px) {
	.team-tiles .tile:nth-child(3n + 2) {top: unset;}
}

.preview-mobile-only{display: none;}

@media only screen and (max-width: 800px) {
	.photo-banner .banner-item {width: 30vw;}
	.working-method-list .intro-wrapper:after, .working-method-list .intro-wrapper:before {display:none;}

	.case-banner-tiles {width: 100%;}
	img.case-banner-tile-image-big {max-width: 72%; margin-left: auto; margin-right: auto;}

	.case-banner-tile .inzetje0{width:25%; left:5%; top:5%;}
	.case-banner-tile .inzetje1{width:25%; right:5%;}
	.case-banner-tile .inzetje2{width:35%; left:5%; top:-3%;}

	.image-slider.clients, .desktop-only {display: none;}
	.preview-mobile-only{display: block;}
}