@charset "utf-8";

/* global styles */
body{
	color: #ccc;
	font-family:Verdana, Geneva, sans-serif;
	background-color:black;
	text-align:center;
	margin:0;
}
#wrap{
	width:100%;
}
#page{
	max-width:1200px;
	background-color:black;
	margin:0 auto;
	padding-left:10px;
	padding-right:10px;
}
nav {
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: space-between; /*ok, we dont need this in case of margin*/
	flex-wrap:wrap;
}
#nav-main {
	border-bottom: 1px solid #ccc;
	background-color:black;
}
nav > * { /* only the direct kiddies! */
	margin: 20px;
}
nav .social img{ 
	margin-left:30px; /* Achtung! Facebook-Vorschrift zur Verwendung des Logos: 1/2 Breite des Logos Platz zum nächsten Element */
}
.main{
	position:relative;
	background-repeat:no-repeat;
	background-size:cover;
}
.main{
	background-image:url(../bilddateien/bg_02.jpg);
}
.footer {
	border-top: 1px solid #ccc;
}

a{
	color: #FBE904;
	text-decoration: none;
	white-space:nowrap;
}
h1{
	color:#FBE904;
}
a:hover, a.active{
	color: #FBCA04;
}
a.active{
	font-style:italic;
}
img{
	max-width:100%;
	/* safe width and height overwrites insert from html-editors */
	height: auto !important;
	width: auto !important;
}
ul {
	list-style-type: none;
}

/* home page */
.home .main{
	background-image:none;
}
.logo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 53.3333333%;
}
.logo-overlay p {
  margin: 5px 0;
}
.logotext {
  color: #FBE904;
  font-family:Georgia, "Times New Roman", Times, serif;
  margin:0;
}
#trailer a {
	width: 376px;
	height: 67px;
	border-radius: 5px;
	border: 1px solid rgba(184,205,210,1.00);
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	-ms-transition: all 1s;
	transition: all 1s;
	position: absolute;
	top: inherit;
	left: 0;
	right: 0;
	bottom: 20px;
	margin:  0 auto;
	display:block;
}

/* pictures page */
.img-show {
	display: flex;
	justify-content: space-evenly;
}
.imgbox {
	margin: 20px;
	align-self:baseline; /* in case of inconsistent height */
}
#trailer_audio {
	padding: 20px;
	width: 50%;
	border-radius: 5px;
	margin-left: auto;
	margin-right: auto;
	background-color: rgb(252, 224, 12);
}
#trailer_audio a {
	color: rgba(0,0,0,1.00);
	font-size: 40px;
	text-transform: uppercase;
	white-space: wrap;
}

@media only screen and (max-width: 768px) {
	#trailer a {
		width: 251.92px;
    	height: 44.89px;
	}
}
@media only screen and (max-width: 640px) {
	h1.logotext {
	  font-size: 1.5rem;
	}	
	h3.logotext {
	  font-size: 1rem;
	}
	nav > * {
		margin: 10px;
	}
	#trailer a {
		width: 183.50px;
    	height: 33.5px;
	}
	.img-show {
  		display:block;
	}
}
@media only screen and (max-width: 480px) {
	/* maybe ??? just an idea
	#nav-main {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.main{
		margin-top: 80px;
	}
	*/
	h1.logotext {
	  font-size: 1rem;
	}	
	h3.logotext {
	  font-size: 0.7rem;
	}
	nav > * {
		font-size:12px;
	}
}