/**************************************************/
/* ALLGEMEINE FORMATIERUNGEN                      */
/**************************************************/
body {
    /* nahtloser Übergang zum Brwoserfenster */
	margin: 0px;
	padding: 0px;
    /* Hintergrund - zu sehen im Kontaktbereich */
	background: #2A3132;
    /* Grundlegende Schriftformatierungen */
	font-family: 'Nunito', sans-serif;
	font-size: 11pt;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
}

ul {
	margin-top: 0px;
}

p {
	margin-top: 0px;
}

a 
{
    text-decoration: none;
}

iframe {
    padding-top: 10px;
}

table {
  border: 1px solid #90AFC5;
  background-color: #FFFFFF;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

table thead {
  background: #90AFC5;
}

table thead th {
  font-size: 1em;
  font-weight: bold;
  color: #FFFFFF;
}

table td, table th {
  padding: 5px;
}

table tbody td {
  font-size: 0.9em;
}

.title
{
    padding-top: 1em;
    margin-bottom: 1em;
    text-transform: uppercase;
}

.title h2
{
    font-weight: 400;
    color: #763626;
}

.title h3
{
    font-weight: 400;
    color: #FFFFFF;
}

.textsmall {
    font-size: 0.9em;
}

.textbold {
    font-weight: 600;
}


/**************************************************/
/* FORMATIERUNGEN FÜR LISTEN                      */
/**************************************************/
ul.normal
{
    margin: 0;
    line-height: 1.5em;
    list-style: circle;
}

ul.contact
{
    margin: 0;
    padding: 1em 0em 1.5em 0em;
    list-style: none;
}
	
ul.contact li
{
    /* Symbole im Kontaktbereich bilden Nebeneinander-Blöcke */
    display: inline-block;
    padding: 0 0.3em;
}

/* Textersatz für Symbole im Kontaktbereich */
ul.contact li span
{
    display: none;
    margin: 0;
    padding: 0;
}

ul.content
{
    list-style: none;
    line-height: 1.5em;
}

/**************************************************/
/* RAHMEN                                         */
/**************************************************/

/* Gesamtcontainer mit initialer Breite von 1000 Pixel */
.container
{
	width: 1000px;
    /* Mittige Ausrichtung des Gesamtcontainers (auch bei Fenstervergrößerung) */
	margin: 0 auto;
    padding: 0;
}

#header-container
{
    /* Abstand des Header-Bereiches nach oben und unten */
	padding: 2em 0em 2em 0em;
	background: #336B87;
}

#menu-container
{
	background: #2A3132;
	background-size: 100%;
}

/* Liegt direkt auf dem Gesamtcontainer */
#content-container {
	background: #FFFFFF;
    height: 100%;
}


/**************************************************/
/* KOPFBEREICH                                    */
/**************************************************/
#header 
{
    overflow: hidden;
}

#logo 
{
    width: 500px;
    /* Abstand des Logo-Bereiches nach oben und unten */
    margin: 0 auto;
    padding: 0em 0em 0em 0em;
    text-align: center;
}

/* Formatierung des Wortes "HOMEPAGE" im Logo-Bereich */
#logo h1
{
    letter-spacing: 0.50em;
    font-size: 2.5em;
    text-align: center;
}
	
#logo p 
{
    letter-spacing: 0.50em;
    text-align: center;
    color: #FFFFFF;
}
	
/* Formatierung des Links "HOMEPAGE" */
#logo a 
{
    text-decoration: none;
    color: #FFFFFF;
}
	

/**************************************************/
/* SEITENMENÜ                                     */
/**************************************************/
#menu {
	overflow: hidden;
    width: 1000px;
	height: 50px;
}

#menu ul {
    width: 800px;
	list-style: none;
    padding-left: 205px;
}

#menu li {
    float: left;
}

#menu a {
    display: inline-block;
    width: 118px;
    height: 32px;
    vertical-align: middle;
    padding-top: 18px;
    text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.9em;
    letter-spacing: 0.1em;
	border: none;
	color: #FFFFFF;
}

#menu a:hover {
	text-decoration: none;
    background: #1E1B1A;
    font-weight: 600;
}

#menu > input {
    display: none;
}


#menu > label {
    display: none;
}

#menu .current_page_item a {
	background: #90AFC5;
}

.current {
  float: none;
  top: 0px;
  width: 50px;
  height: 50px;
  margin-left: 267px;
  -webkit-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
  -moz-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
  -o-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
  -ms-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
  transition: all 400ms cubic-bezier(.16,1.23,.87,1.18);
}

.bottom-stroke {
    visibility: hidden;
    position: relative;
    width: 4px;
    height: 0px;
    top: 46px;
    background: #763626;
    border-top: 4px solid #763626;
}

.menu_item_1:hover ~ .current
{
    margin-left: 58px;
}
.menu_item_1:hover ~ .current .bottom-stroke
{
    visibility: visible;
}
.menu_item_2:hover ~ .current
{
    margin-left: 176px;
}
.menu_item_2:hover ~ .current .bottom-stroke
{
    visibility: visible;
}
.menu_item_3:hover ~ .current
{  
    margin-left: 294px;
}
.menu_item_3:hover ~ .current .bottom-stroke
{
    visibility: visible;
}
.menu_item_4:hover ~ .current
{
    margin-left: 412px;  
}
.menu_item_4:hover ~ .current .bottom-stroke
{
    visibility: visible;
}
.menu_item_5:hover ~ .current
{
    margin-left: 530px; 
}
.menu_item_5:hover ~ .current .bottom-stroke
{
    visibility: visible;
}

#control {
    position: absolute;
    display: block;
    top: 0.1em;
    right: 0.6em;
}

#control a {
    margin-right: 0.2em;
    font-size: 10pt;
    font-weight: 400;
    color: #E1E4E5;
}

#control a:hover {
    color: #90AFC5;
}


/** PAGE */

#page
{
	position: relative;
	overflow: hidden;
    margin: 2em auto;
	padding: 1em auto;;
    height: 400px;
}
/** CONTENT */

#content
{
	overflow-y: auto;
    float: left;
    width: 800px;
    height: 400px;
    padding: 0 2em;
}

#content p
{
    line-height: 1.5em;
    color: #1E1B1A;
}

#content a
{
    color: #90AFC5;
}

#content a:hover
{
    padding-left: 5px;
    border-left: 1px solid #763626;
    font-weight: 600;
}

#content a.noborder:hover
{
    padding: 0;
    border: 0;
    font-weight: 600;
}

#text_ma1 , #text_ma2 , #text_ma3 , #text_ma4, #scplayer, #table_drums {
    display: none;
}

	
/*********************************************************************************/
/* Button Style                                                                  */
/*********************************************************************************/
.button
{
    display: inline-block;
    margin-bottom: 1em;
    padding: 0.5em 1.5em 0.5em 1.5em;
    background: #336B87;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9em;
    font-weight: 400;
    color: #FFFFFF;
    background-color: #336B87;
    box-shadow: 2px 2px #2A3132;
}

.button:hover
{
    background-color: #2E6580;   
}

.button:active
{
    background-color: #2E6580;
    box-shadow: 1px 1px #2A3132;
    transform: translate(2px, 2px);
}

ul.contact li a:before
{
    display: inline-block;
    width: 40px;
    height: 40px;
    /* Vertikal mittige Positionierung des Link-Textes */
    line-height: 40px;
    text-align: center;
    color: #FFFFFF;
}

ul.contact li a
{
    display: inline-block;
    color: #FFFFFF;
    background-color: #336B87;
    box-shadow: 2px 2px #2A3132;
}

ul.contact li a:hover
{
    background-color: #2E6580;   
}

ul.contact li a:active
{
    background-color: #2E6580;
    box-shadow: 1px 1px #2A3132;
    transform: translate(2px, 2px);
}

/* Spezielle Formatierung für bekannte Marken */

ul.contact li a.icon-facebook:before { background-color: #3B5998; }


/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
	
#footer-wrapper
{
    overflow: hidden;
    padding: 0.5em 0em 0.5em 0em;
    background: #1E1B1A;
}
	
#footer 
{

}

#footer .title h3
{
    font-size: 0.9em;
}
	
#footer ul.linklist
{
    font-size: 1em;
    margin: 0;
    padding: 0;
    list-style: none;
}
	
#footer ul.linklist li
{
    border-top: solid 1px #336B87;
    padding: 0.1em 0em 0.3em 0em;
}
	
#footer ul.linklist li:first-child
{
    border-top: 0;
    padding-top: 0;
}

#footer ul.linklist a
{
    color: #763626;
}
    
#box1
{
    float: left;
    width: 300px;
    padding-left: 2em;
}

#box1 a:hover
{
    font-weight: 600;
}
	
#box2
{
    float: right;
    width: 300px;
    padding-right: 200px;
}

/* DER COPYRIGHT-Bereich ganz unten auf der Seite */
#copyright
{
    padding: 1.75em 0em 1em 0em;
    text-align: center;
}
	
#copyright p
{
    letter-spacing: 0.35em;
    text-align: center;
    font-size: 0.67em;
    color: #FFFFFF;
}

#favBoxes {
    width: 750px;
}

#favBoxes ul {
    margin: 0 0 0 36px;
    padding: 0;
    width: 100%;
}

#favBoxes ul:after {
    content: "";
    display: table;
    clear: both;
}

#favBoxes li {
    position: relative;
    top: 0;
    left: 0;
    width: 140px;
    height: 140px;
    margin: 0px 10px 10px 0px;
    padding: 0;
    float: left;
    list-style: none;
}

#favBoxes li a {
    display: block;
    width: 140px;
    height: 140px;
    text-decoration: none;
    text-align: center;
    font-size: 12px;
    border-radius: 4px;
    background-color: #ECF0F1;
}

#favBoxes li a:hover
{
    padding-left: 0;
    border-left: 0;
    font-weight: 400;
}

#favBoxes li p {
    width: 140px;
    height: 140px;
    padding: 2px 4px 0px 4px;
    color: #FFFFFF;
    text-align: left;
    font-size: 8px;
}

#favBoxes ul li .info {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 140px;
    border-radius: 4px;
    pointer-events: none;
    background-color: #336B87;
    opacity: 0;
}

#favBoxes .in .info {
    animation: animateIn 0.7s ease 0s 1 normal;
    -webkit-animation: animateIn 0.7s ease 0s 1 normal;
    opacity: 1;
}

#favBoxes .out .info {
    animation-name: animateOut;
    -webkit-animation-name: animateOut;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    transform: scale(0.67);
}

@keyframes animateIn {
  0%{
	opacity: 0;
	transform: scale(0.3);
  }
  50%{
	opacity: 1;
	transform: scale(1.0);
  }
  70%{
	transform: scale(0.9);
  }
  100%{
	transform: scale(1);
  }
}

@-webkit-keyframes animateIn {
  0%{
	opacity: 0;
	-webkit-transform: scale(0.3);
	transform: scale(.3);
  }
  50%{
	opacity: 1;
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
  }
  70%{
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
  }
  100%{
	-webkit-transform: scale(1);
	transform: scale(1);
  }
}

@keyframes animateOut {
  40% {
      -webkit-transform: scale3d(.9, .9, .9);
      transform: scale3d(.9, .9, .9);
  }
  50%, 55% {
      opacity: 1;
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
  }
}

@-webkit-keyframes animateOut {
  40% {
      -webkit-transform: scale3d(.9, .9, .9);
      transform: scale3d(.9, .9, .9);
  }
  50%, 55% {
      opacity: 1;
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
  }
}