/* HEADER */

header .header {
    -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, .2);
    background-color: #FFFFFF;
    background-image: url('../images/bg_1.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .2);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 960px;
} 

header .header nav#menu {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    padding-bottom: 10px;
    position: relative;
    z-index: 1;
} 

header .header nav#menu ul {    display: table } 

header .header nav#menu ul li {
    float: left;
    margin-right: 14px;
} 

header .header nav#menu ul li:last-child {    margin-right: 0px } 

header .header nav#menu ul li a.current {
    background-color: #FFFFFF;
    border: 2px solid #FFFFFF;
} 

header .header nav#menu ul li a {
    -moz-border-radius: 6px;
    -moz-transition: 200ms ease-in all;
    -ms-transition: 200ms ease-in all;
    -o-transition: 200ms ease-in all;
    -webkit-border-radius: 6px;
    -webkit-transition: 200ms ease-in all;
    border: 2px solid transparent;
    border-radius: 6px;
    color: #FFF;
    display: list-item;
    font-size: 16px;
    padding: 8px;
    transition: 200ms ease-in all;
} 

header .header nav#menu ul li a:hover {    border: 2px solid rgba(255, 255, 255, 0.5) } 

header .header .tint {
    background-color: #2A3235;
    bottom: 0;
    height: 600px;
    left: 0;
    opacity: .8;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 0;
} 

.fluid {    background-image: none } 

.fluid header .header.fixed #menu_cover {
    padding: 10px 0px 10px 0px;
    width: 100%;
} 

.fluid header .header {    width: 100% } 

.fluid section #page {
    -moz-border-radius: 0;
    -moz-box-shadow: none;
    -webkit-border-radius: 0;
    -webkit-box-shadow: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
} 

.fluid section #page .container > .content {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
} 

header .header.mockup {
    height: 760px;
    padding-top: 20px;
    position: relative;
} 

header .header.mockup #mockup_slider {    margin-top: 40px } 

header .header.mockup #mockup_slider .header {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    color: #FFFFFF;
    display: table;
    font-size: 34px;
    font-weight: 800;
    height: 60px;
    line-height: 60px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
} 

header .header.mockup #mockup_slider:before {
    background-color: #FFFFFF;
    bottom: 0;
    content: '.';
    display: block;
    height: 180px;
    position: absolute;
    text-indent: -9999px;
    width: 100%;
} 

header .header.mockup #mockup_slider #cover {
    background-image: url(../images/mockup/slider_cover.png);
    height: 440px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 700px;
    z-index: 3;
} 

header .header.mockup #mockup_slider #cover .unslider-arrow.prev {
    background-image: url(../images/mockup/slider_back.png);
    left: 20px;
} 

header .header.mockup #mockup_slider #cover .unslider-arrow.next {
    background-image: url(../images/mockup/slider_forward.png);
    right: 20px;
} 

header .header.mockup #mockup_slider #cover .unslider-arrow {
    -moz-transition: 200ms ease-in all;
    -ms-transition: 200ms ease-in all;
    -o-transition: 200ms ease-in all;
    -webkit-transition: 200ms ease-in all;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 40px;
    opacity: .5;
    position: absolute;
    text-indent: -9999px;
    top: 160px;
    transition: 200ms ease-in all;
    width: 40px;
    z-index: 3;
} 

header .header.mockup #mockup_slider #cover .unslider-arrow:hover {    opacity: 1 } 

header .header.mockup #mockup_slider #cover .banner {
    font-size: 18px;
    line-height: 24px;
    margin-left: 88px;
    overflow: auto;
    padding-top: 52px;
    position: relative;
    text-align: center;
    width: 524px !important;
} 

header .header.mockup #mockup_slider #cover .banner .arrows {
    bottom: 20px;
    color: #fff;
    position: absolute;
    right: 20px;
} 

header .header.mockup #mockup_slider #cover .banner .arrow {
    cursor: pointer;
    display: inline;
    padding-left: 10px;
} 

header .header.mockup #mockup_slider #cover .banner .dots {
    bottom: 20px;
    left: 0;
    position: absolute;
    right: 0;
} 

header .header.mockup #mockup_slider #cover .banner .dots li.active {
    background: #fff;
    opacity: 1;
} 

header .header.mockup #mockup_slider #cover .banner .dots li {
    -moz-transition: background .5s, opacity .5s;
    -webkit-transition: background .5s, opacity .5s;
    border: 2px solid #fff;
    border-radius: 6px;
    cursor: pointer;
    display: inline-block;
    height: 10px;
    margin: 0 4px;
    opacity: .4;
    text-indent: -999em;
    transition: background .5s, opacity .5s;
    width: 10px;
} 

header .header.mockup #mockup_slider #cover .banner ul {
    list-style: none;
    width: 300%;
} 

header .header.mockup #mockup_slider #cover .banner ul li {
    -moz-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    display: block;
    float: left;
    min-height: 325px;
    width: 33%;
} 

header .header.mockup #mockup_slider #cover .banner ul li img {    display: block } 

header .header.mockup #mockup_slider p {
    color: #FFFFFF;
    display: block;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
    width: 800px;
    z-index: 1;
} 

header .header.mockup:after {
    background-color: #FFFFFF;
    bottom: -10px;
    content: '.';
    height: 10px;
    left: 0;
    position: absolute;
    text-indent: -9999px;
    width: 100%;
} 

header .header.fixed #logo {    padding-bottom: 60px } 

header .header.minimal {
    height: 200px;
    padding-top: 20px;
    position: relative;
} 

header .header.minimal .tint {    height: 220px } 

header .header.mockup #logo, header .header.minimal #logo, header .header.layered #logo {
    background-image: url(../images/logo.png);
    background-position: center center;
    background-repeat: no-repeat;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 140px;
    z-index: 1;
} 

header .header.layered {
    height: 620px;
    padding-top: 20px;
    position: relative;
} 

header .header.layered .responsive-container {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
} 

header .header.layered .slider-wrapper {
    margin: 0px auto;
    overflow: hidden;
    position: relative;
    width: 100%;
} 

header .header.layered #menu_cover {
    position: relative;
    z-index: 99999;
} 

header .header.layered .slider {
    height: 440px;
    margin: 0 auto;
    position: relative;
    width: 100%;
} 

header .header.layered .slider .title {
    color: #FFFFFF;
    font-size: 34px;
    line-height: 40px;
} 

header .header.layered .slider .text {
    color: #FFFFFF;
    font-size: 12px;
    line-height: 20px;
} 

header .header.mockup #logo a, header .header.minimal #logo a, header .header.layered #logo a {
    display: block;
    height: 120px;
    width: 140px;
    z-index: 1;
} 

header .header.layered .tint {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    height: 205px;
    opacity: 1;
} 

header .header.mockup #logo a span, header .header.minimal #logo a span, header .header.layered #logo a span {    display: none } 

header .header.fixed #menu_cover {
    display: block;
    height: 40px;
    padding: 10px 10px 14px 10px;
    position: fixed !important;
    top: 0;
    width: 940px;
    z-index: 99999;
} 

header .header.fixed #menu_cover:before {
    background-color: #EEEEEE;
    bottom: -1px;
    content: '.';
    display: block;
    height: 1px;
    left: 0px;
    overflow: hidden;
    position: absolute;
    right: 0px;
    text-indent: -9999px;
    width: 100%;
    z-index: 2;
} 

header .header.fixed #menu_cover:after {
    -moz-border-radius: 50px 0px 0px 0px;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-border-radius: 50px 0px 0px 0px;
    -webkit-transform: rotate(45deg);
    background-image: none !important;
    border-radius: 50px 0px 0px 0px;
    bottom: -15px !important;
    content: '.';
    display: block;
    height: 28px;
    left: 50%;
    margin-left: -14px;
    overflow: hidden;
    position: absolute;
    text-indent: -9999px;
    top: auto !important;
    transform: rotate(45deg);
    width: 28px;
    z-index: 2;
} 

header .header.fixed nav#menu {    margin-top: 0px } 

.bg.green {    background-color: #2ecc71 } 

.bg.blue {    background-color: #3498db } 

.bg.red {    background-color: #e74c3c } 

.bg.orange {    background-color: #e67e22 } 

.bg.yellow {    background-color: #f1c40f } 

.bg.purple {    background-color: #9b59b6 } 

.bg.space {    background-color: #34495e } 

.bg.turqoise {    background-color: #1abc9c } 

html,
body {
    height: 100%;
    width: 100%;
}

body {
    background: url('../img/bg.jpg') no-repeat center top;
    background-attachment: fixed;
    background-size: cover;
    font: 400 30px/1 'PT Sans Narrow', 'Arial Narrow', sans-serif;
    margin: 0;
}

input:focus {
    outline: none;
}

.container {
    position: relative;
    width: 1000px;
    margin: 0 auto;
}

.pull-right {
    float: right;
}

/**
 * Шапка
 */
.header {
    color: #fff;
    height: 780px;
    text-transform: uppercase;
}

.header .circle {
    position: absolute;
    top: -400px;
    left: -440px;
    width: 710px;
    height: 735px;
    border-radius: 50%;
    padding: 415px 0 0 440px;
    background: #292929;
    background: rgba(41, 41, 41, .8);
    visibility: hidden;
}

.header .calls {
    font-size: 0;
    margin: 0 0 50px 10px;
}

.header .call {
    display: inline-block;
    font-weight: 700;
    font-size: 36px;
    vertical-align: middle;
}

.header .phones {
    color: #57c7ff;
    font-weight: 700;
    font-size: 45px;
    display: inline-block;
    margin: 0 0 0 10px;
    vertical-align: middle;
}

.header .order {
    color: #fff;
    display: inline-block;
    font-size: 24px;
    margin: 0 0 0 25px;
    text-decoration: none;
    vertical-align: middle;
}

.header .order:hover {
    text-decoration: underline;
}

.header .logo {
    background: url(../img/logo.png);
    display: block;
    width: 222px;
    height: 110px;
    margin: 0 0 15px;
}

.header .title {
    font-size: 42px;
    line-height: 1.1;
    margin: 0 0 65px;
}

.header .title strong {
    color: #57c7ff;
    font-size: 55px;
}

.header address {
    font-size: 24px;
    font-style: normal;
    margin: 0 0 110px;
}

.header .work {
    line-height: 1.1;
    padding: 0 359px 0 0;
    text-align: center;
}

.header .work strong {
    font-size: 48px;
}

/**
 * Суперпредложение
 */
.deal {
    text-transform: uppercase;
    text-align: center;
    color: #fff;
}

.deal .container {
    width: 930px;
    padding: 20px 35px;
}

.deal .container:after {
    content: "";
    display: table;
    clear: both;
}

.deal-top {
    padding: 0 0 40px;
}

.deal-top .container {
    background: #292929;
    background: rgba(41, 41, 41, .8);
}

.deal-bottom {
    background: #292929;
    background: rgba(41, 41, 41, .8);
    padding: 0 0 20px;
}

.deal h2 {
    color: #fff;
    font-weight: 700;
    font-size: 48px;
    margin: 0 0 5px;
}

.deal h2 strong {
    color: #57c7ff;
}

.deal .valid-until {
    font-size: 24px;
    margin: 0 0 10px;
}

.deal .text {
    font-size: 36px;
    float: left;
    padding: 60px 10px;
    text-transform: none;
    width: 530px;
}

.deal .text strong {
    color: #57c7ff
}

.deal form {
    background: #292929;
    background: rgba(41, 41, 41, .7);
    float: right;
    width: 360px;
}

.deal form h3 {
    font-weight: 700;
    margin: 5px 0 10px;
}

.deal input {
    display: block;
    margin: 0 auto 10px;
    height: 48px;
    padding: 0 10px;
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    font: 400 30px/normal 'PT Sans Narrow', 'Arial Narrow', sans-serif;
    color: #fff;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 90%;
}

.deal input[type=text] {
    background: #272727;
    border: 1px solid #7d7d7d;
}

.deal input[type=submit] {
    border: 1px solid;
    border-color: #93b1bb #296171 #11262c;
    background: #43a3c0;
    cursor: pointer;
    font-weight: 700;
    padding: 0;
    text-shadow: 0 1px 1px #444;
    background: #44a3c0;
    background: -moz-radial-gradient(center, ellipse cover, #44a3c0 0%, #28687e 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #44a3c0), color-stop(100%, #28687e));
    background: -webkit-radial-gradient(center, ellipse cover, #44a3c0 0%, #28687e 100%);
    background: -o-radial-gradient(center, ellipse cover, #44a3c0 0%, #28687e 100%);
    background: -ms-radial-gradient(center, ellipse cover, #44a3c0 0%, #28687e 100%);
    background: radial-gradient(ellipse at center, #44a3c0 0%, #28687e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44a3c0', endColorstr='#28687e', GradientType=1);
}

/**
 * Пакет
 */
.packet {
    background: #fff;
    padding: 15px 0 75px;
    text-transform: uppercase;
}

.packet h2 {
    color: #434343;
    font-size: 48px;
    line-height: normal;
    margin: 0 0 35px;
    text-align: center;
}

.packet h2 strong {
    color: #3ca0e0;
}

.packet ul {
    font-size: 0;
    margin: 0 0 0 -20px;
    padding: 0;
    list-style: none;
}

.packet li {
    display: inline-block;
    width: 480px;
    margin: 0 0 30px 20px;
    vertical-align: top;
}

.packet li:after {
    content: "";
    display: table;
    clear: both;
}

.packet .caption {
    border-radius: 8px;
    margin: 20px 0 0 auto;
    padding: 10px 15px 0;
    width: 240px;
    height: 75px;
    position: relative;
    font-size: 16px;
    line-height: 23px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 1px 1px #444;
    background: #427fb4;
    background: -moz-linear-gradient(top, #3876ab 0%, #6aa6d8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3876ab), color-stop(100%, #6aa6d8));
    background: -webkit-linear-gradient(top, #3876ab 0%, #6aa6d8 100%);
    background: -o-linear-gradient(top, #3876ab 0%, #6aa6d8 100%);
    background: -ms-linear-gradient(top, #3876ab 0%, #6aa6d8 100%);
    background: linear-gradient(to bottom, #3876ab 0%, #6aa6d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3876ab', endColorstr='#6aa6d8', GradientType=0);
}

.packet .caption.two-lines {
    line-height: 1;
}

.packet .small {
    font-size: 28px;
}

.packet .sprite {
    display: block;
    width: 205px;
    float: left;
    height: 165px;
    background: url('../img/packets.png') no-repeat;
}

.packet .cabinet {
    background-position: 0 -660px;
}

.packet .cooler {
    background-position: -205px 0;
}

.packet .dishes {
    background-position: -205px -165px;
}

.packet .flatboard {
    background-position: 0 -495px;
}

.packet .hanger {
    background-position: -205px -330px;
}

.packet .markers {
    background-position: 0 -330px;
}

.packet .printer {
    background-position: -205px -495px;
}

.packet .projector {
    background-position: 0 -165px;
}

.packet .whiteboard {
    background-position: -205px -660px;
}

.packet .world {
    background-position: 0 0;
}

.packet .admin {
    float: right;
    margin: -70px 0 0;
}

.packet .admin .image {
    background: url('../img/packets.png') no-repeat 0 -825px;
    width: 317px;
    height: 211px;
}

.packet .admin .caption {
    width: 280px;
    text-align: center;
}

.packet .address {
    margin: 75px 0 0 50px;
    float: right;
    font-size: 18px;
    line-height: 1.1;
    padding: 0 0 0 35px;
    color: #3e3e3e;
    width: 435px;
}

.packet .bottom:after {
    content: "";
    display: table;
    clear: both;
}

.packet .address span {
    font-size: 24px;
}

.packet .tear-logo {
    margin: 0 0 -20px -35px;
    float: none;
    background: url(../img/orange.png) no-repeat 0 -620px;
    display: block;
    width: 124px;
    height: 124px;
}

/**
 * Наши аудитории
 */
.auditories {
    background: #292929;
    background: rgba(41, 41, 41, .8);
    padding: 15px 0 35px;
    text-transform: uppercase;
}

.auditories h2 {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 25px;
    text-align: center;
}

.auditories h2 strong {
    color: #3ca0e0;
}

.auditories ul {
    list-style: none;
    height: 715px;
    margin: 0;
    padding: 0;
    position: relative;
}

.auditories li {
    position: absolute;
    visibility: hidden;
}

.auditories .aud-1 {
    width: 520px;
    height: 360px;
    top: 0;
    left: 10px;
}

.auditories .aud-2 {
    width: 340px;
    height: 305px;
    top: 55px;
    right: 25px;
}

.auditories .aud-3 {
    width: 340px;
    height: 305px;
    bottom: 0;
    left: 220px;
}

.auditories .aud-4 {
    width: 340px;
    height: 305px;
    bottom: 0;
    right: 25px;
}

.auditories .title {
    color: #fff;
    line-height: 48px;
    background: #292929;
    background: rgba(41, 41, 41, .8);
    font-size: 26px;
    line-height: 48px;
    padding: 0 5px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 48px;
}

/**
 * Причины
 */
.reasons {
    background: #fff;
    color: #494949;
    padding: 15px 0 0;
    text-transform: uppercase;
}

.reasons h2 {
    font-size: 48px;
    margin: 0 0 30px;
    text-align: center;
}

.reasons h2 strong {
    color: #3ca0e0;
}

.reasons .row {
    margin: 0 0 40px;
}

.reasons .row:after {
    display: table;
    clear: both;
    content: "";
}

.reasons .col {
    float: left;
}

.reasons .col-1 {
    width: 500px;
}

.reasons .col-2 {
    width: 500px;
}

.reasons ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.reasons .tick-list {
    margin: 0 0 0 50px;
}

.reasons .tick-list li {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAXCAYAAAARIY8tAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAe1JREFUeNqs1V0rBFEYB/DdMYgb1kuJbFvEEuFGSKtIXm/k7Va2fAIutO2yyqXysinEN5C0FEpKUq4kSYobLIWNCy02dv0fnc00zpldxqlfZ+d5zsyZs/OcGaPPnWbQ07Jd/h+xm7F0I7o+MEnhsMGgh7r53OmZiHthCUIyd9Qfm280rQTdOphZ6FYOh/5ngmuXqRLdJqQqwn75PxZw5TSVotuCFFXqUfcKLh2pFnQbnItTk/ROkAwrVEyCfC4m0LWAaSjXyFfpWUEH2KOMaf7rBFkwr5F/hRGYkcMfwgmoMo4FuSnIEOROoTdv8vnrXIlWoGKGZTiCMk6+AXo4cbIN1ZGLU5ND339RIgyCA5JYbBzaFXcng0dw517oLvAE3pTByDNoZcvOV53UBrWwx477wcq5OO2DrsLZl6A6Qc9glD0QUaNV1LFVuTj5Hei0zr0GeSfTCmiCA5iAIs4YG5Ub5EGOKndC5Vq08BYQ3Z3xpD8+8jsBnDAMcapxh/RuB4sidg81xYvBc616lmgnM0FwQhM8KOKkAiyK43fogvNoG0YSlFoVnAlKkQzBbiybVBJc4AJscMjJrcJk5Dj6BOLP4R3Uw5Eidgt2rU8mr4q08k/QCPtsjwzQV+o3L61YvslULS1sl6/99q34KcAASi+HhU31eSAAAAAASUVORK5CYII=) no-repeat left top;
    font-size: 24px;
    padding: 0 0 5px 30px;
    min-height: 23px;
}

.reasons .big-list {
    margin: 0 0 0 180px;
}

.reasons .reason {
    font-size: 30px;
    color: #3b3b3b;
    padding: 0 0 15px;
    overflow: hidden;
}

.reasons .col .reason {
    padding-bottom: 0;
}

.reasons .reason-text {
    font-weight: 700;
    margin: 30px 0 0;
}

.reasons .reason-desc {
}

.reasons .sprite {
    background: url(../img/orange.png) no-repeat;
    display: block;
    float: left;
    width: 124px;
    height: 124px;
}

.reasons .sprite.building {
    background-position: 0 0;
}

.reasons .sprite.clock {
    background-position: 0 -124px;
}

.reasons .sprite.coffee {
    background-position: 0 -248px;
}

.reasons .sprite.handshake {
    background-position: 0 -372px;
}

.reasons .sprite.plus {
    background-position: 0 -496px;
}

.reasons .sprite.tear {
    background-position: 0 -744px;
}

.reasons .sprite.thumbup {
    background-position: 0 -868px;
}

.reasons .walk {
    color: #3b3b3b;
    font-size: 24px;
    position: relative;
    height: 56px;
    margin: 0 0 10px 50px;
}

.reasons .dots {
    height: 6px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAQAAABQ+cdNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEVJREFUCB1j0GTXDNBs16zWNNRk+A+FDJrOmv1g2KOpgBBMgwr2a7oiBCPhgmYIQVnNWrBwiiYnQpBBU1jTTFNfkxNhEQBtKCoru6R7kgAAAABJRU5ErkJggg==) left;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 220px;
}

.reasons .station {
    position: absolute;
    left: 245px;
    top: 10px;
}

.reasons .icon.man {
    background-position: -153px 0;
    width: 26px;
    height: 44px;
    position: absolute;
    left: 17px;
    top: 3px;
}

.reasons .time {
    width: 150px;
    position: absolute;
    left: 50px;
    top: 20px;
    text-align: center;
}

.reasons .icon.tear {
    position: absolute;
    left: 202px;
    top: 12px;
}

.reasons .icon {
    background-image: url(../img/walk.png);
    width: 51px;
    height: 56px;
}

.reasons .icon.tear-blue {
    background-position: 0 0;
}

.reasons .icon.tear-orange {
    background-position: -51px 0;
}

.reasons .icon.tear-purple {
    background-position: -102px 0;
}

/**
 * Как мы работаем
 */
.how-work {
    background: #f4f4f4;
    padding: 25px 0 0;
    overflow: hidden;
    text-transform: uppercase;
}

.how-work h2 {
    color: #494949;
    font-size: 48px;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}

.how-work h2 strong {
    color: #3ca0e0;
}

.how-work .figure {
    margin: 250px 0;
}

.how-work .line {
    background: #c2dfe8;
    height: 12px;
    border-radius: 12px;
    position: relative;
    visibility: hidden;
}

.how-work .dot {
    background: #59aac1;
    border-radius: 50%;
    height: 26px;
    position: absolute;
    margin: -6px 0 0 0;
    width: 26px;
    visibility: hidden;
}

.how-work .dot-1 {
    left: 0;
}

.how-work .dot-2 {
    left: 50%;
    margin-left: -13px;
}

.how-work .dot-3 {
    right: 0;
}

.how-work .dot:after {
    color: #5f5f5f;
    font-weight: 700;
    font-size: 36px;
    bottom: -36px;
    left: 13px;
    margin-left: -25px;
    width: 50px;
    text-align: center;
    position: absolute;
}

.how-work .dot-1:after {
    content: "1";
}

.how-work .dot-2:after {
    content: "2";
    top: -36px;
}

.how-work .dot-3:after {
    content: "3";
}

.how-work .dot:before {
    position: absolute;
    content: "";
    background: url(../img/tears.png);
    bottom: 30px;
    left: 13px;
    margin-left: -61px;
    width: 123px;
    height: 162px;
}

.how-work .dot-1:before {
    background-position: 0 -324px;
}

.how-work .dot-2:before {
    background-position: 0 0;
    top: 30px;
}

.how-work .dot-3:before {
    background-position: 0 -162px;
}

.how-work .dot span {
    position: absolute;
    color: #5f5f5f;
    font-weight: 700;
    font-size: 24px;
    width: 350px;
}

.how-work .dot-1 span {
    top: -130px;
    left: 90px;
}

.how-work .dot-2 span {
    top: 110px;
    left: 90px;
}

.how-work .dot-3 span {
    top: -146px;
    right: 90px;
    text-align: right;
}

/**
 * Проблемы
 */
.problems {
    color: #fff;
    background: #515151;
    padding: 10px 0 15px;
    text-transform: uppercase;
}

.problems h2 {
    margin: 0 0 65px;
    text-align: center;
    font-weight: 700;
    font-size: 36px;
}

.problems h2 strong {
    color: #3ca0e0;
    font-size: 48px;
}

.problems ul {
    list-style: none;
    margin: 0 0 0 110px;
    padding: 0;
    font-weight: 700;
    font-size: 36px;
}

.problems li {
    background: url(../img/problem-item.png) no-repeat left top;
    padding: 10px 0 20px 85px;
    min-height: 65px;
}

.problems .has-desc {
    padding-top: 0;
}

.problems li strong {
    color: #e49797;
}

.problems li span {
    display: block;
    margin: 5px 0 0;
    font-size: 24px;
}

/**
 * Карта
 */
.map {
    background: #292929;
    background: rgba(41, 41, 41, .8);
    padding: 20px 0 40px;
}

.map h2 {
    color: #fff;
    font-weight: 700;
    font-size: 48px;
    margin: 0 0 20px 15px;
    text-transform: uppercase;
}

.map h2 strong {
    color: #3ca0e0;
}

.map .yandex-map {
    background: #333;
    height: 510px;
}

/**
 * Отзывы
 */
.reviews {
    background: #fff;
    padding: 15px 0;
    text-transform: uppercase;
}

.reviews h2 {
    color: #494949;
    font-weight: 700;
    font-size: 48px;
    margin: 0 0 75px;
    text-align: center;
}

.reviews h2 strong {
    color: #3ca0e0;
}

.reviews ul {
    font-size: 0;
    list-style: none;
    margin: 0 0 0 -50px;
    padding: 0;
}

.reviews li {
    margin: 0 0 30px 50px;
    display: inline-block;
    width: 300px;
    vertical-align: top;
}

.reviews li:after {
    content: "";
    display: table;
    clear: both;
}

.foto {
    width: 80px;
    height: 80px;
    float: left;
    margin: 0 15px 15px 0;
    border-radius: 10px;
    overflow: hidden;
}
.reviews img {
    width: 80px;
}

.reviews .name {
    color: #494949;
    font-size: 22px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.reviews .text {
    color: #727272;
    clear: both;
    line-height: 1.2;
    font-size: 18px;
    text-transform: none;
}

/**
 * Способы оплаты и суперпредложение
 */
.pay {
    background: #fff;
    padding: 30px 0;
    text-transform: uppercase;
}

.pay .container:after {
    display: table;
    content: "";
    clear: both;
}

.pay h2 {
    color: #494949;
    font-weight: 700;
    font-size: 48px;
    margin: 0 0 5px;
}

.pay h2 strong {
    color: #3ca0e0;
}

.methods {
    float: left;
    width: 450px;
}

.methods ul {
    list-style: none;
    padding: 0;
    margin: 30px 0 0 30px;
}

.methods li {
    display: inline-block;
    margin: 0 15px 15px 0;
}

.methods .method {
    background: url(../img/methods.png);
    display: inline-block;
}

.methods .method.ya-money {
    width: 259px;
    height: 111px;
    background-position: 0 -121px;
}

.methods .method.sber {
    width: 172px;
    height: 121px;
    background-position: 0 0;
}

.methods .method.qiwi {
    width: 90px;
    height: 117px;
    background-position: -172px 0;
}

.methods .method-ticket {
    color: #494949;
    font-size: 24px;
    display: inline-block;
    line-height: 100px;
    text-decoration: none;
    width: 400px;
}

.methods .method-ticket:hover {
    text-decoration: underline;
}

.methods .method-ticket .arrow {
    border: 7px solid #3b9ab9;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    margin: 0 10px 0;
    display: block;
    float: left;
    position: relative;
}

.methods .method-ticket .arrow:after {
    display: block;
    background: #696969;
    width: 32px;
    height: 20px;
    position: absolute;
    content: "";
    top: 50%;
    margin-top: -10px;
    left: 14px;
}

.methods .method-ticket .arrow:before {
    display: block;
    width: 0;
    height: 0;
    border-width: 22px 28px;
    border-color: transparent transparent transparent #696969;
    border-style: solid;
    position: absolute;
    content: "";
    top: 50%;
    margin-top: -22px;
    left: 46px;
}

.super-deal {
    float: left;
    margin: 0 0 0 40px;
    width: 460px;
    text-align: center;
}

.super-deal .valid-until {
    color: #767676;
    font-size: 24px;
    margin: 0 0 5px;
}

.super-deal .message {
    background: #f6f6f6;
    padding: 10px 15px;
    font-size: 24px;
    color: #494949;
    margin: 0 auto 10px;
    width: 430px;
}

.super-deal .arrow {
    width: 80px;
    height: 106px;
    background: url(../img/button_arrow.png);
    position: absolute;
    left: -95px;
    bottom: -20px;
}

.super-deal form {
    float: right;
    width: 305px;
    position: relative;
}

.super-deal form h3 {
    font-weight: 700;
    color: #767676;
    margin: 5px 0 10px;
}

.super-deal input {
    display: block;
    margin: 0 0 10px;
    height: 48px;
    padding: 0 10px;
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    font: 400 30px/normal 'PT Sans Narrow', 'Arial Narrow', sans-serif;
    color: #fff;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

.super-deal input[type=text] {
    background: #e8e8e8;
    color: #767676;
    border: 1px solid #f1f1f1;
}

.super-deal input[type=submit] {
    border: 1px solid;
    border-color: #93b1bb #296171 #11262c;
    background: #43a3c0;
    cursor: pointer;
    font-weight: 700;
    padding: 0;
    text-shadow: 0 1px 1px #444;
    background: #44a3c0;
    background: -moz-radial-gradient(center, ellipse cover, #44a3c0 0%, #28687e 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #44a3c0), color-stop(100%, #28687e));
    background: -webkit-radial-gradient(center, ellipse cover, #44a3c0 0%, #28687e 100%);
    background: -o-radial-gradient(center, ellipse cover, #44a3c0 0%, #28687e 100%);
    background: -ms-radial-gradient(center, ellipse cover, #44a3c0 0%, #28687e 100%);
    background: radial-gradient(ellipse at center, #44a3c0 0%, #28687e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44a3c0', endColorstr='#28687e', GradientType=1);
}

/**
 * Модальное окошко
 */
.overlay {
    background: #000;
    display: none;
    height: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    opacity: .8;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 9998;
}

.modal {
    background: #292929;
    background: rgba(41,41,41, .8);
    box-shadow: rgba(0,0,0, .6) 0 2px 9px;
    display: none;
    left: 50%;
    padding: 35px;
    position: fixed;
    top: 50%;
    z-index: 9999;
}

.modal form h3 {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    margin: 5px 0 10px;
}

.modal input {
    display: block;
    margin: 0 auto 10px;
    height: 48px;
    padding: 0 10px;
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    font: 400 30px/normal 'PT Sans Narrow', 'Arial Narrow', sans-serif;
    color: #fff;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    width: 90%;
}

.modal input[type=text] {
    background: #272727;
    border: 1px solid #7d7d7d;
}

.modal input[type=submit] {
    border: 1px solid;
    border-color: #93b1bb #296171 #11262c;
    background: #43a3c0;
    cursor: pointer;
    font-weight: 700;
    padding: 0;
    text-shadow: 0 1px 1px #444;
    background: #44a3c0;
    background: -moz-radial-gradient(center, ellipse cover, #44a3c0 0%, #28687e 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #44a3c0), color-stop(100%, #28687e));
    background: -webkit-radial-gradient(center, ellipse cover, #44a3c0 0%, #28687e 100%);
    background: -o-radial-gradient(center, ellipse cover, #44a3c0 0%, #28687e 100%);
    background: -ms-radial-gradient(center, ellipse cover, #44a3c0 0%, #28687e 100%);
    background: radial-gradient(ellipse at center, #44a3c0 0%, #28687e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44a3c0', endColorstr='#28687e', GradientType=1);
}


/**
 * Анимации http://www.justinaguilar.com/animations/
 */
.fadeIn {
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: .8s;
    -webkit-animation-duration: .8s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

    visibility: visible !important;
}

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }
    60% {
        -webkit-transform: scale(1.1);
    }
    80% {
        -webkit-transform: scale(0.9);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

.slideRight{
    animation-name: slideRight;
    -webkit-animation-name: slideRight;

    animation-duration: .8s;
    -webkit-animation-duration: .8s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

    visibility: visible !important;
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}

.hatch {
    animation-name: hatch;
    -webkit-animation-name: hatch;

    animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    visibility: visible !important;
}

@keyframes hatch {
    0% {
        transform: rotate(0deg) scaleY(0.6);
    }
    20% {
        transform: rotate(-2deg) scaleY(1.05);
    }
    35% {
        transform: rotate(2deg) scaleY(1);
    }
    50% {
        transform: rotate(-2deg);
    }
    65% {
        transform: rotate(1deg);
    }
    80% {
        transform: rotate(-1deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes hatch {
    0% {
        -webkit-transform: rotate(0deg) scaleY(0.6);
    }
    20% {
        -webkit-transform: rotate(-2deg) scaleY(1.05);
    }
    35% {
        -webkit-transform: rotate(2deg) scaleY(1);
    }
    50% {
        -webkit-transform: rotate(-2deg);
    }
    65% {
        -webkit-transform: rotate(1deg);
    }
    80% {
        -webkit-transform: rotate(-1deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}

/*****************OTPR***************/
.otpr {
    width: 600px;
    position: relative;
    margin: auto;
    background: rgba(41,41,41,.8);
    padding: 20px;
    border-radius: 10px;
    color: #f3f3f3;
    top: 20%;
    text-align: center;
}
.otpr h3 {
    margin-top: 0;
}
.otpr a {
    color: #f3f3f3;
}