/* Karten: ------------------------------------------------------------ */
#outterFrame{
    position: absolute;
    width: 87.5%;
    right: -3%;
    transition: 1s;
}

/* Grosser Bildschirm Kartenanordnung 3 Nebeneinander-(3x3 Karten)----- */


    /* Kartenreihe 1*/
    #outterFrame1{
        position: absolute;
        width: 0%;
        right: 80%;
    }

    /* Kartenreihe 2*/
    #outterFrame2{
        position: absolute;
        right: 50%;
        width: 0%;
    }

    /* Kartenreihe 3*/
    #outterFrame3{
        position: absolute;
        width: 0%;
        right: 20%;
    }

    #label1{
        margin-top: 8em;
     }

     .label1{
         margin-top: 8em;
     }

     


/* Kleiner Bildschirm: Alle Karten untereinander */
  @media screen and (max-width: 1024px){


     /* Kartenreihe 1*/
     #outterFrame1{
        position: relative;
        left: 50%;
     }

    /* Kartenreihe 2*/
    #outterFrame2{
        position: relative;
        left: 50%;
    }

    /* Kartenreihe 3*/
    #outterFrame3{
        position: relative;
        left: 50%;
    }

    #label1{
        margin-top: 8em;
     }

     .label1{
         margin-top: 1.8em;
     }

     
    
}



/* FLIP Karten */
.label {
    margin-top: 1.8em;
    margin-bottom: 0em;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    display: block;
    width: 20em;
    height: 12em;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    cursor:help;
}



.card {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 600ms;
    transition: all 600ms;
    z-index: 20;
}

    .card div {
        position:absolute;
        height: 100%;
        width: 100%;
        line-height: 1em;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border-radius: 2px;
    }

    .card .back {
        padding-top: 5%;
        padding-left: 0%;
        padding-right: 4%;
        padding-bottom: 0%;
        height: 92%;
        width: 96%;
        text-align: left;
        background: #1a0147;
        color: #FFFFFF;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

.label:hover .card {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-shadow: 0 20px 20px rgba(50,50,50,.2);
}



/*Bestimmen der Bildergrösse, damit gleich gross wie Rückseite*/
.pic-in-flipbox{
    width: 20em;
    height: 12em;
}

@media screen and (max-width: 450px){
    .pic-in-flipbox{
        width: 15em;
        height: 9em;
    }

    .label {
        margin-top: 1.8em;
        margin-left: 1em;
        margin-bottom: 0em;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        display: block;
        width: 15em;
        height: 9em;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        cursor:help;
    }

    ul{
        font-size: 0.5em;
    }

    h3{
        font-size: 0.75em;
    }
}
/* FLIP ENDE --------------------------------------------------*/
/* KARTEN ENDE ------------------------------------------------*/