@font-face {
    font-family: 'Airbnb Cereal App';
    src: url('fonts/AirbnbCerealApp-Book.eot');
    src: url('fonts/AirbnbCerealApp-Book.eot?#iefix') format('embedded-opentype'),
         url('fonts/AirbnbCerealApp-Book.woff2') format('woff2'),
         url('fonts/AirbnbCerealApp-Book.woff') format('woff'),
         url('fonts/AirbnbCerealApp-Book.ttf') format('truetype'),
         url('fonts/AirbnbCerealApp-Book.svg#AirbnbCerealApp-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Airbnb Cereal App';
    src: url('fonts/AirbnbCerealApp-Light.eot');
    src: url('fonts/AirbnbCerealApp-Light.eot?#iefix') format('embedded-opentype'),
         url('fonts/AirbnbCerealApp-Light.woff2') format('woff2'),
         url('fonts/AirbnbCerealApp-Light.woff') format('woff'),
         url('fonts/AirbnbCerealApp-Light.ttf') format('truetype'),
         url('fonts/AirbnbCerealApp-Light.svg#AirbnbCerealApp-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Airbnb Cereal App';
    src: url('fonts/AirbnbCerealApp-Medium.eot');
    src: url('fonts/AirbnbCerealApp-Medium.eot?#iefix') format('embedded-opentype'),
         url('fonts/AirbnbCerealApp-Medium.woff2') format('woff2'),
         url('fonts/AirbnbCerealApp-Medium.woff') format('woff'),
         url('fonts/AirbnbCerealApp-Medium.ttf') format('truetype'),
         url('fonts/AirbnbCerealApp-Medium.svg#AirbnbCerealApp-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Airbnb Cereal App';
    src: url('fonts/AirbnbCerealApp-Bold.eot');
    src: url('fonts/AirbnbCerealApp-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/AirbnbCerealApp-Bold.woff2') format('woff2'),
         url('fonts/AirbnbCerealApp-Bold.woff') format('woff'),
         url('fonts/AirbnbCerealApp-Bold.ttf') format('truetype'),
         url('fonts/AirbnbCerealApp-Bold.svg#AirbnbCerealApp-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Airbnb Cereal App';
    src: url('fonts/AirbnbCerealApp-ExtraBold.eot');
    src: url('fonts/AirbnbCerealApp-ExtraBold.eot?#iefix') format('embedded-opentype'),
         url('fonts/AirbnbCerealApp-ExtraBold.woff2') format('woff2'),
         url('fonts/AirbnbCerealApp-ExtraBold.woff') format('woff'),
         url('fonts/AirbnbCerealApp-ExtraBold.ttf') format('truetype'),
         url('fonts/AirbnbCerealApp-ExtraBold.svg#AirbnbCerealApp-ExtraBold') format('svg');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Gordita';
    src: url('fonts/GorditaRegular.eot');
    src: url('fonts/GorditaRegular.eot?#iefix') format('embedded-opentype'),
         url('fonts/GorditaRegular.woff2') format('woff2'),
         url('fonts/GorditaRegular.woff') format('woff'),
         url('fonts/GorditaRegular.ttf') format('truetype'),
         url('fonts/GorditaRegular.svg#GorditaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Gordita';
    src: url('fonts/GorditaBold.eot');
    src: url('fonts/GorditaBold.eot?#iefix') format('embedded-opentype'),
         url('fonts/GorditaBold.woff2') format('woff2'),
         url('fonts/GorditaBold.woff') format('woff'),
         url('fonts/GorditaBold.ttf') format('truetype'),
         url('fonts/GorditaBold.svg#GorditaBold') format('svg');
    font-weight: 700;
    font-style: normal;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html, body {
	min-width: 320px; min-height: 100%;
}
body {
	position: relative; background: #fff; font-family: 'Airbnb Cereal App'; font-size: 16px; color: #505f79; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
* {
	outline: none; max-height: 999999px; box-sizing: border-box;
}
img {
	border: none; vertical-align: top;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: ''; content: none;
}
table {
	border-collapse: collapse; border-spacing: 0;
}
input, textarea, select, button {
	font-family: 'Airbnb Cereal App';
}
button::-moz-focus-inner {
    padding: 0; border: 0;
}
button {
	*overflow: visible;
}
label {
	cursor: pointer;
}
a {
	color: #ff7b5d;
}
a:hover {
	text-decoration: none;
}
.clear_fix {
	clear: both; display: block; height: 0;
}
.hidden {
	display: none;
}
.wrapper {
	position: relative; min-width: 320px; max-width: 1200px; margin: 0 auto; padding: 0 15px;
}


/* site style
------------------------------------------------ */
.viewport-wrapper {
	position: relative; min-width: 320px; overflow: hidden;
}

H1, H2, H3, H4, H5 {
	margin: 0; padding: 0; color: #444; line-height: normal;
}
H1 {
	font-size: 40px; letter-spacing: 1px; font-weight: 700;
}
H2 {
	font-size: 33px; font-weight: 500;
}
H3 {
	font-size: 27px; font-weight: 500;
}
H4 {
	font-size: 23px; font-weight: 500; /*line-height: 28px; min-height: 30px;*/
}

input[type=text], textarea {
	box-sizing: border-box;
}
textarea {
	overflow: auto; resize: none; vertical-align: top;
}

button {
	cursor: pointer; border: 0;
}

a.button {
	display: inline-block; vertical-align: top; box-shadow: 0px 2px 3px rgba(0,0,0,.12); border-radius: 8px; background: #ff7b5d; transition: all .3s; height: 52px; line-height: 52px; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; text-decoration: none;
}
a.button:hover {
	background: #f75036; box-shadow: 0px 6px 10px rgba(0,0,0,.15);
}

.supertitle {
	font-size: 40px; color: #444; text-align: center; letter-spacing: 1px; font-weight: 700;
}

.slick-list {
	position: relative; overflow: hidden;
}
.slick-track {
	position: relative;
}

.text-box {
	letter-spacing: 0.23px; line-height: 28px;
}
.text-box H2, 
.text-box H3, 
.text-box H4 {
	margin-bottom: 25px;
}
.text-box p {
	margin: 0 0 30px 0;
}
.text-box ul {
	color: #6a778d;
}
.text-box ul li {
	position: relative; padding-left: 38px; margin-bottom: 14px;
}
.text-box ul li:after {
	display: block; content: ''; background: #ff7b5d; width: 10px; height: 10px; border-radius: 10px; position: absolute; left: 0; top: 8px;
}
.text-box > *:last-child, 
.text-box > *:last-child > li:last-child {
	margin-bottom: 0 !important;
}

.mb-40 {
	margin-bottom: 40px !important;
}
.mb-28 {
	margin-bottom: 28px !important;
}

.text-center {
	text-align: center;
}

.ui-slider {
	position: relative;
}
.ui-slider .ui-slider-handle {
	position: absolute; z-index: 2; cursor: pointer; 
}
.ui-slider .ui-slider-range {
	position: absolute; z-index: 1; display: block;
}
.ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}
/* end site style */


/* header
------------------------------------------------ */
.site-header {
	position: relative; min-width: 320px; height: 60px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); z-index: 250;
}
.site-header .wrapper:after {
	content: ''; display: block; clear: both; visibility: hidden; height: 0;
}
.site-header .logo {
	float: left; padding-top: 11px;
}
.site-header .r {
	float: right; margin-right: 289px;
}
.site-header .menu .bt {
	display: none; width: 30px; height: 21px; position: absolute; right: 15px; top: 19px; cursor: pointer; z-index: 5;
}
.site-header .menu .bt span {
	display: block; width: 30px; height: 3px; border-radius: 1px; background: #253858; transition: all .3s ease-in-out; position: absolute; left: 0; top: 9px;
}
.site-header .menu .bt span:before, 
.site-header .menu .bt span:after {
	position: absolute; left: 0; top: -9px; display: block; content: ''; width: 30px; height: 3px; border-radius: 1px; background: #253858; transition: all .3s ease-in-out;
}
.site-header .menu .bt span:after {
	top: 9px;
}
.site-header .menu.active .bt span {
	background: transparent;
}
.site-header .menu.active .bt span:before {
	transform: rotate(45deg); width: 24px; top: 0;
}
.site-header .menu.active .bt span:after {
	transform: rotate(-45deg); width: 24px; top: 0;
}
.site-header .menu > ul {
	display: flex;
}
.site-header .menu > ul > li {
	position: relative; margin-right: 32px;
}
.site-header .menu > ul > li:last-child {
	margin-right: 0;
}
.site-header .menu > ul > li > a {
	display: block; height: 60px; line-height: 60px; transition: color .3s; font-size: 14px; color: #253858; text-decoration: none; letter-spacing: 1px; font-weight: 500;
}
.site-header .menu > ul > li:hover > a {
	color: #ff7b5d;
}
.site-header .menu > ul > li.list > a:after {
	position: relative; content: ''; display: inline-block; vertical-align: top; background: url(../i/header-menu-arr.svg) no-repeat; width: 13px; height: 9px; margin-left: 6px; top: 26px;
}
.site-header .menu > ul > li.hd {
	display: none;
}
.site-header .menu > ul > li.log {
	margin-top: 43px;
}
.site-header .menu > ul > li.log a {
	/*display: block; width: 74px; */display: inline-block; vertical-align: top; padding: 0 15px; height: 36px; line-height: 32px; border-radius: 8px; border: 2px solid #ff7b5d; color: #ff7b5d; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; letter-spacing: 0;
}
.site-header .menu > ul > li.get {
	margin-top: 26px;
}
.site-header .menu > ul > li.get a {
	/*display: block; width: 111px; */display: inline-block; vertical-align: top; padding: 0 17px; height: 36px; line-height: 36px; border-radius: 8px; background: #ff7b5d; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); font-size: 14px; font-weight: 500; color: #fff; text-decoration: none; text-align: center; letter-spacing: 0;
}
.site-header .menu > ul > li ul {
	position: absolute; left: 50%; margin-left: -93px; top: 50px; background: #fff; border-radius: 4px; box-shadow: 0 18px 24px rgba(0, 0, 0, 0.14); width: 186px; padding: 21px 0 26px; display: none;
}
.site-header .menu > ul > li ul li {
	margin-top: 18px;
}
.site-header .menu > ul > li ul li:first-child {
	margin-top: 0;
}
.site-header .menu > ul > li ul li a {
	display: block; padding: 0 10px 0 26px; transition: color .3s; color: rgba(37,56,88,.85); font-size: 15px; text-decoration: none; font-family: 'Gordita';
}
.site-header .menu > ul > li ul li a:hover {
	color: #ff7b5d;
}
.site-header .menu > ul > li ul li.active a {
	font-weight: 700;
}
.site-header .act {
	display: flex; position: absolute; right: 15px; top: 10px;
}
.site-header .act a {
	display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 8px; margin-right: 10px; transition: all .3s; text-decoration: none; text-align: center; font-size: 14px;
}
.site-header .act a:last-child {
	margin-right: 0;
}
.site-header .act a.login {
	padding: 0 15px; min-width: 100px; border: 2px solid #ff7b5d; background: #fff; font-weight: 700; color: #ff7b5d;
}
.site-header .act a.login:hover {
	background: #f75036; border-color: #f75036; box-shadow: 0px 6px 10px rgba(0,0,0,.1); color: #fff;
}
.site-header .act a.go {
	padding: 0 15px; min-width: 130px; background: #ff7b5d; box-shadow: 0px 2px 3px rgba(0,0,0,.08); color: #fff; font-weight: 500;
}
.site-header .act a.go:hover {
	background: #f75036; box-shadow: 0px 6px 10px rgba(0,0,0,.1);
}

.site-header .act2 {
	display: flex; position: absolute; right: 15px; top: 10px;
}
.site-header .act2 a {
	display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 8px; margin-right: 10px; transition: all .3s; text-decoration: none; text-align: center; font-size: 14px;
}
.site-header .act2 a:last-child {
	margin-right: 0;
}
.site-header .act2 a.go {
	padding: 0 15px; background: #ff7b5d; box-shadow: 0px 2px 3px rgba(0,0,0,.08); color: #fff; font-weight: 500;
}
.site-header .act2 a.go:hover {
	background: #f75036; box-shadow: 0px 6px 10px rgba(0,0,0,.1);
}
/* end header */


.site-body {
	position: relative; min-width: 320px; z-index: 200;
}
.site-body.wrapper {
	min-width: 0;
}


/* widget
------------------------------------------------ */
.widget-box {
	position: relative; background: #fff; border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); width: 926px; padding: 44px 80px 44px 71px; margin: auto; display: flex; align-items: center; justify-content: space-between;
}
.widget-box .text {
	max-width: 532px; padding-right: 20px; font-size: 20px; font-weight: 500; line-height: 32px; color: #5c798c;
}
.widget-box .bt a {
	min-width: 175px; padding: 0 26px;
}
/* end widget */


/* step
------------------------------------------------ */
.step-1 {
	position: relative; min-width: 320px;
}
.step-1:before {
	display: block; content: ''; background: url(../i/step1-bg.png?3) center top no-repeat; height: 1281px; position: absolute; left: 0; right: 0; top: 0;
}
.step-1 .wrapper {
	padding-top: 90px; min-height: 1050px; text-align: center;
}
.step-1 .title {
	color: #fff; font-size: 50px; font-weight: 700; letter-spacing: 0.5px;
}
.step-1 .text {
	position: relative; max-width: 770px; margin: 20px auto 0; font-size: 20px; font-weight: 500; letter-spacing: 0.5px; line-height: 40px; color: #fff;
}
.step-1 .bt {
	display: flex; justify-content: center; margin-top: 40px;
}
.step-1 .bt a {
	display: flex; align-items: center; justify-content: center; margin: 0 5px; padding: 0 15px; border-radius: 8px; height: 56px; transition: all .3s; color: #fff; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700; text-align: center; text-decoration: none;
}
.step-1 .bt a.cust {
	min-width: 280px; border: 2px solid #fff;
}
.step-1 .bt a.cust:hover {
	background: rgba(255,255,255,.85); border-color: transparent; box-shadow: 0px 2px 3px rgba(0,0,0,.12); color: #ff7b5d;
}
.step-1 .bt a.go {
	background: #fff; min-width: 175px; box-shadow: 0px 2px 3px rgba(0,0,0,.12); color: #ff7b5d;
}
.step-1 .bt a.go:hover {
	background: rgba(255,255,255,.85);
}
.step-1 .mac {
	background: url(../i/step1-mac.png) no-repeat; -webkit-background-size: cover; background-size: cover; width: 1170px; height: 634px; position: absolute; left: 50%; margin-left: -575px; bottom: 0;
}
.step-1 .mac .in {
	background: url(../i/step1-mac-screen.png) no-repeat; -webkit-background-size: cover; background-size: cover; width: 742px; height: 463px; position: absolute; left: 204px; top: 37px;
}

.step-2 {
	margin-top: 30px;
}
.step-2 .subtext {
	position: relative; max-width: 770px; margin: 30px auto 0; letter-spacing: 0.53px; line-height: 25px; text-align: center;
}
.step-2 .list {
	display: flex; flex-wrap: wrap; margin-top: 20px;
}
.step-2 .item {
	background-image: linear-gradient(13deg, #f4785b 0%, #f68a66 100%); border-radius: 10px; width: 370px; padding: 60px 37px 45px; margin: 30px 30px 0 0; color: #fff; text-align: center;
}
.step-2 .item-2 {
	background-image: linear-gradient(187deg, #62788a 0%, #5c798c 100%);
}
.step-2 .item:nth-child(3n+3) {
	margin-right: 0;
}
.step-2 .item .img {
	height: 120px; text-align: center;
}
.step-2 .item .title {
	font-size: 24px; font-weight: 700; letter-spacing: 0.5px;
}
.step-2 .item .title a {
	text-decoration: none; color: #fff;
}
.step-2 .item .for {
	margin-top: 9px; font-size: 14px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
}
.step-2 .item .text {
	margin-top: 19px; font-size: 15px; letter-spacing: 0.5px; line-height: 25px; font-weight: 300;
}
.step-2 .item .more {
	margin-top: 26px;
}
.step-2 .item .more a {
	position: relative; display: inline-block; vertical-align: top; padding-bottom: 6px; text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #fff;
}
.step-2 .item .more a:after {
	display: block; content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; transition: opacity .3s;
}
.step-2 .item .more a:hover:after {
	opacity: 0;
}

.step-3 {
	min-width: 320px; background: #fbfbfc; margin-top: 161px;
}
.step-3 .wrapper {
	padding-top: 147px; padding-bottom: 89px;
}
.step-3 .widget-box {
	position: absolute; left: 50%; margin-left: -463px; top: -78px;
}
.step-3 .supertitle {
	position: relative; max-width: 850px; margin: auto; line-height: 58px;
}
.step-3 .list {
	margin-top: 50px; display: flex; flex-wrap: wrap; text-align: center;
}
.step-3 .item {
	width: 27.4%; margin: 0 8.9% 0 0;
}
.step-3 .item:nth-child(3n+3) {
	margin-right: 0;
}
.step-3 .item .img {
	display: flex; align-items: center; justify-content: center; height: 140px;
}
.step-3 .item .img .ic-1 {
	width: 107px; height: 119px;
}
.step-3 .item .img .ic-4 {
	width: 147px; height: 78px;
}
.step-3 .item .title {
	margin-top: 25px; color: #4d6a7d; font-size: 24px; font-weight: 700; letter-spacing: 0.5px;
}
.step-3 .item .text {
	margin-top: 14px; font-size: 15px; font-weight: 300; letter-spacing: 0.5px; line-height: 25px;
}

.step-4a {
	margin-top: 64px;
}
.step-4a .subtext {
	position: relative; max-width: 600px; margin: 30px auto 0; letter-spacing: 0.53px; line-height: 25px; text-align: center;
}
.step-4a .logo {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 24px;
}
.step-4a .logo .item {
	margin: 40px 26px 0;
}
.step-4a .logo .item .img {
	background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover;
}
.step-4a .logo .item .dclk {
	background-image: url(../i/logo/dclk.png); width: 345px; height: 71px;
}
.step-4a .logo .item .openx {
	background-image: url(../i/logo/openx.png); width: 180px; height: 69px;
}
.step-4a .widget-box {
	margin-top: 78px;
}

.step-4b {
	margin-top: 115px;
}
.step-4b .list {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 20px;
}
.step-4b .item {
	margin: 40px 80px 0 0;
}
.step-4b .item:last-child {
	margin-right: 0;
}
.step-4b .item .img {
	background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover;	
}
.step-4b .item .skystream {
	background-image: url(../i/logo/skystream.png); width: 131px; height: 16px;
}
.step-4b .item .tyent {
	background-image: url(../i/logo/tyent.png); width: 93px; height: 70px;
}
.step-4b .item .fivehundredlevel {
	background-image: url(../i/logo/fivehundredlevel.png); width: 122px; height: 50px;
}
.step-4b .item .epic {
	background-image: url(../i/logo/epic.png); width: 73px; height: 44px;
}
.step-4b .item .nichecanvas {
	background-image: url(../i/logo/nichecanvas.png); width: 203px; height: 41px;
}

.step-5 {
	position: relative; min-width: 320px; margin-top: 88px;
}
.step-5:before {
	display: block; content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -9999px; background: #fbfbfc;
}

.step-5a {
	padding-top: 80px;
}
.step-5a .subtitle {
	position: relative; max-width: 471px; margin: auto; color: #4d6a7d; font-size: 30px; font-weight: 500; letter-spacing: 0.5px; text-align: center;
}
.step-5a .slider {
	position: relative; margin: 41px auto 0; max-width: 1050px; padding: 0 75px;
}
.step-5a .slider:before {
	display: block; content: ''; background: url(../i/step5a-quote.svg) no-repeat; width: 381px; height: 321px; -webkit-background-size: cover; background-size: cover; position: absolute; left: -182px; top: -189px;
}
.step-5a .list {
	position: relative; display: flex;
}
.step-5a .slick-track {
	display: flex;
}
.step-5a .item {
	position: relative; border-radius: 8px; box-shadow: 0 12px 22px rgba(0, 0, 0, 0.08); background: #fff; width: 400px; padding: 40px 35px 135px; margin: 30px 25px 40px;
}
.step-5a .item .photo img {
	width: 80px; height: 80px; border-radius: 100%;
}
.step-5a .item .text {
	margin-top: 30px; font-size: 15px; letter-spacing: 0.5px; line-height: 25px;
}
.step-5a .item .author {
	position: absolute; left: 0; right: 0; bottom: 44px; padding: 0 35px;
}
.step-5a .item .name {
	color: #4d6a7d; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.step-5a .item .post {
	margin-top: 10px; font-size: 14px; font-weight: 300; letter-spacing: 0.5px;
}
.step-5a .item .read {
	position: absolute; right: 35px; top: 39px; font-size: 14px; letter-spacing: 0.5px;
}
.step-5a .item .read a {
	color: #ff7b5d; text-decoration: none;
}
.step-5a .item .read a:hover {
	text-decoration: underline;
}
.step-5a .arr-l,
.step-5a .arr-r {
	cursor: pointer; width: 50px; height: 50px; border-radius: 25px; background: rgba(255,123,93,.56); position: absolute; left: 0; top: 50%; margin-top: -25px; transition: background .3s;
}
.step-5a .arr-r {
	left: auto; right: 0;
}
.step-5a .arr-l:hover,
.step-5a .arr-r:hover {
	background: rgba(255,123,93,1);
}
.step-5a .arr-l:after,
.step-5a .arr-r:after {
	display: block; content: ''; background: url(../i/step5a-arr-l.svg) no-repeat; -webkit-background-size: cover; background-size: cover; width: 8px; height: 14px; position: absolute; left: 50%; top: 50%; margin: -7px 0 0 -4px;
}
.step-5a .arr-r:after {
	background: url(../i/step5a-arr-r.svg) no-repeat;
}
.step-5a .get {
	text-align: center;
}
.step-5a .get a {
	min-width: 175px; height: 56px; line-height: 56px; padding: 0 26px;
}

.step-5b {
	margin-top: 124px;
}
.step-5b .subtext {
	margin-top: 28px; text-align: center; letter-spacing: 0.57px;
}
.step-5b .list {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 27px -31px 0;
}
.step-5b .item {
	margin: 20px 31px 0;
}
.step-5b .item .img {
	background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover;
}
.step-5b .item .shopify {
	background-image: url(../i/logo/shopify.png); width: 117px; height: 33px;
}
.step-5b .item .magento {
	background-image: url(../i/logo/magento.png); width: 150px; height: 42px;
}
.step-5b .item .woocommerce {
	background-image: url(../i/logo/woocommerce.png); width: 167px; height: 34px;
}
.step-5b .item .prestashop {
	background-image: url(../i/logo/prestashop.png); width: 158px; height: 29px;
}
.step-5b .item .opencart {
	background-image: url(../i/logo/opencart.png); width: 130px; height: 42px;
}
.step-5b .item .wordpress {
	background-image: url(../i/logo/wordpress.png); width: 298px; height: 61px;
}

.step-6 {
	position: relative; min-width: 320px; min-height: 597px;
}
.step-6:before {
	display: block; content: ''; background: url(../i/step6-bg.png?3) center top no-repeat; height: 677px; position: absolute; left: 0; right: 0; top: 0;
}
.step-6 .content {
	padding-top: 99px;
}
.step-6 .title {
	max-width: 588px; color: #fff; font-size: 42px; font-weight: 700; letter-spacing: 0.32px; line-height: 56px;
}
.step-6 .text {
	margin-top: 35px; max-width: 577px; color: #fff; font-size: 20px; font-weight: 500; letter-spacing: 0.5px; line-height: 37px;
}
.step-6 .bt {
	margin-top: 61px;
}
.step-6 .bt a {
	display: inline-block; vertical-align: top; min-width: 221px; padding: 0 15px; height: 56px; line-height: 56px; background: #fff; border-radius: 8px; box-shadow: 0px 2px 3px rgba(0,0,0,.12); transition: all .3s; color: #ff7b5d; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; text-align: center;
}
.step-6 .bt a:hover {
	background: rgba(255,255,255,.85);
}
.step-6 .mac {
	background: url(../i/step6-mac.png) no-repeat; -webkit-background-size: cover; background-size: cover; width: 944px; height: 512px; position: absolute; right: -261px; top: 85px;
}
.step-6 .mac .img {
	background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; width: 598px; height: 377px; position: absolute; left: 165px; top: 30px;
}

.step-7 {
	margin-top: 163px;
}
.step-7 .list {
	position: relative; max-width: 988px; margin: 66px auto 0;
}
.step-7 .item {
	display: flex; margin-top: 27px;
}
.step-7 .item .img {
	flex: 0 0 339px;
}
.step-7 .item .entry {
	margin-top: 47px;
}
.step-7 .item .title {
	position: relative; padding-left: 59px; color: #444; font-size: 30px; font-weight: 700; letter-spacing: 0.75px;
}
.step-7 .item .title span {
	position: absolute; left: 0; top: -4px; display: block; width: 46px; height: 46px; line-height: 46px; background: #fdf0eb; border-radius: 23px; color: #444; font-size: 30px; font-weight: 700; letter-spacing: 0.75px; text-align: center;
}
.step-7 .item .text {
	margin: 30px 0 0 59px; opacity: 0.83; letter-spacing: 0.53px; line-height: 28px;
}
.step-7 .item .scheme {
	margin: 37px 0 0 59px;
}
.step-7 .item .scheme img {
	max-width: 100%;
}
.step-7 .item:nth-child(2n+2) {
	flex-direction: row-reverse;
}
.step-7 .item:nth-child(2n+2) .img {
	text-align: right;
}

.step-8 {
	min-width: 320px; background: url(../i/step8-bg.png) center center no-repeat; -webkit-background-size: cover; background-size: cover; margin-top: 142px;
}
.step-8 .wrapper {
	padding-top: 171px; padding-bottom: 80px;
}
.step-8 .widget-box {
	position: absolute; left: 50%; margin-left: -463px; top: -73px;
}
.step-8 .content {
	display: flex; justify-content: space-between; flex-direction: row-reverse;
}
.step-8 .list {
	margin-top: 80px; width: 43.1%;
}
.step-8 .list ul {
	color: #8f98a8; font-size: 16px; line-height: 28px;
}
.step-8 .list ul li {
	position: relative; margin-top: 22px; padding-left: 34px;
}
.step-8 .list ul li:first-child {
	margin-top: 0;
}
.step-8 .list ul li:after {
	display: block; content: ''; background: url(../i/step8-check.svg) no-repeat; width: 21px; height: 20px; position: absolute; left: 0; top: 9px;
}
.step-8 .img {
	margin-top: 85px; width: 54%; text-align: right;
}
.step-8 .img img {
	max-width: 100%;
}
/* end step */


/* case
------------------------------------------------ */
.case-studies {
	margin-top: 77px;
}
.case-studies .intro {
	margin-top: 12px; opacity: 0.81; font-size: 18px; letter-spacing: 0.5px; line-height: 25px; text-align: center;
}
.case-studies .outro {
	position: relative; max-width: 606px; margin: 98px auto 0; opacity: 0.85; letter-spacing: 0.53px; line-height: 25px; text-align: center;
}
.case-studies .outro a {
	text-decoration: none;
}
.case-studies .outro a:hover {
	text-decoration: underline;
}
.case-studies .list {
	display: flex; flex-wrap: wrap; margin-top: 38px;
}
.case-studies .item {
	position: relative; width: 366px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06); background: #fff; border-radius: 6px; margin: 45px 36px 0 0; padding: 14px 30px 87px;
}
.case-studies .item:nth-child(3n+3) {
	margin-right: 0;
}
.case-studies .item .img {
	display: flex; height: 105px; align-items: center;
}
.case-studies .item .title {
	color: #444; font-size: 22px; font-weight: 500; letter-spacing: 0.2px;
}
.case-studies .item .text {
	margin-top: 17px; opacity: 0.75; letter-spacing: 0.2px; line-height: 26px;
}
.case-studies .item .more {
	position: absolute; left: 0; right: 0; bottom: 28px; padding: 0 30px;
}
.case-studies .item .more a {
	display: inline-block; vertical-align: top; padding: 0 11px; height: 31px; line-height: 31px; border-radius: 5px; background: #f9f9f9; transition: background .3s; color: #ff7b5d; text-decoration: none;
}
.case-studies .item .more a:after {
	position: relative; content: ''; display: inline-block; vertical-align: top; background: url(../i/angle-left.svg) no-repeat; -webkit-background-size: cover; background-size: cover; width: 8px; height: 13px; margin-left: 9px; top: 9px;
}
.case-studies .item .more a:hover {
	background: rgba(0,0,0,.04);
}

.case-study {
	margin-top: 63px;
}
.case-study .subtitle {
	max-width: 836px;
}
.case-study .basic {
	position: relative; background: #f9f9f9; padding: 38px 0; margin-top: 46px;
}
.case-study .basic:before, 
.case-study .basic:after {
	display: block; content: ''; position: absolute; right: 100%; top: 0; bottom: 0; width: 999999px; background: #f9f9f9;
}
.case-study .basic:after {
	right: auto; left: 100%;
}
.case-study .basic .top {
	position: relative; max-width: 836px;
}
.case-study .basic .title {
	margin-top: 13px; color: #444; font-size: 22px; font-weight: 500; letter-spacing: 0.2px;
}
.case-study .basic .link {
	position: absolute; right: 0px; top: 5px;
}
.case-study .basic .link a {
	display: flex; align-items: center; justify-content: center; padding: 0 11px 0 9px; height: 34px; border: 1px solid #ff8569; border-radius: 6px; transition: all .3s; color: #ff7b5d; text-decoration: none; text-align: center;
}
.case-study .basic .link a:before {
	position: relative; content: ''; display: inline-block; vertical-align: top; background: url(../i/link-ic.svg) no-repeat; width: 20px; height: 18px; margin-right: 10px;
}
.case-study .basic .link a:hover {
	background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.1)
}
.case-study .basic .char {
	margin-top: 26px; display: flex; flex-wrap: wrap;
}
.case-study .basic .char .item {
	position: relative; padding: 0 21px; width: 235px;
}
.case-study .basic .char .item-2 {
	width: 275px;
}
.case-study .basic .char .item:last-child {
	padding-right: 0;
}
.case-study .basic .char .item:after {
	display: block; content: ''; background: #d8d8d8; width: 1px; height: 41px; position: absolute; left: 0; top: 8px;
}
.case-study .basic .char .item:first-child {
	padding-left: 0;
}
.case-study .basic .char .item:first-child:after {
	display: none;
}
.case-study .basic .char .level {
	opacity: 0.75; letter-spacing: 0.2px; line-height: 26px;
}
.case-study .basic .char .value {
	margin-top: 4px; font-weight: 500; letter-spacing: 0.1px; line-height: 26px;
}
.case-study .body {
	display: flex; justify-content: space-between; align-items: flex-start;
}
.case-study .content {
	margin-top: 55px; width: 71.5%;
}
.case-study .text-box {
	border-bottom: 1px solid #e8e8e8; padding-bottom: 80px;
}
.case-study .comment {
	position: relative; max-width: 525px; box-shadow: 0 16px 43px rgba(0, 0, 0, 0.06); border-radius: 8px; background: #fff; padding: 40px 35px 34px; margin-top: 79px;
}
.case-study .comment .photo img {
	width: 80px; height: 80px; border-radius: 100%;
}
.case-study .comment .text {
	margin-top: 30px; font-size: 15px; letter-spacing: 0.5px; line-height: 25px;
}
.case-study .comment .author {
	margin-top: 30px;
}
.case-study .comment .author .name {
	color: #4d6a7d; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.case-study .comment .author .post {
	margin-top: 10px; font-size: 14px; font-weight: 300; letter-spacing: 0.5px;
}
.case-study .outro {
	margin-top: 95px; opacity: 0.85; letter-spacing: 0.53px; line-height: 25px;
}
.case-study .outro a {
	text-decoration: none;
}
.case-study .outro a:hover {
	text-decoration: underline;
}
.case-study .stat {
	position: relative; width: 22.5%; background: #fff; border-radius: 4px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06); margin-top: 41px; padding: 57px 15px 68px; text-align: center;
}
.case-study .stat .item {
	margin-top: 38px;
}
.case-study .stat .item:first-child {
	margin-top: 0;
}
.case-study .stat .value {
	color: #444; font-size: 43px; font-weight: 700; letter-spacing: 0.1px;
}
.case-study .stat .level {
	position: relative; max-width: 190px; margin: 4px auto 0; letter-spacing: 0.2px; line-height: 26px;
}
/* end case */


/* info
------------------------------------------------ */
.info-contact {
	position: relative; margin: 57px auto 0; max-width: 850px;
}
.info-contact .subtext {
	margin-top: 12px; opacity: 0.81; font-size: 18px; letter-spacing: 0.6px; line-height: 25px;
}
.info-contact .mail {
	margin-top: 50px;
}
.info-contact .mail .level {
	color: #444; letter-spacing: 0.33px;
}
.info-contact .mail .value {
	margin-top: 18px;
}
.info-contact .mail .value a {
	display: inline-block; vertical-align: top; transition: color .3s; color: #444; text-decoration: none; font-weight: 500;
}
.info-contact .mail .value a:before {
	position: relative; content: ''; display: inline-block; vertical-align: top; background: url(../i/mail-ic.svg) no-repeat; width: 19px; height: 14px; margin-right: 11px; top: 4px;
}
.info-contact .mail .value a:hover {
	color: #ff7b5d;
}
.info-contact .list {
	margin-top: 47px;
}
.info-contact .list .item {
	margin-top: 35px;
}
.info-contact .list .level {
	position: relative; padding-left: 18px; color: #444; font-size: 24px; font-weight: 500; letter-spacing: 0.21px;
}
.info-contact .list .level:after {
	display: block; content: ''; width: 10px; height: 10px; border-radius: 5px; background: #ff7b5d; position: absolute; left: 0; top: 11px;
}
.info-contact .list .value {
	margin: 17px 0 0 18px; opacity: 0.78; color: #444; letter-spacing: 0.14px; line-height: 26px;
}

.info-history {
	position: relative; margin: 61px auto 0; max-width: 846px;
}
.info-history .text-box {
	margin-top: 52px;
}

.info-jobs {
	margin-top: 77px;
}
.info-jobs .subtext {
	margin-top: 12px; opacity: 0.81; font-size: 18px; letter-spacing: 0.6px; line-height: 25px; text-align: center;
}
.info-jobs .intro {
	position: relative; max-width: 846px; margin: 41px auto 0; opacity: 0.85; letter-spacing: 0.23px; line-height: 28px; text-align: center;
}
.info-jobs .list {
	position: relative; max-width: 760px; margin: 50px auto 0;
}
.info-jobs .item {
	margin-top: 25px;
}
.info-jobs .item a {
	position: relative; display: block; background: #fff; border-radius: 6px; box-shadow: 0 11px 32px rgba(0, 0, 0, 0.05); padding: 20px 45px 29px; transition: all .3s; text-decoration: none;
}
.info-jobs .item a:hover {
	transform: translateY(-6px); box-shadow: 0 11px 32px rgba(0, 0, 0, 0.1);
}
.info-jobs .item a .title {
	display: block; color: #5c798c; font-size: 20px; font-weight: 500; line-height: 32px;
}
.info-jobs .item a .n {
	display: block; margin-top: 6px; color: #a7abb0; font-size: 15px;
}
.info-jobs .item a .time {
	display: block; position: absolute; right: 45px; bottom: 24px; padding: 0 15px; height: 23px; line-height: 23px; border-radius: 30px; background: #dcdfe1; color: #fff; font-size: 15px; letter-spacing: 0.2px;
}
.info-jobs .mail {
	margin-top: 82px; opacity: 0.85; font-size: 18px; letter-spacing: 0.6px; line-height: 25px; text-align: center;
}
.info-jobs .mail a {
	display: inline-block; vertical-align: baseline; text-decoration: none;
}
.info-jobs .mail a:hover {
	text-decoration: underline;
}

.info-job {
	position: relative; max-width: 850px; margin: 42px auto 0;
}
.info-job .back {
	margin-bottom: 41px; font-size: 18px; letter-spacing: 0.6px;
}
.info-job .back a {
	text-decoration: none; color: #ff9780;
}
.info-job .back a:before {
	position: relative; content: ''; display: inline-block; vertical-align: top; background: url(../i/chevron-down.svg) no-repeat; width: 9px; height: 13px; margin-right: 11px; top: 5px;
}
.info-job .back a:hover {
	text-decoration: underline;
}
.case-study .back {
	margin-bottom: 41px; font-size: 18px; letter-spacing: 0.6px;
}
.case-study .back a {
	text-decoration: none; color: #ff9780;
}
.case-study .back a:before {
	position: relative; content: ''; display: inline-block; vertical-align: top; background: url(../i/chevron-down.svg) no-repeat; width: 9px; height: 13px; margin-right: 11px; top: 5px;
}
.case-study .back a:hover {
	text-decoration: underline;
}
.info-job .loc {
	margin-top: 12px; opacity: 0.81; font-size: 18px; letter-spacing: 0.6px; line-height: 25px;
}
.info-job .text-box {
	margin-top: 44px;
}
.info-job .mail {
	margin-top: 89px; opacity: 0.85; font-size: 18px; letter-spacing: 0.6px; line-height: 25px;
}
.info-job .mail a {
	display: inline-block; vertical-align: baseline; text-decoration: none;
}
.info-job .mail a:hover {
	text-decoration: underline;
}

.info-price {
	margin-top: 77px;
}
.info-price .subtext {
	margin-top: 12px; text-align: center; color: #444; font-size: 26px; font-weight: 500;
}
.info-price .vis {
	position: relative; max-width: 876px; margin: 51px auto 0;
}
.info-price .vis .title {
	text-align: center; opacity: 0.85; letter-spacing: 0.53px; line-height: 25px;
}
.info-price .vis .count {
	margin-top: 1px; text-align: center; font-size: 18px; font-weight: 500; letter-spacing: 0.6px; line-height: 25px;
}
.info-price .vis .slider {
	margin-top: 25px;
}
.info-price .vis .ui-slider-horizontal {
	background: #f2f5f6; height: 8px; border-radius: 4px;
}
.info-price .vis .ui-slider-horizontal .ui-slider-handle {
	top: -6px; margin: 0 0 0 -10px; background: #fa8866; width: 20px; height: 20px; border-radius: 10px;
}
.info-price .vis .ui-slider-horizontal .ui-slider-handle:after {
	display: block; content: ''; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; border: 2px solid #fa8866; box-shadow: 0 4px 12px rgba(250,136,102,.2); border-radius: 100%;
}
.info-price .list {
	/*position: relative; display: flex; max-width: 1040px; margin: 76px auto 0;*/ /*commented by Alex 19.11.2019*/
	position: relative; display: flex; max-width: 600px; margin: 76px auto 0;
}
.info-price .item {
	position: relative; width: 320px; background: #fff url(../i/price-top-bg.png) center top no-repeat; box-shadow: 0 13px 39px rgba(96, 96, 96, 0.07); border-radius: 10px; padding: 0 40px 154px; margin: 0 40px 0 0; text-align: center;
}
.info-price .item:last-child {
	margin-right: 0;
}
.info-price .item > * {
	position: relative;
}
.info-price .item .top {
	height: 172px; padding-top: 31px;
}
.info-price .item .title {
	color: #655654; font-size: 24px; font-weight: 700; letter-spacing: 0.5px;
}
.info-price .item .price {
	margin-top: 13px; color: #fa8866; font-size: 13px; line-height: 14px;
}
.info-price .item .price span {
	display: block; font-size: 32px; font-weight: 500; letter-spacing: 0.99px; line-height: normal;
}
.info-price .item .text {
	margin: 17px 0 0; color: #fa8866; font-size: 18px; font-weight: 500; letter-spacing: 0.02px; line-height: 24px;
}
.info-price .item .reach {
	color: #515961; font-size: 15px; font-weight: 500; line-height: 24px;
}
.info-price .item ul {
	margin-top: 15px; text-align: left; color: #72808e; font-size: 14px; line-height: 24px;
}
.info-price .item ul li {
	position: relative; padding-left: 26px; margin-top: 9px;
}
.info-price .item ul li:after {
	display: block; content: ''; background: url(../i/check.svg) no-repeat; width: 15px; height: 13px; position: absolute; left: 0; top: 5px;
}
.info-price .item .bot {
	position: absolute; left: 0; right: 0; bottom: 38px;
}
.info-price .item .recom {
	position: relative; margin: 0 0 17px; background: #effbf5; display: inline-block; vertical-align: top; min-width: 191px; padding: 0 15px; height: 36px; line-height: 36px; border-radius: 18px; color: #47ca3f; font-size: 15px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.info-price .item .bt a {
	min-width: 160px; padding: 0 15px; height: 44px; line-height: 44px; border-radius: 8px; box-shadow: 0 7px 15px rgba(0, 0, 0, 0.12); font-size: 14px;
}
.info-price .item.active:before {
	display: block; content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 10px; border: 2px solid #ff7b5d;
}
.info-price .item.active .bot {
	bottom: 29px;
}
.info-price .outro {
	position: relative; max-width: 606px; margin: 93px auto 0; opacity: 0.85; letter-spacing: 0.5px; line-height: 25px; text-align: center;
}
.info-price .outro a {
	text-decoration: none;
}
.info-price .outro a:hover {
	text-decoration: underline;
}

.info-customer {
	margin-top: 77px;
}
.info-customer .subtext {
	margin-top: 18px; text-align: center; letter-spacing: 0.53px; line-height: 25px;
}
.info-customer .list {
	position: relative; display: flex; flex-wrap: wrap; margin-top: 22px;
}
.info-customer .list:before {
	display: block; content: ''; background: url(../i/customer-quote.svg) no-repeat; -webkit-background-size: cover; background-size: cover; width: 331px; height: 279px; position: absolute; left: -237px; top: -131px;
}
.info-customer .item {
	position: relative; width: 370px; box-shadow: 0 16px 37px rgba(0, 0, 0, 0.06); border-radius: 8px; background: #fff; margin: 50px 30px 0 0; padding: 40px 35px 110px;
}
.info-customer .item:nth-child(3n+3) {
	margin-right: 0;
}
.info-customer .item .photo img {
	width: 80px; height: 80px; border-radius: 40px;
}
.info-customer .item .text {
	margin-top: 30px; font-size: 15px; letter-spacing: 0.5px; line-height: 25px;
}
.info-customer .item .author {
	position: absolute; left: 0; right: 0; bottom: 34px; padding: 0 35px; 
}
.info-customer .item .author .name {
	color: #4d6a7d; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; 
}
.info-customer .item .author .post {
	margin-top: 10px; font-size: 14px; font-weight: 300; letter-spacing: 0.5px;
}
.info-customer .item .read {
	position: absolute; right: 25px; top: 39px; font-size: 14px; letter-spacing: 0.5px;
}
.info-customer .item .read a {
	color: #ff7b5d; text-decoration: none;
}
.info-customer .item .read a:hover {
	text-decoration: underline;
}
.info-customer .outro {
	position: relative; max-width: 606px; margin: 96px auto 0; opacity: 0.85; letter-spacing: 0.53px; line-height: 25px; text-align: center;
}
.info-customer .outro a {
	text-decoration: none;
}
.info-customer .outro a:hover {
	text-decoration: underline;
}
/* end info */


/* footer
------------------------------------------------ */
.site-footer {
	position: relative; min-width: 320px; margin-top: 160px;
}
.site-footer:before {
	display: block; content: ''; background: url(../i/footer-bg.png) center bottom no-repeat; height: 1230px; position: absolute; left: 0; right: 0; bottom: 0;
}
.site-footer .start {
	position: relative; max-width: 970px; padding: 58px 0 46px; background: #fff; border-radius: 12px; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.06); margin: auto; text-align: center;
}
.site-footer .start .title {
	font-size: 40px; font-weight: 800; letter-spacing: 0.5px; color: #444;
}
.site-footer .start .intro {
	position: relative; max-width: 620px; margin: 27px auto 0; color: #5c798c; letter-spacing: 0.53px; line-height: 25px;
}
.site-footer .start .bt {
	margin-top: 34px;
}
.site-footer .start .bt a {
	min-width: 175px; padding: 0 15px; height: 56px; line-height: 56px;
}
.site-footer .start .outro {
	position: relative; max-width: 620px; margin: 29px auto 0; color: #5c798c; letter-spacing: 0.53px; line-height: 23px;
}
.site-footer .menu {
	position: relative; max-width: 723px; margin: 72px auto 0; display: flex; justify-content: space-between;
}
.site-footer .menu .title {
	color: #fff; font-size: 24px; font-weight: 700; letter-spacing: 0.5px;
}
.site-footer .menu ul {
	margin-top: 51px; font-size: 15px; font-weight: 300; letter-spacing: 0.5px;
}
.site-footer .menu ul li {
	margin-top: 21px;
}
.site-footer .menu ul li a {
	color: #fff; text-decoration: none; transition: opacity .3s;
}
.site-footer .menu ul li a:hover {
	opacity: .6;
}
.site-footer .bot {
	border-top: 1px solid #899daa; display: flex; align-items: center; margin-top: 75px; height: 108px;
}
.site-footer .copy {
	width: 41%; color: #fff; font-size: 15px; font-weight: 300; letter-spacing: 0.5px;
}
.site-footer .social {
	display: flex; align-items: center;
}
.site-footer .social .level {
	margin-right: 20px; color: #fff; font-size: 13px; font-weight: 300; letter-spacing: 0.5px;
}
.site-footer .social .value {
	display: flex; align-items: center;
}
.site-footer .social .value a {
	display: block; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; margin-right: 15px; transition: opacity .3s;
}
.site-footer .social .value a:last-child {
	margin-right: 0;
}
.site-footer .social .value a.fb {
	background-image: url(../i/social-fb.svg); width: 14px; height: 23px;
}
.site-footer .social .value a.in {
	background-image: url(../i/social-in.svg); width: 24px; height: 24px;
}
.site-footer .social .value a.tw {
	background-image: url(../i/social-tw.svg); width: 24px; height: 19px;
}
.site-footer .social .value a:hover {
	opacity: .6;
}
.site-footer .lang {
	position: relative; margin-left: auto; z-index: 5;
}
.site-footer .lang > a {
	display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; color: #fff; transition: color .3s;
}
.site-footer .lang > a:after {
	position: relative; content: ''; display: inline-block; vertical-align: top; background: url(../i/lang-arr.svg) no-repeat; width: 14px; height: 8px; margin-left: 15px; top: 6px;
}
.site-footer .lang > a:hover {
	color: #ff7b5d;
}
.site-footer .lang .box {
	position: absolute; right: -7px; bottom: 100%; margin-bottom: 7px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1); background: #708ea2; border: 1px solid rgba(255,255,255,.41); width: 66px; display: none;
}
.site-footer .lang .box a {
	display: block; padding-left: 8px; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: 0.5px; line-height: 25px; text-transform: uppercase; text-decoration: none; transition: color .3s;
}
.site-footer .lang .box a:hover {
	color: #ff7b5d;
}
/* end footer */


@media screen and (max-width:1650px){
    
    .step-6 .content {width: 460px}
    .step-6 .title {font-size: 38px; line-height: 50px}
    .step-6 .mac {right: -140px}
}
@media screen and (max-width:1400px){
    
    .step-6 .mac {right: -25px; top: 100px; width: 800px; height: 434px}
    .step-6 .mac .img {width: 508px; height: 320px; left: 140px; top: 25px}
}
@media screen and (max-width:1200px){

    .step-2 .item {width: 32%; margin-right: 2%}

    .step-6 .content {width: 38%}
    .step-6 .title {font-size: 36px; line-height: 48px}
    .step-6 .text {font-size: 18px; line-height: 34px}

    .case-studies .item {width: 32%; margin-right: 2%}

    .info-customer .item {width: 32%; margin-right: 2%}
}
@media screen and (max-width:1100px){

    .site-header .r {margin-right: 270px}
    .site-header .menu > ul > li {margin-right: 20px}

    .step-1 .wrapper {min-height: 952px}
    .step-1 .mac {width: 990px; height: 536px; margin-left: -495px}
    .step-1 .mac .in {width: 630px; height: 392px; left: 171px; top: 31px}

    .step-6 .content {width: 42%}
    .step-6 .mac {width: 704px; height: 382px; right: -20px; top: 100px}
    .step-6 .mac .img {width: 447px; height: 282px; left: 122px; top: 22px}

    .info-price .item {width: 31%; margin-right: 3.5%}
}
@media screen and (min-width:1001px){
    
    .site-header .menu > ul {display: flex !important}
	
	.site-header {
		position: sticky;
		top: 0;
		z-index: 250;
	}
	body {
		padding-top: 0; /* No extra padding needed above 1000px */
	}
}
@media screen and (max-width:1000px){

    H1 {font-size: 34px}
    H2 {font-size: 25px}
    H3 {font-size: 24px}
    H4 {font-size: 21px}

    .supertitle {font-size: 30px}

    a.button {height: 50px; line-height: 50px}
	
	body {
		padding-top: 60px; /* same as header’s height */
	  }
  
	.site-header {
		transition: top 0.3s ease-in-out; 
		position: fixed; /* so we can move it up/down */
		width: 100%;     /* ensure it spans the width */
		top: 0;          /* default visible position */
		left: 0;         /* anchor it */
		right: 0;        /* anchor it */
	  }

    .site-header {height: 60px}
    .site-header .logo {padding-top: 11px}
    .site-header .r {margin-right: 71px}
    .site-header .menu {}
    .site-header .menu .bt {display: block}
    .site-header .menu > ul {display: block; display: none; position: absolute; right: 0; top: 0; background: #fff; box-shadow: 0 18px 24px rgba(0, 0, 0, 0.14), 0 0 1px rgba(0, 0, 0, 0.14); width: 251px; padding: 87px 29px 37px}
    .site-header .menu > ul > li {margin: 20px 0 0 0}
    .site-header .menu > ul > li:first-child {margin-top: 0}
    .site-header .menu > ul > li > a {height: auto; line-height: normal; font-size: 14px}
    .site-header .menu > ul > li.list > a:after {display: block; position: absolute; right: 0; margin: 0; top: 5px}
    .site-header .menu > ul > li ul {display: none; position: static; margin: 0; box-shadow: none; width: auto; padding: 0; border-radius: 0; border-top: 1px solid #d8d8d8; margin-top: 15px; padding-top: 10px}
    .site-header .menu > ul > li ul li {margin: 15px 0 0 0}
    .site-header .menu > ul > li ul li a {padding: 0; font-size: 14px}
    .site-header .menu > ul > li:hover > a {color: #253858}
    .site-header .menu > ul > li.active > a {color: #ff7b5d}
    .site-header .act {position: static; margin-top: 11px}
    .site-header .act a {height: 36px}
    .site-header .act a.login {min-width: 74px}
    .site-header .act a.go {min-width: 111px}
	
	.site-header .act2 {position: static; margin-top: 11px}
    .site-header .act2 a {height: 36px}
    /*.site-header .act2 a.go {min-width: 111px}*/

    .widget-box {width: 673px; padding: 40px 35px}
    .widget-box .text {max-width: 414px; font-size: 18px; line-height: 30px}
    .widget-box .bt a {min-width: 150px}

    .step-1:before {background: url(../i/step1-bg-tab.png) center top no-repeat; height: 641px}
    .step-1 .wrapper {padding-top: 48px; padding-bottom: 432px; min-height: 0}
    .step-1 .title {font-size: 32px}
    .step-1 .text {margin-top: 13px; max-width: 519px; font-size: 16px; line-height: 28px}
    .step-1 .bt {margin-top: 37px}
    .step-1 .bt a {height: 50px}
    .step-1 .bt a.cust {min-width: 271px}
    .step-1 .bt a.go {min-width: 170px}
    .step-1 .mac {margin-left: -347px; width: 705px; height: 382px}
    .step-1 .mac .in {width: 447px; height: 279px; left: 123px; top: 22px}

    .step-2 {margin-top: 36px}
    .step-2 .subtext {margin-top: 15px; max-width: 581px}
    .step-2 .list {position: relative; display: block; margin: 41px auto 0; max-width: 560px}
    .step-2 .item {position: relative; width: auto; margin: 20px 0 0 0; padding: 23px 26px 27px 150px; text-align: left}
    .step-2 .item .img {position: absolute; left: 33px; top: 27px; height: auto; text-align: left}
    .step-2 .item .title {font-size: 22px}
    .step-2 .item .for {margin-top: 4px}
    .step-2 .item .text {margin-top: 11px}
    .step-2 .item .more {margin-top: 23px}

    .step-3 {margin-top: 156px}
    .step-3 .wrapper {padding-top: 135px; padding-bottom: 65px}
    .step-3 .widget-box {top: -70px; margin-left: -336.5px}
    .step-3 .supertitle {max-width: 579px; line-height: 42px}
    .step-3 .list {margin-top: 52px}
    .step-3 .item {width: 32%; margin-right: 2%}
    .step-3 .item .img {height: 100px}
    .step-3 .item .img .ic-1 {width: 89px; height: 100px}
    .step-3 .item .img .ic-2 {width: 99px; height: 100px}
    .step-3 .item .img .ic-3 {width: 78px; height: 100px}
    .step-3 .item .img .ic-4 {width: 100px; height: 53px}
    .step-3 .item .title {margin-top: 27px; font-size: 22px}

    .step-4a {margin-top: 59px}
    .step-4a .subtext {margin-top: 15px}
    .step-4a .logo {margin-top: 20px}
    .step-4a .widget-box {margin-top: 68px}

    .step-4b {margin-top: 69px}
    .step-4b .list {margin-top: 0}
    .step-4b .item {margin-right: 30px}

    .step-5 {margin-top: 72px}

    .step-5a {padding-top: 62px}
    .step-5a .subtitle {font-size: 28px}
    .step-5a .slider {margin-top: 39px; padding: 0 54px}
    .step-5a .slider:before {width: 227px; height: 191px; top: -114px; left: -99px}
    .step-5a .item {margin: 20px 14px 40px; padding: 30px 30px 115px; box-shadow: 0 12px 16px rgba(0, 0, 0, 0.07)}
    .step-5a .item .text {margin-top: 20px}
    .step-5a .item .author {padding: 0 30px}
    .step-5a .item .read {right: 30px}

    .step-5b {margin-top: 83px}
    .step-5b .subtext {margin-top: 31px}
    .step-5b .list {margin-top: 15px}
    
    .step-6:before {background: url(../i/step6-bg-tab.png) center top no-repeat; height: 681px}
    .step-6 .wrapper {padding-bottom: 431px}
    .step-6 .content {width: auto; padding-top: 48px; text-align: center}
    .step-6 .title {margin-left: auto; margin-right: auto; font-size: 32px; line-height: normal}
    .step-6 .text {margin: 16px auto 0; max-width: 519px; font-size: 16px; line-height: 28px}
    .step-6 .bt {margin-top: 30px}
    .step-6 .bt a {height: 50px; line-height: 50px}
    .step-6 .mac {position: absolute; left: 50%; right: auto; top: auto; bottom: 0; width: 704px; height: 382px; margin-left: -352px}
    .step-6 .mac .img {width: 447px; height: 282px; left: 122px; top: 22px}

    .step-7 {margin-top: 35px}
    .step-7 .list {max-width: 640px; margin-top: 36px}
    .step-7 .item {margin-top: 40px}
    .step-7 .item:first-child {margin-top: 0}
    .step-7 .item .img {flex: 0 0 162px}
    .step-7 .item .img img {width: 140px; height: 140px}
    .step-7 .item .entry {margin-top: 10px}
    .step-7 .item .title {padding-left: 48px; font-size: 20px}
    .step-7 .item .title span {width: 35px; height: 35px; line-height: 35px; font-size: 22px}
    .step-7 .item .text {margin: 10px 0 0 48px; line-height: 26px}
    .step-7 .item .scheme {margin: 15px 0 0 48px}

    .step-8 {margin-top: 129px; background: #fbfbfc}
    .step-8 .wrapper {padding-top: 133px; padding-bottom: 47px}
    .step-8 .widget-box {width: 673px; margin-left: -336px; top: -70px}
    .step-8 .content {display: block}
    .step-8 .list {margin: 38px auto 0; width: auto; max-width: 650px}
    .step-8 .list ul li {margin-top: 15px}
    .step-8 .list ul li:after {top: 7px}
    .step-8 .img {margin: 32px auto 0; width: auto; max-width: 501px; text-align: center}

    .case-studies {margin-top: 50px}
    .case-studies .intro {margin-top: 14px; font-size: 16px}
    .case-studies .outro {margin-top: 71px}
    .case-studies .list {margin-top: 16px}

    .case-study {margin-top: 50px}
    .case-study .subtitle {max-width: none; text-align: center}
    .case-study .basic {margin-top: 40px; padding: 36px 0 35px}
    .case-study .basic .top {max-width: none}
    .case-study .basic .link {top: 15px}
    .case-study .basic .char .item {width: 33.333% !important}
    .case-study .body {display: block; border-bottom: 1px solid #e8e8e8; padding-bottom: 97px}
    .case-study .content {width: auto; margin-top: 40px}
    .case-study .text-box {border: 0; padding: 0}
    .case-study .comment {margin-top: 64px}
    .case-study .outro {margin-top: 65px}
    .case-study .stat {width: auto; margin-top: 54px; padding: 34px 5px 39px; display: flex}
    .case-study .stat .item {margin: 0; padding: 0 10px; width: 25%}
    .case-study .stat .value {font-size: 34px}
    .case-study .stat .level {margin-top: 9px; font-size: 15px; line-height: 20px}

    .info-contact {margin-top: 48px}
    .info-contact .subtext {margin-top: 5px}
    .info-contact .mail {margin-top: 34px}

    .info-customer {margin-top: 52px}
    .info-customer .list {margin: 19px auto 0; max-width: 650px}
    .info-customer .list:before {width: 212px; height: 179px; left: -84px; top: -19px}
    .info-customer .item {width: 48%; margin-right: 4%; margin-top: 37px; padding: 40px 32px 110px}
    .info-customer .item:nth-child(3n+3) {margin-right: 4%}
    .info-customer .item:nth-child(2n+2) {margin-right: 0}
    .info-customer .item .author {padding: 0 32px}
    .info-customer .outro {margin-top: 76px}

    .info-history {margin-top: 50px}
    .info-history .text-box {margin-top: 36px}

    .info-jobs {margin-top: 50px}
    .info-jobs .intro {margin-top: 21px}
    .info-jobs .mail {margin-top: 67px}

    .info-job {margin-top: 20px}
    .info-job .back {margin-bottom: 28px}
	.case-study .back {margin-bottom: 28px}
    .info-job .loc {margin-top: 4px; font-size: 16px; line-height: 25px}
    .info-job .text-box {margin-top: 54px}
    .info-job .mail {margin-top: 61px}

    .info-price {margin-top: 52px}
    .info-price .subtext {font-size: 22px}
    .info-price .vis {max-width: 580px}
    .info-price .list {margin-top: 60px}
    .info-price .item {padding-left: 25px; padding-right: 25px}
    .info-price .outro {margin-top: 80px}

    .site-footer {margin-top: 100px}
}
@media screen and (max-width:900px){

    .case-studies .item {width: 48%; margin-right: 4%}
    .case-studies .item:nth-child(3n+3) {margin-right: 4%}
    .case-studies .item:nth-child(2n+2) {margin-right: 0}
}
@media screen and (max-width:800px){

    .info-price .item {width: 32%; margin-right: 2%; padding-left: 20px; padding-right: 20px}
    .info-price .item .reach {font-size: 14px}

    .info-customer .outro {max-width: 500px}

    .info-history .text-box > *:last-child {max-width: 600px}

    .info-job .text-box {max-width: 600px}

    .info-price .outro {max-width: 500px}

    .case-studies .outro {max-width: 500px}

    .case-study .outro {margin-right: 100px}

    .site-footer {margin-top: 60px}
    .site-footer:before {background: url(../i/footer-bg-tab.png) center bottom no-repeat; height: 1047px}
    .site-footer .start {max-width: 673px; padding: 38px 20px 41px}
    .site-footer .start .title {font-size: 30px}
    .site-footer .start .intro {max-width: 545px; margin-top: 14px}
    .site-footer .start .bt {margin-top: 33px}
    .site-footer .start .outro {max-width: 583px; margin-top: 32px}
    .site-footer .menu {max-width: 578px; margin-top: 50px}
    .site-footer .bot {margin-top: 50px}
}
@media screen and (max-width:700px){

    .widget-box {display: block; width: auto; padding: 21px 15px 30px; text-align: center}
    .widget-box .text {max-width: none; padding-right: 0; font-size: 17px; line-height: 28px}
    .widget-box .bt {margin-top: 19px}

    .step-1 .wrapper {padding-bottom: 372px}
    .step-1 .mac {width: 596px; height: 322px; margin-left: -298px}
    .step-1 .mac .in {width: 378px; height: 238px; left: 104px; top: 18px}
    
    .step-3 .wrapper {padding-top: 159px; padding-bottom: 64px}
    .step-3 .widget-box {width: auto; margin-left: 0; left: 15px; right: 15px; top: -68px; padding-left: 25px; padding-right: 25px}
    .step-3 .list {display: block; margin-top: 45px}
    .step-3 .item {width: auto; margin-right: 0; margin-top: 40px}
    .step-3 .item .img {display: block; height: auto}
    .step-3 .item .title {margin-top: 24px; font-size: 20px}

    .step-6 .wrapper {padding-bottom: 369px}
    .step-6 .mac {width: 590px; height: 320px; margin-left: -295px}
    .step-6 .mac .img {width: 376px; height: 238px; left: 103px; top: 17px}

    .step-8 .widget-box {width: auto; margin-left: 0; left: 15px; right: 15px; padding-left: 25px; padding-right: 25px}

    .case-study .stat {display: block; padding: 33px 15px; margin-top: 67px}
    .case-study .stat .item {width: auto; margin-top: 30px}
    .case-study .stat .value {font-size: 38px}
    .case-study .stat .level {margin-top: 6px; max-width: none; font-size: 15px; line-height: 26px}

    .info-price .list {position: relative; margin: 50px auto 0; display: block; max-width: 320px}
    .info-price .item {width: auto; margin-top: 32px; padding: 0 33px 31px}
    .info-price .item:first-child {margin-top: 0}
    .info-price .item .title {font-size: 22px}
    .info-price .item .bot {position: relative; left: auto; right: auto; bottom: auto !important; margin-top: 29px}
    .info-price .item .recom {margin-bottom: 23px}
    .info-price .item .bt a {min-width: 130px; height: 40px; line-height: 40px}
    .info-price .outro {margin-top: 64px}

    .site-footer .bot {display: block; height: auto; padding: 22px 0}
    .site-footer .copy {width: auto}
    .site-footer .social {margin-top: 17px}
    .site-footer .lang {margin-top: 15px}
    .site-footer .lang .box {background: #708ea2; right: auto; left: -7px}
}
@media screen and (max-width:600px){

    H1 {font-size: 22px}
    H2 {font-size: 20px}
    H3 {font-size: 20px}
    H4 {font-size: 18px}

    .supertitle {font-size: 21px}

    .text-box {line-height: 27px}
    .text-box H2, .text-box H3, .text-box H4 {margin-bottom: 17px}
    .text-box p {margin-bottom: 25px}
    .text-box ul li {padding-left: 28px}

    .mb-40 {margin-bottom: 25px !important}
    .mb-28 {margin-bottom: 15px !important}

    .step-1:before {background: url(../i/step1-bg-mob.png) center top no-repeat; height: 608px}
    .step-1 .wrapper {padding-top: 40px; padding-bottom: 229px}
    .step-1 .title {max-width: 287px; margin: auto; font-size: 25px}
    .step-1 .text {margin-top: 21px; max-width: 287px; line-height: 26px; font-weight: 400}
    .step-1 .bt {margin-top: 21px; display: block}
    .step-1 .bt a {min-width: 0 !important; margin: 11px 0 0 0 !important}
    .step-1 .mac {margin-left: -170px; width: 347px; height: 188px}
    .step-1 .mac .in {width: 220px; height: 137px; left: 60px; top: 10px}

    .step-2 {margin-top: 42px}
    .step-2 .subtext {margin-top: 13px; font-size: 15px; line-height: 23px}
    .step-2 .list {margin-top: 35px}

    .step-3 .supertitle {line-height: 32px}

    .step-4a {margin-top: 39px}
    .step-4a .subtext {margin-top: 18px}
    .step-4a .logo {margin-top: 0}
    .step-4a .logo .item {margin: 35px 6px 0 0}
    .step-4a .logo .item:last-child {margin-right: 0}
    .step-4a .logo .item .dclk {width: 183px; height: 37px}
    .step-4a .logo .item .openx {width: 95px; height: 36px}
    .step-4a .widget-box {margin-top: 40px}

    .step-4b {margin-top: 51px}
    .step-4b .list {margin: 4px -9px 0}
    .step-4b .item {margin: 20px 9px 0 !important}
    .step-4b .item .skystream {width: 111px; height: 13px}
    .step-4b .item .tyent {width: 62px; height: 46px}
    .step-4b .item .fivehundredlevel {width: 78px; height: 31px}
    .step-4b .item .epic {width: 57px; height: 34px}
    .step-4b .item .nichecanvas {width: 136px; height: 27px}

    .step-5 {margin-top: 30px}

    .step-5a {padding-top: 33px}
    .step-5a .subtitle {margin: 0 -10px; font-size: 19px}
    .step-5a .slider {margin: 0 -5px; padding: 0 17px}
    .step-5a .slider:before {width: 141px; height: 118px; top: -19px; left: -70px}
    .step-5a .item {margin: 40px 20px 51px; padding: 34px 24px 110px}
    .step-5a .item .photo img {width: 69px; height: 69px}
    .step-5a .item .text {font-size: 14px}
    .step-5a .item .author {bottom: 38px; padding: 0 24px}
    .step-5a .item .read {top: 35px; right: 18px; font-size: 13px}
    .step-5a .arr-l, .step-5a .arr-r {width: 31px; height: 31px; margin-top: -16px}
    .step-5a .arr-l:after {margin-left: -5px}
    .step-5a .arr-r:after {margin-left: -3px}
    .step-5a .get a {min-width: 170px; height: 50px; line-height: 50px}

    .step-5b {margin-top: 63px}
    .step-5b .subtext {margin-top: 19px}
    .step-5b .list {margin: 13px -10px 0}
    .step-5b .item {margin: 20px 8px 0}
    .step-5b .item .magento {width: 136px; height: 38px}
    .step-5b .item .woocommerce {width: 138px; height: 28px}
    .step-5b .item .prestashop {width: 138px; height: 25px}
    .step-5b .item .opencart {width: 117px; height: 37px}
    .step-5b .item .wordpress {width: 234px; height: 47px}

    .step-6:before {background: url(../i/step6-bg-mob.png) center top no-repeat; height: 608px}
    .step-6 .wrapper {padding-bottom: 219px}
    .step-6 .content {padding-top: 32px}
    .step-6 .title {max-width: 300px; font-size: 25px}
    .step-6 .text {margin-top: 29px; font-size: 16px; line-height: 26px; font-weight: 400}
    .step-6 .bt {margin-top: 25px}
    .step-6 .bt a {display: block; min-width: 0}
    .step-6 .mac {width: 345px; height: 187px; margin-left: -169px}
    .step-6 .mac .img {width: 219px; height: 138px; left: 60px; top: 11px}

    .step-7 {margin-top: 25px}
    .step-7 .list {margin-top: 38px}
    .step-7 .item {display: block; margin-top: 29px}
    .step-7 .item .img {text-align: center !important}
    .step-7 .item .img img {width: 104px; height: 104px}
    .step-7 .item .entry {margin-top: 19px}
    .step-7 .item .title {font-size: 18px}
    .step-7 .item .title span {top: -6px}
    .step-7 .item .text {margin-top: 13px; font-size: 15px; line-height: 24px}
    .step-7 .item .scheme {margin-left: 0; margin-top: 19px}

    .step-8 {margin-top: 132px}
    .step-8 .wrapper {padding-top: 159px; padding-bottom: 46px}
    .step-8 .widget-box {margin: 0; left: 15px; right: 15px; top: -68px; width: auto}
    .step-8 .list {margin-top: 32px}
    .step-8 .list ul {font-size: 15px; line-height: 24px}
    .step-8 .list ul li:after {top: 5px}

    .case-studies {margin-top: 39px}
    .case-studies .intro {margin-top: 12px}
    .case-studies .list {margin-top: 39px; display: block}
    .case-studies .item {width: auto; margin-right: 0 !important; margin-top: 22px; padding: 10px 24px 28px}
    .case-studies .item .more {position: static; padding: 0; margin-top: 29px}

    .case-study {margin-top: 35px}
    .case-study .basic {margin-top: 28px; padding: 16px 0 23px}
    .case-study .basic .title {margin-top: 5px; font-size: 18px}
    .case-study .basic .link {top: 4px}
    .case-study .basic .link a {width: 36px; height: 34px; padding: 0}
    .case-study .basic .link a span {display: none}
    .case-study .basic .link a:before {margin-right: 0}
    .case-study .basic .char {display: block; margin-top: 21px}
    .case-study .basic .char .item {width: auto !important; padding: 0; margin-top: 17px}
    .case-study .basic .char .item:after {display: none}
    .case-study .basic .char .level {font-size: 15px}
    .case-study .basic .char .value {font-size: 15px}
    .case-study .body {padding-bottom: 65px}
    .case-study .content {margin-top: 27px}
    .case-study .comment {margin-top: 44px; padding: 33px 32px 43px}
    .case-study .comment .author {margin-top: 21px}
    .case-study .outro {margin-right: 0; text-align: center}

    .info-contact {margin-top: 22px}
    .info-contact .subtext {margin-top: 3px; font-size: 15px}
    .info-contact .mail {margin-top: 24px}
    .info-contact .mail .value {margin-top: 25px}
    .info-contact .list {margin-top: 29px}
    .info-contact .list .item {margin-top: 29px}
    .info-contact .list .level {font-size: 20px}
    .info-contact .list .level:after {top: 8px}
    .info-contact .list .value {margin-top: 9px}

    .info-customer {margin-top: 39px}
    .info-customer .list {display: block; margin-top: 46px}
    .info-customer .list:before {width: 129px; height: 109px; top: -27px; left: -58px}
    .info-customer .item {width: auto; margin-right: 0 !important; margin-top: 29px; padding: 30px 27px 106px}
    .info-customer .item .text {margin-top: 22px}
    .info-customer .item .read {top: 29px; right: 21px}
    .info-customer .item .author {padding: 0 27px; bottom: 27px}
    .info-customer .outro {margin-top: 60px}

    .info-history {margin-top: 32px}
    .info-history .text-box {margin-top: 25px}

    .info-jobs {margin-top: 37px}
    .info-jobs .intro {margin-top: 20px}
    .info-jobs .list {margin-top: 37px}
    .info-jobs .item {margin-top: 13px}
    .info-jobs .item a {padding: 16px 16px 21px 16px}
    .info-jobs .item a .title {font-size: 17px; line-height: 22px}
    .info-jobs .item a .n {margin-top: 7px; font-size: 14px}
    .info-jobs .item a .time {bottom: 16px; right: 18px; padding: 0 13px; height: 21px; line-height: 21px; font-size: 14px}
    .info-jobs .mail {margin-top: 58px}

    .info-job .back {margin-bottom: 16px; font-size: 15px}
    .info-job .back a:before {top: 4px}
	.case-study .back {margin-bottom: 16px; font-size: 15px}
    .case-study .back a:before {top: 4px}
    .info-job .text-box {margin-top: 27px}
    .info-job .mail {margin-top: 43px}

    .info-price {margin-top: 39px}
    .info-price .subtext {margin-top: 20px; font-size: 16px; line-height: 23px}
    .info-price .vis {margin-top: 38px}
    .info-price .vis .ui-slider-horizontal .ui-slider-handle {width: 16px; height: 16px; margin-left: -8px; top: -4px}
    .info-price .vis .ui-slider-horizontal .ui-slider-handle:after {border-width: 3px}
}
@media screen and (max-width:500px){

    /*.site-header {height: 60px}
    .site-header .logo {position: relative; z-index: 5; float: none; padding-top: 14px}
    .site-header .logo a {display: block; width: 115px; height: 32px; background: url(../i/logo.svg) no-repeat; -webkit-background-size: cover; background-size: cover}
    .site-header .logo a img {display: none}
    .site-header .r {float: none; margin-right: 0}
    .site-header .menu .bt {top: 19px}
    .site-header .menu > ul {width: auto; left: 0}
    .site-header .menu > ul > li ul li a {font-size: 13px}*/
	
	.site-header {height: 60px}
	.site-header .logo {padding-top: 12px}
    .site-header .logo a {width: 115px; height: 32px;}
    .site-header .menu .bt {top: 19px}
    .site-header .menu > ul > li.hd {display: block}
    .site-header .act {display: none}
	.site-header .act2 {margin-top: 12px}
	.site-header .act2 a.go {padding: 0 8px;}
	
	body {
		padding-top: 60px;
	  }

    .site-footer:before {background: url(../i/footer-bg-mob.png) center bottom no-repeat; height: 1116px}
    .site-footer .start {padding: 35px 20px 36px}
    .site-footer .start .title {font-size: 21px}
    .site-footer .start .intro {margin-top: 13px; font-size: 15px; line-height: 24px}
    .site-footer .start .bt {margin-top: 14px}
    .site-footer .start .bt a {height: 50px; line-height: 50px}
    .site-footer .start .outro {margin-top: 24px; font-size: 15px}
    .site-footer .menu {display: block; margin: 52px 0 0 9px}
    .site-footer .menu .item {margin-top: 38px}
    .site-footer .menu .title {font-size: 20px}
    .site-footer .menu ul {margin-top: 23px}
    .site-footer .menu ul li {margin-top: 15px}
    .site-footer .bot {margin: 38px -15px 0; padding-left: 24px; padding-right: 15px}
}
@media screen and (max-width:400px){
	
	.site-header .r {margin-right: 52px}
	.site-header .act2 a {font-size: 13px;}

    .step-2 .item {padding: 30px 15px 26px; text-align: center}
    .step-2 .item .img {position: static; text-align: center}
    .step-2 .item .title {margin-top: 24px; font-size: 20px}
    .step-2 .item .for {margin-top: 7px}
    .step-2 .item .text {margin-top: 15px}
    .step-2 .item .more {margin-top: 24px}
}

/* For screens under 370px */
@media (max-width: 370px) {
	
	
	.site-header .act2 a {font-size: 12px;}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5){

    .step-1 .mac {
        background-image: url('../i/step1-mac@2x.png');
        background-size: 1170px 634px;
    }

    .step-4a .logo .item .dclk {
        background-image: url('../i/logo/dclk@2x.png');
        background-size: 345px 71px;
    }
    .step-4a .logo .item .openx {
        background-image: url('../i/logo/openx@2x.png');
        background-size: 180px 69px;
    }

    .step-4b .item .skystream {
        background-image: url('../i/logo/skystream@2x.png');
        background-size: 131px 16px;
    }
    .step-4b .item .tyent {
        background-image: url('../i/logo/tyent@2x.png');
        background-size: 93px 70px;
    }
    .step-4b .item .fivehundredlevel {
        background-image: url('../i/logo/fivehundredlevel@2x.png');
        background-size: 122px 50px;
    }
    .step-4b .item .epic {
        background-image: url('../i/logo/epic@2x.png');
        background-size: 73px 44px;
    }
    .step-4b .item .nichecanvas {
        background-image: url('../i/logo/nichecanvas@2x.png');
        background-size: 203px 41px;
    }

    .step-5b .item .shopify {
        background-image: url('../i/logo/shopify@2x.png');
        background-size: 117px 33px;
    }
    .step-5b .item .magento {
        background-image: url('../i/logo/magento@2x.png');
        background-size: 150px 42px;
    }
    .step-5b .item .woocommerce {
        background-image: url('../i/logo/woocommerce@2x.png');
        background-size: 167px 34px;
    }
    .step-5b .item .prestashop {
        background-image: url('../i/logo/prestashop@2x.png');
        background-size: 158px 29px;
    }
    .step-5b .item .opencart {
        background-image: url('../i/logo/opencart@2x.png');
        background-size: 130px 42px;
    }
    .step-5b .item .wordpress {
        background-image: url('../i/logo/wordpress@2x.png');
        background-size: 298px 61px;
    }

    @media screen and (max-width:1100px){

        .step-1 .mac {background-size: 990px 536px}
    }

    @media screen and (max-width:1000px){

        .step-1 .mac {background-size: 705px 382px}
    }

    @media screen and (max-width:700px){

        .step-1 .mac {background-size: 596px 322px}
    }

    @media screen and (max-width:600px){

        .step-1 .mac {background-size: 347px 188px}
        
        .step-4a .logo .item .dclk {background-size: 183px 37px}
        .step-4a .logo .item .openx {background-size: 95px 36px}

        .step-4b .item .skystream {background-size: 111px 13px}
        .step-4b .item .tyent {background-size: 62px 46px}
        .step-4b .item .fivehundredlevel {background-size: 78px 31px}
        .step-4b .item .epic {background-size: 57px 34px}
        .step-4b .item .nichecanvas {background-size: 136px 27px}

        .step-5b .item .magento {background-size: 136px 38px}
        .step-5b .item .woocommerce {background-size: 138px 28px}
        .step-5b .item .prestashop {background-size: 138px 25px}
        .step-5b .item .opencart {background-size: 117px 37px}
        .step-5b .item .wordpress {background-size: 234px 47px}
    }

}

@media (hover: none) {

    .step-5a .arr-l:hover, .step-5a .arr-r:hover {background: rgba(255,123,93,.56)}
}

.group-blocks{
	margin-bottom: 2rem;
}