body{
	margin: 0;
	font-family: inter;
	font-size: 1vw;
}

h1{
	font-size: 150%;
	font-weight: normal;
	text-align: left;
	margin-left: 0.5em;
}

h2{
	font-weight: normal;
}

p{
	line-height: 150%;
}

.gardienttop{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 1.5vw;
	background: linear-gradient(rgba(255, 255, 255,1),rgba(255, 255, 255, 0));
}


.gardientbottom{
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100vw;
	height: 1.5vw;
	background: linear-gradient(rgba(255, 255, 255,0),rgba(255, 255, 255,1));
}

.info > p{
	margin-left:0.75em;
	margin-right:0.75em;
}

#foregroundimg{
	z-index: 999;
	position: fixed;
	pointer-events: none;
	left: 0px;
	right: 0px;
	bottom: 0px;
	margin-left: auto;
	margin-right: auto;
}

.top{
	position: fixed;
	top: 0px;
}

.mainmenu{
	left: 0.5em;
}

.language{
	right: 0em;
}

.pagefull{
	margin-top: 3em;
	margin-bottom: 3em;
}

.page{
	margin-top: 3em;
	margin-bottom: 3em;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: calc(100vH - 6em);
}

.pagework{
	margin-top: 3em;
	margin-bottom: 3em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pageinner{
	max-width:800px;
}

ul.menu{
	display: inline-flex;
	margin: 0;
	padding: 0;
	font-size: 150%;
	font-family: serif;
}

ul.menu li {
	display:inline-flex;
	padding-right: 0.5em;
}

ul.menu li a{
	color: #000000;
	text-decoration: none;
}

ul.menu li a.active{
	text-decoration: line-through;
}

table, th, td {
	border-collapse: collapse;
	cursor: grabbing;
}

tr{
	text-align: center;
	border-bottom: 1px solid black;
	line-height: 2em;
}

tr.works:hover {
	background-color: #dddddd;
	transition: all 0.25s ease-in;
}

tr:hover .workthumb { 
	display: block; 
	position: fixed;
}

@keyframes flashy {
	0%   {background-color:#ffffff;}
	50%  {background-color:#ffaaaa;}
	100% {background-color:#ffffff;}
}


.flash{
	background-color: #ffffff;
	animation-name: flashy;
	animation-iteration-count: infinite;
}

td{
	margin: 0.5em;
}

td.work{
	text-align: left; 
	padding-left: 0.75em;
}

td a { 
   display: block; 
   text-decoration: none;
   color: black;
   cursor: grabbing;
}

td.work a{
   display: inline-block; 
}

.workthumb { 
	display: none; 
	pointer-events: none;
	max-height:400px;
	transform: translate(-50%,-50%);
}    

.bottom{
	position: fixed;
	bottom: 0px;
	left: 0px;
	font-family: serif;
	z-index: 101;

}

.background, .foreground{
	padding-left: 0.5em;
	float: left;
}

.listdate{
	text-align: left;
	padding-left: 0.75em;
}

.listformat{
	text-align: right;
	padding-right: 0.75em;
}


.workdescription{
	margin-top: 3em;
}

.video{
	text-align: center;
}
video{
	max-width:800px;
}

/* start page */

/*
.previews{
	margin-top: 3em;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 3em;
	justify-items: center;
	align-items: center;
	padding-left: 0.75vw;

}
*/
div.previews{
	padding-top: 1.5vw;
	padding-left: 0.75em;
}

.preview:hover{
	z-index: 101 !important;
}
.previews > h1{
	position: fixed;
	opacity: 0;
}

.previews:hover > h1{
	opacity: 1;
	z-index: 101 !important;
}

.previews:hover > .preview{
	opacity: 1;
	z-index: 100 !important;
	transform: scale(1.0);
	box-shadow: 0px 0px 5px #000;
}

.previews > .preview{
	opacity: 0.5;
	transform: scale(0.8);
	transition: all 0.25s ease-in;
	display: inline-grid;
}


.preview > a{
	text-decoration: none;
}

/*gallery start*/
.gallery {
    max-width: 800px;
    text-align: center;
}

.bigimage{
	max-width: 800px;
	max-height: calc(100vH - 2em);
}
/*gallery end*/

/*responsive start*/

@media screen and (max-width: 800px),(max-height: 800px){
	body {
		font-size: 3vH;
	}

	.pagework{
		display: block;
		left-padding: 0.75em;
		right-padding: 0.75em;
		margin: 0.75em;
	}
	.bigimage,
	video{
		width: 800px;
		max-width: calc(100vw - 1.5em);
		
	}
	
	.bottom{
		display: none;
	}
}

/*responsive end*/