img,form,div,body,h1,h2,h3,h4,p,input,select,textarea,dl,dt,dd,footer,header,menu,nav,ul,li,ol,figure,button,form { margin: 0; padding: 0; border: none; list-style: none; vertical-align: baseline; }
header, menu, nav, article, footer { display: block; }

body { font: 14px 'Open Sans', sans-serif; line-height: 21px; font-weight: 300; color: #5a5a5a; text-align: center; }
p.clean { clear: both; }
a { text-decoration: none; color: #5a5a5a; }
a:hover { color: #90764E; transition:all 0.5s ease; }

article { text-align: left; }
h1 { font-size: 40px; line-height: 40px; letter-spacing: 0px; font-weight: 300; }
.h { text-align: center; color: #91764e; margin-bottom: 30px; }
img { max-width: 100%; height: auto; }

#statusy { margin: 10px auto 0; text-align: center; }
#statusy li { display: inline-block; position: relative; padding-left: 28px; font-size: 13px; }
#statusy li:nth-child(2) { margin: 0 25px; }
#statusy li:before { content: ''; display: block; box-sizing: border-box; width: 18px; height: 18px; transform: rotate(45deg); position: absolute; left: 0; top: 0; }
#statusy li:nth-child(1):before { border: solid 3px #40d340; }
#statusy li:nth-child(2):before { border: solid 3px #f2f246; }
#statusy li:nth-child(3):before { border: solid 3px #e30615; }

.container { max-width: 1000px; max-height: 100vh; margin: auto;
    display: block;
    position: relative;}

.hide { display: none; }
.anim_b { max-width: 1500px; margin: auto; overflow: hidden; position: relative; transition: height 0.3s; background: #fff; }
.anim_scroll_info { color: #90764E; position: absolute; top: 0; width: 100%; height: 100%; display: none; z-index: 11; }
#budynek_wybor { z-index: 12; display: block; position: relative; }
#go_home { position: absolute; top: 0; cursor: pointer; z-index: 14; display: none; }
.anim_scroll_info h2 {
    font-family: Roboto;
    font-size: 22pt;
    text-align: center;
    font-weight: normal;
    position: relative;
    top: 50%;
    margin-top: -35px;
}

.anim_box {
    width: 100%;
    height: 100%;
    transition: transform 0.2s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.home_anim { transition: transform 0.2s, left 0.2s, top 0.2s; }
/*
#navigation_left { max-width: 1400px; height: 62px; text-align: center; margin: 0 auto 5px; }
#navigation_left ul { display: inline-block; position: relative; }
#navigation_left ul:after { position: absolute; bottom: 3px; left: 0; right: 0; height: 1px; background: #dfdfdf; content: ''; }
#navigation_left li { cursor: pointer; display: inline-block; position: relative; font-size: 26px; font-family: "Open Sans",sans-serif; padding: 0 15px 20px 15px; }
#navigation_left li:after {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-weight: 900;
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -12px;
  content: "\f192";
  font-size: 14px;
  color: #d6d6d7;
  background: #FFF;
  border: 5px solid #FFF;
  z-index: 2;
}
#navigation_left li:hover, #navigation_left li:hover:after { color: #90764E; }
#navigation_left li.active, #navigation_left li.active:after { color: #90764E; }
*/

#zoom_bar {
    transform: rotate(-90deg);
    display: none;
    width: 127px;
    height: 129px;
    position: relative;
    transform-origin: 38px 85px;
    outline: none;
}
.grab { cursor: grab; }

#navigation_left {
    display: none;
    pointer-events:none;
}
#navigation_left.active {display: block;position: absolute;z-index: 1;width: 100%;height: 100%;margin-top: 15px;pointer-events: none;}


#anim_content { position: relative; left: 0; top: 0; }
#navigation_right {
    max-width: 24px;
    right: 0;
    top:10px;
    position: absolute;
    z-index: 10;
	text-align: center;
    font-size: 14pt;
}
#stage_name {
    width: 100%;
    text-align: center;
    font-size: 26px;
}
#arrow_up, #arrow_down, #go_home {position: absolute; font-size: 26pt; pointer-events:all;}
#arrow_up, #arrow_down{
    left:50%;
    transform: translateX(-50%);
}
#arrow_up{
    top: 35px;
    pointer-events: all;
}
#arrow_down{
    bottom: 50px;
}

.navi_button { width: 24px; height: 24px; opacity: 0.5; cursor: pointer; display: block; float: right; }
.navi_button:hover { opacity: 1; color: #90764E; }
#blok_button {
    width: 177px;
    height: 80px;
    position: absolute;
    top: 33px;
    left: 40px;
    z-index: 10;
    box-shadow: 1px 1px 2px 0px #8c8b8b;
    transition: box-shadow 0.1s;
    cursor: pointer;
}
#blok_button:hover { box-shadow: 0px 0px 0px 0px #8c8b8b; }

/* SVG STYLES */
svg#budynek_wybor > polygon { fill:#00ff00;opacity: 0; transition: opacity 800ms; cursor: pointer; }
svg#budynek_wybor > polygon:hover { opacity: 0.6; }

@keyframes svgInUp {
    from {
        opacity: 0;
        transform: translateY(-50%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}
@keyframes svgOutUp {
    from {
        opacity: 1;
        transform: translateY(0%);
    }
    to {
        opacity: 0;
        transform: translateY(50%);
    }
}
@keyframes svgOutDown {
    from {
        opacity: 1;
        transform: translateY(0%);
    }
    to {
        opacity: 0;
        transform: translateY(-50%);
    }
}
@keyframes svgInDown {
    from {
        opacity: 0;
        transform: translateY(50%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}

.svgOutUp { animation: svgOutUp 1s; }
.svgInUp { animation: svgInUp 1s; }
.svgInDown { animation: svgInDown 1s; }
.svgOutDown { animation: svgOutDown 1s; }
#anim_content svg {
    transform: translateY(0%) scale(0.9);
    opacity: 0;
    position: absolute;
  pointer-events:none;
    top: 0px;
    left: 0px;
  transition: opacity 500ms, transform 500ms;
}
#anim_content svg.active { transform: translateY(0%) scale(1); opacity: 1; pointer-events:all;}
#dymek:hover { display: none; left: -100%; top: -100%; }
#dymek {
    opacity: 0;
    position: absolute;
    transition: opacity 300ms;
    z-index: 15;
    left: 0;
    top: 0;
    border-radius: 16px 16px 0px 16px;
    padding: 20px 35px;
    background: rgba(0, 53, 97, 0.9);
    color: #fff;
    font-size: 14px;
}
#dymek.active { opacity: 1; }
#dymek h3 { font-size: 29px; margin-bottom: 6px; }
#dymek p { font-size: 21px; margin-bottom: 5px; }
#dymek span { font-size: 12px; }
.local_group polygon { cursor: pointer; fill: #00ff00; opacity: 0.6; transition: opacity 300ms; }
.local_group polygon:hover { opacity: 0.3; }

@media screen and (min-width: 801px) {
	#navigation_left ul { padding: 0 40px; }
}

@media only screen and (max-width: 800px) {
	#go_home { width: 80px; }
    #dymek { display: none; }
    #blok_button { transform: scale(0.5); top: -23px; left: -40px; }
    #navigation_left {  }
}