/* || mynameisjulen ||  */

@font-face {
	font-family: font1;
	src: url("../fonts/font1.woff");
}

@font-face {
	font-family: font2;
	src: url("../fonts/font2.woff");
}

@font-face {
	font-family: font3;
	src: url("../fonts/font3.woff");
}

@font-face {
	font-family: font4;
	src: url("../fonts/font4.woff");
}

@font-face {
	font-family: font5;
	src: url("../fonts/font5.woff");
}

@font-face {
	font-family: font6;
	src: url("../fonts/font6.woff");
}

html {
	height: 100%;
	width: 100%;
	cursor: crosshair;
}

body {
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	margin: 0px;
	padding: 0px;
	text-align: center;
	perspective: 1px;
	transform-style: preserve-3d;
}

::-webkit-scrollbar {

	display: none;
}


/* TRANSITION */

html.js body {
	display: none;
}

div.fading_background {
	display: none;
}

/* SELECTION */

::-moz-selection {
    background: rgba(0, 153, 255, 0.5);;
}

::selection {
    background: rgba(0, 153, 255, 0.5);
}


/* LANGUAGE */

div.content_container#lang_container[data-category="lang"] {
	position: relative;
	padding: 25vh 10%;
	min-height: 100vh;
	box-sizing: border-box;
	transform-style: inherit;
	background: 50% 50% / cover;
	padding-right: 0;
	padding-left: 0;
	padding-top: 1px;
	height: 100%;
	width: 100%;
	background-image: url("../img/wall_white.jpg");
	font-family: font2;
	color: #FFFFFF;
	background-size: cover;
	z-index: 2;
}

div.content_container#lang_container[data-category="lang"]:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: 50% 50% / cover;	
}

div.logo#lang_logo {
	position: absolute;
	top: 40%;
	left: 50%;
    transition: background-color 0.7s;
    cursor: pointer;
	background-image: url("../img/logo_white.png");
	transform: translate(-50%, -50%) scale(2);	
}

div.logo#lang_logo:hover {
	background-color: #000000;
}


div.lang {
	position: absolute;
	z-index: 1;
	top: 76%;
	left: 50%;
	transform: translate(-50%, 0);
	width: 100%;
	font-family: font2;
    font-size: 200%;
    border-collapse: separate;
    border-spacing: 100px 0;
    color: #000000;
}

div.lang div {
	z-index: 1;
	text-decoration: none;
	width: 30%;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.3);
	transition: background-color 1s;
}


div.lang div:hover {
	background-color: rgba(255, 255, 255, 1);
}

div.lang div {
	position: absolute;
	transform: translateX(-50%);
}

div.lang div:nth-child(1) {
	left: 16%;
}

div.lang div:nth-child(2) {
	left: 50%;
}

div.lang div:nth-child(3) {
	left: 84%;
}


/* INTRO */

div.content_container[data-category="intro"]#intro_container {
	background-image: url("../img/bgn.jpg");
    background-position: center top;
	height: 100%;
	width: 100%;
	font-family: font1;
	position: relative;
	z-index: 2;
}


div.extra {
	width: 100%;
	height: 113px;
}

div#circle_container {
	height: 120px;
	margin: 0;
}

div#lang_circle {
    border-radius: 50%;
	background-color: rgba(255,255,255,0.3);
    height: 100%;
    float: left;
    width: 120px;
    text-align: center;
    vertical-align: middle;
    transition: background-color 1s;
}

div#lang_circle:hover {
	background-color: rgba(255,255,255,1);
	cursor: pointer;
}



div#about_circle {
    border-radius: 50%;
	background-color: rgba(0,92,184,0.3);
    height: 100%;
    float: left;
    width: 120px;
    text-align: center;
    vertical-align: middle;
    transition: background-color 1s;
}

div#about_circle:hover {
	background-color: rgb(48, 123, 197);
	cursor: pointer;
}


div.extra div {
    margin-left: 1%;
    margin-top: 1%;
}

div.extra div p {
	position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

div.logo {
	position: relative;
	margin: 0 auto;
	width: 115px;
	height: 115px;
	background-image: url("../img/logo_black.png");
	background-repeat: no-repeat;
	background-size: 115px 115px;
	top: 2%;
    transition: background-color 0.5s;
    cursor: pointer;
}

div.logo:hover {
	background-color: #FFFFFF;
}


div.headers {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

div.box {
	border: 5px solid black;
	width: 85%;
	margin: 0 auto;
}

div.content_container[data-category="intro"]#intro_container div.headers h1 {
	font-size: 500%;
	margin: 0;
}

div.content_container[data-category="intro"]#intro_container div.headers h1 span {
	color: #FFFFFF;
}

div.content_container[data-category="intro"]#intro_container div.headers h2 {
	font-size: 200%;
}


div.content_container[data-category="intro"]#intro_container div.arrow {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, -123%);
}

div.content_container[data-category="intro"]#intro_container div.arrow p {
	color: #FFFFFF;
}

div.content_container[data-category="intro"]#intro_container a.arrow {
	position: relative;
	margin: 0 auto;
	z-index: 1;
	width: 100%;
	height: 10em;
}


div#box.box h2 span {
	font-family: font6;
    font-size: 92%;
    margin-left: 0.2%;
    margin-right: -0.2%;
    font-weight: bold;
    text-shadow: 0.3px 0.3px black;
}


/* ELEMENTS */


div.content_container[data-category="element"] {
	position: relative;
	min-height: 100vh;
	box-sizing: border-box;
	transform-style: inherit;
	background: 50% 50% / cover;
	padding-right: 0;
	padding-left: 0;
	background-color: rgba(240, 240, 240, 0.3);
	font-family: font2;
	width: 100%;
	height: 100%;
}

div.content_container[data-category="element"]:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: 50% 50% / cover;	
}

div.content_container div.element_header h2 {
	font-size: 500%;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 2%;
}

div.content_container div.element_header h2 span {
	color: #888888;
}

div.content_container div.element_header h2 br {
	display: none;
}


div.content_container div.element_header h3 {
	font-size: 250%;
	font-weight: normal;
	background-color: #000000;
	color: #FFFFFF;
}


div.element_picture {
	width: 100%;
	overflow: hidden;
	height: 35em;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	z-index: 1;
	transition: 1s;
	transition-property: transform;	
	cursor: pointer;
	opacity: 1;
	height: 60%;
}

div.element_picture:hover {
	opacity: 1;
	transform: scale(1.05);
}

div.element_text {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100%;
	width: 40%;
	height: 100%;
    opacity: 1;
    margin: 0 auto;
}

img.element {
	width: 100%;
	overflow: hidden;
}

img.element_text {
	position: relative;
	bottom: 75%;
}


/* FDC */

div.content_container[data-project="shirt-factory"] div.element_picture {

}


/* BB */

div.content_container[data-project="bultaco"] div.element_picture {
	background-position: center center;
}

/* JLN */

div.content_container[data-project="mynameisjulen"] div.element_picture {
	background-position: center center;
}





div.content_container[data-category="element"] div.arrow {
    text-decoration: none;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -123%);
}

div.content_container div.arrow a.arrow {
    text-decoration: none;
}



/* ABOUT */

div.content_container#about_container[data-category="about"] {
	position: relative;
	padding: 25vh 10%;
	min-height: 100vh;
	box-sizing: border-box;
	transform-style: inherit;
	background: 50% 50% / cover;
	padding-right: 0;
	padding-left: 0;
	padding-top: 1px;
	height: 100%;
	width: 100%;
	background-image: url("../img/wall.jpg");
	font-family: font2;
	color: #FFFFFF;
}

div.content_container[data-category="about"]:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: 50% 50% / cover;	
}


div#about {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    font-size: 20px;
}

div#about_container_small {
    background-color: rgba(0,0,0,0.6);
}

h2#about_header {
	font-size: 200%;
	padding-top: 5%;
}

hr {
	background-color: #000000;
	width: 85%;
}

p#about_text {
	font-family: font3;
	font-size: 142%;
	padding: 0 8%;
	text-align: left;
	padding-bottom: 6%;
}


p#about_text span {
	font-size: 130%;
	font-family: font3;
}

p#about_text a {
	font-family: Courier;
	font-size: 100%;
	color: #0099FF;
	text-decoration: none;
	font-style: italic;
	transition: color 0.5s;
	font-weight: bold;
}

p#about_text a:hover {
	color: #CCCC00;
}

div.content_container[data-category="about"] div.arrow {
    text-decoration: none;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -123%);
}


div.fading_background {
	position: relative;
    padding: 25vh 10%;
    min-height: 100vh;
    box-sizing: border-box;
    transform-style: inherit;
    background: 50% 50% / cover;
    padding-right: 0;
    padding-left: 0;
    padding-top: 1px;
    height: 100%;
    width: 100%;
    background-image: url("../img/strand.jpg");
    font-family: font2;
    color: #FFFFFF;
    background-size: cover;
	display: block;
    background-size: 10%;
    position: absolute;
    top: 0%;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
}


/* ERROR */

div.content_container[data-category="error"]#error {
	position: relative;
	min-height: 100vh;
	box-sizing: border-box;
	transform-style: inherit;
	background: 50% 50% / cover;
	padding-right: 0;
	padding-left: 0;
	padding-top: 1px;
	height: 100%;
	width: 100%;
	color: #FFFFFF;
	background-size: cover;
	z-index: 2;
	font-family: font4;
}

div.text {
	position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    width: 80%;
    height: 90%;
    color: #000000;
    font-size: 330%;
    text-align: center;
}

div.logo#error_logo {
	transition: 1s;
	background-size: contain !important;
}

div.logo#error_logo:hover {
	background: #000000 url("../img/logo_white.png");
}

div.text p:nth-child(4) {
    font-size: 50%;
    margin-bottom: 0;
    margin-top: 10%;
    font-family: Courier;
}

div.error_type {
	position: absolute;
    height: 100vh;
    width: 100vw;
    font-family: font4;
    font-size: 100vh;
    opacity: 0.1;
    text-align: center;
    vertical-align: text-bottom;
    line-height: 1;
    color: #000000;
}

/* 500 */
div.content_container[data-category='error'] div.text p a {
    color: #0099FF;
    text-decoration: none;
    transition: color 0.5s;
    font-weight: bold;
}

div.content_container[data-category='error'] div.text p a:hover {
    color: #CCCC00;
}

div.content_container[data-error='500'] {
	font-family: font5 !important;
	font-size: 59%;
}

div.content_container[data-error='500'] div.text p {
	margin-bottom: 10%;
}




/* LANGUAGE */

@media (max-width: 800px) {

	div.lang {
		top: 66%;
	}

	div.lang div {
		position: relative;
		margin: 0 auto;
		left: 0% !important;
		transform: translateX(0%);
		width: 200px;
	}

	div.lang div:nth-child(1) {
		bottom: 0.2em;
	}

	div.lang div:nth-child(3) {
		top: 0.2em;
	}
		
}


@media (max-width: 800px) and (max-height: 700px) {

	div.logo#lang_logo {
		top: 30%;
	}

}

@media (max-height: 750px) {

	div.logo#logo {
		top: 0% !important;
	}

	div.headers {
		top: 60%;
	}

}

@media (min-width: 1200px) {
	
	div.content_container[data-project="bultaco"] div.element_picture {
		background-position-y: 30%
	}
}

@media (max-width: 800px) and (max-height: 470px) {

	div.logo#lang_logo {
		transform: translate(-50%, -50%) scale(1.5);
	}

	div.lang {
		transform: translate(-50%, 0) scale(0.8);
		top: 60%;
	}


}

@media (max-width: 800px) and (max-height: 350px) {

	div.logo#lang_logo {
		transform: translate(-50%, -50%) scale(1);
	}

	div.lang {
		transform: translate(-50%, 0) scale(0.5);
		top: 50%;
	}

}

@media (max-width: 800px) and (max-height: 250px) {

	div.lang {
		top: 45%;
	}

	div.lang div {
		left: 50% !important;
    	transform: translateX(-50%);
    	margin: 0;
	}

}

@media (max-width: 800px) and (max-height: 200px) {

	div.logo#lang_logo {
		transform: translate(-50%, -50%) scale(0.8);
	}

	div.lang {
		transform: translate(-50%, 0) scale(0.35);
		top: 40%;
	}

}

@media (max-width: 220px) and (max-height: 176px) {

	div.logo#lang_logo {
		top: 65px;
	}

	div.lang {
		top: 105px;
	}

}


/* INTRO */


@media (max-height: 430px) and (max-width: 450px) {

	div.logo#logo {
		transform: scale(0.6);
		top: -34px !important;
	}

}

@media (min-height: 1050px) {

	div.headers {
		position: relative !important;
		top: 250px !important;
	}

}


@media (min-height: 1530px) {

	div.content_container[data-category="intro"]#intro_container {
		background-size: cover;
	}

}

@media (min-width: 2200px) {

	div.content_container[data-category="intro"]#intro_container {
		background-size: cover;
	}

}

@media (max-height: 750px) {

	div.content_container[data-category="intro"]#intro_container {
		background-position: center 20%;
	}

}

@media (max-height: 750px) {

	div.headers {
	    top: 45%;
	}

}

@media (max-height: 700px) {

	div.headers {
	    top: 50%;
	}

}

@media (max-height: 630px) {

	div.headers {
	    top: 55%;
	}

}

@media (max-height: 570px) {

	div.headers {
	    top: 57%;
	}

}

@media (max-height: 550px) {

	div.headers {
	    top: 60%;
	}

}


@media (max-height: 440px) {

	div.logo#logo {
		top: -8% !important;
	}

}

@media (max-height: 380px) {

	div.logo#logo {
		top: -10% !important;
	}

}

@media (max-height: 520px) {

	div.content_container[data-category="intro"]#intro_container {
		background-position: center 26%;
	}

}

@media (max-height: 414px) {

	div.content_container[data-category="intro"]#intro_container {
		background-position: center 29%;
	}

}

@media (max-height: 377px) {

	div.content_container[data-category="intro"]#intro_container {
		background-position: center 30.5%;
	}

}

@media (max-height: 330px) {

	div.headers {
		display: none;
	}

	div.logo#logo {
		transform: scale(1);
		top: 0% !important;
	}

}

@media (max-height: 330px) and (max-width: 340px) {

	h2#about_header {
		font-size: 11px !important;
	} 

	p#about_text {
		font-size: 10px !important;
	}

}

@media (max-height: 440px) {

	div.logo#logo {
		transform: scale(0.6);
	}

}

@media (min-width: 550px) and (max-height: 550px) {

	div.logo#logo {
		top: -15% !important;
	}

}

@media (min-width: 625px) and (max-height: 550px) {

	div.logo#logo {
		top: -17% !important;
		transform: scale(1);
	}	

}

@media (min-width: 935px) and (max-height: 550px) {

	div.box {
		font-size: 55% !important;
	}

}

@media (max-height: 330px) {

	div.logo#logo {
 	   transform: scale(1);
 	   top: 0% !important;
	}

}

@media (max-height: 367px) and (min-width: 625px) {

	div.logo#logo {
    	top: -28% !important;
    }

}

@media (max-height: 350px) {

	div.content_container[data-category="intro"] div.logo#logo {
		top: -10% !important;
		transform: scale(0.7);
	}

	div.arrow {
		position: absolute;
	    left: 50%;
	    top: 100%;
	    transform: translate(-50%, -123%) scale(0.7) !important;
	}

	div.circle {
		width: 60px !important;
		height: 60px !important;
	}

	div.extra div p {
		font-size: 50% !important;
	}

}

@media (max-height: 300px) {

	div.content_container[data-category="intro"] div.logo#logo {
		top: -25% !important;
	}

}

@media (max-height: 200px) {

	div.content_container[data-category="intro"] div.logo#logo {
		top: -42% !important;
		transform: scale(0.5);

	}

}


/* ELEMENTS */

@media (max-width: 1300px) {

	div.content_container div.element_header h2 br {
		display: block;
	}

}

@media (max-width: 1300px) and (min-width: 1200px) {

	div.element_header {
		font-size: 80% !important;
	}

}

@media (max-height: 785px) {

	div.element_picture {
		height: 55%;
	}

}

@media (max-height: 700px) {

	div.element_picture {
		height: 50%;
	}

}

@media (max-height: 600px) {

	div.element_picture {
		height: 45%;
	}

}

@media (max-width: 1300px) and (min-width: 1000px) and (max-height: 900px) {

	div.element_picture {
		height: 45%;
	}

}

@media (max-width: 999px) and (min-width: 810px) and (max-height: 665px) {

	div.element_picture {
		height: 45%;
	}

}

@media (max-width: 1300px) and (min-width: 810px) and (max-height: 665px) {

	div.element_header {
		font-size: 60% !important;
	}

}

@media (max-width: 1300px) and (min-width: 810px) and (max-height: 560px) {

	div.element_picture {
		margin-top: 0% !important;
	}

}

@media (max-width: 809px) and (max-height: 555px) {

	div.element_picture {
		margin-top: 0% !important;
	}

}

@media (max-width: 809px) and (max-height: 495px) {

	div.element_picture {
		margin-top: -1% !important;
	}

}

@media (max-width: 1300px) and (max-height: 490px) {

	div.element_header h2 {
		margin-bottom: 0% !important;
	}

	div.element_header h3 {
		margin-top: 0% !important;
	}

}

@media (max-width: 610px) and (max-height: 390px) {

	div.element_header h3 {
		margin-bottom: 2%;
	}

}

@media (min-width: 1800px) {

	div.element_picture {
		margin-top: 1% !important;
	}
}

@media (min-width: 2000px) {

	div.element_text {
		width: 40% !important;
	}
}

@media (min-width: 550px) and (max-height: 420px) {

	div.element_header {
		font-size: 45% !important;
	}

	div.element_header h3 {
		margin-bottom: 2%;
	}

}

@media (max-width: 350px) and (max-height: 375px) {

	div.element_header {
		font-size: 20% !important;
	}

	div.element_picture {
	    margin-top: 0% !important;
	}

	div.arrow {
		position: absolute;
	    left: 50%;
	    top: 100%;
	    transform: translate(-50%, -90%) scale(0.5) !important;
	}	

}


@media (max-height: 420px) and (min-width: 940px) {

	div.element_header h3 {
		margin-bottom: 0.5%;
	}

}


/* ABOUT */

@media (max-height: 780px) {

	div#about {
		top: 48%;
	}
}


@media (max-height: 750px) {

	div#about {
		transform: translate(-50%, -50%) scale(0.8);
		width: 120% !important;		
	}

}

@media (max-width: 510px) and (max-height: 500px) {

	div#about {
		transform: translate(-50%, -50%) scale(0.7);
	}

}

@media (max-height: 626px) {

	h2#about_header {
		font-size: 200%;
	    padding-top: 0%;
	    margin-top: 0;
	    margin-bottom: 0;
	}
}

@media (max-height: 420px) {

	div#about {
		font-size: 14px !important;
	}
}

@media (max-height: 380px) {

	p#about_text {
		padding-bottom: 2%;
	}

}

@media (max-height: 350px) {

	div#about {
		font-size: 12px !important;
	}

	p#about_text {
		padding-bottom: 0%;
	}

}

@media (max-height: 340px) {

	p#about_text {
		margin-top: 0%;
	}

}

@media (max-height: 330px) {

	div.content_container[data-category="about"] div.arrow {
    	transform: translate(-50%, -80%) scale(0.50) !important;
	}

}

@media (max-height: 300px) {

	div#about {
		font-size: 10px !important;
	}

}

@media (max-height: 230px) {

	div#about {
		font-size: 8px !important;
	}

}


/* PRINT */

@media print {

	html {
		-webkit-print-color-adjust: exact;
	}

}

/* DE */

html[lang='de'] div.headers {
	font-size: 0.94em;
}

/* ES */

html[lang='es'] div.headers {
	font-size: 0.99em;
}



/* VIDEO */
video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100vw;
    min-height: 100vh;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%);
    background: url('../video/waves.png') no-repeat;
    background-size: cover;
    transition: 1s opacity;
}


@media (min-width: 1000px) {

	div.content_container[data-category="intro"]#intro_container {
		background-image: url("");
	}
}

@media (max-width: 999px) {

	div.content_container[data-category="intro"]#intro_container {
		    background-image: url("../img/bgn.jpg");
	}

	video {
		display: none;
	}
}


/* MOBILE SCROLLBAR BUG */
/*
div.content_container {
	height: 100vh !important;
	width: 100vw !important;
}*/

/* ERROR */

@media (max-width: 1490px) {

	div.error_type {
		display: none;
	}

}

@media (max-height: 800px) {

	div.error_type {
		display: none;
	}

}

/* 2026 compatibility additions — no visual redesign */
@media print {
    html {
        print-color-adjust: exact;
    }
}

[role="link"]:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}