@import "reset.css";

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

body 			{
    font-size:14px;
    line-height:16px;
    color:#000;
    font-family: 'Noto Sans', sans-serif;


    background-image: url("../images/bg-london.jpg");

    -webkit-background-attachment: fixed;
    -moz-background-attachment: fixed;
    -o-background-attachment: fixed;
    background-attachment: fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-position: center top;

    background-repeat: no-repeat;
}

.clearfix { float: none; clear: both; }
p {margin: 0 0 15px 0;}

/*
BLOCK: WRAPPER
*/
.wrapper {padding: 145px 0 70px 0;}

/*
BLOCK: HEADER
*/
.header {position: absolute; z-index: 100; top: 0; left: 0; right: 0; background: #f2f2f2; height: 120px;}

/*logo*/
.logo               {position: absolute; display: block; left: 50%;}
.logo--moscow       {top: 0;    width: 298px; margin: 0 0 0 -149px; z-index: 200;}
.logo--inchcape     {top: 45px; width: 147px; margin: 0 0 0 -470px;}
.logo--bfm          {top: 50px; width: 106px; margin: 0 0 0 -278px;}
.logo--landrover    {top: 29px; width: 112px; margin: 0 0 0  216px;}
.logo--jaguar       {top: 35px; width: 108px; margin: 0 0 0  372px;}



/*
BLOCK: EARTH
*/
.earth {position: relative; z-index: 101; width: 888px; margin: 0 auto; background: url("../images/earth2.png") no-repeat center 0;}
.earth__body {padding-top: 122px; position: relative; height: 556px; font-size: 14px; line-height: 16px;}
.earth__title {position: absolute; top: 524px; left: 0; right: 0; text-align: center; font-family: Pobeda, sans-serif; display: block; font-size: 30px; line-height: 34px; color: #fff; text-align: center;}
.earth__title span {display: block; font-size: 70px; line-height: 70px;}


/*
BLOCK: TOWNS
*/
.towns      {position: relative; height: 400px; overflow: hidden; width: 100%;}
.towns__map {position: absolute; left: 50%; top: 0; width: 100%; height: 100%; z-index: 100; margin: 0 0 0 -443px;}
.towns__map img {display: block;}
.town__area {cursor: pointer; outline: none; border: none;}

.town       {left: 50%; position: absolute; z-index: 1; height: 1px; width: 1px;}
.town--1   {top: 231px; margin: 0 0 0  304px;}
.town--2   {top: 114px; margin: 0 0 0  197px;}
.town--3   {top: 108px; margin: 0 0 0  116px;}
.town--4   {top: 132px; margin: 0 0 0  13px;}
.town--5   {top: 232px; margin: 0 0 0 -71px;}
.town--6   {top: 319px; margin: 0 0 0 -188px;}
.town--7   {top: 315px; margin: 0 0 0 -294px;}
.town--8   {top: 217px; margin: 0 0 0 -317px; z-index: 2;}
.town--9   {top: 198px; margin: 0 0 0 -314px;}
.town--10   {top: 341px; margin: 0 0 0 -261px;}
.town--11   {top: 353px; margin: 0 0 0 -194px;}
.town--12   {top: 316px; margin: 0 0 0 -56px;}
.town--13   {top: 258px; margin: 0 0 0  49px; z-index: 2;}
.town--14   {top: 200px; margin: 0 0 0  104px;}

.town__target {display: none; position: absolute; bottom: 0; left: -10px; width: 21px;}
.town:hover {z-index: 2;}
/*.town:hover .town__target {width: 63px; left: -31px;}*/
.town__name {position: absolute; color: #fff; font-size: 11px; line-height: 11px; white-space: nowrap; text-shadow: 0 0 1px #000}
.town--1 .town__name  {top: -5px; left: 15px;}
.town--2 .town__name  {top: -5px; left: 15px;}
.town--3 .town__name  {top: -5px; left: 10px;}
.town--4 .town__name  {top: -5px; left: 15px;}
.town--5 .town__name  {top: -5px; left: 15px;}
.town--6 .town__name  {top: -19px; left: 13px;}
.town--7 .town__name  {top: -6px; right: 15px;}
.town--8 .town__name  {top: -6px; right: 15px;}
.town--9 .town__name  {top: -15px; right: 15px;}
.town--10 .town__name  {top: -15px; left: 12px;}
.town--11 .town__name  {top: 3px; left: 12px;}
.town--12 .town__name  {top: 12px; left: -18px;}
.town--13 .town__name  {top: 5px; left: 10px;}
.town--14 .town__name  {top: -10px; left: 15px;}

.town__balloon {display: none; width: 132px; padding: 25px 8px; background: #df104e; position: absolute; left: -74px; bottom: 10px; font-size: 12px; line-height: 14px; color: #fff; border-radius: 8px;}

.town--hover {z-index: 20;}
.town--hover .town__balloon {display: block;}


/*
BLOCK: SLIDER
*/
.slider {display: none; position: relative; width: 480px; height: 80px; background: url("../images/slider_bg.png") no-repeat 0 0; margin: 0 auto;}
.slider__item {position: absolute; display: none; z-index: 1; left: 0; top: 0; height: inherit; width: 100%; font-size: 54px; line-height: 80px; color: #fff; text-decoration: none; font-family: Pobeda, sans-serif; }
.slider__item--active {display: block; text-align: center;}
.slider__control {position: absolute; z-index: 10; top: 0; width: 80px; height: 80px;}
.slider__control--l {left: 0; background: url("../images/arrow_l--big.png") no-repeat 0 0;}
.slider__control--r {right: -5px; background: url("../images/arrow_r--big.png") no-repeat 0 0;}



/*
BLOCK: CONTENT
*/
.content {width: 600px; padding: 30px 35px 15px; box-sizing: border-box; background: #fff; border-radius: 20px; margin: 0 auto;}
.content__title {font-size: 18px; line-height: 20px; margin: 0 0 15px 0; font-style: italic;}



/*
BLOCK: SOCIAL
*/
.social {font-size: 0; text-align: center; margin: -15px 0 0 0;}
.social__item {display: inline-block; margin: 0 5px; width: 30px; height: 30px; background: url("../images/social.png") no-repeat 0 0;}
.social__item--fb {background-position: 0 0;}
.social__item--tw {background-position: -40px 0;}
.social__item--vk {background-position: -80px 0;}


/*
BLOCK: ARTICLES
*/
.articles {display: none; width: 310px; margin: 0 auto; padding: 15px 10px 45px; background: #d90c3e; border-radius: 10px 10px 0 0; box-sizing: border-box;}
.article {display: block; padding: 10px 0; text-align: center; border-bottom: 1px solid #f57a98; font-size: 18px; line-height: 22px; color: #fff; font-style: italic; text-decoration: none;}

/*ÒÎËÜÊÎ ÄÅÑÊÒÎÏ*/
@media screen and (min-width: 1000px) {
    .town--active .town__target {width: 63px; left: -31px;}
}


/*ÒÎËÜÊÎ ÌÎÁÈËÜÍÛÅ*/
@media screen and (max-width: 1000px) {
    body {
        background-position: top center;
    }

    .wrapper {padding: 94px 0 70px 0;}

    /*logo*/
    .logo img           {display: block; width: 100%;}
    .logo--moscow       {width: 244px; margin: 0 0 0 -122px;}
    .logo--inchcape     {width: 117px; top: 20px; margin: 0 0 0 -281px;}
    .logo--bfm          {width: 94px;  top: 71px; margin: 0 0 0 -267px;}
    .logo--landrover    {width: 78px;  top: 11px; margin: 0 0 0 187px;}
    .logo--jaguar       {width: 75px;  top: 66px; margin: 0 0 0 191px;}

    .earth {width: 100%;}
    .earth__body {height: 600px;}
    .earth__title {top: 600px;}


    .towns {height: 390px;}
    .town--1 .town__balloon {margin: 0 0 0 -40px;}
    .town--7 .town__balloon {margin: 0 0 0 35px;}
    .town--8 .town__balloon {margin: 0 0 0 57px;}
    .town--9 .town__balloon {margin: 0 0 0 54px;}

    .towns__map {display: none;}

    .town__name {display: none;}

    .town--select {z-index: 10;}
    .town--select .town__target {width: 63px; left: -31px;}

    .slider {display: block;}


}

@media screen and (max-width: 690px) {
    .wrapper {padding: 77px 0 0 0;}
    /*logo*/
    .header {height: 100px;}
    .logo--moscow       {width: 124px; margin: 0 0 0 -62px;}
    .logo--inchcape     {width: 77px; top: 20px; margin: 0 0 0 -151px;}
    .logo--bfm          {width: 74px;  top: 63px; margin: 0 0 0 -147px;}
    .logo--landrover    {width: 58px;  top: 11px; margin: 0 0 0 77px;}
    .logo--jaguar       {width: 55px;  top: 66px; margin: 0 0 0 81px;}


    .earth {background-image: url("../images/earth_small.png");}
    .earth__body {padding-top: 66px;}

    .towns {height: 140px;}
    .town__target {width: 9px; left: -5px;}
    .town--select .town__target {width: 24px; left: -11px;}

    .town--1   {top: 80px;  margin: 0 0 0  121px;}
    .town--2   {top: 32px;  margin: 0 0 0   78px;}
    .town--3   {top: 29px;  margin: 0 0 0   45px;}
    .town--4   {top: 39px;  margin: 0 0 0    4px;}
    .town--5   {top: 79px;  margin: 0 0 0  -29px;}
    .town--6   {top: 114px; margin: 0 0 0  -75px;}
    .town--7   {top: 112px; margin: 0 0 0 -118px;}
    .town--8   {top: 75px;  margin: 0 0 0 -129px;}
    .town--9   {top: 65px;  margin: 0 0 0 -125px;}
    .town--10   {top: 122px; margin: 0 0 0 -104px;}
    .town--11   {top: 128px; margin: 0 0 0  -78px;}
    .town--12   {top: 113px; margin: 0 0 0  -22px;}
    .town--13   {top: 90px;  margin: 0 0 0   19px;}
    .town--14   {top: 66px;  margin: 0 0 0   41px;}

    .earth__title {top: 255px; font-size: 16px; line-height: 20px;}
    .earth__title span {font-size: 30px; line-height: 32px;}
    .earth__body {height: 245px;}
    .content {width: 320px;}

    .slider {width: 285px; height: 42px; background-position: center center;}
    .slider__control {width: 42px; height: 42px;}
    .slider__control--l {background-position: -19px -18px;}
    .slider__control--r {background-position: -19px -18px; right: 0;}
    .slider__item {line-height: 42px; font-size: 32px;}

    .articles {display: block;}
}