@font-face {
    font-family: 'Playfair Display';
    src: local('Playfair Display Italic'), local('PlayfairDisplay-Italic'),
        url('fonts/PlayfairDisplay-Italic.woff2') format('woff2'),
        url('fonts/PlayfairDisplay-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'),
        url('fonts/PlayfairDisplay-Regular.woff2') format('woff2'),
        url('fonts/PlayfairDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Black Italic'), local('SourceSansPro-BlackItalic'),
        url('fonts/SourceSansPro-BlackItalic.woff2') format('woff2'),
        url('fonts/SourceSansPro-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Black'), local('SourceSansPro-Black'),
        url('fonts/SourceSansPro-Black.woff2') format('woff2'),
        url('fonts/SourceSansPro-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'),
        url('fonts/SourceSansPro-BoldItalic.woff2') format('woff2'),
        url('fonts/SourceSansPro-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Black'), local('SourceSansPro-Black'),
        url('fonts/SourceSansPro-Black.woff2') format('woff2'),
        url('fonts/SourceSansPro-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'),
        url('fonts/SourceSansPro-BoldItalic.woff2') format('woff2'),
        url('fonts/SourceSansPro-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
        url('fonts/SourceSansPro-Bold.woff2') format('woff2'),
        url('fonts/SourceSansPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
        url('fonts/SourceSansPro-Bold.woff2') format('woff2'),
        url('fonts/SourceSansPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Black Italic'), local('SourceSansPro-BlackItalic'),
        url('fonts/SourceSansPro-BlackItalic.woff2') format('woff2'),
        url('fonts/SourceSansPro-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
        url('fonts/SourceSansPro-SemiBold.woff2') format('woff2'),
        url('fonts/SourceSansPro-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'),
        url('fonts/SourceSansPro-ExtraLight.woff2') format('woff2'),
        url('fonts/SourceSansPro-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro SemiBold Italic'), local('SourceSansPro-SemiBoldItalic'),
        url('fonts/SourceSansPro-SemiBoldItalic.woff2') format('woff2'),
        url('fonts/SourceSansPro-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'),
        url('fonts/SourceSansPro-ExtraLight.woff2') format('woff2'),
        url('fonts/SourceSansPro-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
        url('fonts/SourceSansPro-SemiBold.woff2') format('woff2'),
        url('fonts/SourceSansPro-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'),
        url('fonts/SourceSansPro-LightItalic.woff2') format('woff2'),
        url('fonts/SourceSansPro-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
        url('fonts/SourceSansPro-Light.woff2') format('woff2'),
        url('fonts/SourceSansPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro ExtraLight Italic'), local('SourceSansPro-ExtraLightItalic'),
        url('fonts/SourceSansPro-ExtraLightItalic.woff2') format('woff2'),
        url('fonts/SourceSansPro-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro ExtraLight Italic'), local('SourceSansPro-ExtraLightItalic'),
        url('fonts/SourceSansPro-ExtraLightItalic.woff2') format('woff2'),
        url('fonts/SourceSansPro-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
        url('fonts/SourceSansPro-Regular.woff2') format('woff2'),
        url('fonts/SourceSansPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro SemiBold Italic'), local('SourceSansPro-SemiBoldItalic'),
        url('fonts/SourceSansPro-SemiBoldItalic.woff2') format('woff2'),
        url('fonts/SourceSansPro-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'),
        url('fonts/SourceSansPro-Italic.woff2') format('woff2'),
        url('fonts/SourceSansPro-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'),
        url('fonts/SourceSansPro-LightItalic.woff2') format('woff2'),
        url('fonts/SourceSansPro-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
        url('fonts/SourceSansPro-Regular.woff2') format('woff2'),
        url('fonts/SourceSansPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
        url('fonts/SourceSansPro-Light.woff2') format('woff2'),
        url('fonts/SourceSansPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'),
        url('fonts/SourceSansPro-Italic.woff2') format('woff2'),
        url('fonts/SourceSansPro-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro Black'), local('SourceSerifPro-Black'),
        url('fonts/SourceSerifPro-Black.woff2') format('woff2'),
        url('fonts/SourceSerifPro-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro'), local('SourceSerifPro-Regular'),
        url('fonts/SourceSerifPro-Regular.woff2') format('woff2'),
        url('fonts/SourceSerifPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro Italic'), local('SourceSerifPro-It'),
        url('fonts/SourceSerifPro-It.woff2') format('woff2'),
        url('fonts/SourceSerifPro-It.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro ExtraLight'), local('SourceSerifPro-ExtraLight'),
        url('fonts/SourceSerifPro-ExtraLight.woff2') format('woff2'),
        url('fonts/SourceSerifPro-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro Black Italic'), local('SourceSerifPro-BlackIt'),
        url('fonts/SourceSerifPro-BlackIt.woff2') format('woff2'),
        url('fonts/SourceSerifPro-BlackIt.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro ExtraLight Italic'), local('SourceSerifPro-ExtraLightIt'),
        url('fonts/SourceSerifPro-ExtraLightIt.woff2') format('woff2'),
        url('fonts/SourceSerifPro-ExtraLightIt.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro Light Italic'), local('SourceSerifPro-LightIt'),
        url('fonts/SourceSerifPro-LightIt.woff2') format('woff2'),
        url('fonts/SourceSerifPro-LightIt.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro Bold Italic'), local('SourceSerifPro-BoldIt'),
        url('fonts/SourceSerifPro-BoldIt.woff2') format('woff2'),
        url('fonts/SourceSerifPro-BoldIt.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro Light'), local('SourceSerifPro-Light'),
        url('fonts/SourceSerifPro-Light.woff2') format('woff2'),
        url('fonts/SourceSerifPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro Bold'), local('SourceSerifPro-Bold'),
        url('fonts/SourceSerifPro-Bold.woff2') format('woff2'),
        url('fonts/SourceSerifPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro SemiBold Italic'), local('SourceSerifPro-SemiBoldIt'),
        url('fonts/SourceSerifPro-SemiBoldIt.woff2') format('woff2'),
        url('fonts/SourceSerifPro-SemiBoldIt.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro SemiBold'), local('SourceSerifPro-SemiBold'),
        url('fonts/SourceSerifPro-SemiBold.woff2') format('woff2'),
        url('fonts/SourceSerifPro-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}




* {     
	box-sizing: border-box; 
}

body {
	font-family: Source Serif Pro;
	background-image:url(images/bg/der-ammonit-film.jpg);
    	background-attachment: fixed;
	opacity: 0.95;
}


b {     
	font-weight: 900;
	font-family: Source Sans Pro;	
}

h3 {
	font-family: Source Serif Pro;	
}

li {
	list-style:none;
}

.main { 
	float: left; }

@media only screen and (min-width: 900px)  {

	nav {	width: 20%;
}
	.content { width: 60%; margin-left: 100px; }

}


@media screen and (max-width: 900px) {
  nav {
    width: 100%;
    height: auto;
    position: relative;
  }
  nav a {float: none;}

}



nav {
	float: left;
	padding: 1em; 
}

ul { padding-inline-start: 0em;}

.content { float: left;
background-color:rgba(255, 255, 255, 0.9); 
padding: 1em;


}

.content:after {
    content: "";
    display: table;
    clear: both;
}


nav li { padding:1px; }

a {
	color: #000;
	background-color: #ddd;
	transition: background-color 0.5s ease-in-out;
	text-decoration: none;
	}

#der-ammonit-film {
	text-decoration: none;
	color: #ddd;
	background-color: #000;
	transition: background-color 0.5s ease-in-out;
}

.unstyled { background-color: transparent; }

a:hover {
	text-decoration: none;
	background-color: transparent;
	transition: background-color 0.5s ease-in-out;
}

.empty {
height:1em;
width:1em;
}

img { 
max-width: 100%;
height: auto;
margin-top: 1em;
margin-bottom: 1em;
}


.imgfull { width: 100%; }
.imghalf { width: 45%; 
margin-right: 1em;
}


.stroke { text-shadow: 2px 2px 5px white; }


?>