html{
    height: 100%;
}
body{

    /* How pronounced should the 3D effects be */
    /*perspective: 800px;*/
    /*-webkit-perspective: 800px;*/
    height: 100%;
    background: radial-gradient(#e0e0e0, #aaa);
    /*width:100%;*/
    /*height: 100%;*/
    /*margin:0 auto;*/
    /*border-radius:6px;*/
    /*position:relative;*/
}
.greeting{
    display: none;
}
/**
I know, this css is not the best of its kind, but i wanted to experiment a litte bit with media querys :-)
**/
@media (min-width: 1025px) {
    .aboveContent{
        text-align: center;
        position: fixed;
        top: 25%;
        left: 53%;
        width: 61em;
        height: 15em;
        margin-top: -7.5em;
        margin-left: -30.5em;
    }
    .content{
        position: fixed;
        right: 0;
        z-index: 9999;
        border-radius: 12px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

        top: 50%;
        left: 50%;
        width: 38em;
        height: 25em;
        margin-top: -12.5em;
        margin-left: -16em;
    }
    .content:hover .turn{
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        -o-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }

    .front{
        z-index: 2;
        background: url("img-1.png") 0 0 no-repeat;

    }
    .back{
        background: url("img-2.png") 0 0 no-repeat;
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        -o-transform: rotateX(180deg);
        transform: rotateX(180deg);
        z-index: 1;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .aboveContent{
        text-align: center;
        position: fixed;
        top: 34%;
        left: 51%;
        width: 61em;
        height: 15em;
        margin-top: -7.5em;
        margin-left: -30.5em;
    }
    .content{
        position: fixed;
        right: 0;
        z-index: 9999;
        border-radius: 12px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

        top: 50%;
        left: 50%;
        width: 38em;
        height: 25em;
        margin-top: -12.5em;
        margin-left: -18em;
    }
    .content:hover .turn{
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        -o-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    .heading{
        font-size: 28px;
    }

    .front,
    .back{
        background-position: center;
        background-size: 533px;
    }
    .front{
        z-index: 2;
        background: url("img-1.png") 0 0 no-repeat;
    }
    .back{
        background: url("img-2.png") 0 0 no-repeat;
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        -o-transform: rotateX(180deg);
        transform: rotateX(180deg);
        z-index: 1;
    }
}
@media (min-width: 481px) and (max-width: 767px) {
    .content{
        position: fixed;
        right: 0;
        z-index: 9999;
        border-radius: 12px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

        top: 50%;
        left: 50%;
        width: 30em;
        height: 20em;
        margin-top: -10em;
        margin-left: -15em;
    }
    .aboveContent{
        text-align: center;
        position: fixed;
        top: 38%;
        left: 50%;
        width: 61em;
        height: 15em;
        margin-top: -7.5em;
        margin-left: -30.5em;
    }
    .heading{
        font-size: 30px;
    }

    .dreh{
        -ms-transform: rotateX(180deg);
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }


    .front{
        z-index: 2;
        background: url("img-1.png") 0 0 no-repeat;
        background-position: center;
        background-size: 421px;

    }
    .back{
        background: url("img-2.png") 0 0 no-repeat;
        -ms-transform: rotateX(180deg);
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
        z-index: 1;
        background-position: center;
        background-size: 421px;
    }
}
@media (min-width: 375px) and (max-width: 480px) {
    .content{
        position: fixed;
        right: 0;
        z-index: 9999;
        border-radius: 12px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

        top: 45%;
        left: 50%;
        width: 25em;
        height: 15em;
        margin-top: -7.5em;
        margin-left: -12.5em;
    }
    .aboveContent{
        text-align: center;
        position: fixed;
        top: 37%;
        left: 50%;
        width: 61em;
        height: 15em;
        margin-top: -7.5em;
        margin-left: -30.5em;
    }
    .heading{
        font-size: 14px;
    }
    .dreh{
        -ms-transform: rotateX(180deg);
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);;
    }
    .front{
        z-index: 2;
        background: url("img-1.png") 0 0 no-repeat;
        background-position: center;
        background-size: 353px;

    }
    .back{
        background: url("img-2.png") 0 0 no-repeat;
        -ms-transform: rotateX(180deg);
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg); /* Die Rückseite des Logos wird umgedreht, um dann bei der Drehung der gesamten Szene vorne zu sein :) */;
        z-index: 1;
        background-position: center;
        background-size: 353px;
    }
}
@media (min-width: 320px) and (max-width: 374px){
    .content{
        position: fixed;
        right: 0;
        z-index: 9999;
        border-radius: 12px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

        top: 45%;
        left: 50%;
        width: 21em;
        height: 13em;
        margin-top: -6.5em;
        margin-left: -10.5em;
    }
    .aboveContent{
        text-align: center;
        position: fixed;
        top: 39%;
        left: 50%;
        width: 61em;
        height: 15em;
        margin-top: -7.5em;
        margin-left: -30.5em;
    }
    .heading{
        font-size: 12px;
    }
    .dreh{
        -ms-transform: rotateX(180deg);
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    .front{
        z-index: 2;
        background: url("img-1.png") 0 0 no-repeat;
        background-position: center;
        background-size: 322px;

    }
    .back{
        background: url("img-2.png") 0 0 no-repeat;
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        -o-transform: rotateX(180deg);
        transform: rotateX(180deg);
        z-index: 1;
        background-position: center;
        background-size: 322px;
    }
}

.front,
.back {
    -webkit-backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

.turn{
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d; /* Kind-Elemente  (.front + .back) sollen ihre 3D-Eigenschaften behalten*/
    position: relative;
    height: 100%;
}