html, body {
    box-sizing: content-box;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: auto;
    width: 100%;
}

div#popUp {
    display: block;
    width: 200px;

    border: 1px solid #AAAAAA;
    border-radius: 3px;
    padding: 20px;
    position: absolute;
    background-color: white;
    z-index: 99999;
    top: 0;
    left: 0;
    box-sizing: border-box;
}

div#close {
    background-image: url(./images/close.png);

    width: 12px;
    height: 11px;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    opacity: 1;
}

#close:hover {
    opacity: 0.8;
}

div.pop-date {
    font-family: "FiraSans-Regular";

    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

div.pop-line {
    width: 100%;

    border: 1px solid black;
    margin-bottom: 15px;
}

div.pop-title {
    font-family: "FiraSans-Regular";

    color: #D74214;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

div.pop-description {
    color: #434343;

    font-family: "FiraSans-Regular";
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 15px;
}

div.pop-subline {
    width: 40px;

    border: 1px solid black;
    margin-bottom: 15px;
}

div.pop-place {
    font-family: "FiraSans-Regular";

    color: #A1A1A1;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 0;
}

div.pop-link {
    text-transform: uppercase;

    font-family: "FiraSans-Regular";
    font-size: 10px;
    color: white;
    background-color: #434343;
    padding: 3px;
    width: 120px;
    text-align: center;
    cursor: pointer;
    opacity: 1;
    margin-top: 15px;
}

.pop-link:hover {
    opacity: 0.8;
}

body {
    font-family: "FiraSans-Regular";
    -webkit-font-smoothing: antialiased;
}

#loader {
    position: absolute;
    z-index: 0;
    /* margin-left: 50%; */
    /* margin-right: 50%; */
}

#map-container {
    position: relative;
    border: 2px solid black;
    margin-left: 40px;
    margin-right: 40px;
    overflow: hidden;
}

@font-face {
    font-family: 'FiraSans-Light';
    src: url('fonts/FiraSansLight/FiraSans-Light.eot');
    src: url('fonts/FiraSansLight/FiraSans-Light.eot?#iefix') format('embedded-opentype'),
    url('fonts/FiraSansLight/FiraSans-Light.woff2') format('woff2'),
    url('fonts/FiraSansLight/FiraSans-Light.woff') format('woff'),
    url('fonts/FiraSansLight/FiraSans-Light.ttf') format('truetype'),
    url('fonts/FiraSansLight/FiraSans-Light.svg#FiraSans-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FiraSans-Medium';
    src: url('fonts/FiraSansMedium/FiraSans-Medium.eot');
    src: url('fonts/FiraSansMedium/FiraSans-Medium.eot?#iefix') format('embedded-opentype'),
    url('fonts/FiraSansMedium/FiraSans-Medium.woff2') format('woff2'),
    url('fonts/FiraSansMedium/FiraSans-Medium.woff') format('woff'),
    url('fonts/FiraSansMedium/FiraSans-Medium.ttf') format('truetype'),
    url('fonts/FiraSansMedium/FiraSans-Medium.svg#FiraSans-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FiraSans-Regular';
    src: url('fonts/FiraSansRegular/FiraSans-Regular.eot');
    src: url('fonts/FiraSansRegular/FiraSans-Regular.eot?#iefix') format('embedded-opentype'),
    url('fonts/FiraSansRegular/FiraSans-Regular.woff2') format('woff2'),
    url('fonts/FiraSansRegular/FiraSans-Regular.woff') format('woff'),
    url('fonts/FiraSansRegular/FiraSans-Regular.ttf') format('truetype'),
    url('fonts/FiraSansRegular/FiraSans-Regular.svg#FiraSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

div#ig {
    display: block;
    width: 100%;
    max-width: 768px;
    border: 1px solid #CCCCCC;
    position: relative;
    /* overflow: hidden; */
    box-sizing: border-box;
}

div#ig {
    /* padding: 40px; */

}

div#loader {

}

div#title {
    font-family: "FiraSans-Medium";

    font-size: 18px;
    color: black;
    margin-bottom: 20px;
    padding-right: 40px;
    padding-left: 40px;
    padding-top: 40px;
}

#date-controls .controls-radio {
    width: 20%;
    min-width: 140px;
    display: inline-block;
}

#event-controls .controls-radio {
    /* width: 20%; */
    width: 140px;
    margin-right: 5%;
    min-width: 140px;
    margin-bottom: 15px;
}

div#controls {
    /* width: 105%; */

    font-size: 0;
    margin-bottom: 10px;
    padding-left: 40px;
    /* padding-top: 40px; */
}

div#date-controls {
    width: 20%;

    display: inline-block;
    vertical-align: top;
    font-size: 0;
    min-width: 140px;
}

#dop {
    display: none;
}

div.controls-title {
    font-family: "FiraSans-Regular";

    font-size: 10px;
    font-weight: 600;
    color: #D74214;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.controls-radio {
    display: inline-block;
    font-family: "FiraSans-Regular";

    font-size: 13px;
    color: #A1A1A1;
    cursor: pointer;
    opacity: 1;
    /* margin-bottom: 10px; */
    vertical-align: top;
    height: 43px;
    user-select: none;
}

.right-column {
    width: 481px;

    /* margin-left: 20px; */
    margin-top: 30px;
}

.pie0 {
    background-image: url(./images/pie0_big.png);

    width: 301px;
    height: 223px;
    background-repeat: no-repeat;
}

.pie1 {
    background-image: url(./images/pie1_big.png);

    width: 301px;
    height: 142px;
}

.controls-radio:hover {
    opacity: 0.8;
}

.active {

}

#filler {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 98999999;
    display: block;
}

#date-controls .radio-square {
    width: 10px;

    height: 10px;
    border: 1px solid #A1A1A1;
    /* float: left; */
    margin-right: 10px;
    margin-top: 4px;
    vertical-align: top;
    display: inline-block;
}

#event-controls .radio-square {
    margin-right: 10px;
    margin-top: 4px;
    vertical-align: top;
    display: inline-block;
    width: 20px;

    height: 20px;

    opacity: 0.3;
    /* margin-bottom: 10px; */
}

.last-item {
    /* padding-left: 15px; */

    margin-right: 0 !important;
}

#date-controls .active .radio-square {
    border: 1px solid #434343;
    background-image: url(./images/cross.png);
    background-position: 50% 50%;

    background-repeat: no-repeat;
    background-size: contain;
}

#event-controls .active .radio-square {
    opacity: 1;
}

.radio-name {
    display: inline-block;

    width: 75%;
    line-height: 1.3;
    /* text-transform: lowercase; */
}

div.controls-radio.active {
    color: #434343;

}

.column {
    /* width: 50%; */
    display: inline-block;
    vertical-align: top;
    /* min-width: 240px; */
    font-size: 0;
}

div#event-controls {
    width: 80%;

    display: inline-block;
    font-size: 0;
    vertical-align: top;
}

#event-controls .column {

}

#event-controls .column .column {
    min-width: 140px;

}

.temp {
    font-face: "PTSans-Regular"
}

.temp2 {
    font-face: "PTSans-Italic";
}

div#mapDiv {
    width: 100%;

    height: 100%;
    max-height: 776px;
}

div#timeline {

    margin-left: 40px;
    margin-right: 40px;
}

div#questions {
    padding-left: 40px;

}

div.question-title {
    font-family: "FiraSans-Regular";

    font-size: 14px;
    text-transform: uppercase;
    margin-top: 20px;
    color: #434343;
    font-weight: 600;
    /* margin-bottom: 20px; */
    margin-top: 50px;
    margin-bottom: 30px;
}

div.question-block {

}

div.block-title {
    font-family: "FiraSans-Regular";

    font-size: 16px;
    color: #434343;
    margin-bottom: 20px;
    margin-top: 30px;
}

div.question-columns {
    font-size: 0;

    position: relative;
}

div.question-column {
    font-size: 0;

    /* width: 42%; */
    display: inline-block;
    background-repeat: no-repeat;
    vertical-align: top;
    /* margin-left: 20px; */
    position: relative;
}

div.legend-item {
    width: auto;
    display: inline-block;

    /* width: 45%; */
    /* margin-right: 20px; */
    /* padding: 10px; */
    /* margin-left: 20px; */
    margin-right: 2px;
    /* margin-bottom: 5px; */
    /* width: 100%; */
    vertical-align: top;
    font-size: 0;
    margin-top: 3px;
}

div.legend-icon {
    width: 10px;

    height: 10px;
    background-color: red;
    /* float: left; */
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
}

div.legend-description {
    font-family: "FiraSans-Regular";

    font-size: 13px;
    color: #434343;
    display: inline-block;
    width: 20%;
    vertical-align: top;
    /* text-transform: capitalize; */
    text-transform: uppercase;
    font-family: "FiraSans-Regular";
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 3px;
    width: auto;
}

div.legend-sub {
    font-family: "FiraSans-Regular";

    font-size: 13px;
    color: #A1A1A1;
    margin-left: 20px;
    position: absolute;
    bottom: 0;
    left: 300px;
}

div#original-block {
    margin-top: 20px;

}

div.original-items {
    font-size: 0;

}

div.original-item {
    display: inline-block;

    width: 144px;
    font-size: 0;
    vertical-align: top;
    /* padding: 15px; */
    margin-right: 15px;
    /* min-width: 155px; */
    margin-bottom: 20px;
}

div.original-icon {
    width: 100%;

    height: 63px;
    background-repeat: no-repeat;
    background-position: center center;
    margin-bottom: 20px;
}

div.original-description {
    font-family: "FiraSans-Regular";

    font-size: 13px;
    color: #434343;
    line-height: 1.3;
}

div#footer {
    /* margin-left: -40px; */

    /* margin-top: 50px; */
    padding: 40px;
}

div#ig-logo {
    background-image: url(./images/ig.png);

    width: 173px;
    height: 9px;
    /* float: left; */
    margin-top: 6px;
}

div#moslenta-logo {
    background-image: url(./images/moslenta.png);

    width: 125px;
    height: 14px;
    margin-bottom: 10px;
    float: right;
}

.blank0 {
    width: 100%;

    height: 40px;
    position: absolute;
    /* top: 20px; */
    z-index: 1;
    /* background-color: red; */
}

.blank1 {
    width: 100%;

    height: 40px;
    /* background-color: red; */
    position: absolute;
    bottom: 0px;
    z-index: 9999;
}

/* CSS Generated by Primer - primercss.com */

div#timeline {
    overflow: hidden;

}

div.question-title {

}

div#years {
    height: 37px;

    position: relative;
    margin-bottom: 60px;
    left: 0px;
}

.year {

}

.current {

}

div.year-name {
    font-family: "FiraSans-Regular";

    font-size: 13px;
    color: #A1A1A1;
    margin-bottom: 5px;
    white-space: nowrap;
}

.current .year-dot {
    border-color: #D74214;

}

.current .year-name {
    color: black;

}

div.year-dot {
    border: 2px solid #A1A1A1;

    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin: auto;
    background-color: white;
    z-index: 4;
}

div.year {
    position: absolute;

    z-index: 2;
    opacity: 1;
    cursor: pointer;
}

div.year:hover {
    opacity: 0.8;
}

div.year.current {
    opacity: 1;
    cursor: default
}

div.year.current:hover {
    opacity: 1;
}

div.line {
    width: 1500px;

    height: 1px;
    border-bottom: solid 1px #A1A1A1;
    position: absolute;
    bottom: 5.5px;
}

#y0 {
    opacity: 1;
}

.year-button {
    cursor: pointer;
    opacity: 1;
}

.year-button:hover {
    opacity: 0.5;
}

.mobile-navigation {
    height: 30px;

}

#desktop-navigation {

}

div.year-description {
    width: 100%;

    background-color: #F6F6F6;
    border-bottom: solid 2px black;
    border-top: solid 2px black;
    min-height: 177px;
    height: 177px;
    position: relative;
}

.red-left {
    background-image: url(./images/red-arrow-left.png);

    width: 8px;
    height: 13px;
    float: left;
}

.red-right {
    background-image: url(./images/red-arrow-right.png);

    width: 8px;
    height: 13px;
    float: right;
}

div.years-collection {
    position: relative;

}

div.year-item {
    display: none;

    position: Absolute;
    opacity: 0;
}

div.current-year-item {
    display: block;

    /* position: inherit; */
    /* opacity: 0; */
}

div.year-image {
    width: 220px;

    height: 150px;
    background-position: center bottom;
    display: inline-block;
    margin-left: 58px;
    margin-top: 0;
    margin-right: 70px;
    background-repeat: no-repeat;
}

div.year-text {
    display: inline-block;

    width: 300px;
    font-family: "FiraSans-Regular";
    font-size: 13px;
    line-height: 1.3;
    color: #434343;
}

div.year-next {
    background-image: url(./images/arrow-right.png);

    width: 50px;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 0;
    /* cursor: pointer; */
}

div.year-prev {
    height: 100%;

    width: 50px;
    background-image: url(./images/arrow-left.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    top: 0;
}

#u0 {
    left: 54px;
}

#u1 {
    left: 210px;
    text-align: center;
}

#u2 {
    left: 291px;
}

#u3 {
    left: 370px;
}

#u4 {
    left: 451px;
}

#u5 {
    left: 510px;
}

#u6 {
    left: 611px;
}

#u7 {
    left: 691px;
}

#u8 {
}

#u9 {
}

#music .radio-square {
    background-image: url(./icons/music_4.png);

    width: 20px;
    height: 20px;
}

#theater .radio-square {
    background-image: url(./icons/theater_4.png);

    width: 20px;
    height: 20px;
}

#child .radio-square {
    background-image: url(./icons/child_4.png);

    width: 20px;
    height: 20px;
}

#literature .radio-square {
    background-image: url(./icons/literature_4.png);

    width: 20px;
    height: 20px;
}

#creation .radio-square {
    background-image: url(./icons/creation_4.png);

    width: 20px;
    height: 20px;
}

#education .radio-square {
    background-image: url(./icons/education_4.png);

    width: 20px;
    height: 20px;
}

#market .radio-square {
    background-image: url(./icons/market_4.png);

    width: 20px;
    height: 20px;
}

#artob .radio-square {
    background-image: url(./icons/artob_4.png);

    width: 20px;
    height: 20px;
}

#sport .radio-square {
    background-image: url(./icons/sport_4.png);

    width: 20px;
    height: 20px;
}

#firework .radio-square {
    background-image: url(./icons/firework_4.png);

    width: 20px;
    height: 20px;
}

#ves .radio-square {
    background-image: url(./icons/ves_4.png);

    width: 20px;
    height: 20px;
}

#pokolenie .radio-square {
    background-image: url(./icons/pokolenie_4.png);
    width: 20px;
    height: 20px;

}

#smile .radio-square {
    background-image: url(./icons/smile_4.png);

}

#vazhno .radio-square {
    background-image: url(./icons/vazhno_4.png);

}

#chitaem .radio-square {
    background-image: url(./icons/chitaem_4.png);

}

#zhenskoe .radio-square {
    background-image: url(./icons/zhenskoe_4.png);

}

#heart .radio-square {
    background-image: url(./icons/heart_4.png);

}

#vsegdazdorov .radio-square {
    background-image: url(./icons/vsegdazdorov_4.png);

}

#muzhskoe .radio-square {
    background-image: url(./icons/muzhskoe_4.png);

}

#dveri .radio-square {
    background-image: url(./icons/dveri_4.png);

}

#tuberkulez .radio-square {
    background-image: url(./icons/tuberkulez_4.png);

}

#legkie .radio-square {
    background-image: url(./icons/legkie_4.png);

}

#shater .radio-square {
    background-image: url(./icons/shater_4.png);

}

#glaukoma .radio-square {
    background-image: url(./icons/glaukoma_4.png);

}

#legend {
    margin-left: 40px;

    margin-bottom: 20px;
}

#bus-num {
    font-family: "FiraSans-Regular";

    font-size: 36px;
    color: #434343;
    letter-spacing: 1px;
    display: block;
    /* float: left; */
    width: 46px;
    /* text-align: center; */
}

#bus-description {
    font-family: "FiraSans-Regular";

    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.7px;
    /* display: inline-block; */
    /* width: 77%; */
    float: right;
    width: 172px;
    margin-right: 10px;
    padding-top: 15px;
}

#l0 .legend-color {
    /* width: 10px; */

    /* height: 10px; */
    background-image: url(./icons/bus_4.png);
    /* background-repeat: no-repeat; */
    /* display: inline-block; */
    /* margin-right: 10px; */
}

#l1 .legend-color {
    background-image: url(./icons/troll_4.png);

}

#l2 .legend-color {
    background-image: url(./icons/tram_4.png);

}

.legend-color {
    width: 20px;

    background-repeat: no-repeat;
    display: inline-block;
    margin-right: 2px;
    height: 20px;
    /* font-family: "FiraSans-Regular"; */
    /* font-size: 10px; */
    /* font-weight: 600; */
}

.legend-item.bus {
    color: #C4B04D;

}

.legend-item.trolley {

}

.legend-item.tram {

}

.checkbox {
    opacity: 1;
}

.checkbox .legend-color {
    width: 9px;

    height: 9px;
    border: 2px solid #DDDDDD;
    margin-top: 6px;
    border-radius: 9px;
}

.checkbox:hover {
    opacity: 0.8;
}

.checkbox.active {
    opacity: 1;
    cursor: default !important;
}

.checkbox .legend-description {
    font-size: 13px;

}

.checkbox.legend-item {
    margin-right: 3px;

    margin-top: 0;
    cursor: pointer;
    display: inline-block;
}

.bus .legend-color {
    border-color: #C4B04D;

}

.trolley .legend-color {
    border-color: #4D61C4;

}

.tram .legend-color {
    border-color: #D74214;

}

.bus .legend-description {
    /* color: #C4B04D; */

}

.trolley .legend-description {
    /* color: #4D61C4; */

    text-transform: inherit;
}

.tram .legend-description {
    /* color: #D74214; */

}

.bus.active .legend-color {
    background-color: #C4B04D;
}

.tram.active .legend-color {
    background-color: #D74214;
}

.trolley.active .legend-color {
    background-color: #4D61C4;
}

.list {
    display: inline-block;

    margin-right: 5px;
    /* display: block; */
}

#direction {
    margin-bottom: 15px;

}

#arrow {
    float: left;

    width: 8px;
    height: 74px;
    background-image: url(./images/arrowDown.png);
    margin-top: 3px;
    margin-right: 9px;
    background-repeat: no-repeat;
}

#from {
    text-transform: uppercase;

    font-family: "FiraSans-Regular";
    font-size: 10px;
    color: #231F20;
    font-weight: 600;
    letter-spacing: 0.7px;
    margin-bottom: 2px;
    /* float: left; */
}

#to {
    text-transform: uppercase;
    font-family: "FiraSans-Regular";
    font-size: 10px;
    color: #231F20;
    letter-spacing: 0.7px;
    font-weight: 600;

    /* background-image: url(./images/switchButton.png); */
    /* width: 29px; */
    /* height: 29px; */
    /* float: left; */
}

#switchButton {
    /* text-transform: uppercase; */
    /* font-family: "FiraSans-Regular"; */
    /* font-size: 10px; */
    color: #231F20;
    /* font-weight: 600; */

    /* width: 89%; */
    background-image: url(./images/switchButton.png);
    width: 79px;
    height: 29px;
    /* float: left; */
    background-repeat: no-repeat;
    width: 100%;
    background-position: 16px;
    margin-top: 11px;
    margin-bottom: 9px;
}

#bus-time {
    color: #C4B04D;

    text-transform: uppercase;
    font-family: "FiraSans-Regular";
    font-size: 10px;
    /* color: #231F20; */
    /* font-weight: 600; */
    letter-spacing: 0.7px;
}

#work-time {
    /* color: #C4B04D; */

    text-transform: uppercase;
    font-family: "FiraSans-Regular";
    font-size: 10px;
    color: #231F20;
    /* font-weight: 600; */
    letter-spacing: 0.7px;
    overflow-wrap: normal;
}

#switchButton {
    opacity: 1;
    cursor: pointer;
}

#switchButton:hover {
    opacity: 0.8;
}

.hr {
    display: block;
    
    border-bottom: 1px solid;
    /* padding: 20px; */
    margin-right: 20px;
    margin-left: 20px;
    box-sizing: content-box;
    /* width: 100%; */
}