* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a:link {color:red;text-decoration:none;}
a:hover {color: white;text-decoration:none;}
a:visited {color: red;text-decoration:none;}
@font-face {
font-family: 'Germania One';
font-style: normal;
font-weight: 400;
src: url("../fonts/GermaniaOne.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
background-attachment:fixed;
background-image: linear-gradient(black, darkred);
font-size: 14px;
font-family: Verdana;
background-image: url("../pictures/metalplate.jpg");
height:100%;
margin:0px;
background-repeat:no-repeat;
background-size: cover;
}
header {
width:100%;
max-width: 1107px;
margin:0px auto;
}
main {
background-color: black;
max-width: 1107px;
min-height: 100%;
height:auto !important;
height:100%;
margin:0px auto;
border-width:5px;
border-style:none solid none solid;
border-color:black;
}
footer {
width:100%;
max-width: 1107px;
border-color:black;
border-width:1px;
border-style:solid;
background: black;
margin: 0px auto;
text-align:center;
}
nav {
position:fixed;
z-index:10;
width:1107px;
margin:0px auto ;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:white;
}
@media screen and (max-width: 700px) {
nav {
border-bottom-width:0px;
}
}
#frame {
overflow:hidden;
border-radius: 15px;
background: #111;
width: 94%;
vertical-align:top;
padding-bottom:10px;
margin: 25px auto 0px auto;
color:lightgrey;
border-color:#222;
border-width:1px;
border-style:solid;
}
.headline {
color:white;
font-size:22px;
font-family: 'Germania One';
border-top-left-radius: 15px;
border-top-right-radius: 15px;
height:40px;
width: 100%;
text-align:center;
border-color:#333333;
border-width:0px;
border-style:solid;
margin: 0px auto 10px auto;
padding:2px;
background-image: linear-gradient(#333, #111);
}
.box {
overflow:hidden;
background: #333;
display:inline-block;
width:330px;
padding:2px;
margin:5px;
color:lightgrey;
border-color:#333;
border-width:1px;
border-style:solid;
}
.bblogo {
text-align:center;
top:10px;position:fixed;
z-index:50;
margin:0px auto;
width:100%;
pointer-events:none;
}
.bblogo_picture {
width:180px;
z-index:-50;
}
@media screen and (max-width: 700px) {
.bblogo_picture {
width:100px;
z-index:-50;
}
.bblogo {
text-align:right;
}
}
.newsblog {
float:left;
width:70%;
border-color:#333;
border-width:0px;
border-style:solid;
}
.events {
width:100%;
border-color:red;
border-width:0px;
border-style:solid;
float:left;
margin-top:5px;
}
.facebookbar {
float:left;
width:100%;
border-color:red;
border-width:0px;
border-style:solid;
margin-top:20px;
}
.sidebar {
float:left;
width:28%;
margin-left:5px;
margin-top:20px;
}
@media screen and (max-width: 700px) {
.sidebar {
clear:both;
width:100%;
margin-left:5px;
margin-top:20px;
}
.facebookbar {
text-align:center;
clear:both;
margin:0px auto;
}
.events {
text-align:center;
width:50%;
margin:0px auto;
}
.events img {
position: relative;
left: 50%;
top: 50%;
}
.newsblog {
width:100%;
}
}
.sponsoren {
clear:both;
width:80%;
margin: auto;
}
.sponsoren a {
margin-top:20px;
clear:both;
display:inline-block;
padding-right:8px;
vertical-align: middle;
}
.bands img {
margin:0px;
clear:both;
display:inline-block;
margin:5px;
padding:0px;
}
.legal {
clear:left;
margin:0px auto 20px 0px;
color: white;
}
.legal a {
color:white;
text-decoration: none;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
text-align:center;
width:95%;
margin:20px auto 10px;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align:center;
margin:0px auto;
}
/* ----------------- Menu--------------------- */
.topnav {
padding: 10px 0px;
overflow: hidden;
z-index:10;
background-color: black;
width:1107px;
border-width:middle;
border-style:none solid none solid;
border-color:black;
margin:0px auto;
font-family: 'Germania One';
font-size: 26px;
}
@media screen and (max-width: 700px) {
.topnav {
background-color: transparent;
}
}
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
width:113px;
padding: 3px 3px;
text-decoration: none;
font-size: 26px;
}
.topnav a:hover, .dropdown:hover .dropbtn {
color:red;
}
.topnav .icon {display: none;}
@media screen and (max-width: 1200px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: left;
display: block;
background-color: black;
}
}
@media screen and (max-width: 1200px) {
.topnav.responsive {
z-index:-100;
background-color: black;
opacity: 1;
width:100%;
position: relative;
}
.topnav.responsive .icon {
position: relative;
left: 0;
}
.topnav.responsive a {
opacity: 1;
z-index:110;
float: none;
display: block;
text-align: left;
min-width: 215px;
background-color: black;
}
.topnav.responsive .dropdown {float: none; min-width: 215px;}
.topnav.responsive .dropdown-content {position: relative;z-index:100;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
/* ----------------- Media Bar --------------------- */
.icon-bar {
padding-top:30px;
padding-bottom:10px;
}
.icon-bar a {
margin:5px;
}
.icon-bar a:hover {background-color: #000;}
.facebook {background: #3B5998;color: white;}
.twitter {background: #55ACEE;color: white;}
.google {background: #dd4b39;color: white;}
.youtube {background: #bb0000;color: white;}
.instagram {background: #bb0000;color: white;}
.pdf {background: #222;color: #555;}
* {box-sizing: border-box}
.mySlides {display: none}
/* Slideshow container */
.slideshow {
max-width: 100%;
border-bottom-width:0px;
border-bottom-style:solid;
border-bottom-color:white;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 3s;
animation-name: fade;
animation-duration: 3s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.w3-animate-fading{animation:fading 10s infinite}
@keyframes fading{
0%{opacity:0.0}
30%{opacity:1}
60%{opacity:1}
100%{opacity:0.0}}
.w3-animate-zoom {animation:animatezoom 0.8s}
@keyframes animatezoom{
from{transform:scale(0.5)} to{transform:scale(1)}
}
/* ----------------- Photo Gallery --------------------- */
#overlay {
position: fixed;
display:none;
width: 100%;
height: 100%;
top: 0px;
left: 0;
right: 0;
bottom: 0;
overflow:hidden;
background-color: black;
z-index: 1;
cursor: pointer;
}
@media screen and (max-width: 1200px) {
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0px;
left: 0;
right: 0;
bottom: 0;
overflow:hidden;
background-color: black;
z-index: 60;
cursor: pointer;
}
}
.gallery {
position: fixed;
overflow:hidden;
top: +52%;
left: +50%;
transform: translate(-50%, -50%);
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
z-index:70;
pointer-events: auto;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev {
left: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.image_capture{
position: absolute;
width:100%;
height:40px;
bottom:-10px;
padding-top:+3px;
color:white;
font-size:10px;
overflow:hidden;
background-color:black;
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}