#svg-filter {
    height: 0;
    left: -9999em;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 0;
}
header {
	height: 80vh;
	min-height: 700px;
	width: 100%;
	background: none;
	transition: height .25s;
    /*position: relative;*/
}
#header-background {
	height: 80vh;
	min-height: 700px;
	width: 100%;
	background: center no-repeat;
	background-size: cover;
    filter: url(#duotone);
    position: absolute;
    top: 0; left: 0;
    z-index: -1;
    transition: height .25s;
}
#header-gradient {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(0,0,0,0) 60%, rgba(0,0,0,.6));
	z-index: -1;
}
#photo-attr {
	position: absolute;
    right: 12px;
	transform: rotate(-90deg);
    transform-origin: right;
	font-size: 11px;
	font-style: italic;
	opacity: .3;
	transition: opacity .25s;
	cursor: help;
}
#photo-attr:hover { opacity: .75; }
#head {
	width: 100%;
	max-width: 350px;
	margin: 0 auto 50px;
	padding-top: 35px;
	text-align: center;
	text-transform: uppercase;
}
#head #locale {
	color: white;
	font-size: 20px;
	font-weight: bold;
	list-style: none;
	display: flex;
	justify-content: center;
}
#head #locale li { margin: 0 5px; }
#head #locale li.active { opacity: .4; }
#head a {
	display: block;
	color: white;
	text-decoration: none;
	margin: 30px auto;
	font-size: 28px;
	font-weight: bold;
	line-height: 36px;
}
#head a:hover { text-decoration: underline; }
#head #locale a {
	display: inline-box;
	font-size: 20px;
	line-height: 36px;
	margin: -4px 0 0;
}
#head hr {
	margin: 0 auto;
	width: 80px;
	border: 1px solid white;
}
#cities {
	display: flex;
	justify-content: space-between;
	padding: 0 90px;
}
#cities .city-name {
	color: white;
	text-decoration: none;
}
#city-opened {
	width: 100%;
	max-width: 500px;
}
#city-opened .city-name {
	font-size: 60px;
	margin-bottom: 20px;
	font-weight: bold;
	text-align: center; 
}
#city-opened svg .arcs { opacity: .4; }
#city-opened svg path.arc {
	fill: white;
	stroke: white;
}
#city-opened svg circle {
	fill: none;
	stroke: white;
}
#city-opened svg .ref-line { fill: white; opacity: 0.6; }
#city-opened .city-rate {
	fill: white;
	text-anchor: middle;
	font-size: 32px;
	font-weight: bold;
}
#city-opened .city-points {
	fill: white;
	text-anchor: middle;
	font-size: 24px;
}

#cities .city-neighbour { display: flex; }
#cities .city-neighbour .city-name:hover { text-decoration: underline; }
#cities .city-neighbour.next { text-align: right; }
#cities .city-neighbour .arrow {
	font-size: 20px;
	margin-top: 5px;
	min-width: 20px;
}
#cities .city-neighbour .city-info { width: 180px; } 
#cities .city-neighbour.previous .arrow { margin-right: 7px; }
#cities .city-neighbour.next .arrow { margin-left: 7px; }
#cities .city-neighbour .city-name { font-size: 28px; }
#cities .city-neighbour .city-rate {
	font-size: 20px;
	font-style: italic;
}
#details {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	background: #fff;
	display: flex;
	justify-content: space-between;
}
#details .category {
	width: 100%;
	max-width: 200px;
}
#details .category-head {
	margin: -80px 0 15px;
	text-align: center;
}
#details .category-head svg.category-icon {
	width: 70px;
	height: 70px;
}
#details .category-head .category-mean {
	color: white;
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 5px
}
#details .demography .category-head svg.category-icon { fill: var(--demography); }
#details .economy .category-head svg.category-icon { fill: var(--economy); }
#details .life .category-head svg.category-icon { fill: var(--life); }
#details .management .category-head svg.category-icon { fill: var(--management); }
#details .tourism .category-head svg.category-icon { fill: var(--tourism); }
#details .category-head svg.category-icon circle.back { fill: #fff; }
#details .category-head .category-name {
	font-size: 18px;
	font-weight: bold;
}
#details .category-body .indicator { margin-bottom: 20px; }
#details .category-body .indicator .indicator-name { font-size: 14px; margin-bottom: 2px; }
#details .category-body .indicator .indicator-note { font-size: 12px; line-height: 14px; font-style: italic; color: #999; margin-top: 3px; }

#details .indicator-points { display: flex; align-items: center; }
#details .indicator-points .value { font-size: 14px; font-weight: bold; width: 35px; text-align: right; margin-bottom: 2px; }
#details .demography .indicator-points .value { color: var(--demography); }
#details .economy .indicator-points .value { color: var(--economy); }
#details .life .indicator-points .value { color: var(--life); }
#details .management .indicator-points .value { color: var(--management); }
#details .tourism .indicator-points .value { color: var(--tourism); }

#details .indicator-points .bar { position: relative; width: 100%; height: 10px; }
#details .indicator-points .bar .reference { position: absolute; top: 2px; left: 0; width: 100%; height: 6px; background: #ccc; }
#details .indicator-points .bar .progress { position: absolute; top: 0; left: 0; width: 100%; height: 10px; }
#details .demography .indicator-points .bar .progress { background: var(--demography); }
#details .economy .indicator-points .bar .progress { background: var(--economy); }
#details .life .indicator-points .bar .progress { background: var(--life); }
#details .management .indicator-points .bar .progress { background: var(--management); }
#details .tourism .indicator-points .bar .progress { background: var(--tourism); }

#home-button {
	display: block;
	width: 100%;
	max-width: 350px;
	margin: 90px auto 30px;
	padding: 15px 35px;
	border-radius: 50px;
	font-family: 'Fira Sans', sans-serif;
	font-size: 28px;
	text-transform: uppercase;
	text-align: center;
	color: white;
	background: var(--main);
	transition: all .5s;
	cursor: pointer;
	text-decoration: none;
}
#home-button:hover { background: var(--main-dark); }
#share { margin-bottom: 0; }

@media screen and (max-width: 1400px) {
	#cities { padding: 0 25px; transition: padding .25s; }
}

@media screen and (max-width: 1280px) {
	header { padding-top: 0; margin-bottom: 50px; }
	header, #header-background { height: auto; padding-bottom: 50px; min-height: 0; }
	#details { 
		display: block;
		max-width: 90%;
	}
	#details .category { 
		max-width: 100%; 
		display: flex;
		margin-bottom: 30px;
	}
	#details .category-head {
		margin-top: 0;
		display: flex;
	}
	#details .category-body {
		width: 100%;
	}
	#details .category-head .category-mean { width: 70px; text-align: right; }
	#details .demography .category-head .category-mean { color: var(--demography); }
	#details .economy .category-head .category-mean { color: var(--economy); }
	#details .life .category-head .category-mean { color: var(--life); }
	#details .management .category-head .category-mean { color: var(--management); }
	#details .tourism .category-head .category-mean { color: var(--tourism); }
	#details .category-head .category-icon { width: 70px; margin-top: -12px; }
	#details .category-head .category-name { width: 200px; text-align: left; }
}

@media screen and (max-width: 1220px) { 
	header { padding-top: 0; margin-bottom: 50px; }
}

@media screen and (max-width: 960px) { 
	#cities { flex-direction: column; }
	#city-opened { margin: 0 auto 30px; }
	#cities .flexbox {
		max-width: 100%;
		justify-content: space-between;
	}
	#details .category { flex-wrap: wrap; } 
	#details .category .category-head { width: 100%; justify-content: space-between; } 
	#details .category .category-name-group { display: flex; margin-left: -15px; } 
}

@media screen and (max-width: 660px) {
	#cities .flexbox { width: 100%; flex-direction: row; }
	#cities .city-neighbour .city-info { width: 100px; }
	#cities .city-neighbour .city-name { font-size: 22px; }
	#cities .city-neighbour .city-rate { font-size: 18px; }
}

@media screen and (max-width: 460px) { 
	#details .category-head { width: 100%; display: block; text-align: center; } 
	#details .category .category-name-group { margin-left: 0; width: 100%; display: block; text-align: center; } 
	#details .category-head .category-mean { width: 100%; text-align: center; }
	#details .category-head .category-name { margin: -10px auto 5px; text-align: center; }
	#home-button { padding: 15px; width: auto; margin: 90px 25px 30px; }
	#cities .city-neighbour .arrow { display: none; }
	#head a {
		font-size: 20px;
		line-height: 26px;
		padding: 0 15px;
	}
	#city-opened { margin-bottom: 50px; }
	#city-opened .city-name { font-size: 42px; }
	#head #locale, #head #locale a { font-size: 16px; line-height: 24px; margin: 0; padding: 0; }
	#cities .city-neighbour .city-name { font-size: 18px; }
	#cities .city-neighbour .city-rate { font-size: 14px; }
}