@font-face {
  font-family: Ortica;
  src: url('fonts/Ortica-Light.woff');
  font-weight: normal; 
  font-style: normal;
}


@font-face {
  font-family: Authentic;
  src: url('fonts/AUTHENTICSans-90.woff2');
  font-weight: normal; 
  font-style: normal;
  size-adjust: 100%;
}

@font-face {
  font-family: NotoSans;
  src: url('fonts/NotoSans.ttf');
  font-weight: normal; 
  font-style: normal;
  size-adjust: 125%;
}


:root {
	--accent-color: #6495ED;
}


Body{
	margin-left:0px;
	margin-top: 0px;
	padding: 0;  
	width:100%; 

	letter-spacing:0.1em;

	display: block;
	color: #000;
	font-family: 'Ortica', serif;
	font-size: 0.9vw;
	background: #DDD;

}

/*TEXTSIZES*/


.large {
	font-size: 4em;
}

.midlarge {
	font-size: 3em;
}   

.mid {
	font-size: 2em;
}

.small {
	font-size: 1em;
}


a {
	color: var(--accent-color);
}




#header {
	position: fixed;
	top:2em;
	left: 6%;
	width: 88%;
	z-index: 100;
}   

.logo {
	color: #000;
	font-size: 2em;
	font-weight: bold;
	letter-spacing:0.1em;
	text-decoration: none;
	font-family: 'Authentic', sans-serif;
	text-transform: capitalize !important;
	z-index: 10000 !important;
}



.logo img{
  position: relative;	
	height: 2.7em !important;
	z-index: 200 !important;
	margin-left: -0.25em;
}

.logo span{
	position: relative;
	padding-top: 2.3em !important;
	margin-left: -0.65em;
	height: 100%;
	/*color: var(--accent-color);*/
	z-index: 201 !important;
	top: -0.8em;
}

#menu {
	float: right;
	margin-top: 2.1em;
}

#menu2 {
	position: absolute;
	right: 6%;
	top: -6vh;
}

.menu{
	color: #000;
	font-size: 1.5em;
	font-weight: normal;
}

.menulight{
	color: #000;
	font-size: 1.5em;
	font-weight: lighter;
	font-style: italic;
	letter-spacing: 0.12em;
}


#footer {

	margin-left: 6%;
	width: 88%;

}

#footertop {
	width: 100%;
}

#footerleft {
	width: 50%;
	float: left;
	margin-bottom: 3em;
}

#footerright {
	width: 50%;
	float: left;
	margin-bottom: 3em;
}

.grey {
	color: #000;
}

.move {
	font-family: "Ortica", sans-serif;
	font-weight: normal !important;
}


#page {
}


#fixedimageIndex {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100vh;
	
	/*background: url(imgs/3.gif) no-repeat bottom center;*/
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
transform: translateZ(0);
   
}

#fixedimageIndex video{
  object-fit: cover;
  object-position: bottom;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translateZ(0);
}




#pagecontent {
	position: absolute;
	top:100vh;

}

.bigheadline a{
	color: var(--accent-color);
	font-style: italic;
}

.bigheadline {
	
	width: 88%;
	margin-left: 6%;
	color: #000;
	font-size: 6em;
	font-weight: normal;
	text-align: left;
	margin-bottom: 1em;

}

.bigheadline span{
	color: var(--accent-color);
	/*font-family: "Authentic", sans-serif;*/
	}

.headlineitalic {

	width: 88%;
	margin-left: 6%;
	color: #000;
	font-size: 1.5em;
	font-weight: lighter;
	font-style: italic;
	text-align: left;
	letter-spacing: 0.12em;
}

#taglist{
	margin-left: 6%;
	width: 88%;
	font-style: italic;
}

.tag-selected{
	float: left;
	background: var(--accent-color);
	color: white;
	padding: 0.1em;
	padding-left: 0.2em;
	padding-right: 0.2em;
	margin-right: 1em;
	font-size: 1.5em;
	border: 1px solid var(--accent-color);
}

.tag{
	float: left;
	background: #fff;
	color: #000;
	padding: 0.1em;
	padding-left: 0.2em;
	padding-right: 0.2em;
	margin-right: 1em;
	font-size: 1.5em;
	border: 1px solid #000;
}

.projectbox {
	width: 88%;
	margin-left: 6%;
	margin-bottom: 12em;
	/*height: 40em;*/
	border-bottom: 1px solid var(--accent-color);
}

.projecthead{
}

.projectinfo{
}

.projectimg {
	width: 50%;
	float: left;
	margin-bottom: -4em;
}

.projectimg img{
	width: 85%;
	/*height: 100%;
	object-fit: cover;*/
}

.projecttext {
	width: 50%;
	float: left;
	margin-left: 0%; 
}

.clear {
	clear: both;
}


.tileview {
	width: 88%;
	margin-left: 6%;

	display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 1em 1em;
  grid-auto-flow: row;
  margin-bottom: 8em;
}

	.tile img {
  display: block;
  width: 100%;
  height: auto;

   filter: brightness(1) contrast(1) grayscale(0.2) hue-rotate(0deg) sepia(0) saturate(100%) ;
   mix-blend-mode: normal;
}

.filteroff {
	opacity: 1;
}

.tile {
	position: relative;
	background: var(--accent-color);
}

.myfilter{

    position: absolute; content: ''; display: block; top: 0; left: 0; height: 100%; width: 100%;

    background: var(--accent-color);

    mix-blend-mode: screen;
/*    opacity: 0.25; SET TO ZERO TO TURN OFF*/
opacity: 0;
    z-index: 10 !important;

}

	.tileoverlay:hover {
  opacity: 100 !important;
}

.tileoverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: var(--accent-color);
  z-index: 12;
}

.noimgtile {
	opacity: 0.77 !important;
	cursor: default;
}

 .tiletext {
        color: white;
  			font-size: 1em;
  			font-weight: normal;
 				position: absolute;
			  top: 50%;
			  left: 50%;
			  -webkit-transform: translate(-50%, -50%);
			  -ms-transform: translate(-50%, -50%);
			  transform: translate(-50%, -50%);
			  text-align: center;
    }

.tiletext b{
	font-family: "Authentic", sans-serif;
	text-transform: uppercase; !important;
}


/*PROJECT PAGE*/

#video {
	position: relative;
	width: 100%;
	margin-bottom: 3m;
}

#pagecontent-projectsvideo {
	position: relative; /* statt absolute */
	/* top: 110vh; <-- löschen */
	margin-left: 6%;
	width: 88%;
}


#pagecontent-projects {
	position: absolute;
	top:10em;

}

.projecttitle {
	width: 88%;
	margin-left: 6%;
}

.projectblurb {
	width: 88%;
	margin-left: 6%;
}

.gallery-container {
	width: 88%;
	margin-left: 6%;
	margin-bottom: 10em;
}

.gallery {
	width: 100%;
}

.columns {
	column-count: 2;
	width: 88%;
	margin-left: 6%;
	column-gap: 5%;
	margin-bottom: 6em;
}

.columns p{
  margin-top: 0 !important;
}

.credits {
	width: 88%;
	margin-left: 6% !important;
	margin-bottom: 6em;
}


/*INFO PAGE*/

#pagecontent-info {
	position: absolute;
	top: 120vh;

}

#maskdiv {
	position: relative;
	width: 100%;
	height: 100vh;
  clip-path: polygon(0 75%, 0 0%, 100% 0%, 100% 75%, 23.3% 95%);
}

#fixedimage {
	position: absolute;
	width: 100%;
	height: 95vh;
	
	background: url(imgs/timX.jpg) no-repeat bottom center;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;

   
}

.profileimg {
        width: 10em;
        height: 10em;
        object-fit: cover;
        border-radius: 50%;
    }

.contact {
	
	width: 88%;
	margin-left: 6%;
}

#list a{
	font-weight: normal;
}

.br-line {
	display: none;
}


#pagecontent-impressum{
	margin-top: 30vh;
}

.authentic{
		font-family: 'Authentic', sans-serif;
	}


@media only screen and (max-width: 968px) and (orientation: portrait) {
  /* For mobile phones: */
 	
	body {
	  font-size: 80%;
	}

	#header {
		font-size: 90%;
	}

	#schwerdter {
		display: none;
	}


	#fixedimage {
	position: fixed;
	width: 100%;
	height: 100vh;
	
	background: url(imgs/timX.jpg) no-repeat bottom center;
	-webkit-background-size: ;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	}


	.columns {
		column-count: 1;
		width: 88%;
		margin-left: 6%;
		column-gap: 5%;
		margin-bottom: 6em;
	}

	


	.tileview {
	
  grid-template-columns: 1fr;
  font-size: 1.25em;
 
	}

	.projectimg {
		width: 100%;
		margin-bottom: 2em;
	}

	.projectimg img{
		width: 100%;
	}

	.small{
		font-size: 1.5em;
	}

	.projecttext {
		width: 100%;
		float: left;
		margin-left: 0%; 
	}

	.br-line {
	display: block;
	}

	.contact {
		font-size: 2em;
	}


/*	#pagecontent-projectsvideo {

	top:50vh;
	
	}*/

	

/*	#video {
	top: 15%;
	}*/	



}


.custom-video-area {
	 position: relative;
	 z-index: 5;
	 width: 100%;
	 margin: auto;
	 text-align: left;
	 /* KEIN padding-bottom mehr */
}

.custom-video-area video {
	 display: block; /* statt absolute */
	 width: 100%;
	 height: auto; /* behält Original-Ratio */
}

.video-controls {
	 position: relative; /* statt absolute */
	 /* bottom: 0; <-- entfernen */
	 z-index: 10;
	 width: 100%;
	 padding: 0 0 1em 0;
	 background: #ddd;
	 border-bottom: 1px solid var(--accent-color) !important;
}

.row {
	margin-left: 6%;
}

 .video-controls.playing .play-button:before {
	 font-family: 'NotoSans';
	 content: '⏹';
	 color: #000;
}
 .video-controls .top-wrapper {
	 display: block;
}
 .video-controls .bottom-wrapper {
	 padding: 0 0px 0 0px;
	 display: block;
}
 .video-controls .progress-bar {
	 position: relative;
	 overflow: hidden;
	 width: 100%;
	 height: 10px;
	 margin-bottom: 1em;
	 cursor: pointer;
	 background: #ddd;
	 border-bottom: 1px solid var(--accent-color) !important;
}
 .video-controls .progress-bar span {
	 position: absolute;
	 top: 0;
	 left: 0;
	 display: block;
	 width: 0;
	 height: 100%;
}
 .video-controls .progress-bar .time-bar {
	 z-index: 10;
	 background: var(--accent-color);
}
 .video-controls .progress-bar .buffer-bar {
	 z-index: 5;
	 background: #ddd;
	 border-bottom: 1px solid var(--accent-color);
}
 .video-controls .play-button {
 	 font-size: 1.2em;
	 display: inline-block;
	 padding-right: 1em;
	 cursor: pointer;
	 vertical-align: middle;
}
 .video-controls .play-button:before {
	 font-family: 'NotoSans';
	 content: '⏵';
	 color: #000;
}
 .video-controls .time {
	 
	 display: inline-block;
	 padding-right: 6em;
	 vertical-align: middle;
	 color: #000;
}
 
 
 .video-controls .volume {
	 position: relative;
	 display: inline-block;
	 overflow: hidden;
	 width: 70px;
	 height: 4px;
	 cursor: pointer;
	 vertical-align: middle;
	 border-radius: 10px;
	 background-color: #fff;
}
 .video-controls .volume .volume-bar {
	 position: absolute;
	 z-index: 10;
	 top: 0;
	 left: 0;
	 display: block;
	 height: 100%;
	 background-color: var(--accent-color);
}