@font-face {
    font-family: 'DroidSerifBoldItalic';
    src: url('../fonts/DroidSerif-BoldItalic-webfont.eot');
    src: url('../fonts/DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/DroidSerif-BoldItalic-webfont.woff') format('woff'),
    url('../fonts/DroidSerif-BoldItalic-webfont.ttf') format('truetype'),
    url('../fonts/DroidSerif-BoldItalic-webfont.svg#DroidSerifBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

* {margin: 0; padding: 0; border: 0}
body {font-size: 14px;color:#ffffff; font-family: DroidSerifBoldItalic;}



a {
    text-decoration: none;
    color: #FFFFFF;
    outline: 0;
    -webkit-transition: all 0.3s ease-in-out; /* Firefox */
    -moz-transition: all 0.3s ease-in-out; /* WebKit */
    -o-transition: all 0.3s ease-in-out; /* Opera */
    transition: all 0.3s ease-in-out; /* Standard */
}

a:hover {
    color: #666;
}

h1 {
    padding: 7px 2px;
    text-align: right;
}

h2 {
    font-size: 20px;
   margin-top: 10px;
}

.textbox1 {
    font-size: 4.2em;
    padding: 7px 15px;
    position: absolute;
    right: 5%;
    top: 10%;

}

.textbox2 {
    margin-top: 3px;
    font-size: 3em;
    padding: 7px 15px;
    position: absolute;
    right: 5%;
    top: 20%;
    float: right;
   }

#spielplan-container {
    position: absolute;
    bottom: 10%;
    right: 5%;
}
.gig-left {
    clear: both;
    float: left;
    background-color: #99262a;
    width: 110px;
    height: 55px;
    text-align: center;
    padding: 2px;
    margin-bottom: 2px;
}
.gig-right {
    float: right;
    background-color: #111;
    height: 55px;
    text-align: center;
    padding: 2px;
    width: 320px;
    margin-bottom: 2px;
}
.date {font-size: 20px; margin-top: 10px}
.year {font-size: 14px; letter-spacing: 0.075em; clear: both}

.background {
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 99%, rgba(0,0,0,0.75) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.75)), color-stop(99%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.75))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 99%,rgba(0,0,0,0.75) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 99%,rgba(0,0,0,0.75) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 99%,rgba(0,0,0,0.75) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 99%,rgba(0,0,0,0.75) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#bf000000',GradientType=0 ); /* IE6-9 */
}

/* Media Queries
*********************************************/
/* Retina */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {

}
/* Landscape phones and down */
@media (max-width: 480px) {

    h1 {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
        display: block;
        float: right;
        margin-bottom: 2px;
        padding: 2px 25px;
        font-size: 18px;
      }

    h2 {
        font-size: 16px;
        margin-top: 10px;
    }

    .textbox1 {
        font-size: 2em !important;
        padding: 7px 15px;
        position: absolute;
        right: 1%!important;
        top: 20px !important;

    }



    .textbox2 {
        margin-top: 3px;
        font-size: 1.6em !important;
        padding: 7px 15px;
        position: absolute;
        right: 1% !important;
        top: 70px !important;
        float: right;
    }

    #spielplan-container {
        position: absolute;
        bottom: 5%;
        right: 1%;
    }
    .gig-left {
        clear: both;
        float: left;
        font-size: 0.8em;
        background-color: #99262a;
        width: 55px;
        height: 55px;
        text-align: center;
        padding: 2px;
        margin-bottom: 2px;
    }
    .gig-right {
        float: right;
        font-size: 0.8em;
        background-color: #111;
        height: 55px;
        text-align: center;
        padding: 2px;
        width: 220px;
        margin-bottom: 2px;
    }
    .date {font-size: 16px; margin-top: 5px}
    .year {font-size: 10px; letter-spacing: 0.075em; clear: both}

}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

    .textbox1 {
        font-size: 3em;
        padding: 7px 15px;
        position: absolute;
        right: 5%;
        top: 5%;

    }

    .textbox2 {
        margin-top: 3px;
        font-size: 2em;
        padding: 7px 15px;
        position: absolute;
        right: 5%;
        top: 15%;
        float: right;
    }

}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {

}

/* SmallDesktop & Netbooks */
@media (min-width: 980px) and (max-width: 1199px) {

}

/* Large desktop */
@media (min-width: 1200px) {

}