@charset "UTF-8"; 
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/montserrat-v14-latin-300.woff') format('woff') 
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('fonts/montserrat-v14-latin-600.woff') format('woff')
}
* {
	margin: 0;
	padding: 0;
	}
html {overflow-y: scroll; }
body {
	background-color: #000;
	-webkit-text-size-adjust: none; text-size-adjust: none;
	font: 300 1.2rem/1.5 'Montserrat'; 
	color:#aaa;
	}
strong, b {font-weight: 600;}
a {color: #fff;text-decoration:none;outline: none; transition: all .4s ease-in-out;}
a:hover {color: #999; transition: all .3s ease-in-out;}
h1, h2, h3 {font-size: 2rem; font-weight: 600; line-height: 120%;color: #ddd; margin-bottom:1.5rem; text-transform:uppercase;  -webkit-hyphens: manual; -moz-hyphens: manual; -ms-hyphens: manual; hyphens: manual;}
h2 {font-size: 1.6rem; }
.slider h2, .mobil h2 {font-weight: 300; text-transform:none;}
.mobil h2 {font-size: 1rem;}
h3 {font-size: 1.2rem; margin: 1.5rem 0 0.2rem 0; text-transform:none;  }
.impressum h3 {font: 300 1.2rem/1.5 'Montserrat';}
p {margin-bottom: 1rem;}
small {font-size: 0.8rem; line-height:100%;}

.content, .slider {   animation: fadeInAnimation 1s ease-in-out ;}
@keyframes fadeInAnimation {  0% {opacity: 0;}    100% {opacity: 1;} }

::-moz-selection {color: #999; background: transparent;}
::selection {color: #999; background: transparent;}

.wrapper {width: 100%; margin: 0 auto; }
.header {margin: 30px auto 0px auto; width:80%; display:flex; flex-wrap: wrap; justify-content: space-between; max-width:2200px;}

.logo {text-transform:uppercase; width: 60%; white-space: nowrap;}
.logo h1 {line-height:1; margin-bottom: 0; font-weight: 300; font-size: 1.5rem; color:#aaa;}
.claim {margin-left:0.5rem;font-size: 1rem; white-space: nowrap;}

.navigation {width: 40%;text-align:right;  white-space: nowrap; }
.navigation a, .footer a{
	color: #aaa;
	padding: 0 0.5rem;
	font-size:1rem;
	white-space: nowrap;
	font-weight: 300;
	text-transform: uppercase;
}
.navigation a:hover, a.select  {color: #fff;}
.footer a {font-size:0.8rem;color: #999;}
.footer a:hover {color: #eee;}
.footer {
	clear: both;
	margin: 5px auto 3rem auto; width:80%;
	text-align:right; color: #999; max-width:2200px;
	}	
	
.content {
	margin: 15px auto; 
	width:94%;
	height: auto;
	min-height:600px;
	overflow: hidden;
	padding: 5% 3%;
	background-color:#090909;
	background-image: linear-gradient(#000, #212121);
	}
.film .content{padding-top:0%;}
.filme{	display:flex; flex-wrap: wrap; align-items: flex-start;  max-width: 2300px; margin:0 auto;}
.filmbox {width:29%; font-size: 1rem; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; padding: 1rem 2% ;}
.film h3 {font-size:1rem; text-transform:uppercase; margin:10px 0 0 -1%; color: #999; text-align: center;}
.filme h3 { margin:10px 0 0 0; text-align:left; line-height: 150%;}
.filmbox img {max-width:100%; height:auto;}
/* BAUSTELLE FÜR HOVER-LINK AUF BILD
.filmbox a {width:400px; height:218px;transition: all .1s ease-in-out; }
.filmbox img {width:400px; height:218px;}
.filmbox .screenshot {display:grid;align-content:center;width:400px; height:218px;align-items : center}
.filmbox h2 {position: absolute; width:400px; height:218px; text-align:center; vertical-align:middle;font-weight:600;color:#fff; opacity:0;transition: all .1s ease-in-out; overflow:hidden; align-content:center; align-items : center}
.filmbox a h2:hover {backdrop-filter: blur(40px) brightness(1);transition: all .1s ease-in-out;opacity:1;}
*/

.filme a {
  position: relative;
  display: inline-block;
}

.filme .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: #fff;
  color: #111;
  text-align: center;
  border-radius: 3px;
  padding: 2px 8px;
  margin: 0 0 2px 0;
  font-size: 80%;
   position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 0%;
  font-weight: 300;
    opacity: 0;
  transition: opacity 0.5s;
  text-transform: lowercase;
  -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none;
  white-space: nowrap;
}
.filme h3 a span.tooltiptext {margin: 0 0 20px 5px !important;}
.tooltiptext::before {content:"\2192"; font-size: 1rem; margin-right:5px; color:#111;}

.filme a:hover .tooltiptext {  visibility: visible;  opacity: 1;}

.text {
	max-width: 700px;
	margin: 0 auto;
}

.disclaimer {	margin-top: 0.4rem; font-size: 0.8rem;	line-height: 1.4; text-align: justify; color: #666;-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
.disclaimer h3 {color: #666;}

.logos {margin: 3rem 0; width: 80%;}
.logos img {vertical-align: middle;}
.logos a img {padding:1rem 3rem 1rem 0; filter: brightness(2) contrast(0.6);transition: all .3s ease-in-out;} 
.logos a img:hover {filter: brightness(0.4) contrast(0.6);transition: all .4s ease-in-out;}


/*############################################### SLIDER #####################################*/
.slider {margin-top: 10px !important;}
.mobil {display:none;}

	        /*jssor slider loading skin spin css*/
        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
                
        /*jssor slider arrow skin 051 css*/
        .jssora051 {display:block;position:absolute;cursor:pointer;}
        .jssora051 .a {fill:none;stroke:#fff;stroke-width:200;stroke-miterlimit:10;}
        .jssora051:hover {opacity:.5;}
        .jssora051.jssora051dn {opacity:.5;}
        .jssora051.jssora051ds {opacity:.3;pointer-events:none;}
		
.slider .slider-text h2{
	position:absolute;
	bottom: 0; right: 0; left: 0; 
	margin: 0 auto;
	width: 100%; 
	padding: 5px;
    text-align: center;
	font-size: 0.6rem; 
	line-height: 120%;
	font-weight: 300;
	color: #ccc !important;
	background-color: #00000099;
	}
	

/*############################################### MOBIL #####################################*/

@media screen and (max-width: 1360px) { 
	.header, .footer {width:95%;}
	.logo {width: 55%; margin-right:0rem;}
	.navigation a{padding-right: 0.2rem;}
	.slider .slider-text h2 {font-size: 1rem;}
	}
@media screen and (max-width: 999px) { 
	.logo, .navigation {width: 100%; text-align:center;}
	.filmbox {width: 45%;}
	}
@media screen and (max-width: 725px) { 
		.logos {width: 100%;}
		.slider .slider-text h2 {font-size: 1.2rem;}
}
@media screen and (max-width: 620px) { 
	body {font-size: 1rem;}
	.slider, .claim {display:none;}
	.logo h1{ font-size:1.2rem;}
	h2 {font-size: 1.2rem;}
	h3 {font-size: 1rem; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
	.navigation a{font-size:0.9rem; padding-left:0;}
	.mobil {margin-top: 2rem;display: block; text-align: center;}
	.mobil img {max-width:100%;}
	.mobil div {margin-bottom:3px; height:auto;}
	.content {width: 94%; padding: 3%; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
	.filmbox {width: auto; padding: 0.5rem 0;}
	.logos a img {padding: 1rem 2rem 1rem 0;}
	}