/*
2DO:
 .schatten für IE prüfen;
  <div id="innerWrapper" class="cf">




/*========================================================
        1. Allgemeine HTML-Elemente
========================================================*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    /*font-size: 100%;*/
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
html {
    height: 100%;
    position: relative;
}


body {
    color: #FFF;
    background-color: #000;
    font-family: 'Encode Sans Semi Expanded', Arial, sans-serif;
    font-size: 100%;
    height: 100%;
    line-height: 1.375;
}


ol, ul {
    list-style: none outside none;
}
div {
    overflow: visible;
}

a:link {    color: #fff;}

a:visited { color: #fff;}

a:hover, a:focus {  text-decoration: none;}

a:active{   color: #fff;}

a { text-decoration: none; outline: none;}/* outline entfernt beim klicken den gepunkteten rahmen um den link*/

h1, h2, h3, h4, h5 {
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

h1 {
    font-size: 300%;
    margin-bottom: 1em;
}

h2 {
    font-size: 400%;
    margin-bottom: .5em;
    line-height: 1em;
    font-weight: 200;
}

h3 {
    text-transform: inherit;
    letter-spacing: .03em;
    font-size: 220%;
    font-weight: 200;
    margin-bottom: .5em;
}


.spinner {
    background-attachment: fixed;
    background-position: center center; 
    background-repeat: no-repeat;
    background-image: url('../pix/spinner.gif'); 


}

#wrapper {
    height: 100%;
    position: relative;
    /*background: transparent linear-gradient(to bottom, transparent 0%, transparent 50%, #000 100%) repeat scroll 0% 0%;*/

}

#spalte {
    position: relative;/* Wichtig sonst hinter bgr */
    z-index: 100; /* Wichtig sonst hinter bgr */

    width: 760px;
    height: 100%;
    margin: 0 auto;

}
.tabelle {
    display: table;
}

#spalte h1{
    text-align: center;
}

#zentriert {

    text-align: center;
    vertical-align: middle;

    text-align: center;
/*vertical-align: bottom;*/
padding-bottom: 100px;


}
.tabellen-zelle {
    display: table-cell;
}

#monoxon-logo {
    width: 50%;
    height: 50%;
}

#slideshow {
    position:relative;
    z-index:-1;
    opacity: .50; /*ex .33 */
}

#slideshow div {
    height: 100%;
    
    position: fixed;

    height: 100%;
    left: 0;
    min-height: 100%;
    /*position: fixed;*/
    text-align: center;
    top: 0;
    width: 100%;

    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    opacity:0.0;
}

#slideshow div.active {
    z-index:10;
    opacity:1.0;
}

#slideshow div.last-active {
    z-index:9;
}

#defaultCountdown span{ 
font-weight: 100;
     }

/*========================================================
     media query
========================================================*/

@media only screen and (min-width: 500px)  and (max-width: 900px) { /*760 900*/

h1 {
    margin-bottom: .66em;
}

h2 {
    font-size: 240%;

}

h3 {

    font-size: 160%;

}

#monoxon-logo {
    width: 40%;
    height: 40%;
}

#spalte {
    width: 500px;

}
.countdown-section {
    font-size: 70%;
}

#defaultCountdown { 
    width: 460px; 
    height: 45px;
     }


}

@media only screen and (min-width: 00px)  and (max-width: 500px) { /*760 900*/

h1 {
    margin-bottom: .45em;
}

h2 {
    font-size: 160%;

}

h3 {

    font-size: 140%;

}

#monoxon-logo {
    width: 66%;
    height: 66%;
}

#spalte {
    width: 300px;

}
.countdown-section {
    font-size: 47%;
}

#defaultCountdown { 
    width: 300px; 
    height: 45px;
     }
.countdown-period {
    /* YEARs, DAYS, MONTH, ...etc */
    font-size: 140%;

}


}