/* ============================================================== */
.cities-list { background: linear-gradient(to top, #0001, transparent 5rem), var(--color-light-gray); color: black; position: fixed; left:0; top:0; width: 100%; z-index: 100; display: none; opacity: 0;  box-shadow: var(--shadow); font-weight: normal; }
.cities-list-inner { position: relative; max-height: 60rem; overflow: auto; padding: 4rem; }
.cities-list .container { max-width: var(--page-width); margin:0 auto;  position: relative; }
.cities-list .cities-container {  width: 100%; text-align: left; }
.cities-list .city { display: inline-block; clear: both; border-radius: 3px; color: var(--color-blue); background: white; padding: 0.5rem 1rem; transition: .3s; }
.cities-list .city:hover { background: var(--color-blue); color: white; text-decoration: none; }
.cities-list .city.-active { border-left:5px solid white; font-weight: bold; padding-left: 10px;  background: var(--color-blue); text-decoration: none; color: white; }
.cities-list a { display: inline-block; padding: 0.3rem 0.5rem; font-size: 1.6rem; color: var(--color-blue);}
.cities-list a:hover { color: black; }
.cities-list h2 { text-align: left; color: black; font-size: 3rem; margin-bottom: 3rem; font-weight: normal; }
.cities-list .cities-group .cities { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cities-list .cities-group .cities.-important { margin-bottom: 2rem; }
.cities-list .cities-group:not(:last-child) { margin-bottom: 2rem; border-bottom: 1px dashed #775132a3; padding-bottom: 2rem; }
.cities-list .cities-heading { padding: 0.5rem 1rem; margin-bottom: 1rem; color: white; position: relative; overflow: hidden; display: inline-block; width: auto; background: var(--color-darken-green); color: white;  border-radius: 1rem; }
.cities-list .cities-heading.-secondary{ background: white; color: var(--color-blue);  padding-left: 2rem;}
.cities-list .cities-heading.-secondary::after { content:''; display: block; width: 1rem; top:0; bottom:0; left:0; background: var(--color-blue); position: absolute;  }
.cities-list .close-button { position: absolute; top:2rem; right:2rem; width: 2rem; height: 2rem;	-webkit-mask: url(../img/icons/close.svg) center/contain no-repeat; mask: url(../img/icons/close.svg) center/contain no-repeat; background: black; cursor: pointer; }
.cities-list .close-button:hover { background: var(--color-red); }

#cities-list { font-size: 1.5rem; }
#cities-list a { display: inline-block; padding: 0.5rem; }
#cities-list a:hover { background: var(--color-red); color: white; }