@font-face { font-family: "Kokila"; src: url("../fonts/Kokilat.eot?") format("eot"), url("../fonts/Kokilat.woff") format("woff"), url("../fonts/Kokilat.ttf") format("truetype"); }
@font-face { font-family: "BlackRocker"; src: url("../fonts/BlackRocker.ttf") format("truetype"); }


body  { margin: 0; background-color: #000}
a     { cursor: pointer; text-decoration: none;}

.display_none {display: none;}

#div_Fixed              { position: absolute}k
#div_content_container  { position: relative; width: 100%; height: 100%; z-index: 10}
.Header                 { width: 100%; text-align: center; font-size: 2em; font-family: BlackRocker; color: #c3c3c3}


#div_Header                { margin-top: 0; width: 100%; margin-right: auto; margin-left: auto; background-color: #000; height: 3em;}
#div_Bild01                { margin-top: 0; width: 100%; margin-right: auto; margin-left: auto; }
#div_Bild01 img            { margin-top: 0; width: 100%;}

#div_Kontakt               { margin-top: 1.5em; width: 100%; color: #999; }
.div_Kontakt_Header        { width: 100%; height: 2em; text-align: center; font-size: 2em; font-family: BlackRocker; color: #c3c3c3; }
#div_Kontakt_Content       { text-align: center;  line-height: 1.5em; font-size: 1.5em;}

#div_Musik                 { color: #999; text-align: center; width: 100%;}
.div_Musik_Header          { text-align: center; font-size: 2em; margin: 1em 0; font-family: BlackRocker; color: #c3c3c3;}
#div_Musik_Content         { color: #999; text-align: center; line-height: 1.3em; font-size: 1.2em;}

#div_Termine               { width: 100%; text-align: center; margin-top: 3em; }
.div_Termine_Header        { width: 100%; text-align: center; font-size: 2em; font-family: BlackRocker; color: #c3c3c3}
.div_Termine_Termine       { color: #999; padding: 1em 0; font-family: Arial, Helvetica, sans-serif;}

#div_Band::before          { background-image: url("../images/Photomontix_PMX_1195_Lampe.jpg"); opacity: 0.5;  }
#div_Band                  { width: 100%; text-align: center; align-items: center; margin-top: 3em; }
.div_Band_Header           { width: 100%; text-align: center; font-size: 2em; font-family: BlackRocker; color: #c3c3c3}
.div_Band_Name             { margin-bottom: 1em; font-family: BlackRocker; font-size: 1em; color: #999;}
.Line01                    { margin: 3em auto;}
.Line02                    { margin: 3em auto; display: -webkit-flex;display: flex; justify-content: space-evenly;   opacity: 1; max-width: 65%;}
.Line03                    { margin: 3em auto; }
.Line04                    { margin: 3em auto;}
.felx_none                 { flex: none;}

#div_Bildergalerie         { padding: 0 5%;}

#div_Impressum             { padding: 1em 2em; margin-top: 50px; width: 70%; text-align: left; margin-right: auto; margin-left: auto;color: #999;}
#div_ImpressumLink         { cursor: pointer; float: left; margin: 0.5em 5em; color: #999; font-family: BlackRocker; font-size: 1em;}
#div_Impressum_CloseButton { width: 100%; text-align: right;}
.svg_Impressum_CloseButton { width: 50px;}

#div_FooterTextCopyright   { float: right; margin: 0.5em 5em; color: #666;}
#div_Footer_Logo           { width: 10%; }
.div_Logo_Mitte            { width: 100%; text-align: center; align-items: center; margin: 5em 0; }
.div_Logo_Mitte img        { width: 70px; opacity: 0.35; }

.div_Band_Wrapper          { max-width: 250px ;}
.div_Band_Wrapper img      { max-width: 250px ;}

#div_HeaderText            { height: 130px}
#div_ImpressumTextWrapper  { padding-left: 1em; margin-bottom: 50px; margin-top: 30px; width: auto}
#div_Sozial                { top: 40px; right: 120px; width: 120px; height: 100px; z-index: 18; float: right; margin: 0.5em 0.5em 0 0 ;}
#div_Sozial_Instagram      { width: 60px; height: 60px; z-index: 18; background-image: url(../images/instagram-logo.svg); opacity: 0.5; background-repeat: no-repeat; background-size: 60px; cursor: pointer; top: 0; left: 40px; float: left;}
#div_Sozial_Facebook       { width: 60px; height: 60px; background-image: url(../images/facebook-logo.svg); opacity: 0.5; background-repeat: no-repeat; background-size: 55px; cursor: pointer; top: 3px; left: 100px; float: right;}

#div_Bildergalerie        { margin: 50px auto 90px auto; width: 80%; text-align: center; }
.img-zoom         { margin: 10px;height: 200px; width: auto; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out;}
.transition       { -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); transform: scale(2);}

.Logo1             { font-size: 7em; color: #000; margin-bottom: 25px; font-family: Kokila, sans-serif}
.Logo2             { font-size: 1.13em; color: #000; margin-left: 4px; font-family: Kokila, sans-serif}

.black      { color: #000}
.bold       { font-weight: bold}
.shadow     { box-shadow: 10px 20px 30px #000;}
.TextShadow { text-shadow: 2px 2px 4px #000000;}
.eMailColor { color: #adadad; font-family: Arial, Helvetica, sans-serif;}

 img.desaturatex {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url(desaturate.svg#greyscale);
  filter: gray;
  -webkit-filter: grayscale(1);
  z-index: 0;
  }
  img.desaturatex:hover {
    filter: none;
    z-index: 1000;
    }

/* 
   
   1024 × 768  ipad / iPad 2 
   2048 × 1536  ipad3 / iPad4  / iPad Air / iPad Air2-->
   960 × 640 iphone4  
   1136 × 640 iPhone5s 
   1334 × 750 iphone 6 / 6s
   1920 × 1080 iPhone 6 plus / 6s plus
   2.560 x 1.600 Sony Xperia Tablet Z4
*/

@media only screen and (min-device-width: 320px)  and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) 
{
   #div_StartBackgroundImg    { height: 750px; width: 100%} 
}

/* Portrait Phone */ 
@media only screen and (min-device-width: 320px)  and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) 
{
   .img-zoom { width: 80%; height: auto }
   #div_Sozial { visibility: hidden}
   #div_Logo img { width: 100px }
   #div_Kontakt table { font-size: 0.8em;}
   
}

/* Landscape Phone */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) 
{

}


/* Portrait Tablets*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) 
{

}

/* Landscape Tablets */
@media only screen and (min-device-width: 768px)and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) 
{

}


@media (max-width: 375px) and (orientation: portrait)  
{
 
} 


@media (max-width: 560px) and (orientation: portrait)  
{
 
} 

@media (max-width: 500px) and (orientation: landscape)  
{
   

}