@font-face { font-family: 'ABEEZEE-ITALIC';
             src: url('fonts/ABEEZEE-ITALIC.TTF') format('truetype'); }

@font-face { font-family: 'ABEEZEE-REGULAR';
              src: url('fonts/ABEEZEE-REGULAR.TTF') format('truetype'); }

::selection{
	background:none;
	color:#9f1c1f;
  }

  #back-top {
      position: fixed;
      bottom: 30px;
      right: 20px;
      z-index: 3;
      display: none;
  }

  #back-top a {
      width:40px;
      height:40px;
      display: block;
      text-align: center;
      font-size: 4em;
      color: #fff;
      background:rgba(0, 0, 0, 0.51);
      border-radius: 180px;
      -moz-border-radius: 180px;
      -webkit-border-radius: 180px;
      -o-border-radius: 180px;
      -ms-border-radius: 180px;
      transition: background-color .15s;
      -moz-transition: background-color .15s;
      -webkit-transition: background-color .15s;
      -o-transition: background-color .15s;
      -ms-transition: background-color .15s;
  }

  #back-top a:hover {
      text-decoration: none;
      background-color:rgba(0, 0, 0, 1);
  }

  #event_container{
    height:300px;
  }

.hidden{
  display:none;
}
.event_pic{
  width:30%;
  float:left;
  margin: 0px 30px;
  vertical-align:bottom;
  box-shadow:1px 1px 3px 1px black;
}

.event{
	width:100%;
	margin: 30px auto 20px auto;
	display:inline-block;
}



	html{
		background: url('./images/hintergrund.jpg')  center center fixed;
        -webkit-background-size: cover;
        -moz-background-size:cover;
        -o-background-size: cover;
        background-size: cover;
	}

body{
  /* background-image:url('images/1.jpg');
  background-attachment: fixed;
  background-size:cover; */
  font-family: 'ABEEZEE-REGULAR';
  margin: 15px;
  padding: 0px;
}

ul{
  list-style:none;
  width:100%;
}

a,a:visited{
    color:black;
    text-decoration:none;
    transition:0.5s;
    -webkit-transition:0.5s;
}

a:hover{
  color:#9f1c1f;
}

nav p{
    width:100px;
}

.nav{
	height:120px;
}

.item img{
  width:100%;
}

.main_content_text{
  padding-left: 37px;
  padding-right: 37px;
  margin-bottom:20px;
}


.main_content a{
  color:rgb(220, 136, 79);
  font-family: 'ABEEZEE-ITALIC';
}

.google{
  text-align: center;
}

#logo{
  background:url('./images/Logo.png') no-repeat center center;
  background-size:contain;
  display:block;
  height:200px;
  text-align:center;
  margin-bottom:20px;
}

#logo img{
	height:100%;
}

/* Navigation */
.link_active{
  position: relative;
  top:-80px;
}

.link_inactive{
  position:relative;
  top:-32px;
}

.active{
  display:initial;
}

nav ul li a:hover img{
  display:initial;
}

nav ul li a:hover .link_inactive{
  position:relative;
  top:-80px;
}

.inactive{
  display:none;
}

#menubar{
	display:none;
}

#menubar ul{
	display:block;
	width:2em;
	padding:0em 0em 0em 0.5em;
}

#menubar ul li{
	display:inline;
}

#menubar ul li a.menubutton{
	display:none;
}

nav{
  display:block;
  padding:0px;
  text-align:center;
}

nav ul{
	display:table;
  padding:0px;
  margin:auto;
  width:100%;
}

nav ul li{
  display:inline-block;
  vertical-align:middle;
  font-size: 1.25em;
  margin-right: 1em;
}

nav ul li img{
  opacity:0.6;
}

nav ul a{
  display:table-cell;
  color:black;
  text-decoration:none;
}
/* Sidenav */

.sidenav{
  font-size:0.9em;
  width: 20%;
  float:left;
  height:0px;
  display:inline-block;
  margin-right:3px;
  background-image:url('images/sidenav.png');
  background-attachment: fixed;
  box-shadow: none;
  -webkit-animation-name: farbig;
	-webkit-animation-duration: 15s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay:1s;
	animation-name: farbig;
	animation-duration: 15s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay:1s;
}

.sidenav_link_box{
  width:80%;
  border-left: 2px solid white;
  margin-left:47px;
  color:white;
}

.sidenav_link{
  width:100%;
  height:35px;
  margin-left:-5px;
  font-size:1.2em;
  text-align:left;
}

.sidenav_link a{
  color:white;
}

.sidenav_link a:hover{
  color:rgb(220, 136, 79);
}

.sidenav_upper_pic{
  text-align:left;
  padding:30px 0px 0px 21px;
  height:93px;
}

.sidenav_lower_pic{
  padding:0px 0px 0px 27px;
  text-align:left;
}

/* Main */

.main{
  max-width:1080px;
  margin:30px auto 0px;
  text-align:center;
}

.main_content{
  text-align:left;
  width: 79%;
  float:left;
  min-height:350px;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.51);
  color:white;
  display:inline-block;
  font-size:0.8em;
  letter-spacing: 0.05em;
  box-shadow: none;
  -webkit-animation-name: farbig;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-name: farbig;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* Kontaktformular */

.main_content form{
  margin-left:30px;
  font-size:0.7em;
}

.main_content table{
  width: 100%;
}

.main_content tr{
  line-height: 1.4em;
}

.main_content input{
  width:60%;
  height:1.4em;
  box-shadow: 3px 3px 9px 2px;
}

.main_content textarea{
  width:80%;
  height:200px;
  font-family: 'ABEEZEE-REGULAR';
  box-shadow: 3px 3px 9px 2px;
  resize: none;
}

.main_content select{
  width:30%;
  font-family: 'ABEEZEE-REGULAR';
  box-shadow: 3px 3px 9px 2px;
}

.button{
  width: 20%!important;
  height:2em!important;
  margin-top:20px;
}

.main_content_title{
  font-size:1.25em;
  padding-top:20px;
  padding-left: 37px;
  text-align: left;
}

.flyer_home{
  height:auto;
  text-align:center;
}

.drinks{
  width:90%;
  display:block;
  box-shadow: 1px 9px 16px black;
  margin:auto;
  padding:0px;
  vertical-align:bottom;
}

[id='1']{
	margin-top:25px;
}
[id='6']{
	margin-bottom:25px;
}

.flyer{
  width:100%;
}

.flyer_home img{
  width:80%;
  height:auto;
}

.crewmember_picture{
  float:left;
}

.crewmember_picture img{
  width:75%;
  height:auto;
  margin: 10px 20px 20px 30px;
  box-shadow:1px 1px 3px 1px black;
}

.crewmember_picture_history{
  float:left;
  height:auto;
  margin: 10px 20px 20px 30px;
  box-shadow:1px 1px 3px 1px black;
}

.crewmember_description{
    padding:10px 20px 0px 10px;
    color: white;
    text-align:left;
    line-height: 1.3em;
  }

  .crewmember_description_history{
      padding:20px;
      color: white;
      text-align:left;
      margin-bottom:20px;
    }

  .crewmember{
      width:100%;
      height:210px;
      margin-top:30px;
  }
/* footer */
.footer{
  clear:both;
  padding-top:10px;
}

.footer ul{
    margin:auto;
    padding:0;
    display:table;
}

.footer li{
  font-size: 0.9em;
  display:table-cell;
  vertical-align:middle;
  font-weight:bold;
}

.footer img{
  height:80px;
}

.allewuerfel{
  margin-top:20px;
}

.allewuerfel img{
  width:80%;
}

@media screen and (max-width:1400px){
	
	html{
		-webkit-background-size: auto;
        -moz-background-size:auto;
        -o-background-size: auto;
        background-size: auto;
	}

  .sidenav{
    width:27%;
  }

  .sidenav_link{
    font-size:1em;
  }

  .main_content{
    width:72%;
  }
}

/* Mediascreen*/
@media screen and (max-width:1200px){

  .footer li{
    font-size: 0.7em;
  }
  
  .event_pic{
	  width:30%;
  }
}

@media screen and (max-width:1050px){

  .main_content{
    box-shadow: 1px 1px 150px 5px wheat;
  }
}

@media screen and (max-width:950px){

	nav ul li{
		font-size:1.05em;
	}

  ul{
    width:100%;
  }

  nav ul a{
    font-size: 1em;
  }
  
  .event{
	  width:100%;
  }

  .main_content{
    width:100%;
    font-size: 0.8em;
    box-shadow: 1px 1px 80px 5px wheat;
  }


  .sidenav{
    display:none;
  }

  .footer ul li{
    display:block;
    font-size:1em;
    margin-top:10px;
	font-weight: bold;
  }
}
/* Smartphone - vertikal */
@media screen and (max-width:750px){
	
	body{
		margin:30px;
	}
	
	.drinks{
		width:100%;
		box-shadow: none;
		margin:0px;
	}
	
	.main_content_text{
		padding-right:10px;
		padding-left:15px;
	}
	
	.owl-controls{
		display:none!important;
	}
	
	html{
		background: url('./images/hintergrund.jpg');
		background-attachment:fixed;
		background-size:auto;
	}
	
	.event{
		font-size:0.75em;
		letter-spacing:0.05em;
		border-bottom: 1px solid white;
		margin: 30px auto 0px auto;
	}
		
	.event img{
		margin-bottom: 20px;
		
	}
	
	.event_pic{
		margin: 0px 15px;
		width:40%;
	}

  #logo{
    margin:-20px auto 18px;
	height:150px;
  }

  /* Navigation */

  .link_active{
    top:0px;
  }

  .link_inactive{
    top:0px;
  }

  .active{
    display:none;
  }

  .nav{
	display:none;
	height:auto;
	margin-top:-210px;
	padding:20px;
	background-color: rgba(255,255,255,0.69);
  }
  
  nav p{
    margin:auto;
    width:100%;
  }

  nav ul li a:hover img{
    display:none;
  }

  nav ul li a:hover .link_inactive{
    top:0px;
  }

  .inactive{
    display:none;
  }

  #menubar ul li img{

    position:relative;
    z-index: 2;
  }
  #menubar,#menubar ul li a.menubutton{
    display:block;
  }

  #menubar{
    margin-bottom:-40px;
    height:20px;
  }

  .main_content{
    border-radius:0px;
    box-shadow: none;
    min-height:100px;
	-webkit-animation-name: farbig;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-name: farbig;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
  }

  .main_content_drinks{
    padding-top:0px;
    padding-bottom:0px;
  }

  .main_content_text{
    margin-top:0px;
  }

  .main_content_title{
    text-align:center;
    padding-left:0px;
  }

  nav ul li{
    display:block;
  	margin:0.5em 0px 0px 0px;
    width:100%;
    font-size: 1.5em;
  }

  nav ul a{
    display:block;
    color:black;
    text-decoration:none;
  }

  .crewmember{
    text-align:center;
  }

  .crewmember_picture img{
    border-radius:100px;
    width:80%;
    margin:0px 0px 20px 25px;
  }

  .allewuerfel{
    margin-top:0px;
  }
}

@media screen and (max-width:550px){
	
	body{
		margin:10px;
	}
	
	
	#logo{
		margin:-20px auto 25px;
		
	}
	
	.event{
		font-size:1em;
		width:80%;
		margin: 30px auto 10px auto;	
		display:block;
		border-bottom:1px solid white;
	}
	
	.event img{
		margin-bottom: 20px;
		float:none;
	}
	
	.event_pic{
		width:100%;
		margin:0px;
	}
	
  .main_content_text{
    padding-left: 12px;
    padding-right: 12px;
  }

.crewmember_picture{
  float:none;
  display:inline-block;
  margin: 20px 0px 20px 0px;
}

.crewmember_picture_history{
  text-align: center;
  float:none;
  display:block;
  margin: 20px 0px 20px 0px;
  box-shadow: none;
}

.crewmember_picture_history img{
  box-shadow:1px 1px 3px 1px black;
  width:80%;
}

.crewmember_picture img{
  margin:0px;
}

.crewmember_description{
    padding:0px;
    color: white;
    width:100%;
    text-align:center;
    margin-bottom:20px;
  }

  .crewmember_description_history{
      padding:12px;
      color: white;
      text-align:left;
      margin-bottom:20px;
    }

  .crewmember{
      width:100%;
      height:100%;
      margin-top:20px;
  }

  /* Kontaktformular */
  .main_content{
    font-size:0.8em;
  }

  .main_content form{
    margin-left:0px;
  }

  .main_content input{
    width:100%;
  }

  .main_content textarea{
    width:100%;
    height:150px;
  }

  .main_content select{
    width:100%;
  }

  .button{
    width: 50%!important;
  }


}
/* Animationen */
@-webkit-keyframes farbig{
	
	0% {box-shadow: 0px 0px 45px 3px #FFFFFF; }
	10% {box-shadow: 0px 0px 45px 3px #2F4F4F; }
	20% {box-shadow: 0px 0px 45px 3px #800080; }
	30% {box-shadow: 0px 0px 45px 3px #FF0000; }
	40% {box-shadow: 0px 0px 45px 3px #FFFF00; }
	50% {box-shadow: 0px 0px 45px 3px #000000; }
	60% {box-shadow: 0px 0px 45px 3px #0000FF; }
	70% {box-shadow: 0px 0px 45px 3px #FF00FF; }
	80% {box-shadow: 0px 0px 45px 3px #008080; }
	90% {box-shadow: 0px 0px 45px 3px #00FF00; }
	100% {box-shadow: 0px 0px 45px 3px #FFFFFF; }
	
}

@keyframes farbig {
	
	0% {box-shadow: 0px 0px 45px 3px #FFFFFF; }
	10% {box-shadow: 0px 0px 45px 3px #2F4F4F; }
	20% {box-shadow: 0px 0px 45px 3px #800080; }
	30% {box-shadow: 0px 0px 45px 3px #FF0000; }
	40% {box-shadow: 0px 0px 45px 3px #FFFF00; }
	50% {box-shadow: 0px 0px 45px 3px #000000; }
	60% {box-shadow: 0px 0px 45px 3px #0000FF; }
	70% {box-shadow: 0px 0px 45px 3px #FF00FF; }
	80% {box-shadow: 0px 0px 45px 3px #008080; }
	90% {box-shadow: 0px 0px 45px 3px #00FF00; }
	100% {box-shadow: 0px 0px 45px 3px #FFFFFF; }
	}