@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
html, body {background-color:black;width:100%;height:100%;margin:0;padding:0;overflow:auto;font-family: 'Open Sans', sans-serif;}
@font-face {
  font-family: 'Open Sans', sans-serif;
  font-display: fallback;
}


/* GLOBAL ------------------------------------------------------------------------------------------------------------------------------------------*/
a img { border:0px; }
p     { margin:0px; }


#background                             {z-index:0;}
#content                                {z-index:1;}
#header_bg                              {z-index:2;}
#header_logo                            {z-index:3;}
#mainframe, #header                     {position:relative;}
#background, #content, #header_bg, #header_logo {position:absolute;}
#mainframe, #background, #content       {overflow:hidden;}
#background, #content, #bg_video        {width:100%; height:100%;}
video#bg_video, video#header_video      {object-fit:fill;}
img#logo                                {height:120px;width:auto;}
#header, #header_logo, #header_bg, #header_video       {width:100%;height:120px;}
#header_logo                            {text-align:center;}
#header   {margin-top:50px;}

/* MEDIA QUERIES -----------------------------------------------------------------------------------------------------------------------------------*/

/* Standard Bildschirme ----------------------------------------------------------------------------------------------------------------------------*/
@media only screen and ( min-width: 950px ) {
#mainframe                              {width:50%; height:100%; margin-left:auto;margin-right:auto;}
}

/* Tablets und mittlere Bildschirme ----------------------------------------------------------------------------------------------------------------*/
@media only screen and ( min-width: 440px ) and ( max-width: 950px ) {
#mainframe                              {width:50%; height:100%; margin-left:auto;margin-right:auto;}
}

/* Moderne Smartphones etc -------------------------------------------------------------------------------------------------------------------------*/
@media only screen and ( min-width: 320px ) and ( max-width: 440px ) {

#mainframe                              {width:100%; height:100%;}


}

/* Kleine Smartphones etc --------------------------------------------------------------------------------------------------------------------------*/
@media only screen and ( max-width: 320px ) {
#mainframe                              {width:100%; height:100%;}
}