@charset "utf-8";
body {
	font-family: ‘Metrophobic’, Arial, serif;;
	color:#FFFFFF; 
	text-decoration: none;
	background-attachment: fixed;
	background-color: #000;
	background-image: url(images/background.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 700; font-size: 5em; 
text-shadow:
0px 1px 0px #999,
0px 2px 0px #888,
0px 3px 0px #777,
0px 4px 0px #666,
0px 5px 0px #555,
0px 6px 0px #444,
0px 7px 7px #011;}

header { margin-top: 40px; margin-bottom: 40px; width:1000px; height:120px; text-align:center;}

.container { 
float:left; 
margin: 10px;
 padding: 0px; 
 border:#FFFFFF 5px solid; 
 width:470px; 
 height:470px; 
 background: #000 url(images/hg_kart.jpg);
background-repeat:no-repeat;

}

.container2 { 
float:left; 
margin: 10px;
 padding: 0px; 
 border:#FFFFFF 5px solid; 
 width:470px; 
 height:470px; 
 background: #000 url(images/hg_formel.jpg);
background-repeat:no-repeat;

}


.black { 
 width:100%; 
 height:100%; 
 opacity: 0.5; 
 background: #000 ;
-webkit-transition: all 1s ease; /* Firefox */
-moz-transition: all 1s ease; /* WebKit */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease; /* Standard */
}

.black:hover { 
opacity: 0;

}

.text { 
 width:360px; 
 height:50px; 
 margin-top: 300px;
 opacity: 0.8; 
 background: #000 ;
-webkit-transition: all 1s ease; /* Firefox */
-moz-transition: all 1s ease; /* WebKit */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease; /* Standard */
}

.text:hover { 
 width:360px; 
 height:50px; 
 margin-top: 280px;
 opacity: 0.8; 
 background: #000 ;
-webkit-transition: all 1s ease; /* Firefox */
-moz-transition: all 1s ease; /* WebKit */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease; /* Standard */
}