@charset "utf-8";

/*
* CSS-Design
* Musikkapelle Zell-Bechingen
*/
 

/* Reset * * * * * * * * */
*{
	margin: 0;
	padding: 0;	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html{	
	font-size: 100%; /* Browserstandard: 16px */
}


img{
	max-width: 100%;
}


/* Layout * * * * * * * * */

body{
	font-family: Helvetica, Arial, sans-serif;
	line-height: 1.5;
	background: #E7E7E7;
	color:  #333;
	
}



.wrapper{
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 55px;
		
}


#wrapper{
	width:1200px; 
	margin: 0 auto;
	background: #2c3133; /* Schwarz */
	z-index: 15;
	
}


header{
	position: fixed;
	width: 100%;
	background: #2c3133; /* Schwarz */
	text-align: center;
	padding: 15px;
	z-index: 10;
	
}


.start{
	color: #fff;
	font-size: 45px;
	font-family: 'Droid Serif', Georgia, serif; 
	font-style: italic; 
	font-weight: 400; 
		
}

.main{
	width: 100%;
	height:auto;
	float: left;
}

/*Hintergrundbild - aktuell durch Prallax-Effekt ersetzt
.background{
	background-image: url(../images/hintergrundbildkapelle.png);
	background-repeat:no-repeat;
	background-size: cover;
	background-position: center center;
	padding: 80px 0 80px 0;
	width:100%;
	height: 550px;
	z-index:-1;
}*/


/*Prallaxeffekt auf der Startseite*/

.parallax-window {
    min-height: 500px;
    background: transparent;
}


.top{
	position:fixed;
	bottom: 50px;
	right: 30px;
	color: #00FF00;
}

.sidebar{
	background: #fff;
	width: 25%;	
	float: right;
	padding: 45px;
}

footer{
	width: 100%;
	float: left;
	background: #2c3133;	
	margin-top: 25px;
	color: #fff;
	padding: 25px;
}

/*Textbereich Main*/

.main_article{
	background:rgba(255, 255, 255, 0.8);
	float: left;
	padding: 20px;
	margin-top: 165px;
	width:72%;
}


/* Raster * * * * * * * * */

#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   
}


.column {
	float: left;
	padding: 25px;
	margin: 25px 0 25px 2%;
}


/*zentriert das Image auf der Startseite*/
.zentriert {
	display: block;
	margin-left: 22%;
	
}

.row{
	width: 100%;
	float: left;
	
	
}

.column:first-child {
	margin-left: 0;
}



.full { width: 100%; }
.half { width: 49%; }
.third { width: 32%; }
.two-thirds { width: 66%; }
.fourth { width: 23.5%; }
.two-fourth { width: 47%; }
.three-fourth {width:74.5%;}



/*Typografie*/

h2, h3, h4, h5, h6 {    
	font-family: 'Droid Serif', Georgia, serif; 
	font-style: italic; 
	font-weight: 400; 
	margin: 0 0 10px 0; 
}


h1 {    
	font-family: 'Droid Serif', Georgia, serif; 
	font-style: italic; 
	font-weight: 400; 
	font-size: 36px;
	margin: 30px 0 30px 0; 
}

h2{    
	font-size: 25px;     
	line-height: 34px; 
}

h3{
	text-decoration: underline;
}

#teaser h1{ 
	color: #000;    
	font-size: 42px;    
	line-height: 54px; 
	font-weight: bold;
 
} 
 
#teaser h2{
	color: #000; 
	font-size: 36px;
	margin-bottom: 20px; 
	font: 19px/28px 'Droid Serif', Helvetica, Arial, sans-serif; 
}


p{
	margin-bottom: 12px;
}

a{ 
	color: #9bd3fc;     
	text-decoration: none;
} 
 
a:hover{    
	color: #500b12 
}

blockquote {
margin: 1px 0 24px 25px;
font-style: italic;
font-family: Georgia, Times, serif;
color: #666; 
}	

blockquote:before { content: '*'; color: #000000;  font-size:40px;}

blockquote:after { content: '*'; color: #000;  font-size:40px;}

/*Animation fliegende Biene*/
.hovering {
    -webkit-animation-name: hovering;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: hovering;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    animation-name: hovering;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes hovering {
    from {-webkit-transform:translate(0, 0px);}
    50% {-webkit-transform:translate(0, -25px);}
    to {-webkit-transform: translate(0, -0px);}
}

@-moz-keyframes hovering {
    from {-moz-transform:translate(0, 0px);}
    50% {-moz-transform:translate(0, -25px);}
    to {-moz-transform: translate(0, -0px);}
}

@keyframes hovering {
    from {transform:translate(0, 0px);}
    50% {transform:translate(0, -25px);}
    to {transform: translate(0, -0px);}
}


/*Aufzählung mit Bild*/

ul, ol{ 
margin: 0 0 0px 50px; 
}

ul{ 
list-style: none; 
list-style-image: url(../images/aufzaehlung_tuba.gif);    
}

/*Aufzählung mit Stern*/

.normal { 
list-style: "*";
}

.disc { 
list-style:disc;
}

.aufzaehlung{
	list-style: none;
	padding: 25px;
	
}


/*Buttons****/

.button{ 
	background: #500b12;
	padding: 4px 10px; 
	color: #fff; 
	text-decoration: none;    
	font-size: 16px; 
	text-shadow: 1px 1px #842e08;
}

.button:hover{
	background: #fff;
	color: #040404;
	text-shadow: none;
}
.big{
	font-size: 19px;
}

.small{
	font-size: 12px;
}

/*Trennstrich****/

hr{ 
	background-color: #2c3133; 
	border: 0; 
	height: 1px;    
	width: 100%;
	overflow: hidden;
	margin: 20px 0 30px 0;
}

/*Tabelle****/

#termine {
  font-family: "Droid Sans", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#termine td, #termine th {
  border: 1px solid black;
  padding: 8px;
}

#termine tr:nth-child(even){
	background-color: #500b12;
	color:white;
}

#termine tr:nth-child(odd){
	background-color: white;
	color:black;
}

#termine tr:hover {
	background-color: #9bd3fc;
	color:black;
}

#termine tr:nth-child(odd):hover{
	background-color: #9bd3fc;
	color:black;
}

#termine th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #9bd3fc;
  color: black;
}

/*Bildershow auf der Seite Chronik*/

.mySlides {display: none}
      img {vertical-align: middle;}
      .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
      }
      /* Buttons für den Bilderwechsel*/
      .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: rgb(19, 18, 18);
      font-weight: bold;
      font-size: 18px;
      transition: 0.9s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      }
      /* Position the "next button" to the right */
      .next {
      right: 0;
      border-radius: 3px 0 0 3px;
      }
      /* Transparenter Hintergrund für Bildwechsel-Buttons*/
      .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
      }
      /* Text am Bildrand unten*/
      .text {
      color: #ffffff;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
      }
      /* Nummerntext (1/4 usw.) */
      .numbertext {
      color: #ffffff;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
      }
      /* Die Springpunkte am unterhalb der Bilder*/
      .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #999999;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
      }
      .active, .dot:hover {
      background-color: #111111;
      }
      /* Wechselanimation */
      .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 4.5s;
      animation-name: fade;
      animation-duration: 4.5s;
      }
      @-webkit-keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
      }
      @keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
      }
      /* Textgröße bei kleineren Bildschirmen*/
      @media only screen and (max-width: 300px) {
      .prev, .next,.text {font-size: 11px}
      }

/*Ende CSS Slideshow*/


/* Slider  * * * * * * * * */
#sequence{
	margin-bottom: 25px;
}



/*Bild Zoomeffekt beim Drüberfahren mit der Maus"*/
img.zoom {
	transition: transform 0.8s;
	-moz-transition: transform 0.8s;
	-webkit-transition: transform 0.8s;
	-o-transition: transform 0.8s;
	-ms-transition: transform 0.8s;
}

img.zoom:hover {
	cursor: zoom-in;
	cursor: -moz-zoom-in;
	cursor: -webkit-zoom-in;
	transform: scale(1.5, 1.5);
	-moz-transform: scale(1.5, 1.5);
	-webkit-transform: scale(1.5, 1.5);
	-o-transform: scale(1.5, 1.5);
	-ms-transform: scale(1.5, 1.5);
}

img.zoom_right {
	transition: transform 0.8s;
	-moz-transition: transform 0.8s;
	-webkit-transition: transform 0.8s;
	-o-transition: transform 0.8s;
	-ms-transition: transform 0.8s;
	float: right;
	margin: 0 0 20px 20px;
}

img.zoom_right:hover {
	cursor: zoom-in;
	cursor: -moz-zoom-in;
	cursor: -webkit-zoom-in;
	transform: scale(1.5, 1.5);
	-moz-transform: scale(1.5, 1.5);
	-webkit-transform: scale(1.5, 1.5);
	-o-transform: scale(1.5, 1.5);
	-ms-transform: scale(1.5, 1.5);
}

img.zoom_left {
	transition: transform 0.8s;
	-moz-transition: transform 0.8s;
	-webkit-transition: transform 0.8s;
	-o-transition: transform 0.8s;
	-ms-transition: transform 0.8s;
	float: left;
	margin: 0 20px 20px 0px;
}

img.zoom_left:hover {
	cursor: zoom-in;
	cursor: -moz-zoom-in;
	cursor: -webkit-zoom-in;
	transform: scale(2.0, 2.0);
	-moz-transform: scale(2.0, 2.0);
	-webkit-transform: scale(2.0, 2.0);
	-o-transform: scale(2.0, 2.0);
	-ms-transform: scale(2.0, 2.0);
}

/* Kontaktformular */
 
label { 
display: block;
cursor: pointer;
font-weight: 700;
margin-bottom: 6px;
}
 
input[type='text'],input[type='checkbox'], input[type='radio'],
textarea, select {
margin-bottom: 24px;
}
 
input[type='text'], textarea, select {
width: 600px;
border: 1px solid #999;
padding: 5px;
font: 400 15px/24px 'Droid Sans', Helvetica, Arial, sans-serif;
}
 
textarea {
height: 220px;
}
 
input:hover, textarea:hover {
border: 1px solid #ff5e1c;
}
 
input:focus, textarea:focus {
border: 1px solid #ff5e1c;
background: #eee;
}
 
input[type='submit'], input[type='reset']{
border: 0;
cursor: pointer;
margin-right: 20px;
background: #500b12;
padding: 4px 10px;
color: #fff;
font-size: 16px;
border-radius: 4px;
text-shadow: 1px 1px #842e08;
}
 
input[type='reset']{
background: #9bd3fc;
text-shadow: none;
color: #000000;
}
 
input[type='submit']:hover, input[type='reset']:hover{
background: #fff;
color: #9bd3fc;
text-shadow: none;
border: solid 1px black;
}

/*CSS für die Frühlingsfestseite*/

.wrapperfest{
	max-width: 1200px;
	margin: 0 auto;
	background: #80ab1e;
	border-left: 1px solid white;
	border-right: 1px solid white;
	
}

hr.fest{
	border: thin solid #FFFFFF;
	
}

.backgroundfest{
	background-image: url("../images/fruehlingsfest/hintergrund.jpg");
	background-repeat:no-repeat;
	background-size: cover;
	background-position: center center;
	padding: 80px 0 0 0;
	width:100%;
	height: auto;
}

.festhintergrund{
	margin: 0px  auto;
	background: url("../images/fruehlingsfest/gras.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-position: bottom;
	height: 500px;
	padding: 50px;
	z-index: 1;
}

.festschrift{
	font-family: 'Courgette', 'Lobster', 'mascot-mvb', sans-serif; 
	font-weight: 300; 
	font-style: normal; 
	font-size: 6.5em;
	font-weight: bold;
	font-style: italic;
	color: black;
	padding: 20px 0 0 20px;
		
}
.festschrift2{
	font-family: 'Courgette', 'Lobster', 'mascot-mvb', sans-serif; 
	font-weight: 300; 
	font-style: normal; 
	font-size: 4.5em;
	font-weight: bold;
	font-style: italic;
}

.festbereich{
	padding: 10px 0 0 20px;
	font-size: 25px;
}

.festbereich h1{
	color: white;
	text-decoration: underline;
	
}

/*Laufband CSS*/
.tech-slideshow {
  height: 250px;
  max-width: 3100px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
   	
}

.tech-slideshow > div {
  height: 250px;
  width: 3100px;
  background: url("../images/fruehlingsfest/Sponsoren/laufbandsponsoren.png");
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}

/*Geschwindigkeit des Laufbandes*/
.tech-slideshow .mover-1 {
  animation: moveSlideshow 45s linear infinite;
}


@keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);  
  }
}


/*Cookie*/
#cookiedingsbums a {color:#fff; text-decoration:none;}

#cookiedingsbums a:hover {color: #500b12; text-decoration:underline;}

#cookiedingsbums div {padding:10px; padding-right:40px;}

/*Eigenschaften zur Cookie-Bereich mit div. Browserunterstützung*/
#cookiedingsbums { 
   color: #fff;
   outline: 1px solid #7b92a9; 
   text-align:right; 
   border-top:1px solid #fff;
   background: #2c3133; 
   background: -moz-linear-gradient(top, #2c3133 0%, #f2f6f9 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c3133), color-stop(100%,#f2f6f9)); 
   background: -webkit-linear-gradient(top, #2c3133 0%,#f2f6f9 100%); 
   background: -o-linear-gradient(top, #2c3133 0%,#f2f6f9 100%);
   background: -ms-linear-gradient(top, #2c3133 0%,#f2f6f9 100%); 
   background: linear-gradient(to bottom, #2c3133 0%,#f2f6f9 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#2c3133', endColorstr='#f2f6f9',GradientType=0 ); 
   position:fixed;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
   font-size:12px; 
   line-height:16px;
	}

#cookiedingsbumsCloser {
   color: #777;
   font: 14px/100% arial, sans-serif;
   position: absolute;
   right: 5px;
   text-decoration: none;
   text-shadow: 0 1px 0 #fff;
   top: 5px;
   cursor:pointer;
   border-top:1px solid white; 
   border-left:1px solid white; 
   border-bottom:1px solid #7b92a9; 
   border-right:1px solid #7b92a9; 
   padding:4px;
   background: #ced6df; /* Old browsers */
   background: -moz-linear-gradient(top, #ced6df0, #f2f6f9 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ced6df), color-stop(100%,#f2f6f9)); 
   background: -webkit-linear-gradient(top, #ced6df0,#f2f6f9 100%); 
   background: -o-linear-gradient(top, #ced6df0,#f2f6f9 100%); 
   background: -ms-linear-gradient(top, #ced6df0,#f2f6f9 100%); 
   background: linear-gradient(to bottom, #ced6df0,#f2f6f9 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(    startColorstr='#ced6df', endColorstr='#f2f6f9',GradientType=0 ); 
 }

#cookiedingsbumsCloser:hover {
	border-bottom:1px solid white;
	border-right:1px solid white;
	border-top:1px solid #7b92a9;
	border-left:1px solid #7b92a9;
}
	
/* Media Queries * * * * * * * * */

@media only screen and (min-width: 1279px) and (max-width: 1800px) {
	

}
@media only screen and (min-width: 980px) and (max-width: 1279px) {
.wrapper{
	width: 100%;
	overflow:hidden;
}	
	
#wrapper{
	width: 100%;
}	
}

@media only screen and (min-width: 760px) and (max-width: 979px) {
.wrapper{
	width: 100%;
	overflow:hidden;
}

	#wrapper{
	width: 100%;
}
	
}


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

.festbereich h1 {
	font-size: 40px;
}
.wrapper{
	width: 100%;
	overflow:hidden;
}
	
.wrapperfest{
	width: 100%;
	overflow:hidden;
}

#wrapper{
	width: 100%;
}

#trans1 {
  width: 759px;
  

  
}	
.two-fourth, .three-fourth {
	width: 96%;
	margin: 10px;
	padding: 10px 0px 10px 10px;
}

.fourth{
	width: 96%;
	margin: 5px 5px 0px 5px;
	padding: 20px 20px 0px 20px;
}

.main_article{
	width:96%;
	margin: 35px 2% !important;
}
	
#termine{
		width: 95%;
		 margin-left: 10px;
	}

img.zoom_left:hover, .zoom_right:hover, .zoom:hover {
	transform: none;
}

.top{
	display: none;
		
	}

.festschrift{
	padding-top: 80px;
	font-size: 3.5em;
		
}


.festschrift2{
	font-size: 3em;
	
}

img.imagebig{
	width: 1850px;
}
	
}