body {
        font-weight: 400;
        font-size: .8em;
        line-height: 1.6em;
        font-family: Arial;
        background: url("img/bg_erfmedien.jpg");
        background-size: 100% 100%;
        background-color: #00388c;
        background-repeat: no-repeat;
        min-height: 100vh;
      }
      h1 {
        font-size: 3em;
      }
      #infobox {
        position:fixed;
        top: 50%;
        left: 50%;
        width:20em;
        height:13em;
        margin-top: -13em;  /* set to a negative number 1/2 of your height */
        margin-left: -10em; /* set to a negative number 1/2 of your width  */
        border: 1px solid #ccc;
        background: rgba(255,255,255,0.9);
        padding: 15px 15px;
        display: inline-block;
        box-shadow: 0 6px 6px rgba(0,0,0,0.3);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 30px 3px 3px 3px;
        overflow: hidden;
      }
      .rotate{
        -webkit-transition-duration: 2.8s;
        -moz-transition-duration: 2.8s;
        -o-transition-duration: 2.8s;
        transition-duration: 2.8s;

        -webkit-transition-property: -webkit-transform;
        -moz-transition-property: -moz-transform;
        -o-transition-property: -o-transform;
        transition-property: transform;
        overflow:hidden;
      }
      .rotate:hover
      {
        -webkit-transform:rotateY(360deg);
        -moz-transform:rotateY(360deg);
        -o-transform:rotateY(360deg);
        transform:rotateY(360deg);
      }