/* ============================================
		TOP
=============================================*/



/* ============================================
		NAVIGATIE
=============================================*/



/* ============================================
		SLIDER/BANNER
=============================================*/

.container-fluid.banner {margin-bottom: 0;}
.container-fluid.banner figure { position: relative; margin-bottom: 0;}
.container-fluid.banner figure::before {content: ''; position: absolute; width: 100%; height: 100%; inset: 0; background: linear-gradient(0deg, rgba(10, 10, 10, 0.50) 0%);}
.container-fluid.banner figure img {}

/* ============================================
		CONTENT
=============================================*/

.container-fluid.content {padding-top: var(--row-space);}
.container-fluid.content > .row {margin-bottom: var(--row-space);}
.container-fluid.content > .row.rsb {margin-bottom: var(--row-space-big);}

/* Pagina's: Tattoo, Artist doorklik */
.block.list.cards {}
.block.list.cards .item { --padding: 50px; position: relative; transition: all 0.5s; border: 4px solid transparent;}
.block.list.cards .item .image {}
.block.list.cards .item .image::before {content: ''; position: absolute; width: 100%; height: 100%; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, 0.25) 0%, rgba(10, 10, 10, 0.80) 100%); z-index: 3; pointer-events: none; }
.block.list.cards .item .image img {}
.block.list.cards .item .image img[data-state="default"] {position: relative; z-index: 0;}
.block.list.cards .item .image img[data-state="hover"] {opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; transition: all 0.5s; z-index: 2;}
.block.list.cards .item .image figcaption {position: absolute; width: 100%; height: 100%; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 35px; padding: var(--padding); z-index: 9;}
.block.list.cards .item .image figcaption h3 { color: var(--primary-color); text-transform: uppercase; transform: translateY(70px); transition: all 0.5s;}
.block.list.cards .item .image figcaption a { text-transform: uppercase; text-decoration: none;}
.block.list.cards .item .image figcaption a::before { content: ''; position: absolute; width: 100%; height: 100%; inset: 0; }
.block.list.cards .item .image figcaption a span { display: block; border: 1px solid var(--primary-color); border-radius: var(--border-radius); padding: 10px 20px; transition: all 0.5s; opacity: 0; transform: translateY(35px); transition: all 0.5s;} 
.block.list.cards .item .image figcaption a span::after { content: var(--arrow-right); font-family: var(--font-awesome); font-size: 1rem; display: inline; padding-left: 12px; }
.block.list.cards .item .content {position: absolute; width: fit-content; right: var(--padding); bottom: var(--padding); z-index: 9;}
.block.list.cards .item .content .socials {display: flex; justify-content: end; ;}
.block.list.cards .item .content .socials a { aspect-ratio: 1/1; width: auto; height: auto; border: 1px solid var(--primary-color); border-radius: 100%; padding: 6px; display: flex; justify-content: center; align-items: center; text-decoration: none; transition: all 0.5s; &:is(:hover, :focus-visible) {background-color: rgb(from var(--primary-color) r g b / 0.25);}}
.block.list.cards .item .content .socials a i {font-size: 24px; color: var(--primary-color);}

/* Swiper */
.block.list.cards > .swiper { margin-left: 12px; padding-left: calc(var(--half-space) / 2);}
.block.list.cards > .swiper .swiper-wrapper { padding-top: 24px;}
.block.list.cards > .swiper .swiper-wrapper .swiper-slide {max-width: 475px;}
.block.list.cards > .swiper .swiper-scrollbar {background: #CAC5BF; height: 6px; margin-top: 40px; position: relative; left: 0; width: var(--container-width); margin-left: calc(var(--half-space) / 2);}
.block.list.cards > .swiper .swiper-scrollbar .swiper-scrollbar-drag {background: var(--text-color); border-radius: 0; cursor: grab;}

/* hover */
.block.list.cards .item .image figcaption a span:is(:hover, :focus-visible) { background: rgb(from var(--primary-color) r g b / 0.25); backdrop-filter: blur(5px); }
.block.list.cards .item:has(a:is(:hover, :focus-visible)) {border: 4px solid var(--white); box-shadow: 0 0 24px 0 #EDEDED; }
.block.list.cards .item:has(a:is(:hover, :focus-visible)) img[data-state="hover"] {opacity: 1;}
.block.list.cards .item:has(a:is(:hover, :focus-visible)) .image figcaption h3 {transform: translateX(0px);}
.block.list.cards .item:has(a:is(:hover, :focus-visible)) .image figcaption a span {opacity: 1; color: var(--primary-color); transform: translateX(0px);}

/* Card doorklik */
.block.list.cards h1 {margin-bottom: calc(var(--row-space) - 24px);}

.block.list.cards #impressions {margin-bottom: var(--row-space-big);}
.block.list.cards #impressions .block.list.cards {}
.block.list.cards #impressions .block.list.cards.swiper {}
.block.list.cards #impressions .block.list.cards.swiper .swiper {}

.block.list.cards #about {padding: 0 12px;}
.block.list.cards #about .block.content {}
.block.list.cards #about .block.content h2 {margin-bottom: 24px;}
.block.list.cards #about .block.content .content {}
.block.list.cards #about .block.content .content .text {}
.block.list.cards #about .block.content .content .btns {display: flex; flex-wrap: wrap; gap: 12px;}
.block.list.cards #about .block.content .content .btns .btn {}
.block.list.cards #about .block.content .content .btns .btn:has(i) {width: 40px; padding-left: 0; padding-right: 0; }

/* Pagina's: Piercing's */
.block.html.contact-bar { position: relative; overflow: hidden; border: 2px solid var(--text-color); padding: 36px 50px; display: flex; justify-content: space-between; align-items: center; }
.block.html.contact-bar .content { position: relative; top: 0; left: 0; z-index: 2; height: 100%; display: flex; flex-wrap: wrap; gap: 0 24px; color: var(--white); }
.block.html.contact-bar .content h2 { flex: 0 0 100%; margin-bottom: 0px; padding-bottom: 12px; font-family: var(--secondary-font); font-size: 1.875rem; text-transform: uppercase; &::after {display: none;} }
.block.html.contact-bar .content .text {flex: 0 0 50%; color: var(--text-color); }
.block.html.contact-bar .content .text p { margin: 0; }
.block.html.contact-bar .content .links {flex: 0 0 auto;}
.block.html.contact-bar .content .links .link {}
.block.html.contact-bar .content .links .link i {color: var(--text-color);padding-right: 12px;}
.block.html.contact-bar .content .links .link a {color: var(--text-color); text-decoration: none; &:is(:hover, :focus-visible) { text-decoration: underline; }}
.block.html.contact-bar .content + .btn {flex: 0 0 auto;}

/* Pagina's: Info */
.container-fluid.content > .row:has(.block.content.image-text) {margin-bottom: calc(var(--row-space) + 255px);}

.block.content.image-text { position: absolute; transform: translate(-100px, -100px); width: min(575px, 100%); background-color: var(--primary-color); border: 2px solid var(--text-color); padding: 50px;}
.block.content.image-text h3 {}
.block.content.image-text p {}
.block.content.image-text ul {padding-bottom: 0; margin-bottom: 0; display: flex; flex-direction: column; gap: 35px;}
.block.content.image-text ul li {margin-bottom: 0; padding-left: 36px;}
.block.content.image-text ul li::before {content: var(--check); font-weight: 700; font-size: 1.25rem; top: -2px; }

/* Pagina's: Info */
.block.list.workflow { min-height: 330px; display: grid; align-content: center; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 24px; margin-top: 50px; border: 2px solid var(--text-color);}
.block.list.workflow .item {}
.block.list.workflow .item h3 {text-align: center; margin-bottom: 24px;}
.block.list.workflow .item .text {text-align: center;}
.block.list.workflow .item .text p {}

/* Pagina's: Info */
.block.list.accordion { margin-top: 24px; max-width: unset; display: flex; flex-direction: column; gap: 12px; }
.block.list.accordion .faq-item { padding: 12px 24px; background: transparent; border: 2px solid var(--text-color); margin-bottom: 0; overflow: hidden; transition: all 0.3s ease; }
.block.list.accordion .faq-item .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 0; font-size: 18px; font-weight: 600; font-family: var(--secondary-font); color: var(--text-color); cursor: pointer; list-style: none; gap: 16px; transition: all 0.3s ease; }
.block.list.accordion .faq-item .faq-question::-webkit-details-marker { display: none; }
.block.list.accordion .faq-item .faq-question::marker { display: none; content: ''; }
.block.list.accordion .faq-item .faq-question h3 {font-size: 1.125rem; font-weight: 500; font-family: var(--secondary-font);}
.block.list.accordion .faq-item .faq-question .faq-icon { position: relative; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: transparent; border: 2px solid var(--text-color); transition: all 0.3s ease; }
.block.list.accordion .faq-item .faq-question .faq-icon::before { content: ''; color: var(--text-color); position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: var(--text-color); transform: translate(-50%, -50%); transition: all 0.3s ease; }
.block.list.accordion .faq-item .faq-question .faq-icon::after {  content: ''; color: var(--text-color); position: absolute; top: 50%; left: 50%; width: 2px; height: 14px; background: var(--text-color); transform: translate(-50%, -50%); transition: all 0.3s ease; }
.block.list.accordion .faq-item .faq-answer { padding: 12px 0 0 0; font-size: 16px; line-height: 1.7; color: var(--text-color); }
.block.list.accordion .faq-item .faq-answer p:last-child{ margin: 0; }
.block.list.accordion .faq-item .faq-answer a:not(.btn) { color: var(--primary-color); text-decoration: underline; }

/* Open */
.block.list.accordion .faq-item[open] .faq-question .faq-icon::before {}
.block.list.accordion .faq-item[open] .faq-question .faq-icon::after {  transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* Hover */
.block.list.accordion .faq-item .faq-question:is(:hover, :focus-visible) { }
.block.list.accordion .faq-item .faq-question:is(:hover, :focus-visible) .faq-icon { background: var(--primary-color); }

/* Animate the FAQ answer panel using the grid-rows technique
   (the reliable way to transition to an auto height) */
.faq-item .faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; padding-top: 0 !important; transition: grid-template-rows 0.35s ease, opacity 0.3s ease, padding-top 0.35s ease;}
.faq-item .faq-answer > * { min-height: 0;}
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; opacity: 1; padding-top: 12px !important;}

/*Animate the plus icon into a minus*/
.faq-item .faq-icon::before,
.faq-item .faq-icon::after { transition: transform 0.35s ease, opacity 0.35s ease;}

.faq-item.is-open .faq-icon::after { transform: matrix(1, 0, 0, 1, -1, -7) rotate(90deg); opacity: 0;}


/* ====== Pagina's: Contact ====== */

.webpage-col:has(.block.html.contact-info) {display: flex; flex-direction: column;}

.block.html.contact-info {flex: 1;}
.block.html.contact-info address {display: flex; flex-direction: column; justify-content: space-between; gap: 0; height: 100%; margin: 0;}
.block.html.contact-info address .contact-list { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; }
.block.html.contact-info address .contact-list li::before {display: none !important;}
.block.html.contact-info address .contact-item { display: flex; align-items: center; gap: 0 24px; padding: 24px 0; }
.block.html.contact-info address .contact-item:not(:last-child) { border-bottom: 1px solid var(--grey); }
.block.html.contact-info address .contact-item .icon { flex-shrink: 0; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; }
.block.html.contact-info address .contact-item .icon::before { content: ''; font-family: var(--font-awesome); font-size: 1.5rem; color: var(--text-color); font-weight: 400; }
.block.html.contact-info address .contact-item .icon.icon-phone::before { content: var(--phone); }
.block.html.contact-info address .contact-item .icon.icon-mail::before { content: var(--mail); }
.block.html.contact-info address .contact-item .icon.icon-location::before { content: var(--location); }
.block.html.contact-info address .contact-item hgroup { flex-direction: column; margin: 0; gap: 4px;  font-style: normal; color: var(--text-color); }
.block.html.contact-info address .contact-item hgroup h3 { font-weight: 500; margin: 0 0 8px 0; }
.block.html.contact-info address .contact-item hgroup p { color: var(--text-color); margin: 0; letter-spacing: 0; }
.block.html.contact-info address .contact-item hgroup a { color: var(--text-color); text-decoration: none; transition: all 0.5s; &:is(:hover, :focus-visible) {text-decoration: underline;} }
.block.html.contact-info address .map {}
.block.html.contact-info address .map iframe {width: 100%; filter: grayscale(1);}

/* Hover */
.block.html.contact-info .contact-item hgroup address a:is(:hover, :focus-visible) {text-decoration: underline; }

/* ============================================
		FOOTER & ENDPAGE
=============================================*/



/* ============================================
		MOBIEL
=============================================*/

/* --------------------------------------- */
@media only screen and (max-width: 1399px) {

	.block.list.cards.swiper > .swiper { padding-left: var(--half-space);}
	.block.list.cards.swiper > .swiper .swiper-scrollbar {margin-left: 0;}

	.container-fluid.content > .row:has(.block.content.image-text) {margin-bottom: calc(var(--row-space) + 170px);}


}

/* --------------------------------------- */
@media only screen and (max-width: 1199px) {

	.block.content.image-text {transform: translate(24px, calc(-100% + 24px)); position: absolute; }
	
	.block.list.workflow {grid-template-columns: repeat(2, 1fr);}

	.container-fluid.content > .row:has(.block.content.image-text) {margin-bottom: calc(var(--row-space) + 24px);}
	
}

/* --------------------------------------- */
@media only screen and (max-width: 991px) {
	
	.block.list.cards .item {--padding: 35px;}
	.block.list.cards .item .image figcaption {gap: 24px 0;}
	.block.list.cards .item .image figcaption h3 {transform: translateY(calc(24px * 3));}
	.block.list.cards .item .image figcaption a span {transform: translateY(24px);}
	
	.block.list.cards #about .block.html.picture {margin-top: 24px;}

	.block.html.contact-bar {flex-direction: column; align-items: flex-start; gap: 24px;}

	.block.list.workflow {grid-template-columns: repeat(1, 1fr); gap: 12px;}
	.block.list.workflow .item h3 {text-align: start; margin-bottom: 12px;}
	.block.list.workflow .item .text {text-align: start;}

}

/* --------------------------------------- */
@media only screen and (max-width: 767px) {

	.block.html.contact-bar .content {flex-direction: column; gap: 12px;}

	.block.content.image-text { padding: 24px; width: fit-content; max-width: calc(100% - 36px);}
	.block.content.image-text ul {gap: 24px;}

}

/* --------------------------------------- */
@media only screen and (max-width: 575px) {

	.container-fluid.banner img {min-height: 175px;}

	.block.list.cards .item {--padding: 24px;}

	.block.list.cards > .swiper {margin-left: 0; margin-right: 0; padding: 0 12px;}
	.block.list.cards > .swiper .swiper-scrollbar {width: calc(100% - 24px);}
	.block.list.cards > .swiper .swiper-wrapper .swiper-slide {max-width: 75vw;}

	.block.list.cards.swiper > .swiper {margin-left: 0; margin-right: 0; padding: 0 12px;}
	.block.list.cards.swiper > .swiper .swiper-wrapper .swiper-slide {max-width: 75vw;}
	.block.list.cards.swiper > .swiper .swiper-scrollbar {width: calc(100% - 24px);}

	.block.html.contact-bar {padding: 24px;}

	

	
}

/* --------------------------------------- */
@media only screen and (max-width: 479px) {
	
	.container-fluid.content > .row:has(.block.content.image-text) {margin-bottom: calc(var(--row-space) + 0px);}

	.block.content.image-text {position: relative; transform: translate(0, 0); top: -24px; width: calc(100% - 24px); margin: 0 auto; }

}