@-webkit-keyframes swinging_bg {
    0% {background-position: 50% 0%;}
    50% {background-position: 50% 100%;}
    100% {background-position: 50% 0%;}
}
@keyframes swinging_bg {
    0% {background-position: 50% 0%;}
    50% {background-position: 50% 100%;}
    100% {background-position: 50% 0%;}
}

a {
    text-decoration: none;
    color: #0078d8;
}
a.underscored {text-decoration: underline;}
a.underscored:hover {text-decoration: none;}
a.colored {color: #0078d8 !important;}
h1, .like_h1, .header__site-name {
    line-height: 50px;
    margin: 20px 0px;
    padding: 0px 10px;
    font-size: 44px;
    font-weight: normal;
    text-align: center;
}
h2, .like_h2 {
    line-height: 40px;
    margin: 20px 0px;
    font-size: 36px;
    font-weight: normal;
    text-align: center;
}
h3, .like_h3 {
    line-height: 32px;
    margin: 20px 0px;
    font-size: 28px;
    font-weight: normal;
    text-align: center;
}
h4, .like_h4 {
    line-height: 28px;
    margin: 20px 0px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
h5 {
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

h6 {
  font-size: 0.625rem;
  line-height: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.site {
    min-width: 320px;
    overflow: hidden;
}
.site.inactive {
    filter: blur(5px);
}

.inline-picture-item {display: inline-block; vertical-align: top; margin: 10px;}
.inline-picture-item-300 {width: 300px;}
.inline-picture-item a {display: block; border: 2px solid transparent; transition: 0.3s border-color;}
.inline-picture-item a:hover {border-color: #0078d8;}
.inline-picture-item img {max-width: 100%; display: block;}


/*HEADER*/
.top-banner {
    position: relative;
    height: 100vh;
    min-height: 450px;
    max-height: 650px;
    overflow: hidden;
    color: #ffffff;
}
.parallax-bg {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    min-width: 1080px;
    z-index: 1;
}
.parallax-backward {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    min-width: 1080px;
    z-index: 1;
}
.text-banner-caption {
    position: absolute;
    left: 0px;
    right: 0px;
    padding: 0px 10px;
    font-size: 0.8rem;
    background-color: rgba(255, 255, 255, 0.3);
}
.parallax-backward .text-banner-caption {
    top: 0px;
}
.parallax-bg .text-banner-caption {
    bottom: 0px;
}
.parallax-bg img, .parallax-backward img {
    display: block;
    width: 100%;
    height: auto;
}
.top-banner-line {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 70px;
    background-color: rgba(0, 0, 0, 0);
    z-index: 30;
}
.top-banner.sticked .top-banner-line {
    position: fixed;
    background-color: rgba(0, 0, 0, 1);
}
.top-banner-logo {
    position: absolute;
    left: 20px;
    top: 0px;
    width: 190px;
    height: 70px;
    background-image: url(/files/img/logo_full.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 50% 50%;
}
.top-banner-whatsapp {
    position: absolute;
    right: 380px;
    top: 15px;
    width: 40px;
    height: 40px;
    background-image: url(/files/img/icons/whatsapp.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.top-banner-telegram {
    position: absolute;
    right: 320px;
    top: 15px;
    width: 40px;
    height: 40px;
    background-image: url(/files/img/icons/telegram.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.top-banner-phone {
    position: absolute;
    right: 20px;
    top: 10px;
    width: 290px;
    line-height: 50px;
    text-align: right;
    font-size: 40px;
    color: #ffffff;
    white-space: nowrap;
}
.top-banner-sitename {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 50%;
    width: 1140px;
    line-height: normal;
    margin: 0px auto 10px auto;
    text-align: center;
    font-size: 2.6rem;
    z-index: 20;
}
.top-banner-siteabout {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 50%;
    width: 670px;
    margin: 0px auto;
    text-align: center;
    z-index: 20;
}
.next-arrow {
    position: absolute;
    left: 50%;
    bottom: 40px;
    width: 70px;
    height: 20px;
    margin-left: -35px;
    background-image: url(/files/img/arrow_white.png);
    background-size: auto 70%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: 30;
    -webkit-animation: swinging_bg 2s linear infinite;
    animation: swinging_bg 2s linear infinite;
}
.easy-breadcrumb {
    width: 1140px;
    margin: 0px auto;
    padding: 20px 20px 5px 20px;
}
.homepage-link {
    display: inline-block;
    vertical-align: text-bottom;
    width: 23px;
    height: 23px;
    background-image: url(/files/img/icons.png);
    background-size: auto 300%;
    background-position: 45% 100%;
}

/*COMMON ELEMENTS*/
.site-block {
    opacity: 0;
    transition: 0.7s all;
    overflow: hidden;
}
.site-block.active {
    opacity: 1;
}
.appearance-item {
    opacity: 0;
    transition: 0.7s all;
}
.active .appearance-item {
    opacity: 1;
}
.to-left {
    transform: translateX(100px) translateY(0px) scale(1.2);
}
.to-right {
    transform: translateX(-100px) translateY(0px) scale(1.2);
}
.to-top {
    transform: translateX(0px) translateY(100px) scale(1.2);
}
.to-bottom {
    transform: translateX(0px) translateY(-100px) scale(1.2);
}
.to-center {
    transform: translateX(0px) translateY(0px) scale(0);
}
.active .to-left, .active .to-right, .active .to-top, .active .to-bottom, .active .to-center {
    transform: translateX(0px) translateY(0px) scale(1);
}
.site-block-white {
    color: #000000;
    background-color: #ffffff;
}
.site-block-white a {
    font-style: italic;
}
.site-block-black {
    color: #ffffff;
    background-color: #000000;
}
.site-block-black a {
    font-style: italic;
    color: #ffffff;
}
.site-text-inner {
    width: 1140px;
    margin: 0px auto;
}
.site-block-inner {
    position: relative;
    width: 1140px;
    margin: 0px auto;
    padding: 90px 0px 130px 0px;
    overflow: hidden;
}
.site-block-center {
    text-align: center;
}
.phrase-3 {
    display: inline-block;
    vertical-align: top;
    width: 350px;
}
.phrase-title {
    margin-bottom: 10px;
    padding-bottom: 40px;
    font-size: 0.9rem;
    font-weight: bold;
    background-image: url(/files/img/arrow_black.png);
    background-size: auto 20px;
    background-repeat: no-repeat;
    background-position: 50% 100%;
}
.phrase-text {
    font-size: 0.8rem;
}
.attention {
    text-align: right;
    font-size: 0.9rem;
    font-style: italic;
}
.remark {
    font-size: 0.8rem;
    font-style: italic;
}
.code-example {
    position: relative;
    line-height: 30px;
    border: 1px solid #999999;
    text-indent: 60px;
    font-family: monospace;
    background-color: #dddddd;
}
.code-example:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 30px;
    height: 30px;
    background-image: url(/files/img/icons.png);
    background-size: auto 300%;
    background-position: 40% 0%;
}
.notice {
    margin: 10px 0px;
    padding: 10px 20px;
    text-align: center;
    color: #ffffff;
    background-color: #0078d8;
}
.illustration {
    text-align: center;
}
.illustration img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.phrase-1 {
    padding: 10px;
}
.phrase-1 p {
    text-align: justify;
    text-indent: 2em;
}
.phrase-1 ul {
    margin: 0px;
    padding: 0em 0em 0em 2em;
    list-style-position: inside;
    text-align: justify;
}
.next-button {
    position: absolute;
    right: 10px;
    bottom: 40px;
    height: 30px;
    line-height: 30px;
    padding: 10px 20px 10px 40px;
    border: 2px solid #000000;
    box-sizing: content-box;
    color: #000000;
    white-space: nowrap;
}
.next-button:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 10px;
    width: 30px;
    height: 30px;
    background-image: url(/files/img/icons.png);
    background-size: auto 300%;
}
.next-button-to-advantages:before {background-position: 20% 0%;}
.next-button-to-prices:before {background-position: 15% 0%;}
.next-button-to-contacts:before {background-position: 30% 0%;}
.text-banner {
    position: relative;
    height: 500px;
    overflow: hidden;
}
.text-banner .text-banner-bg img {
    min-height: 500px;
}
.form-order {
    padding: 10px;
    background-color: #656565;
    background-image: url(/files/img/bg/form.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 50%;
}
.form-title {
    line-height: normal;
    padding: 10px;
    text-align: center;
    font-size: 1.5rem;
}
.form-field {
    margin: 10px 0px;
}
.form-field input {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0px 10px 0px 40px;
    border: 0px;
    box-sizing: border-box;
}
.form-field textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 120px;
    max-height: 200px;
    min-height: 100px;
    line-height: 20px;
    padding: 10px;
    border: 0px;
    box-sizing: border-box;
    font-size: 14px;
}
.form-field.require.field-error input, .form-field.require.field-error textarea {
    outline: 2px solid #8a060c;
}
.form-buttons {
    text-align: center;
}
.form-send-button {
    position: relative;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0px 10px 0px 40px;
    border: 2px solid #000000;
    box-sizing: content-box;
    text-align: left;
    cursor: pointer;
    background-color: #ffffff;
}
.form-send-button:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 30px;
    height: 30px;
    background-image: url(/files/img/icons.png);
    background-size: auto 300%;
    background-position: 25% 0%;
}
.form-error {
    text-align: center;
    font-size: 14px;
    color: #8a060c;
}
.call-us-better {
    padding: 0px 5px;
    text-align: right;
    font-size: 16px;
}
.above-navigator {
    width: 1140px;
    margin: 0px auto;
    padding: 10px;
}
.above-navigator a {
    font-style: italic;
}


/*FOOTER*/
.contacts-block {line-height: 40px; padding: 60px 0px 30px 0px; text-align: center; font-size: 30px;}
.contacts-item {display: block; margin: 10px 0px; white-space: nowrap;}
.contacts-phone:before {content: ""; display: inline-block; width: 40px; height: 40px; margin-right: 5px; vertical-align: top; background-image: url(/files/img/icons.png);
	background-size: auto 300%; background-position: 10% 50%;
}
.contacts-email:before {content: ""; display: inline-block; width: 40px; height: 40px; margin-right: 5px; vertical-align: top; background-image: url(/files/img/icons.png);
	background-size: auto 300%; background-position: 5% 50%;
}
.site-footer-copyright {text-align: center; font-size: 12px; color: #656565;}


/*MESSAGES*/
.messages-shield {position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; cursor: pointer; z-index: 10000; background-color: rgba(255, 255, 255, 0.7);}
.messages-wrapper {position: fixed; left: 0px; right: 0px; top: 70px; bottom: 0px; width: 300px; height: 210px; margin: auto; padding: 20px; border: 3px double #000000;
	text-align: center; color: #000000; background-color: #ffffff; z-index: 10001;
}


/*SPECIAL PAGES*/
/*prices*/
.illustrated-point {position: relative; margin: 30px 0px;}
.illustrated-point-bg {position: relative; width: 100%; height: 0px; padding: 0% 0% 56.25% 0%;}
.illustrated-point-bg img {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9;}
.illustrated-point-icon {position: absolute; z-index: 10;}
.illustrated-point-icon img {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;}
.price-point-alone .illustrated-point-icon {left: 76%; right: 5.8%; top: 61.6%; bottom: 6.4%;}
.price-point-regular_office .illustrated-point-icon {left: 4.4%; right: 3.85%; top: 7%; bottom: 5.9%;}
.price-point-small_office .illustrated-point-icon {left: 36.9%; right: 3.8%; top: 7%; bottom: 60.3%;}
.price-point-middle_office .illustrated-point-icon {left: 3.5%; right: 3.8%; top: 40.2%; bottom: 8.9%;}
.price-point-big_office .illustrated-point-icon {left: 3.5%; right: 3.8%; top: 6%; bottom: 43.1%;}
.price-point-unclassified_office .illustrated-point-icon {left: 9.5%; right: 52.7%; top: 6%; bottom: 36.4%;}
.illustrated-point-text {position: absolute; line-height: 50px; text-align: center; text-shadow: 1px 1px 1px #000000, 1px 1px 5px #000000, 1px 1px 10px #000000;
	font-size: 32px; color: #ffffff; z-index: 11;
}
.price-point-alone .illustrated-point-text {left: 5%; right: 5%; top: 5%;}
.price-point-regular_office .illustrated-point-text {left: 5%; right: 5%; top: 20%;}
.price-point-small_office .illustrated-point-text {left: 5%; right: 5%; bottom: 20%;}
.price-point-middle_office .illustrated-point-text {left: 5%; right: 5%; top: 5%;}
.price-point-big_office .illustrated-point-text {left: 5%; right: 5%; bottom: 5%;}
.price-point-unclassified_office .illustrated-point-text {left: 49%; right: 5%; top: 5%;}
/*services*/
.services-item a {display: block; padding: 3px 10px;}
.services-item a:hover {background-color: #eeeeee;}
.services-item a:hover .services-title {text-decoration: underline;}
.services-icon {display: inline-block; vertical-align: middle;}
.services-icon img {display: block;}
.services-description {color: #656565;}



/*articles*/
.view-articles {padding: 20px 0px 0px 0px;}
.article-item-wrapper {min-height: 130px; margin-bottom: 50px; border-bottom: 3px solid #0078d8; clear: both; overflow: hidden;}
.article-item-image {float: left;}
.article-item-icon a {position: relative; display: block; width: 120px; height: 0px; padding-bottom: 100%;}
.article-item-icon img {position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: auto; max-width: 100%; height: auto; max-height: 100%; margin: auto;}
.article-item-text {text-align: justify;}
.article-item-title, .article-item-intro {display: inline;}
.files-block .field-item {display: inline-block; vertical-align: top; margin: 10px; white-space: nowrap;}
.files-block .file img {display: inline-block; vertical-align: middle; height: 30px;}
.files-block .file a {display: inline-block; vertical-align: middle; line-height: 30px; white-space: normal;}


/* websites-development */
.websites-item {margin: 10px 0px;}
.websites-item img {display: block; width: 100%;}
.websites-carousel {padding: 30px 0px; background: #0078d8;}

/*RESPONSIVES*/
@media (max-width: 1350px) {
	.top-banner {max-height: 500px;}
}
@media (max-width: 1180px) {
	.top-banner-sitename {width: 670px; font-size: 2.3rem;}
	.site-block-inner, .site-text-inner, .above-navigator, .easy-breadcrumb {width: 860px;}
	.phrase-3 {width: 280px;}
	.price-point-alone .illustrated-point-text {top: 10%;}
	.price-point-regular_office .illustrated-point-text {left: 15%; right: 15%; top: 10%;}
	.price-point-small_office .illustrated-point-text {bottom: 10%; line-height: 36px;}
	.price-point-middle_office .illustrated-point-text {top: 10%; line-height: 34px; font-size: 24px;}
	.price-point-big_office .illustrated-point-text {bottom: 10%; line-height: 34px; font-size: 24px;}
	.price-point-unclassified_office .illustrated-point-text {line-height: 34px; font-size: 24px;}
}
@media (max-width: 900px) {
	.site-block-inner, .site-text-inner, .above-navigator, .easy-breadcrumb {width: 760px;}
	.phrase-3 {width: 240px;}
	.price-point-alone .illustrated-point-text {line-height: 34px; font-size: 24px;}
	.price-point-regular_office .illustrated-point-text {line-height: 34px; font-size: 24px;}
	.price-point-small_office .illustrated-point-text {line-height: 34px; font-size: 24px;}
	.price-point-middle_office .illustrated-point-text {position: static; padding: 10px; text-shadow: none; color: #000000;}
	.price-point-big_office .illustrated-point-text {position: static; padding: 10px; text-shadow: none; color: #000000;}
}
@media (max-width: 800px) {
	.top-banner-sitename, .top-banner-siteabout {left: 20px; right: 20px; width: auto;}
	.site-block-inner {width: auto; padding: 30px 0px 60px 0px;}
	.site-text-inner, .above-navigator, .easy-breadcrumb {width: auto;}
	.phrase-3 {display: block; width: auto; padding: 10px;}
	.next-button {bottom: 10px; padding: 5px 10px 5px 40px;}
	.next-button:before {top: 5px;}
	.call-us-better {padding: 0px 10px;}
}
@media (max-width: 700px) {
	html {font-size: 26px;}
	.top-banner-sitename {font-size: 1.8rem;}
	.top-banner-siteabout {font-size: 0.9rem;}
	.top-banner-logo {width: 70px; background-image: url(/files/img/logo.png);}
	.phrase-1 p {text-indent: 1em;}
	.price-point-alone .illustrated-point-text {position: static; padding: 10px; text-shadow: none; color: #000000;}
	.price-point-regular_office .illustrated-point-text {position: static; padding: 10px; text-shadow: none; color: #000000;}
	.price-point-small_office .illustrated-point-text {position: static; padding: 10px; text-shadow: none; color: #000000;}
	.price-point-unclassified_office .illustrated-point-text {position: static; padding: 10px; text-shadow: none; color: #000000;}
    .inline-picture-item.inline-picture-item-300 {display: block; margin: 10px auto;}
}
@media (max-width: 580px) {
	.top-banner-phone {left: 90px; width: auto;}
	.top-banner-telegram {position: fixed; left: 80px; top: auto; bottom: 20px;}
	.top-banner-whatsapp {position: fixed; left: 20px; top: auto; bottom: 20px;}
	.phrase-1 p, .phrase-1 ul {text-align: start;}
}
@media (max-width: 500px) {
	.top-banner-sitename {margin-bottom: -80px;}
	.top-banner-siteabout {display: none;}
}
@media (max-width: 400px) {
	.top-banner {max-height: unset; min-height: unset; height: auto; padding-top: 70px;}
	.top-banner-bg {display: none;}
	.top-banner-line {position: fixed; background-color: rgba(0, 0, 0, 1);}
	.top-banner-sitename {position: static; margin: auto; font-size: 1rem;}
	.top-banner-logo {display: none;}
	.top-banner-phone {left: 10px; text-align: center;}
	.top-banner .next-arrow {display: none;}
}