*,
*:before,
*:after {
		-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
}

img {width: 400px; max-width: 100%; }
div {border: 0px #ccc solid;}
html {overflow-x: hidden;overflow-y: auto;}
body       {height: 100vh; margin: 0; text-align: center; font-family: Arial, Helvetica, sans-serif; line-height: 1.9em;}
#header    {display: block; background: #ffffff; color: #333; padding: 40px; height: 25vh; }
#container {display: block; background: #eeeeee; color: #333; padding: 40px; height: 60vh; overflow: auto;}
#footer    {text-transform: uppercase; font-size: 14px;display: block; background: #F07D00; color: #fff; padding: 40px; height: 15vh;} 
#container a  {color: #333; text-decoration: none;} 
#footer a  {color: #fff; text-decoration: none;}     


h1,h2,h3,h4 {font-weight: bold;}
h1 {font-size: 28px; margin: 0 0 30px 0; }
h2 {font-size: 20px; margin: 40px 0 10px 0; }  
h3 {font-size: 18px; margin: 25px 0 10px 0; }  
h4 {font-size: 16px; margin: 0 0 0px 0; }   

@media screen and (min-width: 568px) { 
#header,
#container,
#footer  { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; justify-content: center;}
#container .inside { min-width: 600px;  } 
}



#container span {display: block;}

.firma,.name,.strasse,.ort,.tel, .mail {display: block; font-size: 20px;}  

.name { color: #F07D00; font-size: 30px;} 




@media screen and (max-width: 567px) {
body { background: #eeeeee; line-height: 1.6em;}
#header    { padding: 45px 20px 25px 20px; height: auto; }
#container { padding: 20px; height: auto; padding-top: 15vh;}
#footer    {padding: 20px; height: auto;;}
#header,
#container,
#footer  { display: block; position: relative; }
#footer  { position: absolute; bottom: 0; width: 100%; }     

#header img {max-width: 275px; }

#footer .inside  { display: block; width: 100%;}   
.firma,.name,.strasse,.ort,.tel,.mail {display: block; font-size: 20px;}  
 
}






#header img {animation-name: logo; animation-duration: 1.8s;}
#footer .inside {animation-name: footer; animation-duration: 1.8s;}    

.firma {animation-name: text; animation-duration: 0.2s;} 
.name {animation-name: text; animation-duration: 0.3s;} 
.strasse {animation-name: text; animation-duration: 0.4s;} 
.ort {animation-name: text; animation-duration: 0.5s;} 
.tel {animation-name: text; animation-duration: 0.6s;} 
.mail {animation-name: text; animation-duration: 0.7s;} 
 





.content #container {padding-top:60px;animation-name: content; animation-duration: 0.7s;line-height: 1.5em; }
.content #container .inside {text-align: left !important; max-width: 900px; margin: 0 auto;}
.content #footer  { position: relative; bottom: 0; width: 100%; } 
.content #container {height: auto;}
body {animation-name: none; animation-duration: 0.3s;}

@keyframes body {
0%   {transform: scale(1.5);  }    
100% {transform: scale(1.0); }  
}


@keyframes logo {
0%   {transform: scale(0.9); opacity: 0;  }    
100% {transform: scale(1.0); opacity: 1;  }  
}
@keyframes text {
0%   {transform: scale(0.5); padding-top: 20px; opacity: 0;  }    
100% {transform: scale(1.0); padding-top: 0px; opacity: 1;  }     
}
@keyframes footer {
0%   {transform: scale(0.5); opacity: 0;  }    
100% {transform: scale(1.0); opacity: 1;  }     
}
@keyframes content {
0%   {padding-top: 100px; opacity: 0;  }    
100% {padding-top: 60px; opacity: 1;   }     
}