* {
    margin:0;
    padding:0;
    font-family: neuzeit-grotesk, Arial;
    font-weight: 300;
    font-style: normal;
    font-weight: 300;
    hyphens: none;
    line-height:1.2em;
    font-size: 19px;
    outline: 0;
    color:rgba(255,255,255,0.5);
    -webkit-tap-highlight-color: transparent;
    letter-spacing: 0.5px;
}

body, html {
    height: 100%;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color:#424549; 
    width: 100%;
}

html{
    display: table;
}

body{
    display: table-cell;
    vertical-align: middle;
}

div.viewPort {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

div.spacer {
    width: 10px;
    padding-bottom: 50%;
}

div.viewContent {
    position: absolute;
    width: 75%;
    height: 100%;
    left:0%;
    top:0%;
    transition: 1s;
    transition-property: width,height,left,top;
}

/*********** content positioning **********************/

div.viewContent * {
    position: absolute;
}

/*********** 3D **********************/
div.z0,
div.z1,
div.mode3d{
    height: 100%;
    width: 100%;
}

div.mode3d{
    display:none;
    margin-top:-8%;
    left:0;
}

body.mode3d div.mode3d{
    display:block;
}

div.bg{
    position: absolute;
    top:0;
    left: 0;
    right:0;
    height:120%;
}

div.bg img{
    width:100%;
    opacity: 0;
}

body.B img.B,
body.S img.S,
body.V img.V{
    opacity: 1;
}
body div.mode3d svg g{
    visibility: hidden;
}

body.B div.mode3d .z0 svg g.B,
body.S div.mode3d .z0 svg g.S,
body.V div.mode3d .z0 svg g.V{
    visibility: visible;
}


div.bg:after{
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

body.z1 div.bg:after{
    content:'';
    background:rgba(0,0,0,0.8);
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    opacity: 1;
}

body.z0 .homeicon{
    display:none;
}


/*********** PLANS / 2D***********/
body.mode2d .headerNavi{
    display:none;
}

div.mode2d{
    display:none;
    width:100%;
    height:100%;
    /*background:#2a1c10; */
    background:#000;
}


div.mode2d:before{
    content: '';
    opacity: 0.08;
    background: url(../img/bg_plans.jpg) no-repeat center center / cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


div.mode2D div.container{
    width:100%;
    height:100%;
}

div.mode2d g{
    display:none;
}

div.mode2d svg,
div.mode2d g{
    height: 100%;
    width: 100%;
}

body.mode2d div.mode2d{
    display:block;
}

div.viewPort > div.plans{
    background: rgba(255,255,255,0.1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

div.viewContent{
    background: rgba(255,255,255,0.1);
}

div.z1{
    display:none;
}


body.z1 div.z1{
    display:block;
}

body.z1 div.z0{

}

div.mode2d .A1{
    transform:scale(1.6) translateX(-12%) translateY(-13%);
}

div.mode2d .A2{
    transform:scale(1.6) translateX(-50%) translateY(5%);
}

div.mode2d .A3{
    transform:scale(2.3) translateX(-20%) translateY(-68%);
}

div.mode2d .A1.L099{
    transform: scale(0.95) translateX(-3%) translateY(3%);
    filter:grayscale(0);
}

div.mode2d .A1.V.L100,
div.mode2d .A1.V.L101{
    transform: scale(1.25) translateX(-18%) translateY(2%);
}

/*********** OUTLINES TOTALE ***********/
div.z0 g.outline{
    fill: transparent;
    stroke: #fff;
    stroke-width: 10px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

div.z0 g.flaeche {
    fill: white;
    opacity: 0;
    transition: opacity 0.3s;
}

div.z0 g.flaeche:hover{
    opacity: 0.6;
}

body.z1 div.z0 g.outline{
    stroke: black;
    opacity: 0.8;
}

body.z1 div.z0 g.flaeche{
    fill: black;
    opacity: 0.8;
}

/***********FOOTER & HEADER NAV ***********/

div.footerNavi {
    height: 40px;
    position: absolute;
    bottom: 0;
    right: 25%;
    background-color:#424549;
    z-index: 2;
}

div.footerNavi div > div{
    opacity: 0.6;
    cursor: pointer;
    display:inline-block;
    vertical-align: middle;
    width: 26px;
    margin:0 15px;
    height:100%;
    line-height: 40px;
}

div.footerNavi div > div svg{
    height: 26px;
    width: 26px;
    margin-top: 8px;
}

div.footerNavi div > div:hover{
    opacity: 1;
}

div.footerNavi div.Gebaeudeteil , p.Geschoss span {
    text-transform: uppercase;
    font-weight: 200;
    line-height: 50px;
    height: 50px;
    margin-left: 20px;
    cursor: default;
    width:auto;
    opacity: 1;
}


div.headernavi{
    position: absolute;
    top:-1px;
    right:25%;
    z-index: 2;
}

div.headerNavi ul{
    background-color: #424549;
    float: right;
    display:inline-block;
}

div.footerNavi div div.plansNavi{
    width: auto;
    opacity: 1;
}

div.headerNavi li,
div.plansNavi li{
    display:inline-block;
    white-space: nowrap;
}

div.headerNavi ul.subNavi {
    display:none;
    float:right;
}

div.headerNavi ul.subNavi{
}

div.headerNavi ul.subNavi.mode{
    margin-left: 5px;
}

body.z0:not(.B) div.headerNavi ul.subNavi.scene,
body.z1:not(.B) div.headerNavi ul.subNavi {
    display: block;
}

div.headerNavi ul.subNavi li a{
    font-size: 20px;
    line-height: 20px;
    padding-bottom: 5px;
    padding-top: 5px;
}

div.plansNavi ul{
    display: block;
    margin-right: 30px;
    white-space: nowrap;
}

div.plansNavi li{
    line-height: 50px;
    display: inline-block;
    opacity: 1;
    cursor: pointer;
}

div.headerNavi li a,
div.plansNavi li a{
    opacity: 0.6;
    display:inline-block;
    vertical-align: middle;
    margin:0 15px;
    height:100%;
    line-height: 22px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-size:22px;
    cursor: pointer;
    padding:8px 0 10px;
}

div.headerNavi li:hover a,
div.plansNavi li:hover a{
    color:#fff;
}

div.footerNavi div div.plansNavi:hover{
    opacity: 1;
}


body.B div.headerNavi a[class="B"],
body.S div.headerNavi a[class="S"],
body.V div.headerNavi ul:first-child a[class="S"],
body.V div.headerNavi a[class="V"],
body.H div.headerNavi a[class="H"],
body.O div.headerNavi a[class="O"]{
    color:#fff;
    opacity: 1;
}

/*********** INFOBOX **********************/
div.infobox{
    position: absolute;
    right:0;
    width:25%;
    height:100%;
    top:0;
    background:#767578;
    padding:1%;
    box-sizing: border-box;
}

div.infobox table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    display:none;
}
div.infobox table.totale{
    display: table;

}

div.infobox table tr td{
    position: relative;
}


div.infobox table tr td {
    font-size: 16px;
    padding: 5px 25px 5px 0;
    color:#fff;
    opacity: 0.8;
    vertical-align: top;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

div.infobox table tr:first-child td,
body:not(.B) div.infobox tr.titleSV td{
    border:none;
}

td.right{
    text-align: right;
}

div.infobox table tr td:nth-child(2) {
    opacity: 0.6;
    padding-right: 0;
    padding-left: 25px;
}


div.infobox table tr h2{
    font-size:24px;
    color:#fff ;
    margin-bottom: 10px;
    font-weight:400;
    width:calc(100% - 20px);
}

@media screen and (max-width: 1000px) {
    div.infobox table tr td{
	display:block;
	padding-left: 0;
	padding-right: 0;
	width:100%;
    }

    div.infobox table tr td:first-child{
	border:none;
	padding-bottom:0;
    }

    div.infobox table tr td:nth-child(2){
	padding-left:0;
	padding-top:0;
	text-align: left;
    }

    div.infobox table tr:nth-child(2) td:first-child{
	padding-top: 0;
    }
}

@media screen and (max-width: 800px) {
    div.infobox table tr td{
	font-size: 14px;
    }

    div.headernavi{
	transform: scale(0.8);
	transform-origin: top right;
    }

    div.footerNavi{
	transform: scale(0.8);
	transform-origin: bottom right;
    }
    
    div.infobox table tr h2{
	font-size: 22px;
    }
}


@media screen and (max-width: 750px) {
    div.infobox{
	padding:3px;
    }
    div.infobox table tr td:nth-child(2){
	padding-bottom: 2px;
    }
    div.infobox table tr td:first-child{
	padding-top:2px;
    }
}


body.B div.infobox tr.bgf,
div.infobox tr.bgf_gesamt,
div.infobox tr.titleSV,
div.infobox tr.miete_entwicklung{
    display:none;
}

body:not(.B) div.infobox tr.title,
body:not(.B) div.infobox tr.walt,
body:not(.B) div.infobox tr.flaeche,
body:not(.B) div.infobox tr.flaeche_gesamt,
body:not(.B) div.infobox tr.miete{
    display:none;
}

body.S.A1 div.infobox tr.bgf_gesamt.S.A1,
body.V.A1 div.infobox tr.bgf_gesamt.V.A1,
body.S.A2 div.infobox tr.bgf_gesamt.S.A2,
body.V.A2 div.infobox tr.bgf_gesamt.V.A2,
body.S.A3 div.infobox tr.bgf_gesamt.S.A3,
body.V.A3 div.infobox tr.bgf_gesamt.V.A3,
body:not(.B) div.infobox tr.titleSV,
body:not(.B) div.infobox tr.miete_entwicklung:not(.empty),
body:not(.B) div.infobox tr.miete_entwicklung.empty + tr.miete{
    display:table-row;
}




/*********** interaction hotspots ***********/

div.zoom .hotspot {
    stroke: rgba(0, 48, 86 ,0.5);
    stroke: rgba(255, 255, 255 ,1);
    stroke-linecap:round;
    stroke-dasharray: 2,1;
    stroke-width: 0.4px;
    fill:rgba(0,0,0,0.2);
    transition: fill 0.5s;
}
div.zoom .hotspot.hover {
    fill:rgba(255,255,255,0.6);
}


image.hotspot.hover,
a.hotspotMarker:hover{
    animation: jumpUp 0.3s linear;
}

@keyframes jumpUp {

    0%, 100% {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
    }

    50% {
	transform: translate(0, -3px);
	-webkit-transform: translate(0, -3px);
	-moz-transform: translate(0, -3px);
	-o-transform: translate(0, -3px);
	-ms-transform: translate(0, -3px);
    }
}

/*********** hotspots ***********/
a.hotspotMarker {
    position: absolute;
    top:calc(105% - 60px);
    left:calc(79% - 30px);
}

a.hotspotMarker img {
    width:60px;
    height:60px;
}

div.totale a.hotspotMarker {
    left: calc(80% - 30px);
    top: calc(104% - 30px);
}

div.zoom a.hotspotMarker {
    top: calc(27% - 30px);
    left: calc(51% - 30px);
}


/*********** ZOOM **********************/
div.mode3d{
    transition: transform 0.5s ease-in-out, left 0.5s  ease-in-out;
}
div.mode3d.A1{

}

div.mode3d.A2{
    transform-origin: right center ;
}

div.mode3d.A3{
    transform-origin: left bottom ;
}

body.z1 div.mode3d.zoomIn.A1{
    transform: scale(1.6);
    left:15%;
}

body.z1 div.mode3d.zoomIn.A2{
    transform: scale(1.6);
}

body.z1 div.mode3d.zoomIn.A3{
    transform: scale(1.6);
}

body.z1 div.mode3d.zoomOut.A1{
    transform: scale(0);
    left:0;
}

body.z1 div.mode3d.zoomOut.A2{
    transform: scale(0);
}

body.z1 div.mode3d.zoomOut.A3{
    transform: scale(0);
}

body.z1 div.mode3d.zoomIn.zoomTo{
    transition: transform 0.5s linear;
}

body.z1.V div.mode3d.zoomIn.A1{
    transform: scale(1.3) translateX(-4%);
    left: 0;
}

body.z1.V div.mode3d.zoomIn.A2{
    transform: scale(1.3) translateX(6%);
}