blockquote,
body,
code,
dd,
div,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
p,
pre,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

abbr,
fieldset,
img {
    border: 0
}

address,
caption,
cite,
code,
dfn,
th,
var {
    font-style: normal;
    font-weight: 400
}

ul li {
    list-style: none
}

caption,
th {
    text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: 400
}

sup {
    vertical-align: text-top
}

sub {
    vertical-align: text-bottom
}

input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit
}

legend {
    color: #000
}

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

img {
    max-width: 100%;
    height: auto
}

/* {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}*/

::selection {
  background: #9be382; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #9be382; /* Gecko Browsers */
}

::-moz-focus-inner {
    border: 0
}

@font-face {
    font-family: 'Century Gothic';
    src: url(../fonts/CenturyGothic-Bold.eot);
    src: local('Century Gothic Bold'), local('CenturyGothic-Bold'), url(../fonts/CenturyGothic-Bold.eot?#iefix) format('embedded-opentype'), url(../fonts/CenturyGothic-Bold.woff2) format('woff2'), url(../fonts/CenturyGothic-Bold.woff) format('woff'), url(../fonts/CenturyGothic-Bold.ttf) format('truetype'), url(../fonts/CenturyGothic-Bold.svg#CenturyGothic-Bold) format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Century Gothic';
    src: url(../fonts/CenturyGothic.eot);
    src: local('Century Gothic'), local('CenturyGothic'), url(../fonts/CenturyGothic.eot?#iefix) format('embedded-opentype'), url(../fonts/CenturyGothic.woff2) format('woff2'), url(../fonts/CenturyGothic.woff) format('woff'), url(../fonts/CenturyGothic.ttf) format('truetype'), url(../fonts/CenturyGothic.svg#CenturyGothic) format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Bebas;
    src: url(../fonts/BebasNeue-Thin.eot);
    src: local('Bebas Neue Thin Regular'), local('BebasNeue-Thin'), url(../fonts/BebasNeue-Thin.eot?#iefix) format('embedded-opentype'), url(../fonts/BebasNeue-Thin.woff2) format('woff2'), url(../fonts/BebasNeue-Thin.woff) format('woff'), url(../fonts/BebasNeue-Thin.ttf) format('truetype'), url(../fonts/BebasNeue-Thin.svg#BebasNeue-Thin) format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Bebas;
    src: url(../fonts/BebasNeueRegular.eot);
    src: local('Bebas Neue Regular Regular'), local('BebasNeueRegular'), url(../fonts/BebasNeueRegular.eot?#iefix) format('embedded-opentype'), url(../fonts/BebasNeueRegular.woff2) format('woff2'), url(../fonts/BebasNeueRegular.woff) format('woff'), url(../fonts/BebasNeueRegular.ttf) format('truetype'), url(../fonts/BebasNeueRegular.svg#BebasNeueRegular) format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Bebas;
    src: url(../fonts/BebasNeueBold.eot);
    src: local('Bebas Neue Bold Regular'), local('BebasNeueBold'), url(../fonts/BebasNeueBold.eot?#iefix) format('embedded-opentype'), url(../fonts/BebasNeueBold.woff2) format('woff2'), url(../fonts/BebasNeueBold.woff) format('woff'), url(../fonts/BebasNeueBold.ttf) format('truetype'), url(../fonts/BebasNeueBold.svg#BebasNeueBold) format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Bebas;
    src: url(../fonts/BebasNeueBook.eot);
    src: local('Bebas Neue Book Regular'), local('BebasNeueBook'), url(../fonts/BebasNeueBook.eot?#iefix) format('embedded-opentype'), url(../fonts/BebasNeueBook.woff2) format('woff2'), url(../fonts/BebasNeueBook.woff) format('woff'), url(../fonts/BebasNeueBook.ttf) format('truetype'), url(../fonts/BebasNeueBook.svg#BebasNeueBook) format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

.b24-widget-button-position-bottom-left {
    left: 15.05px!important;
    bottom: 15.05px!important
}

.bx-livechat-position-bottom-left {
    bottom: 100px!important
}

html.mobile .bx-livechat-position-bottom-left {
    bottom: 0!important
}

@media only screen and (max-height:670px) {
    .bx-livechat-position-bottom-left {
        bottom: 20px!important
    }
}

html.mobile .bx-livechat-wrapper {
    height: 100%!important
}

@media only screen and (max-height:670px) {
    .bx-livechat-wrapper {
        height: calc(60%)!important
    }
}

.dop_mobile,
.usluga_divider,
.work-email {
    display: none
}

.usluga_up_block {
    min-height: 452px
}

.uslugi_up_block {
    min-height: 392px!important
}

#mse2_results {
    font-family: 'Century Gothic';
    font-weight: 700;
    font-size: 26px;
    text-align: center;
    margin-bottom: 15px
}

#mse2_results min-h .answer {
    flex: 1 1 100%;
    text-align: center
}

#mse2_results .queryVal {
    color: #6464ff;
    font-size: 21px
}

.hidePlaceholders::-webkit-input-placeholder {
    opacity: 0!important
}

.hidePlaceholders:-moz-placeholder {
    opacity: 0!important
}

.hidePlaceholders::-moz-placeholder {
    opacity: 0!important
}

.hidePlaceholders:-ms-input-placeholder {
    opacity: 0!important
}

.oldBrowse {
    width: 750px;
    height: 197px;
    background: url(../img/oldBrowse.png);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 5;
    display: none;
    cursor: pointer
}

.button_search_back {
    display: inline-block;
    padding-left: 25px;
    padding-right: 25px;
    height: 52px;
    line-height: 52px;
    background-image: linear-gradient(to right, #bf77c6 0, #6751bc 51%, #bf77c6 100%);
    color: #fff;
    font-size: 20px;
    font-family: Bebas, sans-serif;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    border-radius: 26px;
    background-size: 200% auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    transition: .5s;
    margin: 30px auto 0;
    cursor: pointer
}

.button_search_back:hover {
    background-position: right center
}

.button_search_back:active {
    background-color: #919191;
    background-position: center center
}

.button_search_back:focus {
    box-shadow: 0 0 13px 0 rgba(0, 0, 0, .4)!important
}

.button_search_back.in_filt {
    position: absolute;
    right: 0;
    top: 0
}

input:-moz-placeholder {
    opacity: 1
}

span.error {
    color: red!important
}

#jGrowl,
.grecaptcha-badge {
    display: none!important
}

.numbers_mobile,
.numbers_pc {
    opacity: 0;
    transition: .25s
}

html.mobile {
    display: block
}

.parallax-mirror {
    overflow: visible!important;

}

.button,
.slick-slide,
[data-tippy-content],
a,
button,
input,
label,
textarea {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent
}

.button:focus,
.slick-slide:focus,
[data-tippy-content]:focus,
a:focus,
button:focus,
input:focus,
label:focus,
textarea:focus {
    outline: 0
}

input,
textarea {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text
}

.button {
    cursor: pointer;
    border: none
}

.blocker {
    z-index: 95
}

.ovh {
    overflow: hidden!important
}

.slick-next,
.slick-prev {
    transition: .25s
}

.tippy-backdrop {
    background-color: rgba(0, 0, 0, .7)
}

body {
    background-color: #ededed;
    text-rendering: geometricPrecision
}

@media only screen and (max-width:320px) {
    body {
        width: 320px
    }
}

h1 {
    font-family: Bebas;
    font-weight: 700
}

a {
    text-decoration: none;
    color: unset
}

a:focus {
    border: none
}

.p403 {
    width: 100vw;
    height: 100vh;
    background: url(../img/403.jpg) center;
    background-size: cover;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box
}

.p403 .block .text {
    font-family: Bebas;
    text-transform: uppercase;
    font-size: 35px;
    font-weight: 200;
    color: #fff;
    text-align: center;
    margin-top: 20px
}

.p403 .block .goBack {
    background-image: linear-gradient(to right, #fff 0, #b4c5fe 51%, #fff 100%);
    background-size: 200% auto;
    border-radius: 26px;
    width: 156px;
    height: 52px;
    font-family: Bebas;
    font-weight: 400;
    color: #8ea2f5;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 60px auto 0;
    transition: .25s;
    cursor: pointer
}

.p403 .block .goBack:hover {
    background-position: right center
}

.p403 .block .goBack:active {
    background-position: center;
    color: #fff
}

.p404 {
    width: 100vw;
    height: 100vh;
    background: url(../img/404.jpg) center;
    background-size: cover;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box
}

.p404 .block .text {
    font-family: Bebas;
    text-transform: uppercase;
    font-size: 35px;
    font-weight: 200;
    color: #fff;
    text-align: center;
    margin-top: 20px
}

.p404 .block .goBack {
    background-image: linear-gradient(to right, #fff 0, #c095c1 51%, #fff 100%);
    background-size: 200% auto;
    border-radius: 26px;
    width: 156px;
    height: 52px;
    font-family: Bebas;
    font-weight: 400;
    color: #945198;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 60px auto 0;
    transition: .25s;
    cursor: pointer
}

.p404 .block .goBack:hover {
    background-position: right center
}

.p404 .block .goBack:active {
    background-position: center;
    color: #fff
}

.blocker {
    background-image: linear-gradient(-247deg, rgba(94, 121, 67, .7) 0, rgba(7, 40, 49, .8) 100%)
}

.modal {
    max-width: 555px
}

.modal .close {
    position: absolute;
    right: -60px;
    top: 30px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    opacity: .65;
    transition: .25s
}

.modal .close:active:after,
.modal .close:active:before {
    background-color: #13b2d6
}

.modal .close:hover {
    opacity: 1
}

.modal .close:after,
.modal .close:before {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #fff
}

.modal .close:before {
    transform: rotate(45deg);
    transition: .25s
}

.modal .close:after {
    transform: rotate(-45deg);
    transition: .25s
}

.wrapper {
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px
}

@media screen and (max-width:780px) {
    .wrapper {
        padding-left: 15px;
        padding-right: 15px
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px
}

.hidden {
    display: none!important
}

.no-results {
    display: block!important;
    margin: 0!important;
    padding-bottom: 60px;
    color: #000;
    font-family: Bebas;
    font-size: 50px;
    font-weight: 700;
    line-height: 76px;
    text-align: center
}

.blackout {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    z-index: 20;
    position: fixed;
    display: none
}

.goUp {
    position: fixed;
    z-index: 6;
    cursor: pointer;
    bottom: 20px;
    right: 20px;
    font-size: 30px;
    display: none;
    justify-content: center;
    align-items: center;
    color: #000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    text-align: center;
    line-height: 50px;
    transition: .25s;
    box-shadow: 0 7px 18px rgba(56, 56, 56, .33);
    opacity: .8
}

.goUp:hover {
    opacity: 1
}

#thankYou,
#thankYouReview {
    height: 600px
}

#thankYou .text,
#thankYouReview .text {
    margin-top: 20px!important;
    letter-spacing: 1.5px!important
}

#thankYou .back,
#thankYouReview .back {
    margin-top: 85px!important
}

#askUs,
#pricetable_form,
#pricetable_form2,
#rassil,
#reviewForm,
#thankYou,
#thankYouReview,
#weblightTeam {
    width: 500px;
    background: url(../img/askUs.jpg);
    padding-top: 45px;
    padding-bottom: 30px;
    border-radius: 0;
    box-shadow: unset
}

#askUs .header,
#pricetable_form .header,
#pricetable_form2 .header,
#rassil .header,
#reviewForm .header,
#thankYou .header,
#thankYouReview .header,
#weblightTeam .header {
    color: #fefefe;
    font-family: Bebas;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    text-align: center
}

#askUs .header.thank,
#pricetable_form .header.thank,
#pricetable_form2 .header.thank,
#rassil .header.thank,
#reviewForm .header.thank,
#thankYou .header.thank,
#thankYouReview .header.thank,
#weblightTeam .header.thank {
    color: #fefefe;
    font-family: Bebas;
    font-size: 76px;
    font-weight: 700;
    line-height: 76px;
    margin-top: 60px
}

#askUs .text,
#pricetable_form .text,
#pricetable_form2 .text,
#rassil .text,
#reviewForm .text,
#thankYou .text,
#thankYouReview .text,
#weblightTeam .text {
    color: #fff;
    font-family: Bebas;
    font-size: 35px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    margin-top: 35px
}

#askUs .back,
#pricetable_form .back,
#pricetable_form2 .text,
#rassil .back,
#reviewForm .back,
#thankYou .back,
#thankYouReview .back,
#weblightTeam .back {
    width: 156px;
    height: 52px;
    border-radius: 26px;
    background-color: #fff;
    color: #13b2d6;
    font-family: Bebas;
    font-size: 20px;
    font-weight: 400;
    margin: 50px auto 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .25s
}

#askUs .back:hover,
#pricetable_form .back:hover,
#pricetable_form2 .back:hover,
#rassil .back:hover,
#reviewForm .back:hover,
#thankYou .back:hover,
#thankYouReview .back:hover,
#weblightTeam .back:hover {
    background-color: #f0fcff
}

#askUs .back:active,
#pricetable_form .back:active,
#pricetable_form2 .back:active,
#rassil .back:active,
#reviewForm .back:active,
#thankYou .back:active,
#thankYouReview .back:active,
#weblightTeam .back:active {
    background-color: #919191;
    color: #fff
}

#askUs .form,
#pricetable_form .form,
#pricetable_form2 .form,
#rassil .form,
#reviewForm .form,
#thankYou .form,
#thankYouReview .form,
#weblightTeam .form {
    width: 404px;
    margin: 45px auto 0
}

#askUs .form .field,
#pricetable_form .form .field,
#pricetable_form2 .form .field,
#rassil .form .field,
#reviewForm .form .field,
#thankYou .form .field,
#thankYouReview .form .field,
#weblightTeam .form .field {
    width: 404px;
    margin-bottom: 13px;
    position: relative
}

#askUs .form .field label.field_error,
#pricetable_form .form .field label.field_error,
#pricetable_form2 .form .field label.field_error,
#rassil .form .field label.field_error,
#reviewForm .form .field label.field_error,
#thankYou .form .field label.field_error,
#thankYouReview .form .field label.field_error,
#weblightTeam .form .field label.field_error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    width: 128px;
    height: 48px;
    top: 8px;
    right: 10px;
    z-index: 2;
    border: 1px solid #fed8d8;
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;
    border-radius: 30px;
    color: red;
    font-family: 'Century Gothic';
    font-size: 11px;
    font-weight: 700;
    line-height: 10px;
    padding-top: 0;
    background-color: #fff
}

#askUs .form .field:last-child,
#pricetable_form .form .field:last-child,
#pricetable_form2 .form .field:last-child,
#rassil .form .field:last-child,
#reviewForm .form .field:last-child,
#thankYou .form .field:last-child,
#thankYouReview .form .field:last-child,
#weblightTeam .form .field:last-child {
    margin: 0
}

#askUs .form .field i,
#pricetable_form .form .field i,
#pricetable_form2 .form .field i,
#rassil .form .field i,
#reviewForm .form .field i,
#thankYou .form .field i,
#thankYouReview .form .field i,
#weblightTeam .form .field i {
    position: absolute;
    font-size: 60px;
    top: -10px;
    left: 0;
    color: #fff;
    z-index: 1;
    opacity: .3
}

#askUs .form .field input,
#pricetable_form .form .field input,
#pricetable_form2 .form .field input,
#rassil .form .field input,
#reviewForm .form .field input,
#thankYou .form .field input,
#thankYouReview .form .field input,
#weblightTeam .form .field input {
    position: relative;
    z-index: 2;
    display: block;
    width: 363px;
    height: 63px;
    margin-left: 40px;
    box-shadow: 0 4px 16px rgba(237, 237, 237, .5), inset 0 3px 5px rgba(0, 0, 0, .18);
    background-color: #fff;
    border: none;
    border-radius: 30px;
    padding-left: 35px;
    padding-right: 20px;
    box-sizing: border-box;
    line-height: 20px;
    font-family: 'Century Gothic';
    font-size: 16px;
    color: #60a5e0;
    font-weight: 400
}

#askUs .form .field input::-webkit-input-placeholder,
#pricetable_form .form .field input::-webkit-input-placeholder,
#pricetable_form2 .form .field input::-webkit-input-placeholder,
#rassil .form .field input::-webkit-input-placeholder,
#reviewForm .form .field input::-webkit-input-placeholder,
#thankYou .form .field input::-webkit-input-placeholder,
#thankYouReview .form .field input::-webkit-input-placeholder,
#weblightTeam .form .field input::-webkit-input-placeholder {
    color: #60a5e0;
    opacity: 1
}

#askUs .form .field input::-moz-placeholder,
#pricetable_form .form .field input::-moz-placeholder,
#pricetable_form2 .form .field input::-moz-placeholder,
#rassil .form .field input::-moz-placeholder,
#reviewForm .form .field input::-moz-placeholder,
#thankYou .form .field input::-moz-placeholder,
#thankYouReview .form .field input::-moz-placeholder,
#weblightTeam .form .field input::-moz-placeholder {
    color: #60a5e0;
    opacity: 1
}

#askUs .form .field input:-ms-input-placeholder,
#pricetable_form .form .field input:-ms-input-placeholder,
#pricetable_form2 .form .field input:-ms-input-placeholder,
#rassil .form .field input:-ms-input-placeholder,
#reviewForm .form .field input:-ms-input-placeholder,
#thankYou .form .field input:-ms-input-placeholder,
#thankYouReview .form .field input:-ms-input-placeholder,
#weblightTeam .form .field input:-ms-input-placeholder {
    color: #60a5e0;
    opacity: 1
}

#askUs .form .field input:-moz-placeholder,
#pricetable_form .form .field input:-moz-placeholder,
#pricetable_form2 .form .field input:-moz-placeholder,
#rassil .form .field input:-moz-placeholder,
#reviewForm .form .field input:-moz-placeholder,
#thankYou .form .field input:-moz-placeholder,
#thankYouReview .form .field input:-moz-placeholder,
#weblightTeam .form .field input:-moz-placeholder {
    color: #60a5e0;
    opacity: 1
}

#askUs .form .field textarea,
#pricetable_form .form .field textarea,
#pricetable_form2 .form .field textarea,
#rassil .form .field textarea,
#reviewForm .form .field textarea,
#thankYou .form .field textarea,
#thankYouReview .form .field textarea,
#weblightTeam .form .field textarea {
    position: relative;
    z-index: 2;
    display: block;
    width: 363px;
    height: 126px;
    resize: none;
    margin-left: 40px;
    box-shadow: 0 4px 16px rgba(237, 237, 237, .5), inset 0 3px 5px rgba(0, 0, 0, .18);
    background-color: #fff;
    border: none;
    border-radius: 30px;
    padding-left: 35px;
    padding-right: 20px;
    box-sizing: border-box;
    font-family: 'Century Gothic';
    font-size: 16px;
    color: #60a5e0;
    padding-top: 20px;
    font-weight: 400
}

#askUs .form .field textarea::-webkit-input-placeholder,
#pricetable_form .form .field textarea::-webkit-input-placeholder,
#pricetable_form2 .form .field textarea::-webkit-input-placeholder,
#rassil .form .field textarea::-webkit-input-placeholder,
#reviewForm .form .field textarea::-webkit-input-placeholder,
#thankYou .form .field textarea::-webkit-input-placeholder,
#thankYouReview .form .field textarea::-webkit-input-placeholder,
#weblightTeam .form .field textarea::-webkit-input-placeholder {
    color: #60a5e0;
    opacity: 1
}

#askUs .form .field textarea::-moz-placeholder,
#pricetable_form .form .field textarea::-moz-placeholder,
#pricetable_form2 .form .field textarea::-moz-placeholder,
#rassil .form .field textarea::-moz-placeholder,
#reviewForm .form .field textarea::-moz-placeholder,
#thankYou .form .field textarea::-moz-placeholder,
#thankYouReview .form .field textarea::-moz-placeholder,
#weblightTeam .form .field textarea::-moz-placeholder {
    color: #60a5e0;
    opacity: 1
}

#askUs .form .field textarea:-ms-input-placeholder,
#pricetable_form .form .field textarea:-ms-input-placeholder,
#pricetable_form2 .form .field textarea:-ms-input-placeholder,
#rassil .form .field textarea:-ms-input-placeholder,
#reviewForm .form .field textarea:-ms-input-placeholder,
#thankYou .form .field textarea:-ms-input-placeholder,
#thankYouReview .form .field textarea:-ms-input-placeholder,
#weblightTeam .form .field textarea:-ms-input-placeholder {
    color: #60a5e0;
    opacity: 1
}

#askUs .form .field textarea:-moz-placeholder,
#pricetable_form .form .field textarea:-moz-placeholder,
#pricetable_form2 .form .field textarea:-moz-placeholder,
#rassil .form .field textarea:-moz-placeholder,
#reviewForm .form .field textarea:-moz-placeholder,
#thankYou .form .field textarea:-moz-placeholder,
#thankYouReview .form .field textarea:-moz-placeholder,
#weblightTeam .form .field textarea:-moz-placeholder {
    color: #60a5e0;
    opacity: 1
}

#askUs .form input[type=checkbox],
#pricetable_form .form input[type=checkbox],
#pricetable_form2 .form input[type=checkbox],
#rassil .form input[type=checkbox],
#reviewForm .form input[type=checkbox],
#thankYou .form input[type=checkbox],
#thankYouReview .form input[type=checkbox],
#weblightTeam .form input[type=checkbox] {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: 0 0;
    border: none
}

#askUs .form input[type=checkbox]:focus,
#pricetable_form .form input[type=checkbox]:focus,
#pricetable_form2 .form input[type=checkbox]:focus,
#rassil .form input[type=checkbox]:focus,
#reviewForm .form input[type=checkbox]:focus,
#thankYou .form input[type=checkbox]:focus,
#thankYouReview .form input[type=checkbox]:focus,
#weblightTeam .form input[type=checkbox]:focus {
    border: none;
    box-shadow: none
}

#askUs .form input[type=checkbox]:after,
#pricetable_form .form input[type=checkbox]:after,
#pricetable_form2 .form input[type=checkbox]:after,
#rassil .form input[type=checkbox]:after,
#reviewForm .form input[type=checkbox]:after,
#thankYou .form input[type=checkbox]:after,
#thankYouReview .form input[type=checkbox]:after,
#weblightTeam .form input[type=checkbox]:after {
    z-index: 3;
    content: ' ';
    position: relative;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: -1px;
    width: 12px;
    height: 12px;
    background-color: #dddddf
}

#askUs .form input[type=checkbox]:before,
#pricetable_form .form input[type=checkbox]:before,
#pricetable_form2 .form input[type=checkbox]:before,
#rassil .form input[type=checkbox]:before,
#reviewForm .form input[type=checkbox]:before,
#thankYou .form input[type=checkbox]:before,
#thankYouReview .form input[type=checkbox]:before,
#weblightTeam .form input[type=checkbox]:before {
    position: absolute;
    z-index: 4;
    content: url(../img/policy.png);
    color: #828282;
    display: none;
    font-weight: 700;
    font-size: 22px;
    top: -12px;
    left: 2px
}

#askUs .form input[type=checkbox]:checked:before,
#pricetable_form .form input[type=checkbox]:checked:before,
#pricetable_form2 .form input[type=checkbox]:checked:before,
#rassil .form input[type=checkbox]:checked:before,
#reviewForm .form input[type=checkbox]:checked:before,
#thankYou .form input[type=checkbox]:checked:before,
#thankYouReview .form input[type=checkbox]:checked:before,
#weblightTeam .form input[type=checkbox]:checked:before {
    display: block
}

#askUs .form .policy,
#pricetable_form .form .policy,
#pricetable_form2 .form .policy,
#rassil .form .policy,
#reviewForm .form .policy,
#thankYou .form .policy,
#thankYouReview .form .policy,
#weblightTeam .form .policy {
    margin-left: 60px;
    margin-top: 30px
}

#askUs .form .policy a,
#pricetable_form .form .policy a,
#pricetable_form2 .form .policy a,
#rassil .form .policy a,
#reviewForm .form .policy a,
#thankYou .form .policy a,
#thankYouReview .form .policy a,
#weblightTeam .form .policy a {
    font-family: 'Century Gothic';
    font-size: 12px;
    color: #fff
}

#askUs .form .file,
#pricetable_form .form .file,
#pricetable_form2 .form .file,
#rassil .form .file,
#reviewForm .form .file,
#thankYou .form .file,
#thankYouReview .form .file,
#weblightTeam .form .file {
    margin-left: 80px;
    margin-top: 15px;
    color: #fff;
    font-size: 12px;
    font-family: 'Century Gothic'
}

#askUs .form .file:hover span,
#pricetable_form .form .file:hover span,
#pricetable_form2 .form .file:hover span,
#rassil .form .file:hover span,
#reviewForm .form .file:hover span,
#thankYou .form .file:hover span,
#thankYouReview .form .file:hover span,
#weblightTeam .form .file:hover span {
    color: #0d2b2f
}

#askUs .form .file i,
#pricetable_form .form .file i,
#pricetable_form2 .form .file i,
#rassil .form .file i,
#reviewForm .form .file i,
#thankYou .form .file i,
#thankYouReview .form .file i,
#weblightTeam .form .file i {
    margin-right: 10px
}

#askUs .form .file span,
#pricetable_form .form .file span,
#pricetable_form2 .form .file span,
#rassil .form .file span,
#reviewForm .form .file span,
#thankYou .form .file span,
#thankYouReview .form .file span,
#weblightTeam .form .file span {
    text-decoration: underline;
    cursor: pointer;
    transition-duration: 250ms
}

#askUs .form .checkbox,
#pricetable_form .form .checkbox,
#pricetable_form2 .form .checkbox,
#rassil .form .checkbox,
#reviewForm .form .checkbox,
#thankYou .form .checkbox,
#thankYouReview .form .checkbox,
#weblightTeam .form .checkbox {
    margin-left: 80px;
    margin-top: 15px;
    padding-right: 15px;
    color: #fff
}

#askUs .form .checkbox label.field_error,
#pricetable_form .form .checkbox label.field_error,
#pricetable_form2 .form .checkbox label.field_error,
#rassil .form .checkbox label.field_error,
#reviewForm .form .checkbox label.field_error,
#thankYou .form .checkbox label.field_error,
#thankYouReview .form .checkbox label.field_error,
#weblightTeam .form .checkbox label.field_error {
    margin-top: 3px;
    position: relative;
    display: block;
    color: red;
    font-family: 'Century Gothic';
    font-size: 0;
    font-weight: 700;
    line-height: 10px;
    z-index: -1
}

#askUs .form .checkbox a,
#pricetable_form .form .checkbox a,
#pricetable_form2 .form .checkbox a,
#rassil .form .checkbox a,
#reviewForm .form .checkbox a,
#thankYou .form .checkbox a,
#thankYouReview .form .checkbox a,
#weblightTeam .form .checkbox a {
    transition-duration: 250ms
}

#askUs .form .checkbox a:hover,
#pricetable_form .form .checkbox a:hover,
#pricetable_form2 .form .checkbox a:hover,
#rassil .form .checkbox a:hover,
#reviewForm .form .checkbox a:hover,
#thankYou .form .checkbox a:hover,
#thankYouReview .form .checkbox a:hover,
#weblightTeam .form .checkbox a:hover {
    color: #0d2b2f
}

#askUs .form .checkbox label,
#pricetable_form .form .checkbox label,
#pricetable_form2 .form .checkbox label,
#rassil .form .checkbox label,
#reviewForm .form .checkbox label,
#thankYou .form .checkbox label,
#thankYouReview .form .checkbox label,
#weblightTeam .form .checkbox label {
    font-family: 'Century Gothic', sans-serif;
    font-size: 12px
}

#askUs .form .checkbox label a,
#pricetable_form .form .checkbox label a,
#pricetable_form2 .form .checkbox label a,
#rassil .form .checkbox label a,
#reviewForm .form .checkbox label a,
#thankYou .form .checkbox label a,
#thankYouReview .form .checkbox label a,
#weblightTeam .form .checkbox label a {
    text-decoration: underline
}

#askUs .form form,
#pricetable_form .form form,
#pricetable_form2 .form form,
#rassil .form form,
#reviewForm .form form,
#thankYou .form form,
#thankYouReview .form form,
#weblightTeam .form form {
    position: relative
}

#askUs .form .button,
#pricetable_form .form .button,
#pricetable_form2 .form .button,
#rassil .form .button,
#reviewForm .form .button,
#thankYou .form .button,
#thankYouReview .form .button,
#weblightTeam .form .button {
    display: block;
    position: relative;
    border: none;
    width: 159px;
    margin: 30px auto 0;
    bottom: unset;
    left: 20px;
    right: 0;
    top: unset;
    background: #fff;
    color: #13b2d6;
    font-weight: 300
}

#askUs .form .button:hover,
#pricetable_form .form .button:hover,
#pricetable_form2 .form .button:hover,
#rassil .form .button:hover,
#reviewForm .form .button:hover,
#thankYou .form .button:hover,
#thankYouReview .form .button:hover,
#weblightTeam .form .button:hover {
    background: #f0fcff
}

#askUs .form .button:active,
#pricetable_form .form .button:active,
#pricetable_form2 .form .button:active,
#rassil .form .button:active,
#reviewForm .form .button:active,
#thankYou .form .button:active,
#thankYouReview .form .button:active,
#weblightTeam .form .button:active {
    background: #919191;
    color: #fff
}

#thankYouReview {
    height: 495px
}

#full-review {
    width: 500px;
    max-width: 555px;
    border-radius: 0;
    box-shadow: unset;
    padding: 0;
    margin: 50px 0
}

#full-review .close {
    z-index: 1
}

#full-review .item {
    box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
    background-color: #fff;
    position: relative;
    padding-bottom: 50px
}

#full-review .item:hover .body .bottom_block .show-full i {
    transform: scale(1.5);
    opacity: .3;
    transition-timing-function: ease-in
}

#full-review .item .header {
    width: 100%;
    height: 98px;
    background-image: linear-gradient(-247deg, #96f5ff 0, #8c6fff 100%);
    position: relative
}

#full-review .item .header .dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right top
}

#full-review .item .body .up_info {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

#full-review .item .body .up_info .left .site_name {
    color: #fff;
    font-family: Bebas;
    font-size: 30px;
    font-weight: 300;
    line-height: 22px;
    margin-top: -15px
}

#full-review .item .body .up_info .right {
    width: 82px;
    height: 82px;
    color: #188788;
    border: 1px solid #8c6cff;
    background-color: #fff;
    font-family: Bebas;
    font-weight: 300;
    font-size: 50px;
    text-align: center;
    line-height: 82px;
    margin-left: 15px;
    border-radius: 50%
}

#full-review .item .body .bottom_block {
    padding: 0 45px;
    margin-top: 70px
}

#full-review .item .body .bottom_block .full-text p,
#full-review .item .body .bottom_block .text p {
    color: #2a2929;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 19.99px;
    word-break: break-word
}

#full-review .item .body .bottom_block .full-text {
    display: none
}

#full-review .item .body .bottom_block .quote {
    float: left;
    margin-right: 15px;
    margin-top: -33px;
    margin-bottom: 20px;
    width: 48px;
    height: 48px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(-247deg, #96f5ff 0, #8c6fff 75%, #8c6fff 100%)
}

#full-review .item .body .bottom_block .show-full {
    margin-top: 30px;
    text-align: center;
    color: #8c6fff;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400
}

#full-review .item .body .bottom_block .show-full i {
    margin-left: 8px;
    transition: 250ms ease-out
}

.tippy-content {
    font-family: 'Century Gothic'
}

#rassil {
    height: 366px
}

#menuToggle {
    overflow: hidden;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9;
    left: 20px;
    top: 22px;
    background: #fff;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(56, 56, 56, .33);
    opacity: 0;
    transition: .5s
}

#menuToggle:hover {
    opacity: 1!important
}

#menuToggle input {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    opacity: 0;
    z-index: 1
}

#menuToggle span {
    width: 30px;
    height: 2px;
    margin-bottom: 6px;
    background: #757474;
    -webkit-transition: all .5s cubic-bezier(.08, .81, .87, .71);
    -moz-transition: all .5s cubic-bezier(.08, .81, .87, .71);
    -ms-transition: all .5s cubic-bezier(.08, .81, .87, .71);
    -o-transition: all .5s cubic-bezier(.08, .81, .87, .71);
    transition: all .5s cubic-bezier(.08, .81, .87, .71)
}

#menuToggle span:last-child {
    margin-bottom: 0
}

#span1 {
    transform-origin: 4px 0
}

#span3 {
    transform-origin: bottom right
}

#menuToggle input:checked~#span1 {
    transform: rotate(45deg) translate(4px, -2px)
}

#menuToggle input:checked~#span2 {
    transform: rotate(495deg) translate(1px, 0)
}

#menuToggle input:checked~#span3 {
    transform: rotate(45deg);
    opacity: 0
}

.screen5 .callback_form {
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px
}

.screen5 .callback_form .wrapper {
    position: relative;
    margin: 0 auto
}

.screen6.footer.pc {
    position: relative
}

.hat {
    background: #fff;
    position: relative;
    width: 100%;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .5);
    z-index: 10
}

.hat .content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: 86px
}

.hat .content .logo {
    width: 74px;
    height: 44px;
    transition: .25s;
    padding-bottom: 10px
}

.hat .content .logo img {
    width: inherit;
    height: inherit
}

.hat .content .logo:hover {
    opacity: .8
}

.hat .content .logo.index-logo:hover {
    opacity: 1
}

.hat .content .link,
.hat .content .link i,
.hat .content a,
.hat .content a i {
    transition: .25s
}

.hat .content nav ul li:focus a,
.hat .content nav ul li:hover>a {
    color: #1e1e1e
}

.hat .content nav>ul>li {
    height: 85px;
    line-height: 85px;
    float: left;
    margin-right: 35px
}

.hat .content nav>ul>li.has-sub:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 8px solid #000;
    border-color: transparent transparent #fff #fff;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 3;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    opacity: 0;
    transition: .25s
}

.hat .content nav>ul>li:hover>ul {
    transform: scaleY(1);
    transition-delay: 0s
}

.hat .content nav>ul>li:hover>.link.has-sub:after,
.hat .content nav>ul>li:hover>a.has-sub:after {
    opacity: 1
}

.hat .content nav>ul>li .link,
.hat .content nav>ul>li a {
    display: block;
    position: relative;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    color: #757474
}

.hat .content nav>ul>li .link.has-sub:after,
.hat .content nav>ul>li a.has-sub:after {
    display: block;
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 8px solid #000;
    border-color: transparent transparent #fff #fff;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    left: 0;
    right: 0;
    bottom: -15px;
    margin: 0 auto;
    z-index: 3;
    box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, .2);
    opacity: 0;
    transition: .25s
}

.hat .content nav>ul>li .link i,
.hat .content nav>ul>li a i {
    color: #ededed;
    margin-right: 10px
}

.hat .content nav>ul>li:last-child {
    margin-right: 0
}

.hat .content nav>ul>li>ul {
    position: absolute;
    transform: scaleY(0);
    transform-origin: 0 0;
    transition: .5s;
    transition-delay: 0s;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    top: 86px;
    left: 0;
    background-color: #f6f6f6;
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2) inset
}

.hat .content nav>ul>li>ul>li {
    height: 55px;
    line-height: 55px;
    float: left;
    margin-right: 55px
}

.hat .content nav>ul>li>ul>li:hover>a.has-sub:after {
    opacity: 1
}

.hat .content nav>ul>li>ul>li>a {
    position: relative
}

.hat .content nav>ul>li>ul>li>a.has-sub:after {
    display: block;
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 8px solid #000;
    border-color: transparent transparent #f6f6f6 #f6f6f6;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    left: 0;
    right: 0;
    bottom: -15px;
    margin: 0 auto;
    z-index: 3;
    box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, .2);
    opacity: 0;
    transition: .25s
}

.hat .content nav>ul>li>ul>li:last-child {
    margin-right: 0
}

.hat .content nav>ul>li>ul>li:hover>ul {
    transform: scaleY(1);
    transition-delay: 0s
}

.hat .content nav>ul>li>ul>li>ul {
    position: absolute;
    transform: scaleY(0);
    transform-origin: 0 0;
    transition: .5s;
    transition-delay: 0s;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    top: 55px;
    left: 0;
    background-color: #eee;
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2) inset
}

.hat .content nav>ul>li>ul>li>ul li {
    float: left;
    margin-right: 55px
}

.hat .content nav>ul>li>ul>li>ul li:last-child {
    margin-right: 0
}

.hat .content .phone a {
    text-decoration: none;
    color: #000;
    font-family: 'Century Gothic';
    font-size: 13px;
    transition: .25s
}

.hat .content .phone a span {
    border-bottom: solid 1px transparent;
    -webkit-transition: color .25s ease-out, border-bottom-color .25s ease-out;
    -moz-transition: color .25s ease-out, border-bottom-color .25s ease-out;
    -ms-transition: color .25s ease-out, border-bottom-color .25s ease-out;
    -o-transition: color .25s ease-out, border-bottom-color .25s ease-out;
    transition: color .25s ease-out, border-bottom-color .25s ease-out
}

.hat .content .phone a:hover span {
    border-bottom: solid 1px #000
}

.hat .content .phone a i {
    transform: rotate(90deg);
    color: #147578;
    margin-right: 5px
}

.slider_mobile {
    display: none
}

.main-slider {
    position: relative;
    width: 100%;
    height: calc(100vh - 86px);
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center
}

/*.main-slider .wrapper {
    position: relative;
    z-index: 1;
    flex-grow: 1
}

.main-slider:after {
    display: block;
    position: absolute;
    width: 100%;
    height: calc(100vh - 86px);
    top: 0;
    left: 0;
    content: '';
    background-image: linear-gradient(90deg, #6cae43 0, #207378 100%);
    opacity: .9
}

.main-slider .title {
    width: 420px;
    color: #fff;
    font-weight: 700;
    font-family: bebas;
    font-size: 58px;
    line-height: 58px;
    z-index: 3;
    position: relative
}*/

.main-slider .text {
    margin-top: 92px;
    width: 280px;
    height: 92px;
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-left: 2px
}

.main-slider .slider {
    width: 810px;
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 2
}

.main-slider .slider>div:not(.slick-list) {
    display: none
}

.main-slider .project-button,
.main-slider .slick-next,
.main-slider .slick-prev {
    position: absolute;
    top: unset;
    right: 15px;
    width: 52px;
    height: 52px;
    opacity: .25;
    line-height: 52px;
    font-size: 20px;
    z-index: 3
}

.main-slider .project-button:before,
.main-slider .slick-next:before,
.main-slider .slick-prev:before {
    content: ' '
}

.main-slider .project-button:focus,
.main-slider .project-button:hover,
.main-slider .slick-next:focus,
.main-slider .slick-next:hover,
.main-slider .slick-prev:focus,
.main-slider .slick-prev:hover {
    opacity: .5
}

.main-slider .project-button:focus .bg,
.main-slider .slick-next:focus .bg,
.main-slider .slick-prev:focus .bg {
    border-width: 2px
}

.main-slider .project-button:active .bg,
.main-slider .slick-next:active .bg,
.main-slider .slick-prev:active .bg {
    border-color: #919191
}

.main-slider .project-button:active .symbol,
.main-slider .slick-next:active .symbol,
.main-slider .slick-prev:active .symbol {
    color: #919191
}

.main-slider .project-button .bg,
.main-slider .slick-next .bg,
.main-slider .slick-prev .bg {
    background-image: none;
    border: 1px solid #fff
}

.main-slider .project-button .symbol,
.main-slider .slick-next .symbol,
.main-slider .slick-prev .symbol {
    background-image: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-background-clip: unset
}

.main-slider .slick-next {
    bottom: 230px
}

.main-slider .slick-prev {
    left: unset;
    bottom: 349px
}

.main-slider .project-link {
    position: absolute;
    top: unset;
    bottom: 315px;
    right: 15px;
    z-index: 3;
    cursor: pointer
}

.main-slider .project-link:focus .project-button,
.main-slider .project-link:hover {
    opacity: .5
}

.main-slider .project-link:focus .bg {
    border-width: 2px
}

.main-slider .project-link:active .bg {
    border-color: #919191
}

.main-slider .project-link:active .symbol {
    color: #919191
}

.main-slider .project-link .project-button {
    position: relative;
    right: 0
}

.main-slider .project-link .project-button:hover {
    opacity: 1
}

.main-slider .numbers_pc {
    margin-top: 155px;
    margin-left: -61px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.main-slider .numbers_pc .item {
    position: relative;
    display: flex;
    flex-wrap: wrap
}

.main-slider .numbers_pc .item .number {
    font-family: Bebas;
    font-weight: 100;
    font-size: 150px;
    line-height: 120px;
    width: 168px;
    text-align: right
}

.main-slider .numbers_pc .item .tip {
    position: relative;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    line-height: 24px;
    font-weight: 300;
    align-self: flex-end;
    margin-left: 5px
}

.main-slider .numbers_pc .item .icon {
    position: absolute;
    left: 175px;
    color: #fbc76c;
    font-size: 50px;
    font-weight: 400;
    text-shadow: 0 8px 11px rgba(0, 0, 0, .34)
}

.screen-left .block,
.screen-right .block {
    position: relative
}

.screen-left .block .slider .item .bottom_block .symbol,
.screen-right .block .slider .item .bottom_block .symbol {
    position: relative;
    top: -1px
}

.screen-left .block .slider .item .bottom_block .symbol i,
.screen-right .block .slider .item .bottom_block .symbol i {
    font-size: 15px;
    font-weight: 700
}

.screen-left .block>.control,
.screen-right .block>.control {
    display: flex;
    position: absolute;
    bottom: 33px
}

.screen-left {
    position: relative;
    width: 100%;
    height: auto;
    padding-top: .1px;
    background: url(../img/screen1.png) no-repeat;
    background-position-x: center;
    background-size: cover;
    box-sizing: border-box;
    padding: 140px 0 120px 0;
    background-position-y: bottom;
}

.screen-left.pc {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.screen-left.screen1 {
    box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .5)
}

.screen-left .block {
    display: flex;
    margin: 0 auto;
    width: 1170px;
}


.screen-left .block .slider{
    display: inline-flex;
}
.screen-left .block .slider .item{
    position: relative;
    width: 300px;
    height: 437px;
    background: #fff;
    margin-right: 10px;
    margin-left: 10px;
    padding-top: 45px;
    padding-left: 25px;
    box-sizing: border-box;
    box-shadow: 0 4px 13px rgba(0, 0, 0, .22);
    transition: 300ms;
}


/*.screen-left .block .slider .item:not(.slick-slide) {
    display: none
}*/

.screen-left .block .slider .item:active .more .button {
    color: #fff;
    background: #919191
}

.screen-left .block .slider .item .more {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 2;
    transition: .5s
}

.screen-left .block .slider .item .more .button {
    width: 100px;
    height: 42px;
    box-shadow: 0 7px 18px rgba(56, 56, 56, .33);
    border-radius: 21px;
    background: #fff;
    font-size: 16px;
    color: #9d68c2;
    line-height: 43px;
    box-sizing: border-box;
    padding: 0
}

.screen-left .block .slider .item .more .button:hover {
    background: #f6ebff;
    box-shadow: 0 7px 28px rgba(56, 56, 56, .7)
}

.screen-left .block .slider .item .more .button:active {
    color: #fff;
    background: #919191
}

.screen-left .block .slider .item:hover .svg {
    transform: scale(1.07)
}

.screen-left .block .slider .item:hover .mockup {
    transform: scale(1)
}

.screen-left .block .slider .item:hover .more {
    bottom: 30px
}

.screen-left .block .slider .item .up_block {
    display: flex;
    flex-wrap: wrap;
    height: 75px;
    align-items: center
}

.screen-left .block .slider .item .up_block .img {
    width: 100px
}

.screen-left .block .slider .item .up_block .title {
    margin-left: 15px;
    width: 150px;
    font-family: Bebas;
    font-size: 42px;
    font-weight: 700;
    color: #2aebe6;
    line-height: 40px
}

.screen-left .block .slider .item .bottom_block {
    font-family: 'Century Gothic';
    font-size: 13px;
    line-height: 19px;
    width: 260px;
    margin-top: 30px;
    height: 85px;
    position: relative
}

.screen-left .block .slider .item .bottom_block .price {
    font-family: 'Century Gothic';
    font-size: 18px;
    font-weight: 700;
    color: #2aebe6;
    line-height: 24px;
    position: absolute;
    bottom: 0;
    bottom: -20px;
    left: 0
}

.screen-left .block .slider .item .bottom_block .price i {
    font-size: 16px
}

.screen-left .block .slider .item .mockup {
    position: absolute;
    bottom: -30px;
    z-index: 1;
    transform: scale(.9);
    transition: .5s;
    width: 300px;
    left: -15px
}

.screen-left .block .slider .item .svg {
    position: absolute;
    width: 280px;
    height: 230px;
    overflow: hidden;
    bottom: 0;
    right: 0;
    transform: rotate(0deg);
    transition: .5s;
    transform-origin: 100% 100%
}

.screen-left .block .control {
    left: calc(100% - -20px)
}

.screen-left .arrow {
    width: 52px;
    height: 52px;
    opacity: .75
}

.screen-left .arrow .bg {
    background-image: none;
    border: 1px solid #bf77c6
}

.screen-left .arrow .symbol {
    background-image: none;
    color: #bf77c6;
    -webkit-text-fill-color: #bf77c6;
    -webkit-background-clip: unset
}

.screen-left .arrow:focus,
.screen-left .arrow:hover {
    opacity: 1
}

.screen-left .arrow:focus .bg {
    border-width: 2px
}

.screen-left .arrow:active .bg {
    border-color: #919191
}

.screen-left .arrow:active .symbol {
    color: #919191;
    -webkit-text-fill-color: #919191
}

.screen-left .arrow.next,
.screen-left .arrow.prev {
    z-index: 3
}

/*.screen-left.screen3 .right_side {
    width: 350px
}*/

.screen-left.screen3 .right_side .title {
    background: linear-gradient(-247deg, #dd3d95 0, #4f458b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.screen-left .right_side {
    width: 305px;
    height: 470px;
    display: flex;
    flex-direction: column
}

.screen-left .right_side .title {
    background: linear-gradient(-247deg, #bf77c6 0, #6751bc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
line-height: 62px;
    font-size: 62px;
    font-family: Bebas;
    font-weight: 700;
    text-align: left;
    padding-top: 10px;
    margin-top: -13px;
        margin-left: -2px;
}

.screen-left .right_side .text {
    margin-top: 10px;
    font-size: 14px;
    font-family: 'Century Gothic';
    line-height: 20px;
    color: #2a2929;
    text-align: left;
    width: 100%;
    margin-left: auto
}

.screen-left .right_side .more {
    display: flex;
    margin-top: 25px;
    margin-bottom: 33px
}

.screen-left .right_side .more .button {
    position: relative;
    font-size: 18px
}

.screen-right {
    display: flex;
    height: auto;
    position: relative;
    width: 100%;
    padding-top: .1px;
    background: url(../img/screen2.png) no-repeat;
    background-position-x: center;
    background-size: cover;
    box-sizing: border-box;
}

.screen-right.pc {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.screen-right .block {
    display: flex;
    margin: 0 auto;
    margin-top: 140px;
    margin-bottom: 120px;
    width: 1170px;
}
.screen-right.screen2 .block{
    margin-bottom: 60px;
}
.screen-right .block .slider .slick-list {
    padding-left: 26px;
    height: 470px
}

.screen-right .block .slider .item {
    position: relative;
    width: 376px;
    height: 437px;
    background: #fff;
    margin-left: 3px;
    margin-right: 3px;
    padding-top: 45px;
    padding-left: 45px;
    box-sizing: border-box;
    box-shadow: 0 4px 13px rgba(0, 0, 0, .22);
    transition-duration: 250ms
}

.screen-right .block .slider .item:not(.slick-slide) {
    display: none
}

.screen-right .block .slider .item:active .more .button {
    color: #fff;
    background: #919191
}

.screen-right .block .slider .item .more {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 2;
    transition: .5s
}

.screen-right .block .slider .item .more .button {
    width: 100px;
    height: 42px;
    box-shadow: 0 7px 18px rgba(56, 56, 56, .33);
    border-radius: 21px;
    background: #fff;
    font-size: 16px;
    color: #9d68c2;
    line-height: 43px;
    box-sizing: border-box;
    padding: 0
}

.screen-right .block .slider .item .more .button:hover {
    background: #f6ebff;
    box-shadow: 0 7px 28px rgba(56, 56, 56, .7)
}

.screen-right .block .slider .item .more .button:active {
    color: #fff;
    background: #919191
}

.screen-right .block .slider .item:hover .svg {
    transform: scale(1.07)
}

.screen-right .block .slider .item:hover .mockup {
    transform: scale(1)
}

.screen-right .block .slider .item:hover .more {
    bottom: 30px
}

.screen-right .block .slider .item .up_block {
    display: flex;
    flex-wrap: wrap;
    height: 75px;
    align-items: center
}

.screen-right .block .slider .item .up_block .img {
    width: 100px
}

.screen-right .block .slider .item .up_block .title {
    margin-left: 15px;
    width: 150px;
    font-family: Bebas;
    font-size: 42px;
    font-weight: 700;
    color: #2aebe6;
    line-height: 40px
}

.screen-right .block .slider .item .bottom_block {
    font-family: 'Century Gothic';
    font-size: 13px;
    line-height: 19px;
    width: 260px;
    margin-top: 30px;
    height: 85px;
    position: relative
}

.screen-right .block .slider .item .bottom_block .price {
    font-family: 'Century Gothic';
    font-size: 18px;
    font-weight: 700;
    color: #2aebe6;
    line-height: 24px;
    position: absolute;
    bottom: 0;
    bottom: -20px;
    left: 0
}

.screen-right .block .slider .item .bottom_block .price i {
    font-size: 16px
}

.screen-right .block .slider .item .mockup {
    position: absolute;
    bottom: -30px;
    z-index: 1;
    transform: scale(.9);
    transition: .5s;
    width: 300px;
    left: -15px
}

.screen-right .block .slider .item .svg {
    position: absolute;
    width: 380px;
    height: 250px;
    overflow: hidden;
    bottom: 0;
    right: 0;
    transform: rotate(0deg);
    transition: .5s;
    transform-origin: 100% 100%
}

.screen-right .block .slider .slick-next {
    top: unset;
    bottom: 0;
    left: -100px;
    width: 52px;
    height: 52px;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    opacity: .5;
    line-height: 52px;
    z-index: 3
}

.screen-right .block .slider .slick-next:before {
    content: ' '
}

.screen-right .block .slider .slick-next:hover {
    opacity: 1
}

.screen-right .block .slider .slick-next:active {
    color: #919191;
    border-color: #919191
}

.screen-right .block .slider .slick-prev {
    top: unset;
    bottom: 0;
    left: -180px;
    width: 52px;
    height: 52px;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    opacity: .5;
    line-height: 52px;
    z-index: 3
}

.screen-right .block .slider .slick-prev:before {
    content: ' '
}

.screen-right .block .slider .slick-prev:hover {
    opacity: 1
}

.screen-right .block .slider .slick-prev:active {
    color: #919191;
    border-color: #919191
}

.screen-right .block .control {
    right: calc(100% - 1px)
}

.screen-right .arrow {
    width: 52px;
    height: 52px;
    opacity: .75;
    z-index: 3
}

.screen-right .arrow .bg,
.myslider .arrow .bg{
    background-image: none;
    border: 1px solid #fff;
}

.screen-right .arrow .symbol,
.myslider .arrow .symbol{
    background-image: none;
    color: #fff;
    -webkit-text-fill-color: unset;
    -webkit-background-clip: unset
}

.screen-right .arrow:focus,
.screen-right .arrow:hover {
    opacity: 1
}

.screen-right .arrow:focus .bg {
    border-width: 2px
}

.screen-right .arrow:active .bg {
    border-color: #919191
}

.screen-right .arrow:active .symbol {
    color: #919191;
    -webkit-text-fill-color: #919191
}

.screen-right.screen4 {
    background-image: url(../img/screen4.png)
}

.screen-right .left_side {
    width: 305px;
    height: auto;
    display: flex;
    flex-direction: column
}

.screen-right .left_side .title {
    color: #fff;
    line-height: 62px;
    font-size: 62px;
    font-family: Bebas;
    font-weight: 700;
    text-align: left;
    padding-top: 10px;
    margin-top: -13px
}

.screen-right .left_side .text {
    margin-top: 10px;
    font-size: 14px;
    font-family: 'Century Gothic';
    line-height: 20px;
    color: #fff;
    text-align: left;
    /*width: 190px;*/
    margin-right: auto;
}

.screen-right .left_side .more {
    display: flex;
    margin-top: 25px;
    margin-bottom: 33px
}

.screen-right .left_side .more .button {
    position: relative;
    /*margin-right: auto;*/
    background: #fff;
    color: #be77c5;
    box-shadow: 0 7px 10px rgba(85, 56, 108, .26);
    font-size: 18px
}

.screen-right .left_side .more .button:hover {
    background: #f6ebff
}

.screen-right .left_side .more .button:active {
    background: #919191;
    color: #fff
}

.mycont{
    width: 1015px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.maketing_item{
    width: 405px;
    margin-right: 30px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
        margin-bottom: 60px;
}
.maketing_item .titleWrapper{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
        margin-bottom: 20px;
}
.maketing_item .title{
    font-family: Bebas;
    font-style: normal;
    font-weight: normal;
    font-size: 45px;
    line-height: 45px;
    margin-top: -3px;
    margin-left: 10px;
    color: #FEFEFE;
}

.maketing_item p{
    font-family: Century Gothic;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 17px;
color: #FEFEFE;
    margin-bottom: 30px;
}

.maketing_item .linkEmul{
        width: 110px;
    height: 40px;
    background: #FEFEFE;
    border-radius: 40px;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    font-family: Bebas;
    font-style: normal;
    font-weight: normal;
    font-size: 17px;
    color: #79509A;
    box-shadow: 0 7px 10px rgba(85, 56, 108, .26);
        transition: .5s;
}
.maketing_item:hover .linkEmul, .maketing_item:active .linkEmul{
        background: #f6ebff;
}
.servPackWrapper{
    width: 390px;
    background: #FFFFFF;
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.25);
        padding-bottom: 10px;
}
.servPackTitle{
    padding: 16px 0 16px 0;
    text-align: center;
    font-family: Bebas;
    font-style: normal;
    font-weight: bold;
    font-size: 42px;
    line-height: 42px;
    color: #FEFEFE;
        background-size: cover;
}
.servPackText, .servPackSpoilerText{
    padding: 0px 25px 35px 25px;
}
.servPackText p, .servPackText ul, .servPackText ol,
.servPackSpoilerText p, .servPackSpoilerText ul{
    font-family: Century Gothic;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 17px;
    color: #2A2929;
    margin-top: 30px;
}
.servPackText ul li,
.servPackText ol li,
.servPackSpoilerText ul li{
    padding-left: 15px;
    margin-bottom: 10px;
    position: relative;
}
.servPackText ul li:before,
.servPackSpoilerText ul li:before{
    content: ' ';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #90B4FF;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: calc(50% - 2px);
}
.servPackText ol{
        list-style-position: outside;
    padding-left: 15px;
}
.servPack2 .servPackText ul li:before,
.servPack2 .servPackSpoilerText ul li:before{
    background: #5CB29B;
}
.servPackText ul ul, .servPackText ul ol,
.servPackText ol ul, .servPackText ol ol{
        margin-top: 0;
    margin-left: 15px;
}
.jbeet{
    justify-content: space-between;
}
.abeet{
       align-content: space-between; 
}
.servPackSpoiler{
    margin-bottom: 5px;
}
.servPackSpoilerTitle{
    font-family: Bebas;
    font-style: normal;
    font-weight: bold;
    font-size: 25px;
    color: #FEFEFE;
    background: #8D9DFC;
    padding: 15px 35px 15px 35px;
    position: relative;
    cursor: pointer;
}

.servPack2 .servPackSpoilerTitle{
    background: #5CB29B;
}
.spoilerMarker{
        position: absolute;
    font-size: 31px;
    right: 35px;
    top: calc(50% - 18px);
}
.servPackSpoilerText{
    display: none;
}
.wrapper2{
    width: 1170px;
    max-width: 1170px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-sizing: border-box;
    
}
.col_1of2{
    display: flex;
    flex-wrap: wrap;
    width: 50%;
        align-items: flex-start;
    align-content: flex-start;

}
.myslide{
        padding: 175px 0 100px 0;
}
.myslide .text{
    font-family: Century Gothic;
    font-style: normal;
    font-weight: normal;
    font-size: 25px;
    line-height: 37px;
    color: #FEFEFE;
    padding-right: 30%;
}
.slideSubTitle{
    font-family: Century Gothic;
    font-style: normal;
    font-size: 28px;
    line-height: 37px;
    font-weight: bold;
    color: #FEFEFE;
    padding-right: 30%;
    margin-bottom: 25px;
}
h1.title{
        position: absolute;
    font-family: Bebas;
    font-style: normal;
    font-weight: normal;
    font-size: 58px;
    line-height: 58px;
    color: #FEFEFE;
    text-align: center;
    width: 100%;
    padding-top: 35px;
    z-index: 9;
}
.myslider .slick-arrow.next {
    position: absolute;
    z-index: 9;
    bottom: 35px;
    left: calc(50% - 600px);
}
.myslider .slick-arrow.prev {
    position: absolute;
    z-index: 9;
    bottom: 35px;
    left: calc(50% - 660px);
}
.mt20-mob{
    
}
.text-right,
.screen-right .left_side.text-right .title,
.screen-right .left_side.text-right .text{
    text-align:right;
}
.screen-right .left_side.text-right .more{
       justify-content: flex-end; 
}
.screen4 .block{
    align-items: flex-start;
}
.aboutItem{
    width: 410px;
    margin-right: 30px;
    display: flex;
}
.aboutItem-leftBlock{
    width: 95px;
    text-align: center;
    font-family: Bebas;
    font-style: normal;
    font-weight: normal;
    font-size: 119px;
    margin-right: 20px;
        line-height: 1;
    /* identical to box height, or 126% */
    color: #FEFEFE;
}
.aboutItem-rightBlock{
    width: 315px;
}
.aboutItem-title{
    font-family: Bebas;
    font-style: normal;
    font-weight: normal;
    font-size: 39px;
    line-height: 20px;
    color: #FEFEFE;
    margin-top: 25px;
}
.aboutItem-text{
    font-family: Century Gothic;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #FEFEFE;
    margin-top: 20px;
}
.more-link {
    display: block;
    width: 140px;
    height: 52px;
    background: #FEFEFE;
    border-radius: 40px;
    text-align: center;
    line-height: 52px;
    font-family: Bebas;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    color: #79509A;
    margin-top: 40px;
    box-shadow: 0 7px 10px rgba(85, 56, 108, .26);
    transition: .5s;
}
.more-link:hover, .more-link:active{
    background: #f6ebff;
}
.pazlitem{
    padding: 5px;
    width: 235px;
    height: 235px;
}
.pazlimg{
    width: 235px;
    height: 235px;
    transition: .5s;
    position: absolute;
}
.pazlitem:hover .pazlimg{
    filter: drop-shadow( 0px 0px 6px rgba(0, 0, 0, .3));
}
.pazl1{
    position: absolute;
    top: 0;
    left: 0px;
}
.pazl2{
    position: absolute;
    top: 170px;
    left: 170px;
}
.pazl3{
    position: absolute;
    top: 0px;
    left: 340px;
}
.pazl4{
    position: absolute;
    top: 170px;
    left: 510px;
}
.pazl5{
    position: absolute;
    top: 0px;
    left: 680px;
}
.pazlCounter{
    position: relative;
font-family: Bebas;
font-style: normal;
font-weight: normal;
font-size: 70px;
margin: 0 auto;
z-index: 2;
color: #FEFEFE;
    width: calc(100% - 10px);
    text-align: center;
    display: block;
    padding-top: 25px;
    cursor: default;
}
.pazlText{
    position: relative;
    font-family: Bebas;
font-style: normal;
font-weight: bold;
font-size: 21px;
line-height: 21px;
text-align: center;
z-index: 2;
color: #FEFEFE;
cursor: default;

}
.openSpoilerTab{
    position: absolute;
    top: calc(50% - 8px);
    right: -20px;
    font-family: Bebas!important;
    font-style: normal!important;
    font-weight: normal!important;
    font-size: 42px!important;
    line-height: 1!important;
    color: #8AAAF7!important;
    z-index: 2;
    cursor: pointer;

  -webkit-user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;   
  -ms-user-select: none;    
  user-select: none;    
}
.sub_service_table_spoiler{
    display: none;
    padding: 20px 80px;
    box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25);
    font-family: Century Gothic;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 17px;

color: #434049;
}
.hidden-tablet{
    
}
.hidden-mob{
    
}
.hidden-desk{
    
}
@media screen and (min-width: 1025px){
 .hidden-desk{
     display: none;   
 }   
 #servPack1{
     margin-left: 25px;
 }
}
@media screen and (max-width: 767px){
    .screen-left .block .slider .item .bottom_block {
        width: calc(100% - 25px);
    }
    .screen-left {
 
    padding: 70px 0 60px 0;
    background-position-y: bottom;
}
.screen-left.screen1 {
    box-shadow: none;
     padding: 70px 0 10px 0;
}
.screen-left.screen3 {
    box-shadow: none;
     padding: 70px 0 35px 0;
}
    .screen-right.screen2 .block {
        margin-bottom: 10px;
    }
    .screen-left .right_side .text {
        margin-bottom: 20px;
    }
    .pazlText {
        margin-top: 7px;
        font-size: 25px;
    }
    .pazlCounter {
        padding-top: 30px;
        line-height: 1;
        padding-bottom: 17px;
    }
    .openSpoilerTab {
        position: absolute;
        top: calc(50% - 18px);
        right: 0;
    }
    .sub_service_table_spoiler_wrapper{
        padding: 0!important;
        margin-top: -20px;
    }
    .sub_service_table_spoiler_wrapper td{
        padding: 0!important;
    }
    .mySlideTextWrap{
        height: 270px;
    }
    .pazl1, .pazl2, .pazl3, .pazl4, .pazl5 {
    position: relative;
    top: unset;
    left: unset;
    margin: 0 auto;
    margin-top: 25px;

}
    .hidden-mob{
        display: none;
    }
    .text-right, .screen-right .left_side.text-right .title, .screen-right .left_side.text-right .text {
        text-align: left;
    }
    .screen-right .left_side.text-right .more {
        justify-content: flex-start;
    }
    .aboutItem-title {
    font-family: Bebas;
    font-style: normal;
    font-weight: normal;
    font-size: 45px;
    line-height: 45px;
    color: #FEFEFE;
    margin-top: 10px;
}
.aboutItem {
    width: calc(100% - 30px);
    margin-right: 0px;
    display: flex;
    margin: 0 auto;
    margin-bottom: 20px;
    align-items: flex-start;
}
.aboutItem-rightBlock {
    width: calc(100% - 95px);
}
.aboutItem-text {
    margin-top: 10px;
}
.aboutItem-leftBlock {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.pazlitem {
    padding: 5px;
    width: 265px;
    height: 265px;
}
.pazlimg {
    width: 265px;
    height: 265px;
}
    .screen-left .block .slider .item .bottom_block .price {
        bottom: -20px!important;
    }
    .more-link {
        margin-top: 0px;
        margin-bottom: 25px;
    }
    .mt20-mob{
        margin-top: 20px!important;
    }
    .screen-left .block {
        max-width: 100%;
        flex-wrap: wrap;
        height: auto;
     /*   margin-top: 70px;
        margin-bottom: 60px; */
    }
    .screen-left .block .slider {
        display: inline-flex;
        flex-wrap: wrap;
    }
    .screen-left .block .slider .item{
        margin: 0 auto;
        margin-bottom: 35px;
        width: calc(100% - 30px);
    }
    .screen-left .right_side {
        width: calc(100% - 30px);
        height: auto;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }
    .screen-right .block{
        flex-wrap: wrap;
        margin-top: 70px;
        margin-bottom: 60px;
    }
    .screen-right .left_side {
        width: calc(100% - 30px);
        height: auto;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        margin-bottom: 40px;
    }
    .mycont {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        order: 2;
    }
    .maketing_item {
        width: calc(100% - 30px);
        margin-right: 0;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-bottom: 60px;
    }
    .maketing_item .title {
        font-size: 31px;
    }
    h1.title {
            padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
        position: absolute;
        font-family: Bebas;
        font-style: normal;
        font-weight: normal;
        font-size: 40px;
        line-height: 38px;
        color: #FEFEFE;
        text-align: center;
        width: 100%;
        padding-top: 15px;
        z-index: 9;
    }
    .myslide {
        padding: 110px 0 80px 0;
        height: 670px;
        box-sizing: border-box;
            background-size: cover!important;
    background-position: center!important;
    }
    .wrapper2 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .col_1of2 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        align-items: flex-start;
        align-content: flex-start;
    }
    
    .myslide .text {
        font-family: Century Gothic;
        font-style: normal;
        font-weight: normal;
        font-size: 22px;
        line-height: 28px;
        color: #FEFEFE;
        padding-right: 0;
        margin: 25px 0 25px 0;
            box-sizing: border-box;
    }
    .servPackWrapper {
        width: calc(100% - 30px);
        margin: 0 auto;
        margin-top: 15px;
            margin-bottom: 25px;
    }
    .screen-left.screen3 .block{
        margin-bottom: 45px;
    }
    .screen-left.screen1 .block{
         margin-bottom: 35px;
    }
}
.jbeet-tablet{
    
}
@media screen and (orientation: landscape) and (max-width: 767px){
    .openSpoilerTab {
    position: absolute;
    top: calc(50% - 8px);
    right: -25px;
}
    .screen-left .right_side, .screen-right .left_side {
        width: 100%;
        padding: 0 15px;
    }
    .mySlideTextWrap {
        height: 180px;
    }
    .slick-slide img.img-responsive{
            max-height: 340px;
    }
}
.jbarr-tablet{
    
}
@media screen and (min-width: 768px) and (max-width: 1320px){
    .myslide .text {
    padding-right: 10px;
}
.screen-left {
    padding: 70px 0;
}
.screen-left .block {
    margin-top: 0;
    margin-left: 0;
}
/*.screen-left.screen1 {
    box-shadow: none;
    padding-bottom: 0;
    padding-top: 0;
}
.screen-left.screen3 {
    box-shadow: none;
    padding-bottom: 0;
    padding-top: 0;
}*/
        .pazl1, .pazl2, .pazl3, .pazl4, .pazl5 {
    position: relative;
    top: unset;
    left: unset;
 /*   margin: 0 auto; */
    margin-top: 25px;

}
    .myslide{
        height: 560px; 
        box-sizing: border-box;
        background-size: cover!important;
    background-position: center!important;

    }
    .myslider .slick-arrow.prev {
        position: absolute;
        z-index: 9;
        bottom: 35px;
        left: 15px;
    }
    .myslider .slick-arrow.next {
        position: absolute;
        z-index: 9;
        bottom: 35px;
        left: 85px;
    }
    .screen-left, .screen-right {
        height: auto!important;
    }
    .jbeet-tablet{
        justify-content: space-between;
    }
    .jbarr-tablet{
        justify-content: space-evenly!important;
    }
    .hidden-tablet{
        display: none!important;
    }
    .screen-left .block {
        display: flex;
        margin: 0 auto;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 100%;
        flex-wrap: wrap;
    }
    
    .screen-left .block .slider .item {
        margin-left: 15px;
    }
    .screen-right.screen2 .block {
        margin-bottom: 40px;
    }
    .screen-left .right_side {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 0 15px;
    }
    .screen-left .block .slider {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .screen-left .block .slider .item {
        margin-bottom: 35px;
    }
    .screen-left .right_side .text {
        margin-top: 10px;
        margin-bottom: 35px;
    }
    .wrapper2 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .screen-right .block {
        width: 100%;
        flex-wrap: wrap;
        margin-top: 70px;
        margin-bottom: 70px;
    }
    .screen-right .left_side {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 0 15px;
    order: 1;
    }
     .text-right, .screen-right .left_side.text-right .title, .screen-right .left_side.text-right .text {
        text-align: left;
    }
    .screen-right .left_side.text-right .more {
        justify-content: flex-start;
    }
    .maketing_item {
        width: 360px;
        margin-right: 0;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30px;
        margin-top: 30px;
    }
    .mycont {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        order: 2;
        padding: 0 15px;
    }
    .maketing_item .title {
        font-size: 38px;
    }
    .servPackWrapper {
        width: 360px;
    }
    .aboutItem {
        width: 360px;
        margin-right: 0px;
        display: flex;
        margin: 25px 0;
    }
    
    .aboutItem-title {
        font-family: Bebas;
        font-style: normal;
        font-weight: normal;
        font-size: 45px;
        line-height: 45px;
        color: #FEFEFE;
        margin-top: 25px;
    }
}
.button {
    display: inline-block;
    padding-left: 25px;
    padding-right: 25px;
    height: 52px;
    line-height: 52px;
    background-image: linear-gradient(to right, #bf77c6 0, #6751bc 51%, #bf77c6 100%);
    color: #fff;
    font-size: 20px;
    font-family: Bebas, sans-serif;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    border-radius: 26px;
    background-size: 200% auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    position: absolute;
    bottom: 0;
    right: 0;
    transition: .5s
}

.button:hover {
    background-position: right center
}

.button:active {
    background-color: #919191;
    background-position: center center
}

.button:focus {
    box-shadow: 0 0 13px 0 rgba(0, 0, 0, .4)!important
}

.hoverWhite div {
    transition: .25s
}

.hoverWhite div:hover {
    color: #fff
}

.footer {
    width: 100%;
    background-color: #1e1e1e;
    padding-top: 50px;
    padding-bottom: 50px;
    box-sizing: border-box
}

.footer .left {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(66.66666666666667% - 30px)
}

.footer .left .content.first nav ul li .link {
    font-family: 'Century Gothic'
}

.footer .right {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(33.333333333333336% - 30px);
    text-align: right
}

.footer .right .cont {
    margin-bottom: 65px
}

.footer .right .cont .mail {
    font-size: 16px
}

.footer .right .cont .mail:hover a,
.footer .right .cont .mail:hover i {
    color: #fff
}

.footer .right .cont .mail i {
    color: #b4a0a9;
    margin-right: 10px;
    transition: .25s
}

.footer .right .cont .mail a {
    color: #b4a0a9;
    text-decoration: none;
    font-family: 'Century Gothic';
    transition: .25s
}

.footer .right .cont .phone {
    font-size: 16px
}

.footer .right .cont .phone a,
.footer .right .cont .phone i {
    transition: .5s
}

.footer .right .cont .phone:hover a,
.footer .right .cont .phone:hover i {
    color: #fff
}

.footer .right .cont .phone i {
    color: #b4a0a9;
    margin-right: 10px;
    transform: rotate(90deg)
}

.footer .right .cont .phone a {
    font-weight: 400;
    line-height: 31px;
    font-family: 'Century Gothic';
    color: #b4a0a9;
    text-decoration: none
}

.footer .right .cont .sub {
    color: #b4a0a9;
    font-family: 'Century Gothic';
    font-size: 11px;
    font-weight: 400;
    line-height: 31px
}

.footer .right .mail {
    font-size: 20px
}

.footer .right .mail i {
    color: #b4a0a9;
    margin-right: 10px
}

.footer .right .mail a {
    color: #fff;
    text-decoration: none;
    font-family: 'Century Gothic'
}

.footer .right .subscribe {
    text-align: center;
    font-size: 12px
}

.footer .right .subscribe i {
    margin-right: 10px;
    color: #b4a0a9
}

.footer .right .subscribe a {
    line-height: 24px;
    color: #fff;
    font-family: 'Century Gothic'
}

.footer .right .phones {
    font-size: 20px
}

.footer .right .phones i {
    color: #b4a0a9;
    margin-right: 10px;
    transform: rotate(90deg)
}

.footer .right .phones a {
    font-weight: 400;
    line-height: 31px;
    font-family: 'Century Gothic';
    color: #fff;
    text-decoration: none
}

.footer .right .social {
    margin-top: 90px;
    margin-left: 60px;
    float: right
}

.footer .right .social ul li {
    float: left;
    margin-right: 30px
}

.footer .right .social ul li:nth-child(1) a {
    margin-top: -1px
}

.footer .right .social ul li:nth-child(2) a {
    margin-top: -2px
}

.footer .right .social ul li:last-child {
    margin: 0
}

.footer .right .social ul li:last-child a {
    margin-top: -3px
}

.footer .right .social ul li a {
    font-weight: 400;
    font-size: 24px;
    color: #b4a0a9;
    transition: .25s;
    display: inline-block
}

.footer .right .social ul li a.vk:hover {
    color: #005eb1
}

.footer .right .social ul li a.insta:hover {
    color: #da2e80
}

.footer .right .social ul li a.fb {
    font-size: 22px
}

.footer .right .social ul li a.fb:hover {
    color: #005eb1
}

.footer .askQuestion {
    width: 164px;
    height: 52px;
    border-radius: 26px;
    border: 1px solid #b4a0a9;
    background-color: #1e1e1e;
    float: right;
    color: #fff;
    font-family: Bebas;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    transition: .25s
}

.footer .askQuestion:hover {
    border-color: #fff
}

.footer .askQuestion:focus {
    border-radius: 26px;
    border: 1px solid #b4a0a9;
    background-color: #1e1e1e
}

.footer .askQuestion:active {
    border-color: #1e1e1e;
    background-color: #fff;
    color: #000
}

.footer .askQuestion:disabled {
    background-color: #dfdfdf;
    color: #bdbdbd
}

.footer .content.first .lang_selector ul li {
    float: left;
    margin-right: 10px;
    cursor: pointer
}

.footer .content.first .lang_selector ul li:hover img {
    -webkit-filter: unset;
    -moz-filter: unset;
    -ms-filter: unset;
    -o-filter: unset;
    filter: unset
}

.footer .content.first .lang_selector ul li img {
    border: 2px solid transparent;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%)
}

.footer .content.first .lang_selector ul li.active img {
    border: 2px solid #b4a0a9;
    border-radius: 50%;
    opacity: 1;
    -webkit-filter: unset;
    -moz-filter: unset;
    -ms-filter: unset;
    -o-filter: unset;
    filter: unset
}

.footer .content.first .lang_selector ul li:hover img {
    opacity: 1
}

.footer .content.first .lang_selector ul li:last-child {
    margin-right: 0
}

.footer .content.second {
    margin-top: 80px;
    padding-top: 30px;
    border-top: 1px solid #343133
}

.footer .content.second a.title {
    transition: .25s
}

.footer .content.second a.title.active,
.footer .content.second a.title:hover {
    color: #b4a0a9
}

.footer .content.second .title {
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 65px;
    text-transform: uppercase
}

.footer .content.second .men {
    color: #fff
}

.footer .content.second .men>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.footer .content.second .men>ul .link,
.footer .content.second .men>ul a {
    transition: .25s
}

.footer .content.second .men>ul .link.active,
.footer .content.second .men>ul .link:hover,
.footer .content.second .men>ul a.active,
.footer .content.second .men>ul a:hover {
    color: #fff
}

.footer .content.second .men>ul>li {
    margin-top: 30px
}

.footer .content.second .men>ul>li>.link,
.footer .content.second .men>ul>li>a {
    color: #b4a0a9;
    font-family: 'Open Sans';
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase
}

.footer .content.second .men>ul>li>ul {
    margin-top: 30px
}

.footer .content.second .men>ul>li>ul>li.active>.link,
.footer .content.second .men>ul>li>ul>li.active>a {
    color: #fff
}

.footer .content.second .men>ul>li>ul>li>.link,
.footer .content.second .men>ul>li>ul>li>a {
    color: #b4a0a9;
    font-family: 'Open Sans';
    font-size: 13px;
    font-weight: 300;
    line-height: 30px
}

.footer .content nav ul li {
    float: left;
    margin-right: 75px
}

.footer .content nav ul li:last-child {
    margin: 0
}

.footer .content nav ul li .link,
.footer .content nav ul li a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 300;
    line-height: 65px;
    font-family: 'Open Sans';
    color: #fff;
    text-transform: uppercase;
    transition: .5s
}

.footer .content nav ul li .link.active,
.footer .content nav ul li .link:hover,
.footer .content nav ul li a.active,
.footer .content nav ul li a:hover {
    color: #b4a0a9
}

.footer .content.third {
    color: #fff;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #343133
}

.footer .content.third .link.title,
.footer .content.third a.title {
    transition: .25s
}

.footer .content.third .link.title:hover,
.footer .content.third a.title:hover {
    color: #b4a0a9
}

.footer .content.third .title {
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 65px;
    text-transform: uppercase
}

.footer .content.third .men {
    color: #fff
}

.footer .content.third .men>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.footer .content.third .men>ul .link,
.footer .content.third .men>ul a {
    transition: .25s
}

.footer .content.third .men>ul .link.active,
.footer .content.third .men>ul .link:hover,
.footer .content.third .men>ul a.active,
.footer .content.third .men>ul a:hover {
    color: #fff
}

.footer .content.third .men>ul>li>.link,
.footer .content.third .men>ul>li>a {
    color: #b4a0a9;
    font-family: 'Open Sans';
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase
}

.footer .content.third .men>ul>li>ul {
    margin-top: 30px
}

.footer .content.third .men>ul>li>ul>li>.link,
.footer .content.third .men>ul>li>ul>li>a {
    color: #b4a0a9;
    font-family: 'Open Sans';
    font-size: 13px;
    font-weight: 300;
    line-height: 30px
}

.footer .content.third .copy {
    font-family: 'Century Gothic';
    font-size: 13px;
    line-height: 24px;
    font-weight: 400;
    text-transform: uppercase
}

.footer .content.third .presentaion a {
    font-size: 12px;
    color: #fff
}

.footer .content.third .presentaion a i {
    margin-right: 10px;
    color: #b4a0a9
}

.footer .footlast {
    margin-top: 65px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}

.footer .footlast .copy {
    color: #b4a0a9;
    font-family: 'Century Gothic';
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    text-transform: uppercase
}

.footer .footlast .copy span {
    color: #fff
}

.footer .footlast .presentaion {
    font-family: 'Century Gothic';
    font-weight: 400;
    line-height: 24px;
    align-self: flex-end;
    cursor: pointer;
    transition: .25s;
    font-size: 12px;
    color: #fff
}

.footer .footlast .presentaion i {
    margin-right: 10px;
    color: #b4a0a9;
    position: relative;
    top: -2px
}

.footer .footlast .presentaion:hover {
    color: #b4a0a9
}

.footer .footlast .rassil {
    font-family: 'Century Gothic';
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    transition: .25s;
    font-size: 12px;
    color: #fff
}

.footer .footlast .rassil i {
    margin-right: 10px;
    color: #b4a0a9
}

.footer .footlast .rassil:hover {
    color: #b4a0a9
}

.footer .footlast .language,
.footer .footlast .language a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    cursor: pointer
}

.footer .footlast .language:hover .name {
    color: #b4a0a9
}

.footer .footlast .language:hover .img {
    box-shadow: 0 0 31px -2px inset
}

.footer .footlast .language:active .img {
    opacity: 1;
    border: 2px solid #b4a0a9;
    background-size: 120%
}

.footer .footlast .language .name {
    color: #fff;
    margin-right: 20px;
    font-family: 'Open Sans';
    font-size: 14px;
    margin-top: 0;
    transition: .25s
}

.footer .footlast .language .img {
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    opacity: 1;
    border-radius: 50%;
    box-shadow: 0 0 3px 0 inset;
    transition-duration: 250ms;
    box-sizing: border-box
}

.burger {
    display: none;
    position: fixed;
    font-size: 26px;
    z-index: 3;
    top: 40px;
    left: 30px;
    cursor: pointer
}

.burger_menu {
    position: fixed;
    top: 0;
    left: -5px;
    width: 376px;
    height: 100vh;
    background: #fff;
    z-index: 25;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 70px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .5);
    transform: translateX(-376px);
    transition: transform .5s ease-out;
    visibility: visible
}

.burger_menu.opened {
    transform: translateX(0);
    transition: transform .5s ease-in
}

.burger_menu .phone {
    margin-bottom: auto;
    width: 100%
}

.burger_menu .phone:before {
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #e6e6e6;
    margin-bottom: 40px
}

.burger_menu .phone div {
    text-align: center;
    font-size: 13px;
    font-family: 'Century Gothic';
    margin-bottom: 27px;
    transition: .25s
}

.burger_menu .phone div:last-child {
    margin-bottom: 20px
}

.burger_menu .phone div i {
    color: #af70c4;
    margin-right: 5px
}

.burger_menu .phone div:hover {
    color: #b4a0a9
}

.burger_menu nav {
    width: 100%;
    height: 100%
}

.burger_menu nav ul>li .link,
.burger_menu nav ul>li a {
    font-size: 40px;
    font-family: Bebas;
    font-weight: 700;
    line-height: 50px;
    margin-bottom: 30px;
    margin-top: 30px;
    text-align: center;
    text-transform: uppercase;
    color: #7959be;
    text-decoration: none;
    display: block;
    position: relative;
    transition: .25s
}

.burger_menu nav ul>li .link.has-sub:after,
.burger_menu nav ul>li a.has-sub:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 8px solid #000;
    border-color: transparent transparent #fff #fff;
    transform-origin: 0 0;
    transform: rotate(225deg);
    top: 50%;
    right: -16px;
    margin-top: 8px;
    z-index: 3;
    box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, .2);
    display: none
}

.burger_menu nav ul>li:after {
    content: '';
    display: block;
    position: relative;
    width: 77px;
    height: 1px;
    background: #000;
    margin: 0 auto
}

.burger_menu nav ul>li:last-child:after {
    display: none
}

.burger_menu nav ul>li>ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 376px;
    height: 100vh;
    background-color: #f6f6f6;
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: .5s;
    padding-top: 70px;
    box-sizing: border-box;
    box-shadow: 2px -1px 2px rgba(0, 0, 0, .2) inset
}

.burger_menu nav ul>li>ul li.active>.link,
.burger_menu nav ul>li>ul li.active>a {
    color: #af70c4
}

.burger_menu nav ul>li>ul li>ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 376px;
    height: 100vh;
    background-color: #eee;
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: .5s;
    padding-top: 70px;
    box-sizing: border-box
}

.burger_menu nav ul>li>ul li .link,
.burger_menu nav ul>li>ul li a {
    font-weight: 300;
    transition: .25s
}

.burger_menu nav ul>li>ul li .link.has-sub:after,
.burger_menu nav ul>li>ul li a.has-sub:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 8px solid #000;
    border-color: transparent transparent #f6f6f6 #f6f6f6;
    transform-origin: 0 0;
    transform: rotate(225deg);
    top: 50%;
    right: -15px;
    margin-top: 8px;
    z-index: 3;
    box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, .2);
    display: none
}

.burger_menu nav ul>li>ul li:hover>.link,
.burger_menu nav ul>li>ul li:hover>a {
    color: #af70c4;
    transition: .25s
}

.burger_menu nav ul>li>ul li:hover>.link.has-sub:after,
.burger_menu nav ul>li>ul li:hover>a.has-sub:after {
    display: block
}

.burger_menu nav ul>li>ul li:hover>ul {
    transform: scaleX(1)
}

.burger_menu nav ul>li:hover>.link,
.burger_menu nav ul>li:hover>a {
    color: #af70c4;
    transition: .25s
}

.burger_menu nav ul>li:hover>.link.has-sub:after,
.burger_menu nav ul>li:hover>a.has-sub:after {
    display: block
}

.burger_menu nav ul>li:hover>ul {
    transform: scaleX(1)
}

.burger_menu nav li.active>.link,
.burger_menu nav li.active>a {
    color: #af70c4
}

.callback_form {
    width: 100%;
    background: url(../img/callback.jpg)
}

.callback_form .callback {
    padding-top: 118px;
    padding-bottom: 164px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.callback_form .callback .text {
    width: 350px
}

.callback_form .callback .text .title {
    font-family: Bebas;
    background: linear-gradient(-247deg, #5cc4f4 0, #f24bcd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 76px;
    line-height: 76px;
    font-weight: 700;
    padding: 10px 0 0;
    margin-top: -10px
}

.callback_form .callback .text .description {
    font-family: 'Century Gothic';
    color: #2a2929;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 28px
}

.callback_form .callback .form {
    width: 404px;
    margin-top: 3px
}

.callback_form .callback .form .field {
    width: 404px;
    margin-bottom: 16px;
    position: relative
}

.callback_form .callback .form .field label.field_error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    width: 128px;
    height: 48px;
    top: 8px;
    right: 10px;
    z-index: 2;
    border: 1px solid #fed8d8;
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;
    border-radius: 30px;
    color: red;
    font-family: 'Century Gothic';
    font-size: 11px;
    font-weight: 700;
    line-height: 10px;
    padding-top: 0
}

.callback_form .callback .form .field:last-child {
    margin: 0
}

.callback_form .callback .form .field i {
    position: absolute;
    font-size: 60px;
    top: -10px;
    left: 0;
    background: linear-gradient(-247deg, #5cc4f4 0, #f24bcd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 1
}

.callback_form .callback .form .field i.fa-user {
    background-image: linear-gradient(-247deg, #ffe9be 0, #ff6cec 100%)
}

.callback_form .callback .form .field i.fa-globe {
    background-image: linear-gradient(-247deg, #96f9ff 0, #8c6cff 100%)
}

.callback_form .callback .form .field i.fa-edit {
    background-image: linear-gradient(-247deg, #fffb96 0, #fea752 100%)
}

.callback_form .callback .form .field input {
    position: relative;
    z-index: 2;
    display: block;
    width: 363px;
    height: 60px;
    margin-left: 40px;
    box-shadow: 0 4px 16px rgba(237, 237, 237, .5), inset 0 3px 5px rgba(0, 0, 0, .18);
    background-color: #fff;
    border: none;
    border-radius: 30px;
    padding-left: 35px;
    padding-right: 20px;
    box-sizing: border-box;
    line-height: 13px;
    font-family: 'Century Gothic';
    font-weight: 400;
    font-size: 16px;
    color: #60a5e0
}

.callback_form .callback .form .field input::-webkit-input-placeholder {
    color: #60a5e0;
    opacity: 1
}

.callback_form .callback .form .field input::-moz-placeholder {
    color: #60a5e0;
    opacity: 1
}

.callback_form .callback .form .field input:-ms-input-placeholder {
    color: #60a5e0;
    opacity: 1
}

.callback_form .callback .form .field input:-moz-placeholder {
    color: #60a5e0;
    opacity: 1
}

.callback_form .callback .form .field textarea {
    position: relative;
    z-index: 2;
    display: block;
    width: 363px;
    height: 111px;
    resize: none;
    margin-left: 40px;
    box-shadow: 0 4px 16px rgba(237, 237, 237, .5), inset 0 3px 5px rgba(0, 0, 0, .18);
    background-color: #fff;
    border: none;
    border-radius: 30px;
    padding-left: 35px;
    padding-right: 20px;
    box-sizing: border-box;
    font-family: 'Century Gothic';
    font-weight: 400;
    font-size: 16px;
    color: #60a5e0;
    padding-top: 20px
}

.callback_form .callback .form .field textarea::-webkit-input-placeholder {
    color: #60a5e0;
    opacity: 1
}

.callback_form .callback .form .field textarea::-moz-placeholder {
    color: #60a5e0;
    opacity: 1
}

.callback_form .callback .form .field textarea:-ms-input-placeholder {
    color: #60a5e0;
    opacity: 1
}

.callback_form .callback .form .field textarea:-moz-placeholder {
    color: #60a5e0;
    opacity: 1
}

.callback_form .callback .form input[type=checkbox] {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: 0 0;
    border: none
}

.callback_form .callback .form input[type=checkbox]:focus {
    border: none;
    box-shadow: none
}

.callback_form .callback .form input[type=checkbox]:after {
    z-index: 3;
    content: ' ';
    position: relative;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: -1px;
    width: 12px;
    height: 12px;
    background-color: #dddddf
}

.callback_form .callback .form input[type=checkbox]:before {
    position: absolute;
    z-index: 4;
    content: url(../img/policy.png);
    color: #828282;
    display: none;
    font-weight: 700;
    font-size: 22px;
    top: -12px;
    left: 2px
}

.callback_form .callback .form input[type=checkbox]:checked:before {
    display: block
}

.callback_form .callback .form .policy {
    margin-left: 60px;
    margin-top: 30px
}

.callback_form .callback .form .policy a {
    font-family: 'Century Gothic';
    font-size: 12px;
    color: #828282
}

.callback_form .callback .form .policy a:hover {
    color: #b4a0a9;
    text-decoration: underline
}

.callback_form .callback .form .checkbox {
    margin-left: 80px;
    margin-top: 15px;
    padding-right: 15px;
    color: #828282
}

.callback_form .callback .form .checkbox label.field_error {
    margin-top: 3px;
    position: relative;
    display: block;
    color: red;
    font-family: 'Century Gothic';
    font-size: 11px;
    font-weight: 700;
    line-height: 10px;
    z-index: -1
}

.callback_form .callback .form .checkbox a:hover {
    text-decoration: underline
}

.callback_form .callback .form .checkbox label {
    font-family: 'Century Gothic', sans-serif;
    font-size: 12px
}

.callback_form .callback .form .checkbox label a {
    text-decoration: underline
}

.callback_form .callback .form form {
    position: relative
}

.callback_form .callback .form .button {
    position: absolute;
    margin: 20px auto 0;
    width: 159px;
    bottom: unset;
    top: unset;
    left: 40px;
    right: 0;
    background-image: linear-gradient(-247deg, #5cc4f4 0, #f24bcd 100%);
    border: none;
    background-color: #1e1e1e
}

.callback_form .callback .form .button:focus {
    border: none;
    box-shadow: 0 0 9px rgba(106, 184, 240, .5)
}

.callback_form .callback .manager {
    position: relative
}

.callback_form .callback .manager img {
    margin-top: -30px
}

.callback_form .callback .manager .info {
    position: absolute;
    top: 298px;
    right: 0
}

.callback_form .callback .manager .info .name {
    font-family: 'Century Gothic';
    font-size: 16px;
    color: #2a2929;
    text-align: right
}

.callback_form .callback .manager .info .who {
    font-family: 'Century Gothic';
    font-size: 14px;
    color: silver;
    text-align: right
}

#fp-nav {
    border-radius: 16px;
    background-color: rgba(0, 0, 0, .1)
}

#fp-nav a span {
    background: #eef7fd!important;
    opacity: .4
}

#fp-nav a.active span {
    background: 0 0!important;
    border: 2px solid #fff!important;
    border-radius: 50%;
    margin: -6px 0 0 -8px!important;
    opacity: 1
}

#scene {
    overflow: hidden;
    position: relative;
    padding-bottom: 60px;
    min-height: 452px;
    box-sizing: border-box
}

#scene .grad {
    position: absolute!important;
    top: 0;
    box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .5) inset
}

#scene .fix-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .5) inset
}

#scene .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#scene .background .dots,
#scene .background .gradient {
    position: absolute;
    top: inherit;
    left: inherit;
    width: inherit;
    height: inherit;
    background-repeat: no-repeat
}

#scene .background .gradient {
    background-color: #303030;
    background-image: linear-gradient(-247deg, #5cc4f4 0, #f24bcd 100%);
    opacity: .9;
    box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .5) inset
}

#scene .background .dots {
    background-image: url(../img/dots3.png);
    opacity: .3
}

#scene.scene2 .bg {
    height: 433px;
    background-position-y: -100px
}

#scene.scene2 .grad {
    position: absolute;
    top: 0;
    height: 100%;
    background-image: url(../img/grad2.png)
}

#scene.scene2 .gradient {
    box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .5) inset
}

#scene.scene3 .grad {
    background-image: url(../img/grad3.png)
}

#scene.scene4 .bg {
    height: 433px;
    background-position-y: -200px
}

#scene.scene4 .grad {
    background-image: url(../img/grad4.png);
    box-shadow: none
}

#scene.scene4 .fix-shadow {
    z-index: 3
}

#scene.scene4>.wrapper {
    z-index: 4
}

#scene.scene4 .svg {
    position: absolute!important;
    right: 0!important;
    top: 0!important;
    left: unset!important;
    width: 820px;
    height: 500px;
    z-index: 3
}

#scene.scene4 .svg.movethis {
    top: 0!important
}

#scene.scene5 {
    position: relative;
    padding-bottom: 90px
}

#scene.scene5.in-blog {
    padding-bottom: 30px
}

#scene.scene5 .bg {
    position: absolute;
    background: url(../img/blog-layer.jpg);
    height: 100%;
    left: 0!important
}

#scene.scene5 .grad {
    background-image: url(../img/grad5.png);
    box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .5) inset
}

#scene.scene5 .gradient {
    box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .5) inset
}

#scene.scene6 .bg {
    background-image: url(../img/scheme.jpg);
    height: 433px;
    left: 0!important
}

#scene.scene6 .grad {
    background-image: url(../img/schemegrad.png)
}

#scene .bg {
    width: 100%;
    height: 865px
}

#scene .grad {
    width: 100%;
    height: 100%;
    background-image: url(../img/grad1.png);
    background-size: cover
}

.after_scene {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto
}

.after_scene .search {
    position: relative;
    display: inline-block;
    color: gray;
    transition-duration: 250ms;
    width: 52px;
    transform: translateY(-11px)
}

.after_scene .search-box {
    position: absolute;
    top: 35px;
    right: 15px
}

.after_scene .search-box.compressed input[name=query] {
    color: transparent;
    height: 52px
}

.after_scene .search-box.compressed:hover input[name=query] {
    color: transparent!important
}

.after_scene .search-box.expanded .search {
    width: 290px
}

.after_scene .search-box.expanded input[name=query] {
    padding: 2px 45px 0 20px
}

.after_scene .search-box.expanded input[name=query]::-webkit-input-placeholder {
    opacity: .9
}

.after_scene .search-box.expanded input[name=query]::-moz-placeholder {
    opacity: .9
}

.after_scene .search-box.expanded input[name=query]:-ms-input-placeholder {
    opacity: .9
}

.after_scene .search-box.expanded input[name=query]:hover::-webkit-input-placeholder {
    color: #656565;
    opacity: .8;
    transition: all 250ms ease-out
}

.after_scene .search-box.expanded input[name=query]:hover::-moz-placeholder {
    color: #656565;
    opacity: .8;
    transition: all 250ms ease-out
}

.after_scene .search-box.expanded input[name=query]:hover:-ms-input-placeholder {
    color: #656565;
    opacity: .8;
    transition: all 250ms ease-out
}

.after_scene .search-box.expanded button[type=submit] {
    font-size: 22px
}

.after_scene .search button[type=submit],
.after_scene .search input[name=query] {
    color: #d2d2d2
}

.after_scene .search input[name=query] {
    padding-top: 2px;
    box-sizing: border-box;
    font-family: Bebas;
    font-weight: 400;
    font-size: 22px;
    line-height: 22px;
    border-radius: 26px;
    border: 1px solid #d2d2d2;
    width: 100%;
    height: 52px;
    transition-duration: 250ms
}

.after_scene .search input[name=query]::-webkit-input-placeholder {
    color: #d2d2d2;
    opacity: 0;
    transition: all 250ms ease-out
}

.after_scene .search input[name=query]::-moz-placeholder {
    color: #d2d2d2;
    opacity: 0;
    transition: all 250ms ease-out
}

.after_scene .search input[name=query]:-ms-input-placeholder {
    color: #d2d2d2;
    opacity: 0;
    transition: all 250ms ease-out
}

.after_scene .search input[name=query]:hover {
    border-color: #656565;
    color: #656565
}

.after_scene .search input[name=query]:focus {
    border-color: #656565;
    color: #656565;
    box-shadow: 0 0 13px 0 rgba(0, 0, 0, .2)
}

.after_scene .search input[name=query]:focus::-webkit-input-placeholder {
    color: #d2d2d2;
    opacity: .4;
    transition: all 250ms ease-in
}

.after_scene .search input[name=query]:focus::-moz-placeholder {
    color: #d2d2d2;
    opacity: .4;
    transition: all 250ms ease-in
}

.after_scene .search input[name=query]:focus:-ms-input-placeholder {
    color: #d2d2d2;
    opacity: .4;
    transition: all 250ms ease-in
}

.after_scene .search button[type=submit] {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 22px;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition-duration: 250ms
}

.after_scene .search button[type=submit]:hover {
    color: #696969
}

.after_scene .search button[type=submit] i {
    transition-duration: 250ms
}

.after_scene .subtitle {
    margin-top: 54px;
    color: #fff;
    font-family: Bebas;
    font-size: 76px;
    font-weight: 700;
    line-height: 76px
}

.after_scene .subtitle.in-blog {
    font-size: 50px;
    margin-top: 55px;
    padding-right: 48%;
    line-height: 59px;
    font-weight: 400;
    text-rendering: geometricPrecision
}

.after_scene .items {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 28px
}

.after_scene .items.single .item {
    flex: 1 1 100%;
    max-width: 100%
}

.after_scene .items.single .item:first-child {
    margin-right: 15px
}

.after_scene .items.single .item:last-child {
    margin-left: 15px
}

.after_scene .items .item {
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(100% - 30px);
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    flex: 1 1 calc(50% - 30px);
    max-width: calc(50% - 30px);
    box-sizing: border-box;
    text-align: justify
}

@media screen and (max-width:960px) {
    .after_scene .items .item {
        width: calc(100% - 30px)
    }
}

@media screen and (max-width:780px) {
    .after_scene .items .item {
        width: calc(100% - 30px)
    }
}

.bread-wrapper {
    position: relative;
    z-index: 3
}

.bread-wrapper .wrapper {
    position: relative
}

.bread-wrapper .bread {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 35px
}

.bread {
    display: inline-block;
    font-family: 'Century Gothic';
    color: #fff;
    font-size: 12px;
    background-color: rgba(42, 41, 41, .13);
    padding: 7px 18px;
    border-radius: 20px;
    margin-top: 25px;
    transition: .25s
}

.bread i {
    display: inline-block;
    position: relative;
    top: -1px;
    font-size: 10px
}

.bread span.active {
    font-weight: 700
}

.bread a {
    color: #fff;
    text-decoration: none;
    transition: .25s;
    text-rendering: geometricPrecision
}

.bread a:hover {
    opacity: .75
}

.portfolio_outer {
    width: 100%
}

.portfolio {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.portfolio .left {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(33.333333333333336% - 30px);
    margin-left: 0
}

.portfolio .left h1 {
    font-family: Bebas;
    color: #fff;
    font-size: 58px;
    line-height: 58px;
    font-weight: 700
}

.portfolio .left .desc {
    color: #fff;
    font-family: "Century Gothic";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    width: 292px;
    margin-top: 28px
}

.portfolio .right {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    width: 783px;
    transform: translate(23px, -6px)
}

.portfolio .right .item {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(50% - 30px);
    position: relative;
    background: #fff;
    margin-bottom: 30px;
    padding: 50px 50px 103px;
    transition: .5s;
    overflow: hidden
}

.portfolio .right .item .title {
    font-family: Bebas;
    font-size: 42px;
    font-weight: 700;
    line-height: 42px;
    display: flex
}

.portfolio .right .item .title .icon {
    width: 60px;
    flex-shrink: 0
}

.portfolio .right .item .title .icon i {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 5px
}

.portfolio .right .item .title .name {
    font-size: 43px;
    margin-top: -3px
}

.portfolio .right .item .desc {
    color: #3e3e3e;
    font-family: "Century Gothic";
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    height: 99px;
    overflow: hidden;
    margin-top: 23px;
    width: 240px
}

.portfolio .right .item .grad2 {
    width: 100%;
    height: 105px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-size: 200% auto;
    transition: .5s
}

.portfolio .right .item .dots {
    position: absolute;
    width: 100%;
    height: 97px;
    bottom: 2px;
    left: 35px;
    background: url(../img/blackdots.png) no-repeat;
    background-blend-mode: normal;
    z-index: 2
}

.portfolio .right .item .svg {
    position: absolute;
    width: 240px;
    height: 170px;
    bottom: 0;
    right: -1px;
    z-index: 3
}

.portfolio .right .item .svg svg {
    transform-origin: 100% 100%;
    transition: .5s
}

.portfolio .right .item .button {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    margin: 0 auto;
    box-shadow: 0 7px 18px rgba(56, 56, 56, .33);
    border-radius: 21px;
    background: #fff;
    color: #9d68c2;
    box-sizing: border-box;
    padding: 0;
    bottom: 38px;
    width: 115px;
    height: 42px;
    font-size: 16px;
    line-height: 44px
}

html.ios .portfolio .right .item .button,
html.macos .portfolio .right .item .button {
    line-height: 47px
}

.portfolio .right .item .button:hover {
    background-color: #fbf6ff
}

.portfolio .right .item .button:active {
    background-color: #919191;
    color: #fff
}

.portfolio .right .item .button i {
    margin-left: 4px;
    font-size: 15px;
    vertical-align: middle
}

.portfolio .right .item:hover {
    transform: scale(1)
}

.portfolio .right .item:hover svg {
    transform: scale(1.2)
}

.portfolio .right .item:hover .grad2 {
    background-position: right center
}

.portfolio .right .item:hover .button {
    bottom: 47px
}

.portfolio .right .item:active .button {
    background-color: #919191;
    color: #fff
}

.blog .filter .filt,
.our-works .filter .filt {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -7.5px;
    margin-right: -7.5px;
    margin-bottom: 43px
}

.blog .filter input[type=radio],
.our-works .filter input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: none
}

.blog .filter label,
.our-works .filter label {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 26px;
    color: #fffefe;
    font-family: Bebas;
    font-size: 21px;
    font-weight: 400;
    line-height: 52px;
    height: 52px;
    padding: 0 25px;
    box-sizing: border-box;
    margin: 0 7.5px 20px;
    cursor: pointer;
    background-size: 200% 200%;
    background-position: left top;
    transition-duration: 250ms;
    tab-index: 1;
    overflow: hidden;
    user-select: none
}

.blog .filter label.resetFilter,
.our-works .filter label.resetFilter {
    margin-right: auto
}

.blog .filter label.current .white,
.our-works .filter label.current .white {
    opacity: 0
}

.blog .filter label.current .text,
.blog .filter label.current i,
.our-works .filter label.current .text,
.our-works .filter label.current i {
    color: #fff;
    background-image: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset
}

.blog .filter label:hover,
.blog .filter label:hover .text,
.blog .filter label:hover i,
.our-works .filter label:hover,
.our-works .filter label:hover .text,
.our-works .filter label:hover i {
    background-position: right bottom
}

.blog .filter label:focus,
.our-works .filter label:focus {
    box-shadow: 0 0 13px 0 rgba(0, 0, 0, .4)
}

.blog .filter label .white,
.our-works .filter label .white {
    position: absolute;
    left: 1px;
    top: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: inherit;
    background-color: #fff;
    z-index: 2;
    transition-duration: 250ms
}

.blog .filter label .text,
.our-works .filter label .text {
    position: relative;
    z-index: 3;
    background-image: inherit;
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition-duration: 250ms
}

.blog .filter label i,
.our-works .filter label i {
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 250ms ease-out;
    margin-right: 10px
}

.our-works {
    padding: .1px .1px 23px;
    width: 100%;
    background: url(../img/works-bg.png) #ededed
}

.our-works .filter {
    margin-top: 60px;
    margin-bottom: 20px
}

.our-works .filter .filt .slick-next,
.our-works .filter .filt .slick-prev {
    top: 50%;
    transform: translateY(-50%)
}

.our-works .filter .filt .slick-next.slick-disabled:before,
.our-works .filter .filt .slick-prev.slick-disabled:before {
    opacity: .1
}

.our-works .filter .filt .slick-next:active:before,
.our-works .filter .filt .slick-next:focus:before,
.our-works .filter .filt .slick-next:hover:before,
.our-works .filter .filt .slick-prev:active:before,
.our-works .filter .filt .slick-prev:focus:before,
.our-works .filter .filt .slick-prev:hover:before {
    opacity: .75;
    transition-duration: 250ms
}

.our-works .filter .filt .slick-next:before,
.our-works .filter .filt .slick-prev:before {
    opacity: .25;
    color: #000
}

.our-works .filter .filt .slick-prev {
    left: 0
}

.our-works .filter .filt .slick-next {
    right: 0
}

.our-works .filter label {
    background-image: linear-gradient(135deg, #00f0ff 0, #b5a1ff 50%, #00f0ff 100%)
}

.our-works .filter label .white {
    background-color: #ededed
}

.our-works .filter label i {
    background-image: linear-gradient(to right, #00f0ff 0, #b5a1ff 40%)
}

.our-works .works {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    opacity: 1!important;
    margin-top: 40px;
    min-height: 600px
}

.our-works .works .item {
    box-shadow: 0 7px 10px 0 rgba(0, 0, 0, .22);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(50% - 30px);
    margin-bottom: 30px;
    height: 555px;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: .25
}

@media screen and (max-width:960px) {
    .our-works .works .item {
        width: calc(50% - 30px)
    }
}

@media screen and (max-width:780px) {
    .our-works .works .item {
        width: calc(100% - 30px)
    }
}

html.mobile .our-works .works .item:hover .logo img,
html.tablet .our-works .works .item:hover .logo img {
    transform: scale(1)
}

html.mobile .our-works .works .item:hover .screen,
html.tablet .our-works .works .item:hover .screen {
    transform: translateY(300px)
}

@media only screen and (max-width:1350px) {
    html.mobile .our-works .works .item .screen,
    html.tablet .our-works .works .item .screen {
        transform: translateY(300px)
    }
}

@media only screen and (max-height:850px) {
    html.mobile .our-works .works .item .screen,
    html.tablet .our-works .works .item .screen {
        margin-left: auto;
        margin-right: auto
    }
}

.our-works .works .item.loaded,
.our-works .works .item.loading {
    opacity: 1
}

@keyframes skeletonAnimation {
    0% {
        opacity: .8
    }
    50% {
        opacity: .4
    }
    100% {
        opacity: .8
    }
}

.our-works .works .item.loading .skeleton {
    display: block
}

.our-works .works .item .skeleton {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: #c8c8c8;
    display: none
}

@keyframes skeletonAnimation {
    0% {
        opacity: .8
    }
    50% {
        opacity: .4
    }
    100% {
        opacity: .8
    }
}

.our-works .works .item .skeleton .up {
    width: 440px;
    height: 177px;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0;
    animation-name: skeletonAnimation;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.our-works .works .item .skeleton .logos {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 230px;
    animation-name: skeletonAnimation;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.our-works .works .item .skeleton .bottom {
    width: 100%;
    max-width: 440px;
    height: 140px;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    animation-name: skeletonAnimation;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.our-works .works .item .up_block {
    width: 440px;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 20px;
    transition: .5s;
    will-change: transform;
    -webkit-box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .75);
    box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .75);
    z-index: 3;
    text-align: left!important
}

.our-works .works .item .up_block .title a {
    color: #fff;
    font-family: Bebas;
    font-size: 29px;
    font-weight: 300;
    text-decoration: none
}

.our-works .works .item .up_block .text {
    margin-top: 10px;
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 19.47px
}

.our-works .works .item .up_block .text:after {
    content: ''
}

.our-works .works .item .up_block .text i {
    vertical-align: middle;
    transition-duration: 250ms
}

.our-works .works .item .bottom_block {
    width: 440px;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    padding: 20px;
    transition: .5s;
    will-change: transform;
    -webkit-box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .75);
    box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .75);
    z-index: 3;
    transform: translateY(73px);
    text-align: left!important
}

.our-works .works .item .bottom_block .title a {
    color: #fff;
    font-family: Bebas;
    font-size: 29px;
    font-weight: 300;
    text-decoration: none
}

.our-works .works .item .bottom_block .text {
    margin-top: 10px;
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 19.47px
}

.our-works .works .item .bottom_block .text:after {
    content: ''
}

.our-works .works .item .bottom_block .text i {
    vertical-align: middle;
    transition-duration: 250ms
}

.our-works .works .item .logo {
    width: 165px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: -145px auto 0;
    text-align: center;
    transition: .5s;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.our-works .works .item .logo img {
    transform: scale(1);
    will-change: transform;
    transition: .5s
}

@media only screen and (min-width:1350px) and (max-height:850px) {
    .our-works .works .item .logo {
        margin-top: -40px!important
    }
}

@media only screen and (max-width:1350px) and (min-width:400px) and (max-height:850px) {
    .our-works .works .item .logo {
        margin-top: -50px!important
    }
}

@media only screen and (max-width:400px) and (max-height:850px) {
    .our-works .works .item .logo {
        margin-top: -25px!important
    }
}

.our-works .works .item .screen {
    position: absolute;
    width: 100%;
    max-width: 440px;
    height: 310px;
    will-change: transform;
    transform: translateY(300px);
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
    transition: .5s;
    background-size: 100%;
    z-index: 3
}

.our-works .works .item:hover .up_block {
    transform: translateY(0)
}

.our-works .works .item:hover .up_block .text i {
    transform: translateX(5px)
}

.our-works .works .item:hover .logo img {
    transform: scale(.6)
}

.our-works .works .item:hover .screen {
    transform: translateY(260px)
}

.our-works .works .item:hover .bottom_block {
    transform: translateY(0)
}

.services .item .button {
    width: 150px!important;
    font-size: 19px!important
}

.services .item .button i {
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1)
}

.our-services {
    padding-top: 63px;
    width: 100%;
    background: url(../img/works-bg.png) #ededed
}

.our-services .services {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px
}

.our-services .services .item {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(100% - 30px);
    position: relative;
    margin-bottom: 61px;
    height: 437px;
    background: #fff;
    padding-top: 54px;
    padding-left: 67px;
    box-shadow: 0 7px 10px rgba(0, 0, 0, .22);
    cursor: pointer
}

.our-services .services .item .up_block {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline
}

.our-services .services .item .up_block>.img {
    width: 113px;
    transform: translateY(26px)
}

.our-services .services .item .up_block .subtitle {
    margin-left: 25px;
    transition-duration: 250ms;
    transform-origin: left
}

.our-services .services .item .up_block .subtitle .text {
    color: #2aebe6;
    font-family: Bebas;
    font-size: 70px;
    font-weight: 400;
    line-height: 76px;
    text-transform: uppercase;
    transition: .5s;
    transform: translateY(-6px)
}

html.ios .our-services .services .item .up_block .subtitle .text,
html.macos .our-services .services .item .up_block .subtitle .text {
    transform: translateY(0)
}

.our-services .services .item .up_block .subtitle .price {
    color: #3e3e3e;
    font-family: 'Century Gothic';
    font-size: 21px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -.8px;
    transform: translateY(-11px)
}

.our-services .services .item .up_block .subtitle .price .currency-symbol {
    position: relative;
    top: -1px
}

.our-services .services .item .up_block .subtitle .price .currency-symbol i {
    font-size: 17px;
    font-weight: 100
}

.our-services .services .item .bottom_block {
    width: 500px;
    margin-top: 23px;
    color: #3e3e3e;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.our-services .services .item .grad {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 102px;
    background-image: linear-gradient(to right, #96ffa7 0, #00a6dd 100%);
    z-index: 1;
    background-size: 200% auto;
    transition: .5s
}

.our-services .services .item .grad .dots {
    position: absolute;
    width: 667px;
    height: 97px;
    left: 180px;
    opacity: .75;
    top: 2px;
    background: url(../img/dots2.png)
}

.our-services .services .item .grad .specials {
    width: 570px;
    margin-left: 68px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 35px 0
}

.our-services .services .item .grad .specials .special {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 3
}

.our-services .services .item .grad .specials .special .img {
    color: #fff;
    font-size: 36px
}

.our-services .services .item .grad .specials .special .text {
    margin-left: 5px;
    margin-bottom: 7px;
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase
}

.our-services .services .item .svg {
    position: absolute;
    width: 441px;
    height: 311px;
    overflow: hidden;
    bottom: 0;
    right: 0;
    transform: rotate(0deg);
    transition: .5s;
    transform-origin: 100% 100%;
    z-index: 2
}

.our-services .services .item .mockup {
    position: absolute;
    bottom: 0;
    right: 45px;
    z-index: 3;
    transform: scale(1);
    transition: .5s
}

.our-services .services .item .right_info {
    position: absolute;
    bottom: 59px;
    right: 68px;
    z-index: 4;
    text-align: right
}

.our-services .services .item .right_info .button {
    position: relative;
    display: inline-block!important;
    width: unset!important;
    color: #9d68c2;
    background-image: none;
    background-color: #fff;
    box-shadow: 0 7px 18px rgba(56, 56, 56, .33);
    font-size: 16px!important;
    padding: 0 21px;
    height: 42px;
    line-height: 42px
}

html.ios .our-services .services .item .right_info .button,
html.macos .our-services .services .item .right_info .button {
    line-height: 47px
}

.our-services .services .item .right_info .button:active {
    color: #fff;
    background: #919191
}

.our-services .services .item .right_info .small_text {
    margin-top: -12px;
    top: 31px;
    position: relative;
    color: #2a2929;
    font-family: 'Century Gothic';
    font-size: 10px;
    font-weight: 400
}

.our-services .services .item:hover .svg {
    transform: scale(1.2)
}

.our-services .services .item:hover .mockup {
    transform: scale(1.03)
}

.our-services .services .item:hover .grad {
    background-position: right center
}

.our-services .services .item:hover .button {
    background: #ededed
}

.our-services .services .item:hover .subtitle {
    transform: translateX(-7px);
    transform: scale(.85) translateY(-6px)
}

.our-services .services .item:active .right_info .button {
    color: #fff;
    background: #919191
}

.subservice_head {
    position: relative
}

.subservice_head .svg {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 5
}

.subservice_head .left .up_block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 39px
}

.subservice_head .left .up_block .title {
    margin-left: 17px
}

.subservice_head .left .up_block .title h1 {
    color: #fff;
    width: 510px;
    font-family: Bebas;
    font-size: 70px;
    font-weight: 700;
    line-height: 70px
}

.subservice_head .left .up_block .price {
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 19px;
    font-weight: 400;
    line-height: 24px;
    margin-left: 17px;
    position: relative;
    top: -4px
}

.subservice_head .left .up_block .price .currency-symbol {
    position: relative;
    top: -1px
}

.subservice_head .left .up_block .price .currency-symbol i {
    font-size: 16px;
    font-weight: 100
}

.subservice_head .left .bottom_block {
    width: 549px;
    margin-top: 26px;
    margin-bottom: -16px;
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.subservice_head .mockup {
    position: absolute;
    right: 0;
    top: -50px;
    z-index: 5
}

.svg_in_sub_service {
    position: absolute;
    right: 0;
    z-index: 3;
    width: 820px;
    height: 433px
}

.whyus {
    width: 100%;
    background: url(../img/whyus-dots.png) right no-repeat #fff;
    padding-top: 128px;
    padding-bottom: 10px
}

.whyus.service-type .title-wrap {
    display: flex;
    justify-content: flex-end
}

.whyus .items {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    position: relative
}

.whyus .items.content-left .item {
    flex-basis: 324px;
    margin-bottom: 119px
}

.whyus .items.content-left .item:nth-child(2n) {
    margin-left: 66px
}

.whyus .items.content-left .item:nth-child(3n),
.whyus .items.content-left .item:nth-child(4n) {
    margin-bottom: 101px
}

.whyus .items.content-left .left_block {
    flex-basis: calc(30% - 30px);
    max-width: calc(30% - 30px)
}

.whyus .items.content-left .left_block .title {
    text-align: right
}

.whyus .items.content-left .left_block .text {
    text-align: right;
    margin-top: 26px;
    margin-left: auto
}

.whyus .items.content-left .right_block {
    flex-basis: calc(70% - 30px);
    max-width: calc(70% - 30px);
    justify-content: flex-start
}

.whyus .items.content-left .button {
    margin-left: auto;
    float: right
}

.whyus .items .line-break {
    width: 100%
}

.whyus .items .item {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 306px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 100px
}

.whyus .items .item:nth-child(2n) {
    margin-left: 82px
}

.whyus .items .item .left {
    transition: 1s;
    flex: 0 0 100px;
    text-align: center
}

.whyus .items .item .left i {
    font-size: 80px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.whyus .items .item .left.loaded {
    margin-top: 0
}

.whyus .items .item .right {
    flex: 0 0 180px;
    transition: 1s;
    margin-left: auto
}

.whyus .items .item .right .title {
    color: #2a2929;
    font-family: Bebas;
    font-size: 30px;
    font-weight: 400;
    line-height: 30px
}

.whyus .items .item .right .text {
    margin-top: 11px;
    color: #2a2929;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.whyus .items .right_block {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    flex: 1 1 calc(67% - 30px);
    max-width: calc(67% - 30px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.whyus .items .right_block.invert .title {
    background-image: linear-gradient(-247deg, #5cc4f4 0, #f24bcd 100%)
}

.whyus .items .right_block .title {
    color: #2a2929;
    font-family: Bebas;
    font-size: 76px;
    font-weight: Bold;
    line-height: 76px
}

.whyus .items .right_block .text {
    color: #2a2929;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 50px
}

.whyus .items .right_block .button {
    position: relative
}

.whyus .items .left_block {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    flex: 1 1 calc(33% - 30px);
    max-width: calc(33% - 30px)
}

.whyus .items .left_block.invert .button,
.whyus .items .left_block.invert .title {
    background-image: linear-gradient(-247deg, #5cc4f4 0, #f24bcd 100%)
}

.whyus .items .left_block .title {
    background-image: linear-gradient(-247deg, #96ffa7 0, #00a6dd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    font-family: Bebas;
    font-size: 58px;
    font-weight: Bold;
    line-height: 58px;
    text-align: left
}

.whyus .items .left_block .text {
    width: 230px;
    color: #2a2929;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    margin-top: 28px
}

.whyus .items .button {
    font-weight: 400;
    position: relative;
    margin-top: 46px;
    bottom: unset;
    top: unset;
    right: unset;
    background-image: linear-gradient(-247deg, #96ffa7 0, #00a6dd 100%);
    border: none
}

.whyus .items .button:active {
    background-position: left top
}

.whyus .items .button:focus {
    border: none
}

.pricetable {
    width: 100%;
    background: url(../img/pricetable_dots.png) repeat #ededed;
    padding-top: 115px;
    padding-bottom: 115px
}

.pricetable .content {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px
}

.pricetable .content .left {
    position: relative;
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(33.333333333333336% - 30px)
}

.pricetable .content .left .button {
    left: 0;
    bottom: 0;
    right: unset;
    border-radius: 26px;
    background-image: linear-gradient(-247deg, #96ffa7 0, #00a6dd 100%)
}

@media screen and (max-width:780px) {
    .pricetable .content .left {
        width: calc(100% - 30px)
    }
}

.pricetable .content .left .title {
    background-image: linear-gradient(-247deg, #96ffa7 0, #00a6dd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    font-family: Bebas;
    font-size: 58px;
    font-weight: Bold;
    line-height: 58px
}

.pricetable .content .left .text {
    width: 280px;
    margin-top: 26px;
    color: #2a2929;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.pricetable .content .right {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(66.66666666666667% - 30px)
}

@media screen and (max-width:780px) {
    .pricetable .content .right {
        width: calc(100% - 30px)
    }
}

.pricetable .content .right table {
    width: 100%
}

.pricetable .content .right table thead {
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right
}

.pricetable .content .right table thead .bg {
    display: block;
    width: 100%;
    height: 63px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/tabledots.png)
}

.pricetable .content .right table thead th {
    height: 71px;
    color: #fff;
    font-family: Bebas;
    font-size: 25px;
    font-weight: 700;
    line-height: 30px
}

.pricetable .content .right table thead th:nth-child(1) {
    padding-left: 95px
}

.pricetable .content .right table thead th:nth-child(2),
.pricetable .content .right table thead th:nth-child(3) {
    text-align: center
}

.pricetable .content .right table tbody {
    background: #fff
}

.pricetable .content .right table tbody tr:first-child td {
    padding-top: 40px
}

.pricetable .content .right table tbody tr:first-child td .checkmark {
    top: calc(60%)
}

.pricetable .content .right table tbody tr:last-child td {
    padding-bottom: 40px
}

.pricetable .content .right table tbody tr:last-child td .checkmark {
    top: calc(40%)
}

.pricetable .content .right table tbody tr td {
    position: relative;
    padding-top: 15px;
    padding-bottom: 15px
}

.pricetable .content .right table tbody tr td:first-child {
    padding-left: 65px;
    max-width: 400px;
    font-size: 15px!important
}

.pricetable .content .right table tbody tr td input[type=checkbox] {
    display: none
}

.pricetable .content .right table tbody tr td input[type=checkbox]:checked~.checkmark {
    text-align: left
}

.pricetable .content .right table tbody tr td input[type=checkbox]:checked~.checkmark .fa-check {
    display: inline-block;
    color: #43cec5;
    left: 10px
}

.pricetable .content .right table tbody tr td input[type=checkbox]:checked~.checkmark .fa-times {
    right: -30px
}

.pricetable .content .right table tbody tr td input[type=checkbox]:checked~.checkmark:after {
    left: 42px
}

.pricetable .content .right table tbody tr td input[type=checkbox]:disabled~.checkmark {
    text-align: center
}

.pricetable .content .right table tbody tr td input[type=checkbox]:disabled~.checkmark .fa-check {
    left: unset
}

.pricetable .content .right table tbody tr td .checkmark {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 31px;
    width: 70px;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .4);
    border-radius: 15px;
    background-color: #ededed;
    color: #ce434a;
    font-size: 19px;
    font-weight: 400;
    line-height: 0;
    text-align: right;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%)
}

.pricetable .content .right table tbody tr td .checkmark .fa-check {
    position: absolute;
    top: 6px;
    left: -30px;
    transition: .5s;
    color: #43cec5
}

.pricetable .content .right table tbody tr td .checkmark .fa-times {
    position: absolute;
    right: 10px;
    margin-top: 6px;
    transition: .5s
}

.pricetable .content .right table tbody tr td .checkmark.disabled {
    text-align: center;
    color: #43cec5;
    cursor: default
}

.pricetable .content .right table tbody tr td .checkmark.disabled .fa-check {
    display: inline-block;
    position: relative;
    left: unset
}

.pricetable .content .right table tbody tr td .checkmark.disabled:after {
    display: none
}

.pricetable .content .right table tbody tr td .checkmark:after {
    position: absolute;
    top: 3px;
    left: 3px;
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .39);
    background-color: #f6f6f6;
    transition: .5s
}

.pricetable .content .right table tbody tr td:nth-child(2),
.pricetable .content .right table tbody tr td:nth-child(3) {
    text-align: center
}

.pricetable .content .right table tbody tr td:nth-child(1) {
    color: #acacac;
    font-family: 'Century Gothic';
    font-size: 16px;
    font-weight: 700;
    line-height: 16px
}

.pricetable .content .right table tbody tr td:nth-child(1) span {
    color: #b9b9b9;
    margin-right: 10px;
    font-family: 'Century Gothic';
    font-size: 16px;
    font-weight: 400;
    line-height: 16px
}

.pricetable .content .right table tbody tr td:nth-child(2) {
    color: #13b2d6;
    font-family: 'Century Gothic';
    font-size: 16px;
    font-weight: 700
}

.pricetable .content .right .foot {
    width: 100%;
    height: 75px;
    background: url(../img/smalldots.png) right no-repeat #f8f8f8;
    position: relative
}

.pricetable .content .right .foot .text {
    padding: 30px 0 30px 125px;
    color: #acacac;
    font-family: 'Century Gothic';
    font-size: 16px;
    font-weight: 700;
    line-height: 16px
}

.pricetable .content .right .foot .sum {
    color: #13b2d6;
    font-family: 'Century Gothic';
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    padding: 30px 0 30px 5px
}

.pricetable .content .right .foot .button {
    width: 110px;
    height: 42px;
    box-shadow: 0 3px 5px rgba(56, 56, 56, .13);
    border-radius: 21px;
    background: #fff;
    position: static;
    border: none;
    color: #13b2d6;
    font-family: Bebas;
    font-size: 16px;
    font-weight: 700;
    line-height: 44px;
    transition: .25s
}

.pricetable .content .right .foot .button-wrap {
    text-align: center
}

.pricetable .content .right .foot .button:hover {
    background: #f2fcff
}

.pricetable .content .right .foot .button:active {
    background: #919191;
    color: #fff!important
}

.scheme {
    width: 100%;
    background-color: #fafafa;
    padding-bottom: 87px
}

.scheme .items {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    padding-top: 90px;
    position: relative
}

.scheme .items .right_block {
    width: 230px;
    position: absolute;
    top: 90px;
    right: 0
}

.scheme .items .right_block .title {
    background-image: linear-gradient(-247deg, #96ffa7 0, #00a6dd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    font-family: Bebas;
    font-size: 76px;
    font-weight: 700;
    line-height: 76px;
    text-align: right
}

.scheme .items .right_block .text {
    margin-top: 30px;
    text-align: right;
    color: #2a2929;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.scheme .items .nums {
    position: absolute
}

.scheme .items .nums .num {
    position: absolute;
    background-image: linear-gradient(-247deg, #96f9ff 0, #8c6cff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f1f0f0;
    font-family: 'Century Gothic';
    font-size: 193px;
    font-weight: 700
}

.scheme .items .nums .num:nth-child(1) {
    top: -75px;
    left: -40px
}

.scheme .items .nums .num:nth-child(2) {
    background-image: linear-gradient(-247deg, #fffb96 0, #fea752 100%);
    z-index: 7;
    top: -75px;
    left: 350px
}

.scheme .items .nums .num:nth-child(3) {
    background-image: linear-gradient(-247deg, #ffe9be 0, #ff6cec 100%);
    z-index: 3;
    top: 110px;
    left: -40px
}

.scheme .items .nums .num:nth-child(4) {
    background-image: linear-gradient(-247deg, #96ffa7 0, #41d0ef 100%);
    z-index: 14;
    top: 110px;
    left: 350px
}

.scheme .items .nums .num:nth-child(5) {
    background-image: linear-gradient(-247deg, #fffb96 0, #fea752 100%);
    z-index: 1;
    top: 320px;
    left: -40px
}

.scheme .items .nums .num:nth-child(6) {
    background-image: linear-gradient(-247deg, #96f9ff 0, #8c6cff 100%);
    z-index: 20;
    top: 320px;
    left: 350px
}

.scheme .items .nums .num:nth-child(7) {
    background-image: linear-gradient(-247deg, #ffe9be 0, #ff6cec 100%);
    z-index: 22;
    top: 320px;
    left: 738px
}

.scheme .items .item {
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(33.333333333333336% - 30px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 168px;
    padding-left: 35px;
    box-sizing: border-box;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .06);
    border-radius: 83px;
    background-color: #fff;
    margin-bottom: 28px;
    position: relative
}

.scheme .items .item.empty {
    background: 0 0;
    box-shadow: none
}

.scheme .items .item .right {
    width: 205px;
    margin-left: 15px
}

.scheme .items .item .right .title {
    color: #13b2d6;
    font-family: Bebas;
    font-size: 21px;
    font-weight: 700
}

.scheme .items .item .right .text {
    color: #2a2929;
    font-family: 'Century Gothic';
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    margin-top: 5px
}

.scheme .items .item:nth-child(1) {
    z-index: 2
}

.scheme .items .item:nth-child(2) {
    z-index: 4
}

.scheme .items .item:nth-child(3) {
    z-index: 8
}

.scheme .items .item:nth-child(4) {
    z-index: 12
}

.scheme .items .item:nth-child(5) {
    z-index: 14
}

.scheme .items .item:nth-child(6) {
    z-index: 16
}

.scheme .items .item:nth-child(7) {
    z-index: 18
}

.scheme .items .item:nth-child(8) {
    z-index: 20
}

.scheme .items .item:nth-child(9) {
    z-index: 22
}

.scheme .items .item:nth-child(10) {
    z-index: 24
}

.scheme .items .item:nth-child(11) {
    z-index: 26
}

.our-works-slider {
    background: url(../img/whyus-dots.png) #fff;
    overflow: hidden;
    position: relative;
    padding-top: 120px;
    padding-bottom: 85px;
    justify-content: flex-end
}

.our-works-slider.pc {
    display: flex
}

.our-works-slider .left_side {
    width: 280px
}

.our-works-slider .left_side .title {
    background-image: linear-gradient(-247deg, #96ffa7 0, #00a6dd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    font-family: Bebas;
    font-size: 58px;
    font-weight: 700;
    line-height: 58px
}

.our-works-slider .left_side .text {
    color: #2a2929;
    margin-top: 10px;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.our-works-slider .left_side .button {
    color: #fff;
    background: linear-gradient(-247deg, #96ffa7 0, #00a6dd 100%);
    background-size: 150% auto;
    box-shadow: none;
    position: relative;
    margin-top: 50px
}

.our-works-slider .left_side .button:hover {
    background-position: right center
}

.our-works-slider .slick-next {
    top: unset;
    bottom: 0;
    left: -70px;
    width: 52px;
    height: 52px;
    border: 1px solid #00a6dd;
    color: #00a6dd;
    border-radius: 50%;
    font-size: 20px;
    opacity: .5;
    line-height: 52px;
    z-index: 3
}

.our-works-slider .slick-next:before {
    content: ' '
}

.our-works-slider .slick-next:hover {
    opacity: 1
}

.our-works-slider .slick-prev {
    top: unset;
    bottom: 0;
    left: -150px;
    width: 52px;
    height: 52px;
    border: 1px solid #00a6dd;
    color: #00a6dd;
    border-radius: 50%;
    font-size: 20px;
    opacity: .5;
    line-height: 52px;
    z-index: 3
}

.our-works-slider .slick-prev:before {
    content: ' '
}

.our-works-slider .slick-prev:hover {
    opacity: 1
}

.our-works-slider .works-slider {
    width: 1140px;
    float: right;
    margin-right: -30px
}

.our-works-slider .works-slider .work-item {
    box-shadow: 0 7px 10px 0 rgba(0, 0, 0, .22);
    overflow: hidden;
    position: relative;
    width: 380px;
    margin: 0 15px 30px;
    height: 360px;
    background-size: cover;
    background-position: center
}

.our-works-slider .works-slider .work-item .up_block {
    width: 320px;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 20px;
    transition: .5s;
    will-change: transform;
    -webkit-box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .75);
    box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .75);
    z-index: 3
}

.our-works-slider .works-slider .work-item .up_block .title {
    color: #fff;
    font-family: Bebas;
    font-size: 29px;
    font-weight: 300;
    text-decoration: none
}

.our-works-slider .works-slider .work-item .up_block .text {
    margin-top: 10px;
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 19.47px
}

.our-works-slider .works-slider .work-item .up_block .text:after {
    content: ''
}

.our-works-slider .works-slider .work-item .logo {
    width: 165px;
    height: 150px;
    position: absolute;
    transform: scale(.8);
    will-change: transform;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 120px;
    text-align: center;
    transition: .5s;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

.our-works-slider .works-slider .work-item .screen {
    position: absolute;
    width: 320px;
    max-width: 440px;
    height: 310px;
    will-change: transform;
    transform: translateY(300px);
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
    transition: .5s;
    background-position: center;
    z-index: 3
}

.our-works-slider .works-slider .work-item:hover .up_block {
    transform: translateY(0)
}

.our-works-slider .works-slider .work-item:hover .logo {
    transform: scale(1)
}

.our-works-slider .works-slider .work-item:hover .screen {
    transform: translateY(250px)
}

.our-works-slider .block {
    position: relative
}

.our-works-slider .block .control {
    position: absolute;
    bottom: 30px;
    right: calc(100% - -15px);
    display: flex
}

.category-buttons {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 45px
}

.category-buttons .button {
    position: relative;
    bottom: unset;
    top: unset;
    left: unset;
    right: unset;
    word-wrap: break-word;
    width: calc(25% - 30px);
    background: 0 0;
    box-shadow: none;
    border: 1px solid #ff6f6f;
    background: linear-gradient(to right, #ff6f6f 0, #6464ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fffefe;
    font-family: Bebas;
    font-size: 21px;
    font-weight: 700;
    box-sizing: border-box;
    margin-bottom: 18px;
    margin-right: 15px;
    margin-left: 15px
}

.category-buttons .button i {
    background-image: linear-gradient(to right, #ff6f6f 0, #6464ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 8px
}

.category-buttons .button:hover {
    background-image: linear-gradient(to right, #ff6f6f 0, #6464ff 100%);
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    color: #fff
}

.category-buttons .button:hover i {
    color: #fff;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-image: none
}

.category-buttons .search {
    width: calc(20% - 30px);
    flex-grow: 1;
    margin-left: 15px;
    margin-right: 15px;
    position: relative
}

.category-buttons .search input {
    width: 100%;
    box-sizing: border-box;
    border-radius: 26px;
    border: 1px solid #d2d2d2;
    height: 54px;
    padding-left: 35px;
    padding-right: 60px;
    color: #d2d2d2;
    font-family: Bebas;
    font-size: 21px;
    font-weight: Bold
}

.category-buttons .search::placeholder {
    color: #d2d2d2;
    opacity: 1
}

.category-buttons .search:-ms-input-placeholder {
    color: #d2d2d2;
    opacity: 1
}

.category-buttons .search::-ms-input-placeholder {
    color: #d2d2d2;
    opacity: 1
}

.category-buttons .search .submit {
    background: 0 0;
    border: none;
    box-shadow: none;
    color: #d2d2d2;
    font-size: 21px;
    font-weight: 400;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 25px
}

.category-buttons .search .submit:focus {
    border: none
}

.privacy {
    padding-top: 45px;
    padding-bottom: 150px
}

.blog {
    padding-top: 63px;
    padding-bottom: 60px;
    background: url(../img/blog-bg.png) center top #fff
}

.blog .filter .filt .slick-next,
.blog .filter .filt .slick-prev {
    top: 50%;
    transform: translateY(-50%)
}

.blog .filter .filt .slick-next.slick-disabled:before,
.blog .filter .filt .slick-prev.slick-disabled:before {
    opacity: .1
}

.blog .filter .filt .slick-next:active:before,
.blog .filter .filt .slick-next:focus:before,
.blog .filter .filt .slick-next:hover:before,
.blog .filter .filt .slick-prev:active:before,
.blog .filter .filt .slick-prev:focus:before,
.blog .filter .filt .slick-prev:hover:before {
    opacity: .75;
    transition-duration: 250ms
}

.blog .filter .filt .slick-next:before,
.blog .filter .filt .slick-prev:before {
    opacity: .25;
    color: #000
}

.blog .filter .filt .slick-prev {
    left: 0
}

.blog .filter .filt .slick-next {
    right: 0
}

.blog .filter label {
    background-image: linear-gradient(135deg, #ff6f6f 0, #6464ff 50%, #ff6f6f 100%)
}

.blog .filter label i {
    background-image: linear-gradient(135deg, #ff6f6f 0, #6464ff 100%)
}

.blog .search {
    position: relative;
    display: inline-block;
    margin-bottom: 65px;
    color: gray;
    width: 330px
}

.blog .search button[type=submit],
.blog .search input[name=query] {
    color: #d2d2d2;
    font-size: 21px
}

.blog .search input[name=query] {
    box-sizing: border-box;
    font-family: Bebas;
    font-weight: 400;
    line-height: 52px;
    padding: 0 50px 0 32px;
    border-radius: 26px;
    border: 1px solid #d2d2d2;
    width: 100%;
    height: 52px;
    transition: all 250ms ease-out
}

.blog .search input[name=query]::-webkit-input-placeholder {
    color: #d2d2d2;
    opacity: .9;
    transition: all 250ms ease-out
}

.blog .search input[name=query]::-moz-placeholder {
    color: #d2d2d2;
    opacity: .9;
    transition: all 250ms ease-out
}

.blog .search input[name=query]:-ms-input-placeholder {
    color: #d2d2d2;
    opacity: .9;
    transition: all 250ms ease-out
}

.blog .search input[name=query]:hover {
    border-color: #656565;
    color: #656565
}

.blog .search input[name=query]:hover::-webkit-input-placeholder {
    color: #656565;
    opacity: .8;
    transition: all 250ms ease-out
}

.blog .search input[name=query]:hover::-moz-placeholder {
    color: #656565;
    opacity: .8;
    transition: all 250ms ease-out
}

.blog .search input[name=query]:hover:-ms-input-placeholder {
    color: #656565;
    opacity: .8;
    transition: all 250ms ease-out
}

.blog .search input[name=query]:focus {
    border-color: #656565;
    color: #656565;
    box-shadow: 0 0 13px 0 rgba(0, 0, 0, .2)
}

.blog .search input[name=query]:focus::-webkit-input-placeholder {
    color: #d2d2d2;
    opacity: .4;
    transition: all 250ms ease-in
}

.blog .search input[name=query]:focus::-moz-placeholder {
    color: #d2d2d2;
    opacity: .4;
    transition: all 250ms ease-in
}

.blog .search input[name=query]:focus:-ms-input-placeholder {
    color: #d2d2d2;
    opacity: .4;
    transition: all 250ms ease-in
}

.blog .search button[type=submit] {
    position: absolute;
    top: 15px;
    right: 25px;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer
}

.blog .search button[type=submit]:hover {
    color: #696969
}

.blog .search button[type=submit] i {
    transition-duration: 250ms
}

.blog .items .item {
    position: relative;
    margin-bottom: 65px
}

.blog .items .item:nth-child(even) .left {
    order: 2
}

.blog .items .item:nth-child(even) .right {
    order: 1
}

.blog .items .item:last-child {
    margin-bottom: 45px
}

.blog .items .item:last-child:after {
    display: none
}

.blog .items .item:last-child a {
    margin-bottom: 0
}

.blog .items .item:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    width: calc(100% - 30px);
    margin: 0 auto;
    height: 1px;
    background-color: #e7e7e7
}

.blog .items .item a {
    margin-bottom: 65px;
    position: relative;
    display: flex;
    flex-wrap: wrap
}

.blog .items .item a:focus .left .info i,
.blog .items .item a:hover .left .info i {
    background-position: right center
}

.blog .items .item a:focus .left .desc .more,
.blog .items .item a:hover .left .desc .more {
    color: #80475f
}

.blog .items .item a:focus .left .desc .more i,
.blog .items .item a:hover .left .desc .more i {
    transform: translateX(10px)
}

.blog .items .item a:focus .right:before,
.blog .items .item a:hover .right:before {
    opacity: .2
}

.blog .items .item .left {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(50% - 30px);
    order: 1;
    text-align: left
}

@media screen and (max-width:960px) {
    .blog .items .item .left {
        width: calc(50% - 30px)
    }
}

@media screen and (max-width:780px) {
    .blog .items .item .left {
        width: calc(100% - 30px)
    }
}

.blog .items .item .left .title {
    color: #2a2929;
    font-family: Bebas;
    font-size: 50px;
    font-weight: 400;
    text-decoration: none;
    word-break: break-word;
    margin-top: -6px;
    line-height: 60px
}

.blog .items .item .left .info {
    display: flex;
    flex-wrap: wrap;
    margin-top: 19px;
    color: #2a2929;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400
}

.blog .items .item .left .info div {
    margin-right: 50px
}

.blog .items .item .left .info i {
    background-image: linear-gradient(-247deg, #ff6f6f 0, #6464ff 50%, #ff6f6f 100%);
    background-size: 200% 100%;
    background-position: left center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 6px;
    transition-duration: 250ms
}

.blog .items .item .left .desc {
    margin-top: 27px;
    color: #2a2929;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.blog .items .item .left .desc .more {
    color: #d3769e;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    line-height: 19.99px;
    text-decoration: none;
    transition: color 250ms ease-out;
    display: inline-block
}

.blog .items .item .left .desc .more i {
    transition: transform 250ms ease-out
}

.blog .items .item .right {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(50% - 30px);
    order: 2;
    position: relative;
    align-self: flex-start
}

@media screen and (max-width:960px) {
    .blog .items .item .right {
        width: calc(50% - 30px)
    }
}

@media screen and (max-width:780px) {
    .blog .items .item .right {
        width: calc(100% - 30px)
    }
}

.blog .items .item .right:before {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 4px);
    opacity: 0;
    background-color: #000;
    transition-duration: 250ms
}

.blog .items .item .right .grad {
    padding: 1px;
    display: inline-block;
    background-image: linear-gradient(-247deg, rgba(255, 111, 111, .1) 0, #e7e7e7 50%, rgba(255, 111, 110, .1) 100%)
}

.blog .items .item .right img {
    display: block
}

.blog .items #mse2_results {
    font-family: 'Century Gothic';
    font-weight: 700;
    font-size: 26px;
    text-align: center;
    margin-bottom: 15px
}

.blog .items #mse2_results .answer {
    flex: 1 1 100%;
    text-align: center
}

.blog .items #mse2_results .queryVal {
    color: #6464ff;
    font-size: 21px
}

.pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.pages ul li {
    position: relative;
    float: left;
    margin-right: 10px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    transition-duration: 250ms
}

.pages ul li:last-child {
    margin-right: 0
}

.pages ul li .link,
.pages ul li a {
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #d2d2d2;
    font-family: Bebas;
    font-size: 30px;
    font-weight: 700;
    display: block;
    transition-duration: 250ms
}

.pages ul li .link:focus,
.pages ul li .link:hover,
.pages ul li a:focus,
.pages ul li a:hover {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2)
}

.pages ul li .withGradient .bg {
    background-image: none;
    background-color: #d2d2d2
}

.pages ul li .withGradient .symbol {
    background-image: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    color: #d2d2d2
}

.pages ul li.page .withGradient .symbol {
    padding-top: 3px
}

.pages ul li.active .withGradient .bg {
    background-image: linear-gradient(to right, #ff6f6f 0, #6464ff 100%)
}

.pages ul li.active .withGradient .symbol {
    background-image: linear-gradient(to right, #ff6f6f 0, #6464ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.article_info .author {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.article_info .author .info {
    margin-left: 15px
}

.article_info .author .info .name {
    color: #fff;
    font-family: 'Century Gothic - Bold', sans-serif;
    font-size: 16px;
    font-weight: 700
}

.article_info .author .info .who {
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 16px;
    font-weight: 400
}

.article_info .time {
    margin-top: 35px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.article_info .time i {
    margin-right: 10px
}

.article_info .time .date,
.article_info .time .shared,
.article_info .time .views {
    font-family: 'Century Gothic';
    font-size: 14px;
    text-rendering: geometricPrecision
}

.article_info .time .date:focus,
.article_info .time .shared:focus,
.article_info .time .views:focus {
    outline: 0
}

.article_info .time .date,
.article_info .time .views {
    margin-right: 50px
}

.blog-item {
    background: url(../img/blog-bg.png) center top #fff;
    padding-top: 60px;
    padding-bottom: 60px
}

.blog-item .content {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px
}

.blog-item .content .left {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(75% - 30px);
    font-family: 'Century Gothic'
}

@media screen and (max-width:960px) {
    .blog-item .content .left {
        width: calc(100% - 30px)
    }
}

.blog-item .content .left .share {
    margin: 85px auto 0;
    text-align: center
}

.blog-item .content .left .share .title i {
    background-image: linear-gradient(to right, #ff6f6f 0, #6464ff 100%);
    font-size: 14px;
    margin-right: 7px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.blog-item .content .left .share .title span {
    background-image: linear-gradient(to right, #ff6f6f 0, #6464ff 100%);
    font-size: 16px;
    font-family: Bebas;
    font-weight: 700;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.blog-item .content .left .share .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px
}

.blog-item .content .left .share .buttons div {
    font-size: 24px;
    width: 55px;
    height: 55px;
    border: 1px solid;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-left: 7px;
    cursor: pointer;
    box-sizing: border-box;
    transition: 250ms ease-out
}

.blog-item .content .left .share .buttons div:first-child {
    margin-left: 0
}

.blog-item .content .left .share .buttons div.vk {
    border-color: #44648b;
    color: #44648b
}

.blog-item .content .left .share .buttons div.ok {
    border-color: #f58220;
    color: #f58220
}

.blog-item .content .left .share .buttons div.fb {
    border-color: #4267b2;
    color: #4267b2
}

.blog-item .content .left .share .buttons div:hover {
    border-width: 2px;
    color: #fff
}

.blog-item .content .left .share .buttons div:hover.vk {
    background-color: #44648b
}

.blog-item .content .left .share .buttons div:hover.ok {
    background-color: #f58220
}

.blog-item .content .left .share .buttons div:hover.fb {
    background-color: #4267b2
}

.blog-item .content .right {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(25% - 30px)
}

@media screen and (max-width:960px) {
    .blog-item .content .right {
        width: calc(100% - 30px)
    }
}

.blog-item .content .right .subblock {
    margin-bottom: 75px
}

.blog-item .content .right .subblock:last-child {
    margin-bottom: 0
}

.blog-item .content .right .subblock.banner {
    text-align: right
}

.blog-item .content .right .subblock .title {
    display: inline-block;
    float: right;
    background-image: linear-gradient(to right, #ff6f6f 0, #6464ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #2a2929;
    font-family: Bebas;
    font-size: 25px;
    font-weight: 400;
    text-align: right
}

.blog-item .content .right .subblock .links {
    margin-top: 30px;
    text-align: right
}

.blog-item .content .right .subblock .links a {
    display: block;
    margin-bottom: 17px;
    color: #2a2929;
    font-family: 'Century Gothic';
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: color 250ms ease-out;
    height: 32px
}

.blog-item .content .right .subblock .links a:hover {
    color: #6b5f64;
    text-decoration: underline
}

.blog-item .content .right .subblock .links a:last-child {
    margin-bottom: 0
}

#map,
.map {
    width: 100%;
    position: relative
}

#map .mapOverlay,
.map .mapOverlay {
    width: 46.2%;
    position: relative;
    z-index: 2
}

#map .mapOverlay .bg .dots,
#map .mapOverlay .bg .gradient,
.map .mapOverlay .bg .dots,
.map .mapOverlay .bg .gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#map .mapOverlay .bg .gradient,
.map .mapOverlay .bg .gradient {
    background-image: linear-gradient(-247deg, #92e542 0, #007496 100%);
    opacity: .9;
    z-index: 1
}

#map .mapOverlay .bg .dots,
.map .mapOverlay .bg .dots {
    background-image: url(../img/dots3.png);
    background-repeat: no-repeat;
    background-position: top right;
    z-index: 2;
    opacity: .1
}

#map .mapOverlay .content,
.map .mapOverlay .content {
    z-index: 3;
    width: 377px;
    position: relative;
    margin-left: auto;
    margin-right: 77px;
    padding-bottom: 45px;
    padding-top: 98px;
    box-sizing: border-box
}

#map .mapOverlay .content h1,
.map .mapOverlay .content h1 {
    color: #fff;
    font-family: Bebas;
    font-size: 76px;
    font-weight: 700;
    line-height: 76px;
    text-align: center;
    margin-bottom: 20px
}

#map .mapOverlay .content .phone,
.map .mapOverlay .content .phone {
    margin-bottom: 0
}

#map .mapOverlay .content .phone .number,
.map .mapOverlay .content .phone .number {
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 18px;
    font-weight: 400;
    text-align: center
}

#map .mapOverlay .content .phone .number i,
.map .mapOverlay .content .phone .number i {
    transform: rotate(90deg);
    margin-right: 5px;
    font-size: 14px;
    position: relative;
    top: -2px
}

#map .mapOverlay .content .phone .number a,
.map .mapOverlay .content .phone .number a {
    transition: all 250ms ease-out;
    display: inline-block
}

#map .mapOverlay .content .phone .number a:active,
#map .mapOverlay .content .phone .number a:focus,
#map .mapOverlay .content .phone .number a:hover,
.map .mapOverlay .content .phone .number a:active,
.map .mapOverlay .content .phone .number a:focus,
.map .mapOverlay .content .phone .number a:hover {
    color: #cecece
}

#map .mapOverlay .content .phone .buttons,
.map .mapOverlay .content .phone .buttons {
    margin-top: 6px;
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

#map .mapOverlay .content .phone .buttons a,
.map .mapOverlay .content .phone .buttons a {
    font-family: 'Century Gothic', sans-serif;
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    height: 25px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    margin-right: 5px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 25px;
    text-decoration: none;
    transition: all 250ms ease-out
}

#map .mapOverlay .content .phone .buttons a:last-child,
.map .mapOverlay .content .phone .buttons a:last-child {
    margin-right: 0
}

#map .mapOverlay .content .phone .buttons a i,
.map .mapOverlay .content .phone .buttons a i {
    margin-right: 5px;
    color: rgba(255, 255, 255, .65);
    transition: color 250ms ease-out
}

#map .mapOverlay .content .phone .buttons a:hover,
.map .mapOverlay .content .phone .buttons a:hover {
    border: 1px solid #fff;
    color: #fff
}

#map .mapOverlay .content .phone .buttons a:hover i,
.map .mapOverlay .content .phone .buttons a:hover i {
    color: #fff
}

#map .mapOverlay .content .phone .buttons a:active,
#map .mapOverlay .content .phone .buttons a:focus,
.map .mapOverlay .content .phone .buttons a:active,
.map .mapOverlay .content .phone .buttons a:focus {
    background-color: #fff;
    color: #43977D
}

#map .mapOverlay .content .phone .buttons a:active i,
#map .mapOverlay .content .phone .buttons a:focus i,
.map .mapOverlay .content .phone .buttons a:active i,
.map .mapOverlay .content .phone .buttons a:focus i {
    color: #43977D
}

#map .mapOverlay .content .phone2 .buttons,
.map .mapOverlay .content .phone2 .buttons {
    margin-bottom: 30px
}

#map .mapOverlay .content .email,
.map .mapOverlay .content .email {
    text-align: center;
    margin-bottom: 30px
}

#map .mapOverlay .content .email.skype,
.map .mapOverlay .content .email.skype {
    margin-bottom: 49px
}

#map .mapOverlay .content .email a,
.map .mapOverlay .content .email a {
    font-family: 'Century Gothic', sans-serif;
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
    height: 25px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    margin-right: 5px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    line-height: 25px;
    text-decoration: none;
    transition: all 250ms ease-out
}

#map .mapOverlay .content .email a i,
.map .mapOverlay .content .email a i {
    font-size: 15px;
    margin-right: 5px;
    color: rgba(255, 255, 255, .65);
    transition: color 250ms ease-out
}

#map .mapOverlay .content .email a:hover,
.map .mapOverlay .content .email a:hover {
    border: 1px solid #fff;
    color: #fff
}

#map .mapOverlay .content .email a:hover i,
.map .mapOverlay .content .email a:hover i {
    color: #fff
}

#map .mapOverlay .content .email a:active,
#map .mapOverlay .content .email a:focus,
.map .mapOverlay .content .email a:active,
.map .mapOverlay .content .email a:focus {
    background-color: #fff;
    color: #43977D
}

#map .mapOverlay .content .email a:active i,
#map .mapOverlay .content .email a:focus i,
.map .mapOverlay .content .email a:active i,
.map .mapOverlay .content .email a:focus i {
    color: #43977D
}

#map .mapOverlay .content .email .note,
.map .mapOverlay .content .email .note {
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 14px;
    margin-top: 2px
}

#map .mapOverlay .contacts,
.map .mapOverlay .contacts {
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 14px;
    text-align: center
}

#map .mapOverlay .contacts div,
.map .mapOverlay .contacts div {
    font-size: 15px;
    line-height: 19px;
    margin-bottom: 14px
}

#map .mapOverlay .contacts div:last-child,
.map .mapOverlay .contacts div:last-child {
    margin-bottom: 0
}

#map .mapOverlay .contacts div i,
.map .mapOverlay .contacts div i {
    margin-right: 5px
}

#map .mapOverlay .contacts .taras,
#map .mapOverlay .contacts .tbbtn,
.map .mapOverlay .contacts .taras,
.map .mapOverlay .contacts .tbbtn {
    font-family: 'Century Gothic', sans-serif;
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
    height: 27px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    margin-right: 5px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    margin-top: 32px;
    background: 0 0;
    cursor: pointer;
    transition: all 250ms ease-out
}

#map .mapOverlay .contacts .taras i,
#map .mapOverlay .contacts .tbbtn i,
.map .mapOverlay .contacts .taras i,
.map .mapOverlay .contacts .tbbtn i {
    color: rgba(255, 255, 255, .75);
    margin-right: 5px;
    transition: all 250ms ease-out
}

#map .mapOverlay .contacts .taras:hover,
#map .mapOverlay .contacts .tbbtn:hover,
.map .mapOverlay .contacts .taras:hover,
.map .mapOverlay .contacts .tbbtn:hover {
    border: 1px solid #fff
}

#map .mapOverlay .contacts .taras:hover i,
#map .mapOverlay .contacts .tbbtn:hover i,
.map .mapOverlay .contacts .taras:hover i,
.map .mapOverlay .contacts .tbbtn:hover i {
    color: #fff
}

#map .mapOverlay .contacts .taras:active,
#map .mapOverlay .contacts .taras:focus,
#map .mapOverlay .contacts .tbbtn:active,
#map .mapOverlay .contacts .tbbtn:focus,
.map .mapOverlay .contacts .taras:active,
.map .mapOverlay .contacts .taras:focus,
.map .mapOverlay .contacts .tbbtn:active,
.map .mapOverlay .contacts .tbbtn:focus {
    background-color: #fff;
    color: #43977D
}

#map .mapOverlay .contacts .taras:active i,
#map .mapOverlay .contacts .taras:focus i,
#map .mapOverlay .contacts .tbbtn:active i,
#map .mapOverlay .contacts .tbbtn:focus i,
.map .mapOverlay .contacts .taras:active i,
.map .mapOverlay .contacts .taras:focus i,
.map .mapOverlay .contacts .tbbtn:active i,
.map .mapOverlay .contacts .tbbtn:focus i {
    color: #43977D
}

#map #ymaps,
.map #ymaps {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

#map .bread,
.map .bread {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0
}

.wysivyg p {
    margin-bottom: 30px
}

.about_company {
    padding-top: 125px;
    padding-bottom: 100px;
    background-color: #fafafa;
    position: relative
}

.about_company:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(180deg);
    background-image: url(../img/dots3.png);
    background-position: left bottom;
    background-size: auto;
    background-repeat: no-repeat
}

.about_company .wrapper {
    position: relative
}

.about_company .title {
    display: inline-block;
    float: right;
    background-image: linear-gradient(-247deg, #92e542 0, #007496 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    font-family: Bebas;
    font-size: 76px;
    font-weight: 700;
    line-height: 76px
}

.about_company .content {
    margin-top: 35px;
    color: #2a2929;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.our_team {
    padding-top: 119px;
    padding-bottom: 100px;
    background: url(../img/dots3.png) left bottom no-repeat #fff;
    background-size: auto;
    box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .5);
    position: relative;
    z-index: 1
}

.our_team .title {
    background: #fff;
    display: inline-block;
    background: linear-gradient(-247deg, #92e542 0, #007496 100%) #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    font-family: Bebas;
    font-size: 76px;
    font-weight: 700;
    line-height: 76px
}

.our_team .group {
    display: flex;
    justify-content: space-between;
    padding-top: 15px
}

.our_team .button {
    position: relative;
    bottom: unset;
    background-image: linear-gradient(to right, #92e542 0, #007496 100%)
}

.our_cards {
    position: relative
}

.our_cards .cards {
    margin-top: -8px;
    box-sizing: border-box
}

.our_cards .cards .slick-list {
    padding-top: 68px;
    padding-bottom: 60px
}

.our_cards .cards .slick-slide {
    position: relative
}

.our_cards .cards .card_old {
    width: 315px;
    height: 440px;
    position: relative;
    perspective: 1000px;
    margin: 0 auto
}

.our_cards .cards .card_old:nth-child(even) .front {
    background-image: linear-gradient(-247deg, #96f5ff 0, #8c6fff 100%)
}

.our_cards .cards .card_old.not-hover:hover .front {
    transform: none
}

.our_cards .cards .card_old.not-hover.show .front,
.our_cards .cards .card_old.not-hover:hover .back {
    transform: rotateY(180deg)
}

.our_cards .cards .card_old.not-hover.show .back {
    transform: rotateY(360deg)
}

.our_cards .cards .card_old:hover .front {
    transform: rotateY(180deg)
}

.our_cards .cards .card_old:hover .back {
    transform: rotateY(360deg)
}

.our_cards .cards .card_old.not-hovered .front {
    transform: none!important
}

.our_cards .cards .card_old.not-hovered .back {
    transform: rotateY(180deg)!important
}

.our_cards .cards .card_old .back,
.our_cards .cards .card_old .front {
    position: absolute;
    bottom: 0;
    left: 30px;
    width: calc(100% - 60px);
    height: calc(100% - 75px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 500ms linear
}

.our_cards .cards .card_old .back .photo,
.our_cards .cards .card_old .front .photo {
    position: absolute;
    bottom: 0;
    right: -30px;
    z-index: 3;
    width: calc(100% + 60px);
    height: calc(100% + 75px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom
}

.our_cards .cards .card_old .front {
    background-image: linear-gradient(-247deg, #8fdc62 0, #1f87a2 100%);
    z-index: 2
}

.our_cards .cards .card_old .front .dots {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/our-team-dots-2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom
}

.our_cards .cards .card_old .back {
    transform: rotateY(180deg);
    background-image: linear-gradient(-247deg, #4f4f4f 0, #262626 100%)
}

.our_cards .cards .card_old .back .photo {
    filter: grayscale(1) brightness(.5);
    transform: scaleX(-1)
}

.our_cards .cards .card_old .back .info {
    bottom: unset;
    top: 15px
}

.our_cards .cards .card_old .back .text {
    margin-top: 100px;
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    z-index: 3
}

.our_cards .cards .card_old .info {
    position: absolute;
    bottom: 15px;
    right: 15px;
    text-align: right;
    z-index: 4
}

.our_cards .cards .card_old .info .name {
    color: #fff;
    font-family: Bebas;
    font-size: 30px;
    font-weight: 700
}

.our_cards .cards .card_old .info .profession {
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 16px
}

.our_cards .cards .card {
    width: 315px;
    height: 440px;
    position: relative;
    margin: 0 auto;
    perspective: 1000px;
    transform-style: preserve-3d
}

.our_cards .cards .card:hover .flip {
    transform: rotateY(180deg)
}

.our_cards .cards .card.not-hover:hover .flip {
    transform: rotateY(0deg)
}

.our_cards .cards .card.not-hover.show .flip {
    transform: rotateY(180deg)
}

.our_cards .cards .card.not-hovered .flip {
    transform: rotate(0deg)!important
}

.our_cards .cards .card .flip {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: 500ms linear
}

.our_cards .cards .card .back,
.our_cards .cards .card .front {
    position: absolute;
    bottom: 0;
    left: 30px;
    width: calc(100% - 60px);
    height: calc(100% - 75px);
    backface-visibility: hidden
}

.our_cards .cards .card .back .photo,
.our_cards .cards .card .front .photo {
    position: absolute;
    bottom: 0;
    right: -30px;
    z-index: 3;
    width: calc(100% + 60px);
    height: calc(100% + 75px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom
}

.our_cards .cards .card .front {
    transform: rotateY(0deg);
    background-image: linear-gradient(-247deg, #8fdc62 0, #1f87a2 100%);
    z-index: 2
}

.our_cards .cards .card .front .dots {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/our-team-dots-2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom
}

.our_cards .cards .card .back {
    transform: rotateY(-180deg) translateZ(1px);
    background-image: linear-gradient(-247deg, #4f4f4f 0, #262626 100%)
}

.our_cards .cards .card .back .photo {
    filter: grayscale(1) brightness(.5);
    transform: scaleX(-1)
}

.our_cards .cards .card .back .info {
    bottom: unset;
    top: 15px
}

.our_cards .cards .card .back .text {
    margin-top: 100px;
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    z-index: 3
}

.our_cards .cards .card .info {
    position: absolute;
    bottom: 15px;
    right: 15px;
    text-align: right;
    z-index: 4
}

.our_cards .cards .card .info .name {
    color: #fff;
    font-family: Bebas;
    font-size: 30px;
    font-weight: 700
}

.our_cards .cards .card .info .profession {
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 16px
}

.block_right {
    position: relative
}

.block_right .title {
    width: 260px;
    position: absolute;
    right: 30px;
    top: 125px;
    text-align: right;
    background-image: linear-gradient(-247deg, #92e542 0, #007496 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    font-family: Bebas;
    font-size: 76px;
    font-weight: 700;
    line-height: 76px
}

.block_right .button {
    width: 160px;
    border: none;
    position: absolute;
    background-image: linear-gradient(-247deg, #70e4eb 0, #7b59f8 100%);
    right: 30px;
    top: 510px
}

.reviews {
    padding-top: 125px;
    padding-bottom: 120px;
    background: url(../img/bg-reviews.png) right bottom no-repeat #fff;
    background-size: auto
}

.reviews .wrapper {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box
}

.reviews .title {
    width: 280px;
    text-align: right;
    align-self: flex-end;
    background-image: linear-gradient(-247deg, #92e542 0, #007496 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    font-family: Bebas;
    font-size: 76px;
    font-weight: 700;
    line-height: 76px
}

.reviews .title.mobile {
    line-height: 60px;
    margin-bottom: 45px
}

.reviews .button {
    width: 160px;
    border: none;
    position: relative;
    float: right;
    font-weight: 300;
    margin-bottom: 5px;
    background-image: linear-gradient(-247deg, #70e4eb 0, #7b59f8 100%)
}

html.ios .reviews .button,
html.macos .reviews .button {
    line-height: 54px
}

.reviews .button:active .bg {
    opacity: 1
}

.reviews .button .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2e2c2d;
    opacity: 0;
    z-index: 1;
    border-radius: inherit;
    transition-duration: 250ms
}

.reviews .button span:not([class]) {
    position: relative;
    z-index: 2
}

.reviews .block {
    position: relative
}

.reviews .block>.control {
    display: flex;
    position: absolute;
    margin-left: 25px;
    bottom: 5px;
    left: 100%
}

.reviews .slides {
    opacity: 0;
    width: 1146px;
    transition: opacity 250ms linear
}

.reviews .slides.slick-slider {
    opacity: 1
}

.reviews .slides .item {
    box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
    background-color: #fff;
    margin: 0 4px 5px;
    position: relative;
    padding-bottom: 90px;
    height: 330px
}

.reviews .slides .item:hover .header {
    background-position: 50% 0
}

.reviews .slides .item:hover .body .bottom_block .show-full i {
    transform: scale(1.5);
    opacity: .3;
    transition-timing-function: ease-in
}

.reviews .slides .item.odd .header .dots {
    background-image: url(../img/review-dots-1.png)
}

.reviews .slides .item.even .header .dots {
    background-image: url(../img/review-dots-2.png)
}

.reviews .slides .item .header {
    width: 100%;
    height: 98px;
    background-image: linear-gradient(-247deg, #96f5ff 0, #8c6fff 75%, #8c6fff 100%);
    background-size: 150% 100%;
    background-position: 0 0;
    position: relative;
    transition: background-position 250ms
}

.reviews .slides .item .header .dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right top
}

.reviews .slides .item:nth-child(odd) .header {
    background-image: linear-gradient(-247deg, #8fdc62 0, #1f87a2 75%, #1f87a2 100%)
}

.reviews .slides .item:nth-child(odd) .body .up_info .right {
    border: 1px solid #188788
}

.reviews .slides .item:nth-child(odd) .body .bottom_block .quote i {
    background-image: linear-gradient(-247deg, #8fdc62 0, #1f87a2 75%, #1f87a2 100%)
}

.reviews .slides .item:nth-child(odd) .body .bottom_block .show-full {
    color: #188788
}

.reviews .slides .item:nth-child(odd) .body .bottom_block .show-full span:after {
    background-color: #188788
}

.reviews .slides .item .body .up_info {
    position: absolute;
    top: 20px;
    right: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.reviews .slides .item .body .up_info .left .site_name {
    color: #fff;
    font-family: Bebas;
    font-size: 27px;
    font-weight: 400;
    line-height: 27px;
    margin-top: 20px;
    height: 44px
}

.reviews .slides .item .body .up_info .left .date {
    color: #2a2929;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    text-align: right;
    margin-top: 20px;
    margin-right: -5px
}

.reviews .slides .item .body .up_info .right {
    width: 82px;
    height: 82px;
    color: #188788;
    border: 1px solid #8c6cff;
    background-color: #fff;
    font-family: Bebas;
    font-weight: 300;
    font-size: 50px;
    text-align: center;
    margin-left: 15px;
    border-radius: 50%;
    position: relative
}

.reviews .slides .item .body .up_info .right .letters {
    width: 100%;
    position: absolute;
    top: 10px;
    text-align: center
}

html.android .reviews .slides .item .body .up_info .right .letters,
html.tablet .reviews .slides .item .body .up_info .right .letters {
    top: 20px
}

html.ios .reviews .slides .item .body .up_info .right .letters,
html.macos .reviews .slides .item .body .up_info .right .letters {
    top: 0
}

.reviews .slides .item .body .bottom_block {
    padding: 0 45px;
    margin-top: 60px
}

.reviews .slides .item .body .bottom_block .full-text p,
.reviews .slides .item .body .bottom_block .text p {
    color: #2a2929;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 19.99px;
    word-break: break-word
}

.reviews .slides .item .body .bottom_block .full-text {
    display: none
}

.reviews .slides .item .body .bottom_block .quote {
    float: left;
    margin-right: 15px;
    margin-top: -33px;
    margin-bottom: 20px;
    width: 48px;
    height: 48px;
    font-size: 51px
}

.reviews .slides .item .body .bottom_block .quote i {
    background-image: linear-gradient(-247deg, #96f5ff 0, #8c6fff 75%, #8c6fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.reviews .slides .item .body .bottom_block .show-full {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 45px;
    text-align: center;
    color: #8c6fff;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    width: 180px
}

.reviews .slides .item .body .bottom_block .show-full span {
    position: relative
}

.reviews .slides .item .body .bottom_block .show-full span:after {
    content: ' ';
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    position: absolute;
    background-color: #8c6fff
}

.reviews .slides .item .body .bottom_block .show-full i {
    margin-left: 8px;
    transition: 250ms ease-out
}

.reviews .right-box {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 310px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.our_scheme {
    padding-top: 115px;
    padding-bottom: 100px;
    background-color: #fafafa;
    position: relative;
    background-image: url(../img/work-scheme-bg.png);
    background-position: right 0 bottom 150px
}

.our_scheme .content {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    position: relative
}

.our_scheme .content .left {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(75% - 30px);
    position: relative
}

@media screen and (max-width:960px) {
    .our_scheme .content .left {
        width: calc(100% - 30px)
    }
}

@media screen and (max-width:780px) {
    .our_scheme .content .left {
        width: calc(100% - 30px)
    }
}

.our_scheme .content .left .item {
    position: relative
}

.our_scheme .content .left .item .number {
    position: absolute;
    background-image: linear-gradient(-247deg, #96f9ff 0, #8c6cff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f1f0f0;
    font-family: 'Century Gothic', sans-serif;
    font-size: 193px;
    font-weight: 700;
    top: -87px;
    left: -10px;
    z-index: 1
}

.our_scheme .content .left .item .block {
    display: flex;
    flex-wrap: wrap;
    width: 797px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .06);
    border-radius: 83px;
    background-color: #fff;
    margin-left: 50px;
    margin-bottom: 30px;
    justify-content: space-between;
    padding-right: 70px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    padding-bottom: 30px
}

.our_scheme .content .left .item .block .icon {
    margin-left: 35px;
    padding-top: 60px
}

.our_scheme .content .left .item .block .icon img {
    transition-duration: 250ms
}

.our_scheme .content .left .item .block .body {
    width: 609px;
    padding-top: 38px
}

.our_scheme .content .left .item .block .body .title {
    background-image: linear-gradient(to right, #5cc4f4 0, #f24bcd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    display: inline-block;
    color: #13b2d6;
    font-family: Bebas;
    font-size: 29px;
    font-weight: 400;
    transition-duration: 250ms
}

.our_scheme .content .left .item .block .body .text {
    margin-top: 13px;
    color: #a8a8a8;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.our_scheme .content .left .item .block .body .text .more {
    color: #61a5de;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 100;
    font-style: italic;
    line-height: 19.99px;
    text-decoration: none;
    transition: color 250ms ease-out;
    display: inline-block
}

.our_scheme .content .left .item .block .body .text .more i {
    transition: transform 250ms ease-out
}

.our_scheme .content .left .item a:focus .block .icon img,
.our_scheme .content .left .item a:hover .block .icon img {
    filter: brightness(.6)
}

.our_scheme .content .left .item a:focus .block .body .title,
.our_scheme .content .left .item a:hover .block .body .title {
    background-position: right center
}

.our_scheme .content .left .item a:focus .block .body .text .more,
.our_scheme .content .left .item a:hover .block .body .text .more {
    color: #40698c
}

.our_scheme .content .left .item a:focus .block .body .text .more i,
.our_scheme .content .left .item a:hover .block .body .text .more i {
    transform: translateX(10px)
}

.our_scheme .content .left .item:nth-child(2) .number {
    background-image: linear-gradient(-247deg, #fffb96 0, #fea752 100%)
}

.our_scheme .content .left .item:nth-child(3) .number {
    background-image: linear-gradient(-247deg, #ffe9be 0, #ff6cec 100%)
}

.our_scheme .content .left .item:nth-child(4) .number {
    background-image: linear-gradient(-247deg, #96ffa7 0, #41d0ef 100%)
}

.our_scheme .content .left .item:nth-child(5) .number {
    background-image: linear-gradient(-247deg, #fffb96 0, #fea752 100%)
}

.our_scheme .content .left .item:nth-child(6) .number {
    background-image: linear-gradient(-247deg, #96f9ff 0, #8c6cff 100%)
}

.our_scheme .content .left .item:nth-child(7) .number {
    background-image: linear-gradient(-247deg, #ffe9be 0, #ff6cec 100%)
}

.our_scheme .content .right {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(25% - 30px)
}

@media screen and (max-width:960px) {
    .our_scheme .content .right {
        width: calc(100% - 30px)
    }
}

@media screen and (max-width:780px) {
    .our_scheme .content .right {
        width: calc(100% - 30px)
    }
}

.our_scheme .content .right .block {
    height: 1000px
}

.our_scheme .content .right .title {
    background-image: linear-gradient(-222deg, #5cc4f4 0, #f24bcd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    font-family: Bebas;
    font-size: 76px;
    font-weight: 600;
    line-height: 76px;
    text-align: right
}

.our_scheme .content .right .text {
    margin-top: 29px
}

.our_scheme .content .right .text p {
    margin-bottom: 40px;
    text-align: right;
    font-family: 'Century Gothic';
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #2a2929
}

.our_scheme .content .right .text b {
    font-weight: 700
}

.portfolio-site .section {
    width: 100%;
    background-repeat: no-repeat
}

.portfolio-site .screen0 .wrapper {
    position: relative
}

.portfolio-site .screen0 .logo {
    margin-top: 20px;
    text-align: center
}

.portfolio-site .screen0 .logo img {
    max-width: 152px;
    max-height: 152px
}

.portfolio-site .screen0 .type {
    color: #fff;
    font-family: 'Open Sans';
    font-size: 28px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 400px
}

.portfolio-site .screen0 .title {
    color: #fff;
    font-size: 258px;
    font-weight: 400;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 15px;
    top: 540px
}

.portfolio-site .screen2 {
    padding-bottom: 130px
}

.portfolio-site .screen2 .left_block {
    padding-top: 290px
}

.portfolio-site .screen2 .left_block .logo {
    margin-top: 0;
    text-align: left
}

.portfolio-site .screen2 .left_block .link {
    margin-top: 30px
}

.portfolio-site .screen2 .left_block .link:hover a i {
    margin-left: 15px
}

.portfolio-site .screen2 .left_block .link a {
    color: #90b7df;
    font-family: 'Century Gothic';
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    position: relative
}

.portfolio-site .screen2 .left_block .link a i {
    margin-left: 10px;
    position: absolute;
    transition: .25s;
    top: 3px
}

.portfolio-site .screen2 .left_block .block {
    background-color: #fff;
    margin-top: 45px;
    margin-left: -15px;
    padding-left: 15px;
    max-width: 260px
}

.portfolio-site .screen2 .left_block .block .title {
    color: #90b7df;
    font-family: Bebas;
    font-size: 28px;
    font-weight: 400;
    text-align: left
}

.portfolio-site .screen2 .left_block .block .text {
    color: #0d3c6f;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 20px
}

.portfolio-site .screen2 .left_block .price {
    color: #90b7df;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    margin-top: 40px
}

.portfolio-site .screen2 .right_block {
    position: absolute;
    top: 90px;
    right: -80px
}

.portfolio-site .screen2 .right_block img {
    max-width: 95%
}

.portfolio-site .screen3 {
    padding-top: 196px;
    padding-bottom: 500px
}

.portfolio-site .screen3 .content {
    display: flex;
    flex-wrap: wrap;
    width: 1110px;
    align-items: center;
    justify-content: space-around
}

.portfolio-site .screen3 .content .font {
    position: relative;
    width: 247px;
    height: 247px;
    box-shadow: 0 3px 5px rgba(211, 211, 211, .2);
    background-color: #fff;
    border-radius: 50%
}

.portfolio-site .screen3 .content .font .first-font {
    position: absolute;
    color: #5a8cc1;
    font-weight: 400;
    top: -100px;
    left: -30px
}

.portfolio-site .screen3 .content .font .name {
    position: absolute;
    color: #000!important;
    font-family: 'Century Gothic';
    font-size: 20px;
    font-weight: 400;
    bottom: 45px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center
}

.portfolio-site .screen3 .content .center {
    width: 305px
}

.portfolio-site .screen3 .content .center .title {
    color: #90b7df;
    font-family: Bebas;
    font-size: 36px;
    font-weight: 400;
    text-align: center
}

.portfolio-site .screen3 .content .center .text {
    margin-top: 25px;
    color: #0d3c6f;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding-left: 22px;
    padding-right: 22px
}

.portfolio-site .screen3 .content .center .colors {
    margin-top: 85px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}

.portfolio-site .screen3 .content .center .colors .round {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    box-shadow: 0 3px 5px rgba(211, 211, 211, .2);
    background-color: #fff;
    border-radius: 50%;
    position: relative
}

.portfolio-site .screen3 .content .center .colors .round .color {
    width: 50px;
    height: 50px;
    background-color: #ddd;
    border-radius: 50%;
    position: relative
}

.portfolio-site .screen3 .content .center .colors .round .hex {
    position: absolute;
    bottom: -30px;
    color: #000!important;
    font-family: 'Century Gothic';
    font-size: 16px;
    font-weight: 400
}

.portfolio-site .screen4 {
    padding-top: 130px;
    padding-bottom: 130px;
    height: 100vh;
    min-height: 1000px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat
}

.portfolio-site .screen4.pc .cardslider,
.portfolio-site .screen4.pc .wrapper,
.portfolio-site .screen4>.wrapper {
    height: 100%
}

@media only screen and (max-height:1000px) {
    .portfolio-site .screen4.pc .cardslider {
        transform: scale(.9)
    }
    .portfolio-site .screen4.pc .cardslider .cardslide {
        margin-top: -50px
    }
}

@media only screen and (max-height:900px) {
    .portfolio-site .screen4.pc .cardslider {
        transform: scale(.8)
    }
    .portfolio-site .screen4.pc .cardslider .cardslide {
        margin-top: -90px
    }
}

@media only screen and (max-height:800px) {
    .portfolio-site .screen4.pc .cardslider {
        transform: scale(.7)
    }
    .portfolio-site .screen4.pc .cardslider .cardslide {
        margin-top: -120px
    }
}

@media only screen and (max-height:768px) {
    .portfolio-site .screen4.pc .cardslider {
        transform: scale(.65)
    }
    .portfolio-site .screen4.pc .cardslider .cardslide {
        margin-top: -135px
    }
}

.portfolio-site .screen4 .right_block {
    position: absolute;
    right: 15px;
    top: 0;
    width: 260px;
    text-align: right;
    color: #fff
}

.portfolio-site .screen4 .right_block .block1 .title {
    font-family: Bebas;
    font-size: 28px;
    font-weight: 400
}

.portfolio-site .screen4 .right_block .block1 .text {
    margin-top: 20px;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical
}

.portfolio-site .screen4 .right_block .block2 .slide-text {
    width: 190px;
    float: right;
    display: none;
    margin-top: 40px
}

.portfolio-site .screen4 .right_block .block2 .slide-text:nth-child(1) {
    display: block
}

.portfolio-site .screen4 .right_block .block2 .slide-text .title {
    font-family: Bebas;
    font-size: 22px;
    font-weight: 400
}

.portfolio-site .screen4 .right_block .block2 .slide-text .text {
    margin-top: 20px;
    font-family: 'Century Gothic';
    font-size: 13px;
    font-weight: 400;
    line-height: 20px
}

.portfolio-site .screen4 .buttons {
    position: absolute;
    bottom: 0;
    right: 15px;
    z-index: 2
}

.portfolio-site .screen4 .buttons .arrow {
    width: 52px;
    height: 52px;
    opacity: .75;
    z-index: 3;
    display: inline-block
}

.portfolio-site .screen4 .buttons .arrow .bg {
    background-image: none;
    border: 2px solid #fff
}

.portfolio-site .screen4 .buttons .arrow .symbol {
    background-image: none;
    color: #fff;
    -webkit-text-fill-color: unset;
    -webkit-background-clip: unset
}

.portfolio-site .screen4 .buttons .arrow:focus,
.portfolio-site .screen4 .buttons .arrow:hover {
    opacity: 1
}

.portfolio-site .screen4 .buttons .arrow:focus .bg {
    border-width: 2px
}

.portfolio-site .screen4 .buttons .arrow:active .bg {
    border-color: #919191
}

.portfolio-site .screen4 .buttons .arrow:active .symbol {
    color: #919191
}

.portfolio-site .screen4 .cardslider {
    position: relative;
    width: 860px;
    height: 804px;
    z-index: 1
}

.portfolio-site .screen4 .cardslider .cardslide {
    position: absolute;
    right: 0;
    transition: .5s
}

.portfolio-site .screen4 .cardslider .cardslide:first-child {
    transform: translate(440px, -80px);
    opacity: 0
}

.portfolio-site .screen4 .cardslider .cardslide:nth-child(2) {
    transform: translate(280px, -40px);
    opacity: 0
}

.portfolio-site .screen4 .cardslider .cardslide:nth-child(3) {
    transform: translate(50px, 0)
}

.portfolio-site .screen4 .cardslider .cardslide:nth-child(4) {
    transform: translate(-160px, 40px)
}

.portfolio-site .screen4 .cardslider .cardslide:nth-child(5) {
    transform: translate(-320px, 100px)
}

.portfolio-site .screen4 .cardslider .cardslide:last-child {
    transform: translate(-510px, 160px);
    opacity: 0
}

.portfolio-site .screen5 {
    padding-top: 195px;
    padding-bottom: 195px;
    box-sizing: border-box;
    background-position: center
}

.portfolio-site .screen5 .view {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px
}

.portfolio-site .screen5 .view .left {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(33.333333333333336% - 30px)
}

@media screen and (max-width:1170px) {
    .portfolio-site .screen5 .view .left {
        width: calc(100% - 30px)
    }
}

@media screen and (max-width:960px) {
    .portfolio-site .screen5 .view .left {
        width: calc(100% - 30px)
    }
}

@media screen and (max-width:780px) {
    .portfolio-site .screen5 .view .left {
        width: calc(100% - 30px)
    }
}

.portfolio-site .screen5 .view .left .title {
    color: #90b7df;
    font-family: Bebas;
    font-size: 36px;
    font-weight: 300
}

.portfolio-site .screen5 .view .left .menu {
    margin-top: 50px
}

.portfolio-site .screen5 .view .left .menu .point {
    width: 165px;
    height: 46px;
    border-radius: 23px;
    font-family: Bebas;
    font-size: 18px;
    font-weight: 400;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    transition: .25s
}

.portfolio-site .screen5 .view .left .menu .point.active,
.portfolio-site .screen5 .view .left .menu .point.active:hover {
    background-color: #fff;
    box-shadow: 0 3px 5px rgba(211, 211, 211, .2)
}

.portfolio-site .screen5 .view .left .menu .point:hover {
    background-color: #f5f5f5;
    box-shadow: 0 3px 5px rgba(211, 211, 211, .2)
}

.portfolio-site .screen5 .view .right {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(66.66666666666667% - 30px)
}

@media screen and (max-width:1170px) {
    .portfolio-site .screen5 .view .right {
        width: calc(100% - 30px)
    }
}

@media screen and (max-width:960px) {
    .portfolio-site .screen5 .view .right {
        width: calc(100% - 30px)
    }
}

@media screen and (max-width:780px) {
    .portfolio-site .screen5 .view .right {
        width: calc(100% - 30px)
    }
}

.portfolio-site .screen5 .view .right .screen .top {
    width: 100%;
    height: 32px;
    background: #ddd;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px
}

.portfolio-site .screen5 .view .right .screen .top .buttons {
    display: flex;
    flex-wrap: wrap;
    height: 32px;
    align-items: center;
    justify-content: space-between
}

.portfolio-site .screen5 .view .right .screen .top .buttons .left {
    display: flex;
    flex-wrap: wrap
}

.portfolio-site .screen5 .view .right .screen .top .buttons .left div {
    width: 10px;
    height: 10px;
    border: 3px solid #fff;
    border-radius: 50%;
    margin-right: 5px
}

.portfolio-site .screen5 .view .right .screen .top .buttons .right {
    color: #fff;
    font-size: 25px;
    text-align: right
}

.portfolio-site .screen5 .view .right .screen .top .buttons .right i {
    cursor: pointer;
    transition-duration: 250ms
}

.portfolio-site .screen5 .view .right .screen .image {
    max-height: 422px;
    overflow: auto;
    cursor: pointer;
    background-color: #f0f0f0
}

.portfolio-site .screen5 .view .right .screen .image a,
.portfolio-site .screen5 .view .right .screen .image a img {
    display: block
}

.portfolio-site .screen5 .view .right .screen .bottom {
    width: 100%;
    height: 16px;
    background: #ddd;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px
}

.portfolio-site .screen5 .view .info {
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 45px;
    color: #361700;
    text-align: justify;
    margin-left: 15px;
    margin-right: 15px
}

.portfolio-site .screen6 .img-from-typography {
    position: relative;
    width: 100%
}

.portfolio-site .screen6 .img-from-typography img {
    display: block
}

.portfolio-site .screen6 .bg-wrapper {
    background-color: #fff;
    position: relative;
    z-index: 2;
    padding-top: 130px
}

.portfolio-site .screen6 .osob {
    padding-bottom: 55px
}

.portfolio-site .screen6 .osob .title {
    font-family: Bebas;
    font-size: 36px;
    font-weight: 400;
    text-transform: uppercase
}

.portfolio-site .screen6 .osob .text {
    margin-top: 25px;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.portfolio-site .screen6 .pismo {
    position: relative;
    width: 100%;
    box-shadow: 0 3px 13px rgba(211, 211, 211, .4);
    border-radius: 40px;
    background-color: #fff;
    padding: 60px 60px 55px;
    box-sizing: border-box;
    z-index: 5;
    overflow: hidden
}

.portfolio-site .screen6 .pismo .quote {
    font-family: Bebas;
    font-size: 36px;
    font-weight: 400
}

.portfolio-site .screen6 .pismo .quote .quote2 {
    font-size: 48px
}

.portfolio-site .screen6 .pismo .quote .caption {
    display: inline-block;
    margin-left: 35px
}

.portfolio-site .screen6 .pismo .text {
    margin-top: 25px;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.portfolio-site .screen6 .pismo .pdf {
    position: absolute;
    bottom: 30px;
    right: 30px;
    font-family: 'Century Gothic';
    font-size: 12px
}

.portfolio-site .screen6 .pismo .pdf span {
    text-decoration: underline
}

.portfolio-site .screen6 .thanks {
    position: relative;
    margin-top: 60px
}

.portfolio-site .screen6 .thanks .wrapper {
    position: relative
}

.portfolio-site .screen6 .thanks .first {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 423px;
    background-position: center
}

.portfolio-site .screen6 .thanks .second {
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 0;
    transition: 2.5s;
    color: #fff;
    font-family: Bebas;
    font-size: 55px;
    font-weight: 300
}

.portfolio-site .screen6 .thanks .third {
    z-index: 3;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 304px;
    background-position: bottom;
    background-repeat: no-repeat
}

.portfolio-site .screen6 .laststrip .content .social i:hover.fa-facebook-f,
.portfolio-site .screen6 .laststrip .content .social i:hover.fa-vk {
    color: #fff;
    transform: scale(1.2)
}

.portfolio-graf .section {
    width: 100%;
    background-repeat: no-repeat
}

.portfolio-graf .screen1 {
    height: 994px;
    background-position-x: center
}

.portfolio-graf .screen2 {
    padding-bottom: 130px;
    min-height: 720px;
    background-position-x: center
}

.portfolio-graf .screen2 .left_block {
    padding-top: 290px
}

.portfolio-graf .screen2 .left_block .caption {
    font-size: 55px;
    max-width: 440px;
    margin-bottom: 60px
}

.portfolio-graf .screen2 .left_block .logo {
    margin-top: 0;
    text-align: left
}

.portfolio-graf .screen2 .left_block .link {
    margin-top: 30px
}

.portfolio-graf .screen2 .left_block .link a {
    color: #90b7df;
    font-family: 'Century Gothic';
    font-size: 16px;
    font-weight: 700;
    text-decoration: none
}

.portfolio-graf .screen2 .left_block .link a i {
    margin-left: 10px
}

.portfolio-graf .screen2 .left_block .block {
    margin-top: 20px;
    max-width: 260px
}

.portfolio-graf .screen2 .left_block .block .title {
    color: #90b7df;
    font-family: Bebas;
    font-size: 28px;
    font-weight: 400;
    text-align: left
}

.portfolio-graf .screen2 .left_block .block .text {
    color: #0d3c6f;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 15px
}

.portfolio-graf .screen2 .left_block .price {
    color: #90b7df;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    margin-top: 35px
}

.portfolio-graf .screen2 .right_block {
    position: absolute;
    top: 100px;
    right: -120px
}

.portfolio-graf .screen3 {
    padding-top: 110px;
    padding-bottom: 90px;
    background-position: center
}

.portfolio-graf .screen3 .first {
    width: 390px;
    margin: 0 auto
}

.portfolio-graf .screen3 .first .title {
    text-align: center;
    font-family: Bebas;
    font-size: 35px;
    font-weight: 400
}

.portfolio-graf .screen3 .first .text {
    font-family: 'Century Gothic';
    margin-top: 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.portfolio-graf .screen3 .content {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px
}

.portfolio-graf .screen3 .content .font {
    position: relative;
    width: 247px;
    height: 247px;
    box-shadow: 0 3px 5px rgba(211, 211, 211, .2);
    background-color: #fff;
    border-radius: 50%
}

.portfolio-graf .screen3 .content .font .first-font {
    position: absolute;
    color: #5a8cc1;
    font-weight: 400;
    top: -100px;
    left: -30px
}

.portfolio-graf .screen3 .content .font .name {
    position: absolute;
    color: #0d3c6f;
    font-family: 'Century Gothic';
    font-size: 20px;
    font-weight: 400;
    bottom: 45px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center
}

.portfolio-graf .screen3 .content .colors {
    margin-top: 85px
}

.portfolio-graf .screen3 .content .colors .round {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    box-shadow: 0 3px 5px rgba(211, 211, 211, .2);
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    margin-bottom: 60px
}

.portfolio-graf .screen3 .content .colors .round .color {
    width: 50px;
    height: 50px;
    background-color: #ddd;
    border-radius: 50%;
    position: relative
}

.portfolio-graf .screen3 .content .colors .round .hex {
    position: absolute;
    bottom: -30px;
    color: #90b7df;
    font-family: 'Century Gothic';
    font-size: 16px;
    font-weight: 400
}

.portfolio-graf .screen3 .content .left {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(50% - 30px);
    padding-left: 30px;
    margin-top: -30px
}

.portfolio-graf .screen3 .content .left .colors {
    margin-top: 110px;
    padding-left: 80px
}

.portfolio-graf .screen3 .content .right {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(50% - 30px);
    display: flex;
    flex-wrap: wrap;
    margin-top: -30px;
    padding-right: 30px;
    flex-direction: column;
    align-items: flex-end
}

.portfolio-graf .screen3 .content .right .colors {
    margin-top: 110px;
    padding-right: 80px
}

.portfolio-soc .section {
    width: 100%;
    background-repeat: no-repeat
}

.portfolio-soc .screen1 {
    padding-bottom: 136px;
    min-height: 720px;
    position: relative
}

.portfolio-soc .screen1 .left_block {
    padding-top: 30px
}

.portfolio-soc .screen1 .left_block .caption {
    max-width: 400px;
    color: #90b7df;
    font-size: 50px;
    line-height: 50px;
    font-weight: 400;
    margin-bottom: 60px
}

.portfolio-soc .screen1 .left_block .logo {
    margin-top: 0;
    text-align: left
}

.portfolio-soc .screen1 .left_block .link {
    margin-top: 30px
}

.portfolio-soc .screen1 .left_block .link a {
    color: #90b7df;
    font-family: 'Century Gothic';
    font-size: 16px;
    font-weight: 700;
    text-decoration: none
}

.portfolio-soc .screen1 .left_block .link a i {
    margin-left: 10px
}

.portfolio-soc .screen1 .left_block .block {
    margin-top: 50px;
    max-width: 260px
}

.portfolio-soc .screen1 .left_block .block .title {
    color: #90b7df;
    font-family: Bebas;
    font-size: 28px;
    font-weight: 400;
    text-align: left
}

.portfolio-soc .screen1 .left_block .block .text {
    color: #000;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 15px
}

.portfolio-soc .screen1 .left_block .price {
    color: #90b7df;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    margin-top: 55px
}

.portfolio-soc .screen1 .right_block {
    position: absolute;
    top: 95px;
    right: -80px
}

.portfolio-soc .screen1 .right_block img {
    max-width: 95%
}

.portfolio-soc .screen2 {
    padding-top: 110px;
    padding-bottom: 90px
}

.portfolio-soc .screen2 .info .title {
    font-family: Bebas;
    font-size: 36px;
    font-weight: 400;
    text-transform: uppercase
}

.portfolio-soc .screen2 .info .text {
    margin-top: 15px;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.portfolio-soc .screen2 .rounds {
    margin-top: 120px;
    margin-left: -7.5px;
    margin-right: -7.5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}

.portfolio-soc .screen2 .rounds .round {
    box-sizing: border-box;
    position: relative;
    margin-left: 7.5px;
    margin-right: 7.5px
}

.portfolio-soc .screen2 .rounds .round.show .count,
.portfolio-soc .screen2 .rounds .round.show .icon,
.portfolio-soc .screen2 .rounds .round.show .precent,
.portfolio-soc .screen2 .rounds .round.show .text {
    opacity: 1;
    transform: scale(1)
}

.portfolio-soc .screen2 .rounds .round .count,
.portfolio-soc .screen2 .rounds .round .icon,
.portfolio-soc .screen2 .rounds .round .precent,
.portfolio-soc .screen2 .rounds .round .text {
    opacity: 0;
    transform: scale(0);
    will-change: opacity, transform;
    transition-duration: 250ms
}

.portfolio-soc .screen2 .rounds .round .icon {
    position: absolute;
    font-size: 60px;
    font-weight: 400;
    left: 0;
    right: 0;
    text-align: center;
    top: -40px;
    z-index: 2;
    transition-delay: 250ms
}

.portfolio-soc .screen2 .rounds .round .count {
    position: absolute;
    font-family: Bebas;
    font-size: 29px;
    font-weight: 400;
    top: 65px;
    left: 0;
    right: 0;
    text-align: center;
    color: #1a416a;
    transition-delay: 500ms
}

.portfolio-soc .screen2 .rounds .round .precent {
    position: absolute;
    font-family: Bebas;
    font-size: 20px;
    font-weight: 400;
    top: 95px;
    left: 0;
    right: 0;
    text-align: center;
    color: #6fd7ff;
    transition-delay: 750ms
}

.portfolio-soc .screen2 .rounds .round .text {
    font-family: Bebas;
    font-size: 24px;
    font-weight: 400;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 195px;
    color: #1a416a;
    transition-delay: 1000ms
}

.portfolio-soc .screen2 .scales {
    margin-top: 120px
}

.portfolio-soc .screen2 .scales .scale {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px
}

.portfolio-soc .screen2 .scales .scale .left {
    box-sizing: border-box;
    word-wrap: break-word;
    margin: 30px 15px;
    width: calc(25% - 30px);
    font-family: Bebas;
    font-size: 24px;
    font-weight: 400;
    transition-duration: 250ms;
    opacity: 0
}

@media screen and (max-width:960px) {
    .portfolio-soc .screen2 .scales .scale .left {
        width: calc(25% - 30px)
    }
}

@media screen and (max-width:780px) {
    .portfolio-soc .screen2 .scales .scale .left {
        width: calc(100% - 30px)
    }
}

.portfolio-soc .screen2 .scales .scale .left.load {
    opacity: 1
}

.portfolio-soc .screen2 .scales .scale .right {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(75% - 30px);
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

@media screen and (max-width:960px) {
    .portfolio-soc .screen2 .scales .scale .right {
        width: calc(75% - 30px)
    }
}

@media screen and (max-width:780px) {
    .portfolio-soc .screen2 .scales .scale .right {
        width: calc(100% - 30px)
    }
}

.portfolio-soc .screen2 .scales .scale .right .main-strip {
    width: 100%;
    height: 17px;
    position: relative;
    display: flex
}

.portfolio-soc .screen2 .scales .scale .right .main-strip .strip {
    position: relative;
    height: 17px;
    visibility: hidden;
    min-width: 60px
}

.portfolio-soc .screen2 .scales .scale .right .main-strip .strip:after {
    display: block;
    content: '';
    width: 2px;
    height: 30px;
    background: #000;
    position: absolute;
    top: -13px;
    right: -1px;
    z-index: 10
}

.portfolio-soc .screen2 .scales .scale .right .main-strip .strip.init {
    visibility: visible;
    transform: scale(0);
    transition-duration: 250ms
}

.portfolio-soc .screen2 .scales .scale .right .main-strip .strip.init.load,
.portfolio-soc .screen2 .scales .scale .right .main-strip .strip.load .circle,
.portfolio-soc .screen2 .scales .scale .right .main-strip .strip.load .number,
.portfolio-soc .screen2 .scales .scale .right .main-strip .strip.load .text,
.portfolio-soc .screen2 .scales .scale .right .main-strip .strip.load:after {
    transform: scale(1)
}

.portfolio-soc .screen2 .scales .scale .right .main-strip .strip .circle,
.portfolio-soc .screen2 .scales .scale .right .main-strip .strip .number,
.portfolio-soc .screen2 .scales .scale .right .main-strip .strip .text,
.portfolio-soc .screen2 .scales .scale .right .main-strip .strip:after {
    transform: scale(0);
    transition-duration: 250ms
}

.portfolio-soc .screen2 .scales .scale .right .main-strip .strip .text {
    top: 2px;
    right: 10px;
    position: absolute;
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 10px;
    font-weight: 700
}

.portfolio-soc .screen2 .scales .scale .right .main-strip .strip .number {
    font-family: Bebas;
    font-size: 22px;
    position: absolute;
    right: 15px;
    top: -34px;
    font-weight: 300
}

html.ios .portfolio-soc .screen2 .scales .scale .right .main-strip .strip .number,
html.macos .portfolio-soc .screen2 .scales .scale .right .main-strip .strip .number {
    top: -31px
}

.portfolio-soc .screen2 .scales .scale .right .main-strip .strip .circle {
    position: absolute;
    top: -33px;
    right: -11px;
    width: 22px;
    height: 22px;
    border: 4px solid #19a1d5;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 15
}

.portfolio-soc .screen2 .scales .scale .right .main-strip .strip.down:after {
    display: block;
    content: '';
    width: 2px;
    height: 30px;
    background: #000;
    position: absolute;
    top: 5px;
    right: -2px;
    z-index: 10
}

.portfolio-soc .screen2 .scales .scale .right .main-strip .strip.down .text {
    top: 2px;
    right: 10px;
    position: absolute;
    color: #fff;
    font-family: 'Century Gothic';
    font-size: 10px;
    font-weight: 700
}

.portfolio-soc .screen2 .scales .scale .right .main-strip .strip.down .number {
    font-family: Bebas;
    font-size: 22px;
    font-weight: 700;
    position: absolute;
    right: 15px;
    top: 32px
}

html.ios .portfolio-soc .screen2 .scales .scale .right .main-strip .strip.down .number,
html.macos .portfolio-soc .screen2 .scales .scale .right .main-strip .strip.down .number {
    top: 35px
}

.portfolio-soc .screen2 .scales .scale .right .main-strip .strip.down .circle {
    position: absolute;
    top: 33px;
    right: -11px;
    width: 22px;
    height: 22px;
    border: 4px solid #19a1d5;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 15
}

.portfolio-soc .screen2 .scales .scale .legend {
    display: none
}

.laststrip {
    width: 100%;
    height: 124px
}

.laststrip .content {
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    align-items: center;
    justify-content: space-between;
    height: 124px;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: 400;
    line-height: 19.99px;
    position: relative
}

.laststrip .content .btn {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    width: 226px
}

.laststrip .content i {
    margin-left: 15px;
    font-size: 18px
}

.laststrip .content .social {
    display: flex;
    width: 235px
}

.laststrip .content .social i {
    color: #fff;
    cursor: pointer;
    transition: .25s
}

.laststrip .content .social i.fa-facebook-f {
    display: inline-block;
    margin-top: -3px
}

.laststrip .content .social i:hover.fa-facebook-f,
.laststrip .content .social i:hover.fa-vk {
    color: #fff!important;
    transform: scale(1.2)
}

.laststrip .content .social i:hover.fa-vk {
    color: #005eb1
}

.laststrip .content .social i:hover.fa-facebook-f {
    color: #3b5999
}

.laststrip .content .btn button {
    background: #fff;
    width: 226px;
    height: 52px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    color: #1e1e1e;
    font-family: Bebas;
    font-size: 20px;
    font-weight: 400;
    line-height: 52px;
    transition-duration: 250ms
}

.laststrip .content .btn button:active {
    background-color: #919191!important
}

.mobile,
.mobile-slim,
.mobile_header {
    display: none
}

.pc,
.pc-slim {
    display: block
}

.mobile_menu_opener {
    overflow: hidden;
    position: fixed;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99;
    left: 20px;
    top: 6px;
    background: #fff;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    cursor: pointer;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .2)
}

.mobile_menu_opener input {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    z-index: 1
}

.mobile_menu_opener span {
    width: 30px;
    height: 2px;
    margin-bottom: 6px;
    background: #757474;
    -webkit-transition: all .5s cubic-bezier(.08, .81, .87, .71);
    -moz-transition: all .5s cubic-bezier(.08, .81, .87, .71);
    -ms-transition: all .5s cubic-bezier(.08, .81, .87, .71);
    -o-transition: all .5s cubic-bezier(.08, .81, .87, .71);
    transition: all .5s cubic-bezier(.08, .81, .87, .71)
}

.mobile_menu_opener span:last-child {
    margin-bottom: 0
}

.span1 {
    transform-origin: 4px 0
}

.span3 {
    transform-origin: bottom right
}

.mobile_menu_opener input:checked~.span1 {
    transform: rotate(45deg) translate(4px, -2px)
}

.mobile_menu_opener input:checked~.span2 {
    transform: rotate(495deg) translate(1px, 0)
}

.mobile_menu_opener input:checked~.span3 {
    transform: rotate(45deg);
    opacity: 0
}

.mobile_header {
    width: 100%;
    height: 65px;
    background: #fff;
    position: relative;
    z-index: 15;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    top: 0
}

.mobile_header .mobile_logo {
    width: 74px;
    height: 44px;
    margin-bottom: 8px;
    text-align: center
}

.mobile_header .mobile_logo img {
    width: inherit;
    height: inherit
}

.mobile_header .mobile_phone {
    position: fixed;
    right: 20px;
    top: 6px;
    width: 52px;
    height: 52px;
    text-align: center;
    line-height: 52px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
    background-color: #fff;
    color: #757474;
    border-radius: 50%;
    font-size: 30px
}

.mobile_menu {
    position: fixed;
    top: 0;
    width: 100%;
    padding-top: 65px;
    background: #fff;
    z-index: 94;
    display: none;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    flex-direction: column
}

.mobile_menu .map {
    flex-grow: 1
}

.mobile_menu .map .mapOverlay {
    height: calc(100% - 65px);
    padding-bottom: 65px;
    background-image: linear-gradient(-247deg, rgba(91, 164, 20, .83) 0, rgba(0, 89, 114, .83) 100%)
}

.mobile_menu .map .mapOverlay .content {
    padding-top: 30px
}

.mobile_menu .mobile_logo {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 65px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5)
}

.mobile_menu .mobile_logo a {
    margin-top: 4px
}

.mobile_menu .mobile_logo img {
    width: 74px;
    height: 44px;
    margin-top: -8px
}

.mobile_menu nav {
    list-style: none
}

.mobile_menu nav li {
    text-align: center
}

.mobile_menu nav li.active>.link,
.mobile_menu nav li.active>a {
    color: #af70c4
}

.mobile_menu nav li:last-child:after {
    display: none
}

.mobile_menu nav li .link,
.mobile_menu nav li a {
    position: relative;
    color: #7959be;
    font-family: Bebas;
    font-size: 20px;
    font-weight: 400;
    line-height: 60px;
    text-transform: uppercase;
    text-decoration: none
}

.mobile_menu nav li .link.active,
.mobile_menu nav li a.active {
    color: #af70c4
}

.mobile_menu nav li .link:active,
.mobile_menu nav li .link:focus,
.mobile_menu nav li a:active,
.mobile_menu nav li a:focus {
    border: none
}

.mobile_menu nav li .link i,
.mobile_menu nav li a i {
    margin-right: 5px;
    font-size: 16px
}

.mobile_menu nav li.has-sub {
    position: relative
}

.mobile_menu nav li.has-sub .car {
    position: relative;
    top: -2px;
    right: -15px;
    z-index: 5;
    transform: rotate(0deg);
    transition: .25s;
    color: #7959be
}

.mobile_menu nav li.has-sub .link.acitve,
.mobile_menu nav li.has-sub a.acitve,
.mobile_menu nav li.has-sub.active>.inner>.link,
.mobile_menu nav li.has-sub.active>.inner>.link.active,
.mobile_menu nav li.has-sub.active>.inner>a,
.mobile_menu nav li.has-sub.active>.inner>a.active {
    color: #af70c4
}

.mobile_menu nav li.has-sub ul {
    display: none;
    padding-top: 10px;
    padding-bottom: 10px
}

.mobile_menu nav li.has-sub ul li {
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    background-color: #f6f6f6
}

.mobile_menu nav li.has-sub ul li:after {
    display: none
}

.textarea label {
    top: 35px!important
}

.withGradient {
    position: relative;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background-color: transparent;
    transition-duration: 250ms
}

.withGradient:hover .bg {
    transform: rotate(180deg)
}

.withGradient:active .circle,
.withGradient:focus .circle {
    transform: scale(.96)
}

.withGradient.prev {
    margin-right: 25px
}

.withGradient .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: linear-gradient(-247deg, #92e542 0, #007496 100%);
    box-sizing: border-box;
    z-index: 1;
    transition-duration: 250ms
}

.withGradient .circle {
    position: absolute;
    left: 1px;
    top: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    z-index: 2;
    transition: transform 250ms ease-out, box-shadow 150ms ease-out 100ms
}

.withGradient .symbol {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #4daf6a;
    border-radius: 50%;
    background-image: linear-gradient(-247deg, #92e542 0, #007496 100%);
    box-sizing: border-box;
    z-index: 3;
    transition-duration: 250ms
}

.withGradient .symbol i {
    display: inline;
    font-size: 20px
}

@media only screen and (max-width:360px) {
    #map .mapOverlay .content .phone .buttons a,
    .map .mapOverlay .content .phone .buttons a {
        margin-bottom: 5px
    }
}

@media only screen and (max-width:1350px) {
    .usluga_up_block {
        min-height: 352px!important
    }
    .subservice_head .left .up_block .title h1 {
        color: #fff;
        width: 980px;
        font-family: Bebas;
        font-size: 76px;
        font-weight: 700;
        line-height: 76px
    }
    .slider_mobile {
        margin-top: 40px;
        display: flex;
        flex-wrap: wrap;
        margin-left: -15px;
        margin-right: -15px
    }
    .slider_mobile .left {
        box-sizing: border-box;
        word-wrap: break-word;
        margin-left: 15px;
        margin-right: 15px;
        width: calc(33.333333333333336% - 30px)
    }
    .slider_mobile .left .text {
        width: 80%
    }
    .slider_mobile .right {
        box-sizing: border-box;
        word-wrap: break-word;
        margin-left: 15px;
        margin-right: 15px;
        width: calc(66.66666666666667% - 30px)
    }
    .slider_mobile .right .project-link,
    .slider_mobile .right .slick-next,
    .slider_mobile .right .slick-prev {
        right: 15px
    }
    .slider_mobile .right .sliderm {
        width: 98%
    }
    .screen-left:nth-child(odd) .arrow .bg {
        border-color: #fff
    }
    .screen-left:nth-child(odd) .arrow .symbol {
        color: #fff;
        -webkit-text-fill-color: #fff
    }
    .screen-left .arrow .bg {
        border-color: #bf77c6
    }
    .screen-left .arrow .symbol {
        color: #bf77c6
    }
    .portfolio .left {
        margin-left: 15px
    }
    .portfolio .item .title .left {
        width: calc(33.333333333333336% - 30px)
    }
    .portfolio .item .title .right {
        margin-top: 0
    }
    .blocker {
        z-index: 95;
        padding: 0
    }
    #rassil {
        height: 356px
    }
    .modal {
        width: calc(100% - 30px)!important;
        padding-left: 0;
        padding-right: 0
    }
    .modal .close {
        top: 5px;
        right: 10px
    }
    .modal .form {
        width: calc(100% - 100px)!important;
        padding-left: 15px;
        padding-right: 15px
    }
    .modal .form .field {
        width: 100%!important
    }
    .modal .form .field i {
        display: none
    }
    .modal .form .field input,
    .modal .form .field textarea {
        width: 100%!important;
        margin-left: 30px!important
    }
    .modal .form .checkbox {
        margin-left: 55px!important
    }
    .modal .form .button {
        left: 30px!important
    }
    .screen-left:nth-child(odd) {
        background-image: url(../img/screen2.png)
    }
    .screen-left:nth-child(odd) .block .mob-title {
        background-image: unset;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset;
        color: #fff
    }
    .screen-left:nth-child(odd) .block .text {
        color: #fff
    }
    .screen-left:nth-child(odd) .block .more .button {
        box-shadow: 0 7px 18px rgba(56, 56, 56, .33);
        background: #fff;
        color: #9d68c2;
        box-sizing: border-box
    }
    .screen-left:nth-child(odd) .block .more .button:hover {
        background: #f6ebff
    }
    .screen-left:nth-child(odd) .block .more .button:active {
        color: #fff;
        background: #919191
    }
    .screen-left:nth-child(odd) .block .slider .slick-next,
    .screen-left:nth-child(odd) .block .slider .slick-prev {
        color: #fff;
        border-color: #fff
    }
    #menuToggle {
        display: none
    }
    .symbol {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #4daf6a;
        border-radius: 50%;
        background-image: linear-gradient(-247deg, #92e542 0, #007496 100%);
        z-index: 3
    }
    .symbol i {
        display: inline;
        font-size: 20px
    }
}

@supports (-webkit-overflow-scrolling:touch) {
    @media (orientation: landscape) {
        .mobile-screen .block .text.right {
            font-size: 11px
        }
    }
    .withGradient .symbol {
        -webkit-background-clip: unset;
        -webkit-text-fill-color: #4daf6a;
        background-image: none
    }
}

html.ios #full-review .item .body .up_info .right,
html.ios .reviews .slides .item .body .up_info .right,
html.macos #full-review .item .body .up_info .right,
html.macos .reviews .slides .item .body .up_info .right {
    line-height: 92px
}

html.ios .blog .filter label,
html.ios .our-works .filter label,
html.macos .blog .filter label,
html.macos .our-works .filter label {
    line-height: 55px
}

html.ios .blog .search input[name=query],
html.macos .blog .search input[name=query] {
    padding-top: 3px
}

@supports (-ms-ime-align:auto) {
    .callback_form .callback .form input[type=checkbox] {
        vertical-align: middle;
        margin-right: 5px
    }
    .withGradient .symbol {
        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset;
        background-image: none
    }
}

@media only screen and (min-width:1350px) {
    .our-works .works .item:hover .logo {
        transform: scale(1)
    }
    .our-works .works .item .logo {
        transform: scale(.9)
    }
}

@media only screen and (max-height:850px) {
    .our-works .works .item .bottom_block {
        display: none
    }
}

@media only screen and (min-width:1350px) and (max-height:850px) {
    .our-works .works .item .skeleton .up {
        width: 80%;
        height: 80px;
        background: #fff;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 0;
        animation-name: skeletonAnimation;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear
    }
    .our-works .works .item .skeleton .logos {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 130px;
        animation-name: skeletonAnimation;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear
    }
    .our-works .works .item .skeleton .bottom {
        width: 80%;
        max-width: 440px;
        height: 120px;
        background: #fff;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 0;
        animation-name: skeletonAnimation;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear
    }
    .our-works .works .item .logo {
        margin-top: -50px!important
    }
    .our-works .works .item .up_block .text {
        display: none
    }
}

@media only screen and (max-height:850px) {
    .our-works .works .item .skeleton .up {
        width: 80%;
        height: 80px;
        background: #fff;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 0;
        animation-name: skeletonAnimation;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear
    }
    .our-works .works .item .skeleton .logos {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 130px;
        animation-name: skeletonAnimation;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear
    }
    .our-works .works .item .skeleton .bottom {
        width: 80%;
        max-width: 440px;
        height: 120px;
        background: #fff;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 0;
        animation-name: skeletonAnimation;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear
    }
    .portfolio-graf .screen2 {
        background-position: top center
    }
    .portfolio-graf .screen2 .right_block {
        max-width: 740px!important;
        right: -70px
    }
    .burger_menu nav ul>li a {
        margin-top: 15px;
        margin-bottom: 15px
    }
    .our-works .works .item {
        width: calc(33.333333333333336% - 30px);
        height: 360px
    }
    .our-works .works .item .screen {
        width: calc(100% - 30px)
    }
    .our-works .works .item .up_block {
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px
    }
    .our-works .works .item .bottom_block {
        width: 100%
    }
    .our-works .works .item:hover .screen {
        transform: translateY(270px)
    }
    .main-slider {
        padding-top: 20px
    }
    .main-slider .title {
        font-size: 48px;
        line-height: 48px
    }
    .main-slider .slider {
        width: 650px;
        top: -20px
    }
    .main-slider .project-link,
    .main-slider .slick-next,
    .main-slider .slick-prev {
        margin-bottom: -90px;
        right: 0
    }
    .main-slider .numbers_pc {
        margin-top: 105px
    }
    .main-slider .numbers_pc .item .number {
        font-size: 150px
    }
    .main-slider .numbers_pc .item .icon {
        top: 20px;
        font-size: 40px
    }
}

@media only screen and (max-height:670px) {
    .main-slider .text {
        margin-top: 15px
    }
    .main-slider .slider {
        right: 85px
    }
    .main-slider .project-link,
    .main-slider .slick-next,
    .main-slider .slick-prev {
        margin-bottom: -90px;
        right: 15px
    }
}

/*@media only screen and (max-width:1880px) {
    .screen-left .block,
    .screen-right .block {
        width: 830px
    }
}*/

@media only screen and (max-width:1680px) {
    .screen-left,
    .screen-right {
        height: 1080px
    }
    .reviews .slides {
        width: 850px
    }
}

@media only screen and (max-width:1640px) {
    .our-works-slider .works-slider {
        width: 830px
    }
}

@media only screen and (max-width:1350px) {
    .our-works .works .item .up_block {
        margin-left: 15px;
        margin-right: 15px;
        width: calc(100% - 30px)
    }
    .our-works .works .item .logo {
        width: 105px;
        margin-top: -120px
    }
    .our-works .works .item .bottom_block {
        margin-left: 15px;
        margin-right: 15px;
        width: calc(100% - 30px)
    }
    .blog .filter .filt,
    .our-works .filter .filt {
        padding: 15px 20px
    }
    .blog .filter .filt .slick-list,
    .our-works .filter .filt .slick-list {
        padding-left: 13px;
        padding-right: 13px
    }
    .blog .filter .filt label,
    .our-works .filter .filt label {
        margin: 13px 4px
    }
    .blog .works .item,
    .our-works .works .item {
        width: calc(50% - 30px)
    }
    .blog .works .item .up_block,
    .our-works .works .item .up_block {
        transform: translateY(0)
    }
    .blog .works .item .screen,
    .our-works .works .item .screen {
        transform: translateY(250px)
    }
    .blog .works .item:hover .logo img,
    .our-works .works .item:hover .logo img {
        transform: scale(1)
    }
    .blog .filter .filt label.active .text {
        background-image: linear-gradient(135deg, #ff6f6f 0, #6464ff 50%, #ff6f6f 100%)
    }
    .blog .filter .filt label.active .text i {
        background-image: linear-gradient(135deg, #ff6f6f 0, #6464ff 100%)
    }
    .blog .items .item .left {
        order: 2;
        margin-top: 15px
    }
    .blog .items .item .left .title a {
        font-size: 30px
    }
    .blog .items .item .right {
        order: 1
    }
    .portfolio .left {
        margin-left: 15px
    }
    .portfolio .left h1 {
        margin-top: 5px
    }
    .portfolio .left .desc {
        margin-top: -5px
    }
    .portfolio .item .title .left {
        width: calc(33.333333333333336% - 30px)
    }
    .portfolio .item .title .right {
        margin-top: 0
    }
    .blocker {
        z-index: 100;
        padding: 0
    }
    #rassil {
        height: 356px
    }
    .modal {
        width: calc(100% - 30px)!important;
        padding-left: 0;
        padding-right: 0
    }
    .modal .close {
        top: 5px;
        right: 10px
    }
    .modal .form {
        width: calc(100% - 100px)!important;
        padding-left: 15px;
        padding-right: 15px;
        margin: 0 auto
    }
    .modal .form .field {
        width: 100%!important
    }
    .modal .form .field>i {
        display: none
    }
    .modal .form .field input,
    .modal .form .field textarea {
        width: 100%!important;
        margin-left: 0!important
    }
    .modal .form .checkbox,
    .modal .form .file {
        margin-left: 35px!important
    }
    .modal .form .checkbox a,
    .modal .form .file a {
        line-height: 25px
    }
    .modal .form .button {
        left: 0!important
    }
    .main-slider .project-link,
    .main-slider .slick-next,
    .main-slider .slick-prev {
        right: 140px;
        margin-bottom: 20px
    }
    .main-slider .wrapper {
        height: unset
    }
    .screen-left:nth-child(odd) {
        background-image: url(../img/screen2.png)
    }
    .screen-left:nth-child(odd) .block .mob-title {
        background-image: unset;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: #fff
    }
    .screen-left:nth-child(odd) .block .text {
        color: #fff
    }
    .screen-left:nth-child(odd) .block .more .button {
        box-shadow: 0 7px 18px rgba(56, 56, 56, .33);
        background: #fff;
        color: #9d68c2;
        box-sizing: border-box
    }
    .screen-left:nth-child(odd) .block .more .button:hover {
        background: #f6ebff
    }
    .screen-left:nth-child(odd) .block .more .button:active {
        color: #fff;
        background: #919191
    }
    .screen-left:nth-child(odd) .block .slick-next,
    .screen-left:nth-child(odd) .block .slick-prev {
        color: #fff;
        border-color: #fff
    }
    #menuToggle,
    .scene4 .svg {
        display: none
    }
    .screen-left .block .slider .item .more {
        bottom: 10px;
        right: 10px
    }
    .screen-left .block>.more {
        display: flex
    }
    .screen-left .block>.more .button {
        position: relative;
        margin-left: auto;
        bottom: 0!important
    }
    .numbers_mobile {
        margin-top: 20px;
        color: #fff;
        flex-wrap: wrap;
        display: flex!important;
        justify-content: space-between;
        box-sizing: border-box
    }
    .numbers_mobile .item {
        position: relative;
        width: 120px
    }
    .numbers_mobile .item .up {
        display: flex;
        flex-wrap: wrap
    }
    .numbers_mobile .item .up .number {
        font-family: Bebas;
        font-weight: 100;
        font-size: 70px;
        width: 60px
    }
    .numbers_mobile .item .up .icon {
        margin-left: 5px;
        color: #fbc76c;
        font-size: 40px;
        font-weight: 400;
        text-shadow: 0 8px 11px rgba(0, 0, 0, .34);
        margin-top: 15px
    }
    .numbers_mobile .item .down .tip {
        position: relative;
        font-size: 18px;
        font-family: 'Open Sans', sans-serif;
        text-transform: uppercase;
        line-height: 24px;
        font-weight: 300;
        align-self: flex-end;
        margin-left: 0
    }
    .numbers_pc {
        display: none!important
    }
    .main-slider .numbers_pc .item {
        width: 130px
    }
    .mobile {
        display: block
    }
    .pc {
        display: none!important
    }
    .screen0 {
        height: unset!important
    }
    .main-slider {
        padding-top: 20px;
        height: unset;
        padding-bottom: 20px;
        display: block
    }
    .main-slider:after {
        height: 100%
    }
    .main-slider .title {
        width: 100%;
        font-size: 46px;
        line-height: 46px;
        margin-left: 0;
        margin-top: 20px
    }
    .main-slider .text {
        width: unset;
        height: unset;
        margin-left: 0;
        margin-top: 0;
        text-align: left
    }
    .main-slider .slider {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        position: absolute;
        right: 15px;
        top: 15px
    }
    .main-slider .slider:after {
        content: "";
        display: table;
        clear: both
    }
    .main-slider .numbers_mobile,
    .main-slider .numbers_pc {
        margin-top: 20px
    }
    .main-slider .numbers_pc .item .number {
        font-size: 74px;
        width: unset
    }
    .main-slider .numbers_pc .item .tip {
        font-size: 10px;
        line-height: 12px
    }
    .main-slider .numbers_pc .item .icon {
        right: -5px;
        bottom: 46px;
        left: unset;
        font-size: 40px
    }
    .mobile-screen {
        height: unset
    }
    .mobile-screen .block {
        width: 100%;
        top: unset;
        margin-top: unset;
        padding-top: 35px;
        padding-bottom: 85px
    }
    .mobile-screen .block .more .button {
        bottom: 35px
    }
    .mobile-screen .block .mob-title {
        background-image: linear-gradient(-247deg, #bf77c6 0, #6751bc 100%);
        background-clip: text;
        color: #fff;
        font-family: Bebas;
        font-size: 36px;
        font-weight: 700;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: right;
        float: right;
        padding-top: 6px;
        margin-top: -6px
    }
    .mobile-screen .block .mob-title.left {
        text-align: left;
        float: left
    }
    .mobile-screen .block .text {
        margin-top: 20px;
        font-family: 'Century Gothic'
    }
    .mobile-screen .block .text.right {
        text-align: right
    }
    .mobile-screen .block .slider {
        margin-top: 30px;
        margin-left: -15px;
        margin-right: -15px
    }
    .mobile-screen .block .slider .slick-list {
        height: unset;
        padding-right: 0
    }
    .mobile-screen .block .slider .item {
        padding-top: 25px;
        height: unset;
        padding-bottom: 240px;
        margin-bottom: 30px;
        margin-right: 15px;
        margin-left: 15px
    }
    .mobile-screen .block .slider .item .more {
        bottom: 0
    }
    .mobile-screen .block .slider .item .mockup,
    .mobile-screen .block .slider .item:hover .mockup {
        transform: unset
    }
    .mobile-screen .block .slider .item:hover .more {
        bottom: 10px
    }
    .mobile-screen .block .slider .item:hover .svg {
        transform: scale(1.16)
    }
    .mobile-screen .block .slider .item .title {
        font-size: 28px!important;
        line-height: unset!important
    }
    .mobile-screen .block .slider .item .img {
        width: 90px
    }
    .mobile-screen .block .slider .item .bottom_block {
        width: unset;
        padding-right: 15px;
        height: 80px
    }
    .mobile-screen .block .slider .item .bottom_block .price {
        bottom: -25px
    }
    .mobile-screen .block .slider .slick-prev {
        top: unset;
        bottom: -75px;
        left: 15px;
        width: 52px;
        height: 52px;
        border: 1px solid #bf77c6;
        color: #bf77c6;
        border-radius: 50%;
        font-size: 20px;
        opacity: .75;
        line-height: 52px;
        z-index: 3
    }
    .mobile-screen .block .slider .slick-next {
        top: unset;
        bottom: -75px;
        left: 85px;
        width: 52px;
        height: 52px;
        border: 1px solid #bf77c6;
        color: #bf77c6;
        border-radius: 50%;
        font-size: 20px;
        opacity: .75;
        line-height: 52px;
        z-index: 3
    }
    #scene .layer.bg {
        height: 600px
    }
    #scene .grad {
        height: 100%!important
    }
    .after_scene {
        top: 0
    }
    .after_scene .subtitle {
        font-size: 55px;
        line-height: 55px
    }
    .subservice_head .mockup {
        display: none
    }
    .subservice_head .left .up_block .img {
        width: 110px
    }
    .subservice_head .left .up_block .title {
        margin-left: 18px
    }
    .subservice_head .left .up_block .price {
        font-size: 19px;
        margin-left: 18px
    }
    .subservice_head .left .bottom_block {
        width: 100%
    }
    .portfolio {
        margin-top: 0;
        display: flex;
        flex-wrap: wrap;
        margin-left: -15px;
        margin-right: -15px
    }
    .portfolio h1 {
        margin-top: 40px
    }
    .portfolio .left {
        width: calc(100% - 30px)
    }
    .portfolio .left .desc {
        width: auto
    }
    .portfolio .left h1 {
        font-size: 36px
    }
    .portfolio .right {
        transform: translate(0, 0);
        width: 100%;
        margin: 20px 0 0;
        justify-content: center
    }
    .portfolio .right .item {
        width: 370px
    }
    .portfolio .right .item .desc {
        margin-left: 15px
    }
    .whyus {
        padding-top: 50px;
        background-repeat: unset
    }
    .whyus.service-type {
        padding-top: 110px
    }
    .whyus .items .left_block {
        position: relative;
        box-sizing: border-box;
        word-wrap: break-word;
        margin-left: 15px;
        margin-right: 15px
    }
    .whyus .items .left_block .text {
        width: 100%
    }
    .whyus .items .item {
        order: 1;
        justify-content: center;
        margin-bottom: 30px
    }
    .pricetable {
        padding-top: 120px;
        padding-bottom: 116px
    }
    .pricetable .id {
        display: none
    }
    .pricetable .left .button {
        position: relative;
        margin-top: 20px;
        margin-bottom: 20px
    }
    .pricetable .content .left .text {
        width: 100%
    }
    .pricetable .content .right .foot .text {
        font-size: 16px
    }
    .pricetable .content .right .foot .sum {
        font-size: 17px;
        text-align: center
    }
    .pricetable .content .right .foot .button {
        color: #13b2d6;
        font-family: Bebas;
        font-size: 16px;
        font-weight: 700;
        border: none;
        box-shadow: unset;
        margin-right: 10px
    }
    .pricetable thead tr th {
        font-size: 25px!important;
        padding-left: 5px!important;
        text-align: center
    }
    .pricetable tbody tr td {
        padding-left: 15px!important
    }
    .pricetable tbody tr td:nth-child(1) {
        font-size: 16px!important
    }
    .pricetable tbody tr td:nth-child(2) {
        min-width: 100px;
        font-size: 16px!important
    }
    .pricetable tbody tr td .checkmark {
        left: 5px!important
    }
    .scheme {
        padding-bottom: 30px
    }
    .scheme .items {
        padding-top: 30px;
        justify-content: space-around
    }
    .scheme .items .right_block {
        position: relative;
        top: 0;
        right: 15px;
        width: 100%;
        margin-bottom: 20px
    }
    .scheme .items .right_block .text {
        display: none
    }
    .scheme .items .item {
        padding-left: 5px;
        height: 120px;
        width: 290px
    }
    .scheme .items .item.empty {
        display: none
    }
    .scheme .items .item .right {
        width: 75%
    }
    .our-works-slider {
        padding-top: 86px;
        padding-bottom: 50px
    }
    .our-works-slider .left_side {
        position: relative;
        right: unset;
        width: 100%
    }
    .our-works-slider .left_side .title {
        text-align: right
    }
    .our-works-slider .left_side .title-wrap {
        display: flex;
        justify-content: flex-end
    }
    .our-works-slider .left_side .text {
        text-align: right
    }
    .our-works-slider .left_side .button {
        display: none
    }
    .our-works-slider .works-slider {
        width: 100%;
        margin: unset;
        margin-top: 20px
    }
    .our-works-slider .works-slider .work-item {
        margin-left: 15px;
        margin-right: 15px;
        height: 300px
    }
    .our-works-slider .works-slider .slick-next {
        top: unset;
        bottom: -55px;
        left: 85px;
        width: 52px;
        height: 52px;
        border: 1px solid #00a6dd;
        color: #00a6dd;
        border-radius: 50%;
        font-size: 20px;
        opacity: .5;
        line-height: 52px;
        z-index: 3
    }
    .our-works-slider .works-slider .slick-prev {
        top: unset;
        bottom: -55px;
        left: 15px;
        width: 52px;
        height: 52px;
        border: 1px solid #00a6dd;
        color: #00a6dd;
        border-radius: 50%;
        font-size: 20px;
        opacity: .5;
        line-height: 52px;
        z-index: 3
    }
    .our-services .services .item:hover .subtitle {
        transform: translate(-7px, 8px)
    }
    .our-services .services .item:hover .mockup {
        transform: scale(.73)
    }
    .our-services .services .item .mockup {
        transform: scale(.7);
        transform-origin: right
    }
    .our-services .services .item .up_block {
        width: 60%
    }
    .our-services .services .item .up_block .subtitle {
        transform: translateY(-8px)
    }
    .our-services .services .item .up_block .subtitle .text {
        font-size: 55px;
        line-height: 35px
    }
    .our-services .services .item .up_block .subtitle .price {
        font-size: 16px;
        margin-top: 20px
    }
    .our-services .services .item .up_block .subtitle .price .currency-symbol i {
        font-size: 13px
    }
    .our-services .services .item .up_block .bottom_block {
        width: 90%;
        padding-right: 15px
    }
    .our-services .services .item .up_block .grad .button {
        position: relative;
        display: block!important;
        width: 120px!important;
        color: #9d68c2;
        background-image: none;
        background-color: #fff;
        box-shadow: 0 7px 18px rgba(56, 56, 56, .33);
        margin: 0 auto
    }
    .our-services .services .item .up_block .grad .button:hover {
        background: #f6ebff
    }
    .our-services .services .item .up_block .grad .button:active {
        color: #fff;
        background: #919191
    }
    .our-services .services .item .up_block .grad .dots {
        width: 100%;
        left: 0;
        background-position: right center;
        background-repeat: no-repeat
    }
    .portfolio-site .wrapper {
        padding-top: .02px
    }
    .portfolio-site .screen0 {
        padding-bottom: 160px
    }
    .portfolio-site .screen0 .logo {
        margin-top: 80px
    }
    .portfolio-site .screen0 .type {
        position: static;
        font-size: 15px!important;
        margin-top: 40px;
        top: 210px
    }
    .portfolio-site .screen0 .title {
        font-size: 90px;
        position: relative;
        top: 0;
        margin-top: 85px
    }
    .portfolio-site .screen2 {
        padding-bottom: 130px
    }
    .portfolio-site .screen2>.wrapper {
        display: flex
    }
    .portfolio-site .screen2 .left_block {
        width: 40%;
        padding-top: 23px
    }
    .portfolio-site .screen2 .left_block .block {
        width: 100%;
        max-width: unset;
        margin-top: 27px
    }
    .portfolio-site .screen2 .left_block .block .text {
        margin-top: 15px
    }
    .portfolio-site .screen2 .left_block .price {
        color: #90b7df;
        font-family: 'Century Gothic';
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        margin-top: 40px
    }
    .portfolio-site .screen2 .right_block {
        width: 70%;
        margin-top: -110px;
        position: relative;
        top: unset;
        right: unset;
        max-width: 700px
    }
    .portfolio-site .screen2 .right_block .price {
        display: none;
        color: #90b7df;
        font-family: 'Century Gothic';
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        margin-top: 40px
    }
    .portfolio-site .screen3 {
        padding-top: 30px;
        padding-bottom: 60px
    }
    .portfolio-site .screen3 .content {
        width: 100%;
        justify-content: center
    }
    .portfolio-site .screen3 .content .center {
        margin-bottom: 60px;
        width: 100%
    }
    .portfolio-site .screen3 .content .font {
        width: 103px;
        height: 103px;
        margin-left: 15px;
        margin-right: 15px
    }
    .portfolio-site .screen3 .content .font .first-font {
        font-size: 125px;
        top: -60px
    }
    .portfolio-site .screen3 .content .font .name {
        font-size: 12px;
        bottom: 15px
    }
    .portfolio-site .screen3 .content .colors {
        margin-top: 35px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center
    }
    .portfolio-site .screen3 .content .colors .round {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        box-shadow: 0 3px 5px rgba(211, 211, 211, .2);
        background-color: #fff;
        border-radius: 50%;
        position: relative;
        margin-left: 8px;
        margin-right: 8px
    }
    .portfolio-site .screen3 .content .colors .round .color {
        width: 50px;
        height: 50px;
        background-color: #ddd;
        border-radius: 50%;
        position: relative
    }
    .portfolio-site .screen3 .content .colors .round .hex {
        position: absolute;
        bottom: -30px;
        color: #90b7df;
        font-family: 'Century Gothic';
        font-size: 16px;
        font-weight: 400
    }
    .portfolio-site .screen4 {
        min-height: 820px
    }
    .portfolio-site .screen4 .cardslider {
        transform: scale(.8);
        transform-origin: right top
    }
    .portfolio-site .screen5 {
        padding-top: 130px;
        padding-bottom: 130px
    }
    .portfolio-site .screen5 .view .left .title {
        padding-left: 30px;
        padding-right: 30px
    }
    .portfolio-site .screen5 .view .left .menu {
        padding-left: 30px;
        padding-right: 30px;
        margin-top: 25px
    }
    .portfolio-site .screen5 .view .left .menu .point {
        margin-bottom: 15px
    }
    .portfolio-site .screen5 .view .right .screen {
        max-width: 800px;
        margin: 20px auto 0
    }
    .portfolio-site .screen5 .view .right .screen .top .buttons .left,
    .portfolio-site .screen5 .view .right .screen .top .buttons .right {
        width: calc(50% - 30px)
    }
    .portfolio-site .screen6 {
        padding-top: 0
    }
    .portfolio-site .screen6 .osob .title {
        text-align: center
    }
    .portfolio-site .screen6 .laststrip {
        padding: 30px 0 35px;
        box-sizing: border-box;
        height: unset
    }
    .portfolio-site .screen6 .laststrip .social {
        margin-bottom: 0!important
    }
    .portfolio-site .screen6 .laststrip .content {
        flex-direction: column;
        flex-wrap: unset;
        height: auto
    }
    .portfolio-site .screen6 .laststrip .content .btn {
        position: relative;
        margin-top: 25px;
        margin-bottom: 25px
    }
    .portfolio-site .screen6 .laststrip .content div {
        text-align: center;
        margin-bottom: 20px
    }
    .portfolio-site .screen6 .laststrip .content div i {
        margin-left: 10px;
        margin-right: 10px
    }
    .portfolio-site .screen6 .laststrip .content div:nth-child(1) {
        order: 3;
        margin-bottom: 0;
        margin-top: 0
    }
    .portfolio-site .screen6 .laststrip .content div:nth-child(2) {
        order: 2
    }
    .portfolio-site .screen6 .laststrip .content div:nth-child(3) {
        order: 1
    }
    .our_scheme {
        padding-top: 60px;
        padding-bottom: 10px
    }
    .our_scheme .content .left {
        order: 2;
        width: calc(100% - 30px)
    }
    .our_scheme .content .left .item {
        margin-bottom: 50px
    }
    .our_scheme .content .left .item .number {
        font-size: 123px;
        font-weight: 700;
        top: -87px;
        left: -10px
    }
    .our_scheme .content .left .item .block {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        background-color: #fff
    }
    .our_scheme .content .left .item .block .icon {
        padding-top: 40px
    }
    .our_scheme .content .left .item .block .body {
        width: 70%;
        padding-left: 35px
    }
    .our_scheme .content .right {
        width: calc(100% - 30px);
        order: 0
    }
    .our_scheme .content .right .title {
        text-align: center
    }
    .our_scheme .content .right .text {
        width: 100%;
        display: flex;
        flex-flow: row wrap
    }
    .our_scheme .content .right .text p {
        max-width: 33.33333333%;
        flex: 1 1 33.33333%;
        padding: 0 15px;
        text-align: justify;
        box-sizing: border-box
    }
    .our_scheme .content .right .text p:first-child {
        padding-left: 0
    }
    .our_scheme .content .right .text p:last-child {
        padding-right: 0
    }
    .subtitle.in-blog {
        font-size: 30px!important;
        line-height: 33px!important
    }
    .blog-item .content .left .share {
        margin-top: 25px
    }
    .blog-item .content .right {
        margin-top: 30px
    }
    #map .mapOverlay {
        width: 55%
    }
    .map .mapOverlay {
        width: 100%
    }
    .bread-wrapper .bread {
        margin-left: 15px
    }
    .mapOverlay .divider {
        width: 90%;
        height: 1px;
        background-color: rgba(255, 255, 255, .6);
        margin: 20px auto
    }
    .mapOverlay .content {
        width: 100%!important;
        left: 0;
        right: 0!important;
        margin: 0 auto
    }
    .mapOverlay .content h1 {
        font-size: 41px!important;
        margin-bottom: 0!important
    }
    .mapOverlay .content .margin {
        margin-top: 60px
    }
    .mapOverlay .content .phone .number {
        font-size: 14px!important
    }
    .mapOverlay .content .phone .sub {
        color: #fff;
        text-align: center;
        margin-top: 5px;
        margin-bottom: 5px
    }
    .mapOverlay .content .phone .buttons a {
        padding-left: 10px!important;
        padding-right: 10px!important
    }
    .mapOverlay .contacts div {
        padding: 0 20%
    }
    .our_team {
        padding-top: 25px
    }
    .our_team .title {
        font-size: 56px;
        text-align: center;
        width: 100%
    }
    .our_team .our_cards .cards {
        margin-top: 15px
    }
    .our_team .our_cards .cards .slick-list {
        padding: 10px 0 35px
    }
    .reviews {
        width: 100%;
        padding-top: 25px;
        padding-bottom: 60px
    }
    .reviews .wrapper {
        width: 100%!important;
        max-width: 100%;
        padding: 0 15px;
        position: relative;
        display: block
    }
    .reviews .block>.control {
        margin-left: 0;
        margin-top: 20px;
        top: 100%;
        left: 0
    }
    .reviews .slides {
        width: 100%
    }
    .reviews .slides .item {
        height: 405px
    }
    .reviews .right-box {
        float: left;
        width: auto;
        margin-top: 20px;
        padding-left: 0
    }
    .reviews .title {
        text-align: center;
        float: none;
        width: 100%;
        background-image: linear-gradient(-247deg, #92e542 0, #007496 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #fff;
        font-family: Bebas;
        font-size: 56px;
        font-weight: 700;
        line-height: 76px
    }
    .reviews .button {
        width: 160px;
        border: none;
        position: relative;
        margin: 20px auto 0;
        background-image: linear-gradient(-247deg, #70e4eb 0, #7b59f8 100%)
    }
    .about_company {
        padding-top: 25px;
        padding-bottom: 25px
    }
    .about_company .title {
        font-size: 56px;
        text-align: center;
        width: 100%
    }
    .portfolio-graf .screen1 {
        background-position: center;
        background-size: cover
    }
    .portfolio-graf .screen2 {
        padding-top: 270px;
        padding-bottom: 80px;
        background-position-x: center
    }
    .portfolio-graf .screen2 .left_block {
        padding-top: 20px
    }
    .portfolio-graf .screen2 .left_block .logo {
        text-align: center
    }
    .portfolio-graf .screen2 .left_block .block {
        width: 100%;
        max-width: unset
    }
    .portfolio-graf .screen2 .right_block {
        text-align: center;
        position: relative;
        top: unset;
        right: unset;
        margin: 20px auto 0
    }
    .portfolio-graf .screen3 {
        padding-top: 80px;
        padding-bottom: 80px;
        background-color: #f0f0f0;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center top 15%
    }
    .portfolio-graf .screen3 .first {
        width: calc(100% - 30px);
        max-width: 1140px;
        margin: 0 auto
    }
    .portfolio-graf .screen3 .first .text {
        margin-bottom: 80px
    }
    .portfolio-graf .screen3 .content {
        margin-top: 50px;
        justify-content: center
    }
    .portfolio-graf .screen3 .content .font {
        width: 103px;
        height: 103px
    }
    .portfolio-graf .screen3 .content .font .first-font {
        font-size: 100px;
        top: -50px;
        left: -10px
    }
    .portfolio-graf .screen3 .content .font .name {
        font-size: 12px;
        bottom: 15px
    }
    .portfolio-graf .screen3 .content .left {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center
    }
    .portfolio-graf .screen3 .content .left .colors {
        padding: 0
    }
    .portfolio-graf .screen3 .content .right {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center
    }
    .portfolio-graf .screen3 .content .right .colors {
        padding: 0
    }
    .portfolio-soc .screen1 {
        padding-bottom: 80px
    }
    .portfolio-soc .screen1 .left_block .caption {
        margin-bottom: 30px
    }
    .portfolio-soc .screen1 .left_block .logo {
        text-align: center
    }
    .portfolio-soc .screen1 .left_block .block {
        width: 100%;
        max-width: unset
    }
    .portfolio-soc .screen1 .right_block {
        position: relative;
        top: unset;
        right: unset;
        margin-top: 20px;
        text-align: center
    }
    .portfolio-soc .screen2 {
        padding-top: 60px;
        padding-bottom: 60px
    }
    .portfolio-soc .screen2 .rounds {
        margin-top: 90px
    }
    .portfolio-soc .screen2 .rounds .round {
        margin-bottom: 150px
    }
    .portfolio-soc .screen2 .scales {
        margin: -40px -14px 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap
    }
    .portfolio-soc .screen2 .scales .scale {
        position: relative;
        flex: 0 0 calc(25% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start
    }
    .portfolio-soc .screen2 .scales .scale:last-child {
        margin-right: 0
    }
    .portfolio-soc .screen2 .scales .scale .left {
        font-family: Bebas;
        font-size: 24px;
        font-weight: 400;
        text-align: center;
        color: #1a416a;
        margin: 20px 0 10px;
        display: block;
        width: 100%;
        order: 2
    }
    .portfolio-soc .screen2 .scales .scale .count {
        position: absolute;
        font-family: Bebas;
        font-size: 29px;
        font-weight: 400;
        left: 0;
        right: 0;
        text-align: center;
        color: #1a416a;
        top: 115px
    }
    html.ios .portfolio-soc .screen2 .scales .scale .count,
    html.macos .portfolio-soc .screen2 .scales .scale .count {
        top: 121px
    }
    .portfolio-soc .screen2 .scales .scale canvas {
        max-width: 100%;
        position: relative;
        margin: 0 auto
    }
    .portfolio-soc .screen2 .scales .scale .legend {
        display: block;
        position: relative;
        bottom: 0;
        width: 100%;
        order: 3;
        margin-top: auto
    }
    .portfolio-soc .screen2 .scales .scale .legend ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
        margin: 0 -2.5px
    }
    .portfolio-soc .screen2 .scales .scale .legend li {
        display: block;
        margin: 0 5px;
        color: #1a416a;
        font-family: "Century Gothic";
        text-align: center
    }
    .portfolio-soc .screen2 .scales .scale .legend .rect {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-right: 5px
    }
    #materials {
        margin-left: -20px
    }
    .laststrip {
        padding: 20px;
        box-sizing: border-box;
        height: unset
    }
    .laststrip .content {
        flex-direction: column;
        flex-wrap: unset;
        height: unset
    }
    .laststrip .content .btn {
        position: relative
    }
    .laststrip .content div {
        text-align: center;
        margin-bottom: 20px
    }
    .laststrip .content div i {
        margin-left: 10px;
        margin-right: 10px
    }
    .laststrip .content div:nth-child(1) {
        order: 3;
        margin-bottom: 0;
        margin-top: 17px
    }
    .laststrip .content div:nth-child(2) {
        order: 2
    }
    .laststrip .content div:nth-child(3) {
        order: 1;
        justify-content: center
    }
    .footer .content nav {
        margin-top: 20px
    }
    .footer .content nav ul {
        display: flex;
        flex-wrap: wrap
    }
    .footer .content nav ul li {
        float: left;
        margin-right: 75px
    }
    .footer .content nav ul li .link {
        font-size: 13px;
        line-height: 15px
    }
    .footer .content.second {
        margin-top: 40px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column
    }
    .footer .content.second div {
        margin-top: 5px;
        margin-bottom: 5px
    }
    .footer .content.second div:nth-child(1) {
        order: 1
    }
    .footer .content.second div:nth-child(2) {
        order: 3
    }
    .footer .content.second div:nth-child(3) {
        order: 2
    }
}

@media only screen and (max-width:1350px) and only screen and (max-height:850px) {
    .blog .works .item:hover .screen,
    .our-works .works .item:hover .screen {
        transform: translateY(250px)
    }
}

.callback_form_mobile,
.footer.mobile2 {
    display: none
}

@media only screen and (max-width:500px) {
    .slider_mobile .left .text {
        display: none
    }
    .slider_mobile .right {
        width: calc(100% - 30px)
    }
}

@media only screen and (max-width:1170px) {
    .portfolio-graf .screen3 {
        display: none
    }
    .subservice_head .left .up_block .title h1 {
        color: #fff;
        width: 780px;
        font-family: Bebas;
        font-size: 76px;
        font-weight: 700;
        line-height: 76px
    }
    .callback_form_mobile {
        display: block
    }
    .callback_form_pc {
        display: none
    }
    .callback_form {
        padding-top: 50px
    }
    .callback_form .callback {
        max-width: 500px;
        margin: 0 auto;
        padding-top: 20px
    }
    .callback_form .callback .text {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }
    .callback_form .callback .text .title {
        font-size: 36px;
        line-height: 41px;
        width: 50%
    }
    .callback_form .callback .text .manager {
        width: 108px;
        align-self: center
    }
    .callback_form .callback .form {
        width: 100%;
        margin-top: 30px
    }
    .callback_form .callback .form .field {
        width: 100%
    }
    .callback_form .callback .form .field input,
    .callback_form .callback .form .field textarea {
        width: 87%;
        font-size: 14px
    }
    .callback_form .callback .form .field label.field_error {
        right: 40px
    }
    .callback_form .callback .form .button {
        left: 0
    }
    .mobile-slim {
        display: block
    }
    .pc-slim {
        display: none
    }
    .portfolio-site .screen2 {
        padding-bottom: 30px
    }
    .portfolio-site .screen5 {
        padding-top: 40px;
        padding-bottom: 100px
    }
    .portfolio-site .screen5 .view .left .title {
        text-align: center;
        padding-left: 0;
        padding-right: 0
    }
    .portfolio-site .screen5 .view .left .slick-next,
    .portfolio-site .screen5 .view .left .slick-prev {
        top: 22px
    }
    .portfolio-site .screen5 .view .left .slick-next:before,
    .portfolio-site .screen5 .view .left .slick-prev:before {
        opacity: 1;
        transition-duration: 250ms
    }
    .portfolio-site .screen5 .view .left .slick-next:hover:before,
    .portfolio-site .screen5 .view .left .slick-prev:hover:before {
        color: #000;
        opacity: .75
    }
    .portfolio-site .screen5 .view .left .slick-prev {
        left: 5px
    }
    .portfolio-site .screen5 .view .left .slick-next {
        right: 5px
    }
    .portfolio-site .screen5 .view .left .point {
        width: 138px;
        height: 39px;
        font-size: 15px;
        background-color: #f5f5f5;
        box-shadow: 0 3px 5px rgba(211, 211, 211, .2);
        margin-left: 4px;
        margin-right: 4px
    }
    .portfolio-site .screen6 .bg-wrapper {
        padding-top: 60px
    }
    .portfolio-site .screen6 .bg-wrapper .osob {
        padding-bottom: 35px
    }
    .portfolio-site .screen6 .bg-wrapper .osob .text {
        margin-top: 20px
    }
    .portfolio-site .screen6 .pismo {
        padding: 30px 30px 25px
    }
    .portfolio-soc .screen2 .scales {
        justify-content: center;
        margin-bottom: -30px
    }
    .portfolio-soc .screen2 .scales .scale {
        flex-basis: calc(100% / 3 - 30px);
        margin-bottom: 30px
    }
    .portfolio-graf .screen2 .left_block .caption {
        margin-bottom: 40px
    }
    .portfolio-graf .screen2 .left_block .block {
        margin-top: 25px
    }
    .blog .filter .filt,
    .our-works .filter .filt {
        margin-left: 0;
        margin-right: 0
    }
    .mapOverlay a {
        height: 22px!important;
        line-height: 22px!important
    }
    .footer.mobile2 {
        padding-top: 0
    }
    .footer.pc2 {
        display: none
    }
    .footer .content nav {
        margin-top: 20px
    }
    .footer .content nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center
    }
    .footer .content nav ul li {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex: 1 1 33.33333333%;
        width: 33.33333333%;
        box-sizing: border-box;
        margin: 0;
        height: 47px
    }
    .footer .content nav ul li .link {
        font-size: 13px;
        line-height: 15px
    }
    .footer .content.second {
        margin-top: 40px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column
    }
    .footer .content.second div {
        margin-top: 5px;
        margin-bottom: 5px
    }
    .footer .content.second div:nth-child(1) {
        order: 1
    }
    .footer .content.second div:nth-child(2) {
        order: 3
    }
    .footer .content.second div:nth-child(3) {
        order: 2
    }
    .footer .left {
        width: calc(100% - 30px)
    }
    .footer .left:after {
        content: '';
        display: block;
        height: 1px;
        width: 100%;
        background: #343133;
        margin-top: 15px;
        margin-bottom: 15px
    }
    .footer .left .second,
    .footer .left .third {
        display: none!important
    }
    .footer .right {
        width: calc(100% - 30px);
        text-align: center
    }
    .footer .right .social {
        float: unset;
        margin: -20px auto 0;
        width: 124px
    }
    .footer .right .askQuestion {
        display: none
    }
    .footer .right .cont:nth-child(1) {
        margin-bottom: 30px
    }
    .footer .right .cont:nth-child(2) {
        margin-bottom: 40px
    }
    .footer .right .cont:nth-child(2):after {
        content: '';
        display: block;
        height: 1px;
        width: 100%;
        background: #343133;
        margin-top: 15px;
        margin-bottom: 15px
    }
    .footer .links {
        margin-top: 30px;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        font-family: 'Century Gothic';
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        text-decoration: underline;
        color: #b4a0a9;
        text-align: center
    }
    .footer .links i {
        margin-right: 10px
    }
    .footer .links .second {
        margin-top: 30px;
        display: flex;
        justify-content: space-between
    }
    .footer .footlast .copy {
        width: 50%
    }
    .footer .askQuestion {
        float: unset
    }
    .footer.mobile2 {
        display: block
    }
    .mobile_header {
        display: flex;
        flex-wrap: wrap
    }
    .mobile_menu_opener {
        display: flex
    }
    .hat {
        display: none
    }
    .blog .search {
        width: 100%
    }
}

@media only screen and (max-width:960px) {
    .dop_mobile {
        display: block;
        color: #2a2929;
        font-family: "Century Gothic";
        font-size: 9px;
        font-weight: 400;
        margin-top: 20px;
        margin-bottom: 20px
    }
    .portfolio-site .screen0 .type {
        display: none!important
    }
    .subservice_head .left .up_block .title h1 {
        color: #fff;
        width: 600px;
        font-family: Bebas;
        font-size: 76px;
        font-weight: 700;
        line-height: 76px
    }
    .blog-item .content .right {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap
    }
    .blog-item .content .right .subblock {
        flex: 1 1 50%;
        max-width: 50%;
        box-sizing: border-box;
        position: relative
    }
    .blog-item .content .right .subblock:first-child {
        padding-right: 15px
    }
    .blog-item .content .right .subblock:first-child .title {
        float: left
    }
    .blog-item .content .right .subblock:first-child .links {
        text-align: left
    }
    .blog-item .content .right .subblock:first-child:after {
        content: ' ';
        position: absolute;
        top: 0;
        right: -.5px;
        width: 1px;
        height: 100%;
        background-color: rgba(0, 0, 0, .1)
    }
    .blog-item .content .right .subblock:nth-child(2) {
        padding-left: 15px
    }
    .blog-item .content .right .subblock:nth-child(2) .title {
        float: none
    }
    .blog-item .content .right .subblock:nth-child(2) .links {
        text-align: left
    }
    .blog-item .content .right .subblock.banner {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: center
    }
    .our-services .services .item {
        padding-top: 40px;
        padding-left: 15px;
        height: unset
    }
    .our-services .services .item .mockup,
    .our-services .services .item .svg {
        display: none
    }
    .our-services .services .item .up_block {
        width: 100%
    }
    .our-services .services .item .up_block .bottom_block {
        width: 100%;
        padding-right: 15px
    }
    .our-services .services .item .up_block .grad {
        position: relative;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to right, #96ffa7 0, #00a6dd 100%);
        z-index: 1;
        transition: .5s;
        margin-left: -15px;
        width: calc(100% + 15px);
        margin-top: 30px;
        padding-bottom: 52px
    }
    .our-services .services .item .up_block .grad .button {
        position: relative;
        display: block!important;
        width: 120px!important;
        color: #9d68c2;
        background-image: none;
        background-color: #fff;
        box-shadow: 0 7px 18px rgba(56, 56, 56, .33);
        margin: 0 auto
    }
    .our-services .services .item .up_block .grad .button:hover {
        background: #EDEDED
    }
    .our-services .services .item .up_block .grad .button:active {
        color: #fff;
        background: #919191
    }
    .our-services .services .item .up_block .grad .dots {
        height: 100%;
        top: 0;
        background-image: url(../img/our-service-dots.png)
    }
    .our-services .services .item .up_block .grad .specials {
        width: 100%;
        margin-left: 0;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box
    }
    .our-services .services .item .up_block .grad .specials .special {
        margin-left: 10px
    }
    .our-services .services .item .up_block .grad .specials .special:first-child {
        margin-left: 0
    }
    .our-services .services .item .up_block .grad .specials .special .text {
        margin-left: 25px
    }
    .our-services .services .item .up_block .right_info {
        right: 50%;
        bottom: 15px;
        transform: translateX(50%)
    }
    .our-services .services .item .up_block .right_info .small_text,
    .portfolio-site .screen2 .left_block .price {
        display: none
    }
    .portfolio-site .screen2 .right_block {
        width: 100%
    }
    .portfolio-site .screen2 .right_block img {
        display: block;
        max-width: 70%;
        margin: 20px auto 0
    }
    .portfolio-site .screen2 .right_block .price {
        display: block;
        margin-top: 15px
    }
    .portfolio-soc .screen2 .scales .scale {
        flex-basis: calc(50% - 30px);
        margin: 0 15px 30px
    }
}

@media only screen and (max-width:1150px) {
    #map .mapOverlay {
        width: 60%
    }
    .map .mapOverlay {
        width: 100%
    }
}

@media only screen and (max-width:1100px) {
    .main-slider .wrapper {
        height: unset
    }
    .whyus .items.content-left .left_block,
    .whyus .items.content-left .right_block {
        flex-basis: 100%;
        max-width: 100%
    }
    .whyus .items.content-left .right_block {
        order: 2
    }
    .whyus .items.content-left .item {
        flex-basis: 50%
    }
    .whyus .items.content-left .item,
    .whyus .items.content-left .item:nth-child(3),
    .whyus .items.content-left .item:nth-child(4) {
        margin-bottom: 50px
    }
    .whyus .items.content-left .item:nth-child(2n) {
        margin-left: 0
    }
    .whyus .items.content-left .item .left {
        margin-left: auto
    }
    .whyus .items.content-left .item .right {
        margin-right: auto
    }
    .whyus .items .item {
        flex-basis: 50%
    }
    .whyus .items .item:nth-child(2n) {
        margin-left: 0
    }
    .whyus .items .item .left {
        margin-left: auto
    }
    .whyus .items .item .right {
        margin-left: 20px;
        margin-right: auto
    }
    .whyus .items .left_block,
    .whyus .items .right_block {
        flex-basis: calc(100% - 30px);
        max-width: calc(100% - 30px)
    }
    .whyus .items .left_block {
        margin-bottom: 50px
    }
    .whyus .items .left_block .title {
        text-align: left
    }
    .whyus .items .left_block .text {
        text-align: justify
    }
    .whyus .items .left_block .button {
        display: none
    }
}

@media only screen and (max-width:990px) {
    #map .mapOverlay {
        width: 70%
    }
    .portfolio .right .item {
        width: 290px;
        padding-left: 10px
    }
    .portfolio .right .item .title {
        font-size: 40px;
        margin-left: 15px
    }
    .portfolio .right .item .title .name {
        font-size: 38px
    }
    .our-works .works .item {
        width: calc(100% - 30px)
    }
    .our-works .works .item .logo img {
        transform: scale(1)
    }
    .our-works .works .item .screen {
        margin-left: auto;
        margin-right: auto;
        transform: translateY(300px)
    }
    .our-works .works .item:hover .up_block {
        transform: translateY(0)
    }
    .our-works .works .item:hover .logo img {
        transform: scale(1)
    }
    .our-works .works .item:hover .screen {
        transform: translateY(300px)
    }
}

@media only screen and (max-width:960px) {
    .main-slider .project-link,
    .main-slider .slick-next,
    .main-slider .slick-prev {
        display: none
    }
    .blog-item .content .right {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap
    }
    .blog-item .content .right .subblock {
        flex: 1 1 50%;
        max-width: 50%;
        box-sizing: border-box;
        position: relative
    }
    .blog-item .content .right .subblock:first-child {
        padding-right: 15px
    }
    .blog-item .content .right .subblock:first-child .title {
        float: left
    }
    .blog-item .content .right .subblock:first-child .links {
        text-align: left
    }
    .blog-item .content .right .subblock:first-child:after {
        content: ' ';
        position: absolute;
        top: 0;
        right: -.5px;
        width: 1px;
        height: 100%;
        background-color: rgba(0, 0, 0, .1)
    }
    .blog-item .content .right .subblock:nth-child(2) {
        padding-left: 15px
    }
    .blog-item .content .right .subblock.banner {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: center
    }
    .portfolio-site .screen2>.wrapper {
        flex-direction: column
    }
    .portfolio-site .screen2 .left_block {
        width: auto
    }
    .portfolio-site .screen2 .right_block {
        max-width: 100%;
        margin-top: 0
    }
}

@media only screen and (max-width:960px) {
    .slider_mobile {
        margin-top: 40px;
        display: flex;
        flex-wrap: wrap;
        margin-left: -15px;
        margin-right: -15px
    }
    .slider_mobile .left {
        box-sizing: border-box;
        word-wrap: break-word;
        margin-left: 15px;
        margin-right: 15px;
        width: calc(100% - 30px)
    }
    .slider_mobile .left .text {
        width: unset
    }
    .slider_mobile .right {
        margin-top: 30px;
        box-sizing: border-box;
        word-wrap: break-word;
        margin-left: 15px;
        margin-right: 15px;
        width: calc(100% - 30px)
    }
}

@media only screen and (max-width:780px) {
    .blog .items .item .left .title {
        font-size: 40px;
        line-height: 40px
    }
    .blog .items .item .right {
        text-align: left
    }
    .blog .items .item .right .grad {
        width: 100%
    }
    .blog .items .item .right img {
        max-width: unset;
        width: 100%
    }
    .subservice_head .left .up_block .title h1 {
        color: #fff;
        width: 420px;
        font-family: Bebas;
        font-size: 56px;
        font-weight: 700;
        line-height: 56px
    }
    .whyus .items .item .left {
        flex-basis: 80px
    }
    .whyus .items .item .left i {
        font-size: 60px
    }
    .whyus .items .item .right {
        margin-left: 10px;
        width: calc(100% - 90px)
    }
    .our-services .services {
        justify-content: center
    }
    .our-services .services .item {
        width: 100%
    }
    .our-services .services .item .up_block {
        height: 100%
    }
    .our-services .services .item .up_block>.img {
        width: 60px;
        margin-top: -14px;
        margin-left: 5px;
        transform: translateY(20px)
    }
    .our-services .services .item .up_block .subtitle {
        margin-left: 15px!important;
        margin-top: 0;
        transform: translateY(0)
    }
    .our-services .services .item .up_block .subtitle .text {
        font-size: 26px;
        line-height: 25px
    }
    .our-services .services .item .up_block .subtitle .price {
        font-size: 16px;
        margin-top: 10px
    }
    .our-services .services .item .up_block .subtitle .price .currency-symbol i {
        font-size: 13px
    }
    .our-services .services .item .up_block .grad {
        margin-top: auto;
        padding-bottom: 55px
    }
    .our-services .services .item .up_block .grad .specials {
        margin-bottom: -15px
    }
    .our-services .services .item .up_block .grad .specials .special {
        margin-left: 0;
        margin-bottom: 15px
    }
    .our-services .services .item .up_block .grad .specials .special .text {
        margin-left: 10px;
        letter-spacing: -.5px;
        font-size: 10px
    }
    .our-services .services .item .up_block .right_info {
        bottom: 30px
    }
    .our-works-slider .works-slider .work-item .up_block {
        width: 100%
    }
    .our-works-slider .works-slider .work-item .logo,
    .our-works-slider .works-slider .work-item .screen,
    .our-works-slider .works-slider .work-item .up_block .text {
        display: none
    }
    .portfolio-graf .screen3 {
        background-image: none!important
    }
}

@media only screen and (max-width:720px) {
    .portfolio-site .screen5 {
        padding-bottom: 60px
    }
    .portfolio-site .screen6 .img-from-typography {
        overflow: hidden
    }
    .portfolio-site .screen6 .img-from-typography img {
        height: 120px;
        transform: translateX(-50%);
        left: 50%;
        position: relative;
        max-width: unset
    }
    .portfolio-site .screen6 .pismo .quote .caption {
        margin-left: 10px
    }
    .main-slider .slider {
        margin-top: 20px
    }
    .our-works .works .item .up_block .text {
        font-size: 12px
    }
    .slider {
        margin-top: 20px
    }
    .our-works .works .item {
        width: calc(100% - 30px)
    }
    .our_scheme .content .right .text p {
        flex-basis: 50%;
        max-width: 50%
    }
    .our_scheme .content .right .text p:last-child {
        max-width: 100%;
        flex-basis: 100%;
        margin-bottom: 80px
    }
}

@media only screen and (max-width:629px) {
    .our_cards .cards .slick-slide:not(.slick-current) .card:hover .front {
        transform: rotateY(0deg)
    }
    .our_cards .cards .slick-slide:not(.slick-current) .card:hover .back {
        transform: rotateY(180deg)
    }
}

@media only screen and (max-width:600px) {
    .subservice_head .left .up_block .img {
        width: 90px
    }
    .subservice_head .left .up_block .title h1 {
        color: #fff;
        width: 300px;
        font-family: Bebas;
        font-size: 36px;
        font-weight: 700;
        line-height: 36px
    }
    .our-works .works .item .up_block .title a {
        font-size: 24px
    }
    .numbers_mobile {
        width: 290px;
        margin: 20px auto 0
    }
    .numbers_mobile .item .up .icon {
        margin-left: 0
    }
    .numbers_mobile .item .up .number {
        line-height: 70px
    }
    .numbers_mobile .item .down .tip {
        font-size: 13px;
        line-height: 16px
    }
    #map [class$='-zoom'] {
        display: none
    }
    #map .mapOverlay {
        width: 100%!important
    }
    .after_scene .items {
        flex-direction: column
    }
    .after_scene .items .item {
        flex-basis: 100%;
        max-width: 100%
    }
    .after_scene .items .item:first-child {
        margin-right: 15px
    }
    .after_scene .items .item:last-child {
        margin-left: 15px
    }
    .our_team .group {
        align-items: flex-start;
        flex-direction: column
    }
    .our_team .group button:not(.arrow) {
        padding: 0 20px;
        letter-spacing: -.2px;
        margin-top: 35px;
        align-self: center
    }
    .our_cards .cards .slick-list {
        padding-bottom: 35px
    }
    .our_scheme .content .left .item .block {
        justify-content: left;
        padding-right: 15px;
        flex-direction: column
    }
    .our_scheme .content .left .item .block .icon {
        padding-top: 35px;
        margin-left: 55px
    }
    .our_scheme .content .left .item .block .body {
        padding: 15px 35px 15px 55px;
        width: 100%;
        box-sizing: border-box
    }
    .our_scheme .content .right .text p {
        flex-basis: 100%;
        max-width: 100%;
        padding: 0
    }
    .blog-item .content .right {
        flex-direction: column;
        flex-wrap: nowrap
    }
    .blog-item .content .right .subblock {
        flex: 1 1 100%;
        max-width: 100%
    }
    .blog-item .content .right .subblock:first-child {
        padding-right: 0
    }
    .blog-item .content .right .subblock:first-child:after {
        display: none
    }
    .blog-item .content .right .subblock:last-child {
        padding-left: 0
    }
    .whyus .items.content-left .left_block,
    .whyus .items.content-left .right_block {
        flex-basis: 100%;
        max-width: 100%
    }
    .whyus .items.content-left .right_block {
        order: 2
    }
    .whyus .items.content-left .item {
        flex-basis: 100%
    }
    .whyus .items.content-left .item,
    .whyus .items.content-left .item:nth-child(3),
    .whyus .items.content-left .item:nth-child(4) {
        margin-bottom: 30px
    }
    .whyus .items .item {
        flex-basis: 100%
    }
    .whyus .items .item .right {
        margin-left: 30px
    }
    .portfolio-soc .screen2 .scales .scale {
        flex-basis: calc(100% - 30px)
    }
}

@media only screen and (max-width:500px) {
    .our-works .works .item .screen {
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px
    }
}

@media only screen and (max-width:480px) {
    .pricetable .content .left .title,
    .whyus .items.content-left .left_block .title {
        font-size: 44px;
        line-height: 44px
    }
    .pricetable .content .right .foot .sum {
        width: 100%!important
    }
    .our-works-slider .left_side .title {
        font-size: 44px;
        line-height: 44px
    }
    .subservice_head .left .up_block .img {
        display: none
    }
    .subservice_head .left .up_block .title {
        margin-left: 0
    }
    .subservice_head .left .up_block .title h1 {
        color: #fff;
        width: 100%;
        font-family: Bebas;
        font-weight: 700
    }
    .subservice_head .left .up_block .price {
        margin-left: 0
    }
    .after_scene .subtitle {
        font-size: 36px;
        line-height: 36px
    }
    .subservice_head .left .up_block .img {
        width: 90px
    }
    .subservice_head .left .up_block .title h1 {
        font-size: 36px;
        line-height: 36px
    }
    .screen-left .block .slider .item .up_block .img {
        width: 70px
    }
    .screen-left .block .slider .item .up_block .title {
        font-size: 24px!important
    }
    .screen-left .block .slider .item .bottom_block {
        margin-top: 10px
    }
    .screen-left .block .slider .item .bottom_block .price {
        bottom: -50px
    }
    .screen-left:nth-child(odd) .block .more .button {
        font-size: 16px
    }
    .screen-left:nth-child(even) .block .more .button {
        font-size: 16px
    }
    .mobile-screen .block .slider .item {
        width: 290px
    }
    .mobile-screen .block .slider .item .svg {
        width: 290px;
        height: 200px
    }
    .arrow.withGradient.prev {
        margin-right: 15px
    }
    .blog .filter .filt label,
    .our-works .filter .filt label {
        flex-basis: 100%
    }
    .modal .form {
        width: calc(100% - 60px)!important
    }
    .whyus .items .item {
        width: calc(100% - 30px)
    }
    .callback_form .callback .form .field label.field_error {
        right: 20px
    }
    .pricetable table {
        border: 0;
        padding-bottom: 20px
    }
    .pricetable .content .right table tbody tr td .checkmark {
        top: 12px!important;
        transform: none!important
    }
    .pricetable .content .right .foot .button {
        margin-right: 0
    }
    .pricetable table thead {
        display: none
    }
    .pricetable table tr {
        margin-bottom: 20px;
        padding-bottom: 40px;
        display: block;
        border-bottom: 1px dotted #ccc
    }
    .pricetable table tr:first-child {
        padding-top: 20px
    }
    .pricetable table tr:last-child {
        border-bottom: none
    }
    .pricetable table td {
        display: block;
        text-align: center;
        font-size: 13px;
        padding: 7.5px!important
    }
    .pricetable table td:last-child {
        border-bottom: 0
    }
    .pricetable table td:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: 700
    }
    .pricetable .content .right .foot tr {
        padding-bottom: 20px;
        margin-bottom: 0
    }
    .blog-item .banner img {
        width: 100%
    }
    .portfolio-site .screen2 .right_block img {
        max-width: 90%
    }
    .portfolio-graf .screen3 {
        padding-bottom: 40px
    }
}

@media only screen and (max-width:450px) {
    .our-works .works .item .bottom_block,
    .our-works .works .item .up_block {
        margin-left: 0;
        margin-right: 0;
        width: 100%
    }
}

@media only screen and (max-width:400px) {
    .reviews .slides .item .header .dots {
        background-size: auto 100%;
        background-position: left 30px top 0
    }
    .reviews .slides .item .body .up_info {
        top: 18px;
        right: 25px
    }
    .reviews .slides .item .body .bottom_block {
        padding-left: 25px;
        padding-right: 25px
    }
}

@media only screen and (max-width:540px) {
    .usluga_divider {
        display: block;
        width: 100%
    }
    .our-services .services .item .up_block .grad {
        margin-top: auto;
        padding-bottom: 125px
    }
    .our-services .services .item .up_block .grad .specials {
        justify-content: space-around
    }
    .whyus .items .item {
        flex-basis: 100%;
        max-width: 100%;
        margin: 0 auto 30px
    }
    .whyus .items .item .left {
        width: 90px
    }
}

@media only screen and (max-width:1600px) {
    .screen-left,
    .screen-right {
        height: 900px
    }
    .portfolio-site .screen0 .type {
        color: #fff;
        font-family: 'Open Sans';
        font-size: 28px;
        font-weight: 400;
        text-transform: uppercase;
        margin-top: 40px;
        text-align: center
    }
}

@media only screen and (max-width:1440px) {
    .screen-left,
    .screen-right {
        height: 900px
    }
    .portfolio-site .screen0 {
        height: 700px;
        background-size: cover;
        background-position: bottom center
    }
    .portfolio-site .screen0 .type {
        color: #fff;
        font-family: 'Open Sans';
        font-size: 28px;
        font-weight: 400;
        text-transform: uppercase;
        margin-top: 40px;
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box
    }
    .portfolio-site .screen2 {
        background-position: top center
    }
}

@media only screen and (max-width:1366px) {
    .screen-left,
    .screen-right {
        height: auto
    }
}

@media only screen and (max-width:920px) {
    .screen-left,
    .screen-right {
        height: unset
    }
}

@media only screen and (min-width:601px) and (max-width:700px) {
    .reviews .slides .item {
        height: 500px
    }
}

.clear::after {
    display: block;
    content: "";
    clear: both
}

.mce .hint-for-uikit {
    display: block;
    font-family: Bebas!important;
    font-size: 20px!important;
    margin-top: 25px!important;
    margin-bottom: 15px!important;
    text-transform: uppercase
}

.mce b,
.mce h1,
.mce h2,
.mce h3,
.mce h4,
.mce h5,
.mce h6,
.mce i,
.mce li,
.mce p,
.mce strong,
.mce u {
    color: #2a2929
}

.mce h1,
.mce h2,
.mce h3,
.mce h4,
.mce h5,
.mce h6 {
    font-family: Bebas
}

.mce h1 {
    font-size: 76px;
    margin: 15px 0
}

.mce h2 {
    font-size: 46px;
    margin: 15px 0
}

.mce h3 {
    font-size: 34px;
    margin: 15px 0
}

.mce h4 {
    font-size: 26px;
    margin: 15px 0
}

.mce h5 {
    font-size: 20px;
    margin: 15px 0
}

.mce h6 {
    font-size: 14px;
    margin: 15px 0
}

.mce b,
.mce i,
.mce li,
.mce p,
.mce strong,
.mce u {
    font-family: 'Century Gothic';
    font-size: 15px
}

.mce p {
    margin-top: 15px;
    margin-bottom: 15px
}

.mce b,
.mce strong {
    font-weight: 700
}

.mce em,
.mce i {
    font-style: italic
}

.mce u {
    text-decoration: underline
}

.mce ol,
.mce ul {
    margin-top: 15px;
    margin-bottom: 15px
}

.mce ol li,
.mce ul li {
    margin-bottom: 10px
}

.mce ol li ol,
.mce ol li ul,
.mce ul li ol,
.mce ul li ul {
    margin-top: 10px
}

.mce ul {
    padding-left: 20px
}

.mce ul li {
    list-style: disc
}

.mce ol {
    padding-left: 0;
    counter-reset: li
}

.mce ol li {
    list-style: none
}

.mce ol li:before {
    content: counters(li, ".") ". ";
    counter-increment: li;
    display: inline-block;
    width: auto;
    margin-right: 7px
}

.mce ol li ol li:before {
    margin-left: 27px
}

.mce a {
    text-decoration: underline
}

.mce iframe,
.mce img {
    margin-top: 15px;
    margin-bottom: 15px
}

.mce table {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px
}

.mce thead {
    background-image: linear-gradient(-247deg, #beeda1 0, #35bdc5 180%)
}

.mce thead th {
    color: #2c262d;
    font-family: Calibri;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    border-top: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3
}

.mce th {
    padding: 15px 0;
    border-left: 1px solid #c3c3c3;
    border-right: 1px solid #c3c3c3
}

.mce tr {
    border-top: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3
}

.mce td {
    color: #2c262d;
    font-family: Calibri;
    font-size: 15px;
    font-weight: 400;
    border-left: 1px solid #c3c3c3;
    border-right: 1px solid #c3c3c3;
    text-align: center;
    padding: 12px 0
}

.mce tr:nth-child(even) {
    background-color: #fff
}

.mce .tvtable {
    margin-bottom: 25px
}
.oldPriceD{
    position: relative;
    display: inline block;
    font-size: 16px;
    color: red;
}
.oldPriceD:after{
    content: ' ';
    position: absolute;
    width: 100%;
    height: 2px;
    top: calc(50% - 1px);
    left: 0;
    background: red;
}
strong{
    font-weight: 700;
}
em{
    font-style: italic;
}