@import "fonts.css";

.upload {
    /*background-color: #ececec;*/
    height: 45px;
    line-height: 45px;
    text-align: left;
    border: 1px solid #e8e8e8;
    clear: both;
    position: relative;
    top: -1px;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-weight: 300;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.file_upload .error {
    border-color: #ff4f4f;
}

.upload object {
    position: absolute;
    height: 45px;
    width: 100%;
    left: 0;
}

.upload span {
    float: left;
}

.upload .cross {
    background-image: url("../i/skrepka.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 45px;
    height: 45px;
    display: inline-block;
    border-right: 1px solid #e8e8e8;
}

.file_upload .error .cross {
    border-right-color: #ff4f4f;
}

.upload .input {
    padding-left: 15px;
    display: inline-block;
}

.list {
    padding-top: 18px;
    text-align: left;
}

.list img {
    position: relative;
    top: -2px;
    padding-left: 10px;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, time {
    display: block
}

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

audio:not([controls]) {
    display: none
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

a:focus, a:hover, a:active, input, button, select, textarea, div:focus {
    outline: 0
}

img {
    vertical-align: middle;
    border: 0
}

button, input, select, textarea {
    margin: 0;
    font-size: 100%;
    vertical-align: middle
}

button, input {
    line-height: normal;
    *overflow: visible
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
    display: none
}

textarea {
    overflow: auto;
    vertical-align: top
}

ul, ol {
    padding: 0;
    margin: 0;
    list-style: none
}

html, body {
    min-height: 100%;
    height: 100%

}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-weight: 300;
    font-size: 100%;
    color: #373737;
    background: white;
    text-rendering: optimizeLegibility
}

input, textarea {
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-weight: 300;
    -webkit-appearance: none;
    border-radius: 0
}

a {
    color: #de5050;
    text-decoration: none
}

a:visited {
    color: #de5050
}

a:hover {
    color: #931c1c;
    text-decoration: none;
    transition: all .2s ease-in-out
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: normal;
    margin: 0;
    color: inherit
}

h1 {
    font-size: 1.875em
}

h2 {
    font-size: 1.5em
}

h3 {
    font-size: 1.25em
}

h4 {
    font-size: 1.125em
}

h5 {
    font-size: 1em
}

h6 {
    font-size: .875em
}

#layout {
    position: relative;
    height: 100%;
    min-height: 100%;
    width: 100%;
    margin: 0 auto;
    background: white
}

#layout.layout__index {
    overflow-x: hidden
}

#layout.layout__company, #layout.layout__contacts, #layout.layout__services, #layout.layout__case {
    height: 100%;
    min-height: 100%;
}

.mst__logo {
    position: fixed;
    /*z-index: 90;*/
    z-index: 90000;
    top: 0;
    left: 0;
    width: 88px;
    height: 88px;
    background: #ff4f4f url('../i/logo.png') 50% 50% no-repeat;
    background-size: 58px;
    cursor: pointer;
    -webkit-animation: logo 6s linear infinite;
    animation: logo 6s linear infinite;
    transition: all .15s ease-in-out
}

.mst__logo.open {
    top: -90px;
    left: 20%
}

.mst__logo.open ~ #nav {
    left: 0
}

.mst__logo.open ~ .nav__info {
    left: 333px;
    transition: all .4s ease-in-out
}

.mst__logo.open ~ .overlay {
    opacity: 1;
    left: 0
}

.mst__logo:after {
    content: '';
    display: block;
    position: absolute;
    left: 25px;
    top: 31px;
    width: 1.3em;
    height: 0;
    opacity: 0;
    background: white;
    box-shadow: 0 .39em 0 0 white, 0 .78em 0 0 white;
    font-size: 28px;
    -webkit-animation: navicon 6s linear infinite;
    animation: navicon 6s linear infinite
}
/*.mst__logo:after {
    content: '';
    display: block;
    position: absolute;
    left: 25px;
    top: 31px;
    width: 36px;
    height: 25px;
    opacity: 0;
    background: url('../i/menu_p.png') 50% 50% no-repeat;
    *//*background: white;
    box-shadow: 0 .39em 0 0 white, 0 .78em 0 0 white;
    font-size: 28px;*//*
    -webkit-animation: navicon 6s linear infinite;
    animation: navicon 6s linear infinite
}*/

.mst__logo:hover {
    -webkit-animation: none;
    animation: none;
    background-size: 0
}

.mst__logo:hover:after {
    height: .1em;
    opacity: 1;
   /* height: 25px;
    opacity: 1;*/
    -webkit-animation: none;
    animation: none
}
@-webkit-keyframes logo {
    47% {
        background-size: 58px
    }
    50% {
        background-size: 0
    }
    97% {
        background-size: 0
    }
    100% {
        background-size: 58px
    }
}
/*@media screen and (-webkit-min-device-pixel-ratio:0){
    @-webkit-keyframes logo {
        0% {
            background-size: 0
        }47% {
             background-size: 58px
         }
        50% {
            background-size: 0
        }
        97% {
            background-size: 0
        }
        100% {
            background-size: 58px
        }
    }
    @-webkit-keyframes navicon {
        0% {
            height: 0;
            opacity: 0
        }
        47% {
            height: 0;
            opacity: 1
        }
        50% {
            height: .1em
        }
        97% {
            height: .1em
        }
        100% {
            height: 0;
            opacity: 0
        }
    }
}*/
@keyframes logo {
    47% {
        background-size: 58px
    }
    50% {
        background-size: 0
    }
    97% {
        background-size: 0
    }
    100% {
        background-size: 58px
    }
}

@-webkit-keyframes logo_big {
    47% {
        background-size: 64px
    }
    50% {
        background-size: 0
    }
    97% {
        background-size: 0
    }
    100% {
        background-size: 64px
    }
}

@keyframes logo_big {
    47% {
        background-size: 64px
    }
    50% {
        background-size: 0
    }
    97% {
        background-size: 0
    }
    100% {
        background-size: 64px
    }
}

/*@-webkit-keyframes navicon {
    47% {
        height: 25px;
        opacity: 1
    }
    50% {
        height: 25px
    }
    97% {
        height: 25px;
        opacity: .5
    }
    100% {
        height: 25px;
        opacity: 0
    }
}

@keyframes navicon {
    47% {
        height: 25px;
        opacity: 1
    }
    50% {
        height: 25px
    }
    97% {
        height: 25px;
        opacity: .5
    }
    100% {
        height: 25px;
        opacity: 0
    }
}*/
@-webkit-keyframes navicon {
    47% {
        height: 0;
        opacity: 1
    }
    50% {
        height: .1em
    }
    97% {
        height: .1em
    }
    100% {
        height: 0;
        opacity: 0
    }
}

@keyframes navicon {
    47% {
        height: 0;
        opacity: 1
    }
    50% {
        height: .1em
    }
    97% {
        height: .1em
    }
    100% {
        height: 0;
        opacity: 0
    }
}

nav.nav {
    position: fixed;
    z-index: 1999;
    top: 0;
    left: -350px;
    height: 100%;
    min-height: 510px;
    width: 333px;
    min-width: 230px;
    background-color: #ff4f4f;
    transition: all .2s ease-in-out
}

nav.nav a, nav.nav a:hover, nav.nav a:visited {
    color: white;
    text-decoration: none
}

.nav__close {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 21px;
    height: 21px;
    background: url('../i/sprite.png') 0 0 no-repeat;
    cursor: pointer
}

.nav__menu {
    width: 100%;
    margin-top: 40%
}

.nav__menu .nav__menu__item {
    display: block;
    width: 100%;
    border-bottom: 1px solid #ed4a4a
}

.nav__menu .nav__menu__item:first-child {
    border-top: 1px solid #ed4a4a
}

.nav__menu .nav__menu__link {
    height: 45px;
    display: block;
    margin-left: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    line-height: 45px;
    font-family: 'Roboto Condensed';
    font-weight: 400;
    font-size: 1em;
    text-transform: uppercase
}

.nav__addmenu {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0
}

.nav__addmenu .nav__addmenu__item {
    display: block;
    width: 100%;
    border-top: 1px solid #cb3d3d;
    background-color: #e73636;
    transition: all .2s ease-in-out
}
@media (max-width: 979px){
    .nav__addmenu .nav__addmenu__item.open {
        background-color: #de2828
    }
}

@media (min-width: 1024px){
    .nav__addmenu .nav__addmenu__item:hover {
        background-color: #de2828
    }
}
.nav__addmenu .nav__addmenu__link {
    height: 50px;
    display: block;
    margin-left: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    line-height: 50px;
    font-size: 1em;
    cursor: pointer;
    color: white
}

.nav__info {
    position: fixed;
    z-index: 1997;
    top: 0;
    left: -700px;
    width: 633px;
    min-height: 480px;
    height: 100%;
    background-color: white;
    box-shadow: 2px -1px 5px rgba(0, 0, 0, 0.25);
    text-align: center;
    opacity: 1;
    transition: all .2s ease-in-out
}

.nav__info__inside {
    width: 80%;
    position: absolute;
    top: 20%;
    left: 10%
}

.nav__info__inside .pageinfo__title {
    display: inline-block;
    width: 300px
}

.nav__info__social {
    margin-top: 20px
}

.nav__info__social a {
    display: inline-block;
    margin: 0 1px
}

.nav__info__contacts {
    position: absolute;
    bottom: 20px;
    width: 100%
}

.nav__info__contacts p {
    margin-top: 0;
    margin-bottom: 0
}

.nav__info__contacts-address {
    display: inline-block;
    vertical-align: bottom;
    font-size: 1em;
    /*width: 270px*/
}

.nav__info__contacts-address a {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 17px;
    margin: -1px 7px 0 0;
    background: url('../i/sprite.png') -23px -56px no-repeat
}

.nav__info__contacts-address:after {
    content: '/';
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px
}

.nav__info__contacts-phone {
    display: inline-block;
    vertical-align: bottom;
    font-family: 'bebas_neueregular';
    font-size: 1.6875em;
    width: 170px;
    text-align: left;
    letter-spacing: -0.035em
}

.nav__feedback {
    position: fixed;
    z-index: 1998;
    top: 0;
    left: -700px;
    width: 633px;
    min-height: 400px;
    height: 100%;
    background-color: white;
    text-align: center;
    box-shadow: 2px -1px 5px rgba(0, 0, 0, 0.25);
    transition: all .2s ease-in-out
}

.nav__feedback.open {
    left: 333px
}

.nav__feedback.open ~ .nav__info {
    opacity: 0
}

.nav__feedback.open__services {
    left: auto;
    right: -700px;
    margin-right: 700px
}

.nav__feedback.open__services ~ .overlay {
    display: block;
    opacity: 1;
    left: 0
}

.nav__feedback__inside {
    padding: 5%;
    height: 90%;
    text-align: center
}

.feeback__block {
    display: inline-block;
    vertical-align: middle;
    width: 470px
}

.feeback__block__form {
    position: relative
}

.feeback__block__form .input-type-1 {
    margin-top: -1px;
    width: 470px
}

.feeback__block__form textarea.input-type-1 {
    height: 160px;
    resize: none
}

.feeback__block__form .feedback__submit {
    width: 200px;
    margin-top: 20px
}

.feeback__block__form.loading:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5) url('../i/preloader.gif') 50% 50% no-repeat
}

.feedback__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 21px;
    height: 21px;
    background: url('../i/sprite.png') 0 -130px no-repeat;
    opacity: .7;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.feedback__close:hover {
    opacity: 1
}

.feedback__success {
    width: 400px;
    display: inline-block;
    vertical-align: middle
}

.feedback__envelope {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 130px;
    height: 150px;
    overflow: hidden;
    border-bottom: 2px solid #373737
}

.feedback__envelope:after {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 120px;
    height: 140px;
    background: url('../i/feedback-envelope.png') 0 0 no-repeat
}

.feedback__envelope.progress:after {
    -webkit-animation-fill-mode: forwards;
    -webkit-animation: envelope 1.3s ease-in-out;
    animation: envelope 1.3s ease-in-out
}

.feedback__envelope.done:after {
    top: 155px
}

@-webkit-keyframes envelope {
    from {
        top: 0
    }
    to {
        top: 155px
    }
}

@keyframes envelope {
    from {
        top: 0
    }
    to {
        top: 155px
    }
}

.feedback__success__mess {
    font-size: 1em;
    margin-top: 20px;
    line-height: 1.6em
}

.pageinfo {
    background-color: white;
    width: 35%;
    box-shadow: 2px -1px 5px rgba(0, 0, 0, 0.25);
    transition: all .2s ease-in-out
}

.index__pageinfo {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 400px;
    min-height: 550px;
    opacity: .99
}

.index__pageinfo .pageinfo__inside {
    width: 80%;
    margin: 34% 10% 20% 10%;
    text-align: center
}

.index__pageinfo .pageinfo__title {
    display: inline-block;
    width: 300px;
    margin-left: -20px
}

.index__pageinfo .pageinfo__subtitle {
    margin-left: -14px
}

.pageinfo__title {
    color: #3a3a3a;
    font-size: 3.75em;
    text-transform: uppercase;
    font-family: 'bebas_neue_cyrillicregular';
    border-bottom: 1px solid #484848
}

.pageinfo__title.wcds {
    width: 270px;
    height: 95px;
    overflow: hidden;
    text-indent: -9999em;
    padding-bottom: 10px;
    background: url('../i/wcds.png') 50% 0 no-repeat
}

.pageinfo__subtitle {
    font-family: 'Roboto Condensed';
    font-weight: 300;
    font-size: 1em;
    text-transform: uppercase
}

.pageinfo__desc {
    font-size: .9375em;
    color: #373737;
    line-height: 1.5em;
    margin: 20px 0 5px 0
}

.index__pageinfo__nav {
    margin: 1.5% 5%;
    width: 90%
}

.index__pageinfo__nav a {
    display: inline-block;
    color: #373737;
    line-height: .9em;
    font-size: .9375em;
    border-right: 1px solid #373737;
    padding: 0 8px 1px 2px;
    margin: 6px 2px
}

.index__pageinfo__nav a:last-child {
    border-right: 0
}

.index__pageinfo__nav a:visited {
    color: #373737
}

.index__pageinfo__nav a:hover {
    color: #de5050;
    text-decoration: none
}

.pageinfo__index__chronograph {
    position: relative;
    margin-top: 25px;
    left: 50%;
    margin-left: -195px;
    width: 390px;
    height: 700px;
    background: url('../i/chronograph_bg.png') center 12px no-repeat
}

.chronograph__year {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10
}

.chronograph__year__item {
    position: absolute;
    font-size: .9375em;
    cursor: pointer;
    padding-top: 28px
}

.chronograph__year__item:before {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -7px;
    width: 6px;
    height: 6px;
    border-radius: 10px;
    background-color: white;
    border: 5px solid #ff4f4f;
    transition: all .2s ease-in-out
}

.chronograph__year__item.active:before, .chronograph__year__item:hover:before {
    background-color: #ff4f4f;
    border-color: white;
    box-shadow: 0 0 0 5px #ff4f4f
}

.chronograph__year__item-1 {
    left: 70px;
    top: -1px
}

.chronograph__year__item-2 {
    left: 170px;
    top: -1px
}

.chronograph__year__item-3 {
    left: 270px;
    top: -1px
}

.chronograph__year__item-4 {
    left: 270px;
    top: 72px
}

.chronograph__year__item-5 {
    left: 170px;
    top: 72px
}

.chronograph__year__item-6 {
    left: 70px;
    top: 72px
}

.chronograph__year__item-7 {
    left: 70px;
    top: 145px
}

.chronograph__year__item-8 {
    left: 170px;
    top: 145px
}

.chronograph__year__item-9 {
    left: 270px;
    top: 145px
}

.chronograph__year__item-10 {
    left: 270px;
    top: 218px
}

.chronograph__year__item-11 {
    left: 170px;
    top: 218px
}

.chronograph__year__item-12 {
    left: 70px;
    top: 218px
}

.company__pageinfo {
    width: 67%;
    position: relative;
    height: 100%;
    z-index: 10;
    box-shadow: none
}

.company__pageinfo .pageinfo__inside {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /*padding-top: 14%*/
    padding-top: 180px;
}

.company__page {
    position: relative;
    width: 75%;
    height: 65%;
    border: 4px solid #ff4f4f;
    margin-left: 12%;
    text-align: center;
    min-height: 520px;
    transition: all .2s ease-in-out
}

.company__page:before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    margin-left: -145px;
    height: 6px;
    width: 290px;
    background-color: white
}

.company__page .pageinfo__title {
    position: absolute;
    top: -41px;
    left: 50%;
    margin-left: -133px;
    width: 266px
}

.company__page .pageinfo__subtitle {
    position: absolute;
    font-size: 1.0625em;
    top: 70px;
    left: 50%;
    margin-left: -135px;
    width: 270px;
    text-align: center
}

.company__page.people {
    height: 75%
}

.company__page.people .company__page__desc {
    opacity: 0
}

.company__page.people .company__page__precept {
    opacity: 0
}

.company__page.people .company__people {
    height: auto;
    overflow: visible;
    top: 130px
}

.company__page__inside {
    width: 100%;
    padding: 145px 7% 30px 7%;
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

.company__people {
    width: 86%;
    position: absolute;
    top: 180px;
    left: 7%;
    height: 0;
    z-index: 2;
    overflow: hidden;
    opacity: 1;
    transition: all .2s ease-in-out
}

.company__people__people {
    width: 100%
}

.company__people__people img {
    max-width: 100%;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    transition: all .2s ease-in-out
}

.company__people__people img:hover {
    /*-webkit-filter: grayscale(0%);
    filter: grayscale(0%);*/
    cursor: pointer
}

.company__people__onemansay {
    width: 100%;
    font-size: .9125em;
    margin-top: 20px;
    text-align: center
}

.company__page__inside__contacts {
    height: 100%;
    padding-bottom: 0;
    padding-top: 130px
}

.company__page__inside__contacts table {
    height: 100%;
    border-collapse: collapse
}

.company__page__inside__contacts tr:last-child {
    height: 100%
}

.company__page__5precepts {
    display: none
}

.company__page__desc {
    font-size: .9375em;
    line-height: 1.5em;
    opacity: 1;
    transition: all .2s ease-in-out
}

.company__page__desc__people {
    color: #de5050;
    cursor: pointer;
    text-decoration: underline
}

.company__page__desc__people:hover {
    color: #931c1c
}

.company__page__precept {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    opacity: 1;
    transition: all .2s ease-in-out
}

.company__page__precept ul {
    display: inline-block;
    width: 392px;
    font-size: 0
}

.company__page__precept li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 48px;
    height: 48px;
    margin-right: 15px;
    font-size: 16px;
    text-align: left
}

.company__page__precept .icon-precept {
    position: absolute
}

.company__page__updown {
    position: absolute;
    left: 50%;
    margin-left: -24px;
    bottom: -90px;
    cursor: pointer
}

.company__page__slider {
    width: 100%
}

.company__slider__item {
    text-align: center
}

.company__slider__item-img {
    width: 100%
}

.slider__item__smile {
    position: relative;
    width: 144px;
    height: 142px;
    overflow: hidden;
    display: inline-block
}

.slider__item__smile:before {
    content: '';
    position: absolute;
    left: 17px;
    top: 150px;
    width: 110px;
    height: 60px;
    background-color: #ff4f4f
}

.slider__item__smile.progress:before {
    -webkit-animation: smile 1.5s ease-in-out;
    animation: smile 1.5s ease-in-out
}

.slider__item__smile.done:before {
    top: 90px
}

.slider__item__smile span {
    display: block;
    position: relative;
    z-index: 5;
    width: 144px;
    height: 142px;
    background: url('../i/company-slide-smile.png') 1px 0 no-repeat
}

@-webkit-keyframes smile {
    from {
        top: 150px
    }
    to {
        top: 90px
    }
}

@keyframes smile {
    from {
        top: 150px
    }
    to {
        top: 90px
    }
}

.slider__item__heart {
    position: relative;
    width: 180px;
    height: 161px;
    overflow: hidden;
    display: inline-block
}

.slider__item__heart:before {
    content: '';
    position: absolute;
    left: 3px;
    top: 160px;
    width: 170px;
    height: 160px;
    background-color: #ff4f4f
}

.slider__item__heart.progress:before {
    -webkit-animation: heart 1.5s ease-in-out;
    animation: heart 1.5s ease-in-out
}

.slider__item__heart.done:before {
    top: 3px
}

.slider__item__heart span {
    display: block;
    position: relative;
    z-index: 5;
    width: 180px;
    height: 161px;
    background: url('../i/company-slide-heart.png') 1px 0 no-repeat
}

@-webkit-keyframes heart {
    from {
        top: 160px
    }
    to {
        top: 3px
    }
}

@keyframes heart {
    from {
        top: 160px
    }
    to {
        top: 3px
    }
}

.slider__item__star {
    position: relative;
    width: 180px;
    height: 171px;
    overflow: hidden;
    display: inline-block
}

.slider__item__star:before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 5px;
    top: 5px;
    width: 160px;
    height: 170px;
    background-color: #ff4f4f
}

.slider__item__star:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 52%;
    left: 50%;
    margin-left: -90px;
    margin-top: -75px;
    width: 180px;
    height: 180px;
    border-radius: 180px;
    background-color: white
}

.slider__item__star.progress:after {
    -webkit-animation: star 1.5s ease-in-out;
    animation: star 1.5s ease-in-out
}

.slider__item__star.done:after {
    width: 0;
    height: 0;
    margin-left: 0;
    margin-top: 0
}

.slider__item__star span {
    display: block;
    position: relative;
    z-index: 5;
    width: 180px;
    height: 172px;
    background: url('../i/company-slide-star.png') 1px 0 no-repeat
}

@-webkit-keyframes star {
    from {
        margin-left: -90px;
        margin-top: -75px;
        width: 180px;
        height: 180px
    }
    to {
        width: 0;
        height: 0;
        margin-left: 0;
        margin-top: 0
    }
}

@keyframes star {
    from {
        margin-left: -90px;
        margin-top: -75px;
        width: 180px;
        height: 180px
    }
    to {
        width: 0;
        height: 0;
        margin-left: 0;
        margin-top: 0
    }
}

.company__slider__item-caption {
    width: 100%;
    margin-top: 15px;
    font-size: 1em
}

.company__slider__item-caption span {
    font-family: 'Roboto Condensed';
    font-weight: 400
}

.company__slider__item-desc {
    font-size: .9375em;
    line-height: 1.5em
}

.company__page__contacts__desc {
    font-size: .9125em;
    width: 86%;
    margin-left: 7%;
    margin-right: 7%
}

.company__page__contacts {
    text-align: center;
    margin-top: 40px
}

.company__page__contacts p {
    margin: 0
}

.company__page__contacts-address {
    display: inline-block;
    vertical-align: top;
    font-size: 1em;
    width: 270px
}

.company__page__contacts-address a {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 17px;
    margin: -3px 7px 0 0;
    background: url('../i/sprite.png') -23px -56px no-repeat
}

.company__page__contacts-email:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 11px;
    margin: -1px 7px 0 0;
    background: url('../i/icon_email.png') 0px 0px no-repeat
}

.company__page__contacts-phone {
    display: block;
    font-family: 'bebas_neueregular';
    font-size: 1.5em;
    padding-top: 5px
}

.company__page__feedback {
    margin-top: 5px
}

.company__page__feedback .btn-type-1 {
    width: 244px
}

.company__page__social a {
    margin: 0 2px
}

.company__content {
    width: 33%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background: url('../i/company-banner.jpg') center center no-repeat;
    background-size: cover;
    box-shadow: inset 3px 0 6px rgba(0, 0, 0, 0.25)
}

.content {
    background-color: white
}

.index__content {
    position: relative;
    width: 65%;
    margin-left: 35%;
    transition: all .2s ease-in-out
}

.index__works {
    width: 100%
}

.works__items {
    width: 100%;
    font-size: 0;
    transition: all .2s ease-in-out;
    overflow: hidden;
}

.index__works.desktop .works__items:hover {
    background-color: black
}
.index__works.mobile .works__items.tapOn {
    background-color: black
}

.index__works.desktop .works__items:hover .works__item-img {
    opacity: .4
}
.index__works.mobile .works__items.tapOn .works__item__towork.tapOn .works__item-img {
    opacity: 1
}
.index__works.mobile .works__items.tapOn .works__item__towork .works__item-img {
    opacity: .4
}
.index__works.mobile .works__items.tapOn .works__item__towork.tapOn {
    opacity: 1
}
.index__works.mobile .works__items.tapOn .works__item__towork {
    background-color: #000;
    /*position: relative;*/
}

.index__works.desktop .works__items:hover .works__item:hover .works__item-img {
    opacity: 1
}

.works__items:hover .works__item.comingsoon:hover .works__item__towork:before,
.works__items:hover .works__item.comingsoon:hover .works__item__towork:after {
    opacity: 1
}

.works__items.filtering {
    background-color: black
}

.works__items.filtering .works__item-img {
    opacity: .4
}

.works__items.filtering .works__item.active .works__item-img {
    opacity: 1
}

.works__items.highlight {
    background-color: black
}

.works__items.highlight .works__item.active .works__item-img {
    opacity: .4
}

.works__item {
    position: relative;
    width: 50%;
    height: 310px;
    /*display: inline-block;*/
    display: block;
    float: left;
    vertical-align: top;
    font-size: 16px;
    overflow: hidden;
    background-color: #000000;
}

.works__item.comingsoon .works__item__towork:before {
    opacity: 0;
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    transition: all .2s ease-in-out
}

/*.works__item.comingsoon .works__item__towork:after {
    opacity: 0;
    content: 'Coming soon...';
    font-family: 'standard_ctmedium_condensed';
    font-size: 1.875em;
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    top: 85px;
    z-index: 2;
    color: #3a3a3a;
    transition: all .2s ease-in-out
}*/

.works__item__newyear {
    display: none
}

.works__item__towork {
    display: block;
    transition: all .2s ease-in-out;
    position: relative;
}

/*.works__item__towork:hover .works__item__info, .works__item__towork:focus .works__item__info, .works__item__towork:active .works__item__info {
    opacity: 1
}*/
.index__works.desktop .works__item__towork:hover .works__item__info,
.index__works.desktop .works__item__towork:focus .works__item__info,
.index__works.desktop .works__item__towork:active .works__item__info {
    opacity: 1
}
.index__works.mobile .works__item__towork.tapOn .works__item__info {
    opacity: 1
}

.works__item__towork.touchHover .works__item__info {
    opacity: 1
}

.works__item-img {
    position: relative;
    width: 100%;
    height: 310px;
    opacity: 1;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .2s ease-in-out
}

.works__item__info {
    position: absolute;
    width: 100%;
    bottom: 0;
    opacity: 0;
    left: 0;
    background-color: #ff4f4f;
    color: white;
    z-index: 5;
    transition: all .2s ease-in-out
}

.works__item__info a, .works__item__info a:visited, .works__item__info a:hover {
    color: #fff
}

.works__item__info-year {
    display: inline-block;
    vertical-align: middle;
    font-size: 3.125em;
    font-family: 'bebas_neueregular';
    width: 17%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align: center;
    padding: 0 1%
}

.works__item__info__about {
    display: inline-block;
    vertical-align: middle;
    width: 80%;
    border-left: 1px solid #e94242;
    padding: 4.75% 0 4.75% 5%;
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

.works__item__info__about-title {
    font-family: 'standard_ctmedium_condensed';
    font-size: 2.5em;
    line-height: .85em
}

.works__item__info__about-work {
    display: inline-block;
    line-height: .9em;
    font-size: 1em;
    padding-right: 8px;
    margin-right: 5px;
    border-right: 1px solid white
}

.works__item__info__about-work:last-child {
    border-right: 0
}

.services__nav {
    position: fixed;
    z-index: 10;
    width: 87px;
    height: 100%;
    padding-top: 88px;
    left: 0;
    border-right: 1px solid #e8e8e8;
    background-color: white;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    min-height: 450px
}

.services__nav__title {
    display: none
}

.services__nav__categories {
    position: relative;
    top: 3%;
    width: 100%;
    height: 94%;
    text-align: center;
    display: block
}

.services__nav__category {
    width: 100%;
    height: 18.5%;
    position: relative
}

.services__nav__category:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background-color: #d6d6d6;
    z-index: 1
}

.services__nav__category:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 47px;
    width: 99%;
    background-color: white;
    z-index: 2
}

.services__nav__category .icon-precept {
    position: absolute;
    left: 50%;
    margin-left: -24px;
    cursor: pointer;
    opacity: .35;
    z-index: 5
}

.services__nav__category .icon-precept:hover {
    left: 50%;
    opacity: 1
}

.services__nav__category .icon-analytics.active:after {
    left: -1px
}

.services__nav__category:last-child:before {
    display: none
}

.services__content {
    width: 100%;
    height: 100%;
    padding-left: 88px;
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

.services__categories {
    width: 100%;
    height: 100%;
    padding-left: 5%;
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

.services__category {
    width: 100%;
    height: 100%;
    font-size: 0
}

.services__descblock {
    position: relative;
    z-index: 5;
    display: inline-block;
    width: 55%;
    height: 100%;
    vertical-align: top;
    font-size: 16px
}

.services__desc {
    display: inline-block;
    width: 90%;
    vertical-align: middle
}

.services__desc__title {
    font-family: 'standard_ctmedium_condensed';
    font-size: 3.4375em;
    color: #373737;
    letter-spacing: -0.022em
}

.services__desc__subtitle {
    font-size: .9125em;
    text-transform: uppercase
}

.services__desc__text {
    width: 100%
}

.services__desc__text div {
    margin-bottom: 25px;
    font-size: 15px
}

.services__desc__cases {
    width: 100%
}

.services__desc__cases__case {
    display: inline-block;
    vertical-align: top;
    margin: 8px 3px 0 0;
    font-size: 1em;
    border: 1px solid #dedede;
    border-radius: 3px;
    color: #c2c2c2 !important;
    padding: 1px 8px
}

.services__desc__cases__case:hover {
    color: #3a3a3a !important;
    border-color: #5d5d5d
}

.services__desc__contacts {
    margin-top: 25px
}

.services__desc__contacts__info {
    font-size: .9125em;
    margin: 3px 0
}

.services__works {
    display: inline-block;
    vertical-align: top;
    width: 45%;
    height: 100%
}

.services__works .works__items {
    position: relative;
    height: 100%;
    overflow: hidden
}

.services__works .works__items:after {
    content: '';
    display: block;
    width: 10px;
    height: 100%;
    position: absolute;
    z-index: 5;
    top: 0;
    left: -10px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2)
}

.services__works .works__item {
    width: 100%;
    height: 33.3333%
}

.services__works .works__item__towork {
    height: 100%
}

.services__works .works__item-img {
    height: 100%
}

.services__feedback {
    display: none;
    position: fixed;
    width: 20%;
    right: 0;
    top: 0;
    height: 100%;
    background-color: white;
    z-index: 10;
    padding-bottom: 50px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-shadow: -2px 0 3px rgba(0, 0, 0, 0.1)
}

.services__feebackblock {
    position: relative;
    width: 94%;
    height: 96%;
    top: 2%;
    left: 3%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 2px solid #e73636
}

.services__feedback__open {
    display: block;
    width: 90%;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -85px;
    left: 5%;
    height: 170px;
    background: url('../i/wcds-med.png') 50% 0 no-repeat;
    padding-top: 90px;
    color: #373737 !important;
    cursor: pointer;
    font-size: .9125em;
    text-transform: uppercase;
    text-decoration: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

.services__feedback__open:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -24px;
    width: 48px;
    height: 48px;
    border: 1px solid #4d4d4d;
    border-radius: 48px;
    background-color: white
}

.services__feedback__open:after {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -11px;
    bottom: 19px;
    width: 24px;
    height: 11px;
    background: url('../i/sprite.png') -26px -157px no-repeat
}

.services__feedback__download {
    position: absolute;
    width: 100%;
    height: 50px;
    left: 0;
    bottom: 0;
    background-color: #ff4f4f;
    line-height: 50px;
    color: white;
    font-size: .9125em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    text-align: center
}

.services__feedback__download:visited {
    color: #fff
}

.services__feedback__download:hover {
    background-color: #e73636
}

.portfolio__works {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-left: 88px
}

.portfolio__works .works__items {
    overflow: hidden
}

.portfolio__works .works__item {
    width: 33.33%
}
.portfolio__works:hover .works__item,
.services__works.desktop:hover .works__item {
    opacity: 0.4;
    /*background-color: #000000;*/
}
.portfolio__works:hover .works__items,
.services__works.desktop:hover .works__items {
    background-color: #000000;
}

.portfolio__works:hover .works__item:hover,
.services__works.desktop:hover .works__item:hover {
    opacity: 1;
}
.portfolio__works:hover .works__item:hover .works__item__info,
.services__works.desktop:hover .works__item:hover .works__item__info{
    opacity: 1;
}
.services__works.mobile .works__items.tapOn {
    background-color: black
}

/*.services__works.desktop .works__items:hover .works__item-img {
    opacity: .4
}*/
.services__works.tablet .works__items.tapOn .works__item.tapOn .works__item-img {
    opacity: 1
}
.services__works.tablet .works__items.tapOn .works__item .works__item-img {
    opacity: .4
}
.services__works.tablet .works__items.tapOn .works__item.tapOn {
    opacity: 1
}
.services__works.tablet .works__items.tapOn .works__item {
    background-color: #000;
}

.nav__portfolio {
    position: fixed;
    top: 0;
    left: 0;
    width: 88px;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 88px;
    z-index: 50
}

.nav__portfolio__title {
    display: none;
    width: 100%;
    color: #373737;
    font-family: 'bebas_neue_cyrillicregular';
    font-size: 2.8125em;
    text-align: center;
    padding: 30px 0
}

#nav__portfolio__blocks {
    position: relative;
    width: 100%;
    height: 100%
}

#nav__portfolio__blocks.animation.progress .nav__portfolio__years {
    -webkit-transform: translateZ(45px);
    -ms-transform: translateZ(45px);
    transform: translateZ(45px)
}

#nav__portfolio__blocks.animation.progress .nav__portfolio__categories {
    display: block;
    -webkit-transform: rotateY(90deg) translateX(45px);
    -webkit-transform-origin: top right;
    -ms-transform: rotateY(90deg) translateX(45px);
    -ms-transform-origin: top right;
    transform: rotateY(90deg) translateX(45px);
    transform-origin: top right
}

#nav__portfolio__blocks.animation-tocategory.progress {
    -webkit-transform-style: preserve-3d;
    -webkit-animation: cube_right .4s ease-in-out;
    transform-style: preserve-3d;
    animation: cube_right .4s ease-in-out
}

#nav__portfolio__blocks.animation-tocategory.done .nav__portfolio__years {
    display: none
}

#nav__portfolio__blocks.animation-tocategory.done .nav__portfolio__categories {
    display: block
}

#nav__portfolio__blocks.animation-toyears.progress {
    -webkit-transform-style: preserve-3d;
    -webkit-animation: cube_left .4s ease-in-out;
    transform-style: preserve-3d;
    animation: cube_left .4s ease-in-out
}

#nav__portfolio__blocks.animation-toyears.done .nav__portfolio__years {
    display: block
}

#nav__portfolio__blocks.animation-toyears.done .nav__portfolio__categories {
    display: none
}

@-webkit-keyframes cube_right {
    from {
        -webkit-transform: rotateY(0)
    }
    to {
        -webkit-transform: rotateY(-90deg)
    }
}

@keyframes cube_right {
    from {
        transform: rotateY(0)
    }
    to {
        transform: rotateY(-90deg)
    }
}

@-webkit-keyframes cube_left {
    from {
        -webkit-transform: rotateY(-90deg)
    }
    to {
        -webkit-transform: rotateY(0)
    }
}

@keyframes cube_left {
    from {
        transform: rotateY(-90deg)
    }
    to {
        transform: rotateY(0)
    }
}

.nav__portfolio__years {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff4f4f;
    border-top: 1px solid #c84040;
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

.portfolio__years {
    position: absolute;
    top: 3%;
    left: 0;
    width: 100%;
    height: 94%;
    padding-bottom: 50px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #ff4f4f
}

.portfolio__years:before {
    content: '';
    position: absolute;
    font-size: 0;
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
    background-color: white
}

.portfolio__years__year {
    width: 100%;
    text-align: center;
    position: relative
}

.portfolio__years__year.disable:before {
    content: '';
    position: absolute;
    font-size: 0;
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
    background-color: #ff9797
}
/*.portfolio__years__year.disable:last-child:before {
    display: none;
}*/
.portfolio__years__year.disable .portfolio__years__yearlink span {
    opacity: .25
}

.portfolio__years__year.disable .portfolio__years__yearlink:before {
    opacity: .25
}

.portfolio__years__year.disable:hover .portfolio__years__yearlink {
    cursor: default
}

.portfolio__years__year.disable:hover .portfolio__years__yearlink:after {
    border-color: transparent;
    background-color: transparent
}

.portfolio__years__year.withoutline:before {
    content: '';
    position: absolute;
    font-size: 0;
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
    background-color: #ff9797
}

.portfolio__alltypes {
    display: none
}

.portfolio__years__yearlink {
    display: inline-block;
    font-family: 'bebas_neueregular';
    font-size: 1.1875em;
    position: relative;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 10px;
    color: white;
    background-color: #ff4f4f;
    border: 0;
    cursor: pointer
}

.portfolio__years__yearlink span {
    position: relative;
    z-index: 1
}

.portfolio__years__yearlink .portfolio__years__fullyear {
    display: none
}

.portfolio__years__yearlink:visited {
    color: #fff
}

.portfolio__years__yearlink:before {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 7px;
    background-color: white;
    left: 50%;
    margin-left: -3px;
    top: 0;
    transition: all .2s ease-in-out
}

.portfolio__years__yearlink:after {
    content: '';
    transition: all .2s ease-in-out;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    top: -8px;
    left: -10px;
    z-index: 0;
    border: 1px solid transparent;
    background-color: transparent
}

.portfolio__years__yearlink:hover, .portfolio__years__yearlink.active {
    color: white
}

.portfolio__years__yearlink:hover span, .portfolio__years__yearlink.active span {
    opacity: 1
}

.portfolio__years__yearlink:hover:before, .portfolio__years__yearlink.active:before {
    opacity: 0
}

.portfolio__years__yearlink:hover:after, .portfolio__years__yearlink.active:after {
    border: 1px solid white;
    background-color: #ff4f4f
}

.portfolio__years__arrow {
    position: absolute;
    left: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    bottom: 0;
    margin-left: -25px;
    border: 1px solid white;
    background-color: #ff4f4f;
    cursor: pointer
}

.portfolio__years__arrow:after {
    content: '';
    display: block;
    width: 24px;
    height: 11px;
    background: url('../i/sprite.png') 0 -100px no-repeat;
    position: absolute;
    top: 20px;
    left: 14px
}

.portfolio__years__arrow.portfolio__years__arrow__next:after {
    background-position: 0 -100px
}

.portfolio__years__arrow.portfolio__years__arrow__prev:after {
    background-position: 0 -112px
}

.nav__portfolio__categories {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff4f4f;
    border-top: 1px solid #c84040;
    border-left: 1px solid #a32e2e;
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

.portfolio__categories {
    position: absolute;
    top: 3%;
    left: 22px;
    width: 50px;
    height: 94%;
    padding-bottom: 50px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #ff4f4f
}

.portfolio__categories:before {
    content: '';
    position: absolute;
    font-size: 0;
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
    background-color: white
}

.portfolio__categories__category {
    width: 100%;
    text-align: center;
    position: relative
}

.nav__case {
    width: 88px;
    padding-top: 88px
}

.nav__case .portfolio__years {
    padding-bottom: 0;
    height: 96%;
    top: 4%
}

.case__content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

.case__works {
    width: 100%;
    height: 100%;
    position: relative
}

.case__work {
    width: 100%;
    height: 100%;
    position: relative
}

.case__work.scrolled .case__work__desc {
    top: auto;
    bottom: 0
}

.case__work.active .case__work__desc {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100% !important
}

.case__work__desc {
    position: absolute;
    top: 0;
    left: 0;
    width: 37%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-left: 88px;
    z-index: 2;
    box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2)
}

.case__work__desc__info {
    width: 98%;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    padding-bottom: 40%
}

.case__work__desc__scroll {
    position: relative;
    text-align: center;
    margin-bottom: 20%
}

.case__work__desc__scroll .case__work__desc__scroll__down {
    position: relative
}

.case__work__desc__scroll__block {
    display: inline-block;
    width: 125px;
    vertical-align: middle
}

.case__work__desc__scroll__time {
    display: inline-block;
    width: 100%;
    margin-top: 8px;
    font-family: 'bebas_neueregular';
    font-size: 1.75em
}

.case__work__desc__titleblock {
    position: relative;
    width: 90%;
    display: inline-block
}

.case__work__desc__title {
    display: inline-block;
    font-family: 'bebas_neue_cyrillicregular';
    font-size: 2.875em;
    letter-spacing: -0.01em;
    color: #373737;
    padding-bottom: 2px;
    border-bottom: 1px solid #1d1d1d;
    text-transform: uppercase
}

.case__work__desc__subtitle {
    font-size: 1.125em;
    text-transform: uppercase;
    display: inline-block;
    width: 90%;
    /*width: 83%;*/
    text-align: center;
    margin: 0;
    padding: 8px 0
}

.case__work__desc__about {
    width: 85%;
    display: inline-block;
    margin-top: 15px;
    font-size: .9125em;
    line-height: 1.4em
}

.case__work__desc__toall {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

.case__work__desc__toall a {
    color: #373737;
    font-size: .9125em;
    margin-left: -88px;
    text-decoration: underline
}

.case__work__desc__toall a:visited {
    color: #373737
}

.case__work__desc__toall a:hover {
    color: #931c1c
}


.case__sharing {
    position: fixed;
    bottom: 12px;
    right: 10px;
    z-index: 10;
    height: 45px;
    min-width: 45px
}

.case__sharing.last {
    display: none
}

.case__sharing__openbtn {
    position: absolute;
    top: 0;
    right: 3px;
    width: 45px;
    height: 45px;
    background-color: #ff4f4f;
    border: 1px solid #da4344;
    border-radius: 45px;
    cursor: pointer;
    z-index: 2;
    transition: all .2s ease-in-out
}

.case__sharing__openbtn:after {
    content: '';
    position: absolute;
    top: 8px;
    left: 12px;
    width: 21px;
    height: 27px;
    background: url('../i/case-sharing.png') 0 0 no-repeat
}

.case__sharing__openbtn:hover {
    background-color: #da4344;
}

.case__sharing__openbtn:hover ~ .case__sharing__icons {
    opacity: 1;
    z-index: 5
}

.case__sharing__icons {
    display: block;
    position: relative;
    z-index: 1;
    vertical-align: top;
    opacity: 0;
    font-size: 0;
    height: 45px;
    transition: all .2s ease-in-out
}

.case__sharing__icons:hover {
    opacity: 1;
    z-index: 5
}
/*
@media (min-width: 980px){
    .case__sharing__openbtn:hover {
        background-color: #da4344;
    }
}
.case__sharing__icons a {
    position: relative;
    display: block;
    width: 45px !important;
    height: 45px !important;
    background-color: white !important;
    border: 1px solid #4e4f4f !important;
    border-radius: 45px !important;
    background-image: url('../i/sprite_soc.png') !important;
    background-repeat: no-repeat !important;
    margin: 0px !important;
}

.blog__post__sharing .pluso {
    position: absolute;
    margin-top: -4px;
    margin-left: -4px;
}

.case__sharing .pluso-010010100110-06 {
    margin-right: -2px;
}

.case__sharing .pluso-010010100110-06 .pluso-wrap a {
    background-position: 0px 0px !important;
}

.case__sharing .pluso-010010100110-06 .pluso-wrap a + a {
    background-position: 0px -45px !important;
}

.case__sharing .pluso-010010100110-06 .pluso-wrap a + a + a {
    background-position: 0px -87px !important;
}

.pluso-010010100110-06 a.pluso-more {
    display: none !important;
}*/

/*-------------------------------------------------*/

	.case__sharing {
        position: relative;
        bottom: 0;
        right: 0;
        width: 215px;
        margin: 18px auto 2px auto;
        text-align: center
    }

    .case__sharing.last {
        display: block
    }

    .case__sharing__openbtn {
        display: inline-block;
        position: relative;
        top: 0;
        right: 0
    }

    /*.case__sharing__openbtn:hover {
        background-color: #da4344;
    }*/
    /*.case__sharing__openbtn:active {
            background-color: #da4344;
    }*/

    .case__sharing__openbtn.open {
        float: right;
        background-color: #da4344;
    }

    .case__sharing__openbtn.open ~ .case__sharing__icons {
        display: inline-block
    }

    .case__sharing__openbtn.open:after {
        width: 21px;
        height: 21px;
        top: 12px;
        background-position: 0 -28px
    }

    .case__sharing__icons {
        display: none;
        opacity: 1
    }

/*-------------------------------------------------*/

.case__sharing__icons li{display:inline-block; vertical-align:top;font-size:16px;margin:0 3px}
.case__sharing__icons a{position:relative;display:block;width:45px;height:45px;background-color:white;border:1px solid #4e4f4f;border-radius:45px}
.case__sharing__icons a:after{content:'';position:absolute;top:15px;left:15px;width:15px;height:15px;background-image:url('../i/sprite.png');background-repeat:no-repeat}
.case__sharing__icons .case__sharing__icons-tw:after{width:17px;height:15px;left:15px;top:16px;background-position:0 -24px}
.case__sharing__icons .case__sharing__icons-fb:after{width:10px;height:16px;top:15px;left:18px;background-position:0 -57px}
.case__sharing__icons .case__sharing__icons-vk:after{width:10px;height:13px;top:17px;left:18px;background-position:-19px -41px}

.case__work__pics {
    position: relative;
    width: 63%;
    margin-left: 37%;
    height: 100%
}

.case__work__pics .count {
    position: absolute;
    right: 6px;
    top: 8px;
    background-color: rgba(17,17,17, 0.61);
    border-radius: 15px;
    color: #fff;
    padding: 0 10px;
    font-size: 15px;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    display: none;
}

.case__work__pics__list {
    width: 100%;
    height: 100%
}

.case__work__pics__item {
    position: relative;
    width: 100%;
    height: 100%
}

.case__work__pics__item__img {	
    position: relative;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.case__work__pics__counter {
    display: none
}

.touch .case__work.scrolled .case__work__desc {
    position: absolute !important;
    top: 0 !important
}

.touch .case__work.active .case__work__desc {
    position: absolute !important;
    top: 0 !important
}

.touch .case__work .case__work__desc {
    top: 0 !important
}

.touch .case__work__desc__info {
    vertical-align: top
}

.contacts__pageinfo {
    width: 66%;
    position: relative;
    height: 100%;
    z-index: 10;
    box-shadow: none;
    float: left
}

.error__pageinfo {
    width: 100%;
    position: relative;
    height: 100%;
    z-index: 10;
    box-shadow: none;
    float: left
}

.contacts__pageinfo .pageinfo__inside {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /*padding-top: 14%;*/
    padding-top: 180px;
}

.error__pageinfo .pageinfo__inside {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 14%
}

.error_text, .error_game {
    /*width: 50%;*/
    height: 434px;
    display: table-cell;
    vertical-align: top;
    position: relative;
}

.error_text span.round, .error_game span.round {
    width: 48px;
    height: 48px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    cursor: pointer;
}

.error_text .round {
    background: url('../i/error_arr.png') no-repeat 0 0;
}

.error_game .round {
    background: url('../i/game_i.png') no-repeat 0 0;
    -webkit-transition: all 200ms ease-in-out 150ms;
    -moz-transition: all 200ms ease-in-out 150ms;
    -ms-transition: all 200ms ease-in-out 150ms;
    -o-transition: all 200ms ease-in-out 150ms;
    transition: all 200ms ease-in-out 150ms;

}

.error_game .round.cross {
    background: url('../i/game_cross.png') no-repeat 0 0;
    -webkit-transition: all 200ms ease-in-out 150ms;
    -moz-transition: all 200ms ease-in-out 150ms;
    -ms-transition: all 200ms ease-in-out 150ms;
    -o-transition: all 200ms ease-in-out 150ms;
    transition: all 200ms ease-in-out 150ms;

}

.error_game {
    border-left: 1px solid #e2e2e2;
    display: none;
}

.error_text h1 {
    font-family: 'bebas_neueregular';
    font-size: 274px;
    color: #3a3a3a;

}

.error_text p {
    font-family: 'helv4light';
    font-size: 16px;
    line-height: 23px;
    color: #373737;
    width: 300px;
    margin: 0 auto;
}

.error_text p a {
    color: #ff4f4f;
    text-decoration: none;
    font-weight: normal;
}

.error_text span {
    font-family: 'Roboto Condensed';
    font-size: 30px;
    display: block;
    color: #373737;
    margin-top: -32px;

}

.error__page {
    border: none;
}

.company__page__inside__error {
    padding: 0;
    height: 434px;
    display: table;
}

.contacts__pageinfo .company__page {
    height: 75%;
    width: 80%;
    margin-left: 10%
}

.contacts__pageinfo .company__page__inside__contacts {
    padding-left: 2%;
    padding-right: 2%
}

.contacts__pageinfo .company__page__contacts__desc {
    font-size: 1em;
    width: 76%;
    margin-left: 12%;
    margin-right: 12%
}

.contacts__pageinfo .company__page__contacts-phone {
    font-size: 1.875em;
    padding-top: 2px
}

.contacts__pageinfo .company__page__feedback {
    margin-top: 15px;
    /*margin-top: 30px;*/
}

.contacts__pageinfo .company__page__feedback .btn-type-1 {
    width: 237px
}

.contacts__pageinfo .company__page__feedback .btn-type-1:first-child {
    margin-right: 7px
}

.contacts__content {
    width: 34%;
    height: 100%;
    position: relative;
    float: left
}

.contacts__map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%
}

.blog__page {
    width: 100%
}

.blog__content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1100px;
    background-color: white
}

.blog__posts {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    max-width: 1100px;
    min-width: 980px;
    text-align: center;
    padding: 65px 0
}

.blog__post {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
    padding: 30px 0 45px 0
}

.blog__post__inside {
    display: inline-block;
    vertical-align: top;
    width: 700px;
    text-align: left;
    margin-left: -80px
}

.blog__post__title {
    font-size: 3.375em;
    font-family: 'standard_ctmedium_condensed';
    font-weight: normal;
    letter-spacing: -0.015em
}

.blog__post__title a {
    color: #3a3a3a
}

.blog__post__title a:visited {
    color: #3a3a3a
}

.blog__post__title a:hover {
    color: #ff4f4f
}

.blog__post__time {
    display: block;
    color: #a8a8a8;
    font-size: 1em
}

.blog__post__time:before {
    content: '';
    display: inline-block;
    vertical-align: top;
    margin: 1px 7px 0 0;
    width: 19px;
    height: 19px;
    background: url('../i/sprite.png') -22px -130px
}

.blog__post__content {
    width: 100%;
    margin-top: 8px;
    font-size: 16px;
    color: #3a3a3a;
    line-height: 1.5em
}

.blog__post__content__preview__text {
    display: inline
}

.blog__post__todetail {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 20px;
    cursor: pointer;
    background: url('../i/sprite.png') -26px -153px no-repeat;
    margin-left: 3px
}

.blog__post__todetail:hover {
    background-position: 0 -153px
}

.blog__post__content__preview__img {
    width: 100%;
    text-align: center;
    border: 1px solid #efefef;
    border-radius: 1px;
    padding: 40px 0;
    margin: 15px 0
}

.blog__post__content__preview__img img {
    max-width: 680px
}

.blog__post__tags {
    width: 100%;
    margin-top: 10px
}

.blog__post__tags__tag {
    display: inline-block;
    color: #c9c9c9;
    border: 1px solid #dedede;
    border-radius: 3px;
    padding: 0 10px 3px 10px;
    font-size: .9125em;
    cursor: pointer;
    margin-right: 5px;
    transition: all .2s ease-in-out
}

.blog__post__tags__tag:visited {
    color: #c9c9c9
}

.blog__post__tags__tag:hover {
    color: #3a3a3a;
    border-color: #3a3a3a
}

.blog__sidebar__open {
    display: none;
    width: 50px;
    height: 50px;
    border: 1px solid #646464;
    background-color: white;
    border-radius: 50px;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 20;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.blog__sidebar__open:after {
    content: '';
    position: absolute;
    top: 19px;
    left: 12px;
    width: 24px;
    height: 11px;
    background: url('../i/sprite.png') -26px -157px no-repeat
}

.blog__sidebar__open.open {
    right: 320px
}

.blog__sidebar__open.open ~ .blog__sidebar {
    right: 0
}

.blog__sidebar__open.open:after {
    width: 11px;
    height: 11px;
    top: 20px;
    left: 19px;
    background-position: -39px -100px
}

.blog__sidebar {
    position: fixed;
    width: 20%;
    min-width: 300px;
    top: 0;
    right: 0;
    height: 100%;
    background-color: #ff4f4f;
    z-index: 15;
    transition: all .2s ease-in-out
}

.blog__sidebar__search {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 20px 25px
}

.blog__sidebar__search form {
    position: relative
}

.blog__sidebar__search__input {
    width: 100%;
    border: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 37px;
    background-color: white;
    color: #3a3a3a;
    font-size: .9125em;
    padding: 0 10px
}

.blog__sidebar__search__input:focus, .blog__sidebar__search__input:hover {
    border: 1px solid #c61616
}

.blog__sidebar__search__btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 37px;
    height: 37px;
    border: 0;
    display: block;
    background: url('../i/sprite.png') 0 -173px no-repeat;
    cursor: pointer
}

.blog__sidebar__tags {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 15px 20px 20px 20px;
    border-top: 1px solid #ff6b6b
}

.blog__sidebar__tags .blog__post__tags__tag {
    border-color: #ff7474;
    color: white;
    margin-top: 5px
}

.blog__sidebar__tags .blog__post__tags__tag:hover {
    border-color: #fff
}

.blog__sidebar__social {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 13px 15px;
    border-top: 1px solid #ff6b6b;
    text-align: center
}

.blog__sidebar__social .sidebar__icon {
    margin: 0 2px
}

.blog__sidebar__best {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 25px;
    border-top: 1px solid #ff6b6b
}

.blog__sidebar__best__title {
    font-size: 2.0625em;
    font-family: 'standard_ctmedium_condensed';
    color: white;
    opacity: .88
}

.blog__sidebar__best__list {
    opacity: .88
}

.blog__sidebar__best__item {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #ff6b6b
}

.blog__sidebar__best__item__link {
    color: white;
    display: block
}

.blog__sidebar__best__item__link:hover .blog__sidebar__best__item__title, .blog__sidebar__best__item__link:hover .blog__sidebar__best__item__text {
    color: #ffabab
}

.blog__sidebar__best__item__title {
    font-size: 1.125em;
    font-family: 'Roboto Condensed';
    font-weight: 400;
    color: white;
    transition: all .2s ease-in-out
}

.blog__sidebar__best__item__text {
    margin: 0;
    font-size: 1.0625em;
    color: white;
    transition: all .2s ease-in-out
}

.blog__sidebar__subscribe {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%
}

.blog__sidebar__subscribe__btn {
    display: block;
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: #d23d3d;
    border-top: 1px solid #c93a3a;
    border-bottom: 1px solid #c93a3a;
    text-transform: uppercase;
    font-size: 1em;
    color: white;
    cursor: pointer;
    position: relative;
    z-index: 5
}

.blog__sidebar__subscribe__btn:visited, .blog__sidebar__subscribe__btn:hover {
    color: #fff
}

.blog__sidebar__subscribe__btn:hover {
    background-color: #c73a3a;
    border-top: 1px solid #b73434;
    border-bottom: 1px solid #b73434
}

.blog__sidebar__subscribe__btn .blog__sidebar__subscribe__btn-cancel {
    display: none
}

.blog__sidebar__subscribe__btn.open .blog__sidebar__subscribe__btn-cancel {
    display: block
}

.blog__sidebar__subscribe__btn.open .blog__sidebar__subscribe__btn-sbscr {
    display: none
}

.blog__sidebar__subscribe__btn.open ~ .blog__sidebar__subscribe__block {
    bottom: 52px
}

.blog__sidebar__subscribe__block {
    width: 100%;
    position: absolute;
    z-index: 1;
    bottom: -30px;
    left: 0;
    background-color: white;
    padding: 15px;
    border-left: 1px solid #ffcdcd;
    border-top: 1px solid #d23d3d;
    text-align: center;
    height: 70px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    transition: all .2s ease-in-out
}
.blog__sidebar__subscribe__block > p{
    margin-top: 0;
}
.blog__sidebar__subscribe__block form {
    display: block;
    max-width: 420px;
    position: relative;
    text-align: left;
    margin: 0 auto
}

.blog__sidebar__subscribe__block form.loading:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.5) url('../i/preloader.gif') 50% 50% no-repeat
}

.blog__sidebar__subscribe__block .blog__sidebar__subscribe__input {
    width: 100%;
    height: 40px;
    font-size: 1em;
    padding: 10px 50px 10px 10px
}

.blog__sidebar__subscribe__block .blog__sidebar__subscribe__input:focus + .blog__sidebar__subscribe__submit {
    border-left-color: #b3b3b3
}

.blog__sidebar__subscribe__block .blog__sidebar__subscribe__input.error + .blog__sidebar__subscribe__submit {
    border-left-color: #ff4f4f
}

.blog__sidebar__subscribe__block .blog__sidebar__subscribe__submit {
    position: absolute;
    z-index: 15;
    width: 40px;
    height: 40px;
    right: 0;
    top: 0;
    border: 1px solid #dfdfdf;
    background-color: white;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.blog__sidebar__subscribe__block .blog__sidebar__subscribe__submit:after {
    content: '';
    position: absolute;
    width: 5px;
    height: 10px;
    top: 14px;
    left: 16px;
    background: url('../i/sprite.png') -44px 0 no-repeat
}

.blog__sidebar__subscribe__block .blog__sidebar__subscribe__submit:hover {
    background-color: #ff4f4f;
    border-color: #ff4f4f !important
}

.blog__sidebar__subscribe__block .blog__sidebar__subscribe__submit:hover:after {
    background-position: -44px -12px
}

.subscribe__success {
    text-align: center;
    font-size: 1em;
    line-height: 40px
}

.blog__banner {
    position: fixed;
    z-index: 5;
    width: 30%;
    height: 100%;
    right: 0;
    top: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover
}
@media (min-width: 1300px) and (max-width: 1500px){
    .blog__banner {
        width: 23%;
    }
}
.blog__post__detail .blog__post__tags {
    width: 49.5%;
    display: inline-block;
    vertical-align: top;
    text-align: right
}

.blog__post__detail .blog__post {
    width: 700px;
    padding: 0;
    border-bottom: 0
}

.blog__post__detail .blog__post__inside {
    position: relative;
    padding: 30px 0 25px 0
}

.blog__post__toposts {
    display: block;
    position: absolute;
    top: -30px;
    right: 0;
    font-size: 1em;
    color: #636363;
    z-index: 1
}

.blog__post__toposts:visited {
    color: #636363
}

.blog__post__toposts:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 11px;
    opacity: .6;
    margin-right: 5px;
    background: url('../i/sprite.png') -22px -228px;
    transition: all .2s ease-in-out
}

.blog__post__toposts:hover {
    color: black
}

.blog__post__toposts:hover:before {
    opacity: 1
}

.blog__post__content__detail {
    width: 100%
}

.blog__post__content__detail div {
    margin: 0 0 15px 0
}

.blog__post__content__detail img {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 20px;
    max-width: 100%;
    border: 1px solid #ededed
}

.blog__post__sharing {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 49.5%;
    overflow: hidden
}

.blog__post__sharing__btn {
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding-left: 50px;
    cursor: pointer;
    overflow: hidden;
    height: 42px;
    line-height: 40px;
    transition: all .2s ease-in-out
}

.blog__post__sharing__btn:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border: 1px solid #939393;
    border-radius: 40px;
    background-color: white;
    transition: all .2s ease-in-out
}

.blog__post__sharing__btn:after {
    content: '';
    display: block;
    position: absolute;
    top: 14px;
    left: 14px;
    width: 13px;
    height: 13px;
    opacity: .6;
    background: url('../i/sprite.png') -37px -173px no-repeat;
    transition: all .2s ease-in-out
}

.blog__post__sharing__btn:hover:before {
    border-color: #585858
}

.blog__post__sharing__btn:hover:after {
    opacity: 1
}

.blog__post__sharing__btn.open {
    text-indent: -20em
}

.blog__post__sharing__btn.open:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.blog__post__sharing__btn.open ~ .blog__post__sharing__social {
    left: 50px;
    opacity: 1
}

.blog__post__sharing__social {
    position: absolute;
    top: 0;
    left: 220px;
    width: 200px;
    opacity: 0;
    transition: all .2s ease-in-out
}

.blog__post__sharing__social .sharing-icon {
    margin: 0 1px
}

.blog__post__comment {
    border-top: 1px solid #ededed;
    margin-left: -80px;
    padding-top: 35px;
    text-align: left;
    width: 700px;
    display: inline-block;
    vertical-align: top
}

.blog__post__comment__title {
    font-family: 'standard_ctmedium_condensed';
    font-size: 2em;
    color: #3a3a3a;
    letter-spacing: -0.007em
}

.overlay {
    display: block;
    position: fixed;
    z-index: 1980;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    opacity: 0;
    transition: opacity .2s ease-in-out
}

.icon-social {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid #4e4e4e;
    border-radius: 40px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    transition: all .2s ease-in-out
}

.icon-social:after {
    content: '';
    position: absolute;
    top: 9px;
    left: 9px;
    width: 19px;
    height: 19px;
    background: url('../i/sprite.png') -23px 0 no-repeat
}

.icon-social:hover {
    background-color: #ff4f4f;
    border-color: #ff4f4f
}

.icon-social:hover:after {
    background-position: -23px -21px
}

.icon-mail:after {
    top: 12px;
    left: 9px;
    width: 20px;
    height: 14px;
    background-position: 0 -246px
}

.icon-mail:hover:after {
    background-position: -21px -246px
}

.icon-ins:after {
    top: 9px;
    left: 9px;
    width: 19px;
    height: 19px;
    background-position: -23px 0
}

.icon-ins:hover:after {
    background-position: -23px -21px
}

.icon-tw:after {
    top: 12px;
    left: 11px;
    width: 17px;
    height: 15px;
    background-position: 0 -24px
}

.icon-tw:hover:after {
    background-position: 0 -41px
}

.icon-fb:after {
    top: 11px;
    left: 14px;
    width: 10px;
    height: 16px;
    background-position: 0 -57px
}

.icon-fb:hover:after {
    background-position: -11px -57px
}

.icon-vk:after {
    top: 12px;
    left: 14px;
    width: 10px;
    height: 13px;
    background-position: -19px -41px
}

.icon-vk:hover:after {
    background-position: -31px -41px
}

.icon-precept {
    position: relative;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    display: inline-block;
    background-color: white;
    border-radius: 48px;
    line-height: 46px;
    text-align: center;
    overflow: hidden;
    font-size: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-left: 30px;
    border: 0;
    color: white;
    transition: all .2s ease-in-out
}

.icon-precept.left {
    left: auto;
    right: 0;
    padding-right: 33px;
    padding-left: 0
}

.icon-precept.left:after {
    left: auto;
    right: 0
}

.icon-precept:after {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    left: 0;
    top: 0;
    background: url('../i/icons-precept.png') 0 0 no-repeat
}

.icon-precept:visited {
    color: #fff
}

.icon-precept:hover, .icon-precept.touchHover {
    top: 0;
    left: 0;
    background-color: #ff4f4f;
    width: 175px;
    z-index: 10;
    font-size: 15px;
    color: white;
    text-decoration: none
}

.icon-precept.left:hover {
    left: auto;
    right: 0
}

.icon-precept.no_hover {
	width: 48px;
	font-size: 0px;
	background-color: white;
	opacity: .35!important;
}

.icon-precept.active {
    background-color: #ff4f4f;
    opacity: 1;
}
.icon-precept.no_hover.active {
    background-color: #ff4f4f!important;
    opacity: 1!important;
}

.icon-strategy:after {
    background-position: 0 0
}

.icon-strategy.no_hover:after {
    background-position: 0 0!important;
}

.icon-strategy:hover:after {
    background-position: 0 -50px
}

.icon-strategy.active:after {
    background-position: 0 -50px
}
.icon-strategy.no_hover.active:after {
    background-position: 0 -50px!important;
}

.icon-analytics:after {
    background-position: -50px 0
}

.icon-analytics.no_hover:after {
    background-position: -50px 0!important;
}

.icon-analytics:hover:after {
    background-position: -50px -50px
}

.icon-analytics.active:after {
    background-position: -50px -50px
}

.icon-analytics.no_hover.active:after {
    background-position: -50px -50px!important;
}

.icon-design:after {
    background-position: -100px 0
}

.icon-design.no_hover:after {
    background-position: -100px 0!important;
}

.icon-design:hover:after {
    background-position: -100px -50px
}

.icon-design.active:after {
    background-position: -100px -50px
}

.icon-design.no_hover.active:after {
    background-position: -100px -50px!important;
}

.icon-development:after {
    background-position: -150px 0
}

.icon-development.no_hover:after {
    background-position: -150px 0!important;
}

.icon-development:hover:after {
    background-position: -150px -50px
}

.icon-development.active:after {
    background-position: -150px -50px
}

.icon-development.no_hover.active:after {
    background-position: -150px -50px!important;
}

.icon-promotion:after {
    background-position: -200px 0
}

.icon-promotion.no_hover:after {
    background-position: -200px 0!important;
}

.icon-promotion:hover:after {
    background-position: -200px -50px
}

.icon-promotion.active:after {
    background-position: -200px -50px
}
.icon-promotion.no_hover.active:after {
    background-position: -200px -50px!important;
}

.icon-support:after {
    background-position: -250px 0
}

.icon-support.no_hover:after {
    background-position: -250px 0!important;
}

.icon-support:hover:after {
    background-position: -250px -50px
}

.icon-support.active:after {
    background-position: -250px -50px
}
.icon-support.no_hover.active:after {
    background-position: -250px -50px!important;
}

.icon-updown {
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 48px;
    border: 1px solid #484848
}

.icon-updown:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 24px;
    top: 10px;
    left: 19px;
    background: url('../i/sprite.png') 0 -75px no-repeat
}

.icon-updown.icon-down:after {
    background-position: 0 -75px
}

.icon-updown.icon-up:after {
    top: 12px;
    background-position: -22px -75px
}

.icon-category {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: #ff4f4f;
    border: 1px solid white;
    border-radius: 50px;
    line-height: 48px;
    text-align: center;
    font-size: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-left: 30px;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.icon-category:before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 50px;
    height: 50px;
    background-color: white;
    border: 1px solid #ff4f4f;
    border-radius: 50px;
    opacity: 0;
    transition: all .2s ease-in-out
}

.icon-category:after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    left: 0;
    top: 0;
    background: url('../i/icons-category.png') 0 0 no-repeat
}

.icon-category:visited {
    color: #fff
}

.icon-category:hover {
    position: absolute;
    top: 0;
    left: 0;
    border-color: transparent;
    background-color: white;
    width: 185px;
    z-index: 10;
    font-size: 15px;
    color: black;
    text-decoration: none
}

.icon-category:hover:before {
    opacity: 1
}

.icon-category:hover:after {
    background-position: 0 -50px;
    border-color: #ff4f4f
}

.icon-category.active {
    background-color: white
}

.icon-category.active:before {
    opacity: 1
}

.icon-category-strategy:after {
    background-position: 0 0
}

.icon-category-strategy:hover:after {
    background-position: 0 -50px
}

.icon-category-strategy.active:after {
    background-position: 0 -50px
}

.icon-category-analytics:after {
    background-position: -50px 0
}

.icon-category-analytics:hover:after {
    background-position: -50px -50px
}

.icon-category-analytics.active:after {
    background-position: -50px -50px
}

.icon-category-design:after {
    background-position: -100px 0
}

.icon-category-design:hover:after {
    background-position: -100px -50px
}

.icon-category-design.active:after {
    background-position: -100px -50px
}

.icon-category-dev:after {
    background-position: -150px 0
}

.icon-category-dev:hover:after {
    background-position: -150px -50px
}

.icon-category-dev.active:after {
    background-position: -150px -50px
}

.icon-category-promotion:after {
    background-position: -200px 0
}

.icon-category-promotion:hover:after {
    background-position: -200px -50px
}

.icon-category-promotion.active:after {
    background-position: -200px -50px
}

.icon-category-support:after {
    background-position: -250px 0
}

.icon-category-support:hover:after {
    background-position: -250px -50px
}

.icon-category-support.active:after {
    background-position: -250px -50px
}

.sidebar-icon {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 43px;
    border: 1px solid #ff8383;
    border-radius: 45px;
    background-color: #f55;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.sidebar-icon:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    background-image: url('../i/sprite.png');
    background-repeat: no-repeat
}

.sidebar-icon:hover {
    background-color: #d23d3d;
    border-color: #c33939
}

.sidebar-icon-mail:after {
    width: 20px;
    height: 14px;
    top: 15px;
    left: 12px;
    background-position: 0 -211px
}

.sidebar-icon-vk:after {
    width: 11px;
    height: 14px;
    top: 14px;
    left: 18px;
    background-position: -39px -56px
}

.sidebar-icon-fb:after {
    width: 10px;
    height: 16px;
    top: 13px;
    left: 17px;
    background-position: -11px -57px
}

.sidebar-icon-tw:after {
    width: 17px;
    height: 15px;
    top: 15px;
    left: 14px;
    background-position: 0 -41px
}

.sidebar-icon-ins:after {
    width: 16px;
    height: 16px;
    top: 14px;
    left: 14px;
    background-position: -21px -211px
}

.sharing-icon {
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #939393;
    background-color: white;
    position: relative;
    border-radius: 40px;
    transition: all .2s ease-in-out
}

.sharing-icon:after {
    content: '';
    position: absolute;
    background-image: url('../i/sprite.png');
    background-repeat: no-repeat;
    opacity: .65;
    transition: all .2s ease-in-out
}

.sharing-icon:hover {
    border-color: #585858
}

.sharing-icon:hover:after {
    opacity: 1
}

.sharing-icon-gp:after {
    width: 21px;
    height: 18px;
    top: 12px;
    left: 10px;
    background-position: 0 -227px
}

.sharing-icon-tw:after {
    width: 17px;
    height: 15px;
    left: 12px;
    top: 13px;
    background-position: 0 -24px
}

.sharing-icon-fb:after {
    width: 10px;
    height: 16px;
    left: 15px;
    top: 12px;
    background-position: 0 -57px
}

.sharing-icon-vk:after {
    width: 10px;
    height: 13px;
    left: 15px;
    top: 14px;
    background-position: -19px -41px
}

.blog__post__sharing .pluso-google:after {
    width: 21px;
    height: 18px;
    top: 12px;
    left: 10px;
    background-position: 0 -227px !important
}

.blog__post__sharing .pluso-twitter:after {
    width: 17px;
    height: 15px;
    left: 12px;
    top: 13px;
    background-position: 0 -24px !important
}

.blog__post__sharing .pluso-facebook:after {
    width: 10px;
    height: 16px;
    left: 15px;
    top: 12px;
    background-position: 0 -57px !important
}

.blog__post__sharing .pluso-vkontakte:after {
    width: 10px;
    height: 13px;
    left: 15px;
    top: 14px;
    background-position: -19px -41px !important
}

.form__element {
    position: relative
}

.btn-type-1 {
    display: inline-block;
    font-family: 'Roboto Condensed';
    font-weight: 300;
    font-size: 1em;
    height: 45px;
    line-height: 40px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #ff4f4f;
    padding: 0 10px;
    color: white !important;
    text-align: center;
    text-decoration: none !important;
    border: 0;
    cursor: pointer;
    transition: all .1s ease-in-out
}

.btn-type-1:hover {
    background-color: #e73636
}

.input-type-1 {
    position: relative;
    display: inline-block;
    width: 400px;
    height: 45px;
    border: 1px solid #e8e8e8;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 13px 10px 10px 10px;
    color: #3a3a3a;
    text-align: left;
    transition: all .1s ease-in-out
}

.input-type-1:hover {
    border-color: #dadada
}

.input-type-1:focus {
    border-color: #b3b3b3;
    z-index: 5
}

.input-type-1.error {
    border-color: #ff4f4f;
    z-index: 10
}

.valing_middle {
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 100%
}

@media (min-width: 2000px) {
    .company__pageinfo {
        width: 55%
    }

    .company__content {
        width: 45%
    }
}

@media (min-width: 1800px) {
    .services__content {
        width: 80%
    }

    .services__feedback {
        display: block
    }
}

@media (min-width: 1300px) {
    .blog__sidebar {
        right: auto;
        left: 1000px
    }
}

@media (min-width:980px) {
    .mst__logo__big {
        width: 95px;
        height: 95px;
        background-image: url('../i/logo-big.png');
        background-size: 64px;
        -webkit-animation: logo_big 6s linear infinite;
        animation: logo_big 6s linear infinite
    }

    .mst__logo__big:after {
        left: 28px;
        top: 35px
    }
    .error_game{
        display: block;
    }
}


@media (max-width: 1299px) {
    .company__page {
        margin-left: 5%;
        width: 90%;
        height: 80%;
        min-height: 550px
    }

    .case__work__desc__scroll {
        margin-bottom: 10%
    }

    .case__work__desc__info {
        padding-bottom: 10%
    }

    .blog__banner {
        display: none
    }

    .case__work__desc {
        width: 45%
    }

    .case__work__pics {
        width: 55%;
        margin-left: 45%
    }
}

@media (max-width: 1199px) {
    .blog__sidebar__open {
        display: block
    }

    .blog__sidebar {
        right: -35%
    }
}

@media (max-width: 1130px) {
    .index__content {
        width: 64%;
        margin-left: 400px
    }
}

@media (max-width: 1099px) {
    .index__content {
        width: 63%
    }

    .index__pageinfo .pageinfo__inside {
        margin-left: 0;
        margin-right: 0;
        width: 100%
    }

    .index__pageinfo__nav {
        width: 100%;
        margin-left: 0;
        margin-right: 0
    }
}

@media (max-width: 1049px) {
    .index__content {
        width: 61%
    }
}

@media (max-height: 800px) {
    .nav__info__inside {
        top: 5%
    }

    .index__pageinfo .pageinfo__inside {
        margin: 92px 0 45px 0;
        width: 100%
    }

    .company__pageinfo {
        min-height: 700px
    }

    .company__pageinfo .pageinfo__inside {
        padding-top: 6%
    }

    .services__category {
        min-height: 600px
    }

    .case__work__desc__scroll {
        margin-bottom: 5%
    }

    .case__work__desc__info {
        padding-bottom: 2%
    }
}

@media (max-width: 979px) {
    .upload{
        display: none;
    }
    .case__sharing__openbtn.open ~ .case__sharing__icons .pluso-010010100110-06 {
        display: inline-block;
    }

    .case__sharing .pluso-010010100110-06 {
        display: none;
    }

    .pluso-010010100110-06 a.pluso-more {
        display: none !important;
    }

    .mst__logo {
        position: absolute;
        left: 50%;
        top: 0;
        width: 75px;
        height: 75px;
        margin-left: -37px;
        background-size: 50px
    }

    .mst__logo:after {
        left: 20px;
        top: 24px
    }

    .mst__logo.open {
        top: -75px;
        left: 50%
    }

    .mst__logo.open ~ #nav {
        top: 0
    }

    .mst__logo.open ~ .nav__info {
        left: 0;
        top: 458px
    }

    .mst__logo.open ~ .overlay {
        opacity: 0
    }

    @-webkit-keyframes logo {
        47% {
            background-size: 50px
        }
        50% {
            background-size: 0
        }
        97% {
            background-size: 0
        }
        100% {
            background-size: 50px
        }
    }@keyframes logo {
         47% {
             background-size: 50px
         }
         50% {
             background-size: 0
         }
         97% {
             background-size: 0
         }
         100% {
             background-size: 50px
         }
     }nav.nav {
          position: absolute;
          top: -480px;
          left: 0;
          width: 100%;
          height: 458px;
          min-height: 0
      }

    nav.nav a, nav.nav a:visited, nav.nav a:hover {
        color: white;
        text-decoration: none
    }

    .nav__menu {
        margin: 50px 0 105px 0;
        text-align: center
    }

    .nav__addmenu .nav__addmenu__link {
        margin-left: 0px;
    }

    .nav__menu .nav__menu__link {
        height: 50px;
        line-height: 50px;
        margin-left: 0
    }

    .nav__close {
        top: 15px;
        left: 15px
    }

    .nav__addmenu {
        text-align: center
    }

    .nav__addmenu li {
        background-color: #e73636;
        border-top-color: #ca3232
    }

    .nav__addmenu a {
        height: 52px;
        line-height: 52px;
        margin-left: 0
    }

    .nav__info {
        position: absolute;
        top: -1000px;
        left: 0;
        width: 100%;
        min-height: 0;
        height: auto;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25)
    }

    .nav__info__inside {
        position: relative;
        margin: 15% 5% 10% 5%;
        width: 90%;
        left: 0;
        top: 0
    }

    .nav__info__social {
        margin-top: 20px
    }

    .nav__info__contacts {
        position: relative;
        bottom: 0;
        margin: 0 0 25px 0
    }

    .nav__info__contacts-address:after {
        display: none
    }

    .nav__info__contacts-phone {
        display: block;
        text-align: center;
        width: 100%;
        padding-top: 5px;
        font-size: 1.5em
    }

    .nav__feedback {
        position: absolute;
        left: 0;
        top: -1000px;
        width: 100%;
        min-height: 0;
        height: auto;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25)
    }

    .nav__feedback.open {
        left: 0;
        top: 458px
    }

    .nav__feedback.open ~ .nav__info {
        opacity: 1
    }

    .nav__feedback.open__services {
        left: 0;
        right: 0;
        top: 0;
        margin-right: 0
    }

    .nav__feedback.open__services ~ .overlay {
        display: block;
        opacity: 1;
        left: 0
    }

    .nav__feedback__inside {
        height: auto;
        padding: 70px 0 50px 0
    }

    .pageinfo {
        position: relative;
        width: 100%;
        box-shadow: none
    }

    .index__pageinfo {
        height: auto;
        min-width: 0;
        min-height: 0
    }

    .index__pageinfo .pageinfo__inside {
        margin: 120px 0 0 0
    }
    .contact-bottom-box{
        display: none;
    }
    .index__pageinfo .pageinfo__title {
        margin-left: 0
    }

    .index__pageinfo .pageinfo__subtitle {
        margin: 0
    }

    .pageinfo__title {
        font-size: 2.8125em
    }

    .pageinfo__title.wcds {
        width: 225px;
        height: 80px;
        background: url('../i/wcds-med.png') 50% 0 no-repeat
    }

    .pageinfo__subtitle {
        font-size: .875em
    }

    .index__pageinfo__nav {
        width: 100%;
        text-align: center;
        font-size: 0;
        margin-top: 50px;
        margin-bottom: 0
    }

    .index__pageinfo__nav a {
        display: inline-block;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        width: 50%;
        color: #373737;
        line-height: 52px;
        height: 52px;
        font-size: 17px;
        text-transform: uppercase;
        border-right: 1px solid #dcdcdc;
        border-bottom: 1px solid #dcdcdc;
        margin: 0;
        padding: 0
    }

    .index__pageinfo__nav a:nth-child(even) {
        border-right: 0
    }

    .index__pageinfo__nav a:first-child, .index__pageinfo__nav a:first-child + a {
        border-top: 1px solid #dcdcdc
    }

    .pageinfo__index__chronograph {
        display: none
    }

    .index__content {
        width: 100%;
        margin-left: 0
    }

    .works__item {
        width: 100%;
        height: 410px
    }

    .works__item.works__item__ny {
        height: 410px
    }

    .works__item__newyear {
        position: relative;
        display: block;
        width: 100%;
        height: 100px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        background-color: white;
        padding: 65px 0 0;
        text-align: center;
        font-family: 'bebas_neuebook';
        font-size: 1.125em;
        z-index: 1
    }

    .works__item__newyear:before {
        content: '';
        width: 100%;
        height: 1px;
        font-size: 0;
        background-color: #dcdcdc;
        position: absolute;
        top: 50%;
        left: 0
    }

    .works__item__newyear:after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -8px;
        margin-top: -8px;
        width: 6px;
        height: 6px;
        border-radius: 10px;
        background-color: white;
        border: 5px solid #ff4f4f
    }

    /* mobile -> */

    /*.works__items:hover .works__item-img {
        opacity: .4;
    }

    .works__item__towork:hover .works__item__info,
    .works__item__towork:focus .works__item__info,
    .works__item__towork:active .works__item__info {
        opacity: 1;
    }*/

    /* <- mobile */

    #layout.layout__company {
        height: auto
    }

    .company__content {
        display: none
    }

    .company__pageinfo {
        padding-top: 120px
    }

    .company__pageinfo .pageinfo__inside {
        padding-top: 15px;
        padding-bottom: 50px;
        height: auto;
        border-top: 1px solid #efefef
    }

    .company__pageinfo .pageinfo__inside .pageinfo__title, .company__pageinfo .pageinfo__inside .pageinfo__subtitle {
        display: none
    }

    .company__pageinfo .pageinfo__inside:first-child {
        padding: 0;
        border-top: 0
    }

    .company__pageinfo .pageinfo__inside:first-child .pageinfo__title {
        display: inline-block
    }

    .company__pageinfo .pageinfo__inside:first-child .pageinfo__subtitle {
        display: block
    }

    .company__page {
        width: 100%;
        height: auto;
        border: 0;
        margin-left: 0;
        min-height: 0
    }

    .company__page .pageinfo__title {
        display: inline-block;
        position: relative;
        top: 0;
        left: 0;
        margin-left: 0;
        font-size: 3.125em
    }

    .company__page .pageinfo__subtitle {
        position: relative;
        top: 0;
        left: 0;
        margin-left: 0;
        width: 100%;
        font-size: .875em
    }

    .company__page.people {
        height: auto
    }

    .company__page.people .company__page__desc {
        display: none
    }

    .company__page.people .company__page__precept {
        display: none
    }

    .company__page.people .company__people {
        top: 0;
        display: block
    }

    .company__people {
        display: none;
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
        height: auto;
        overflow: visible
    }

    .company__page__inside {
        width: 100%;
        padding: 25px 5% 15px 5%
    }

    .company__page__precept {
        margin: 10px 0
    }

    .company__page__5precepts {
        display: block;
        width: 100%;
        border-top: 1px solid #efefef;
        color: #ff4f4f;
        text-align: center;
        height: 60px;
        line-height: 60px;
        margin: 20px 0 0 0;
        font-size: .9375em
    }

    .company__page__contacts-phone {
        font-size: 1.25em
    }

    .company__page__feedback {
        margin-top: 45px
    }

    .company__page__social {
        margin-top: 50px
    }

    .company__page__updown {
        display: none
    }

    #layout.layout__services {
        height: auto
    }

    .services__nav {
        position: relative;
        width: 100%;
        height: auto;
        padding-top: 125px;
        left: 0;
        border: 0;
        background-color: white;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        min-height: 0
    }

    .services__nav__title {
        display: block;
        font-family: 'bebas_neue_cyrillicregular';
        font-size: 2.8125em;
        text-transform: uppercase;
        text-align: center
    }

    .services__nav__categories {
        position: relative;
        top: 0;
        height: auto;
        display: block;
        margin-top: 50px;
        font-size: 0
    }

    .services__nav__category {
        width: 50%;
        display: inline-block;
        vertical-align: top;
        font-size: 16px;
        border-top: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        margin-top: -1px
    }

    .services__nav__category .icon-precept {
        position: relative;
        height: 52px;
        width: 100%;
        background-color: white !important;
        margin: 0;
        padding: 0;
        left: 0;
        border-radius: 0;
        line-height: 52px;
        font-size: 17px;
        text-transform: uppercase;
        overflow: visible;
        font-family: 'Roboto Condensed';
        font-weight: 300;
        color: #373737 !important;
        opacity: 1
    }

    .services__nav__category .icon-precept:after, .services__nav__category .icon-precept:before {
        display: none
    }

    .services__nav__category .icon-precept:hover {
        font-size: 17px;
        left: 0
    }

    .services__nav__category:nth-child(even) {
        border-left: 1px solid #e9e9e9
    }

    .services__feedback {
        display: block;
        position: relative;
        width: 100%;
        height: auto;
        padding: 40px 0 25px 0;
        box-shadow: none;
        border-bottom: 1px solid #f1f1f1;
        text-align: center
    }

    .services__feebackblock {
        width: 100%;
        height: auto;
        top: 0;
        left: 0;
        border: 0
    }

    .services__feedback__open {
        position: relative;
        display: inline-block;
        width: 220px;
        height: 50px;
        line-height: 50px;
        top: 0;
        margin: 0 0 18px 0;
        padding: 0;
        left: 0;
        background: #ff4f4f;
        color: white !important;
        transition: all .2s ease-in-out
    }

    .services__feedback__open:before, .services__feedback__open:after {
        display: none
    }

    .services__feedback__open:hover {
        background-color: #e73636
    }

    .services__feedback__download {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 200px;
        height: 30px;
        line-height: 30px;
        background-color: white;
        color: #de5050 !important;
        text-transform: none
    }

    .services__feedback__download:visited {
        color: #de5050
    }

    .services__feedback__download:hover {
        color: #931c1c;
        background-color: #fff
    }

    .services__content {
        width: 100%;
        padding: 0
    }

    .services__categories {
        padding: 0;
        text-align: center
    }

    .services__category {
        min-height: 0
    }

    .services__descblock {
        width: 100%;
        height: auto
    }

    .services__desc {
        width: 100%
    }

    .services__desc__title {
        font-size: 2.8125em
    }

    .services__desc__text {
        display: inline-block;
        vertical-align: top;
        width: 85%
    }

    .services__desc__text.readmore {
        max-height: 4em
    }

    .services__desc__text.readmore:after {
        color: #373737
    }

    .services__desc__cases {
        display: none
    }

    .services__desc__contacts {
        border-top: 1px solid #f1f1f1;
        padding: 25px 0 0 0;
        margin-top: 15px
    }

    .services__works {
        width: 100%;
        height: 330px;
        margin-top: 25px
    }

    .services__works .works__items {
        height: 330px;
        overflow: visible
    }

    .services__works .works__items:hover {
        background-color: white
    }

    .services__works .works__items:hover .works__item-img {
        opacity: 1
    }

    .services__works .works__items:hover .works__item__info {
        display: none
    }

    .services__works .works__item {
        height: 330px;
        text-align: left
    }

    .services__works .slick-dots {
        bottom: 20px
    }

    .nav__portfolio {
        position: relative;
        width: 100%;
        height: auto;
        padding-top: 80px
    }

    #nav__portfolio__blocks {
        font-size: 0
    }

    .nav__portfolio__title {
        display: block
    }

    .nav__portfolio__years, .nav__portfolio__categories {
        position: relative;
        width: 50%;
        height: 48px;
        display: inline-block !important;
        vertical-align: top;
        border: 0;
        background: white;
        font-size: 16px
    }

    .portfolio__years {
        background-color: white;
        position: relative;
        height: 48px;
        width: 100%;
        top: 0;
        padding: 0
    }

    .portfolio__years:before {
        display: none
    }

    .portfolio__years:hover {
        z-index: 50
    }

    /*.portfolio__years:hover .portfolio__years__year {
        display: block
    }*/
    .portfolio__years.vis .portfolio__years__year {
            display: block
        }

    .portfolio__years__year {
        height: 48px !important;
        text-align: left;
        margin-top: -1px;
        display: none;
    }
    .portfolio__years__year.curr{
        display: block;
    }
    .portfolio__years__year.disable:last-child:before {
    display: none;
    }

    .portfolio__years__year:first-child {
        /*display: block;*/
        margin-top: 0
    }
    .portfolio__years__year.onready {
            display: block;
            margin-top: 0
        }

    .portfolio__years__year:first-child .portfolio__years__yearlink:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: auto;
        right: 45px;
        height: 46px;
        width: 1px;
        background-color: #eaeaea;
        z-index: 45;
        margin: 0
    }

    .portfolio__years__year:first-child .portfolio__years__yearlink:after {
        content: '';
        display: block;
        position: absolute;
        top: 21px;
        right: 18px;
        left: auto;
        border: 0;
        width: 11px;
        height: 6px;
        background: url('../i/sprite.png') -27px -107px no-repeat;
        z-index: 45
    }

    .portfolio__years__year:first-child .portfolio__years__yearlink:hover {
        background-color: white;
        color: #373737 !important
    }

    .portfolio__years__year:first-child .portfolio__years__yearlink:hover:after {
        background-position: -27px -100px
    }

    .portfolio__years__year:first-child .portfolio__years__yearlink:hover:before {
        opacity: 1
    }

    .portfolio__years__year:first-child .portfolio__years__yearlink.active {
        background-color: #ff4f4f
    }

    .portfolio__years__year:first-child .portfolio__years__yearlink.active:after {
        background-position: -27px -121px
    }

    .portfolio__years__year:first-child .portfolio__years__yearlink.active:before {
        opacity: 1
    }

    .portfolio__years__year:first-child .portfolio__years__yearlink.active:hover {
        background-color: #ff4f4f;
        color: white !important
    }

    .portfolio__years__year:first-child .portfolio__years__yearlink.active:hover:after {
        background-position: -27px -114px
    }

    .portfolio__years__yearlink {
        background-color: white;
        width: 100%;
        height: 48px;
        line-height: 48px;
        color: #373737 !important;
        border-top: 1px solid #eaeaea;
        border-bottom: 1px solid #eaeaea;
        border-right: 1px solid #eaeaea;
        padding: 0 0 0 20px;
        text-align: left;
        font-family: 'Roboto Condensed';
        font-weight: 300;
        font-size: 1em;
        transition: all .2s ease-in-out
    }

    .portfolio__years__yearlink .portfolio__years__shortyear {
        display: none
    }

    .portfolio__years__yearlink .portfolio__years__fullyear {
        /*display: inline*/
        display: block
    }

    .portfolio__years__yearlink:before, .portfolio__years__yearlink:after {
        display: none
    }

    .portfolio__years__yearlink:hover:before, .portfolio__years__yearlink:hover:after {
        display: none
    }

    .portfolio__years__yearlink:hover  {
        background-color: #ff4f4f;
        color: white !important
    }
    .portfolio__years.vis .portfolio__years__year.curr .portfolio__years__yearlink.active{
        background-color: #ff4f4f;
        color: white !important
    }
    .portfolio__years .portfolio__years__year.curr .portfolio__years__yearlink.active{
        background-color: #FFF;
        color: #373737 !important;
    }
    .portfolio__years .portfolio__years__year.curr .portfolio__years__yearlink.active:before{
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: auto;
        right: 45px;
        height: 46px;
        width: 1px;
        background-color: #EAEAEA;
        z-index: 45;
        margin: 0;
        opacity: 1;
    }
    .portfolio__years .portfolio__years__year.curr .portfolio__years__yearlink.active:after{
        content: '';
        display: block;
        position: absolute;
        top: 21px;
        right: 18px;
        left: auto;
        border: 0;
        width: 11px;
        height: 6px;
        background: url('../i/sprite.png') -27px -107px no-repeat;
        z-index: 45;
    }
    .portfolio__years.vis .portfolio__years__year.curr .portfolio__years__yearlink.active:before{
        display: none;
    }
    .portfolio__years.vis .portfolio__years__year.curr .portfolio__years__yearlink.active:after{
        display: none;
    }
    .portfolio__years__arrow {
        display: none
    }

    .portfolio__works {
        padding: 0
    }

    .portfolio__works .works__item {
        width: 100%;
        height: 310px;
    }

    .portfolio__categories {
        background-color: white;
        position: relative;
        height: 48px;
        width: 100%;
        top: 0;
        padding: 0;
        left: 0
    }

    .portfolio__categories:before {
        display: none
    }

    .portfolio__categories:hover .portfolio__categories__category {
        display: block
    }

    .portfolio__categories__category {
        height: 48px !important;
        text-align: left;
        margin-top: -1px;
        display: none
    }

    .portfolio__categories__category:first-child {
        display: block;
        margin-top: 0
    }

    .portfolio__categories__category:first-child .icon-category:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: auto;
        right: 45px;
        height: 46px;
        width: 1px;
        background-color: #eaeaea;
        z-index: 45;
        margin: 0;
        opacity: 1;
        border: 0
    }

    .portfolio__categories__category:first-child .icon-category:after {
        content: '';
        display: block;
        position: absolute;
        top: 21px;
        right: 18px;
        left: auto;
        border: 0;
        width: 11px;
        height: 6px;
        background: url('../i/sprite.png') -27px -107px no-repeat;
        z-index: 45;
        opacity: 1;
        transition: all .2s ease-in-out
    }

    .portfolio__categories__category:first-child .icon-category:hover {
        background-color: white;
        color: #373737 !important
    }

    .portfolio__categories__category:first-child .icon-category:hover:after {
        background-position: -27px -100px;
        opacity: 1;
        display: block
    }

    .portfolio__categories__category:first-child .icon-category:hover:before {
        opacity: 1;
        display: block
    }

    .portfolio__categories__category:first-child .icon-category.active {
        background-color: #ff4f4f
    }

    .portfolio__categories__category:first-child .icon-category.active:after {
        background-position: -27px -121px
    }

    .portfolio__categories__category:first-child .icon-category.active:before {
        opacity: 1
    }

    .portfolio__categories__category:first-child .icon-category.active:hover {
        background-color: #ff4f4f;
        color: white !important
    }

    .portfolio__categories__category:first-child .icon-category.active:hover:after {
        background-position: -27px -114px
    }

    .portfolio__categories__category .icon-category {
        position: relative;
        background-color: white;
        width: 100%;
        height: 48px;
        line-height: 48px;
        color: #373737 !important;
        border-left: 0;
        border-top: 1px solid #eaeaea;
        border-bottom: 1px solid #eaeaea;
        border-right: 1px solid #eaeaea;
        padding: 0 0 0 20px;
        text-align: left;
        font-family: 'Roboto Condensed';
        font-weight: 300;
        font-size: 16px;
        border-radius: 0;
        transition: all .2s ease-in-out
    }

    .portfolio__categories__category .icon-category:before, .portfolio__categories__category .icon-category:after {
        display: none
    }

    .portfolio__categories__category .icon-category:hover:before, .portfolio__categories__category .icon-category:hover:after {
        display: none
    }

    .portfolio__categories__category .icon-category:hover, .portfolio__categories__category .icon-category.active {
        background-color: #ff4f4f;
        color: white !important;
        width: 100%;
        font-size: 16px
    }

    .nav__case {
        display: none
    }

    #layout.layout__case, .case__content, .case__works, .case__work {
        height: auto !important
    }
    .count{
        display: block !important;
    }
    .case__works {
        padding-top: 70px
    }

    .case__work {
        margin-top: 20px;
        padding-bottom: 10px
    }

    .case__work:first-child, .case__work:last-child {
        padding-bottom: 35px
    }

    .case__work:first-child .case__work__desc__toall, .case__work:last-child .case__work__desc__toall {
        /*bottom: -630px;*/
        bottom: -645px;

        border-top: 1px solid #eaeaea
    }

    .case__work__desc {
        position: relative !important;
        height: auto !important;
        width: 100%;
        padding: 0;
        box-shadow: none
    }

    .case__work__desc__info {
        width: 100%;
        padding-bottom: 30px
    }

    .case__work__desc__scroll {
        margin-bottom: 30px
    }
    .case__work__desc__subtitle {
        width: 83%;
    }
    .case__work__desc__scroll .valing_middle {
        display: none
    }

    .case__work__desc__scroll__block {
        width: 100%
    }

    .case__work__desc__scroll__down {
        border: 0;
        width: 100%;
        height: 1px;
        border-radius: 0;
        background-color: #dcdcdc
    }

    .case__work__desc__scroll__down:after {
        content: '';
        position: absolute;
        width: 6px;
        height: 6px;
        top: -8px;
        /*left: 50%;*/
        left: 49.8%;
        margin-left: -7px;
        border-radius: 10px;
        border: 5px solid #ff4f4f;
        background: white
    }

    .case__work__desc__scroll__time {
        font-family: 'bebas_neuebook';
        font-size: 1.125em
    }

    .case__work__desc__title {
        font-size: 2.8125em
    }

    .case__work__desc__subtitle {
        font-size: 1.0625em
    }

    .case__work__desc__about {
        margin-top: 20px
    }

    .case__work__desc__toall {
        /*bottom: -540px;*/
        /*bottom: -630px;*/
        bottom: -620px;
        padding-top: 12px;
        padding-bottom: 15px;
        border-top: 1px solid #EAEAEA;

    }

    .case__work__desc__toall a {
        margin-left: 0
    }

    .case__work__pics {
        width: 100%;
        margin: 0
    }

    .case__work__pics .slick-slider {
        margin-bottom: 5px
    }

    .case__work__pics .slick-dots {
        bottom: 20px
    }

    .case__work__pics__list, .case__work__pics__item, .case__work__pics__item__img {
        width: 100%;
        height: 490px
    }

    .case__work__pics__counter {
        display: block;
        position: absolute;
        z-index: 10;
        top: 7px;
        right: 7px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        font-size: .9125em;
        border-radius: 15px;
        padding: 1px 5px 2px 8px;
        letter-spacing: .3em
    }

    #layout.layout__contacts {
        height: auto
    }

    .contacts__pageinfo {
        padding-top: 120px;
        float: none
    }

    .contacts__pageinfo .pageinfo__inside {
        padding: 0
    }

    .contacts__pageinfo .company__page {
        width: 100%;
        height: auto;
        border: 0;
        margin-left: 0;
        min-height: 0
    }

    .contacts__pageinfo .company__page__contacts__desc {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        font-size: .9125em
    }

    .contacts__pageinfo .company__page__feedback .btn-type-1:first-child {
        margin: 0 auto 8px auto;
        display: block
    }

    .contacts__content {
        width: 100%;
        height: 320px;
        margin-top: 33px;
        float: none
    }

    .blog__content {
        padding-top: 200px
    }

    .blog__posts {
        max-width: none;
        min-width: 280px;
        padding-top: 5px;
        padding-bottom: 0
    }

    .blog__post {
        text-align: center
    }

    .blog__post:first-child {
        border-top: 1px solid #f0f0f0
    }

    .blog__post:last-child {
        border-bottom: 0
    }

    .blog__post__inside {
        margin: 0;
        width: 90%;
        text-align: center
    }

    .blog__post__title {
        font-size: 2.25em
    }

    .blog__post__time {
        font-size: .9125em
    }

    .blog__post__content {
        font-size: 15px
    }

    .blog__post__tags {
        /*margin-top: 15px*/
        margin-top: 40px
    }

    .blog__post__content__preview__img {
        padding: 20px;
        box-sizing: border-box;
        -moz-box-sizing: border-box
    }

    .blog__post__content__preview__img img {
        max-width: 100%
    }

    .blog__sidebar__open {
        position: absolute;
        top: 115px;
        left: 50%;
        right: auto;
        margin-left: -25px
    }

    .blog__sidebar__open:after {
        width: 10px;
        height: 24px;
        top: 13px;
        left: 20px;
        background-position: 0 -75px
    }

    .blog__sidebar__open.open {
        right: auto
    }

    .blog__sidebar__open.open ~ .blog__sidebar {
        height: auto;
        opacity: 1
    }

    .blog__sidebar__open.open ~ .blog__posts {
        padding-top: 100px
    }

    .blog__sidebar {
        height: 0;
        opacity: 0;
        position: relative;
        right: 0 !important;
        min-width: 280px;
        max-width: none;
        width: 100%;
        overflow: hidden
    }

    .blog__sidebar__best {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0
    }

    .blog__sidebar__best__item:last-child {
        margin-bottom: 0;
        border-bottom: 0
    }

    .blog__sidebar__best__title {
        padding: 0 25px
    }

    .blog__sidebar__best__item__link {
        padding: 0 25px
    }

    .blog__sidebar__best__item__text {
        font-size: 1em
    }

    .blog__sidebar__subscribe {
        position: relative;
        margin-top: 0
    }

    .blog__post__detail {
        padding-bottom: 50px
    }

    .blog__post__detail .blog__post {
        width: 100%
    }

    .blog__post__detail .blog__post__content {
        text-align: left
    }

    .blog__post__toposts {
        display: none
    }

    .blog__post__sharing {
        text-align: left
    }

    .blog__post__comment {
        width: 90%;
        padding-left: 5%;
        padding-right: 5%;
        margin: 0
    }

    .readmore {
        position: relative;
        /*max-height: 6em;*/
        height: 90px;
        overflow: hidden
    }

    .readmore:after {
        content: '...';
        display: block;
        position: absolute;
        bottom: 2px;
        font-size: 1em;
        letter-spacing: .05em;
        right: 0;
        color: #ff4f4f;
        text-decoration: underline;
        cursor: pointer;
        background: white;
        padding: 0 8px
    }

    .readmore.open {
        /*max-height: none !important*/
        height: auto;
    }

    .readmore.open:after {
        display: none !important
    }
}

@media (max-width: 619px) {
    nav.nav {
        height: 423px
    }

    .nav__menu {
        margin-top: 45px
    }

    .nav__menu .nav__menu__link {
        height: 45px;
        line-height: 45px
    }

    .mst__logo.open ~ .nav__info {
        top: 423px
    }

    .index__pageinfo__nav a {
        width: 100%;
        border-right: 0
    }

    .index__pageinfo__nav a:first-child + a {
        border-top: 0
    }

    .nav__info__inside {
        margin-top: 20%;
        margin-bottom: 15%
    }

    .nav__feedback.open {
        top: 423px
    }

    .nav__feedback .feeback__block {
        width: 96%;
        margin-left: -4px;
    }

    .nav__feedback .feeback__block__form .input-type-1 {
        width: 100%
    }

    .works__item__info {
        height: 100%;
        top: 0
    }

    .works__item__towork {
        position: relative
    }

    .works__item__info-year {
        font-size: 0 !important;
        padding: 0;
        margin: 0;
        border: 0;
        width: 0;
        height: 100%
    }

    .works__item__info__about {
        width: 99%;
        margin: 0;
        padding: 0
    }

    .works__item__info__about-work {
        display: none
    }

    .works__item__info__about-title {
        text-align: center;
        width: 100%;
        display: inline-block;
        vertical-align: middle
    }

    .services__nav__category {
        width: 100%
    }

    .services__nav__category:nth-child(even) {
        border-left: 0
    }

    .services__feedback {
        padding-top: 30px
    }

    .services__desc__text {
        width: 92%
    }

    .services__desc__text.readmore {
        max-height: 6.5em
    }

    .services__works {
        height: 170px
    }

    .services__works .works__items {
        height: 170px
    }

    .services__works .works__item {
        height: 170px
    }

    .services__works .slick-dots {
        bottom: 15px
    }

    .company__page.people .company__page__desc {
        display: block;
        opacity: 1
    }

    .company__page.people .company__page__precept {
        display: block;
        opacity: 1
    }

    .company__page.people .company__people {
        display: none
    }

    .company__page__desc__people {
        color: #373737;
        cursor: text;
        text-decoration: none
    }

    .company__page__desc__people:hover {
        color: #373737
    }

    .company__page__contacts__desc {
        font-size: .9375em
    }

    .company__page__precept ul {
        width: 190px
    }

    .company__page__precept li {
        margin-top: 12px;
        margin-bottom: 12px
    }

    .company__page__precept .icon-precept {
        left: 0;
        padding-left: 30px;
        padding-right: 0
    }

    .company__page__precept .icon-precept:after, .company__page__precept .icon-precept:hover {
        left: 0
    }

    .company__page__precept li:nth-child(3n) .icon-precept {
        left: auto;
        right: 0;
        padding-right: 33px;
        padding-left: 0
    }

    .company__page__precept li:nth-child(3n) .icon-precept:after {
        left: auto;
        right: 0
    }

    .company__page__precept li:nth-child(3n) .icon-precept:hover {
        left: auto;
        right: 0
    }

    .nav__portfolio__years, .nav__portfolio__categories {
        width: 100%
    }

    .nav__portfolio__categories {
        margin-top: -1px
    }

    .readmore {
        max-height: 12em
    }

    .case__work__pics__list, .case__work__pics__item, .case__work__pics__item__img {
        width: 100%;
        height: 250px
    }

    .case__work:first-child .case__work__desc__toall, .case__work:last-child .case__work__desc__toall {
        /*bottom: -390px*/
        bottom: -407px;
        border: 0;
    }

    .case__work__desc__toall {
        /*bottom: -300px*/
        bottom: -385px;
        border: 0;
    }

    .case__work__pics__counter {
        font-size: .75em;
        padding-left: 6px;
        padding-right: 3px
    }

    .blog__content {
        padding-top: 185px
    }

    .blog__sidebar__open {
        top: 105px
    }

    .blog__sidebar__open.open ~ .blog__posts {
        padding-top: 0
    }

    .blog__post__detail .blog__post__tags {
        width: 100%;
        text-align: center;
        padding-bottom: 15px
    }

    .blog__post__sharing__btn {
        display: none
    }

    .blog__post__sharing__social {
        position: relative;
        display: block;
        opacity: 1;
        text-align: center;
        left: 0;
        width: 100%;
        padding-bottom: 5px
    }

    .blog__post__sharing {
        width: 100%;
        text-align: center;
        overflow: visible
    }
}

.rating .comments li{ overflow:hidden; padding:10px 0;}
.rating .comments .photo_chel{ float:left; width:100px; text-align:center; margin:0 10px 0 0;}
.rating .comments .text_chel{ float:left; width:488px; margin:0 10px 0 0;}
.rating .comments .text_chel > div{ border:1px solid #ebebeb; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -khtml-border-radius:5px; padding:7px; -webkit-box-shadow:inset 2px 2px 2px #ebebeb, inset -2px -2px 2px #ebebeb; -moz-box-shadow:inset 2px 2px 2px #ebebeb, inset -2px -2px 2px #ebebeb); box-shadow:inset 2px 2px 2px #ebebeb, inset -2px -2px 2px #ebebeb;}
.rating .comments .text_chel > div p{ margin:0;}
.rating .soc{ padding:16px 0; margin-left:-3px;}

.portfolio__years__yearlink.n_active:before {
opacity:1;
content: '';
position: absolute;
width: 7px;
height: 7px;
border-radius: 7px;
background-color: white;
left: 50%;
margin-left: -3px;
top: 0;
transition: all .2s ease-in-out;
z-index:1000;
}
.portfolio__years__yearlink.n_active:after {
opacity:1;
content: '';
border: inherit;
background-color: inherit;
}
.contact-bottom-box{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #dddddd;
    z-index: 10;
    font-size: 0;
}
.contact-bottom-box div{
    display: inline-block;
    vertical-align: top;
    width: 49%;
    color: #343434;
    font-family: 'Roboto Condensed';
    font-size: 16px;
    font-weight: 300;
    border-left: 1px solid #dddddd;
    text-align: center;
    padding: 19px 0;
}
.contact-bottom-box div:first-child{

    border-left: 0;
}
.contact-bottom-box div a{
    text-decoration: none;
    color: #de5050;
}