/*
Theme Name: Luqe.nl
Theme URI: http://luqe.nl/
Author: Joris Lindner - Luqe.nl
Author URI: http://luqe.nl//
Description: In a place, far far away, a Theme was born. Now we shall see if people will like it. Pls vote at awwwards.com :P
Version: 1.0
License: Copyright Luqe.nl
License URI: N.v.t.
Tags: luqe, paralax, new, design
Text Domain: Luqe.nl
*/

/* --- 		       --- */
/* --- STANDAARD --- */
/* --- 			     --- */

* {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height:  100%;
}

body {
	scroll-behavior: smooth;
	background-color: var(--bg_color);
	transition: 0.5s ease 0.2s;
	//cursor: none;
}

a {
	text-decoration: none;
	color: inherit;
	//cursor: none;
}

p, span, li {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 11px;
	line-height: 14px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Big Shoulders Display', cursive;
	font-weight: 800;
}

h1 { font-size: 36px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 12px; }

:root {
	--slide_width: 778px;
	--slide_height: 40vh;
	--page_mar_y: 52px;
	--page_mar_x: 76px;
	--idle_color:  #ccc;
	--title_size: 160px;
}

@media screen and (max-width: 1600px) and (min-width: 1100px) {
  :root {
		--slide_width: 48.6vw;
		--slide_height: 45vh;
		--page_mar_y: 40px;
		--page_mar_x: 60px;
		--title_size: 120px;
		--cr_color: #f0f0f0;
	}
}

@media screen and (max-width: 1100px) and (min-width: 800px) {
  :root {
		--slide_width: 30vw;
		--slide_height: 50vh;
		--page_mar_y: 35px;
		--page_mar_x: 50px;
		--title_size: 100px;
	}
}

@media screen and (max-width: 800px) and (min-width: 400px) {
  :root {
		--slide_width: 240px;
		--slide_height: 55vh;
		--page_mar_y: 25px;
		--page_mar_x: 35px;
		--title_size: 80px;
	}
}

.cursor {
	z-index: 999;
	width: 10px;
	height: 10px;
	background-color: var(--cr_color);
	mix-blend-mode: difference;
	border-radius: 50%;
	position: absolute;
	transition-timing-function: ease-out;
	pointer-events: none;
}

/* --- 		  --- */
/* --- Home --- */
/* --- 		  --- */

.outer_main {
	width: 100vh;
	height: 100vw;
	transform: rotate(-90deg) translateX(-100vh);
	transform-origin: top left;
	overflow-y: scroll;
	overflow-x: hidden;
	position: absolute;
	scrollbar-width: none;
  -ms-overflow-style: none;
}

.inner_main {
	display: flex;
	height: 100%;
	flex-direction: row;
	transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
}

.slide {
	position: relative;
	transition: 0.5s ease 0s;
	width: var(--slide_width);
	height: var(--slide_height);
	margin-top: calc((100vh - var(--slide_height)) / 2);
	margin-left: calc((50vw - (var(--slide_width) / 2) - (var(--page_mar_x) * 2)) / 2);
	margin-right: calc((50vw - (var(--slide_width) / 2) - (var(--page_mar_x) * 2)) / 2);
}

.slide:hover {
	height: calc(var(--slide_height) + 80px);
	margin-top: calc((100vh - var(--slide_height)) / 2 - 40px);
}

.slide.active:hover {
	height: calc(var(--slide_height) + 40px);
	margin-top: calc((100vh - var(--slide_height)) / 2 - 40px);
}

.slide_margin {
	width: calc((50vw - (var(--slide_width) / 2) - (var(--page_mar_x) * 2)) / 2 + (var(--page_mar_x) * 2));
}

::-webkit-scrollbar {
  display:none;
}

body.no_scroll_bar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* --- 		     --- */
/* --- Overlay --- */
/* --- 			   --- */

.logo {
	width: 74px;
	position: fixed;
	top: var(--page_mar_y);
	left: var(--page_mar_x);
	z-index: 10;
}

.logo path {
	fill: var(--text_color);
	transition: 0.5s ease 0.2s;
}

.about {
	position: fixed;
	top: var(--page_mar_y);
	right: var(--page_mar_x);
	z-index: 10;
}

.about p {
	text-transform: uppercase;
	color: var(--text_color);
	transition: 0.2s ease 0.2s;
}

.page_info {
	position: fixed;
	bottom: var(--page_mar_y);
	left: var(--page_mar_x);
	z-index: 10;
}

.page_info p {
	text-transform: uppercase;
	color: var(--text_color);
	transition: 0.5s ease 0.2s;
}

.links {
	position: fixed;
	bottom: var(--page_mar_y);
	right: var(--page_mar_x);
	z-index: 10;
}

.links p {
	text-transform: uppercase;
	color: var(--text_color);
	transition: 0.5s ease 0.2s;
}

.links p {
	text-align: right;
}

.links .l_half {
	opacity: 0.6;
}

.slide_index {
	position: fixed;
	top: var(--page_mar_y);
	left: 50%;
	transform: translateX(-50%);
	text-transform: uppercase;
}

.slide_index .index {
	float: left;
	transition: 0.2s ease 0s;
}

.slide_index .index p {
	float: left;
	padding: 0px 5px 0px 5px;
	opacity: 0.6;
	transition: 0.2s ease 0.2s;
	color: var(--text_color);
}

.slide_index .index.current p {
	float: left;
	opacity: 1;
}

.slide_index .index p::before {
	content: "[";
	float: left;
	margin-right: -5px;
	opacity: 0;
	transition: inherit;
	color: var(--text_color);
}

.slide_index .index p::after {
	content: "]";
	float: right;
	margin-left: -5px;
	opacity: 0;
	transition: inherit;
	color: var(--text_color);
}

.slide_index .index:hover p::before {
	content: "[";
	float: left;
	margin-right: 5px;
	opacity: 1;
}

.slide_index .index:hover p::after {
	content: "]";
	float: right;
	margin-left: 5px;
	opacity: 1;
}

.slide_index .index.current p::before {
	content: "[";
	float: left;
	margin-right: 5px;
	opacity: 1;
	/* transition: 0.2s ease 0.3s; */
}

.slide_index .index.current p::after {
	content: "]";
	float: right;
	margin-left: 5px;
	opacity: 1;
	/* transition: 0.2s ease 0.3s; */
}

/* --- 		  			 --- */
/* --- Home Slides --- */
/* --- 		  			 --- */

.slide .left {
	position: absolute;
	z-index: 3;
	width: 50%;
	height: 100%;
	top: 0;
	left: 0;
}

.slide .left .title {
	text-transform: uppercase;
	position: absolute;
	bottom: 0;
	right: 0;
	margin-bottom: -19px;
	width: calc(50vw - (2 * var(--page_mar_x)) - 20px);
	height: 100%;
	color: var(--text_color);
	transition: 0.5s ease 0.2s;
	overflow: hidden;
}

.slide .left .title h1 {
	text-transform: uppercase;
	position: absolute;
	bottom: 0;
	right: -60%;
	width: 100%;
	opacity: 0;
	font-size: calc(var(--title_size) + var(--font_offset));
	line-height: calc(var(--title_size) + var(--font_offset));
	text-align: right;
	color: var(--text_color);
	transition: 0.5s ease 0s;
}

.slide .right {
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	transition: 0.5s ease 0s;
}

.slide .item_number {
	margin-top: 0px;
	margin-bottom: 16px;
	transition: 0.2s ease 0s;
}

.slide .item_products {
	margin-bottom: 16px;
	opacity: 0;
	transition: 0.5s ease 0s;
}
.slide .item_number p,
.slide .item_products p {
	text-transform: uppercase;
	color: var(--text_color);
	transition: 0.5s ease 0.2s;
}

.slide .item_image {
	position: absolute;
	top: 44px;
	left: 0px;
	height: calc(100% - 88px);
	width: 100%;
	background-color: var(--idle_color);
	overflow: hidden;
	transition: 0.2s ease 0s;
}

.slide .item_image .image {
	position: absolute;
	width: 120%;
	height: 120%;
	top: -10%;
	left: -10%;
	background-size: cover;
	background-repeat: no-repeat;
	filter: blur(10px) saturate(10%);
	-webkit-filter: blur(10px) saturate(10%);
	transition: 0.5s ease 0s;
}

.slide .item_image .item_image_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--idle_color);
	opacity: 0.4;
	transition: 0.5s ease 0.2s;
}

.slide .item_button {
	position: absolute;
	bottom: 44px;
	z-index: -1;
	right: 0;
	opacity: 0;
	transition: 0.5s ease 0s;
}

.slide .item_button p,
.slide .item_button_img {
	text-transform: uppercase;
	float: left;
	color: var(--text_color)
}

.slide .item_button_img {
	width: 25px;
	height: 25px;
	margin-left: 16px;
}

.slide .item_button_img svg {
	fill: var(--text_color);
	transition: 0.5s ease 0.2s;
}

/* active */

.slide.active .left .title h1 {
	right: 0%;
	opacity: 1;
	transition: 1s ease 0.2s;
}

.slide.active .right {
	width: 66%;
	transition: 0.5s ease 0s;
}

.slide:hover.active .right {
	width: 80%;
	transition: 0.5s ease 0s;
}

.slide.active .item_number {
	margin-top: -30px;
	transition: 0.5s ease 0.7s;
}

.slide.active .item_image .item_image_overlay {
	background: var(--item_color);
	opacity: 0.4;
	transition: 0.5s ease 0.2s;
}

.slide.active .item_products {
	opacity: 1;
	transition: 0.5s ease 0.7s;
}

.slide.active .item_button {
	bottom: 0;
	opacity: 1;
	transition: 0.5s ease 1s;
}

.slide:hover.active .item_image .image {
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	background-size: cover;
	background-repeat: no-repeat;
	filter: blur(0px) saturate(100%);
	-webkit-filter: blur(0px) saturate(100%);
	transition: 0.5s ease 0s;
}

.slide:hover.active .item_image .item_image_overlay {
	background: var(--item_color);
	opacity: 0;
	transition: 0.5s ease 0.2s;
}