@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Ruthie|Euphoria+Script|Rouge+Script|Alex+Brush|Great+Vibes);

body { font-family:'Open Sans',Tahoma,Arial,sans-serif;
  background:#003 url(../images/sterne/sterne.png) repeat top center;
  color: #fff;
}

p { color: #fff; font-family:'Open Sans',Tahoma,Arial,sans-serif; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color: #fff; font-family:'Open Sans',Tahoma,Arial,sans-serif;
 }

a { color: #fff; text-decoration: underline; }
a:hover, a:focus, a:active { color: #c0a45a; }


/* Bootstrap Overrides */
.row { margin-bottom: 1em; }
.table-responsive .table { background: none; }
.table-responsive { color: #ffffff; }
.table-responsive a { color: #ffffff; font-weight:bold; text-decoration: underline; }
.table-responsive a:hover { color: #c0a45a; }

/* GUTTERS */
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}




/* WIDGETS */
.widget { padding: 1em; margin-bottom: 1em; border: 1px solid #c0a45a; height: 32em; }
.fb-widget { padding: 1em; margin-bottom: 1em; }
.widget img, .fb-widget img { width: 100%; }


/* LOGO */
.logo img { width: 30%; margin: 0em 0em 2em 0em; z-index: 800; position: relative; top: 1em; left: 0;}
/* .logo img { 
    margin-top: 1em;
    margin-bottom: 2em;
    width: 25%;
}


/* CONTENT */
#content { margin-top: 2em; margin-bottom: 4em; }
label { color: #fff; }
.spielzeiten { cellspacing: 5; border: 0; width: auto; }
.spielzeiten td { white-space: nowrap; padding-right: 1em; }

.hinweis { background: #ff0000; padding: 1em; display: inline-block; }


/* MINI-NAV Im HEADER */
#mininav { margin-top: 1em; margin-bottom: 1em; }

/* BANNER IM HEADER */
.goldline { width: 100%; height: 1px; background-image: url(../images/hewm-goldlinie.jpg); background-size: contain; margin-top: 0.5em; margin-bottom: 0.5em; }

#banner {
    height: auto;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    background-color: none;
    }
    
#banner .container { position: relative; top: 0; left: 0; }

.img-responsive {
    width: 100%;
}

.banner img { z-index: 700; position: absolute; top: 0; right: 0; height: 100%; }

/* FANCYBOX ANPASSUNG */
.fancybox-thumb img { width:20%; margin-right: 1em; margin-bottom: 1em; }


/* NAVIGATION ANPASSUNG */
.nav a, .nav-link a { color: #c0a45a; background: none; text-transform: uppercase; text-decoration: none; }
.nav a:hover, .nav a:active { color: #8d7b44; }
.nav li a:hover, .nav li a:active { background: none; }
.navbar-default { background: none; border: none; font-size: 1.0em; }

.navbar-center > .nav {
    float: none;
    display: inline-block;
}
.navbar-center {
    text-align: center;
}

.navbar-default .navbar-nav > li > a { text-decoration: none; color: #c0a45a; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { text-decoration: none; color: #8d7b44; }
.navbar-default .navbar-link a { color: #c0a45a; }

.navbar-default .navbar-nav > li > a {
    color: #c0a45a;
    padding-top: 5px; padding-bottom: 5px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background: none;
    color: #c0a45a;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background: #c0a45a;
    color: #000033; }

.navbar-default .navbar-nav > .dropdown > a .caret {
    border-bottom-color: #c0a45a;
    border-top-color: #c0a45a;
}

.navbar-default .navbar-nav > .dropdown > a:hover .caret {
    border-bottom-color: #8d7b44;
    border-top-color: #8d7b44;
}

.navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret {
    border-bottom-color: #000033;
    border-top-color: #000033;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border: none;
    background: none;
}

.navbar, .navbar-default {
    background: none;
	border: none;    
}

.dropdown-menu { text-align: left; background: #000033; border: 1px solid #c0a45a; }

.dropdown-menu > li > a {
    color: #c0a45a;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li > a:active {
	background: #c0a45a;
    color: #000033; 
    text-decoration: none;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
background: #c0a45a;
    color: #000033; 
    text-decoration: none;
    
}


/* Farben */
.gold { color: #c0a45a; }
.darkgold { color: #8d7b44; }
.black { color: #000000; }
.blue { color: #003; }
.red { color: #B00; }


/* Typostyling */
.script { font-family: miama; line-height: 2em; }

.underlined { text-decoration: underline; }

.giga{
    font-size:80px;
    font-size:5rem;     /* 80px */
    line-height:1.2;    /* 96px */
}
.mega{
    font-size:64px;
    font-size:4rem;     /* 64px */
    line-height:1.125;  /* 72px */
}
.kilo{
    font-size:48px;
    font-size:3rem;     /* 48px */
    line-height:1;      /* 48px */
}


/* Smaller-than-body-copy sizes here. */
.milli {
    font-size: 12px;
    line-height:2; }     /* 24px */
    

/* LISTEN */
ul { list-style: square; margin-left: -20px; }


/* HEWM ICONS */
.icon-hewm {
  position: relative;
  top: -1px;
  display: inline-block;
  width: 16px;
  height: 16px;
}


/* FB LIKEBOX RESPONSIVE */
#fb-root {
display: none;
}

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100%!important;
}

.fb-wrapper { width:100%; background-color: #003; }


/* MOBILE GUI */
#mobilefooter {
	display: none;
}


@media (max-width: 1199px) {
	

}

@media (max-width: 991px) {
	

.logo img { width: 40%; margin: 0em 0em 1em 0em; }

}

@media (max-width: 768px) {
	

body { padding-bottom: 55px; }
.logo img { width: 40%; }	

#mobilefooter {
	display: block;
	height: 55px;
	z-index: 50;
	left: 0px;
	right: 0px;
	bottom: 0px;
	position: fixed;
}

.mobilegui {
	background: #111111;
	color: #ffffff;
	font-weight: bold;
	text-shadow: 0 -1px 1px #000000;
	background-image: -moz-linear-gradient(top, #333, #111111);
	background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #333), color-stop(1, #111111));
	-msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333', EndColorStr='#111111')";
	font-family: Helvetica, Arial, sans-serif;
	text-align: center; font-size: 16px; display: block; margin: 0;  text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important;
}

#mobilefooter .mobilegui ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 55px;
	z-index: 50;
	position:relative;
}

#mobilefooter .mobilegui ul li {
	text-align: center;
	float: left;
	margin: 0;
	padding: 0;
	height: 55px;
	width: 20%;
	z-index: 50;
}
#mobilefooter .mobilegui ul li a {
	padding: 0px;
	margin: 0;
	display: block;
	width: 100%;
	height: 55px;
	border-top: 1px solid rgba(255,255,255,0.1);
	font-weight: bold;
	color: #ccc;
	text-decoration: none;
	font-size: 12px;
	text-shadow : rgb(64, 64, 64) 0px -1px 1px;
	overflow: hidden;
	-webkit-tap-highlight-color : rgba(0,0,0,0);
	float: left;
	text-align: center;
	border-left: 1px solid rgba(255,255,255,0.1);
	position:relative;
	z-index: 50;
}

.mobilegui ul li:first-child a {
	border-left: none;
}

.mobilegui ul li > a > span {
	padding-top:33px;
	display:block;
}

.mobilegui ul li > a > span.extra {
	margin: 0 0 0 -13px; padding: 0;
	width: 25px;
	height: 25px;
	position: absolute;
	top: 3px;
	left:50%;
}

/*
.mobilegui ul li.nav_aktiv {
	background:#333;
	color:#fff;
	background-image: -moz-linear-gradient(top, #333, #444);
	background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #333), color-stop(1, #444));
	-msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333', EndColorStr='#444')";
}

.mobilegui ul li.nav_aktiv a{
	color:#fff;
}

*/

}



/* LAYOUTANPASSUNGEN RESPONSIVE */

@media (max-width: 480px) {
	.logo img { 
	width: 50%; 
}	


}
/* ============================================================================================== 
This copyright notice must be kept untouched in the stylesheet at all times.
The original version of this stylesheet and the associated (x)html 
is available at http://www.script-tutorials.com/night-sky-with-twinkling-stars/
Copyright (c) Script Tutorials. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
================================================================================================= */


@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.abdecker {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
  background:transparent url(../images/sterne/abdecker.png) repeat top center;
  z-index:-10;
  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}