body {
    margin: 0;
    font-family: 'Worksans', sans-serif;
    opacity: 0;
    user-select: none;
}

body.slider-active * {
  user-select: none;
  -webkit-user-select: none;
}

::-webkit-scrollbar-track {
    background-color: white;
}

::-webkit-scrollbar {
    width: 0.7vh;
    height: 0.7vw;
    background-color: white;
}

::-webkit-scrollbar-thumb {
    background-color: #222233;
    width: 10px;
}

a {
    color: inherit;
}

section {
    background: white;
    /* min-height: 101vh; */
}

::selection {
    user-select: none;
}

#globe {
	width: 100%;
	height: 100vh;
	max-height: 100vw;
	overflow: hidden;
	filter: brightness(0);
	transform: scale(0.8);
	transition: filter 3s ease, transform 1.25s ease;
}
#globe.earth-ready {
	filter: brightness(1.2);
	transform: none;
}

#globe::before {
	content: none;
}

#res {
	width: 0;
	height: 0;
	overflow: hidden;
}

.mainbag {
    display: flex;
    flex-direction: column;
}

.main-section {
    background: none;
}

.main-section__content .year_select {
    display: none;
}

.logotype {
    position: absolute;
    top: 1.5vw;
    left: 7.6vw;
    display: flex;
    align-items: center;
    font-size: 1vw;
    text-transform: uppercase;
    color: #0F2B30;
    letter-spacing: 0.25vw;
    text-decoration: none;
}

.logotype svg {
    width: 2.2vw;
    height: 1.46vw;
    padding-right: 1.2vw;
}

#menu {
    position: absolute;
    right: 7.6vw;
    top: 2vw;
    height: 1.4vw;
}

#menu a {
    text-decoration: none;
    color: #7a7a87;
    margin-left: 1vw;
    font-size: 0.9vw;
    cursor: pointer;
    display: block;
    float: left;
}

#menu a:hover {
    opacity: 0.8;
}

#globe_section {
    position: relative;
    left: 0;
    /* height: 100vh; */
    width: 100%;
    text-align: center;
    z-index: -5;
}

#globe_ie {
    padding-top: 11.5vh;
    height: 75vh;
}

#globe_section .animation {
    height: 75vh;
    width: 75vh;
    margin: 0 auto;
    display: inline-block;
    max-width: 100vw;
    max-height: 100vw;
}

#globe_section .counter {
    position: absolute;
    top: 12.1vw;
    left: 44.1vw;
    margin-top: 11.5vh;
}

#globe_section .head_txt {
    position: absolute;
    top: 20vw;
    right: 6.1vw;
    margin-top: 11.5vh;
}

.counter {
    font-family: "WorkSans-Bold";
    font-size: 7.3vw;
}

.head_txt {
    font-family: "WorkSans-Medium";
    font-size: 1vw;
    text-align: right;
    letter-spacing: 0.35vw;
    width: 80vw;
}

#water_section {
    position: absolute;
    /* height: 100vw; */
    top: 0;
    bottom: 0;
    z-index: -5;
    overflow: hidden;
    width: 100%;
}

#water_section img {
    position: absolute;
    bottom: 0;
    will-change: transform;
}

#wave_0 {
    width: 63vw;
}

#wave_1 {
    width: 100vw;
}

#wave_2 {
    width: 100vw;
}

#wave_3 {
    width: 45vw;
}

#wave_4 {
    width: 47vw;
}

#wave_5 {
    right: 16vw;
    width: 31vw;
}

#wave_6 {
    right: 0;
    width: 34vw;
}

#wave_7 {
    right: 0;
    width: 27vw;
}

.share {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5vw;
    height: 2.5vw;
    position: absolute;
    right: 6.2vw;
    bottom: 5vh;
    background: white;
    border-radius: 50vw;
    box-shadow: 0 .1vw 0.25vw 0 rgba(0,0,0,0.5);
    cursor: pointer;
}

.share:not(.active) .share-links-item {
    opacity: 0;
    visibility: hidden;
    transform: translateY(1vw);
}

.share img {
    display: block;
    width: 50%;
}

.share-links {
    position: absolute;
    bottom: 100%;
    left: 0;
}

.share-links-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3vw;
    height: 2.3vw;
    margin-bottom: .5vw;
    background: #0F5974;
    border-radius: 50vw;
    box-shadow: 0 .1vw 0.25vw 0 rgba(0,0,0,0.5);
    transition: 150ms;
    transition-property: opacity, visibility, transform;
}

.share.active .share-links-item:nth-child(1) {
    transition-delay: 150ms;
}

.share.active .share-links-item:nth-child(2) {
    transition-delay: 100ms;
}

.share.active .share-links-item:nth-child(3) {
    transition-delay: 50ms;
}

.share.active .share-links-item:nth-child(4) {
    transition-delay: 0ms;
}

.share-links-item:nth-child(1) {
    transition-delay: 0ms;
}

.share-links-item:nth-child(2) {
    transition-delay: 50ms;
}

.share-links-item:nth-child(3) {
    transition-delay: 100ms;
}

.share-links-item:nth-child(4) {
    transition-delay: 150ms;
}

.main-section__content {
    position: relative;
    /* height: 100vh; */
    width: 100%;
}

#background_section {
    position: absolute;
    top: 8vw;
    left: 6vw;
    right: 6vw;
    bottom: 6vw;
    z-index: -10;
    overflow: hidden;
}

#main-bg {
    height: auto;
    width: auto;
    min-width: 100%;
    min-height: 100%;
}

.main-bg-item {
    transition: fill 150ms;
}

.main-bg-item.is-highlighted {
    fill: #E4CCB9;
}

.main-bg-item.is-hidden {
    display: none;
}

/*slider*/
.slider * {
    user-select: none;
}

.slider {
    position: absolute;
    opacity: 0;
    width: 70vw;
    height: 1px;
}

.year {
    position: absolute;
    height: 1vw;
    width: 1px;
    background: #CDCDCD;
    top: -0.5vw;
    color: #CDCDCD;
    font-size: 0.8vw;
    line-height: 3vw;
    text-indent: -1vw;
}

.y1 {
    left: 0%;
}

.y2 {
    left: 12.732%;
}

.y3 {
    left: 25.4641%;
}

.y4 {
    left: 38.1962%;
}

.y5 {
    left: 53.6472%;
}

.y6 {
    left: 57.5099%;
}

.y7 {
    left: 69.0981%;
}

.y8 {
    left: 84.5490%;
}

.y9 {
    left: 100%;
}

.timeline_1 {
    height: 1px;
    width: 57.6%;
    background: #CDCDCD;
    position: absolute;
    left: 0;
    z-index: 1;
}

.timeline_2 {
    height: 1px;
    width: 42.4%;
    background: #1996D7;
    position: absolute;
    right: 0;
}

.timeline_2:before {
    content: 'UN SDG years';
    position: absolute;
    left: 0;
    bottom: 0;
    color: #cdcdcd;
    font-size: 0.83333vw;
}

.handle {
    position: absolute;
    top: -1vw;
    cursor: pointer;
    z-index: 3;
}

.circle {
    position: absolute;
    width: 2vw;
    height: 2vw;
    background: white;
    border-radius: 5vw;
    left: -1vw;
    box-shadow: 0 0 0.2vw 0 rgba(0,0,0,0.75);
}

.handle .triangle.t1 {
    border-width: 0.25vw 0 0.25vw 0.5vw;
    border-color: transparent transparent transparent #ffffff;
    top: 0.75vw;
    right: -1.7vw;
}

.handle .triangle.t2 {
    border-width: 0.25vw 0.5vw 0.25vw 0;
    border-color: transparent #ffffff transparent transparent;
    left: -1.7vw;
    top: 0.75vw;
}

.tip {
    position: absolute;
    top: -1.9vw;
    left: -1.05vw;
    width: 4vw;
    height: 1.2vw;
    background: #EEEEEE;
    font-size: 1vw;
    color: #0F5974;
    text-align: center;
    line-height: 1.3vw;
    font-size: 0.8vw;
}

.tip .triangle {
    border-width: 0.5vw 0.5vw 0 0.5vw;
    border-color: #eeeeee transparent transparent transparent;
    top: 1.1vw;
    left: 0.6vw;
    z-index: -1;
}

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
}

/**/
#slider_1 {
    left: 15vw;
    bottom: 6vh;
}

#slider_2 {
    position: absolute;
    bottom: 8vw;
    left: 15vw;
}

#slider_2 .timeline_1 {
    background: #7A7A87;
}

#slider_2 .year {
    color: #7A7A87;
    text-shadow: none;
}

#slider_2 .handle .triangle.t1 {
    border-color: transparent transparent transparent #0F5974;
}

#slider_2 .handle .triangle.t2 {
    border-color: transparent #0F5974 transparent transparent;
}

.people-section {
    padding-bottom: 10vw;
}

.people-section .head_txt {
    text-align: left;
    padding: 4vw 0 2vw 12vw;
}

.content_row {
    display: flex;
    align-items: center;
    padding-left: 12vw;
    margin-top: 3vw;
}

.content_row .image {
    width: 27vw;
    display: inline-block;
}

.content_row .image--mobile {
    display: none;
}

.content_row .text {
    width: 37.5vw;
    display: inline-block;
    vertical-align: top;
    margin: 0 2vw;
}

.content_row .big_headline_txt {
    margin-top: 3vw;
}

.content_row .description {
}

.big_headline_txt {
    font-family: "WorkSans-Bold";
    font-size: 2vw;
}

.description {
    font-family: "WorkSans";
    font-size: 1vw;
    line-height: 1.3;
}

.description-small {
    font-size: 85%;
    letter-spacing: .1em;
}

.map-section {
    position: relative;
}

.map-section .search_box .head_txt {
    width: 24vw;
    display: inline-block;
    vertical-align: top;
    margin-top: 1.4vw;
}

.map-section .search_box {
    position: absolute;
    top: 3vw;
    left: 5vw;
}

.map-section .search_bar {
    position: relative;
    z-index: 10;
    transition: height 500ms;
}

.tip_arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1vw 1vw 0 1vw;
    border-color: #EEEEEE transparent transparent transparent;
    position: absolute;
    bottom: -0.6vw;
    left: 0.1vw;
}

.tip_region {
    width: 7.6vw;
}

.tip_percent {
    margin-top: 0.3vw;
    font-size: 1.5vw;
    font-family: WorkSans-Bold;
}

.tip_circle {
    width: 1.2vw;
    height: 1.2vw;
    background: #0F5974;
    border-radius: 1.2vw;
    position: absolute;
    top: 0.8vw;
    right: 0.8vw;
    box-shadow: 0 0 0.5vw 0 rgba(15,89,116,1);
}

.arrow_icon {
    background: url(../imgs/arrow.svg) no-repeat;
    width: 1vw;
    height: 1.3vw;
    background-size: 1.4vw;
    background-position: center;
    cursor: pointer;
}

.search_bar .arrow_icon {
    position: absolute;
    right: 0;
    top: 2.3vw;
    z-index: -5;
}

.search_bar-input {
    margin: auto;
    width: 100%;
    height: 1.2vw;
    font-family: WorkSans-Bold;
    font-size: 0.9vw;
    background: none;
    color: inherit;
    border: none;
    border-bottom: 1px solid white;
    padding-bottom: 0.4vw;
    outline-style: none;
    box-shadow: none;
    cursor: pointer;
    box-sizing: border-box;
}

.search_bar-input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: white;
}

.search_bar-input::-moz-placeholder {
    /* Firefox 19+ */
    color: white;
}

.search_bar-input:-ms-input-placeholder {
    /* IE 10+ */
    color: white;
}

.search_bar-input:-moz-placeholder {
    /* Firefox 18- */
    color: white;
}

.search_bar .head {
    font-size: 0.8vw;
    margin: 0.6vw 0 0.5vw 0vw;
}

.map-section .search_icon {
    display: inline-block;
}

.search_box {
    width: 45vw;
    height: 4vw;
}

.search_bar {
    display: inline-flex;
    align-items: flex-start;
    background: #0F5974;
    width: 4vw;
    border-radius: 2vw;
    color: white;
    overflow: hidden;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.50);
}

.search_icon {
    flex: none;
    width: 4vw;
    height: 4vw;
    background-image: url(../imgs/search_icon.svg);
    background-size: 2.9vw;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.search_content {
    flex: 1 0 auto;
    margin-right: 2vw;
    padding-left: .5vw;
    position: relative;
}

.search_list {
    max-height: 10vh;
    font-size: .9vw;
    list-style: none;
    margin: 0;
    margin-top: .2vw;
    padding: 0;
    position: relative;
    overflow-y: auto;
    transition: 300ms;
}

.search_list::-webkit-scrollbar-track {
    background: none;
}

.search_list::-webkit-scrollbar {
    width: 0.3vw;
    background: none;
}

.search_list::-webkit-scrollbar-thumb {
    background-color: white;
    border-radius: 1vw;
}

.search_list-item:hover, .search_list-item.is-highlighted {
    font-family: 'WorkSans-Bold';
}

.search_list-item:first-child {
    padding-top: .25em;
}

.search_list-item:last-child {
    padding-bottom: .25em;
}

.search_list-item-error {
    opacity: 0.5;
}

.view_select {
    position: absolute;
    right: 5vw;
    top: 3vw;
    font-size: 0.9vw;
}

.view_select-heading {
    /* font-size: 1vw; */
    letter-spacing: 0.2em;
    margin-bottom: .4vw;
}

.view_select-buttons {
    display: flex;
}

.view_select-button {
    color: black;
    background: white;
    border: 1px solid #115974;
    border-radius: 50vw;
    font: inherit;
    padding: .5em 0.75em;
    width: 12vw;
    outline: none;
    position: relative;
}

.view_select-button:not(:last-child) {
    margin-right: 1em;
}

.view_select-button.is-active {
    color: white;
    background: #115974;
}

.view_select-button:hover:before, .view_select-button:hover:after {
    visibility: visible;
    transition: visibility 0ms 1s;
    z-index: 10;
}

.view_select-button:before {
    content: '';
    display: block;
    border: .5em solid transparent;
    border-bottom-color: #104D64;
    position: absolute;
    top: 100%;
    right: .5em;
    visibility: hidden;
}

.view_select-button:after {
    content: attr(data-title);
    display: block;
    border: .5em solid transparent;
    background-color: #104D64;
    color: white;
    font-family: 'WorkSans';
    padding: .5em;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: 1em;
    visibility: hidden;
}

#map_selector {
    position: absolute;
    right: 5vw;
    top: 4vw;
}

#map_selector div {
    float: left;
    margin-left: 1vw;
    cursor: pointer;
}

#map_selector div:hover {
    opacity: 0.8;
}

#map_selector .selected {
    background-color: #2198C4 !important;
    cursor: default;
}

#map_selector .selected:hover {
    opacity: 1;
}

#water_card {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 24vh;
    z-index: 20;
    width: 29.5vw;
    border-radius: 0.1vw;
    display: none;
    font-size: 0.95vw;
    perspective: 600px;
}

#water_card.is-rotated .water_card-content {
    transform: translateX(-100%) rotateY(-180deg);
}

.water_card-content {
    box-shadow: 0 0.1vw 0.8vw 0 rgba(0, 0, 0, 0.3);
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 1s;
}

.water_card-content strong {
    font-family: 'WorkSans-Bold';
}

#water_card .info, #water_card .close {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
}

#water_card .close {
    position: absolute;
    font-family: WorkSans-Bold;
    color: #0F5974;
    width: 1vw;
    height: 1vw;
    font-size: 0.8vw;
    top: 0.5vw;
    left: 1.5vw;
    z-index: 10;
    margin-left: -.5vw;
    text-align: center;
}

#water_card .additionalInfo {
    display: none;
    left: 1vw;
    position: absolute;
}

#water_card .additionalInfo span {
    font-size: 0.9vw;
}

#water_card .additionalInfo div {
    font-size: 2vw;
    font-family: WorkSans-Bold;
}

#water_card .additionalInfo.ai2 div {
    font-family: WorkSans-Medium;
}

#water_card .additionalInfo.ai1 {
    top: 13vw;
}

#water_card .additionalInfo.ai2 {
    top: 18vw;
}

#water_card .info {
    position: absolute;
    right: 1vw;
    top: 0.8vw;
    z-index: 10;
    font-family: Arial;
    width: 1.8vw;
    height: 1.8vw;
    font-weight: 700;
    color: white;
    background: #0F5974;
    border-radius: 2vw;
    text-indent: 0.8vw;
    line-height: 1.9vw;
    cursor: pointer;
    box-shadow: 0 0 0.3vw black;
    transition: background 100ms;
    user-select: none;
}

#water_card .date {
    padding: .5em .8em .3em;
    position: absolute;
    top: .8vw;
    right: 3.6vw;
    font-family: 'WorkSans-Bold';
    line-height: 1;
    background: #0F5974;
    color: white;

}

#water_card .info.active {
    background: #2198C4;
}

#water_card .front, #water_card .back {
    padding: 2vw 3vw 1vw;
    backface-visibility: hidden;
    background: #EEEEEE;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
}

#water_card .mobile-heading, #water_card .country_select {
    display: none;
}

#water_card .title {
    margin-bottom: 1em;
    font-size: 0.8vw;
    color: #0f5974;
}

#water_card .country {
    font-size: 3vw;
    font-family: "WorkSans-Bold";
    line-height: 1;
    margin-bottom: .25em;
}

#water_card .driest-month {
    font-family: "WorkSans-Bold";
    font-size: 0.8vw;
    margin-bottom: 1em;
}

#water_card .scarcity {
    font-size: 2.7vw;
    font-family: WorkSans-Bold;
}

#water_card .txt {
    font-size: 0.8vw;
}

#water_card .txt2 {
    position: absolute;
    top: -3.3vw;
    left: 2vw;
    font-size: 0.9vw;
}

#water_card .graph {
}

#water_graph_container #water_dep_graph {
    display: none;
}

#water_graph_container {
    position: relative;
    margin-bottom: 1em;
    font-size: 1vw;
}

#water_graph_container .grid {
    background-image: linear-gradient(to right, #C1D0D5 calc(100% - 1px), transparent calc(100% - 1px));
    /* height: 1.5vw; */
    height: 1.5em;
    background-size: calc(100% / 12);
    position: relative;
    bottom: 0;
    margin-right: -1px;
}

#water_graph_container .txt {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    left: 19.8%;
    font-size: 80%;
    margin-bottom: .5em;
    color: #fff;
    bottom: 0;
    margin-left: calc(.5 * 1 / 12 * 100% - .8em);
}

#water_graph_container .txt:after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: .3em;
    border: .5em solid transparent;
    border-top-color: #0F5974;
}

#water_graph_container .label {
    display: inline-block;
    background-color: #0F5974;
    padding: .2em .6em;
}

#water_graph_container .lineX {
    height: 1px;
    background-color: #000;
}

#water_graph_container .legendX {
    font-size: 85%;
    margin-top: 0.5vw;
    display: flex;
    justify-content: space-between;
}

.stress {
    margin-bottom: 2vw;
}

.stress-heading {
    margin-bottom: .2em;
    font-family: "WorkSans-Bold";
}

.stress-description {
    margin-bottom: 1em;
}

.stress-row {
    display: flex;
}

.stress-row:not(:last-child) {
    margin-bottom: .5em;
}

.stress-row:nth-child(1) .stress-label {
    color: #E6C31D;
}

.stress-row:nth-child(2) .stress-label {
    color: #C76408;
}

.stress-row:nth-child(3) .stress-label {
    color: #94000B;
}

.stress-label {
    width: auto;
    font-family: "WorkSans-Bold";
    margin-right: 1em;
}

.stress-data {
    flex: 1 0 auto;
    display: flex;
    justify-content: flex-end;
}

.stress-data-label {
    flex: 0 1 6vw;
    margin-left: .5em;
}

.percentage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1vw;
}

.percentage-value {
    font-family: "WorkSans-Bold";
    font-size: 2vw;
}

.population {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.population-value {
    font-family: "WorkSans-Bold";
    font-size: 2vw;
}

#water_card .back {
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

#water_card .back .info {
    background-color: #2098C4;
}

#water_card .back .title {
    margin-bottom: 2.5vw;
}

#water_card .back-heading {
    margin-bottom: .75em;
    font-family: "WorkSans-Bold";
    font-size: 2.5vw;
    line-height: 1.05;
}

#water_card .back-description {
    margin-bottom: 1.5em;
}

#water_card .year_select {
    display: none;
}

.button {
    display: inline-block;
    background-color: #0E5974;
    color: #fff;
    padding: .75em 2.5em;
    text-decoration: none;
}

.dep_graph_line {
    fill: none;
    stroke: steelblue;
    stroke-width: 0.2vw;
}

.dep_graph_line2 {
    fill: none;
    stroke: steelblue;
    stroke-width: 1px;
}

.bubble_map_icon {
    width: 2vw;
    height: 2vw;
    background: #0f5974;
    border-radius: 2vw;
    background-image: url(../imgs/bubble_map_icon.svg);
    background-size: 1vw;
    background-repeat: no-repeat;
    background-position: center;
}

.grid_map_icon {
    width: 2vw;
    height: 2vw;
    background: #0f5974;
    border-radius: 2vw;
    background-image: url(../imgs/grid_map_icon.svg);
    background-size: 2vw;
    background-repeat: no-repeat;
    background-position: center;
}

#map_container {
    width: 85%;
    /* height: 74vh; */
    margin-top: 10vw;
    margin-left: 7.5%;
    margin-bottom: 8vw;
    background: white;
    /* bottom: 20vh; */
    position: relative;
    top: 0;
    overflow: hidden;
}

.map-hint {
    position: absolute;
    bottom: 100%;
    left: -1vw;
    z-index: 10;
    pointer-events: none;
}

.map-hint-container {
    min-width: 5vw;
    padding: .8vw .75vw;
    background: #EEEEEE;
    box-shadow: 0 0.1vw 0.8vw 0 rgba(0, 0, 0, 0.3);
}

.map-hint-tip {
    display: block;
    width: 0;
    margin-bottom: -.5vw;
    margin-left: .5vw;
    border: .5vw solid transparent;
    border-top-color: #EEEEEE;
}

.map-hint.is-hidden {
    display: none;
}

.map-hint [grid-map] {
    display: none;
}

.map-hint[grid-map="water_avability_per_grid"] [grid-map="water_avability_per_grid"] {
    display: block;
}

.map-hint[grid-map="water_avability_in_driest_month"] [grid-map="water_avability_in_driest_month"] {
    display: block;
}

.map-hint[grid-map="population"] [grid-map="population"] {
    display: block;
}

.map-hint-heading {
    margin-bottom: .75em;
    font-family: 'WorkSans-Bold';
    font-size: 80%;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.map-hint .stress-row {
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0;
    font-size: 80%;
}

.map-hint-label {
    margin-right: 1em;
    font-family: 'WorkSans';
}

.map-hint-score {
    font-family: 'WorkSans-Bold';
}

#map_legend {
    position: absolute;
    bottom: 2vw;
    left: 6vw;
}

#map_legend.theme-population > *:not(.map-legend-population) {
    display: none;
}

#map_legend:not(.theme-population) .map-legend-population {
    display: none;
}

#map_legend .small_description {
    margin-bottom: 0.8vw;
}

.small_description {
    font-family: WorkSans;
    font-size: 0.8vw;
    letter-spacing: 0.2vw;
    text-transform: uppercase;
}

.map_bullet {
    vertical-align: top;
    margin-right: 1vw;
    font-family: "WorkSans-Semibold";
    font-size: 1vw;
    float: left;
}

.map_bullet:before {
    content: '';
    display: inline-block;
    width: 1vw;
    height: 1vw;
    border-radius: 1vw;
    background-color: #69b6d5;
    margin: 0 0.4vw -0.18vw 0;
}

.red:before {
    background-color: #94000F !important;
}

.orange:before {
    background-color: #C76407 !important;
}

.yellow:before {
    background-color: #E6C31D !important;
}

.green:before {
    background-color: #169D71 !important;
}

.blue:before {
    background-color: #e9e9e9 !important;
}

.map-legend-population .map_bullet:nth-child(1):before {
    background-color: #eeeeee;
}

.map-legend-population .map_bullet:nth-child(2):before {
    background-color: #7BA4B3;
}

.map-legend-population .map_bullet:nth-child(3):before {
    background-color: #337289;
}

.map-legend-population .map_bullet:nth-child(4):before {
    background-color: #0E5974;
}

.map-legend-population .map_bullet:nth-child(5):before {
    background-color: #074054;
}

.year_select {
    min-width: 18vw;
    font-size: .9vw;
}

.map-section .year_select {
    position: absolute;
    right: 5vw;
    bottom: 2vw;
}

.year_select-heading {
    letter-spacing: 0.2em;
    margin-bottom: .4em;
    text-transform: uppercase;
}

.year_select-buttons {
    display: flex;
}

.year_select-button {
    color: black;
    background: white;
    border: 1px solid #115974;
    border-radius: 50vw;
    font: inherit;
    padding: .25em 0.75em;
    min-width: 5vw;
    outline: none;
}

.year_select-button:not(:last-child) {
    margin-right: 1em;
}

.year_select-button.is-active {
    color: white;
    background: #115974;
}


@media screen and (max-aspect-ratio: 1/1), screen and (max-width: 800px) {
    body.has-scroll-locked {
        overflow-y: hidden;
    }

    [data-vh] {
      flex: none;
    }

    strong {
        font-family: 'WorkSans-Bold'
    }

    .main-section {
        min-height: 0;
    }

    .main-section__content {
        height: auto;
        padding-top: 20.5vw;
    }

    .main-section__content .year_select {
        display: block;
        font-size: 3.6vw;
    }

    .main-section__content .year_select-trigger {
        color: white;
        background: #105974;
        padding: 3vw 7vw;
    }

    .main-section__content .year_select-active {
        font-family: 'WorkSans-Bold';
        font-size: 150%;
    }

    .main-section__content .year_select-datepicker {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 200%;
        line-height: 1;
        background: rgba(255,255,255,.75);
        color: black;
        opacity: 0;
        visibility: hidden;
        transition: 300ms;
        transition-property: opacity, visibility;
    }

    .main-section__content .year_select-datepicker-container {
        position: relative;
    }

    .main-section__content .year_select-datepicker-container:before, .main-section__content .year_select-datepicker-container:after {
        content: '';
        display: block;
        height: calc((33.3vh - 1.25em) / 2);
        position: absolute;
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, .75);
        pointer-events: none;
        z-index: 10;
    }

    .main-section__content .year_select-datepicker-container:before {
        top: -1px;
        border-bottom: 1px solid #ddd;
        background-image: linear-gradient(to bottom, white, transparent);
    }

    .main-section__content .year_select-datepicker-container:after {
        bottom: -1px;
        border-top: 1px solid #ddd;
        background-image: linear-gradient(to top, white, transparent);
    }

    .main-section__content .year_select-list {
        height: 33.3vh;
        padding: calc((33.3vh - 1.25em) / 2) 7vw;
        overflow: auto;
        margin: 0;
        background: white;
        list-style: none;
        box-shadow: 0 0 10px rgba(0,0,0,.2);
        perspective: 20em;
    }

    .main-section__content .year_select-list-item {
        padding: .125em 0;
        -webkit-transform-origin-z: 20px;
    }

    .main-section__content .year_select-list-item.is-active {
        font-family: 'WorkSans-Bold';
    }

    .main-section__content .year_select-datepicker.is-visible {
        opacity: 1;
        visibility: visible;
    }

    #background_section {
        top: 0;
        left: 0;
        right: 0;
        bottom: 19vw;
    }

    #globe_section {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-image: url('../imgs/globe-overlay.png');
        background-size: 76vw;
        background-position: center;
        background-repeat: no-repeat;
        text-align: left;
    }

    #globe {
      display: none;
    }

    #globe_section .animation {
        display: none;
    }

    #globe_section .counter {
        font-size: 12vw;
        position: static;
        line-height: 1;
    }

    #globe_section .head_txt {
        position: static;
        text-align: left;
        font-size: 3.5vw;
    }

    #slider_1, .share {
        display: none;
    }

    #water_section {
        display: none;
    }

    .people-section {
        padding: 10vw 7vw;
    }

    .people-section .head_txt {
        width: auto;
        margin: 0;
        padding: 0;
        font-size: 3.5vw;
        margin-bottom: 5vw;
    }

    .content_row {
        display: block;
        margin: 0;
        padding: 0;
    }

    .content_row .text {
        margin: 0;
        padding: 0;
        width: auto;
        display: block;
    }

    .content_row .image {
        display: none;
        width: auto;
        max-width: 100%;
        height: auto;
    }

    .content_row .image--mobile {
        display: block;
        margin: 0 auto 8vw;
    }

    .content_row .big_headline_txt {
        font-size: 4.2vw;
    }

    .content_row .description {
        margin-bottom: 7vw;
        font-size: 3.6vw;
    }

    .map-section {
        min-height: 0;
        order: 10;
    }

    .map-section .year_select {
        display: none;
    }

    .search_box {
        display: none;
    }

    .view_select {
        display: none;
    }

    #water_card {
        position: static;
        display: block;
        width: auto;
        margin-bottom: 4vw;
    }

    .water_card-content {
        box-shadow: none;
        width: 100%;
    }

    #water_graph_container {
        font-size: 4vw;
    }

    #water_card .close, #water_card .info, #water_card .back, #water_card .title {
        display: none;
    }

    #water_card .front {
        padding: 7vw;
    }

    #water_card .mobile-heading, #water_card .country_select {
        display: block;
    }

    #water_card .mobile-heading {
        margin-bottom: 1em;
        font-size: 4.5vw;
        font-family: 'WorkSans-medium';
        text-transform: uppercase;
        letter-spacing: .2em;
    }

    #water_card .country_select {
        margin-bottom: 6vw;
        padding: 2vw 2vw 1vw;
        font-size: 3.2vw;
        background: white;
        position: relative;
    }

    .country_select-heading {
        margin-bottom: .25em;
        text-transform: uppercase;
    }

    .country_select-active {
        width: 100%;
        padding: 0;
        border: 0;
        outline: 0;
        font-family: 'WorkSans-Bold';
        font-size: 4.2vw;
    }

    .country_select-list {
        margin: 0;
        padding: 0 2vw 1vw;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: white;
        font-size: 4.2vw;
        list-style: none;
        transition: 150ms;
        transition-property: opacity, visibility;
        max-height: 9em;
        overflow-y: auto;
    }

    .country_select-list.is-invisible {
        opacity: 0;
        visibility: hidden;
    }

    .country_select-list-item:not(:last-child) {
        margin-bottom: .25em;
    }

    #water_card .date {
        display: none;
    }

    #water_card .country {
        font-size: 11vw
    }

    #water_card .driest-month {
        font-size: 3.6vw;
    }

    .stress {
        font-size: 3.6vw;
        margin-bottom: 9vw;
    }

    .stress-heading {
        margin-bottom: .5em;
    }

    .stress-description {
        display: none;
    }

    .stress-label {
        width: auto;
    }

    .percentage {
        font-size: 3.6vw;
    }

    .percentage-value {
        font-size: 200%;
    }

    .population {
        font-size: 3.6vw;
    }

    .population-value {
        font-size: 200%;
    }

    #water_card .year_select {
        display: block;
        min-width: 0;
        position: static;
        margin-bottom: 6vw;
        font-size: 3.6vw;
    }

    #water_card .year_select-button {
        padding: .3em 1.5em
    }

    #map_container {
        display: none;
    }

    #map_container .year_select {
        display: none;
    }

    #map_legend {
        display: none;
    }
    #globe_section {
      height: 78vh;
    }
    #globe_section .counter {
      margin-top: 5.5vh;
    }
    #globe_section .head_txt {
      margin-top: -0.5vh;
    }
}