body {
 background: url(../images/HDT2.gif) no-repeat;/**/
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 background-size: 100% 100%;
}

main, body, html { 
  height: 100%; 
  width: 100%; 
} 
 /*Horizontally and Vertically Centered*/

main {
    display: -moz-box;
    display: -webkit-box;
    display: box;
     
    -moz-box-orient: horizontal; 
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
     
    -moz-box-pack: center;
    -moz-box-align: center;
     
    -webkit-box-pack: center;
    -webkit-box-align: center;
     
    box-pack: center;
    box-align: center;
}
/*Styling the Box*/
.box {
   background: orange;
   border: 1px dashed #666;
   margin: auto;
   width: 400px;
   height: 200px;
   cursor: pointer;
   position: relative;
 
   -webkit-transition: all 1s; 
   -moz-transition: all 1s;
   transition: all 1s; 
}
/*An Effective Shadow*/
.box::after {
    content: '';
    position: absolute;
 
    width: 70%;
    height: 10px;
    bottom: 0;
    left: 15%;
 
    z-index: -1;
 
    -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
    -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
    box-shadow: 0 9px 20px rgba(0,0,0,.4);
}
/*Styling the Children Divs*/
.box > div {
   background: orange;
     
   position: absolute;
   width: 100%; height: 100%;
   top: 0; left: 0;
    
 
   font: 80px/200px bold helvetica, arial, sans-serif;
   text-align: center;
    
   -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out;
}

/* Make sure we see the front side first */
.box > div:first-child {
   position: relative;
   z-index: 2;
}

.box:hover {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   transform: rotateY(180deg);         
}

/* Hide the front-side when hovered */
 .box:hover > div:first-child {
    opacity: 0;
 }
 
 .box:hover div:last-child {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
 }

 header {
  background-color: orange;
  position: absolute;
  padding: 20px;

  width: 100%;
 }
 * {
  margin: 0;
 }
 /*menu items nebeneinander*/
 li {
  display: inline;
 }
 li {
  font-size: 30px;
 }
 /*nav zentrieren*/
 nav {
  width: 600px;
  margin: auto;
 }