@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,800|Open+Sans:400,400i,700&subset=cyrillic');

* { padding: 0; margin: 0; }
:root {
	--blue: #067ff4;
	--blue-dark: #025eb7;
	--demography: #f09e23;
	--demography-dark: #d35e07;
	--economy: #58c600;
	--economy-dark: #428e00;
	--life: #fc003f;
	--life-dark: #c40038;
	--management: #0022ff;
	--management-dark: #0022b4;
	--tourism: #6f3ccc;
	--tourism-dark: #4111aa;
	--roofs: #4d4d4d;
	--roofs-dark: #333;
}

body { 
	font-family: 'Open Sans', sans-serif; 
	background: white;
	min-width: 1200px;
}

.divider {clear: both;}
.hidden { display: none; visibility: hidden; }
.line-divider { display: block; }
.relative-block { position: relative; top: 0; }
.flexbox { display: flex; }
.round { border-radius: 100%; }
.center {  margin-left: auto; margin-right: auto; }

.w1200 { width: 100%; max-width: 1200px; }
.w895 { width: 100%; max-width: 895px; }
.w588 { width: 100%; max-width: 588px; }
.w380 { width: 100%; max-width: 380px; }

.bold { font-weight: bold; }
p.text-large { font-size: 24px; line-height: 36px; }
p.text-base { font-size: 18px; line-height: 28px; }
p.note { font-size: 18px; line-height: 28px; color: #808080; }

a { color: var(--blue); }
a:hover { color: var(--life); }

hr { width: 250px; size: 1px; margin-bottom: 15px; }

h1, h2, h3, h4 { font-family: 'Fira Sans', sans-serif; }
h1 {
    font-size: 70px;
    line-height: 80px;
    letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 100px 0 50px;
}
h2 {
    font-size: 60px;
    line-height: 72px;
    margin-bottom: 40px;
    color: var(--blue);
    text-transform: uppercase;
}
h3 {
    font-size: 40px;
    line-height: 48px;
    margin-bottom: 20px;
}
h4 {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 20px;
}
p {
  font-size: 14pt;
  line-height: 24pt;
  margin-bottom: 20px;
}

#chart-tooltip {
	font-size: 14px;
	font-weight: normal;
	line-height: 18px;
	max-width: 250px;
	pointer-events: none; 
	background: black;
	color: white;
	position: absolute;
	top: 30px; 
	left: 30px;
	padding: 10px 15px 15px;
	border-radius: 3px;
	display: none;
}
#chart-tooltip.top::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	border-width: 6px;
	border-style: solid;
	border-color:  #000 transparent transparent transparent;
}

#chart-tooltip.right::after {
	content: "";
	position: absolute;
	top: 12px;
	left: -12px;
	margin-top: 0;
	border-width: 6px;
	border-style: solid;
	border-color:  transparent #000 transparent transparent;
}


/* HEADER */
#cni-logo {
	position: absolute;
	top: 85px;
	left: 60px;
	max-width: 130px;
	z-index: 9999;
}

#locale-main {
	position: absolute;
	top: 190px;
	left: 60px;
	list-style: none;
	padding: 0;
	text-transform: uppercase;
	color: white; 
	font-weight: bold;
	font-size: 24px;
	line-height: 28px;
}
#locale-main li { margin: 0; }
#locale-main li.active { opacity: .4; }
#locale-main li a {
	color: white;
	text-decoration: none;
}
#locale-main li a:hover { opacity: .8; }
header {
	margin: 0;
	color: white;
	background: var(--blue);
}
header .flexbox { justify-content: space-between; align-items: center; }
#title-text { max-width: 486px; margin-bottom: 120px; }
#title-text p.text-large { margin-bottom: 25px; line-height: 32px; }
#title-text p.text-basic { line-height: 26px; }

#title-image { margin-right: 40px; }
#title-image .image {
	width: 540px;
	height: 540px;
}
#horad-iso .roofs-light, #horad-iso .roofs-dark { transition: fill .25s; }
#horad-iso circle.back { fill: #fff; opacity: .25; }
#horad-iso .st1{fill:#FFFFFF;}
#horad-iso .concr-light{fill:#e6f2f2;}
#horad-iso .concr-dark{fill:#becccc;}
#horad-iso .concr-darker{fill:#829999;}
#horad-iso .roofs-light{fill: var(--roofs);}
#horad-iso .roofs-dark{fill: var(--roofs-dark);}
#horad-iso .green-grass{fill:#8CC63F;}
#horad-iso .green-trees-dark{fill:#006837;}
#horad-iso .green-trees-light{fill:#009245;}
#horad-iso .windows-dark{fill:#0071BC;}
#horad-iso .windows-light{fill:#29ABE2;}
#horad-iso .st14{fill:#ED1C24;}
#horad-iso .st15{fill:#C1272D;}
#horad-iso .st16{fill:#F15A24;}
#horad-iso .st17{fill:#FF9700;}
#horad-iso .st18{fill:#FBB03B;}
#horad-iso .st19{fill:#39B54A;}
#ti-dimentions { 
	justify-content: center;
	flex-wrap: wrap;
	max-width: 540px; 
	margin: -50px auto 60px;
}
#ti-dimentions li {
	list-style: none;
	padding: 0;
	width: auto;
	display: flex;
	margin: 0 15px 20px;
	cursor: pointer;
}
#ti-dimentions li p { 
	font-size: 16px;
	line-height: 20px;
	max-width: 110px;
	margin: 0;
}
#ti-dimentions li#bt-demography p { max-width: 120px; }
#ti-dimentions li#bt-economy p { max-width: 80px; }
#ti-dimentions li#bt-life p { max-width: 60px; }
#ti-dimentions svg {
	width: 40px;
	height: 40px;
	margin-right: 10px;
}
#ti-dimentions #bt-demography svg { fill: var(--demography); }
#ti-dimentions #bt-economy svg { fill: var(--economy); }
#ti-dimentions #bt-life svg { fill: var(--life); }
#ti-dimentions #bt-management svg { fill: var(--management); }
#ti-dimentions #bt-tourism svg { fill: var(--tourism); }
#ti-dimentions svg circle.back { fill: #fff; }
#ti-dimentions svg path, #ti-dimentions svg circle { transition: fill .25s; }


/* NAVIGATION */
nav {
	height: 80px;
	background: white;
	border-bottom: 1px solid #ccc;
	justify-content: center;
	align-items: center;
}
nav div {
	display: inline-block;
	margin-right: 45px;
	font-size: 18px;
	cursor: pointer;
	line-height: 14px;
}
nav div:last-child { margin-right: 0; }
nav div.active { color: var(--blue); }
nav.fixed {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
}
nav.default {
	position: absolute;
	width: 100%;
}


/* RATING */
#rating { 
	margin-top: 100px;
	margin-bottom: 50px; 
	padding-top: 30px; 
	align-items: stretch;
	justify-content: space-between;
}
#rating-sidebar {
	width: 310px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#rating-note p, #rating-note a {
	color: #808080;
	font-style: italic;
	margin: 0 50px 0 20px;
	line-height: 24px;
}
#rating-note a {
	font-size: 14pt;
	display: inline-block;
	margin-bottom: 15px;
}
#rating-note a:hover { color: #444; }
#rating-control {
	width: 310px; height: auto;
	padding: 20px 25px 30px;
	background: #e6e6e6;
	border-radius: 20px;
	margin-bottom: 5px;
}

#rating-control .indicators-box {
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    height: 0;
}	
#rating-control .group { margin-bottom: 5px; }
#rating-control .group-title {
	padding: 5px 0 6px;
	line-height: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	color: #222;
}
#rating-control .group-title svg {
	width: 25px;
	height: 25px;
	margin-right: 7px;
	fill: #808080;
}

#rating-control .indicator {
	padding: 5px 10px 6px 32px;
	line-height: 18px;
	cursor: pointer;
	color: #555;
}
#rating-control .indicator:hover, #rating-control .group-title:hover { color: #000; }
#rating-control .group-title:hover svg { fill: #222; }
#rating-control .indicator.active, #rating-control .group-title.active {
	color: var(--blue);
	pointer-events: none;
}
#rating-control .group-title.active svg { fill: var(--blue); }
#rating-control .demography .indicator.active, #rating-control .demography .group-title.active { color: var(--demography); }
#rating-control .demography .group-title.active svg { fill: var(--demography); }
#rating-control .economy .indicator.active, #rating-control .economy .group-title.active { color: var(--economy); }
#rating-control .economy .group-title.active svg { fill: var(--economy); }
#rating-control .life .indicator.active, #rating-control .life .group-title.active { color: var(--life); }
#rating-control .life .group-title.active svg { fill: var(--life); }
#rating-control .management .indicator.active, #rating-control .management .group-title.active { color: var(--management); }
#rating-control .management .group-title.active svg { fill: var(--management); }
#rating-control .tourism .indicator.active, #rating-control .tourism .group-title.active { color: var(--tourism); }
#rating-control .tourism .group-title.active svg { fill: var(--tourism); }
#rating-control .group-title.active { font-weight: bold; }

#rating-visualization {}
#bars .row:hover { cursor: pointer; }
#bars .row .rate {
	fill: #808080;
	text-anchor: end;
	font-size: 18px;
}
#bars .row .city {
	fill: #000;
	font-size: 18px;
}
#bars .row .bar { fill: var(--blue); }
#bars .row:hover .rate, #bars .row.highlight .rate { fill: #000; }
#bars .row:hover .city, #bars .row.highlight .city { font-weight: bold; }
#bars .row:hover .bar, #bars .row.highlight .bar { fill: #025eb7; }
#bars .row.active .bar { fill: #024689; pointer-events: none; }
#bars.demography .row .bar { fill: var(--demography); }
#bars.demography .row:hover .bar, #bars.demography .row.highlight .bar, #bars.demography .row.active .bar { fill: var(--demography-dark); }
#bars.economy .row .bar { fill: var(--economy); }
#bars.economy .row:hover .bar, #bars.economy .row.highlight .bar, #bars.economy .row.active .bar { fill: var(--economy-dark); }
#bars.life .row .bar { fill: var(--life); }
#bars.life .row:hover .bar, #bars.life .row.highlight .bar, #bars.life .row.active .bar { fill: var(--life-dark); }
#bars.management .row .bar { fill: var(--management); }
#bars.management .row:hover .bar, #bars.management .row.highlight .bar, #bars.management .row.active .bar { fill: var(--management-dark); }
#bars.tourism .row .bar { fill: var(--tourism); }
#bars.tourism .row:hover .bar, #bars.tourism .row.highlight .bar, #bars.tourism .row.active .bar { fill: var(--tourism-dark); }

#grid { pointer-events: none; }
#grid line { stroke: #ddd; }
#grid .tick:nth-child(1) line { stroke: #000; }
#grid .tick text {
	font-size: 14px;
	text-anchor: start;
	fill: #000;
}


#map circle.back { fill: #000; opacity: 0.1; }
#map path.belarus {
	fill: #fff;
	stroke-width: 2px;
	stroke: #e6e6e6;
}
#map path.belarus-shadow {
	fill: #e6e6e6;
	stroke-width: 3px;
	stroke: #e6e6e6;
	transform: translate(0, 3px);
}
#map circle.dot {
	fill: var(--blue);
	fill-opacity: .3;
	stroke: var(--blue);
	stroke-width: 2;
}
#map circle.dot:hover, #map circle.dot.highlight { cursor: pointer; fill-opacity: 1; fill: #025eb7; stroke: #025eb7; }
#map.demography circle.dot { fill: var(--demography); stroke: var(--demography); }
#map.demography circle.dot:hover, #map.demography circle.dot.highlight { fill: var(--demography-dark); stroke: var(--demography-dark); }
#map.economy circle.dot { fill: var(--economy); stroke: var(--economy); }
#map.economy circle.dot:hover, #map.economy circle.dot.highlight { fill: var(--economy-dark); stroke: var(--economy-dark); }
#map.life circle.dot { fill: var(--life); stroke: var(--life); }
#map.life circle.dot:hover, #map.life circle.dot.highlight { fill: var(--life-dark); stroke: var(--life-dark); }
#map.management circle.dot { fill: var(--management); stroke: var(--management); }
#map.management circle.dot:hover, #map.management circle.dot.highlight { fill: var(--management-dark); stroke: var(--management-dark); }
#map.tourism circle.dot { fill: var(--tourism); stroke: var(--tourism); }
#map.tourism circle.dot:hover, #map.tourism circle.dot.highlight { fill: var(--tourism-dark); stroke: var(--tourism-dark); }


/* SHARING */ 
#share {
  text-align: center;
  margin: 0 auto 60px;
  padding: 30px 15px 60px;
  background: #eee;
  background-image: linear-gradient(white, #eee);
  border-bottom: 1px solid #ddd;
}
#share .social-networks {
    border: 1px solid rgba(0,0,0,.1);
    display: flex;
    border-radius: 4px;
    width: 70%;
    max-width: 800px;
    background: white;
}
#share .social-networks a {
    border-right: 1px solid rgba(0,0,0,.1);
    width: 25%;
    padding: 15px 0;
    text-align: center;
}
#share .social-networks svg {
    width: 20px;
    height: 20px;
    fill: rgba(0,0,0,.3);
    transition: fill .5s;
}
#share .social-networks a:hover svg { fill: #ce0b24; }


/* METHODOLOGY */
#methodology { padding-top: 50px; }
#methodology .flexbox { justify-content: space-between; }
#meth-the-best { margin-bottom: 50px; }
#meth-the-best .flexbox:nth-child(2) { margin-bottom: 70px; align-items: center; }
#meth-the-best img { max-width: 520px; width: 100%; }
#methodology .flexbox:nth-child(3) p.w380 { margin-top: 80px; }
#meth-the-best .emphasis { max-width: 330px; width: 100%; }
#meth-the-best .emphasis p { 
	font-size: 32px; 
	line-height: 42px; 
	font-weight: bold;
	margin-top: 20px;
}
#meth-computing .flexbox:nth-child(1) { align-items: flex-end; }
#meth-indicators {
	background: #f2f2f2;
	padding: 60px 0 80px;
	margin: 80px 0 100px;
}
#meth-indicators .flexbox:first-child { 
	justify-content: center; 
	align-items: flex-start; 
	align-items: stretch; 
}
#indicators-list {
	width: 100%;
	max-width: 500px;
}
#indicators-list .indicators-box {
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    height: 0;
}
#indicators-list .group-title { 
	color: var(--blue);
	font-size: 24px;
	font-weight: bold;
	padding: 15px 0 5px;
	cursor: pointer;
	display: flex;
	align-items: center;
}
#indicators-list .group-title svg {
	margin-right: 7px;
	fill: var(--blue);
	transition: transform .25s;
}
#indicators-list .group-title:hover { color: #025eb7; }
#indicators-list .group-title:hover svg { fill: #025eb7; }
#indicators-list .expanded .group-title { pointer-events: none; }
#indicators-list .expanded .group-title svg { transform: rotate(90deg); }
#indicators-list .indicator {
	padding: 8px 50px 10px 15px;
	cursor: pointer;
}
#indicators-list .indicator:hover { background: #e6e6e6; }
#indicators-list .indicator.active { background: white; pointer-events: none; }
#indicator-description {
	width: 100%;
	max-width: 510px;	
	padding: 40px 60px 50px;
	background: white;
}
#indicator-description .desc .name {
	color: #999999;
	font-size: 18px;
}
#indicator-description .desc h4, #indicator-description .desc .text { margin-bottom: 25px; }
#indicator-description .desc .text { font-size: 18px; line-height: 28px; }
#mc-formula li, #mc-scale li {
	list-style: none;
	font-size: 18px;
	line-height: 28px;
	margin: 0 20px 15px 100px;
}
#mc-formula li span, #mc-scale li span {
	display: inline-block;
	margin-left: -79px;
	min-width: 60px;
	font-weight: bold;
	text-align: right;
}
#mc-example {
	width: 100%; max-width: 510px;
}
#mc-example h4 { margin-bottom: 5px; }
#mc-example .toggle li {
	list-style: none;
	display: inline-block;
	margin-right: 10px;
	color: var(--blue);
	cursor: pointer;
	border-bottom: dashed 1px var(--blue);
}
#mc-example .toggle li.active {
	color: black;
	pointer-events: none;
	border-bottom: none;
}
#mc-example svg { margin-top: 20px; }
#mc-example svg .grid { pointer-events: none; }
#mc-example svg .grid line {
	fill: none;
    stroke-miterlimit: 10;
    stroke: #ccc;
}
#mc-example svg .grid text {
	text-anchor: start;
    fill: #808080;
    font-size: 14px;
}
#mc-example svg .name {
	font-size: 18px;
    fill: #333;
    text-anchor: end;
}
#mc-example svg .bar { fill: var(--blue); }
#mc-example svg .bar:hover { fill: #025eb7; }
#meth-computing .flexbox:nth-child(4) { margin-bottom: 50px; }
#meth-computing .flexbox:nth-child(5) img { width: 480px; height: 480px; }
#meth-form {
	background: var(--blue);
	color: white;
	padding: 100px 0;
	margin: 90px 0 120px;
}
#meth-form img {
	width: 100%;
	max-width: 450px;
}
#meth-form a.button {
	border: 1px solid white;
	color: white;
	background: var(--blue);
	transition: all .25s;
	display: inline-block;
	padding: 8px 30px 12px;
	margin-top: 30px;
	text-decoration: none;
}
#meth-form a.button:hover {
	color: var(--blue);
	background: white;
}


/* FINDINGS */ 
#findings { padding-top: 50px; margin-bottom: 120px; }
#bottleneck .text.intro h2 { max-width: 630px; }
#bottleneck span.color {
	border-radius: 5px;
	padding: 2px 8px 2px; 
	color: white;
	font-style: italic;
	white-space: nowrap;
}
#bottleneck-viz {
	margin: 30px 0 20px;
	padding: 40px 20px 60px;
	background: #eee;
}
#bottleneck-viz .thead { scroll-behavior: smooth; }
#bottleneck-viz .thead rect.header-back { fill: #eee; }
#bottleneck-viz text, #bottleneck-viz rect { cursor: help; }
#bottleneck-viz .wrapper {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}
#bottleneck-viz .cell rect {
	stroke-width: 1;
	stroke: #eee;
}
#bottleneck-viz .reference { pointer-events: none; }
#bottleneck-viz .reference rect, #bottleneck-viz .thead rect.title-back { fill: #ddd; stroke: #ddd; stroke-width: 4; }
#bottleneck-viz .reference line { fill: none; stroke: #ddd; stroke-width: 4; }
#bottleneck-viz .cell-label {
	font-size: 14px;
	fill: white;
	text-anchor: middle;
	pointer-events: none;
}


/* AUTHOR */
#author { padding-top: 50px; }
#author h2 { margin-bottom: 45px; }
#author .flexbox { justify-content: space-between; }
#author .w588 {
	justify-content: flex-start;
	align-items: flex-start;
}
#author .w588 h4 {
	margin-top: 5px;
	margin-bottom: 10px;
}
#author img { width: 100%; }
#author img.round {
	max-width: 180px;
	height: auto;
	margin-right: 20px;
}
#author #uf {
	align-items: flex-start;
	margin-top: 80px;
	margin-bottom: 180px;
}
#author #uf p {
	margin: 0 50px 0 30px;
	max-width: 25%;
}
#author #uf img {
	max-width: 65%;
	box-shadow: -50px 50px 60px rgba(6,127,244,.3);
}
#auth-thanks {
	background: #e0effe;
	border-top: 1px solid #218df6;
	padding: 70px 0 70px;
	text-align: center;
}
#auth-thanks .flexbox {
	margin-bottom: 30px;
	justify-content: center;
}
#auth-thanks img {
	width: 100%;
	max-width: 100px;
}
#auth-thanks .thank {
	width: 100%;
	max-width: 240px;
	margin: 0 15px;
}
#auth-thanks .name { 
	font-weight: bold;
	margin-bottom: 0;
}
#auth-thanks .flexbox .text-basic { line-height: 24px; }


/* FOOTER */
#footer {
	    background: var(--blue);
	    color: white;
	    padding: 100px 15px 130px;
	}
	#footer img { 
		width: 450px; 
		height: 60px; 
		display: block; 
		margin-bottom: 120px;
	}
	#footer .mainbox {
		width: 100%;
		max-width: 880px;
		justify-content: space-between;
	}
	#footer .mainbox li { max-width: 160px; }
	#footer ul { list-style: none; flex-wrap: nowrap; }
	#footer li { margin: 0 25px 0 0; padding: 0; }
	#footer p, #footer li { font-size: 16px; line-height: 20px;}
	#footer a { color: white; opacity: .6; text-decoration: none; display: block; margin-bottom: 10px }
	#footer a:hover { opacity: 1; }
	#footer svg {
	    display: block;
	    margin: 0 auto 60px;
	}

@media screen and (max-width:1700px) {
	header .w1200 { max-width: 1100px; }
}
@media screen and (max-width:1550px) {
	header .w1200 { max-width: 1050px; }
	header h1 { margin-top: 130px; }
	#title-image { margin-right: 0; }
	#title-image .image { max-width: 500px; }
	#cni-logo { top: 55px; }
	#locale-main { 
		top: 85px; 
		left: auto;
		right: 60px;
	}
}

@media screen and (max-width:1360px) {
	.w1200 { max-width: 1100px; }
	.w895 { max-width: 895px; }
	.w588 { max-width: 530px; }
	#find-east-west .flexbox div:nth-child(2) { max-width: 530px; }
	.w380 { max-width: 360px; }
	header h1 { margin-top: 175px; }
	#find-lenses img.intro { margin-right: 0; }
	#find-lenses .emphasis img { max-width: 200px; }
	#find-lenses .emphasis img#glasses { margin-left: 0px; }
	#find-lenses .emphasis img#lens { margin-right: 0px; }
	#find-lenses .emphasis p { font-size: 28px; line-height: 42px; }
	#auth-about img { margin-right: 0; }
	#city-info, #city-info #ci-header { max-width: 420px; min-width: 320px; }
	#rating { max-width: 1200px; }
}

@media screen and (max-width:1220px) {
	body { min-width: 320px; }
	#cni-logo { 
		position: static;
		display: block; 
		margin: 0 auto;
	}
	header { padding-top: 50px; }
	#locale-main {
		display: flex;
		position: relative;
		top: auto; left: auto; right: auto;
		z-index: 1000;
		width: 100%;
		max-width: 900px;
		margin: 30px auto -30px;
	}
	#locale-main li:first-child { margin-right: 12px; }
	#ti-dimentions { max-width: 450px; }
	#filter-box .flexbox { flex-wrap: nowrap; }
	header .w1200 { max-width: 900px; }
	#title-text { max-width: 460px; }
	header h1 { font-size: 60px; line-height: 70px; margin-top: 60px; }
	header .flexbox { justify-content: center; align-items: flex-start; }
	#title-image .image { max-width: 450px; margin-top: -75px; }
	#rt-filter svg { min-width: 30px; }
	p.text-large { font-size: 20px; line-height: 32px; }
	p.text-basic, #mc-formula li, #mc-scale li, p.note { font-size: 16px; line-height: 24px; }
	.w1200, .w895, .w588, .w380, h3 { padding: 0 20px; }
	h2 { font-size: 60px; text-align: center; }
	.w1200 { max-width: 900px; }
	.w380 { max-width: 380px; }
	#meth-the-best .emphasis { max-width: 100%; }
	#meth-the-best .emphasis p { font-size: 28px; line-height: 36px; }
	#meth-form h3, #auth-about h3 { padding: 0; }
	#auth-about img { max-width: 450px; }
	#find-lenses .emphasis p { font-size: 24px; line-height: 36px; }
	#find-east-west .text-large { max-width: 390px; }
	#city-info { margin-left: -70px; }
	#city-info { display: none; }
	#rating-box .note { display: none; }
	#rating { max-width: 1100px; }
	#rating-control { width: 240px; }
	#data-list { width: 100%; }
	#data-list .city { font-size: 20px; padding: 5px 15px 5px;}
	#data-list .city.even { background: #f5f5f5; }
	#data-list .name { width: 100%; }
	#data-list .city:hover { background: #ddd; }
	#find-ct-list { display: none; }
	#find-city-types .note { display: none; }
	#ct-box { flex-direction: column-reverse; }
	#find-ct-description { 
		width: 100%; 
		max-width: 860px; 
		margin: 0 auto;  
		padding: 40px 0 60px;
	}
	#find-ct-description p, #find-ct-description svg {
		margin-left: 50px;
		margin-right: 50px;
	}
	#ct-box select {
		width: 100%;
		max-width: 860px;
		margin: 30px auto 15px;
		height: 40px;
		font-size: 18px;
		padding: 5px 15px;
		overflow: hidden;
	}
	#bottleneck-viz .wrapper { max-width: 1100px; }
	#bottleneck .text.intro h2 { margin: 0 auto 40px; }
	#bottleneck span.color { padding: 0 10px 1px; }
}

@media screen and (max-width:1200px) {
	#rating { 
		display: block; 
		padding-left: 0;
		padding-right: 0;
	}
	#rating .wrapper {
		margin: 0 15px;
	}
	#rating .note, #rating .note a {
		color: #666;
		font-size: 18px;
		font-style: italic;
		margin-bottom: 10px;
	}
	#indicators-selector {
		padding: 10px 15px 10px;
		margin: 0 0 25px;
		width: 100%;
		font-size: 20px;
	}
	#data-list {
		display: flex;
		flex-direction: column;
	}
	#data-list .city { cursor: pointer; }
	#data-list .name { max-width: 200px; }
	#data-list .value { width: 70px; text-align: right; }
	#data-list .bar { width: 100%; height: 30px; margin-left: 15px; }
	#data-list .progress { height: 30px; background-color: var(--blue); }

	#meth-indicators .flexbox { padding: 0 20px; }
	#meth-indicators .flexbox:first-child { flex-direction: column; padding: 0 25px;}
	#indicators-list { margin: 0 auto; max-width: 900px; }
	#indicators-list select {
		width: 100%;
		max-width: 900px;
		margin: 0 auto 15px;
		height: 40px;
		font-size: 18px;
		padding: 5px 15px;
		overflow: hidden;
	}
	#indicators-list option { max-width: 900px; }
	#indicator-description { margin: 0 auto 15px; max-width: 780px; }

	#bottleneck-viz .w1200 {
		padding-left: 0;
		padding-right: 0;	
	}
}

@media screen and (max-width:960px) {
	#cni-logo {
		max-width: 100px;
		position: relative;
		top: 0; left: 0;
	}
	#locale-main { justify-content: center; }
	#ti-dimentions { max-width: none; flex-wrap: nowrap; }
	#ti-dimentions li { display: block; text-align: center;  }
	#ti-dimentions svg { margin-right: 0; }
	#find-ct-description { max-width: 700px; }
	#ct-box select { max-width: 700px; }
	#find-lenses .flexbox .text.intro { max-width: 100%; }
	#find-east-west .flexbox div:nth-child(1) { max-width: 100%; }
	.w1200, .w895, .w588, .w380 { max-width: 90%; }
	.w1200, .w895, .w588 { max-width: 100%; padding: 0; }
	.flexbox { flex-wrap: wrap; }
	nav.flexbox { flex-wrap: nowrap; justify-content: center; }
	nav div { text-align: center; }
	header .flexbox { max-width: 90% }
	header h1 { font-size: 50px; line-height: 55px; margin-bottom: 15px; }
	#title-text { max-width: 85%; text-align: center; margin-bottom: 35px; }
	#title-image { margin-bottom: 60px; display: flex; flex-wrap: wrap; justify-content: center; }
	#rating { max-width: 800px; }
	#rating #rf-subcat { text-align: center; }
	#rating #filter-box li { padding: 10px 15px; }
	#rating #filter-box span, #rating #rf-subcat { font-size: 14px; }
	#rf-subcat .subcat { height: 60px; }
	#data-list .name { max-width: 110px; }
	#rating .note { font-size: 14px; }
	#data-list .name, #data-list .value, #indicators-selector { font-size: 16px; }
	#data-list .bar, #data-list .progress { height: 20px; }
	h3 { text-align: center; margin-left: auto; margin-right: auto; }
	h2 { font-size: 40px; line-height: 50px; }
	img { margin-left: auto; margin-right: auto; }
	p.text-large, p.text-basic { padding: 0 20px; max-width: 800px; width: unset; margin-left: auto; margin-right: auto; }
	#mc-formula, #mc-scale { padding: 0 20px; max-width: 800px; width: unset; margin-left: auto; margin-right: auto; }
	#meth-computing .flexbox:first-child { flex-direction: column-reverse; }
	#meth-indicators .flexbox:first-child { flex-direction: column; }
	#meth-computing .flexbox:first-child img { max-width: 150px; margin-bottom: 15px; }
	#meth-the-best .intro {flex-direction: column-reverse;}
	#meth-the-best .intro img { margin-bottom: 25px; max-width: 350px; }
	#meth-the-best .emphasis { text-align: center; max-width: 450px; margin: 0 auto 30px; }
	#meth-the-best .emphasis img { max-width: 350px; display: block; margin: 0 auto; }
	#meth-the-best p.text-basic { margin-top: 15px !important; }
	#mc-example { max-width: 800px; padding: 0 20px; margin-left: auto; margin-right: auto; }
	#meth-computing .flexbox:nth-child(5) img { max-width: 350px; height: auto; margin-bottom: 50px; }
	#fabrika { flex-direction: column-reverse; }
	#meth-indicators #indicators-list { max-width: 630px; }
	#meth-indicators #indicator-description {
		padding: 40px 0 50px;
		max-width: 630px;
	}
	#meth-indicators #indicator-description .desc {
		margin-left: 60px;
		margin-right: 60px;
	}
	#meth-form { margin: 30px 0 40px; }
	#meth-form .flexbox, #karta { flex-direction: column-reverse; }
	#meth-form img { margin-bottom: 30px; max-width: 360px; }
	#meth-form a.button { display: block; margin: 45px auto 0; text-align: center; max-width: 300px; }
	#find-lenses img.intro { margin: 20px auto 30px; max-width: 360px; }
	#find-city-points { max-width: 400px; margin: 30px auto 0; }
	#find-city-points svg { margin-left: 0; }
	#find-city-points .note { text-align: center; max-width: 100%; }
	#find-lenses .emphasis { max-width: 460px; }
	#find-lenses .emphasis img#glasses, #find-lenses .emphasis img#lens { display: block; margin: 0 auto; }
	#find-city-types .text { max-width: 100%; text-align: center; }
	#find-east-west .text-large { max-width: 90%; }
	#find-east-west .flexbox div:nth-child(2) { max-width: 100%; }
	#find-east-west .flexbox div:nth-child(1) img { display: block; margin: 25px auto 50px; max-width: 360px; }
	#author { padding-top: 60px; text-align: center;}
	#author .flexbox { flex-wrap: nowrap; }
	#author .flexbox.authors { max-width: 800px; margin: 0 auto; }
	#author .author { flex-direction: column; align-items: center; max-width: 370px; }
	#author .author img { margin: 0 auto 15px; }
	#author #uf { flex-direction: column-reverse; margin: 30px auto 150px; }
	#author #uf p { max-width: 800px; margin: 30px auto 0; padding: 0 20px; }
	#author #uf img { max-width: 75%; }
	#auth-thanks .thank { margin-bottom: 30px; }
	#footer img { width: 100%; max-width: 460px; }
	#footer a { text-align: center; }
	#data-list .city { flex-wrap: nowrap; }
}

@media screen and (max-width:650px) {
	#locale-main { margin: 15px auto 25px; }
	#locale-main li { font-size: 18px; }
	p.text-large {
		font-size: 16px;
		line-height: 26px;
	}
	#indicators-list select, #indicators-list option { font-size: 14px; }
	p.text-basic, #indicator-description .desc .text, #mc-formula li, #mc-scale li { font-size: 14px; line-height: 24px; }
	#mc-formula li span, #mc-scale li span { margin-left: -64px; }
	#mc-formula li, #mc-scale li { margin-bottom: 5px; }
	#mc-formula, #mc-scale { margin: -15px 0 15px; }
	#rt-filter span { display: none; }
	#footer ul { display: block; }
	#footer .mainbox li { margin: 0 auto 10px; }
	nav div { font-size: 14px; display: inline-block; margin-right: 10px; }
	#meth-computing .flexbox:nth-child(5) img { width: 80%; height: 80%; }
	#meth-form { margin-top: 50px; padding-top: 60px; }
	#meth-form img { width: 80%; height: 80%; }
	#find-lenses .emphasis { width: 90%; }
	#find-lenses .emphasis p { font-size: 20px; line-height: 28px; }
	h2 { font-size: 36px; line-height: 42px; }
	header { padding-top: 45px }
	header h1 { font-size: 40px; line-height: 45px; margin-top: 0; }
	header .flexbox { flex-direction: column-reverse; width: 80%; }
	#title-text { max-width: 100% }
	#title-text p.text-large { font-size: 18px; line-height: 26px; }
	#title-text p.text-basic { font-size: 14px; line-height: 20px; }
	#title-image { margin: 0 auto; }
	#title-image .image { 
		width: 100%; 
		min-width: 260px; 
		height: auto;
		display: block; 
		margin: -12px auto 15px;
	}
	#title-image #ti-dimentions { display: none; }
	#rating #filter-box li {
		font-size: 12px;
		padding: 10px 10px;
	}
	#rating #filter-box .subcat { align-items: stretch; }
	#rating #filter-box .subcat li {
		border-radius: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#indicator-description { 
		padding: 20px 30px 30px;
	}
	#find-ct-description { padding: 20px 0 30px; }
	#find-ct-description p, #find-ct-description svg {
		margin-left: 30px;
		margin-right: 30px;
	}
	#find-ct-description svg { max-width: 85%; margin-top: 15px; }
	#data-list .city { font-size: 18px; }
	#meth-the-best .intro img { margin-bottom: 15px; }
	#meth-indicators #indicator-description .desc {
		margin-left: 30px;
		margin-right: 30px;
	}
	#find-lenses .flexbox:nth-child(1) { margin-bottom: 30px; }
	#meth-indicators { margin: 40px 0 60px; padding: 40px 0 60px; }
	#find-lenses .emphasis { margin-top: 20px; }
	#find-lenses .emphasis img { max-width: 120px; }
	#find-city-types { margin-top: 60px; }
	#author .authors { flex-direction: column;  }
	#author .author { margin: 0 auto 25px; }
	#auth-thanks .flexbox { flex-direction: column; margin-bottom: 10px; }
	#auth-thanks .thank { max-width: unset; width: unset; margin-bottom: 15px; }
}

@media screen and (max-width: 400px) {
	#meth-form a.button { max-width: 60%; }
	#footer { padding: 60px 15px 80px; }
	#footer img { margin-bottom: 40px; }
	nav { align-items: center; }
	nav div { margin: 0 10px; }
	#nav-author { margin-right: 10px; }
}

@media not all and (pointer: coarse) {
  nav div:hover {
    color: var(--blue);
  }
}