/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 05.11.2014, 17:38:51
    Author     : Sergey Mironov
*/

body {
    min-width: 1000px;
}

.main {
    width: 1276px;
}

.footer-inner {
    width: 1276px;
}

.diagonal-wrapper {
    background: none repeat scroll 0 0 #839eae;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    top: 200px;
    
    -moz-transform: skewY(14deg);
    -ms-transform: skewY(14deg);
    -webkit-transform: skewY(14deg);
    -o-transform: skewY(14deg);
    transform: skewY(14deg);
    
    width: 100%;
    z-index: -2;
}

.diagonal {
    background: none repeat scroll 0 0 #ffffff;
    height: 360px;
}

.clear {
    clear: both;
}

.main > .title {
    color: #fff;
    float: right;
    font-size: 30px;
    margin: 20px 0;
}

.country {
    background: #325a91; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #325a91 0%, #7db9e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#325a91), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #325a91 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #325a91 0%,#7db9e8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #325a91 0%,#7db9e8 100%); /* IE10+ */
    background: linear-gradient(135deg,  #325a91 0%,#7db9e8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#325a91', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.country-wrapper {
    background: url("../img/cities/clouds.png") no-repeat scroll -70px -520px rgba(0, 0, 0, 0);
}

.country-inner {
    overflow: hidden;
}

.country-inner-left {
    float: left;
    width: 300px;
}

.country-inner-right {
    overflow: hidden;
}

.cities {
    background: url("../img/cities/white04.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    min-height: 700px;
    overflow: hidden;
}

.country[data-code="RU"] .country-inner {
    background: url("../img/cities/logo_RU.png") no-repeat left bottom;
}

.country[data-code="RU"] .country-inner-right {
    background: url("../img/cities/flag_RU.png") no-repeat right bottom;
}

.country-name {
    color: #fff;
    font-size: 60px;
    font-weight: bold;
    margin-top: 60px;
    text-align: center;
}

ul.list-cities {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    list-style: none outside none;
    margin: 40px 10px 60px 60px;
}

ul.list-cities li {
    background: url("../img/cities/marker.png") no-repeat scroll 0 6px rgba(0, 0, 0, 0);
    padding-left: 10px;
}

ul.list-cities li:first-child {
    margin-top: 180px;
}

ul.list-cities li a {
    color: #163853;
    font-size: 12px;
    text-decoration: none;
}

ul.list-cities li a:hover {
    text-decoration: underline;
}

#city-wrapper {
    margin-bottom: 20px;
}

#city-wrapper .city-preview {
    height: 274px;
    position: relative;
    width: 430px;
}

#city-wrapper .city-logo {
    background-repeat: no-repeat;
    background-position: left bottom;
    height: 218px;
    left: -95px;
    position: absolute;
    width: 558px;
}

#city-wrapper .city-name {
    background: url("../img/cities/flag_RU.jpg") no-repeat scroll 0 0 #163852;
    bottom: 0;
    color: #fff;
    font-size: 30px;
    height: 56px;
    left: 0;
    line-height: 56px;
    overflow: hidden;
    padding-left: 90px;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 340px;
}

.city-characteristics {
    background: none repeat scroll 0 0 #163852;
    height: 150px;
    margin-top: 20px;
    overflow: hidden;
    width: 430px;
}

.city-characteristics ul {
    margin-left: 40px;
    margin-top: 20px;
}

.city-characteristics ul li {
    color: #fff;
    font-size: 16px;
}

.city-description {
    background: none repeat scroll 0 0 #839eae;
    color: #fff;
    height: 200px;
    min-height: 200px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 244px;
    width: 826px;
    z-index: 1;
}

.city-description:before {
    border-bottom: 1px dotted #fff;
    bottom: 6px;
    content: "";
    height: 1px;
    position: absolute;
    width: 90%;
    z-index: 0;
}

.city-description h2 {
    font-size: 22px;
    margin-bottom: 10px;
    text-indent: 20px;
}

.city-description > div {
    display: none;
}

.city-description > div.short {
    display: block;
}

.city-description p {
    font-size: 16px;
    margin-bottom: 20px;
    text-align: justify;
    text-indent: 20px;
}

.city-description .toggle-block {
    background: none repeat scroll 0 0 #839eae;
    bottom: 0;
    color: #fff;
    font-size: 12px;
    padding-left: 4px;
    position: absolute;
    right: 0;
    text-align: right;
    text-decoration: none;
}

.city-description.active .toggle-block {
    background: none repeat scroll 0 0 #8ea8b8;
    bottom: 20px;
    right: 20px;
}

.city-description.active {
    background: none repeat scroll 0 0 #8ea8b8;
    box-shadow: 10px 20px 0 rgba(0, 0, 0, 0.5);
    height: auto;
    padding: 20px;
}

.city-description.active:before {
    bottom: 26px;
}

.city-description.active > div {
    display: block;
}







#hotels-wrapper {
    min-height: 600px;
    overflow: hidden;
}

















/* Медиа-запросы */
@media (max-width: 1276px) {
    .wrapper .main {
        /*pointer-events: none;*/
        width: 950px;
    }
    
    .footer-inner {
        width: 950px;
    }
    
    .city-description .short p:not(:first-child) {
        display: none;
    }
    
    ul.list-cities {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
        margin: 40px 10px 60px 60px;
    }
    
    .hotels-item:nth-child(4n) {
        margin-right: 30px;
    }
    
    .hotels-item:nth-child(3n) {
        margin-right: 0;
    }
    
    .city-description {
        width: 500px;
    }
    
}



/* END Медиа-запросы */