@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
  font-family: Serico;
  src: url('fonts/Serico-Regular.ttf'), 
}


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

	letter-spacing:0.1em;

	display: block;
	color: #878787;
	font-family: 'Archivo', sans-serif;


}

/*TEXTSIZES*/


.large {
	font-size: 4em;
}

.midlarge {
	font-size: 3em;
}   

.mid {
	font-size: 2em;
}

.small {
	font-size: 1em;
}


a {
	color: #ff6139;
}




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

.logo {
	color: #ff6139;
	font-size: 2em;
	font-weight: bold;
	letter-spacing:0.1em;
	text-decoration: none;
	/*font-family: 'Serico', sans-serif;*/
}

.logosvg img{	
	height: 3em !important;
}

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

.menu{
	color: #ff6139;
	font-size: 1.5em;
	font-weight: bold;
}

.menulight{
	color: #ff6139;
	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: #878787;
}


#page {
}

#fullimg {
	
}

#fullimg .bgimg{

	position: relative;
	width: 94%;
	top: 15vh;
	left: 3%;
	z-index: -100 !important;
	height: 100vh;

	background: url(imgs/JanKress_Blur.gif) no-repeat top center fixed;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;

}

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

}

.bigheadline a{
	color: #ff6139;
	font-style: italic;
}

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

}

.bigheadline span{
	color: #ff6139;
	}

.headlineitalic {

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


.projectvert {
	width: 40%;
	margin-left: 6%;
	margin-bottom: 6em;
	/*height: 40em;*/
}

.projecthori {
	width: 40%;
	margin-left: 6%;
	margin-bottom: 6em;
	/*height: 20em;*/
	float: left;
}

.projectimg {
	width: 100%;
	/*float: left;*/
	/*height: 100%;*/
}

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

.projectname {
	position: relative;
	color: #878787;
	width: 100%;
	margin-left: 0%;
	/*float: left;*/
	height: 100% !important;
	background: rgb(255,138,104);
    background: linear-gradient(0deg, rgba(255,138,104,1) 8%, rgba(255,155,128,1) 23%, rgba(255,168,146,1) 40%, rgba(255,255,255,0) 78%);
    background: url(imgs/grad.png) no-repeat top center;
    background-size: cover;
    margin-top: -8.5em;

}

.projectname p{
	margin-left: 10%;
}

.projectdata {
	position: absolute;
	width: 40%;
	bottom: 4em;
	left: 10%;
	margin-top: -2em;
}


.clear {
	clear: both;
}






/*PROJECT PAGE*/

#video {
	width: 100%;
	height: 80vh;
	background: black;
}

#pagecontent-projectsvideo {
	position: absolute;
	top:80vh;

}

#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%;
	margin-bottom: 6em;
}


/*INFO PAGE*/

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

}

#maskdiv {
	position: relative;
	width: 100%;
	height: 100vh;
	
	

    clip-path: polygon(0 0, 100% 0, 100% 100%, 19% 69%);
}

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

   
}


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

}

#list a{
	font-weight: bold;
}


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

	#header {
		font-size:200%;
	}

	#fixedimage {
	position: fixed;
	width: 100%;
	height: 100vh;
	
	background: url(imgs/Jan3.jpg) no-repeat top center;
	-webkit-background-size: cover;
  	-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;
	}

#maskdiv {
	position: relative;
	width: 100%;
	height: 100vh;
	
	background: url(imgs/Jan3d.jpg) no-repeat top center;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;

    clip-path: polygon(0 0, 100% 0, 100% 100%, 19% 69%);
}

}