@font-face {
  font-family: 'square_721_regular_bt';
  src: url('https://2d-sign.nl/fonts/square_721_regular_bt.woff2') format('woff2'),
       url('https://2d-sign.nl/fonts/square_721_regular_bt.woff') format('woff'),
       url('https://2d-sign.nl/fonts/square_721_regular_bt.ttf') format('truetype');
}

@font-face {
  font-family: 'square_721_bold_bt';
  src: url('https://2d-sign.nl/fonts/square_721_bold_bt.woff2') format('woff2'),
       url('https://2d-sign.nl/fonts/square_721_bold_bt.woff') format('woff'),
       url('https://2d-sign.nl/fonts/square_721_bold_bt.ttf') format('truetype');
}

html {
	/* not needed */
}

body {
	font-family: 'square_721_regular_bt', Arial, sans-serif;
	font-size: 12px;
	letter-spacing: 1.2px;
	color: #fff;
	margin: 0;
	padding: 0;
	background-color: #000;
}

.bg-pattern-body {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url("https://2d-sign.nl/imgs/2d-sign-bg.png");
	z-index: -1;
}

header {
	/* position: -webkit-sticky; */
	/* position: sticky; */
	/* top: 0; */
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 48px;
	z-index: 300;
}

nav {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1920px;
	min-height: 112px;
	z-index: 301;
}
 
.logo-btn {
	text-decoration: none;
	line-height: 0;
	cursor: pointer;
}

.logo-btn-info {
	background-image: url("https://2d-sign.nl/imgs/2d-sign-logo-home.png");
	background-size: 64px 64px;
}

.logo-btn-info img {
	opacity: 1;
	transition-property: opacity;
	transition-duration: 250ms;
	transition-timing-function: ease-in-out;
}

.logo-btn-info:hover img {
	opacity: 0;
}

.info-btn {
	width: 24px;
	height: 24px;
	color: #fff;
	cursor: pointer;
}

.info-btn-inactive {
	width: 24px;
	height: 24px;
	color: #fff;
}

.info-btn>svg, .info-btn-inactive>svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.info-btn:hover {
	background-color: #fff;
	/* color is 2d pink dieke */
	color: #ff2d9b;
	border-radius: 100%;
}

.to-top-btn {
	position: fixed;
	bottom: 48px;
	right:48px;
	width: 24px;
	height: 24px;
	color: #fff;
	cursor: pointer;
	/* see: https://stackoverflow.com/questions/27900053/css-transition-with-visibility-not-working */
	visibility: hidden;
	opacity: 0;
	transition-property: visibility, opacity;
	transition-duration: 500ms;
	transition-timing-function: ease-in-out;
	z-index: 9999;
}

.to-top-btn>svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.to-top-home:hover {
	background-color: #fff;
	color: #00a7e7;
	border-radius: 100%;
}

.to-top-info:hover {
	background-color: #fff;
	/* color is 2d pink dieke */
	color: #ff2d9b;
	border-radius: 100%;
}

.to-top-btn.in {
	visibility: visible;
	opacity: 1;
}

main {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin: 0 48px;
	position: relative;
	z-index:1;
	opacity: 1;
}
 
section {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	max-width: 1920px;
	margin-bottom: 24px;
}

.payoff {
	margin-bottom: 72px;
}

h1 {
	font-size: 16px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	font-weight: normal;
	text-align: center;
	margin:0;
	padding: 0 24px;
}

.payoff h1 {
	color: #7fd3f3;
}

.break {
	display: inline-block;
}

.info-title h1 {
	color: #fff;
}

.pink {
	color: #ff2d9b;
}

.pink-bold {
	color: #ff2d9b;
	font-family: 'square_721_bold_bt';
}

.info-content {
	display: block;
	max-width: 938px;
	margin: 0 auto 24px auto;
}

.hero-container {
	background-color: #fff;
	margin-bottom: 24px;
	border-radius: 16px;
}

.hero-img {
	display: block;
    max-width: 100%;
	height: auto;
	border-radius: 16px;
	padding: 1px;
}

p {
	font-size: 14px;
	letter-spacing: initial;
	line-height:1.75;
	margin:0 0 24px 0;
	padding: 0;
}

.info-contact {
	margin: 0 0 24px 0;
	font-size: 14px;
	letter-spacing: initial;
	line-height:1.75;
}

.info-contact a, .info-contact span {
	color: #7fd3f3;
}

.cat-links {
	margin-bottom: 16px;
}

.cat-link {
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	padding: 0 0 20px 0;
}

.cat-link:last-of-type {
	/* padding-bottom: 0; */
}

.cat-link-h2 {
	font-size: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	font-weight: normal;
	line-height: 1;
	margin:0;
}

.cat-link-h2 span {
	font-size: 12px;
	color: #7fd3f3;
}

.cat-link-h2 span:last-of-type {
	font-size: 14px;
	font-weight:bold;
}

.thumb-links {
	position: relative;
	margin-bottom: 36px;
}

.thumb-links .swiper-button-prev {
	left: 21px;
	right: auto;
	color: #fff;
}

.thumb-links .swiper-button-next {
	right: 21px;
	left: auto;
	color: #fff;
}

/* Swiper related */

.thumbs-swiper-wrapper {
	/* fix weird sizes of slide when using slidesPerView:3 (or 4, etc, so not auto) */
	/* https://github.com/nolimits4web/swiper/issues/3599 */
	max-width: calc(100% - 224px);
}

.thumbs-swiper .swiper-slide{
	cursor: pointer;
}

/* .thumbs-swiper .swiper-wrapper .swiper-slide { */
.swiper-wrapper .swiper-slide {
	background-color: #fff;
	/* background-color: #fff; is for fake border around .thumbs-swiper .swiper-wrapper .swiper-slide img */
	border-radius: 16px;
	overflow: hidden;
}

/* .thumbs-swiper .swiper-wrapper .swiper-slide img{ */
.swiper-wrapper .swiper-slide img{
	display: block;
	/* object-fit: cover; */
	/* fake border */
	max-width: calc(100% - 2px);
	max-height: calc(100% - 2px);
	padding: 1px;
	border-radius: 16px;
}

.cat-swiper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: calc(100% - 96px);
}

.cat-swiper-wrapper {
	width: 100%;
	max-width: 1920px;
	height:auto;
	z-index: 199;
}

:root {
    --swiper-navigation-size: 36px;
}

.cat-swiper .swiper-button-prev {
	left: 12px;
	right: auto;
	color: #fff;
	z-index:999;
	visibility: hidden;
}

.cat-swiper .swiper-button-next {
	right: 12px;
	left: auto;
	color: #fff;
	z-index:999;
	visibility: hidden;
}

.cat-swiper:hover .swiper-button-prev, .cat-swiper:hover .swiper-button-next {
	visibility: visible;
}

/* END Swiper related */

.overlay {
	position: absolute;
	width: 100%;
	/* max-width: 1920px; */
	min-height: calc(100vh + 72px);
	flex-direction: column;
	align-items: center;
	/* use opacity: 0 because of fadeIn and fadeOut with JS */
	opacity: 0;
	z-index: 199;
}

.overlay-hide {
	display: none;
	top: 100%;
}

.overlay-show {
	display: flex;
	top: 112px;
}

.overlay-close-area {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.project-info {

	margin:0;
	padding: 16px 0;
}

.project-cat {
	display: inline-block;
	color: #7fd3f3;
	font-size: 14px;
	letter-spacing: 1.4px;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
	margin:0;
	z-index: 199;
}

.project-cat span {
	font-size: 12px;
	letter-spacing: 1.2px;
	font-weight: normal;
}

.hide-below-768 {
	/* see mq's */
}

.project-title {
	display: inline-block;
	color: #fff;
	font-size: 14px;
	letter-spacing: 1.4px;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
	margin:0;
}

.close-btn {
	position:absolute;
	top:16px;
	right:16px;
	width: 16px;
	height:16px;
	color: #fff;
	cursor: pointer;
	z-index: 999;
}

.close-btn>svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.close-btn:hover {
	/*  */
}

footer {
	position: fixed;
	top: calc(100% - 32px);
	right: 0;
	bottom:0;
	left: 0;
	background: url("https://2d-sign.nl/imgs/2d-sign-bg.png");
	background-position: 0 calc(-100vh + 32px);
	/* vh is fallback, use dyn vh because mobile viewport heigth changes when scrolling */
	background-position: 0 calc(-100dvh + 32px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	z-index: 999;
}

.footer-content {
	min-height: 24px;
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
}

/* various classes {} */

.phone-link, .mail-link, .map-link {
	text-decoration: none;
	color: #fff;
}

/* media queries */

@media (max-width: 375px) {
	.cat-link-h2 {
		letter-spacing: 1.2px;
	}
}

@media (max-width: 479px) {
	.hide-below-480 {
		display: none;
	}
}

@media (max-width: 767px) {
	.hide-below-768 {
		display: none;
	}

	.project-cat {
		display: block;
		padding: 0 0 8px 0;
	}

	.project-title {
		display: block;

	}
}

@media (max-width: 1023px) {
	
	.hide-below-1024 {
		display: none;
	}
	
}

@media (max-width: 1024px) {
	
	header {
		margin: 0 24px;
	}
	
	main {
		margin: 0 24px;
	}
	
	.thumbs-swiper-wrapper {
		max-width: 100%;
	}
	
	.swiper-button-prev, .swiper-button-next {
		display: none;
	}
	
	.cat-swiper {
		max-width: calc(100% - 48px);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.close-btn {
		position:absolute;
		top:12px;
		right:12px;
	}
	
	.info-content {
		max-width: 682px;
		margin: 0 auto 24px auto;
	}
	
	.to-top-btn {
		bottom: 24px;
		right: 24px;
	}
	
}


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

@media (min-width: 1921px) {
	.close-btn {
		/* right: calc((100% - 1920px) / 2); */
	}
}