/*@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: url('../font/RecklessNeue-Medium.otf') format('opentype');
}
@font-face { font-family: 'reckless-thin';
             src: url('../font/RecklessNeue-Book.otf') format('opentype');
}
@font-face { font-family: 'Inter-Regular';
             src: url('../font/Inter-Regular.otf') format('opentype');
}

:root {
    --col1: #faf05a;
    --col2: #ccc;
    --col3: #666;
    --col4: #333;

    --fontSize1: 40px;
    --fontSize2: 18px;
    --fontSize3: 24px;
}   

* {
    user-select: none;
    font-size: var(--fontSize2);
}

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

canvas {
    /*pointer-events:visible;*/ 
    /*    position: fixed;
        left: -100px;
        z-index: -1;*/
}

table {
    min-width: 200px;
}

.button {
    width: 31px;
    height: 102px;
    background-repeat: no-repeat;
    margin-left: 22px;
}

@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: calc(800px + 25vw);
    background-repeat: no-repeat;
    background-position: center;
    z-index: 999;
}

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


.bsp {
    font-family: 'Inter-Regular';
    /*text-transform: uppercase;*/
}

.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_1.png')
}


.floorPlanText {
    width: 260px;
    margin: 0;
    position: absolute;
    right: 50px;
    top: 56px;
}



@media only screen and (min-width: 1400px) {
    .floorPlanText {
        right: calc(calc(25vw - 350px) + 50px);
    }
}




.floorPlanText *{
    font-size: var(--fontSize3);
}

.floorPlanText hr {
    color: var(--col1);
    margin: 18px 0;
}

.floorPlanText table * {
    font-size: var(--fontSize2);
    color: var(--col2);
    vertical-align: text-top;
    line-height: 24px;
}


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

.floorplancomment {
    font-family: 'Inter-Regular';
    width: 740px;
    position: relative;
    top: 10px;
} 


#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 {
    font-family: 'reckless';
    /*text-transform: uppercase;*/
    color: var(--col1);
    font-size: 64px;
    font-weight: bold;
    margin-bottom: 25px;
    display: block;
}

.display {
    font-family: 'reckless';
    display: block;
    width: 75px;
    height: 75px;
    /*border: 1px dotted var(--col1);*/
    background: rgb(44, 44, 44);
    color: var(--col1);
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 25px;
    cursor: pointer;

    border-radius: 100%;
    text-align: center;
    line-height: 70px;
}

#display4 {
    padding-right: 2px;
    width: 73px;
}

@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: 0px;
    top: 0px;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    background-size: cover;
}
.closer:hover {
    cursor: pointer;
}




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

.floorplanChanger div {
    display: inline-block;
    margin: 0 15px;
    /*color:  var(--col1);*/
}




.floorplanChanger div p {
    font-family: 'Inter-Regular';
    font-size: var(--fontSize2);
    /*background:  var(--col4);*/
    color:  #fff;
    padding: 7px;
    line-height: var(--fontSize2);
    margin: 0;
    /*outline: 1px dotted var(--col1);*/
}


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

.fPCActive, .floorplanChanger div p:hover {
    /*background: var(--col3) !important;*/
    color:  var(--col1) !important;
}


/*#########################*/
/*######## TOOLTIP ########*/
/*#########################*/

/*#tooltip {
    position: fixed;
    border: 1px dotted var(--col1);
    background: rgb(44, 44, 44);
    z-index: 999;
    margin: 20px;
    padding: 5px;
    color: var(--col1);
}*/

/*#######################*/
/*######## INTRO ########*/
/*#######################*/

#handContainer {
    /*background-color: rgba(0,0,0,.5);*/
    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}
}

#introText {
    font-family: 'Inter-Regular';
    width: 350px;
    padding: 25px;
    color: #fff;
    position: fixed;
    right: 50px;
    top: 113px;
    font-size: var(--fontSize2);
    line-height: 25px;
    /*border: 1px solid var(--col3);*/
    background-color: rgba(34, 34, 34,.8);
}

.highlighted {
    color: var(--col1);
}

#introText p:first-of-type {
    margin-top: 0;
}
#introText p:last-of-type {
    margin-bottom: 0;
}





/*#############################*/
/*######## MEDIA QUERY ########*/
/*#############################*/


#buttonsDesktop {
    display: block !important; 
}
#buttonsMobile {
    display: none !important; 
}

@media screen and (max-width: 1600px) {
    body { width: 100vw; height: 56.25vw; }
    * { font-size: initial; }
    #introText { width: 25vw; padding: 2vw; right: 4vw; top: 2.5vw; line-height: 2vw; }
    #introText p, #introText span { font-size: 1.3vw !important; }
    #displayBox { top: 1.2vw; }
    #displayBox span { font-size: 3vw; padding-bottom: 0.5vw; }
    .display { width: 5vw; height: 5vw; font-size: 3vw; line-height: 4.5vw; margin-bottom: 1.2vw; }
    #display4 { padding-right: 2px; width: calc(5vw - 2px);}
    .button.b1 { width: 1.8vw; height: 8.2vw; background-repeat: no-repeat; margin-left: 1.55vw;}
    .floorplan { height: 100vh; background-size: 75vw !important; background-position: 4vw 1.5vw !important; }
    .floorPlanText { width: 20vw; right: 4vw; top: 3vw; }
    .floorPlanText p.fp1 { font-size: 3.5vw; }
    .floorPlanText table { min-width: 20vw; }
    .floorPlanText table, .floorPlanText table tbody, .floorPlanText table tr, .floorPlanText table td { font-size: 1.4vw !important; line-height: 2vw !important; }
    .floorPlanText table sup { font-size: 1.2vw; line-height: 2vw !important; }
    .floorplanChanger { bottom: 2vw; left: -9vw; font-size: 1.3vw !important; }
    .floorplanChanger div { font-size: 1.3vw !important; margin: 0 1vw !important;}
    .floorplanChanger div p { font-size: 1.3vw !important; padding: 0.5vw !important; width: 10vw; }
    .floorplancomment { top: 0.5vw; left: 7vw; width: 100vw; }
    .closer { width: 4vw; height: 4vw; background-size: 100%; }
    #hand { background-size: 7vw; background-repeat: no-repeat; width: 8vw; height: 12vw; }
    #buttonsDesktop { display: none !important; }
    #buttonsMobile { display: block !important; }
    #handContainer {display: none !important;}
}




#displayBox {
    left: 250px;
    top: 113px;
}
@media (max-width: 1600px) {
    #displayBox {
    left: 50px;
    top: 2.5vw;
    }
}