@font-face {font-family: Montserrat; src: url('fonts/montserrat_medium.ttf');}

html, body {margin: 0; padding: 0;}
body {background: #191c2e /*#080c21*/; font-family: Arial; font-size: 14px; color: #d2d2d2;}
img {border: none;}
input, textarea, select {font-family: Arial; outline: none; border-radius: 0; -webkit-appearance: none;}

#splash {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #191c2e /*#080c21*/; transition: transform 0.4s ease-in-out;}
#splash.hide {transform: translateY(-100%);}
#splash #splash_inner {position: relative; width: 428px; height: 100%; margin: 0 auto;}
#splash #splash_inner #splash_logo {position: absolute; top: 20%; left: 0; width: 100%;}
#splash #splash_inner #splash_logo img {width: 36%; margin: 0 0 0 32%;}
#splash #splash_inner #splash_text {position: absolute; top: 50%; left: 0; width: 100%;}
#splash #splash_inner #splash_text #splash_text_title {font-family: Montserrat; font-size: 42px; color: #f2f2f2; text-align: center;}
#splash #splash_inner #splash_text #splash_text_tagline {margin: 15px 0 0 0; font-size: 16px; color: #9eaabd; line-height: 22px; text-align: center;}
#splash #splash_inner a {position: absolute; bottom: 25%; left: 0; display: block; width: 80%; height: 50px; line-height: 50px; margin: 0 10%; background: #256aff; font-size: 18px; color: #f2f2f2; text-decoration: none; text-align: center; border-radius: 8px;}

#page {display: none; width: 428px; margin: 0 auto; padding: 20px 0 0 0;}
#positions {padding: 10px 0 0 0; overflow: auto;}
#positions a {display: block; float: left; width: 67.16px; height: 38px; line-height: 38px; background: #242841; color: #fff; text-decoration: none; text-align: center;}
#positions a#position_lj {background: #3d4470; color: #fff;}
#positions a.filter_margin {margin: 0 5px 0 0;}
#scenarios {overflow: auto; padding: 15px 0 0 0;}
#scenarios a {display: block; float: left; width: 211.5px; height: 28px; line-height: 28px; background: #242841; font-size: 12px; color: #fff; text-decoration: none; text-align: center;}
#scenarios a.scenario_left {margin: 5px 5px 0 0;}
#scenarios a.scenario_right {margin: 5px 0 0 0;}
#scenarios a#scenario_active {background: #3d4470; color: #fff;}
#chart {overflow: auto; width: 428px; margin: 30px 0 0 0;}
#chart_hj_firstin, #chart_co_firstin, #chart_bu_firstin, #chart_sb_firstin, #chart_bb_firstin {display: none;}
#chart .box {float: left; width: 32px; height: 32px; line-height: 30px; background: #3d4470 /*#323741*/; font-size: 12px; color: #d2d2d2; text-align: center;}
#chart .margin {margin: 0 1px 1px 0;}
#chart .nomargin {margin: 0 0 1px 0;}
#chart .red {background: #dd1c3f; color: #f2f2f2;}
#chart .yellow {background: #f9d175; color: #272a42;}
#chart .green {background: #34a164; color: #f2f2f2;}
#legend {width: 428px; margin: 20px 0 0 0;}
#legend ul {list-style: none; margin: 0; padding: 0;}
#legend ul li {margin: 5px 0; padding: 0; overflow: auto;}
#legend ul li .legend_color {float: right; width: 22px; height: 22px;}
#legend ul li .red {background: #dd1c3f; color: #f2f2f2;}
#legend ul li .yellow {background: #f9d175; color: #272a42;}
#legend ul li .green {background: #34a164; color: #f2f2f2;}
#legend ul li .legend_description {float: right; width: calc(100% - 30px); margin: 0 8px 0 0; line-height: 22px; font-size: 12px; text-align: right;}
#footer {margin: 40px 0 50px 0; font-size: 12px; text-align: center;}
#footer a {color: #969696; text-decoration: none;}
#footer a:hover {text-decoration: underline;}
#footer span {padding: 0 5px;}

#contact {display: none; width: 428px; margin: 0 auto; color: #ddd;}
#terms {display: none; width: 428px; margin: 0 auto; color: #ddd;}
#privacy {display: none; width: 428px; margin: 0 auto; color: #ddd;}
.misc {}
.misc .misc_back {height: 30px; padding: 20px 0 0 0; overflow: auto;}
.misc .misc_back img {float: left; display: block; height: 20px; margin: 5px 10px 0 0;}
.misc .misc_back a {float: left; display: block; height: 30px; line-height: 30px; color: #ddd; text-decoration: none;}
.misc .misc_back a:hover {text-decoration: underline;}
.misc .misc_title {margin: 20px 0 20px 0; font-family: Montserrat; font-size: 28px;}
.misc #contact_email {margin: 25px 0 0 0; padding: 15px 20px; background: #1b1c20; border-left: #3d4470 solid 8px;}
.misc p {margin: 10px 0; line-height: 22px;}
.misc p.paragraph_title {margin: 20px 0 10px 0; font-size: 16px; font-weight: bold;}
.misc ul {}
.misc ul li {margin: 3px 0;}

@media screen and (max-width: 970px) {
	#splash #splash_inner {width: 374px;}
	#splash #splash_inner #splash_logo {top: 20%;}
	#splash #splash_inner #splash_text {top: 60%;}
	#splash #splash_inner a {bottom: 10%;}
	#page {width: 374px;}
	#chart {width: 374px; margin: 10px 0 0 0;}
	#chart .box {width: 26px; height: 26px; line-height: 26px; font-size: 11px;}
	#legend {width: 374px; margin: 20px 0 0 0;}
	#legend ul li .legend_color {width: 26px; height: 26px;}
	#legend ul li .legend_description {line-height: 26px;}
	#contact {width: 374px;}
	#terms {width: 374px;}
	#privacy {width: 374px;}
}