@font-face {
    font-family: 'PT Sans';
    src: url('web/PTSans-Regular.woff2') format('woff2'),
        url('web/PTSans-Regular.woff') format('woff'),
		url('web/PTSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
:root {
  --close-distance: .45rem;
  --close-weight: .6rem;
  --close-width: 1.6rem;
}


body{
	background-color:#fff;
	letter-spacing:.2em;
	}
h1{
	margin:10px 0;
	font-size:70px;
	}
img{
	max-width:100%;
	max-height:100%;
	}

div, section{
	box-sizing: border-box;
	}
p{
	font-family: 'PT Sans', sans-serif;
		letter-spacing:.07em;
	}
a{color:white; text-decoration:none;}
section h1 a{
	font-family: Bison-ThickOutline, sans-serif;
	font-weight: normal;
	font-style: normal;
	color:black;
	text-decoration:none;
	display:inline-block;
	/*width:100%;*/
	outline:none;
 
}

section h1 a.active,
section h1 a:hover,
section h1 a:active
{
	color:black;
	text-decoration:none;
 	font-family: Bison-Bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	text-shadow: none;
}
section h1 a span.year{
	font-family: Bison-ThickOutline, sans-serif;
	}
.svgvector{
	fill: var(--bg-color);
}
/* preview thumbnail*/
.description {
	position:relative;
	margin-top:-0.3vw;
	margin-bottom:0.8vw;
/* bild abgeschnitten */
/*	max-width: 55vw;*/
	}

 /* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    top: 0; /* 100% Full-height */
    bottom: 0;/* 100% Full-height */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	letter-spacing:.2em;
}
.sidenav p{
	color: white;
	}
/* The navigation menu links */

.sidenav a.navigation 
{
    text-decoration: none;
	font-family: Bison-ThickOutline, sans-serif;
    color: #fff;
    display: block;
			position:relative;
   /* transition: 0.3s;*/
}
.navigationRow{
	    display: block;
	}

.subtitle{
	margin-top: .8em;
	font-family: 'PT Sans', sans-serif;
	color: #aaa;
	max-width: 55vw;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
body #main {
    transition: margin-left .5s;
	padding-bottom:30px;
}
	/* bild*/
.preview{
	transition: opacity .5s ease-in-out;
	width:8vw;
	position: absolute;
	top:0;
	margin-left: 53vw;
	cursor:pointer;
}
 
.view,.preview.big{
	transition: opacity .5s ease-in-out;
	pointer-events: none; 
	width:60vw;
	max-height:80vh;
	position: fixed;
	top: 50%;
	/*transform: translateY(-50%) translateX(-50%) ;*/
	left:0;
	margin-left:35vw;
	z-index:2;
	height:100%;
}
 
.view img, .preview.big img{
	position: absolute;

	transform: translateY(-50%) translateX(-50%) ;
	max-width:60vw;
	width:auto;
	max-height:80vh;
	height:auto;
	}
.view img{
	max-height:80vh;
	
	}
.preview img{
		width:100%;
		height:100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: top center;
		max-height:80vh;
}
 
.close {
  position: absolute;
  top: 0;
  cursor:pointer;
  font-weight:bold;
  color:white;
  font-family: Bison-ThickOutline, sans-serif;
  padding-left: 1vw;
}
.sidenav a:hover .x,
.close:hover{
	 	font-family: Bison-Bold, sans-serif;
	}
.tablet-only{display:none;}	

.externerLink {
    width: 1.2rem;
    position: relative;
    margin-bottom: -.1rem;
}
 

section h1 a.active, section h1 a:hover, section h1 a:active {
      font-family: Bison-ThickOutline, sans-serif;
}

section h1 a {
      position: relative;
}

span.name2, a.name2 {
    position: absolute;
    left: 0;
    opacity: 0;
    font-family: Bison-Bold, sans-serif;
      transition:opacity .1s ease;
}

 a.active .name2,
 a:hover .name2,
 a:active .name2,
section h1 a.active .name2,
section h1 a:hover .name2,
section h1 a:active .name2
{
      opacity: 1;
      transition:opacity .1s ease;
}

section h1 a.active .name,
section h1 a:hover .name,
section h1 a:active .name
{
      opacity: 0;
   
}

section h1 a .name,
{
      opacity: 0;
     
}

.menu-toggle {
	margin-top:2.25vw;
	left:1.1vw;
	position: fixed;
	justify-content: center;
	align-items: center;
	border: hidden;
	transition: all 250ms ease-in-out;
	cursor: pointer;
	padding:1rem;
	background: transparent;
}
.menu-bar {
	left:0;
  position: absolute;
  width: var(--close-width);
  height: var(--close-weight);
  background: #fff;
  transition-property: transform;
  transition: all 250ms ease-out;
}
.sidenav{
	background-color: var(--bg-color); 
}
.close,h1 a span.year{
	color: var(--bg-color);
}

.menu-bar[data-position=top] {
  transform: translateY(calc(-1 * var(--close-distance)));
}

.menu-bar[data-position=bottom] {
  transform: translateY(var(--close-distance));
}

.open .menu-toggle .menu-bar[data-position=top] {
  transform: translateY(0) rotate(45deg) scaleX(1.05);
}

.open .menu-toggle .menu-bar[data-position=bottom] {
  transform: translateY(0) rotate(-45deg) scaleX(1.05);
}
nav{
	margin-top:3.7rem;
	margin-left:2rem;
}
.sidebarAction {
    position: fixed;
    width: 4vw;
    height: 4rem;
    left: 0;
}
.sidebarAction.backdrop{
    background-color: var(--bg-color);
	top: 0rem;
	bottom:0;
	height:100%
}
.sidebarAction.buttonBackdrop{
	z-index:10
}

@media screen and (min-width: 768px) {
	.mobile-hidden{
		display:initial;
	}
	.mobile-only{
		display:none;
	}
	#mySidenav.sidenav  .description p{
		line-height: 1.6vw;
	}
	.subtitle,body p{
		margin-top:0vw;
		margin-bottom:2vw;
		line-height: 2vw;
		font-size:1.3vw;
	}
	.subtitle{
	    margin-top: .5em !important;
		font-family: 'PT Sans', sans-serif;
		font-size:1vw !important;
		letter-spacing: .07vw !important;
		line-height: 1.5vw !important;
		padding-right:3vw;
		color: black;
	}
	.hero{
		width:50%;
		margin-top: .5vw;
		margin-bottom: -.5vw;
		}
	.sidenav  .description p{
		font-size:1.1vw !important;
	}

	h1{
		margin:0;
		font-size:4vw;
	}

	.sidenav {
		width:35vw;	
		margin-left:-35vw;
		padding-left: 1.4vw;
	}
	#main {
		padding-left: 2vw;
		margin-left:4.5vw;		
	}
	.sidenav,	#main  {	
		padding-top: 1vw;
		padding-bottom: 0;
	}
	
	.sidenav a.navigation 
	{
		font-size: 3.7vw;
		position:relative;
	}
	.sidebarAction {
		width: 4vw;
	}
	.menu-toggle {
		left: 1.1vw;
	}
	.menu-toggle:hover .menu-bar{
		background-color:transparent;
		box-shadow: inset 1px 1px  white, inset -1px -1px white;
	}
	.open .menu-toggle:hover::after {
		content: "";
		background: var(--bg-color);
		position: absolute;
		height: 40%;
		width: 40%;
		left: 20%;
		top: 46%;
	}
	nav{
		margin-top:5.2vw;
	}
}
/* iPad Querformat */
@media screen and (min-width: 1023px) and (max-width: 1200px) {
	body, .sidenav {
		letter-spacing: .25vw;
	}
	.subtitle,body p {
		font-size: 1.4vw ;
	}
	#mySidenav.sidenav .description p  {
		font-size: 1.35vw !important;
	}
		.sidenav .mobile-only,
	.sidenav .mobile-hidden{display:none;}
	.tablet-only{display:block;}	
}
/* iPad Hochformat*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
	body, .sidenav {
		letter-spacing: .25vw;
	}
	h1 {
		font-size: 5vw;
	}
	.subtitle,body p {
		line-height: 3vw !important;
		font-size: 1.8vw !important;
	}
	.preview {
 
		width: 13vw;
		margin-left: 70vw;
	}
	.hero {
		width: 75%;
		margin-top: .5vw;
		margin-bottom: -1vw;
	}
	.description {
	max-width: 70vw;
	}
	.sidenav a.times, .sidenav a.navigation {
		font-size: 4.7vw;
	}
	.sidenav {
		width: 45vw;
		margin-left: -45vw;
		padding-left: 1.4vw;
	}
	#main {
		padding-left: 3.5vw;
	}
	.sidenav .mobile-only,
	.sidenav .mobile-hidden{display:none;}
	.tablet-only{display:block;}	

	#mySidenav.sidenav .description p {
		font-size: 1.9vw !important;
		line-height: 2.7vw;
	}
	.sidebarAction {
		width: 5vw;
	}
	.mobile-only span,.tablet-only span{
		font-size:2vw !important;
	}
	.externerLink {
		width: 1.1rem;
		position: relative;
		margin-bottom: -.2rem;
	}
}
/* HANDY ******************************************** */
@media screen and (max-width: 767px) {
	:root *{
	  --close-distance: .3rem;
	  --close-weight: .4rem;
	  --close-width: 1rem;
	}
	.mobile-hidden{
		display:none;
	}
	.mobile-only{
		display:initial;
	}
	p{
		letter-spacing:.5px;
	}
	section h1 a, section h1 a span.year{ 	
		font-family: Bison-Bold, sans-serif;
		letter-spacing:0.5px;
		line-height:8vw;
	}
	body p{
		margin-top:0vw;
		margin-bottom:2vw;
		line-height: 6vw;
		font-size: 4.5vw !important;
	}
	body .navigationRow p {
		font-size: 4.5vw !important;
		
	}
	.subtitle{
        margin-top: 0;
		font-size: 4.5vw !important;
		letter-spacing:0.2px !important;
		line-height: 6vw;
	}
 
	.preview{
		margin-left:69vw;
		width: 17vw;
		margin-top: 2vw;
		}
   .view img, .preview.big img {

    transform: translateY(-50%) translateX(-35%);
    max-width: 75vw;
    width: auto;}
	h1{
		margin:0;
		font-size:7vw;
	}

	/* seitenstreifen */
	.sidenav {
		width:81vw;	
		margin-left:-81vw;
		padding-left: 2vw;
	}
	#main {
		padding-left: 5vw;
		margin-left:7.5vw;	
		line-height:4.5vw;	
	}
	.sidenav {
	    letter-spacing: 2px;
	}
	/* oberer / unterer Abstand */
	.sidenav,	#main  {	
		padding-top: 1vw;
		padding-bottom: 1vw;
	}
	
	.sidenav a.navigation 
	{
		font-size: 7.9vw;
		font-family: Bison-Bold, sans-serif;
	}
	.description{
		width:67vw;
		margin-bottom:1.5vw;
		max-width: 70vw;
	}
	body #main {
		padding-bottom: 10px;
	}
	.hero {
		width: 75%;
		margin-top: .5vw;
		margin-bottom: -1vw;
	}
	.externerLink {
		width: 1rem;
        position: relative;
        margin-bottom: -.7vw;
        margin-left: .3rem;
	}
	.sidebarAction {
		width: 7vw;
	}
	.mobile-only span,.tablet-only span{
		font-size:3vw !important;
	}
	nav {
		margin-top: 3.7rem;
		margin-left: 1.5rem;
	}
}