@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,400i|Montserrat:400,400i,700');
* { padding: 0; margin: 0; }
:root {
	--idea-base-color: #01837f;
	--idea-dark-color: #006b67;
	--idea-red-color: #ef3939;
	--idea-gray-color: #999999;
	--econ-base-color: #2750a7;
	--soc-dem-base-color: #662d91;
	--edu-base-color: #c83264;
	--gov-base-color: #006d50;
}

body { 
	font-family: 'Montserrat', sans-serif; 
	background: #e6ecec;

	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%; }
.hidden { opacity: 0; }
.center { margin: 0 auto; }

.positive { color: var(--idea-base-color); }
.neutral { color: var(--idea-gray-color); }
.negative { color: var(--idea-red-color); }

.bold { font-weight: bold; }

h1, h2, h3, h4 { font-family: 'Fira Sans', sans-serif; }

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

ul#locale {
	position: absolute;
	top: 100px;
	right: 80px;
	list-style: none;
	display: flex;
}
ul#locale li {
	padding: 8px 18px 10px;
	border-radius: 25px;
	transition: background .25s;
}
ul#locale li { background: #3ac1b2; }
ul#locale li:hover { background: var(--idea-dark-color); }
ul#locale li.active { background: white; color: var(--idea-base-color); pointer-events: none; }
ul#locale li a { color: white; text-decoration: none; }

header {
	height: 980px;
	margin: 0 0 50px;
	color: white;
	background: #3ac1b2 url(i/bg.png) top center no-repeat;
	transition: background .5s;
}
header #title {
	text-align: center;
	padding-top: 130px;
	max-width: 900px;
	margin: 0 auto;
}
header h1 {
    font-size: 80px;
    letter-spacing: 0.025em;
    line-height: 110px;
	text-transform: uppercase;
}
header h1.year { line-height: 80px; }
header h2 {
	font-size: 18pt;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: 0px;
}
header h2 .divider {
	width: 50px;
	height: 1px;
	margin: 0 auto 10px;
	background: white;
}

h2 {
    font-size: 60px;
    line-height: 72px;
    margin: 50px 0 20px;
}
h3 {
    font-size: 28px;
    line-height: 32px;
    margin: 30px 0 15px;
}
h4 {
    font-size: 18px;
    line-height: 24px;
    margin: 30px 0 10px;
}
p {
  font-size: 14pt;
  line-height: 24pt;
  margin-bottom: 15px;
}

p.emphasize, #intro p.emphasize {
	font-size: 42pt;
	line-height: 56pt;
	margin: 60px -50px 60px; 
	font-style: italic;
}

li {
	font-size: 14pt;
	line-height: 24pt;
	margin: 5px 0 5px 20px;
	padding-left: 15px;
}
a {color: var(--idea-base-color); text-decoration: none;}
a:visited {color: var(--idea-dark-color);}
a:hover {color: var(--idea-red-color);}
a:active {color: var(--idea-red-color);}

svg#scroll-down {
	fill: none;
	stroke: var(--idea-base-color);
	stroke-width: 1.5px;
	display: block;
	margin: 320px auto 0;
}
svg#scroll-down:hover { cursor: pointer; }
svg#scroll-down:hover circle { fill: var(--idea-base-color); }
svg#scroll-down:hover polyline { stroke: white; }

#intro {
	width: 1180px;
	margin: 0 auto;
}
#intro .text {
	max-width: 660px;
}
#intro .text:nth-child(1) { margin: 0 auto; }
#intro .index-container { 
	margin-top: 50px;
	justify-content: space-between;
}
#intro .index-container .text {
	margin-top: 10px;
	max-width: 700px;
}
#intro p {
	font-size: 20px;
	line-height: 32px;
	margin-bottom: 25px;
}

#skip-methods {
	max-width: 250px;
	margin: 75px auto 20px;
	padding: 15px 25px 18px;
	text-align: center;
	background: var(--idea-base-color);
	color: white;
	text-transform: uppercase;
	font-size: 20px;
	border-radius: 50px;
	transition: background .25s;
	cursor: pointer;
}
#skip-methods:hover {
	background: var(--idea-dark-color);
} 

#download-dataset {
	display: block;
	margin: 0 auto;
	max-width: 250px;
	text-align: center;
	margin-bottom: 120px;
}
#download-dataset:hover { color: var(--idea-dark-color); opacity: .6; }

.title { 
	overflow: hidden;
	margin-bottom: 100px; 
}
.title .bg { 
	height: 100%;
	display: flex;
	justify-content: flex-end;
}
.title h2 { 
	color: white; 
	margin: 200px auto 60px;
	width: 700px;
	padding: 50px 0 70px 480px;
}
section {
    margin: 0 auto;
    padding: 50px 0 70px;
}

#index {
	background: white;
	width: 440px;
	border-radius: 25px;
	font-family: 'Fira Sans', sans-serif;
	box-shadow: 0 20px 50px -30px rgba(0,0,0,.3)
}

#index.default {
	z-index: 1000;
}

#index.bottom {
	position: absolute;
	z-index: 1000;
}

#index.fixed {
	position: fixed;
	z-index: 1000;
}

#index #index-options {
	padding: 20px 25px;
	background: #ccc;
	border-radius: 25px 25px 0 0;
	font-size: 12px;
	justify-content: space-between;
}
#index #index-options #probability #window {
	width: 175px;
	height: 22px;
	border-bottom: solid 1px var(--idea-base-color);
	justify-content: space-between;
	align-items: center;

	padding-left: 8px;
	padding-right: 7px;
	position: relative;
	z-index: 100;
}
#index #index-options #probability #window polygon { fill: var(--idea-base-color); }
#index #index-options #probability ul#variants {
	width: 190px;
	position: absolute;
	list-style: none;
	background: var(--idea-base-color);
	max-height: 0px;
	overflow: hidden;
	transition: all .25s;
}
#index #index-options #probability ul#variants.open {
	max-height: 60px;
}
#index #index-options #probability ul#variants li {
	font-size: 12px;
	line-height: 18px;
	color: white;
	padding: 5px 8px;
	margin: 0;
	cursor: pointer; 
}
#index #index-options #probability ul#variants li:hover {
	background: var(--idea-dark-color);
}
#index #index-options #units {
	align-items: center;
}
#index #index-options #units #toogle {
	width: 42px;
	height: 22px;
	margin: 0 10px;
	border-radius: 11px;
	background: var(--idea-base-color);
	cursor: pointer;
}
#index #index-options #units #toogle.left { justify-content: flex-start; text-align: left; }
#index #index-options #units #toogle.right { justify-content: flex-end; text-align: right; }
#index #index-options #units #toogle div {
	width: 16px; height: 16px;
	margin: 3px;
	background: white;
	display: inline-block;
	transition: all .25s;
}
#index #index-options #units .variant { cursor: pointer; transition: color .25s; }
#index #index-options #units .variant:hover { color: var(--idea-base-color); }
#index #index-options #units .variant.active { pointer-events: none; }
#index #index-list .section {
	padding: 10px 25px;
}
#index #index-list .section.active { background: #eee; }
#index #index-list .section:nth-child(1) { padding-top: 20px; }
#index #index-list .section h4 {
	margin: 0 0 5px;
}
#index #index-list .section .item-name, #index #index-list .section .index-value {
	font-size: 12px;
	line-height: 18px;
}
#index #index-list .section .index-item { 
	justify-content: space-between;
	margin-bottom: 1px;
	cursor: pointer;
}
#index #index-list .section .index-item:hover { 
	background: #eee; 
}
#index #index-list .section .index-item.active { 
	background: #ccc; 
	color: #333;
}
#index #index-list .section .index-item .item-name {
	margin-left: 5px;
}
#index #index-list .section .index-item .index-value {
	min-width: 46px;
	padding: 0 5px;
	text-align: center;
	color: white;
	transition: background .25s;
}
#index #index-list .section .index-item#ahova-zdaroyia-item .index-value,
#index #index-list .section .index-item#zneshnjaja-palityka-item .index-value {
	color: #999;
}
#index #index-list .section .index-item .index-value.pos { background: var(--idea-base-color); }
#index #index-list .section .index-item .index-value.neu { background: var(--idea-gray-color); }
#index #index-list .section .index-item .index-value.neg { background: var(--idea-red-color); }

#index #index-legend {
	justify-content: flex-start;
	list-style: none;
	margin: 15px 25px 0;
	padding-bottom: 30px;
}
#index #index-legend li {
	font-size: 12px;
	line-height: 18px;
	padding-left: 5px;
	margin: 0 25px 0 0;
	color: #808080;
	font-style: italic;
}
#index #index-legend li.pos-item { border-left: solid 10px var(--idea-base-color); }
#index #index-legend li.neu-item { border-left: solid 10px var(--idea-gray-color); }
#index #index-legend li.neg-item { border-left: solid 10px var(--idea-red-color); }

#viz-overview {
	margin: 40px 0 50px 25px;
}
#viz-overview h4 {
	margin-bottom: 15px;
	font-weight: normal;
	font-size: 22px;
}
#viz-overview h4 span { font-style: italic; }
#viz-overview .item {
	display: flex;
	align-items: center;
	margin-bottom: 1px;
	
}
#viz-overview .item .label {
	font-size: 20px;
	line-height: 32px;
	min-width: 150px;
	margin-right: 15px;
}
#viz-overview .item .bar {
	width: 100%;
}
#viz-overview .item .bar .progress {
	width: 15px;
	padding: 6px 10px 5px;
	color: white;
	transition: width .25s;
	font-style: italic;
}
#viz-overview .item.pos .bar .progress { background: var(--idea-base-color); }
#viz-overview .item.neu .bar .progress { background: var(--idea-gray-color); }
#viz-overview .item.neg .bar .progress { background: var(--idea-red-color); }

.index-module { 
	max-width: 700px;
	margin: 30px auto 250px;
	padding-left: 480px;
}
.index-module h3 {
	font-size: 36px;
	line-height: 50px;
	margin-bottom: 30px;
	max-width: 500px;
}
.index-module .blocks { flex-wrap: wrap; }
.index-module .text p { 
	font-size: 18px;
	line-height: 30px;
	margin-bottom: 24px;
}
.index-module .info, .index-module .stat { width: 100%; justify-content: space-between; }
.index-module .info { 
	justify-content: space-between; 
}
.index-module .info .text { max-width: 420px; }
.index-module .info img { 
	width: 250px; 
	height: 250px; 
	margin-top: -50px;
	margin-bottom: 25px;
}
.index-module .stat { flex-wrap: wrap; }
.index-module .stat .chart, .index-module .stat .text { max-width: 100%; width: 100%; }
.index-module .stat .text {
	background: white;
	border-radius: 15px;
	padding: 25px 35px 10px;
}
.index-module#padrykhtavanasc-da-reformau .stat .text,
.index-module#menshasci .stat .text,
.index-module#uzaemadapamoga .stat .text,
.index-module#gender-gap .stat .text,
.index-module#jakasc-adukacyi .stat .text,
.index-module#identychnasc .stat .text,
.index-module#zneshnjaja-palityka .stat .text,
.index-module#partyjnaja-sistema .stat .text,
.index-module#palitychnaja-reforma .stat .text {
	background: none;
	border-radius: 0;
	padding: 0;
}

.index-module#jakasc-adukacyi .stat .data-source {
	margin-bottom: 5px;
}
.index-module#jakasc-adukacyi .stat .text {
	margin-bottom: 20px;
}

#padrykhtavanasc-da-reformau .future,
#zneshnjaja-palityka .future, 
#partyjnaja-sistema .future, 
#palitychnaja-reforma .future {
	padding: 25px 20px 30px;
}


.controls { 
	font-size: 12px; 
	margin-top: 15px;
}
.controls .controls-group { 
	margin-right: 25px;
	border-radius: 8px;
	border: 2px solid #d5dada;
	background: #d5dada;
	align-items: stretch;
}
.controls .controls-group:hover {
	border-color: #cacfcf;
	background: #cacfcf;
}
.controls .control {
	padding: 5px 12px 7px;
	background: rgba(255,255,255,0);
	cursor: pointer;
	transition: all .25s;
	border-radius: 6px;
	text-align: center;
	display: flex;
	align-items: center;
}

.controls .control.active {
	color: #333;
	background: rgba(255,255,255,1);
	pointer-events: none;
}

.index-module svg { margin: 20px 0 10px; }
.index-module svg text {
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;	
}
.index-module svg .tick line, .index-module svg .tick path, .index-module svg .baseline {
	fill: none;
	stroke: black;
	stroke-width: 0.5;
	shape-rendering: crispEdges;
}
.index-module svg .axis text, .index-module svg .label-period  { font-size: 10px; }
.index-module svg .line {
	fill: none;
	stroke-width: 2px;
}
.index-module svg .forecast-zone .most-probable line { stroke-width: 2px; }
.index-module svg .forecast-zone .second-in-probability line { stroke-width: 1px; opacity: .8; }
.index-module svg .forecast-zone .other-scenarios line { stroke-width: .5px; opacity: .4; }
.index-module svg .forecast-zone .most-probable text { font-size: 14px; }
.index-module svg .forecast-zone .second-in-probability text { opacity: .8; }
.index-module svg .forecast-zone .other-scenarios text { opacity: .4; }
.index-module svg .forecast-zone .script { transition: opacity .25s; }

.index-module svg .bar-chart .forecast-zone line { shape-rendering: crispEdges; }

#econ .index-module svg .line, #econ .index-module svg .forecast-line  { stroke: var(--econ-base-color); }
#econ .dot circle, #econ polygon, #econ .bar-chart rect { fill: var(--econ-base-color); }
#soc-dem .index-module svg .line, #soc-dem .index-module svg .forecast-line  { stroke: var(--soc-dem-base-color); }
#soc-dem .dot circle, #soc-dem polygon, #soc-dem .bar-chart rect { fill: var(--soc-dem-base-color); }
#edu .index-module svg .line, #edu .index-module svg .forecast-line  { stroke: var(--edu-base-color); }
#edu .dot circle, #edu polygon, #edu .bar-chart rect { fill: var(--edu-base-color); }
#gov .index-module svg .line, #gov .index-module svg .forecast-line  { stroke: var(--gov-base-color); }
#gov .dot circle, #gov polygon, #gov .bar-chart rect { fill: var(--gov-base-color); }

.index-module svg .dot text { text-anchor: middle; }

.index-module svg rect.forecast-zone { fill: rgba(0,0,0,.05); }
.index-module svg .x.axis .tick:nth-last-child(-n+5) text, .index-module svg .forecast-zone text.label-period { opacity: .4; }
.index-module svg .labels text { opacity: .6; }

.index-module .data-source { 
	font-size: 14px;
	line-height: 20px;
	font-style: italic;
	margin-top: 5px;
	margin-bottom: 20px;
	opacity: .6;
}
.index-module .chart h4 { font-size: 18px; font-weight: normal; margin-top: 0; }
.index-module .chart .box p { 
	font-size: 14px; 
	line-height: 22px; 
	font-style: italic; 
	margin-bottom: 0;
}
.index-module .chart .flexbox div.box {
	width: 350px;
	padding: 25px 20px 30px;
}
.index-module .chart .flexbox div.now { padding-left: 0; }
.index-module .chart .future { background: rgba(0,0,0,.05); }
.index-module .chart .status-bar {
	width: 160px;
	height: 5px;
	background: rgba(0,0,0,.10);
	margin-bottom: 15px;
}
.index-module .chart .progress { height: 5px; }
.index-module .forecast-zone table { margin-top: 15px; }
.index-module .forecast-zone tr { font-size: 12px; }
.index-module .forecast-zone td { padding-bottom: 10px; }
.index-module .forecast-zone thead tr { font-weight: normal; opacity: .6; }
.index-module .forecast-zone thead th { padding-bottom: 5px; text-align: left; }
.index-module .forecast-zone tr.most-probable { font-size: 14px; }
.index-module .forecast-zone tr.second-in-probability { opacity: 1; }
.index-module .forecast-zone tr.other-scenarios { opacity: .5; }
.index-module .forecast-zone td .status-bar { margin: 10px 0 12px; }

.forecast-zone table p {
	padding-left: 30px;
}
.forecast-zone table p span.points {
	display: inline-block;
	margin-left: -30px;
	margin-right: 5px;
	min-width: 25px;
	font-weight: bold;
}

#econ .index-module .chart .status,
#econ .mobile-chart .label-bar,
#econ .mobile-chart .label-value { color: var(--econ-base-color); }
#econ .index-module .progress { background: var(--econ-base-color); }
#soc-dem .index-module .chart .status,
#soc-dem .mobile-chart .label-bar,
#soc-dem .mobile-chart .label-value { color: var(--soc-dem-base-color); }
#soc-dem .index-module .progress { background: var(--soc-dem-base-color); }
#edu .index-module .chart .status,
#edu .mobile-chart .label-bar,
#edu .mobile-chart .label-value { color: var(--edu-base-color); }
#edu .index-module .progress { background: var(--edu-base-color); }
#gov .index-module .chart .status,
#gov .mobile-chart .label-bar,
#gov .mobile-chart .label-value { color: var(--gov-base-color); }
#gov .index-module .progress { background: var(--gov-base-color); }

.index-module .uni-pic {
	display: block;
	text-indent: -9999px;
	width: 30px;
	height: 30px;
	background: url(i/uni-pic.svg);
	background-size: 30px 30px;
	margin-bottom: 5px;
}
.index-module table .uni-pic {
	width: 20px; height: 20px;
	background-size: 20px 20px;
}
.index-module#edu-univery .forecast-zone table { margin-top: 20px; }
.index-module#edu-univery .box { margin-top: 10px; }
.index-module#edu-univery .forecast-zone td { padding-bottom: 5px; }
.index-module#edu-univery .chart .flexbox div.future { width: 470px; }

.index-module h3 { position: relative; z-index: 100; }

#econ {}
#econ .title .bg { background: var(--econ-base-color); }
#econ .index-module h3 { color: var(--econ-base-color); }

#soc-dem {}
#soc-dem .title .bg { background: var(--soc-dem-base-color); }
#soc-dem .index-module h3 { color: var(--soc-dem-base-color); }

#edu {}
#edu .title .bg { background: var(--edu-base-color); }
#edu .index-module h3 { color: var(--edu-base-color); }

#gov {}
#gov .title .bg { background: var(--gov-base-color); }
#gov .index-module h3 { color: var(--gov-base-color); }


#authors { padding: 100px 0 150px; background: #d9e7e6; }
#authors .wrapper { width: 1000px; margin: 0 auto; }
#authors h2 { 
	text-align: center; 
	margin-bottom: 50px; 
	color: var(--idea-base-color);
}
#authors .flexbox:not(.author) { 
	justify-content: space-between; 
}
.author { flex-direction: row-reverse; }
.author img { 
	width: 120px; 
	height: 120px;
	filter: grayscale(100%) opacity(80%);
	transition: filter .5s;
}
.author:hover img { filter: grayscale(0%) opacity(100%); }
.author .text {
	margin: -15px 0 0 20px;
	width: 320px;
	z-index: 50;
}
		
#share {
  text-align: center;
  margin: 0 auto;
  border-top: 1px solid #ddd;
  padding: 120px 15px 150px;
  background: white;
}

#share .social-networks {
    border: 1px solid rgba(0,0,0,.1);
    display: flex;
    border-radius: 4px;
    width: 70%;
    max-width: 800px;
}
#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; }

#partnery {
	padding: 80px 0 100px;
	text-align: center;
}
#partnery h3 { margin-bottom: 20px; }
#partnery a {
	margin: 0 30px;
}
#partnery a img {
	width: 150px;
	-webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
    opacity: .6;
    transition: all .5s;
}
#partnery a:hover img {
	-webkit-filter: grayscale(0); 
    filter: grayscale(0);
    opacity: 1;
}

#footer {
	    background: var(--idea-dark-color);
	    color: white;
	    padding: 100px 15px 130px;
	}
	#footer .mainbox {
		max-width: 1200px;
		margin: 0 auto; 
		justify-content: space-between;
	}
	#footer .mainbox li { max-width: 160px; }
	#footer ul { list-style: none; flex-wrap: wrap; 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: #99cdcc; text-decoration: none; display: block; margin-bottom: 10px }
	#footer a:hover { color: #4ea8a6; }

	#footer svg {
	    display: block;
	    margin: 0 auto 60px;
	}

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

.index-module .text p.button {
	color: var(--idea-base-color);
	border-bottom: 1px dashed var(--idea-base-color);
	line-height: 24px;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	margin-bottom: 0;
}
.index-module .text p.button:hover {
	color: var(--idea-red-color);
	border-bottom-color: var(--idea-red-color);
}
.index-module .text .slider-text {
	display: none;
	background: rgba(0,0,0,.05);
	padding: 50px 80px 50px 50px;

}
.index-module .text .slider-text p {
	font-size: 14px;
	line-height: 24px;
	padding-left: 50px;
	margin-bottom: 15px;
}
.index-module .text .slider-text p .points {
	display: inline-block;
	text-align: right;
	margin-left: -50px;
	margin-right: 10px;
	min-width: 40px;
	font-weight: bold;
}

.title .bg .items-list { 
	display: none;
	visibility: hidden; 
	width: 700px;
	margin: 0 auto 100px;
}
.title .bg .items-list .index-item {
	justify-content: space-between;
	color: white;
	opacity: .8;
	margin-bottom: 10px;
}

.title .bg .items-list .index-item .values-box { text-align: right; }
.title .bg .items-list .index-value, .title .bg .items-list .index-index { 
	display: inline-block; 
	min-width: 40px;
	text-align: right;
}

.mobile-chart { margin-top: 25px; }
.mobile-chart h4 { margin-bottom: 15px; }

.mobile-chart .bars .bar .labels {
	display: flex;
	align-items: flex-end;
	margin-bottom: 3px;
}
.mobile-chart .forecast .bars .bar .labels { justify-content: space-between; }
.mobile-chart .label-period { font-size: 12px; opacity: .6; margin-bottom: 1px; }
.mobile-chart .label-bar { font-size: 14px; margin-left: 8px; }
.mobile-chart .label-value { font-size: 14px; }

.index-module .chart .mobile-chart .status-bar {
	width: 100%;
	background: none;
}
#vup .mobile-chart .bars { display: flex; }
#vup .mobile-chart .negative-zone {
	display: block;
	width: 20%;
	min-height: 100%;
	background: rgba(31, 66, 141, 0.05);
}
#vup .mobile-chart .positive-zone { width: 80%; padding-top: 5px; }

.mobile-chart .forecast {
	background: rgba(0,0,0,.05);
	padding: 20px 25px;
	margin: 0 -25px;
	margin-top: 30px;
}
.mobile-chart .forecast .bar { opacity: .3; }
.mobile-chart .forecast .bar.second-in-probability { opacity: .6; }
.mobile-chart .forecast .bar.most-probable { opacity: 1; }

.mobile-chart .notes { 
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	line-height: 18px;
	opacity: .6;
	margin-bottom: 15px; 
}
.mobile-chart .notes .indicator-note { max-width: 60%; }
.mobile-chart .label-probability { font-size: 12px; }


#mobile-nav-open {
	cursor: pointer;
	position: fixed; 
	top: 50px;
	right: 40px;
	z-index: 1000;
	opacity: 0;
	transition: all .25s;
}
#mobile-nav-open.visible { 
	opacity: 1;
}
#mobile-nav-open circle {
	fill: white;
	transition: fill .25s;
}
#mobile-nav-open line {
	fill: none;
	stroke: var(--idea-base-color);
	stroke-width: 3px;
	transition: stroke .25s;
}
#mobile-nav-open:hover circle { fill: var(--idea-base-color); }
#mobile-nav-open:hover line { stroke: white; }

#mobile-nav {
	position: fixed;
	top: 0; right: -200%;
	width: 100%;
	max-width: 500px;
	height: 100%;
	background: rgba(0,0,0,1);
	color: white;
	z-index: 1500;
	overflow-y: scroll;
	padding-right: 20px;
	box-sizing: content-box;
	transition: all .3s;
}
#mobile-nav.active { right: -20px; }
#mobile-nav .wrapper {
	margin: 10% 7% 15%;
}
#mobile-nav .page-link {
	cursor: pointer;
	padding-bottom: 10px;
	font-size: 18px;
	transition: opacity .25s;
}
#mobile-nav .page-link:hover { opacity: .6; }
#mobile-nav .page-link.category { padding-bottom: 10px; }
#mobile-nav .page-link.item {
	font-size: 14px;
	padding-left: 10px;
}
#mobile-nav .section, #mobile-nav #pg-link-authors { margin-top: 20px; }
svg#mobile-nav-close {
	position: absolute;
	top: 30px; right: 30px;
	width: 15px;
	height: 15px;
}
svg#mobile-nav-close line {
	fill: none;
	stroke: white;
	stroke-width: 3px;
	cursor: pointer;
}
svg#mobile-nav-close:hover { opacity: .6; }

#mobile-nav, #mobile-nav-open {
	display: none;
	visibility: hidden;
}

@media screen and (max-width:1220px), screen and (max-height:800px) {
	body { min-width: 320px; }

	header { 
		height: auto; 
		background-size: cover; 
		background-position-y: 150px; 
		padding-bottom: 250px; 
	}
	svg#scroll-down { display: none; }

	#intro { width: auto; }
	#intro { max-width: 90%; }
	#intro .index-container { display: block;  }

	#index.bottom, #index.fixed { position: static; }
	#index, #intro .text { margin: 0 auto 75px; }
	#index { display: none; }
	
	.index-module { padding-left: 0; }

	.title .bg { flex-wrap: wrap; flex-direction: column; padding: 0 25px; }
	.title h2 { padding-left: 0; margin-bottom: 60px; padding-bottom: 0; width: 100%; }
	.title .bg .items-list { display: block; visibility: visible; width: 100%; }
	
	#authors { padding-left: 30px; padding-right: 30px; }
	#authors .wrapper { width: auto; max-width: 1000px; }
	#authors .flexbox:not(.author) { 
		flex-wrap: wrap;
	}

	#footer ul { flex-wrap: wrap; }

	#mobile-nav, #mobile-nav-open {
		display: block;
		visibility: visible;
	}

}

@media screen and (max-width:1000px) {
	header { padding: 0 25px 150px; }
	header h1 { font-size: 70px; line-height: 80px; }
	#authors .author { margin: 0 auto 30px; }
	#authors .author .text { width: auto; max-width: 600px; }
}

@media screen and (max-width:800px) {
	header { 
		background-image: url(i/bg-vertical.png);
		background-position: center bottom;
		padding: 50px 25px 350px; 
	}
	p.emphasize, #intro p.emphasize {
		font-size: 32pt;
		line-height: 42pt;
		margin: 60px 0 60px 50px; 
		font-style: italic;
	}
	#cni-logo, ul#locale { position: static; }
	#cni-logo { display: block; margin: 0 auto 50px; }
	header #title { padding-top: 30px; margin-bottom: 50px; }
	header h1 { font-size: 60px; line-height: 72px; }
	header h2 { line-height: 36px; }
	ul#locale { justify-content: center; }
	ul#locale li:first-child { margin-left: 0; }

	section { padding: 0; }

	.title h2 { margin-top: 50px; }
	.title .bg .index-item { align-items: flex-end; }
	.title .bg .items-list .index-item .item-name { max-width: 50%; }
	.title .bg .items-list .index-item { margin-bottom: 15px; }

	.index-module { 
		max-width: 100%;
		padding: 0 25px; 
		margin-bottom: 150px;
	}
	.index-module h3 { text-align: center; max-width: 100%; }
	.index-module .info {
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}
	.index-module .info img { margin: 0 auto 15px;  }
	.index-module .info .text { max-width: 100%; }

	.controls { flex-wrap: wrap; justify-content: center; }
	.controls .controls-group { margin-top: 8px; align-items: center; }
	/*.controls .control { text-align: center; display: flex; align-items: center; }*/

	.index-module .chart .flexbox div.box {
		width: 100%;
		padding: 25px 20px 30px;
	}
	#identychnasc .chart .flexbox, #univery .chart .flexbox, #menshasci .chart .flexbox { flex-wrap: wrap; }

	#footer .mainbox li { max-width: 90%; margin: 0 auto 30px; }
	#footer ul { display: block; }
}

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

	#cni-logo { max-width: 90px; margin-bottom: 50px; }

	header { background-size: 100%; padding-bottom: 250px; }
	header h1 { font-size: 50px; line-height: 60px; }
	header h2 { font-size: 22px; line-height: 32px; }

	header #title { padding-top: 0; margin-bottom: 30px; }

	ul#locale li {
		font-size: 14px;
		line-height: 18px;
	}

	#viz-overview { display: none; }

	p.emphasize, #intro p.emphasize {
		font-size: 24pt;
		line-height: 32pt;
		margin: 30px 0 30px 20px; 
		font-style: italic;
	}
	.title h2, h2 { 
		font-size: 42px;
		line-height: 50px;
	}
	.controls .controls-group { margin-right: 0; }

	.index-module h3 {
		font-size: 32px;
		line-height: 40px;
	}
	.index-module .info img { max-width: 200px; max-height: 200px; }
	.index-module svg { display: none; visibility: hidden; }
	.author { flex-wrap: wrap; flex-direction: column-reverse; justify-content: center; }
	.author img { margin: 0 auto 10px; }
	.author .text { margin: 0; }

	#mobile-nav-open {
		top: 20px;
		right: 20px;
	}

	.forecast-zone .notes {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		line-height: 18px;
		margin-bottom: 15px;
	}
	.forecast-zone .labels {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}
	.forecast-zone .labels .label-value {
		padding-left: 30px;
	}
	.forecast-zone .labels .label-value span.points {
		display: inline-block;
    	margin-left: -30px;
    	margin-right: 5px;
    	min-width: 25px;
    	font-weight: bold;
	}
	.forecast-zone .labels .label-probability {
		font-weight: bold;
		margin-left: 25px;
	}
	.index-module .chart .status-bar {
		width: 100%;
	}
	#menshasci .chart .flexbox,
	#uzaemadapamoga .chart .flexbox,
	#gender-gap .chart .flexbox,
	#identychnasc .chart .flexbox { display: block; }
	.index-module .chart .flexbox div.box { width: auto; padding: 0; }
	.index-module .chart .flexbox div.box.future {
		padding: 20px 25px;
		margin: 30px -25px 0;
	}
	#padrykhtavanasc-da-reformau .future, #zneshnjaja-palityka .future, #partyjnaja-sistema .future, #palitychnaja-reforma .future {
		padding: 25px 25px 30px;
		margin: 0 -25px;
	}

	#adukacyja-EU, #adukacyja-RU { display: block; }
	#jakasc-adukacyi .future { margin-top: 10px; }
	.index-module#jakasc-adukacyi .stat .text { margin-bottom: 30px; }
	#jakasc-adukacyi table { width: 100%; }
	#jakasc-adukacyi table td:nth-child(3) { width: 60%; }

	.index-module .forecast-zone .second-in-probability { opacity: 1; }
	.index-module .forecast-zone .other-scenarios { opacity: .5; }

	#partnery h3 { margin-bottom: 50px; }
	#partnery a { display: block; margin-bottom: 30px; }
	#partnery a img { width: 100%; max-width: 180px; }

}

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

	header { padding-bottom: 160px; }

	#skip-methods {
		margin-top: 50px;
		margin-bottom: 60px;
		font-size: 16px;
		line-height: 22px;
		max-width: 150px;
	}

	header h1 { font-size: 36px; line-height: 42px; }
	header h2 { font-size: 18px; line-height: 24px; }

	.title h2, h2 { 
		font-size: 35px;
		line-height: 42px;
	}	
	.title .bg .items-list .index-item { font-size: 12px; }

	.index-module { margin-bottom: 80px; }

	.index-module .stat .text {
		padding: 25px 25px 10px;
	}
	.index-module .text .slider-text {
		padding: 30px 20px 30px 5px;
	}

	#identychnasc .chart table .status-bar { width: auto; }
}