/*@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Barlow:400,500,600,700&display=swap');*/

@font-face { font-family: 'reckless';
             src: local ('reckless')
                 url('../fonts/RecklessNeue-Book.woff2') format('truetype'); }

:root {
    --col1: #ded550;
    --col2: #ded550;
}   

* {
    font-family: 'reckless';
    user-select: none;
}

body {
    background-color: #000;
    overflow: hidden;
}

canvas {
    /*pointer-events:visible;*/ 
}

table {
    min-width: 200px;
}


.button {
    width: 31px;
    height: 102px;
    position: absolute;
    bottom: 0px;
    left: 55px;
    background-repeat: no-repeat;
}

@media only screen and (max-width: 800px) {
    .button {
        width: 20px;
        height: 66px;
        bottom: 20px;
        left: 25px;
    }
}

.button.b1 {
    background: url('../gfx/exp.png');
    background-size: 100%;
}

#thumb {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 998;
    background: url(../gfx/thumb.jpg);
    background-size: cover;
    background-position: center;
}



.floorplan {
    color: white;
    position: fixed;
    top: 0;
    left: -100vw;
    width: 100vw;
    height: 100vh;
    transition: all 1s ease-in-out;
    background-color: rgb(0,0,0,0.8);
    background-size: 1000px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 999;
}


@media only screen and (max-width: 800px) {
    .floorplan {
        background-size: calc(100vw - 100px);;
    }
}


.house_4floor {
    background-image: url('../gfx/grundrisse/og4_1.png')
}
/*.house_3floor {
    background-image: url('../gfx/grundrisse/og3_1.png')
}*/
.house_2floor {
    background-image: url('../gfx/grundrisse/og2_1.png')
}
.house_1floor {
    background-image: url('../gfx/grundrisse/og1_1.png')
}
.house_0floor {
    background-image: url('../gfx/grundrisse/eg_2.png')
}


.floorplan .floorPlanText {
    margin: 0;
    position: absolute;
    right: 30px;
    top: 30px;
}
.floorplan .fp1 {
    font-size: 40px;
    margin: 0;	
    color: #ffffff;
    font-weight: 500;
    line-height: 1.2em;
    text-transform: uppercase;
}
.floorplan table {
    color: #ffffff;	
}
.floorplan table tr td.alignright {
    text-align: right;	
    padding-left: 10px;
}
.floorplan .fp2 {
    font-size: 20px;
    margin: 0;
    margin-top: 20px;
    font-weight: bold;
}
.floorplan .fp2::before {
    content: 'Mietfläche: ';
    color: var(--col1); 
    font-weight: normal;
}
.floorplan .fp3 {
    font-size: 20px;
    margin: 0;
    margin-top: 10px;
    font-weight: bold;
}
.floorplan .fp3::before {
    content: 'Teilbar ab: ';
    color: var(--col1);
    font-weight: normal;
}

#displayBox {
    position: fixed;
    top: 50px;
    left: 50px;
    display: inline-block;
    max-width: 100px;
    min-width: min-content;
}


@media only screen and (max-width: 800px) {
    #displayBox {
        left: 25px;
    }
}

#displayBox span {
    text-transform: uppercase;
    color: var(--col1);
    font-size: 34px;
    font-weight: bold;
    margin-bottom: 25px;
    display: block;
}

.display {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px dotted var(--col1);
    background: rgb(44, 44, 44);
    color: var(--col1);
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    line-height: 94px;
    margin-bottom: 25px;
}

@media only screen and (max-width: 800px) {
    .display {
        width: 50px;
        height: 50px;
        font-size: 40px;
        line-height: 45px;
    }
}


.display:hover, .displayActive {
    background: rgb(104, 104, 104);
}


.closer {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url('../gfx/closer.png');
    position: absolute;
    right: 28px;
    top: 32px;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}
.closer:hover {
    cursor: pointer;
}

#handContainer {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 999;
}

#hand {
    width: 91px;
    height: 143px;
    background-image: url('../gfx/Icon_LargeHand.png');
    z-index: 999;
    position: fixed;
    top:45vh;
    left: 45vw;
    animation-name: handAnim;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    transform: scale(1);
}

@keyframes handAnim {
    0%   {left: 45vw}
    24%  {transform: scale(1)}
    25%   {transform: scale(.9)}
    26%   {transform: scale(1)}
    50%   {left: 55vw}
    74%   {transform: scale(1)}
    75%   {transform: scale(.9)}
    76%   {transform: scale(1)}
    100%   {left: 45vw}
}


/* floorplanChanger */
.floorplanChanger {
    position: absolute;
    bottom: 100px;
    width: 100vw;
    text-align: center;
}

.floorplanChanger div {
    display: inline-block;
    width: 150px;
    height: 100px;
    background-size: contain;
    margin: 0 10px;
    background-repeat: no-repeat;
    background-color: #000;
}


@media only screen and (max-width: 800px) {
    .floorplanChanger div {
        width: 50px;
        height: 30px;
        margin: 0 10px;
    }
}


/*OG4*/
#fPC4_1 {
    background-image: url('../gfx/grundrisse/thumbnails/og4_1.jpg')
}
#fPC4_2 {
    background-image: url('../gfx/grundrisse/thumbnails/og4_2.jpg')
}
#fPC4_3 {
    background-image: url('../gfx/grundrisse/thumbnails/og4_3.jpg')
}

/*OG2*/
#fPC2_1 {
    background-image: url('../gfx/grundrisse/thumbnails/og2_1.jpg')
}

/*OG1*/
#fPC1_1 {
    background-image: url('../gfx/grundrisse/thumbnails/og1_1.jpg')
}
#fPC1_2 {
    background-image: url('../gfx/grundrisse/thumbnails/og1_2.jpg')
}
#fPC1_3 {
    background-image: url('../gfx/grundrisse/thumbnails/og1_3.jpg')
}


.floorplanChanger div p {
    position: absolute;
    bottom: -20px;
    display: block;
    margin: 0;
    width: 150px;
    background: #000;
    color:  var(--col1);
    padding-top: 5px;
    z-index: -1;
}


@media only screen and (max-width: 800px) {
    .floorplanChanger div p {
        bottom: -40px;
        margin: 0;
        width: 50px;
    }
}

.fPCActive {
    outline: 1px dotted var(--col1);
}