/*** 
unsplash.com API has changed
random images don't work like they used to
a still image has been posted
until I can investigate the new API

------------------------------------

The random image on unsplash.com works again as before. 
I leave it activated again.
***/
@font-face {
	font-family: NeueHaas-bold;
	src: url(../fonts/NeueHaasDisplayBold.ttf);
}

@font-face {
	font-family: NeueHaas-regular;
	src: url(../fonts/NeueHaasDisplayRoman.ttf);
}

@font-face {
	font-family: NeueHaas-medium;
	src: url(../fonts/NeueHaasDisplayMediu.ttf);
}

@font-face {
	font-family: Metro;
	src: url(../fonts/metro-time-sign.ttf);
}

.space-mono-regular {
	font-family: "Space Mono", monospace;
	font-weight: 400;
	font-style: normal;
}

.space-mono-bold {
	font-family: "Space Mono", monospace;
	font-weight: 700;
	font-style: normal;
}

.space-mono-regular-italic {
	font-family: "Space Mono", monospace;
	font-weight: 400;
	font-style: italic;
}

.space-mono-bold-italic {
	font-family: "Space Mono", monospace;
	font-weight: 700;
	font-style: italic;
}

* {
	scroll-behavior: smooth;
	cursor: url('../images/dott-cursor.svg'), auto;
	::selection {
		background-color: transparent;
		color: #E84922;
	}
	font-family: NeueHaas-medium;
}

/* width */
::-webkit-scrollbar {
	width: 15px;
}
  
  /* Track */
::-webkit-scrollbar-track {
	background: #171717; 
}
   
  /* Handle */
 ::-webkit-scrollbar-thumb {
	background: #E84922; 
	border-radius: 5%;
}
  
  /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #A8FF19; 
}

a {
	cursor: url('../images/dott-cursor-point.svg'), pointer;;
}

:root {
	--trsn: all 0.5s ease 0s;
	--black: #000;

	--hyperplexed-main-rgb: 41 121 255;
	--hyperplexed-main-light-rgb: 56 182 255;
	--hyperplexed-secondary-rgb: 42 252 152;

	--card-size: 480px;

	--background-light-rgb: 30 41 59;
}

.bg-grain {
	position: fixed;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	background-color: #171717
}

.film,
.effect,
.grain {
	position: absolute;
}


.all {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	position: absolute;
	top: 0;
}

.film,
.effect {
	width: 100%;
	height: 100%;
	filter: blur(0.01px) drop-shadow(0px 0px 0px #505050);
	position: absolute;
}

.film:after,
.effect:after {
	content: '';
	width: 120%;
	height: 100%;
	top: 0;
	left: 0;
	padding-left: 100px;
	opacity: 0.5;
	animation: film-scratch 4s steps(1) infinite;
	background: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 37vmin);
	position: absolute;
}

.effect:after {
	left: 30%;
	animation: effect-scratch 2s infinite;
	position: absolute;
}

.grain {
	width: 100%;
	height: 100%;
	position: absolute;
}

.grain:after {
	content: '';
	width: 110%;
	height: 110%;
	top: -5%;
	left: -5%;
	opacity: .25;
	background-image:
		repeating-conic-gradient(var(--black) 0%, transparent .00003%, transparent .0005%, transparent .00095%),
		repeating-conic-gradient(var(--black) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
	animation: grain 1s steps(1) infinite;
	filter: drop-shadow(0px 0px 1px black);
	position: absolute;
}

@keyframes grain {

	0%,
	100% {
		transform: translate(0, 0);
	}

	10% {
		transform: translate(-1%, -1%);
	}

	20% {
		transform: translate(1%, 1%);
	}

	30% {
		transform: translate(-2%, -2%);
	}

	40% {
		transform: translate(3%, 3%);
	}

	50% {
		transform: translate(-3%, -3%);
	}

	60% {
		transform: translate(4%, 4%);
	}

	70% {
		transform: translate(-4%, -4%);
	}

	80% {
		transform: translate(2%, 2%);
	}

	90% {
		transform: translate(-3%, -3%);
	}
}

@keyframes film-scratch {

	0%,
	100% {
		transform: translateX(0);
		opacity: 0.5;
	}

	10% {
		transform: translateX(-1%);
	}

	20% {
		transform: translateX(1%);
	}

	30% {
		transform: translateX(-2%);
		opacity: 0.75;
	}

	40% {
		transform: translateX(3%);
	}

	50% {
		transform: translateX(-3%);
		opacity: 0.5;
	}

	60% {
		transform: translateX(8%);
	}

	70% {
		transform: translateX(-3%);
	}

	80% {
		transform: translateX(10%);
		opacity: 0.25;
	}

	90% {
		transform: translateX(-2%);
	}
}

@keyframes effect-scratch {
	0% {
		transform: translateX(0);
		opacity: 0.75;
	}

	10% {
		transform: translateX(-1%);
	}

	20% {
		transform: translateX(1%);
	}

	30% {
		transform: translateX(-2%);
	}

	40% {
		transform: translateX(3%);
	}

	50% {
		transform: translateX(-3%);
		opacity: 0.5;
	}

	60% {
		transform: translateX(8%);
	}

	70% {
		transform: translateX(-3%);
	}

	80% {
		transform: translateX(10%);
		opacity: 0.25;
	}

	90% {
		transform: translateX(20%);
	}

	100% {
		transform: translateX(30%);
	}
}

#nav-row {
	position: fixed;
	font-family: NeueHaas-bold;
	font-size: 50px;
	color: white;
	z-index: 999;
	width: 100%;
}

.navigation {
	position: absolute;
	top: 20px;
	right: 40px;
	text-align: right;
	letter-spacing: 7px;
	cursor: url('../images/dott-cursor-point.svg'), pointer;
	text-decoration: none;
	color: white;
	z-index: 999999999;
}

.logo {
	position: absolute;
	top: 20px;
	left: 40px;
	text-decoration: none;
	color: white;
}

.hero_text {
	font-family: NeueHaas-medium;
	font-size: 250px;
	line-height: 200px;
	color: white;
	text-transform: uppercase;
	margin-top: auto !important;
	margin-bottom: auto;
	margin-left: 20%;
	z-index: 999;
	position: relative;
}

.dott {
	color: #E84922;
	width: fit-content !important;
}

.dott-green {
	color: #505050;
	width: fit-content !important;
}

#glitch:hover {
	animation: glitch 1s linear infinite;
}

@keyframes glitch {

	2%,
	64% {
		transform: translate(2px, 0) skew(0deg);
	}

	4%,
	60% {
		transform: translate(-2px, 0) skew(0deg);
	}

	62% {
		transform: translate(0, 0) skew(5deg);
	}
}

#glitch:before,
#glitch:after {
	content: attr(title);
	position: absolute;
	left: 0;
}

#glitch:before {
	animation: glitchTop 1s linear infinite;
	clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop {

	2%,
	64% {
		transform: translate(2px, -2px);
	}

	4%,
	60% {
		transform: translate(-2px, 2px);
	}

	62% {
		transform: translate(13px, -1px) skew(-13deg);
	}
}

#glitch:after {
	animation: glitchBotom 1.5s linear infinite;
	clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom {

	2%,
	64% {
		transform: translate(-2px, 0);
	}

	4%,
	60% {
		transform: translate(-2px, 0);
	}

	62% {
		transform: translate(-22px, 5px) skew(21deg);
	}
}

#nav.section {
	padding-top: 5%;
	height: 100vh;
	margin-top: 40vh;
}

.nav-points {
	position: relative;
	float: right;
	padding-right: 30px;
	font-family: NeueHaas-medium;
	font-size: 250px;
	line-height: 200px;
	text-transform: uppercase;
	color: white;
	cursor: url('../images/dott-cursor-point.svg'), pointer;
	transition: 0.1s ease-in-out;
	text-decoration: none;
	margin-left: 20%
}

.nav-points:hover {
	line-height: 250px;
	letter-spacing: 20px;
	color: #E84922;
}

.section {
	height: 100%;
	position: relative;
	padding-top: 30vh;
}

.headline {
	color: white;
	font-size: 7.5vw;
	text-transform: uppercase;
	z-index: 9;
	position: relative;
}

.subline {
	color: white;
	font-size: 6vw;
	text-transform: uppercase;
	z-index: 9;
	position: relative;
}

.text-block {
	color: white;
	font-family: NeueHaas-medium;
	z-index: 9;
	position: absolute;
	font-size: 3vw;
	line-height: 3vw;
}

.f-text-block {
	color: white;
	font-family: NeueHaas-regular;
	z-index: 9;
	position: absolute;
	font-size: 1.2vw;
	width: 50%;
}

.text-block p:hover {
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}
  
@keyframes shake {
	50%{
	  transform: translate3d(-8px, 0, 0);
	}
  }

#About.section {
	height:100vh;
}

#About .headline {
	text-align: center;
}

#About .f-text-block {
	padding-right: 10%;
	right: 0;
}

.half-container {
	position:relative;
	left:0;
	width:50%;
}

.about-img {
	position: absolute;
	width: 30vw;
	height: auto;
	right: 2vw;
	top: -10vh;
    border-radius: 4px;
}

#web-online.section {
	height:100vh;
}

#web-online .headline {
	padding-left: 2%
}

#web-online .text-block {
	padding-left: 10%;
}

#it-solutions.section {
	height:100vh;
}

#it-solutions .headline {
	padding-right: 2%;
	text-align: end;
}

#it-solutions .text-block {
	padding-right: 10%;
	right: 0;
	text-align: end
}

#design.section {
	height:100vh;
}

#design .headline {
	padding-left: 2%
}

#design .text-block {
	padding-left: 10%;
	left: 0;
}


#Features.section {
	margin-top: 40vh;
	background-color: #E84922;
    padding-bottom: 10vh;
	padding-top: 10vh;
	cursor: url('../images/dott-cursor-green.svg'), auto;
	::selection {
		background-color: transparent;
		color: #A8FF19;
	}
}

#Features .headline {
	text-align: center;
	color: #171717;
	cursor: url('../images/dott-cursor-green.svg'), auto;
}

.f-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-auto-rows: auto;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	cursor: url('../images/dott-cursor-green.svg'), auto;
}

.f-item.f-text-block {
	padding:2vh;
	text-align: justify;
	color:#171717;
	cursor: url('../images/dott-cursor-green.svg'), auto;
	position:relative;
	width: 100%;
}

.features-img {
	width: 100%;
	height: auto;
    border-radius: 4px;
	cursor: url('../images/dott-cursor-green.svg'), auto;
}
	

#Projects .headline {
	text-align: end;
	margin-right: 5vw;
}

#Projects .subline {
	position: absolute;
	left: 5vw;
	top:-7vw;
}

#Projects .section {
	height: 100% !important;
}

.subtext-first {
	font-family: NeueHaas-medium;
	font-size: 80px;
	color: white;
	width: 50%;
	line-height: 100%;
	margin: 25vh 0px 4vh 4vh;
}

.subtext {
	font-family: NeueHaas-medium;
	font-size: 80px;
	color: white;
	width: 50%;
	line-height: 100%;
	margin: 35vh 0px 4vh 4vh;
}

.project-nav {
	height:fit-content;
	width: fit-content;
	margin: 5vw 0px 5vw auto;
	position: sticky;
	top: 100px;
	z-index: 99;
}

.item-nav{
    position: relative;
	text-align: end;
	padding-right: 5vw;
	width: 100%;
	display: block;
    font-family: NeueHaas-medium;
    font-size: 100px;
    line-height: 80px;
    text-transform: uppercase;
    color: white;
    cursor: url('../images/dott-cursor-point.svg'), pointer;
    transition: 0.1s ease-in-out;
    text-decoration: none;
	text-shadow: 0px 0px 50px #171717;

	&:hover {
		color:#E84922;
		letter-spacing: 5px;
	}
}

nav a.active {
	color:#A8FF19 !important;
}


.gallery-row {
	position: relative;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.gallery-wrap {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 50vh;
}
  
.item-accord {
	flex: 1;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: none;
	transition: flex 0.8s ease;
	position: relative;
	filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
	
	&:hover{
	  flex: 8;
	  opacity: 1 !important;
	  filter: none;
      -webkit-filter: grayscale(0);
	}
}
  
.item-1 { 
	background-image: url('../images/image_Christof-Beck.jpg');
}
  
.item-2 { 
	background-image: url('../images/image_Hallo-Beruf.webp');
}

.item-3 { 
	background-image: url('../images/image_ibb.jpg');
}

.item-4 { 
	background-image: url('../images/image_Kramar.jpg');
}

.item-5 { 
	background-image: url('../images/image_wbcon.jpg');
}

.img-logo {
	position: absolute;
	bottom: 1vw;
	left: 1.5vw;
	height: 40px;
	width: auto;
}

.img-logo-cube {
	position: absolute;
	bottom: 1vw;
	left: 1.5vw;
	height: 60px;
	width: auto;
}

.text-accord {
	position: absolute;
	bottom: 1vw;
	right: 1vw;
	font-family: NeueHaas-medium;
	text-align: end;
	font-size: 100px;
	line-height: 140px;
	color: white;
	animation: fadeOut 0.5s;
	opacity: 0;
	text-transform: uppercase;
}

.item-accord:hover .text-accord {
	animation: fadeIn 1.5s;
	opacity: 1;
}

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

#Partner.section {
	padding-top: 10vh;
}

#Partner .headline {
	margin: 15vh 0 -4vh 20vw;
}

.p-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-auto-rows: auto;
	width: 100%;
	padding: 10vh 10vh;
	background-color: #171717;
}

.p-item {
	width: auto;
	max-height: 100px;
    border-radius: 4px;
	margin:0 2vw;
}

#Jobs.section {
	height: fit-content;
	margin: 10vh 0 40vh;
}

#Jobs .headline {
	text-align: end;
	margin-right: 20vw;
}

.collapsible li {
	list-style: none;
	border-top: 3px dashed #A8FF19;
	border-bottom: 3px dashed #A8FF19;
	font-family: NeueHaas-medium;
	font-size: 50px;
	color: white;
	width: 90%;
	margin: -3px auto;
	padding: 2vh;
	
}

.collapsible li label {
	display: flex;
	align-items: center;
	padding: 2vh;
	cursor: url('../images/dott-cursor-point.svg'), pointer;
}

.collapsible li label:hover {
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}


.collapsible label::before {
	content: '+';
	margin-right: 2vw;
	font-size: 50px;
	font-weight: 600;
	color: white;
}

.collapsible input[type="radio"]{
	display: none;
}

.collapsible .content {
	padding:  0vh 2vw;
	font-family: NeueHaas-regular;
	font-size: 50px;
	color: white;
	max-height: 0;
	overflow: hidden;
	transition: max-height 1s, padding 1s;
}

.collapsible input[type="radio"]:checked + label + .content{
	max-height: fit-content;
	padding: 2vh 2vw;
}

.collapsible input[type="radio"]:checked + label::before{
	content: '-';
}

.footer {
	height: 10vh;
	background-color: #171717;
	color: #A8FF19;
	padding: 3vh;
	font-size: 1vw;
}

.footer .row {
	width: fit-content;
	margin: auto;
}

.f-link {
	font-family: NeueHaas-medium;
	text-decoration: none;
	color:#A8FF19;
	width: fit-content !important;
}




#Detail .headline {
	width: fit-content;
	margin: 10vh auto 5vh 10vw;
}

#Detail .subline {
	font-size: 4vw;
}

.d-grid {
	margin: 2vh 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, auto));
	grid-auto-rows: auto;
	border-top: 5px dashed #A8FF19;
	border-bottom: 5px dashed #A8FF19;
}

.chip {
	font-family: NeueHaas-medium;
	font-size: 1.7vw;
	padding: 1vw 0;
	color: #A8FF19;
	text-align: center;
}

.text-box {
	width: 70%;
}

#end {
	text-align: end;
	margin: 10vh 4vw 10vh auto;
}

#start {
	text-align: start;
	margin: 10vh auto 10vh 4vw;
}

#Detail .text-block {
	font-size: 2vw;
	line-height: 100%;
	text-align: justify;
}

.image-spacer {
	width: 100%;
	height: 70vh;
	padding: 5vh 0;
	background-image: url(../images/image_Kramar_2_blur.png);
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	position: relative;
}

#image-track {
	display: flex;
	gap: 10vw;
	position: absolute;
	left: 25%;
	top:50%;
	transform: translate(0%, -50%);
	user-select: none;
}

#image-track .image {
	height: auto;
	width: 50vw;
	object-fit: cover;
  	object-position: 100% center;
}

.code {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	overflow: hidden;
	padding-top: 9%;
}

.code-gradient {
	height: fit-content;
	width: 100%;
	position: absolute;
	background: radial-gradient(
	  rgb(var(--background-light-rgb)) 50%, 
	  rgb(var(--hyperplexed-main-rgb)) 50%, 
	  rgb(var(--hyperplexed-main-light-rgb)),
	  rgb(var(--hyperplexed-secondary-rgb))
	);
	mix-blend-mode: darken; 
	pointer-events: none;
  }

.code-letters {
	--x: 0px;
	--y: 0px;
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 100%;
	color: #A8FF19;
	font-size: var(--font-size);
	font-weight: 500;
	word-wrap: break-word;
	opacity: 0;
	transition: opacity 400ms;
	mask-image: radial-gradient(
		calc(var(--card-size) * 0.8) circle at var(--x) var(--y), 
		rgb(255 255 255) 20%, 
		rgb(255 255 255 / 25%), 
		transparent
	);
	scale: 1.03;
}

.code:hover .code-letters {
	opacity: 1;
  }