@font-face {
    font-family: guhu;
    src: url("../fonts/205-MaaxBlack.otf") format("opentype");
}

@font-face {
    font-family: guhuMedium;
    src: url("../fonts/205-MaaxMedium.otf") format("opentype");
}

html, body, .box {
    height: 100%;
    color: black;
    cursor: url('../images/00_schwarzes_Diskosteinchen.png'), auto;
}

body {
    font-family: 'guhu', serif;
    letter-spacing: 3px
}

.box {
    /*max-width:1280px;*/
    padding: 36px;
    margin: 0px auto;
}

.row {
    height: 25%;
    padding-bottom: 20px;
}

.cell {
    display: table-cell;
    ;
}

.gcard {
    /*cursor: pointer;*/
    padding: 19px;
    border: solid 7.5px black;
    height: 100%;
}

.negative {
    color: white;
    background: #000000;
}

.reihe {
    float: left;
    width: 100%;
    display: table-cell;
}

.gcard2 {
    /*cursor: pointer;*/
    float: left;
    padding: 18px;
    border: solid 6.5px black;
    height: 100%;
}

.mitte {
    text-align: center;
}

.rechts {
    text-align: right;
}

.center {
    text-align: center;
}

h2 {
    /*font-size: 0.75em;*/
    font-size: 31px;
    text-transform: uppercase;
}

h4 {
    font-size: 18px;
    text-transform: uppercase;
    margin: 0px
}

/*************           GM BOX **********/

.gmbox {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: white;
    z-index: 1000;
    padding: 36px;
}

.gmcon {
    max-width: 1010px;
    line-height: 1.2
}

.gmclose {
    cursor: pointer;
    position: absolute;
    bottom: 36px;
    right: 36px;
}

H3 {
    font-family: 'guhuMedium';
    font-size: 175px;
}

p {
    font-family: 'guhuMedium';
    font-size: 50px;
}

/************************* floater *************/

.floater {
    position: fixed;
}

.floater0 {
    top: -300px;
    left: -100px
}

.floater1 {
    top: -300px;
    left: 0px
}

.floater2 {
    top: -300px;
    left: 100px
}

.floater3 {
    top: -300px;
    left: 200px
}

.floater4 {
    top: -300px;
    left: 300px
}

.floater5 {
    top: -300px;
    left: 400px
}

.floater6 {
    top: -300px;
    left: 500px
}

.floater7 {
    top: -300px;
    left: 600px
}

.floater8 {
    top: -300px;
    left: 700px
}

.floater9 {
    top: -300px;
    left: 800px
}

.floater00 {
    top: 1500px;
    left: -100px;
    transform: rotate(20deg);
}

.floater10 {
    top: 1500px;
    left: 0px;
    transform: rotate(50deg);
}

.floater20 {
    top: 1500px;
    left: 100px;
    transform: rotate(270deg);
}

.floater30 {
    top: 1500px;
    left: 200px;
    transform: rotate(2deg);
}

.floater40 {
    top: 1500px;
    left: 300px;
    transform: rotate(79deg);
}

.floater50 {
    top: 1500px;
    left: 400px;
    transform: rotate(83deg);
}

.floater60 {
    top: 1500px;
    left: 500px;
    transform: rotate(320deg);
}

.floater70 {
    top: 1500px;
    left: 600px;
    transform: rotate(11deg);
}

.floater80 {
    top: 1500px;
    left: 700px;
    transform: rotate(74deg);
}

.floater90 {
    top: 1500px;
    left: 800px;
    transform: rotate(105deg);
}

.floater000 {
    top: 100px;
    left: -400px;
    transform: rotate(228deg);
}

.floater100 {
    top: 200px;
    left: -400px;
    transform: rotate(300deg);
}

.floater200 {
    top: 300px;
    left: -400px;
    transform: rotate(111deg);
}

.floater300 {
    top: 400px;
    left: -400px;
    transform: rotate(117deg);
}

.floater400 {
    top: 500px;
    left: -400px;
    transform: rotate(35deg);
}

.floater500 {
    top: 50px;
    left: 2000px;
    transform: rotate(250deg);
}

.floater600 {
    top: 150px;
    left: 2000px;
    transform: rotate(90deg);
}

.floater700 {
    top: 250px;
    left: 2000px;
    transform: rotate(298deg);
}

.floater800 {
    top: 350px;
    left: 2000px;
    transform: rotate(55deg);
}

.floater900 {
    top: 450px;
    left: 2000px;
    transform: rotate(211deg);
}

@media (min-height: 1440px) {
    h2 {
        font-size: 3vw;
    }
    h4{
        font-size: 1.5vw;
    }
}

@media screen and (min-height: 1000px) , screen and (min-width:2000px) {
    h2 {
        font-size: 3vw;
    }
    h4{
        font-size: 1.5vw;
    }
}

@media (orientation:landscape) {
    #landscape {
        display: block;
        height: 100%
    }
    #portrait {
        display: none;
    }
}

@media (orientation:portrait) {
    #landscape {
        display: none;
    }
    #portrait {
        display: block;
        height: 100%
    }
    @font-face {
        font-family: guhu;
        src: url("../fonts/205-MaaxBlack.otf") format("opentype");
    }
    @font-face {
        font-family: guhuMedium;
        src: url("../fonts/205-MaaxMedium.otf") format("opentype");
    }
    html, body, .box {
        height: 100%;
        color: black;
        cursor: url('../images/00_schwarzes_Diskosteinchen.png'), auto;
    }
    .box {
        padding: 20px;
    }
    body {
        font-family: 'guhu', serif;
        letter-spacing: 1px
    }
    .box {
        /*max-width:1280px;*/
        padding: 20px;
        margin: 0px auto;
    }
    .row {
        height: 25%;
        padding-bottom: 20px;
    }
    .rowMobile {
        height: 10%;
        padding-bottom: 8px;
    }
    .twice {
        height: 13%;
    }
    h4 {
        font-size: 4vw;
    }
    .negativeMob {
        color: white;
        background: #000000;
    }
    .cell {
        display: table-cell;
        ;
    }
    .gcard {
        /*cursor: pointer;*/
        padding: 20px;
        border: solid 6.5px black;
        height: 100%;
    }
    .reihe {
        float: left;
        width: 100%;
        display: table-cell;
    }
    .gcardMobile {
        padding: 5px;
        height: 100%;
        display: inline-block;
    }
    .mitte {
        text-align: center;
    }
    .rechts {
        text-align: right;
    }
    .center {
        text-align: center;
    }
    h2 {
        font-size: 6vw;
        text-transform: uppercase;
    }
    .floR {
        float: right;
    }
    .mobile div {
        display: block
    }
    /*************           GM BOX **********/
    .gmbox {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background: white;
        z-index: 1000;
        padding: 36px;
        justify-content: center;
        align-items: flex-end;
    }
    .gmcon {
        max-width: 1070px;
        line-height: 1;
    }
    .gmclose {
        cursor: pointer;
        position: absolute;
        top: 36px;
        right: 45%;
    }
    H3 {
        font-family: 'guhuMedium';
        font-size: 175px;
    }
    p {
        font-family: 'guhuMedium';
        font-size: 4.5vw;
    }
    .kreuz {
        width: 36px;
        height: auto
    }
    /************************* floater *************/
    .floater {
        z-index: -1000;
        position: fixed;
    }
    .floater0 {
        top: -300px;
        left: -100px
    }
    .floater1 {
        top: -300px;
        left: 0px
    }
    .floater2 {
        top: -300px;
        left: 100px
    }
    .floater3 {
        top: -300px;
        left: 200px
    }
    .floater4 {
        top: -300px;
        left: 300px
    }
    .floater5 {
        top: -300px;
        left: 400px
    }
    .floater6 {
        top: -300px;
        left: 500px
    }
    .floater7 {
        top: -300px;
        left: 600px
    }
    .floater8 {
        top: -300px;
        left: 700px
    }
    .floater9 {
        top: -300px;
        left: 800px
    }
    .floater000, .floater100, .floater200, .floater300, .floater400, .floater500, .floater600, .floater700, .floater800, .floater900 {
        display: none;
    }
    #m8{
        padding-bottom:0px
    }
    @media (max-height: 620px) {
        h2 {
            font-size: 5.5vw;
        }
    }
    @media (max-height: 520px) {
        h2 {
            font-size: 4.5vw;
        }
    }
    @media (max-height: 480px) {
        h2 {
            font-size: 4vw;
        }
    }
    @media (max-height: 440px) {
        h2 {
            font-size: 3vw;
        }
    }
    @media (max-width: 400px) {
        .gmbox {
            padding: 18px
        }
    }
}