@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;
	--dem: #ff9700;
	--econ: #4ec700;
	--life: #fc003f;
}

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; }
.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;
}


/* HEADER */
#cni-logo {
	position: absolute;
	top: 85px;
	left: 60px;
	max-width: 130px;
	z-index: 9999;
}
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: 420px;
}
#ti-dimentions { justify-content: space-around; }
#ti-dimentions li {
	list-style: none;
	padding: 0;
	text-align: center;
	font-weight: bold;
	max-width: 100px;
}
#ti-dimentions li:first-child { max-width: 150px; }
#ti-dimentions li p.text-basic { 
	margin-top: 5px;
	font-size: 18px;
	line-height: 24px;
}
#ti-dimentions img {
	width: 40px;
	height: 40px;
}


/* 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:hover { color: var(--blue); }*/
nav div:last-child { margin-right: 0; }
nav div.active {
	color: var(--blue);
	/*pointer-events: none;*/
}
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; }
#filter-box { margin: 50px 0 65px; }
#rt-filter {
	width: 100%;
	justify-content: space-between;
}
#rt-filter li {
	display: flex;
	align-items: center;
	justify-content: center;
	list-style: none;
	height: 52px;
	width: 100%;
	cursor: pointer;
}
#rt-filter li:hover { background: #f5f5f5; }
#rt-filter svg {
	width: 30px;
	height: 30px;
	margin-right: 8px;
}

#rt-filter li#rf-cat-total svg { fill: var(--blue); }
#rt-filter li#rf-cat-demography svg { fill: var(--dem); }
#rt-filter li#rf-cat-economy svg { fill: var(--econ); }
#rt-filter li#rf-cat-life-quality svg { fill: var(--life); }

#rt-filter li.active-cat { background: #eee; }
#rt-filter li#rf-cat-total.active { background: var(--blue); }
#rt-filter li#rf-cat-demography.active { background: var(--dem); }
#rt-filter li#rf-cat-economy.active { background: var(--econ); }
#rt-filter li#rf-cat-life-quality.active { background: var(--life); }
#rt-filter li.active { color: white; pointer-events: none; }

#rt-filter li#rf-cat-total.active svg,
#rt-filter li#rf-cat-demography.active svg,
#rt-filter li#rf-cat-economy.active svg,
#rt-filter li#rf-cat-life-quality.active svg { fill: white; }

#rf-subcat .subcat {
	width: 100%;
	display: flex;
	height: 50px;
	justify-content: center;
	align-items: center;
	background-color: #eee;
	position: absolute;
	top: 0;
}
#rf-subcat .subcat li {
	list-style: none;
	padding: 5px 20px;
	margin: 0;
	cursor: pointer;
	border-radius: 25px;
}
#rf-subcat .subcat li.active { pointer-events: none; }
#rf-subcat-demography li.active { background-color: var(--dem); color: white; }
#rf-subcat-economy li.active { background-color: var(--econ); color: white; }
#rf-subcat-life-quality li.active { background-color: var(--life); color: white; }

#viz { justify-content: space-between; }

#rating-box .grid .tick line { stroke: #e6e6e6; }
#rating-box .grid .tick:first-child line { stroke: #333; }
#rating-box .grid .tick text { 
	fill: #808080;
	font-size: 12px;
	text-anchor: start;
}

#rating-box .chart .bar rect { fill: var(--blue); }
#rating-box .chart .bar.active rect { fill: #024689; }
#rating-box .chart .bar text { 
	fill: black;
	font-size: 16px;
}
#rating-box .chart .bar { cursor: pointer; }
#rating-box .chart .bar:hover rect { fill: #025eb7; }

#city-info {
	width: 100%;
	max-width: 485px;
	background: #f2f2f2;
	display: none;
}
#city-info #ci-header {
	width: 100%;
	max-width: 485px;
	height: 250px;
	background-size: cover;
	color: white;
}
#ci-header .close-icon {
	fill: none;
	stroke: white;
	stroke-width: 3;
	position: absolute;
	top: 20px;
	right: 30px;
	cursor: pointer;
}
#ci-header .name {
	font-size: 36px;
	font-weight: bold;
	position: absolute;
	top: 186px;
	left: 30px;
}
#ci-header .data {
	position: absolute;
	top: 180px;
	right: 30px;
}
#ci-header .rate {
	font-size: 20px;
	font-weight: bold;
}
#ci-header .points {
	opacity: .60;
}

#ci-data {
	padding: 20px 30px 30px;
}
#ci-data .labels { 
	font-size: 14px; 
	justify-content: space-between; 
	margin-bottom: 3px;
}
#ci-data .labels .value { color: #808080; font-style: italic; }
#ci-data .status { 
	width: 100%;
	height: 10px;
}
#ci-data .status .back {
	width: 100%;
	height: 6px;
	background: #ccc;
	position: relative;
	top: 2px;
}
#ci-data .status .progress {
	position: relative;
	top: -6px;
	height: 10px;
}
#data-demography .progress { background: var(--dem); }
#data-economy .progress { background: var(--econ); }
#data-life-quality .progress { background: var(--life); }

#ci-data .data-cat { margin-bottom: 20px; cursor: help; }
#ci-data .data-cat .indicator { margin-bottom: 10px; }

#ci-tooltip {
	position: absolute;
	display: none;
	background: black;
	padding: 15px 25px 20px;
	color: white;
	font-size: 14px;
	line-height: 18px;
	max-width: 250px;
	border-radius: 5px;
	z-index: 900;
}
#rating-tooltip {
	position: absolute;
	display: none;
	background: black;
	padding: 5px 15px 8px;
	color: white;
	font-size: 14px;
	line-height: 18px;
	border-radius: 5px;
	z-index: 900;
}


/* SHARING */ 
#share {
  text-align: center;
  margin: 60px auto 60px;
  border-top: 1px solid #ddd;
  padding: 80px 15px 20px;
  background: #eee;
  background-image: linear-gradient(#eee, white);
}

#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 li { list-style: none; padding: 0; }
#indicators-list .category { 
	color: var(--blue);
	font-size: 24px;
	font-weight: bold;
	padding: 15px 0 5px;
}
#indicators-list .indicator {
	padding: 8px 50px 10px 15px;
	cursor: pointer;
}
#indicators-list .indicator:hover { background: #e5e5e5; }
#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 { display: none; }
#indicator-description .desc.active { display: block; }
#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 {
	list-style: none;
	font-size: 18px;
	line-height: 28px;
	margin: 0 20px 15px 100px;
}
#mc-formula 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 .gridlines {
	fill: none;
    stroke-miterlimit: 10;
    stroke: #ccc;
}
#mc-example svg .baseline {
	fill: none;
    stroke-miterlimit: 10;
    stroke: #333;
}
#mc-example svg .labels {
	font-size: 14px;
    fill: gray;
}
#mc-example svg .name {
	font-size: 18px;
    fill: #333;
}
#mc-example svg .bars {
	fill: none;
    stroke-miterlimit: 10;
    stroke: var(--blue);
    stroke-width: 20px;
}

#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; }
#findings .flexbox { justify-content: space-between; }
#find-lenses h2 span { margin-left: -20px; }
#find-lenses .flexbox:nth-child(1) { 
	margin-bottom: 70px;
	align-items: flex-end;
}
#find-lenses .flexbox .text.intro { 
	width: 100%; 
	max-width: 630px; 
}
#find-lenses img.intro {
	width: 100%;
	max-width: 520px;
	margin-bottom: -30px;
	margin-right: -20px;
}
#find-lenses .emphasis {
	text-align: center;
	margin-top: 80px;
}
#find-lenses .emphasis p {
	width: 100%;
	max-width: 800px;
	font-size: 32px;
	line-height: 50px;
}
#find-lenses .emphasis img {
	width: 100%;
	max-width: 220px;
}
#find-lenses .emphasis img#glasses { margin-left: -70px; }
#find-lenses .emphasis img#lens { margin-right: -70px; }

#find-city-points {
	width: 100%;
	max-width: 560px;
}
#find-city-points svg { margin-left: -50px; }
#find-city-points svg polygon { stroke: #fff; stroke-width: 1px; }
#find-city-points svg #bm-west { fill: #449ff7; }
#find-city-points svg #bm-center { fill: #067ff4; }
#find-city-points svg #bm-east { fill: #a2cffb; }
#find-city-points svg circle { stroke: var(--blue); stroke-width: 2px; fill: #fff; }
#find-city-points svg circle:hover { fill: #ffd664; stroke: #ffd664 }
#find-city-points svg text { fill: #fff; text-anchor: middle; font-size: 32px; font-weight: bold; }
#find-city-points .note { max-width: 270px; }

#find-city-types {
	margin: 140px 0 80px;
	padding: 80px 0 40px;
	background: #e0effe;
}
#find-city-types .text {
	width: 100%;
	max-width: 510px;
}
#find-city-types-description {
	width: 100%;
	max-width: 690px;
	background: width;
}

#ct-box { 
	justify-content: center; 
	align-items: stretch; 
	margin-bottom: 60px;
}
#find-ct-list {
	width: 100%;
	max-width: 510px;
}
#find-ct-list .flexbox:nth-child(1) { 
	margin-bottom: 0;
	align-items: center;
}
#find-ct-list .type {
	justify-content: flex-start;
	align-items: center;
	padding: 15px 15px 15px 20px;
	cursor: pointer;
}
#find-ct-list .type:hover { background: #f0f7fe; }
#find-ct-list .type.active { background: white; }
#find-ct-list img {
	width: 100%;
	max-width: 65px;
	margin-right: 15px;
}
#find-ct-list p { margin-bottom: 0; }
#find-ct-list .name {
	font-size: 24px;
	font-weight: bold;
}

#find-ct-description {
	width: 100%;
	max-width: 690px;
	background: white;	
	padding: 40px 50px 60px;
}
#find-ct-description img { margin-top: 30px; width: 100%; }
#find-ct-description svg { margin-top: 30px; }
#find-ct-description svg .gridlines {
	fill: none;
    stroke-miterlimit: 10;
    stroke: #ccc;
}
#find-ct-description svg .baseline {
	fill: none;
    stroke-miterlimit: 10;
    stroke: #333;
}
#find-ct-description svg .labels {
	font-size: 14px;
    fill: gray;
}
#find-ct-description svg .name {
	font-size: 18px;
    fill: #808080;
}
#find-ct-description svg .name .highlight { fill: #000; }
#find-ct-description svg .bars {
	fill: none;
    stroke-miterlimit: 10;
    stroke: #b3b3b3;
    stroke-width: 15px;
    cursor: help;
}
#find-ct-description svg .bars line:hover { stroke: #999; }
#find-ct-description svg .bars .highlight { stroke: var(--blue); }
#find-ct-description svg .bars .highlight:hover { stroke: #025eb7; }
#find-ct-description svg .title {
	font-size: 24px;
	font-weight: bold;
    fill: #333;
}
#find-ct-description svg .subheader { font-size: 18px; fill: #333; }
#find-ct-description svg .source { font-size: 18px; fill: #808080; }
#find-ct-description svg#voblasts .bars { stroke-width: 70px; }
#find-ct-description .desc { display: none; }
#find-ct-description .desc.active { display: block; }

#find-east-west .flexbox div:nth-child(1) {
	width: 100%;
	max-width: 550px;
}
#find-east-west .flexbox div:nth-child(1) img {
	width: 100%;
	max-width: 460px;
	margin-top: 50px;
}
#find-east-west .flexbox div:nth-child(2) {
	width: 100%;
	max-width: 550px;
}


/* AUTHOR */
#author .flexbox {
	justify-content: space-between;
}
#auth-about { 
	align-items: flex-end;
	justify-content: space-between;
}
#auth-about .text { 
	width: 100%; 
	max-width: 690px; 
	margin-bottom: 30px;
}
#auth-about img {
	width: 100%;
	max-width: 560px;
	margin-right: -60px;
}
#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; }
}

@media screen and (max-width:1360px) {
	.w1200 { max-width: 1100px; }
	.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; }
}

@media screen and (max-width:1220px) {

	body { min-width: 320px; }

	#cni-logo { 
		position: static;
		display: block; 
		margin: 0 auto;
	}
	header { padding-top: 50px; }

	#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; }

	#rt-filter svg { min-width: 30px; }

	p.text-large { font-size: 20px; line-height: 32px; }
	p.text-basic { font-size: 16px; line-height: 24px; }

	.w1200, .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-indicators .flexbox { padding: 0 20px; }
	#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; }

	#data-list { width: 100%; }
	#data-list .city { font-size: 20px; padding: 5px 15px 5px;}
	#data-list .city:nth-child(even) { background: #f5f5f5; }
	#data-list .name { width: 100%; }
	#data-list .city:hover { background: #ddd; }

	#indicators-list { display: none; }
	#meth-indicators .flexbox { flex-direction: column-reverse; }
	#meth-indicators .flexbox select {
		width: 100%;
		max-width: 630px;
		margin: 0 auto 15px;
		height: 40px;
		font-size: 18px;
		padding: 5px 15px;
		overflow: hidden;
	}
	#indicator-description { margin: 0 auto 15px; }

	#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;
	}
}

@media screen and (max-width:960px) {

	#cni-logo {
		max-width: 100px;
		position: relative;
		top: 0; left: 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, .w588, .w380 { max-width: 90%; }
	.w1200 .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; }

	#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; }

	h3 { text-align: center; margin-left: auto; margin-right: auto; }
	h2 { font-size: 40px; line-height: 50px; }
	img { margin-left: auto; margin-right: auto; }

	#meth-the-best .intro {flex-direction: column-reverse;}
	#meth-the-best .emphasis { text-align: center; max-width: 400px; 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: 100%; }

	#fabrika { flex-direction: column-reverse; }

	#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;}
	#auth-about img { margin: 0 auto; }

	#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) {
	p.text-large {
		font-size: 18px;
		line-height: 26px;
	}
	p.text-basic, #mc-formula li, #indicator-description .desc .text  {
		font-size: 14px;
		line-height: 20px;
	}
	#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;
	}
	#mc-formula li { margin-left: 40px; }
	#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; }
}

@media screen and (max-width: 400px) {
	.w1200, .w588, .w380, h3 { padding: 0 15px; }
	#footer { padding: 60px 15px 80px; }
	#footer img  { margin-bottom: 40px; }
	nav { align-items: center; }
	nav div { margin: 0 10px; }
	#nav-findings span, #nav-author span, #rf-cat-local-budget span, #rf-cat-investment span { display: none; }
	#nav-findings:before { content: "Вынікі"; }
	#nav-author:before { content: "Аўтар"; }
	#nav-author { margin-right: 10px; }
	#rf-cat-local-budget:before { content: "Бюджэты"; }
	#rf-cat-investment:before { content: "Інвестыцыі"; }
	#rating #filter-box li { padding: 10px 8px; }
}

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