/*Reset*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big,
cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed,figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio,
video {margin:0; padding:0; border:0; font:inherit; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
table {border-collapse:collapse; border-spacing:0;}
a {text-decoration: none; color: black;}
p {margin: 0 0 20px 0;}
.clearfix {clear: both; float: none;}

.wrapper {margin: 0 auto; max-width: 1000px; padding: 0 20px; height: auto; box-sizing: border-box;}

header {width: 100%; max-height: 275px; background: url('../images/header_back.jpg') no-repeat center #cf0f10; background-size: cover;}
.f-header {height: 275px;}
    .f-header-text {padding: 50px 0 0 50px; width: 330px;}
    .f-header-text span {display: block; color: white;}
    .f-header-text .f-bold, .f-header-text .f-regular { text-align: center;}
    .f-header-text .f-bold {font-family: 'NeoSansProBold'; font-size: 75px; line-height: 70px;}
    .f-header-text .f-regular {font-family: 'NeoSansProRegular'; font-size: 70px; line-height: 56px;}
    .f-header-text .f-small {font-family: 'NeoSansProRegular'; font-size: 30px; line-height: 50px; text-align: right;}
    .f-flag {background: url('../images/flag.png') no-repeat; position: absolute; width: auto; height: 275px; top: 0; right: 0; left: 52%; }
    .f-car {background: url('../images/car.png') no-repeat; position: absolute; width: auto; height: 383px; top: 0; right: 0; left: 44%; }

.page1 {background: url('../images/bg1.jpg') no-repeat; background-size: cover; background-position: 50% 50%; min-height: 1100px;}
    .f-social {height: 30px; padding: 15px 0;}
    .f-social a, .f-bottom-social a {display: inline-block; background: url('../images/social_sprite.png') no-repeat; width: 31px; height: 30px; margin: 0 10px 0 0;}
    .f-social a:last-child, .f-bottom-social a:last-child {margin: 0;}
        a.f-social--fb {background-position: 0 0;}
        a.f-social--tw {background-position: -40px 0;}
        a.f-social--vk {background-position: -80px 0;}
    .f-breaking, .f-news {float: left; width: 460px; min-height: 530px; box-sizing: border-box;}
    .f-breaking {position: relative; margin: 0 40px 30px 0;}
        .f-breaking .red-title {
            position: absolute; bottom: 0; left: 0; font-family: 'Clear Sans Thin'; font-size: 34px; max-width: 440px;
            background: rgba(207, 15, 16, .95); color: white; display: block; padding: 55px 40px; box-sizing: border-box;
        }
    .f-news {padding: 20px 30px 0; background: white; margin: 0 0 30px 0;}
        .f-news-wrap {position: relative;}
        .f-news .block-title {font-family: 'Clear Sans Thin'; font-size: 40px; line-height: 42px; margin: 0 0 20px 0;}
        .f-news li {margin: 0 0 25px 0; width: auto;}
        .f-news li:last-child {margin: 0;}
        .f-news li .news-date {font-family: 'Clear Sans Medium'; font-size: 12px;}
        .f-news li .news-title, .f-news li .news-summary {font-family: 'Clear Sans Light'; letter-spacing: -0.5px; display: inline-block;}
        .f-news li .news-title {font-size: 16px;}
        .f-news li .news-summary {font-size: 14px; font-style: italic; color: grey;}
        .f-news .other-news {
            font-family: 'Clear Sans Light'; background: #cf0f10; color: white; max-width: 240px; font-size: 20px;
            line-height: 40px; text-align: center; margin: 30px auto 0; display: block;
        }
    .f-documents {}
        .f-documents ul {height: auto;}
        .f-documents ul li {display: inline-block; vertical-align: top; position: relative; width: 460px; height: 150px; margin: 0 40px 60px 0;}
        .f-documents ul li:nth-child(even) {margin-right: 0;}
        .f-documents ul li img {position: absolute; width: 200px; height: 133px;}
        .f-document-title {background: white; width: 450px; height: 140px; margin: 10px 0 0 10px;}
        .f-document-title a {display: block; padding: 15px 15px 0 210px; font-family: 'Clear Sans Medium'; font-size: 22px; line-height: 24px;}

.page2 {background: url('../images/bg2.jpg') no-repeat; background-size: cover; background-position: 50% 50%; min-height: 1200px;}
    .f-road-title {font-family: 'Clear Sans Thin'; font-size: 60px; color: white; padding: 70px 0; text-align: center;}
    .track-summary {font-family: 'Clear Sans Light'; font-size: 18px; color: white; margin-bottom: 50px;}
    .track {font-family: 'Clear Sans Light'; position: relative; z-index: 1; width: 1000px; margin: 0 auto;}
    .track__clear {height: 1px;}
    .track__scheme {position: relative;}
    .track__scheme__map {display: block; width: 100%;}
    .track__scheme__map--mobile {display: none;}

    .track__ico {
        display: block; width: 56px; height: 56px; font-size: 40px; line-height: 50px; text-align: center; color: white;
        text-decoration: none; background: #d40a0b; font-weight: 300; border-radius: 30px; border:1px solid #fff;
        position: absolute; z-index: 100; box-shadow: 0 0 1px #fff;
    }

    .track__ico--active {border: 1px solid #ff7f00; box-shadow: 0 0 1px 3px #ff7f00;}
    .track__ico--1 {left: 92.5%; top: 11.3%;}
    .track__ico--2 {left: 63.3%; top: 49%;}
    .track__ico--3 {left: 25%; top:42.5%; }
    .track__ico--4 {left: 7.8%; top: 71.5%;}
    .track__ico--5 {left: 21.5%; top: 32%;}
    .track__ico--6 {left: 54%; top: 32.5%;}
    .track__ico--7 {left: 81%; top: 14%;}

    .track__current {font-size: 120px; line-height: 120%; font-weight: 300; color: #999999; position: absolute; z-index: 100; left: 26.5%; top: 53%; width: 14.4%; height: 17.6%; text-align: center;}
    .track__text {color: white; opacity: 0; position: absolute; z-index: 100; top:84.5%; right: 0; width: 63%; font-size: 32px; line-height: 38px; font-weight: 300;}
    .track__text__num {display: none; float: left; width: 26px; height: 26px; background: #ffc600; border: 2px solid #fff; font-size: 20px; line-height: 26px; text-align: center; border-radius: 16px; margin: 0 0 0 12px;}
    .track__text--active {opacity: 1;}
    .track__content {position: absolute; padding: 0 25px; bottom: 0; left: 0; z-index: 10;}
    .track__text {transition: all .5s;}
    .track__ico {transition: all .1s;}

.page3 {background: url('../images/bg3.jpg') no-repeat; background-size: cover; background-position: 50% 50%; min-height: 850px;}
    .f-wheel-title {font-family: 'Clear Sans Thin'; font-size: 60px; color: black; padding: 60px 0; text-align: center;}
    .wheel-summary {font-family: 'Clear Sans Light'; font-size: 18px;}
    .wheel {font-family: 'Clear Sans Medium'; padding: 0 7px; position: relative; z-index: 1; margin: 50px 0 0 0;}
    .wheel__image_wrap {float: left; width: 620px; position: relative; z-index: 1; padding: 10px 0 0 0;}
    .wheel__image {display: block; width: 100%;}
    .wheel__ico {position: absolute; z-index: 10; width: 26px; height: 26px; background-color: #00c7d9; padding: 4px; border-radius: 25px; line-height: 24px; text-decoration: none; text-align: center; font-size: 16px; color:#000; font-weight: bold;}
    .wheel__ico__num {display: block; position: relative; z-index: 10; width: 26px; height: 26px; background: #fff; border-radius: 26px;}
    .wheel__ico--1 {left: 18.4%; bottom: 91%; margin: 0 0 0 -13px;}
    .wheel__ico--2 {left: 24%; bottom: 93%; margin: 0 0 0 -13px;}
    .wheel__ico--3 {left: 80.3%; bottom: 92%; margin: 0 0 0 -13px;}
    .wheel__ico--4 {left: 74%; bottom: 62%;}
    .wheel__ico--5 {left: 75%; bottom: 51%;}
    .wheel__ico--6 {left: 76%; bottom: 38%;}
    .wheel__ico--7 {left: 75.5%; bottom: 24%;}
    .wheel__ico--8 {right: 42%; bottom: 28%;}
    .wheel__ico--9 {left: 67%; bottom: 49%;}
    .wheel__ico--10 {right: 38%; bottom: 66%;}
    .wheel__ico--11 {left: 49%; bottom: 61%; margin: 0 0 0 -13px;}
    .wheel__ico--12 {left: 39%; bottom: 65%;}
    .wheel__ico--13 {right: 65%; bottom: 48%;}
    .wheel__ico--14 {left: 41%; bottom: 29%;}
    .wheel__ico--15 {right: 74%; bottom: 61%;}
    .wheel__ico--16 {right: 75%; bottom: 50%;}
    .wheel__ico--17 {right: 76%; bottom: 37%;}
    .wheel__ico--18 {right: 75.8%; bottom: 24%;}
    .wheel__ico--bot:after {content: ''; position: absolute; z-index: 1; background: url("../images/ico_arrow_sprite.png") no-repeat -3px -4px; width: 12px; height: 9px; left: 11px; bottom: -7px; display: block;}
    .wheel__ico--left:after {content: ''; position: absolute; z-index: 1; background: url("../images/ico_arrow_sprite.png") no-repeat -49px -4px; width: 15px; height: 15px; left: 0; bottom: 0; display: block;}
    .wheel__ico--right:after {content: ''; position: absolute; z-index: 1; background: url("../images/ico_arrow_sprite.png") no-repeat -98px -4px; width: 15px; height: 15px; right: 0; bottom: 0; display: block;}
    .wheel__ico--active {width: 40px; height: 40px; background: #ff0000; border-radius: 26px; border-width: 6px; line-height: 38px; font-size: 24px; z-index: 11;}
    .wheel__ico--active .wheel__ico__num {width: 40px; height: 40px;}
    .wheel__ico--active.wheel__ico--bot:after {background: url("../images/ico_arrow_sprite.png") no-repeat -24px -4px; width: 17px; height: 17px; bottom: -10px; left: 16px;}
    .wheel__ico--active.wheel__ico--left:after {background: url("../images/ico_arrow_sprite.png") no-repeat -72px -4px; width: 17px; height: 17px;}
    .wheel__ico--active.wheel__ico--right:after {background: url("../images/ico_arrow_sprite.png") no-repeat -120px -4px; width: 17px; height: 17px;}
    .wheel__ico--active.wheel__ico--1 {margin: 0 0 0 -20px;}
    .wheel__ico--active.wheel__ico--2 {margin: 0 0 0 -20px;}
    .wheel__ico--active.wheel__ico--3 {margin: 0 0 0 -20px;}
    .wheel__ico--active.wheel__ico--11 {margin: 0 0 0 -20px;}
    .wheel__text_wrap {width: 290px;float: right; position: relative; z-index: 1;}
    .wheel__text {font-weight: bold; position: absolute; z-index: 1; left:0; top:0; opacity: 0;}
    .wheel__text p {margin: 0;}
    .wheel__text__num {width: 50px; height: 50px; line-height: 50px; font-size: 30px; font-weight: bold; text-align: center; border: 5px solid #d90000; border-radius: 60px; margin: 0 0 8px 0;}
    .wheel__text--active {opacity: 1;}
    .wheel__text {transition: all .3s;}
    .wheel__control {display: none;position: absolute; z-index: 1; bottom: 80px;}
    .wheel__control--left {left:0;}
    .wheel__control--right {right: 0;}
    .wheel__control a {display: block; width: 1px; height: 1px; border-top: 27px solid transparent; border-bottom: 27px solid transparent;}

.page4 {background: url('../images/bg4.jpg') no-repeat; background-size: cover; background-position: 50% 50%; min-height: 850px; position: relative;}
    .f-bottom-social {height: 30px; max-width: 150px; width: auto; position: absolute; top: -15px; left: 47%;}
    .f-top-button {cursor: pointer; background: url('../images/top_button.png') no-repeat; width: 182px; height: 182px; margin: 0 auto; position: relative; top: 280px;}

@media screen and (max-width: 1040px) {
    .track {width: auto;}
    .track__scheme {margin: 0;}
    .track__content {position: static;}
    .track__description {position: relative; z-index: 1;}
    .track__ico {width: 40px; height: 40px; line-height: 40px; font-size: 30px;}
    .track__text {width: 61%; padding: 0 2% 0 0;}
    .track__current {font-size: 100px;}

    .wheel__image_wrap {width: auto; max-width: 620px; margin: 0 auto; float: none;}
    .wheel__text_wrap {float: none; margin: 0 auto; padding: 20px 0 0 0; width: 80%;}
    .wheel__text {position: relative; padding: 0 0 0 70px; right: auto; top: auto; height: 100px; opacity: 1; display: none; }
    .wheel__text--active {display: block;}
    .wheel__text__num {position: absolute; left: 0; top: 0;}
}

@media screen and (max-width: 1020px) {
    .wrapper {max-width: 740px;}
    .f-flag, .f-car {display: none;}
    .f-breaking {margin: 0 0 30px 0;}
    .f-news {min-height: auto;}
    .f-news .other-news {margin: 30px auto;}
    .f-documents ul li {margin: 0 0 30px 0;}
    .f-documents ul li:last-child {margin: 0 0 60px 0;}
    .f-document-title a {padding-top: 15px; font-size: 18px; line-height: 20px;}
    .f-road-title {font-size: 50px; padding: 45px 0;}
    .f-wheel-title {font-size: 50px; padding: 40px 0;}
}

@media screen and  (max-width: 640px) {
    .track__text {font-size: 20px; line-height: 24px;}
    .track__current {font-size: 80px;}
    .track__ico {width: 30px; height: 30px; line-height: 30px; font-size: 24px;}

    .wheel__ico {display: none;}
    .wheel__ico--active {display: block;}
    .wheel__text {display: block; height: 150px; font-size: 16px; padding: 0;}
    .wheel__text__num {display: none;}
    .wheel__text p {padding: 0 40px;}
    .wheel__text_wrap {height: 150px; overflow: hidden;}
    .wheel__control {display: block;}
    .f-bottom-social {left: 42%;}
}

@media screen and (max-width: 520px){
    .f-news, .f-breaking {width: 100%;}
    .f-breaking {min-height: 420px;}
    .f-breaking img {display: block; width: 100%;}
    .f-breaking .red-title {width: 90%; font-size: 28px;}
    .f-news .block-title {font-size: 28px; line-height: 30px;}
    .f-documents ul li {width: 100%; height: auto;}
    .f-documents ul li > a {display: none;}
    .f-document-title {width: 100%; margin: 0; height: auto;}
    .f-document-title a {padding: 10px;}
}

@media screen and (max-width: 500px){
    .track__current {font-size: 55px;}
    .track__ico {width: 26px; height: 26px; line-height: 26px; font-size: 18px;}
}

@media screen and (max-width: 480px){
    .f-header {max-height: 185px;}
    .f-header-text {padding: 10px 0 0 0; width: 100%;}
    .f-header-text .f-small {text-align: center;}
    .f-header-text .f-bold {font-size: 50px; line-height: 52px;}
    .f-header-text .f-regular {font-size: 45px; line-height: 40px;}
    .f-bottom-social {left: 38%;}
}

@media screen and (max-width: 400px) {
    .track__scheme__map {display: none;}
    .track__scheme__map--mobile {display: block; width: 100%; margin: 0 0 20px;}
    .track__current {display: none;}
    .track__ico {display: none;}
    .track__text {position: static; width: auto; opacity: 1; margin: 0; padding: 10px 10px 10px 0;}
    .track__text:last-child {padding-bottom: 30px;}
    .track__text__num {display: block;}
    .track__text span {display: block; margin: 0 0 0 50px;}

    .wheel__text {height: 140px;}
    .wheel__text p {padding: 0; font-size: 14px; line-height: 16px;}
    .wheel__control a {border-top-width: 10px; border-bottom-width: 10px;border-left-width: 10px; border-right-width: 10px;}
    .wheel__control--left {left:-10px;}
    .wheel__control--right {right: -10px;}
    .f-bottom-social {left: 34%;}
}