:root
{
  --background-color:#f4f6f9;
  --highlight-color:#eceff2;
  --poi-color:#99cc66;
  --poi-color-none:#99cc6600;
  --poi-color-transparent:#99cc6640;
  --poi-color-thick:#99cc6680;
  --text-color:#292d32;
  --text-color-transparent:#292d3240;
  --text-color-thick:#292d3280;
}

/* Priority 0 */

a
{
  color:var(--text-color);
  background-color:transparent;
  text-decoration:none;
  transition:color 0.5s;
}

a * {transition:color 0.5s;}

a:active,
a:hover,
a:hover *
{color:var(--poi-color);}

video {display:block;}

.area
{
  filter:invert(13%) sepia(2%) saturate(3348%) hue-rotate(174deg) brightness(92%) contrast(85%);
  transition:filter 0.5s;
}

.area:hover {filter: invert(84%) sepia(3%) saturate(6607%) hue-rotate(41deg) brightness(89%) contrast(93%);}

.blocks,
.floors,
.unit
{align-items:center;}

.blocks path
{
  fill:var(--poi-color-none);
  stroke:var(--poi-color-none);
  stroke-width:0;
  cursor:pointer;
  pointer-events:all;
  transition:all 0.5s;
}

.blocks path:hover
{
  fill:var(--poi-color-transparent);
  stroke:var(--poi-color);
  stroke-width:2;
}

.blocks .item-list,
.building>a>div,
.building>.item-list,
.floors .item-list,
.gallery>.item-list
{
  min-width:15vw;
  padding:0.5vw;
  background-color:var(--highlight-color);
  border-radius:1.5vw;
}

.building * {transition:all 0.5s;}

.building>*
{
  margin-bottom:0.25vw;
}

.building>h3 {margin-bottom:0;}

.building>a:hover {color:var(--poi-color);}

.building>a>img:hover,
.buy:hover,
.gallery img:hover,
.gallery-video:hover,
.selector>a>div:hover
{border-color:var(--poi-color);}

.building>.item-list {margin-top:-0.5vw;}

.buy
{
  margin-top:1vw;
  padding:1vw;
  background-color:var(--highlight-color);
  border:0.15vw solid var(--poi-color-transparent);
  border-radius:1.5vw;
  transition:all 0.5s;
}

.buy>h2 {padding-right:1.5vw;}

.contact-big {padding-left:2vw;}

.contact-big>a>* {white-space:nowrap;}

.content
{
  width:100%;
  height:85%;
  display:flex;
  flex-direction:column;
  flex:1;
  align-items:center;
}

.content>*,
.content>*>*
{
  display:flex;
  flex-direction:column;
  flex:1;
}

.content>a,
.content>h1
{
  flex:0;
}

.floating-button img {width:100%;}

.floating-button
{
  position:fixed;
  display:block;
  box-shadow:0.2vw 0.2vw 0.2vw var(--text-color);
}

.floating-button-container>.floating-button
{
  border-radius:50%;
  background-color:white;
  transition:all 0.5s;
}

.floating-button-container * {user-select:none;}

.floating-button-container:hover>.floating-button {background-color:var(--poi-color);}

.floors path
{
  stroke-width:0.1vw;
  pointer-events:all;
  transition:all 0.5s;
}

.floors path.available
{
  fill:var(--poi-color-transparent);
  stroke:var(--poi-color);
}

.floors path.available:hover {fill:var(--poi-color-thick);}

.floors path.unavailable
{
  fill:var(--text-color-transparent);
  stroke:var(--text-color);
}

.floors path.unavailable:hover {fill:var(--text-color-thick);}

.gallery img,
.gallery-video
{
  margin:0.5vw;
  border:0.15vw solid var(--poi-color-none);
  border-radius:0.5vw;
  transition:all 0.5s;
}

.gallery>.item-list
{
  margin-top:1vw;
  padding:0.5vw 2vw;
  align-items:center;
}

.gallery>.item-list>h2 {margin-bottom:0.5vw;}

.gallery:last-child {padding-bottom:1vw;}

.gallery-video
{
  border-radius:0.5vw; 
  overflow:hidden; 
  cursor:pointer;
}

.inactive {opacity:0.2;}

.living-area
{
  opacity:0.2;
  margin-left:0.5vw;
}

.logo {padding-right:5vw;}

.menu
{
  width:100%;
  height:15%;
  display:flex;
  justify-content:center;
  background-color:var(--highlight-color);
}

.menu-content,
.menu-content *
{
  display:flex;
  flex-direction:row;
  align-items:center;
  vertical-align:middle;
}

.menu-item-selected>*>* {color:var(--poi-color);}

.navigation
{
  margin:0.5vw;
  flex-direction:row;
  align-items:center;
}

.navigation>* {margin:0 0.5vw 0.25vw 0.5vw;}

.navigation>a>div>h2
{
  margin:0 0.5vw;
  white-space:nowrap;
}

.selector {margin-right:1vw;}

.selector>h2 {margin-bottom:0.5vw;}

.selector div,
.navigation>a>div
{
  padding:0.5vw;
  background-color:var(--highlight-color);
  border:0.15vw solid var(--poi-color-none);
  border-radius:1.5vw;
  transition:all 0.5s;
}

.selector>a,
.selector>div
{margin:0.1vw 0;}

.selector .picked
{
  border:0.15vw solid var(--poi-color);
  border-radius:1.5vw;
}

.selector .picked>h3 {color:var(--poi-color);}

.title {display:table;}

.title>* {justify-content:center;}

/* Priority 1 */

.building
{
  flex-direction:column;
  padding:0.4vw;
}

.item-list {align-items:start;}

/* Media */

@media(orientation:landscape)
{
  .area div
  {
    width:20vw;
    height:20vw;
    background-size:contain;
  }
  
  .blocks,
  .buildings,
  .floors
  {flex-direction:row;}
  
  .blocks>svg,
  .floors>svg
  {flex:15;}
  
  .blocks .item-list,
  .floors .item-list
  {margin:1vw;}
  
  .building>a>img
  {
    width:18vw;
    border:0.15vw solid var(--poi-color-none);
    border-radius:1.5vw;
  }
  
  .buildings>.building {margin-top:-1vh;}

  .contact-big img
  {
    width:2.5vw;
    height:2.5vw;
    margin-right:1vw;
    margin-bottom:0.5vw;
    margin-top:0.5vw;
  }
  
  .contact-small {padding-left:1vw;}

  .contact-small>h3 {padding-right:0.5vw;}

  .contact-small img
  {
    width:1.25vw;
    height:1.25vw;
    margin-right:0.5vw;
    margin-bottom:0.25vw;
    margin-top:0.25vw;
  }

  .floating-button
  {
    bottom:5vw;
    right:5vw;
    width:6vw;
    height:6vw;
    padding:0.7vw;
    border:0.35vw solid;
    transition:all 0.5s
  }
  
  .floating-button:hover
  {
    bottom:4vw;
    right:4vw;
    width:8vw;
    height:8vw;
    box-shadow:0.4vw 0.4vw 0.4vw var(--text-color);
  }
  
  .floors .placeholder {background-color:transparent;}
  
  .floors>.selector.floor
  {
    display:grid;
    grid-template-columns:repeat(3,6vw);
    max-width:20vw;
  }
   
  .gallery-items
  {
    display:flex;
    flex-direction:row;
    align-items:center;
  }
  
  .logo>a>img
  {
    width:6vw;
    height:6vw;
  }
  
  .menu-item {padding-right:3vw;}
  
  .scrolled-list {flex-direction:row;}
  
  .svg-map
  {
    width:40vw;
    max-height:70vh;
  }
  
  .unit
  {
    flex-direction:row;
    width:100%;
    justify-content:center;
    padding:3vw 0;
    background-color:var(--poi-color);
  }
  
  .unit>img
  {
    margin-right:1vw;
    max-width:30vw;
    max-height:50vh;
  }
  
  .unit>.item-list
  {
    flex:0;
    min-width:15vw;
  }
  
  .welcome {width:100%;}
  
  .welcome>a
  {
    width:100%;
    align-items:center;
    padding:3vw 0;
    transition:background-color 0.5s;
  }

  .welcome>a>img
  {
    max-width:30vw;
    transition:max-width 0.5s;
  }
  
  .welcome>a:hover {background-color:var(--poi-color);}
  
  .welcome>a:hover>img {max-width:32vw;}
}

@media(orientation:portrait)
{
  .area div
  {
    width:30vh;
    height:30vh;
    background-size:contain;
  }
  
  .blocks,
  .buildings,
  .floors,
  .unit
  {flex-direction:column;}
  
  .blocks>svg,
  .floors>svg
  {flex:15;}
  
  .blocks .item-list,
  .floors .item-list
  {
    width:90vw;
    margin-top:2vh;
  }
  
  .building>a>img
  {
    width:80vw;
    border:0.15vh solid var(--poi-color-none);
    border-radius:1.5vh;
  }
  
  .buildings>.building,
  .buy,
  .scrolled-list
  {margin-bottom:2vh;}
  
  .contacts .contact-big {margin:1vh;}
  
  .contact-big img
  {
    width:5vh;
    height:5vh;
    margin-right:1vh;
    margin-bottom:0.5vh;
    margin-top:0.5vh;
  }
  
  .contact-small
  {
    padding-left:1vh;
    margin:1vh 0;
  }

  .contact-small>h3 {padding-right:0.5vh;}

  .contact-small img
  {
    width:2vh;
    height:2vh;
    margin-right:0.5vh;
    margin-bottom:0.25vh;
    margin-top:0.25vh;
  }
  
  .floors>.selector
  {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    margin-top:2vh;
    max-width:90vw;
  }
  
  .floating-button
  {
    bottom:5vh;
    right:5vh;
    width:10vh;
    height:10vh;
    padding:1.5vh;
    border:0.6vh solid;
  }
  
  .floating-button:hover
  {
    bottom:4vh;
    right:4vh;
    width:12vh;
    height:12vh;
    box-shadow:0.4vw 0.4vw 0.4vw var(--text-color);
  }
  
  .floors>.selector>* {margin:0.5vh;}
  
  .gallery>.item-list
  {
    max-width:90vw;
    margin:1vh 0;
  }
  
  .gallery>.item-list>h2 {padding:0.5vh 0;}
  
  .gallery>.item-list>h2:first-child {padding-top:2vh;}
  
  .gallery-items
  {
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:1vh;
  }
  
  .logo>a>img
  {
    width:6vh;
    height:6vh;
  }
  
  .menu {padding:2vh 0;}
  
  .menu .contact-big,
  .menu .title
  {display:none;}
  
  .menu-item {padding-left:2vh;}
  
  .navigation {margin:2vh 0;}
  
  .svg-map
  {
    width:90vw;
    max-height:70vh;
  }
  
  .unit
  {
    width:100%;
    padding:2vh 0;
    margin-bottom:1vh;
    background-color:var(--poi-color);
  }
  
  .unit>*
  {
    max-width:90vw;
    margin-top:2vh;
  }
  
  .welcome {width:100%;}
  
  .welcome>a
  {
    width:100%;
    padding:25vh 0;
    background-color:var(--poi-color);
  }
  
  .welcome>a>img {max-height:25vh;}
}

/* Priority 2 */

.unavailable {background-color:var(--text-color-transparent);}