﻿/* Use in screen where the header is transparent */
.carousel .tns-nav {margin-top: var(--space-none);}
.phone .header-center {display: flex;justify-content: flex-end;height: 100%;}
.phone .header-left {display:flex;flex: 1;}
.layout .header {background-color: transparent;box-shadow: none;left: 0;position: absolute;right: 0;top: 0;z-index: 100;}
.header-top {margin-top: 17px;}
.phone .header-top {margin-top: 0;}
.layout-top .header .ThemeGrid_Container {margin: var(--space-none) auto;padding: var(--space-none) var(--space-none);max-width: 1264px;}
.phone .layout-top .header .ThemeGrid_Container {margin: var(--space-none) auto;padding: var(--space-none) var(--space-none);width: 100%;padding-left: 5%;padding-right: 5%;}
.layout .main {padding-top: 0;}
.transparent-menu-header.header-menu-link a {color: #fff !important;}
.transparent-menu-header.header-menu-link a:hover {opacity:0.8;}
.phone .transparent-menu-header.header-menu-link a {color: var(--color-text-01)!important;padding-left: var(--space-none);}
.header-menu-link  {color: #fff !important;}
.transparent-menu-header .Button {color: #000;border: none;}
.transparent-menu-header .Button:hover {color: #fff;border: none;}


.city-title {font-size: 96px;    font-weight: bold;    line-height: 81px;    color: #FFFFFF;}
.city-title-shadow {text-shadow: 1px 1px #333;}
.phone .city-title {font-size: 40px}
.city-metrics-1 {}
.phone .city-metrics-1 {display: none;}
.city-metrics-2 {display: none;}
.phone .city-metrics-2 {display: unset;}
.city-metrics-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: -100px;
}

.city-balloon-1-img {
    left: 0px;
    position: absolute;
    top: -90px;
    }
.city-balloon-1-text {
    color: #fff;
    left: 30px;
    position: absolute;
    top: 20px;
}
.city-balloon-2-img {
    left: 80%;
    position: absolute;
    top: -30px;
}

.city-balloon-2-text {
    color: #fff;
    left: 15px;
    position: absolute;
    top: 10px;
}

.city-balloon-3-img {
    left: 90%;
    position: absolute;
    top: 0px;
}

.city-balloon-3-positon {
    transform: scaleX(-1);
}

.city-balloon-3-text {
    color: #fff;
    left: 10px;
    position: absolute;
    top: 10px;
}
.phone .city-balloon {display: none}
.container-position {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.city-filters {display: flex; flex-direction: row; align-items:baseline; }
.phone .city-filters {flex-direction: column;}
.metrics-label {color: #FF5C10;    font-size: 16px;    font-weight: bold;    margin-top: 16px;}
.metrics-number {    color: #002331;font-size: 40px;font-weight: bold;line-height: 40px;}

/* to move to theme */

.group-gallery {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.phone .group-gallery {
        display: block;
}


.sidebar-content {
    padding:0px;
}









