/*
Theme Name: Custom Folio
Theme URI: https://leonvandenberg.com
Author: Leon van den Berg
Author URI: https://leonvandenberg.com
*/


/* General */

html, body {
	background: #000000;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
	height: 100%;
	width: 100%;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding-top: 12px;
	z-index: 999999;
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding-bottom: 12px;
	z-index: 999999;
}

header, footer {
	mix-blend-mode: difference;
}

*:focus {
    outline: none;
}
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Custom CSS */

.main {
	height: 100%;
	width: 100%;
	display: block;
}

.fixed-bg {
	position: relative;
	z-index: 0;
}

.container {
	box-sizing: border-box;
}

.col-topleft {
	display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.col-topright {
	display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}
.col-bottomleft {
	display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
.col-bottomright {
	display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.col-topright p,
.col-bottomright p {
	text-align: right;

}
	.col-topright p em {
		margin-left: 4px;
	}

footer .container .row p {
	margin-bottom: 0;
}



/* Swiper */

.swiper {
	height: 100%;
	width: 100%;
}

.swiper-slide video {
	display: none;
}

.swiper-slide-prev video,
.swiper-slide-visible video,
.swiper-slide-next video {
	display: block;
}

.cover-item {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swiper-wrapper {
	z-index: 0;
}

.swiper-pagination {
	position: static !important;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
	display: none !important;
}

.swiper-button-prev {
	left: 0 !important;
}
.swiper-button-next {
	right: 0 !important;
}

.container-prev-next {
	height: 100% !important;
	width: 50% !important;
	top: 0 !important;
	color: #FAFAFA !important;
	display: block !important;
	mix-blend-mode: difference;
	cursor: none !important;
}

.container-prev-next .custom-cursor {
	position: fixed;
	top: 0;
	left: 0;
	height: 32px;
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
	z-index: 10;
  }

  .custom-cursor span {
	font-family: 'Dazzed SemiBold';
	font-size: 18px;
	line-height: 32px;
	letter-spacing: -0.06em;
  }

.swiper-slide .video-mobile {
	display: none;
}

	
/* Typo */

h1, h2, h3, h4, span, p, a {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	font-weight: normal;
	color: #FFFFFF;
	font-feature-settings: 'ss02' on, 'ss05' on, 'ss11' on;
}

p {
	font-family: 'Dazzed Medium';
	font-size: 15px;
	line-height: 20px;
	letter-spacing: -0.01em;
	margin: 0;
}

a {
	text-decoration: none;
}

	em {
		font-style: normal !important;
	}
	em.pixelated {
		font-family: 'Neue Pixel';
		text-transform: uppercase;
		letter-spacing: 0;
	}
	span.pixelated {
		font-family: 'Neue Pixel';
		text-transform: uppercase;
		letter-spacing: 0;
	}
	em.pixelated a {
		text-decoration: underline;
	}

/* Animated Text */

h1.magic .line {
	overflow: hidden;
}

p.magic {
	overflow: hidden;
}

/* Responsive */

@media (max-width: 768px) {

	.col-sm-6 {
		flex: 0 0 auto;
		width: 50% !important;
	} 

	p {
		font-size: 13px;
		line-height: 16px;
		letter-spacing: -0.008em;
	}

	.anchortext {
		clear: both;
		display: inline-block;
		width: 100%;
	}
	#slidetitle {
		clear: both;
		display: inline-block;
		width: 100%;
	}

	.swiper-slide .video-desktop {
		display: none;
	}
	.swiper-slide .video-mobile {
		display: block;
	}

	.swiper-button-prev {
		cursor: w-resize !important;
	}
	.swiper-button-next {
		cursor: e-resize !important;
	}

	.container-prev-next .custom-cursor {
		opacity: 1;
		height: 24px;
	}
	.container-prev-next .custom-cursor span {
		font-size: 16px;
		line-height: 24px;
	}

	.container-prev-next .prev-cursor {
		left: 12px;
		right: auto;
		bottom: 24px;
		top: auto;
		transform: none !important;
	}
	.container-prev-next .next-cursor {
		left: auto;
		right: 12px;
		bottom: 24px;
		top: auto;
		transform: none !important;
	}

	footer {
		bottom: 64px;
		padding-bottom: 0px;
	}

}