img {
	height: auto;
	max-width: 100%;
}
html {
	font-size: 16px;
}
.first-fold {
	height: 100vh;
	background: #f7f7f7 url(../../img2/lp-circle.png) no-repeat 20% center;
	position: relative;
}
.txt {
	z-index: 2;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.txt h2 {
	color: #261d36;
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 40px;
}
.txt h2 span {
	color: #3ecadd;
	line-height: 1.2;
}
.txt p {
	margin-bottom: 20px;
	line-height: 1.6;
}
.txt h4 {
	color: #00417d;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 20px;
}
.fold-graphic {
	position: absolute;
	right: -8%;
	top: 50%;
	transform: translateY(-50%);
width:calc( 100px + (1202 - 100) * (100vw - 320px) / (1920 - 320) );
	height: auto;
}
.clouds {
	z-index: 0;
	height: auto;
	position: absolute;
}
.clouds svg {
	max-width: 100%;
}
.cloud1 {
	width: 127px;
	top: 10%;
	left: -5%;
	/* Animation shorthand syntax order: name, duration, timing-function, delay, iteration-count, direction, fill-mode */
	-webkit-animation: move 20s linear infinite;
	-moz-animation: move 20s linear infinite;
	-o-animation: move 20s linear infinite;
	animation: move 20s linear infinite;
}
.cloud2 {
	width: 157px;
	top: 30%;
	left: -10%;
	-webkit-animation: move 35s linear 10s infinite backwards;
	-moz-animation: move 35s linear 10s infinite backwards;
	-o-animation: move 35s linear 10s infinite backwards;
	animation: move 35s linear 10s infinite backwards;
}
.cloud3 {
	top: 80%;
	left: -40%;
	width: 107px;
	-webkit-animation: move 55s linear 10s infinite backwards;
	-moz-animation: move 55s linear 10s infinite backwards;
	-o-animation: move 55s linear 10s infinite backwards;
	animation: move 55s linear 10s infinite backwards;
}
.cloud4 {
	top: 30%;
	left: -20%;
	width: 70px;
	-webkit-animation: move 55s linear 10s infinite backwards;
	-moz-animation: move 55s linear 10s infinite backwards;
	-o-animation: move 55s linear 10s infinite backwards;
	animation: move 55s linear 10s infinite backwards;
}
 @-webkit-keyframes move {
 from {
-webkit-transform: translateX(-400px);
}
to {
	-webkit-transform: translateX(2050px);
}
}
.section {
	position: relative;
	padding: 70px 0;
}
.section:after {
	top: 0;
	position: absolute;
	content: attr(data-headings);
	left: 0;
	right: 0;
	color: #30343e;
	font-size: 13.125em;
	font-weight: 700;
	text-transform: uppercase;
	width: 100%;
	text-align: center;
	line-height: 1;
	z-index: 0;
}
.optimization {
	background: #22262f;
}
.optimization h2 {
	color: #fff;
	line-height: 1.3;
	font-size: 2.18em;
	font-weight: 600;
	margin: 0 0 60px 0;
	position: relative;
	max-width: 550px;
}
.optimization h2:after {
	background: #fff;
	width: 70px;
	height: 3px;
	position: absolute;
	left: 0;
	bottom: -15px;
	content: "";
}
.section .fix-container {
	position: relative;
	z-index: 1;
}
.tabs {
	z-index: 15px;
	position: relative;
	/*overflow: hidden;*/
	display: table;
	width: 100%;
}
.tabs-header {
	position: absolute;
	right: 0;
	overflow: hidden;
	float: right;
	width: 682px;
	height: 452px;
	top: -113px;
}
.tabs-header .border {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #F4B142;
	width: auto;
	height: 2px;
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
}
.tabs-header ul {
}
.tabs-header li {
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
}
.tabs-header li.active {
}
.tabs-header a {
	z-index: 1;
	display: block;
	padding: 15px 20px;
	color: #FFFFFF;
	font-weight: 500;
	text-decoration: none;
	height: 100%;
}
.tabs-nav {
	position: absolute;
	bottom: -72px;
	right: 0;
	padding: 0;
}
.tabs-nav i {
	display: inline-block;
	width: 58px;
	height: 51px;
	padding: 16px 0;
	text-align: center;
	position: relative;
	cursor: pointer;
	float: left;
}
.tabs-nav i svg {
	width: 20px;
	height: 20px;
	fill: #000;
	text-align: center;
	margin: 0 auto;
}
.tabs-nav i.prev {
	background: url(../../img2/retina/hexagon-black.svg) no-repeat 0 0;
	background-size: contain;
	margin-top: 32px;
	transform: rotate(-180deg);
}
.tabs-nav i.next {
	background: url(../../img2/retina/hexagon.svg) no-repeat 0 0;
	background-size: contain;
}
.tabs-content {
	position: relative;
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
	/*	overflow: hidden;*/
	float: left;
	max-width: 540px;
	margin-bottom: 100px;
}
.tabs-content .tab {
	display: none;
}
.tabs-content .tab.active {
	display: block;
}
.tabs-content h4 {
	color: #fff;
	font-size: 1.20em;
	font-weight: 600;
	margin: 15px 0;
}
.tabs-content p {
	color: #999999;
	line-height: 1.6;
	margin: 10px 0;
}
.hexagon {
	background: url(../../img2/retina/hexagon.svg) no-repeat 0 0;
	background-size: contain !important;
	position: absolute;
	width: 200px;
	height: 173px;
	left: 0;
	top: 0;
}
.hexagon.yellow2 {
	left: 322px;
	top: 187px;
}
.hexagon.red {
	left: 0;
	top: 183px;
	background: url(../../img2/retina/hexagon-red.svg) no-repeat 0 0;
}
.hexagon.white {
	left: 161px;
	top: 93px;
	background: url(../../img2/retina/hexagon-white.svg) no-repeat 0 0;
}
.hexagon.blue {
	left: 161px;
	top: 278px;
	background: url(../../img2/retina/hexagon-blue.svg) no-repeat 0 0;
}
.hexagon.seegreen {
	left: 322px;
	top: 0;
	background: url(../../img2/retina/hexagon-seegreen.svg) no-repeat 0 0;
}
.hexagon.black {
	left: 480px;
	top: 93px;
	background: url(../../img2/retina/hexagon-black.svg) no-repeat 0 0;
}
.hexagon .icn {
	max-width: 70px;
	margin: 0 auto;
	margin-top: 10px;
	display: block;
}
.hexagon p {
	font-size: 0.8em;
	max-width: 100px;
	color: #000;
	text-align: center;
	margin: 15px auto;
	font-weight: 600;
}
.cta-wrapper {
	padding: 35px 0;
	
}
.yellow-cta {
	background: #fad81d;
}
.black-cta {
	background: #252934;
}
.cta h3 {
	color: #000;
	font-size: 2.0em;
	font-weight: 600;
	display: inline-block;
}
.cta a.cta-btn {
	float: right;
	background: #22262f;
	color: #fff;
	font-size: 1.2em;
}
.cta a.cta-btn i.svg svg {
	fill: #fff;
	width: 22px;
	height: 23px;
}
.black-cta h3 {
	color: #fff;
}
.black-cta a.cta-btn {
	background: #d9d9d8;
	color: #393f40;
}
.black-cta a.cta-btn i.svg svg {
	fill: #393f40;
}
.section-heading {
	margin: 0 auto;
	text-align: center;
}
.section-heading h2 {
	margin: 15px auto;
	color: #000;
	font-size: 2.18em;
	font-weight: 600;
	display: block;
}
.why-choose {
	padding: 40px 0;
	background: url(../../img2/circles.jpg) no-repeat center left;
}
.lp-tab-container {
	display: table;
	width: 100%;
	margin: 100px 0 80px 0;
	padding: 0;
}
.lp-tab-menu {
	width: 620px;
	float: right;
	position: relative;
}
.lp-tab-menu:after {
	background: url(../../img2/moniter-mac.png) no-repeat 0 0;
	width: 873px;
	height: 541px;
	content: "";
	position: absolute;
	left: 76px;
	top: -60px;
	overflow: hidden;
	z-index: 0;
}
.lp-tab-menu ul {
	margin: 0;
	padding: 0;
	width: 255px;
	position: relative;
	z-index: 2;
}
.lp-tab-menu ul li {
	display: block;
	left: 0;
	overflow: hidden;
}
.lp-tab-menu ul li a {
	border: solid 1px #dddddd;
	border-radius: 3px;
	display: block;
	margin: 1px 0;
	cursor: pointe;
	padding: 15px;
	cursor: pointer;
	position: relative;
	right: 0;
	transform: translateX(176px);
}
.lp-tab-menu ul li a i {
	display: inline-block;
	vertical-align: middle;
}
.lp-tab-menu ul li a i svg {
	width: 45px;
	height: 45px;
	fill: #626262;
}
.lp-tab-menu ul li .text {
	color: #626262;
	font-size: 1.18em;
	margin: 0 20px;
}
.lp-tab-menu ul li a.active-a {
	transform: translateX(5px);
	transition: 1s ease 0s;
	background: #ff4c65;
	border: none;
}
.lp-tab-menu ul li a.active-a i svg {
	fill: #fff;
}
.lp-tab-menu ul li a.active-a .text {
	color: #fff;
}
.lp-tab {
	max-width: 608px;
	float: left;
	display: none;
}
.lp-tab h3 {
	color: #1e1e1e;
	font-size: 1.7em;
	font-weight: 600;
	margin: 15px 0;
}
.lp-tab p {
	text-align: justify;
	line-height: 1.6;
}
.tab-active {
	display: block;
}
.process {
	background: #ffe246 url(../../img2/lp-bg-pattern.png) repeat 0 0;
}
.process:after {
	color: #ff9933;
	opacity: 0.18;
}
.process .section-heading {
	float: left;
	max-width: 483px;
	text-align: left;
}
.process .section-heading p {
	color: #222121;
	margin: 15px 0;
}
.process .section-heading ul {
	margin: 15px 0;
}
.process .section-heading ul li {
	color: #222121;
	display: block;
	margin: 15px 0;
}
.pro-tab-container {
	display: block;
	float: right;
	width: 60%;
	margin: 54px 0;
	padding: 0;
	position: relative;
}
.pro-tab-container:after {
	height: 1164px;
	width: 285px;
	background: url(../../img2/lp-border.png) no-repeat 0 0;
	position: absolute;
	left: 111px;
	top: -187px;
	content: "";
}
.pro-tab-menu {
	float: left;
	position: relative;
}
.pro-tab-menu ul {
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
	z-index: 2;
}
.pro-tab-menu ul li {
	display: block;
	position: relative;
}
.pro-tab-menu ul li.icn-analyze {
	left: 168px;
	top: -60px;
}
.pro-tab-menu ul li.icn-usability {
	left: 104px;
	top: -40px;
}
.pro-tab-menu ul li.icn-planing {
	left: 71px;
	top: -20px;
}
.pro-tab-menu ul li.icn-design {
	left: 72px;
	top: 0;
}
.pro-tab-menu ul li.icn-testing {
	left: 98px;
	top: 20px;
}
.pro-tab-menu ul li.icn-result {
	left: 157px;
	top: 40px;
}
.pro-tab-menu ul li a {
	border-radius: 50%;
	display: block;
	cursor: pointer;
	padding: 15px;
	cursor: pointer;
	position: relative;
	background: #000;
	color: #fff;
	width: 90px;
	height: 90px;
	margin: 0 auto;
	text-align: center;
}
.pro-tab-menu ul li a i {
	display: inline-block;
	vertical-align: middle;
}
.pro-tab-menu ul li a i svg {
	width: 40px;
	height: 40px;
	fill: #fff;
	position: relative;
	z-index: 1;
}
.pro-tab-menu ul li a.active-a {
	transition: 1s ease 0s;
	background: #2ac9de;
	position: relative;
}
.pro-tab-menu ul li a.active-a:before {
	content: " ";
	right: -12px;
	top: -12px;
	bottom: -12px;
	left: -12px;
	background-color: #2ac9de;
	width: 114px;
	height: 114px;
	border-radius: 100%;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	position: absolute;
	opacity: 0.6;
	z-index: 0;
	-webkit-animation: pulse 1.8s ease-out;
	animation: pulse 1.8s ease-out;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
.pro-tab-container .pro-tab {
	display: none;
	float: right;
	text-align: center;
	position: relative;
	background: #2d323e;
	border-radius: 50%;
	width: 550px;
	height: 550px;
}
.pro-tab-container .pro-tab.tab-active {
	display: block;
}
.pro-tab-container .circleBg {
	right: 0;
	margin: 0;
	position: absolute;
	top: 0;
	transition: all 0.5s ease-out 0s;
	width: 550px;
	height: 550px;
	background: #2d323e;
	border-radius: 50%;
	transform: rotate(50deg);
}
.pro-tab-container .circleBg.tab_2 {
	transform: rotate(31deg);
}
.pro-tab-container .circleBg.tab_3 {
	transform: rotate(14deg);
}
.pro-tab-container .circleBg.tab_4 {
	transform: rotate(-3deg);
}
.pro-tab-container .circleBg.tab_5 {
	transform: rotate(-20deg);
}
.pro-tab-container .circleBg.tab_6 {
	transform: rotate(-38deg);
}
.pro-tab-container .circleBg:after {
	border-color: transparent;
	border-right-color: #2d323e;
	border-style: solid;
	border-width: 20px 70px 20px 0;
	content: "";
	left: -46px;
	position: absolute;
	top: 50%;
	z-index: 99;
}
.pro-tab-container .pro-tab-inner {
	background: #282c37;
	border-radius: 50%;
	width: 500px;
	height: 500px;
	margin: 25px;
	padding: 70px;
	overflow: hidden;
}
.pro-tab-container .pro-tab h3 {
	color: #2ac9de;
	font-size: 1.5em;
	font-weight: 600;
	margin: 15px 0;
}
.pro-tab-container .pro-tab p {
	line-height: 1.6;
	color: #fff;
	font-size: 0.9em;
}
.essentials {
	background: url(../../img2/essentials.png) center center;
}
.essentials:after {
	color: #f8f8f8;
}
.ess-tab-container {
	width: 100%;
	margin: 0px auto;
	height: 535px;
	padding: 0;
	position: relative;
	max-width: 1300px;
}
.ess-tab-menu {
	position: relative;
	width: 100%;
	height: 100%;
}
.ess-tab-menu ul {
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 2;
	height: 100%;
}
.ess-tab-menu ul li {
	display: block;
	position: absolute;
	text-align: center;
	transform: translateY(-50%) rotate(45deg);
	width: 122px;
	height: 122px;
	display: block;
}
.ess-tab-menu ul li .tab-name {
	display: block;
	left: -3px;
	position: absolute;
	right: 0;
	text-align: center;
	top: 48px;
	transform: rotate(-45deg);
	width: 100%;
}
.ess-tab-menu ul li.content {
	left: 177px;
	top: 0;
	background: #e62e48;
}
.ess-tab-menu ul li.usp {
	background: #ebcc1c;
	left: 0;
	top: 177px;
}
.ess-tab-menu ul li.hero-shot {
	background: #2ac9de;
	left: 177px;
	bottom: 0;
}
.ess-tab-menu ul li.credibility {
	background: #2ac9de;
	right: 177px;
	top: 0;
}
.ess-tab-menu ul li.cta {
	background: #e62e48;
	right: 0;
	top: 177px;
}
.ess-tab-menu ul li.forms {
	background: #ebcc1c;
	right: 177px;
	bottom: 0;
}
.ess-tab-menu ul li a {
	color: #fff;
	position: relative;
	z-index: 1;
	font-weight: 600;
	height: 100%;
	width: 100%;
	display: block;
}
.ess-tab-menu ul li a.active-a {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.11);
	transition: 0.3s ease;
}
.ess-tab {
	max-width: 450px;
	margin: 0 auto;
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 390px;
}
.ess-tab h3 {
	color: #252934;
	font-size: 1.3em;
	font-weight: 600;
	margin: 15px 0;
}
.ess-tab p {
	font-size: 0.8em;
	text-align: justify;
	line-height: 1.6;
}
.tab-active {
	display: block;
}
 @media screen and (max-width: 1024px) {
html {
	font-size: 13px;
}
.section {
	padding: 20px 0;
}
.section-heading {
	margin: 0 auto;
	text-align: center;
}
.first-fold {
	height: auto;
}
.txt {
	padding: 50px 15px;
	position: static;
	top: auto;
	transform: none;
	z-index: 2;
}
.txt h2 {
	font-size: 2em;
}
.why-choose {
	padding: 20px 0;
}
.tabs-header {
	position: relative;
	top: 0;
}
.lp-tab-menu {
	float: none;
	width: auto;
	margin-bottom: 0px;
}
.lp-tab-container {
	margin-bottom: 0;
}
.cta h3 {
	font-size: 1.5em;
	max-width: 65%;
}
.lp-tab-container {
	text-align: center;
	display: block;
	width: auto;
	margin: 10px 0;
}
.lp-tab-menu {
	width: auto;
	float: none;
}
.lp-tab-menu ul {
	width: 100%;
	white-space: nowrap;
	overflow-x: scroll;
}
.lp-tab-menu ul li {
	display: inline-block;
	width: auto;
	vertical-align: top;
}
.lp-tab-menu ul li a, .lp-tab-menu ul li a.active-a {
	transform: none;
}
.lp-tab-menu ul li a i {
	display: block;
}
.lp-tab-menu:after {
	content: normal;
}
.tab-active {
	max-width: none;
}
.optimization h2 {
	text-align: center;
	max-width: none;
}
.optimization h2:after {
	left: 0;
	right: 0;
	margin: 0 auto;
}
.tabs-header {
	float: none;
	margin: 0 auto;
}
.tabs-content {
	max-width: none;
	float: none;
	height: auto !important;
}
.process .section-heading {
	float: none;
	max-width: none;
}
.pro-tab-container {
	float: none;
	display: block;
	margin: 0;
	width: auto;
}
.pro-tab-container:after {
	content: normal;
	width: auto;
	float: none;
	margin: 10px auto;
}
.pro-tab-menu {
	float: none;
	margin-bottom: 15px;
}
.pro-tab-menu ul {
	overflow-x: auto;
	white-space: nowrap;
	padding: 10px 0;
	float: none;
	text-align: center;
}
.pro-tab-menu ul li {
	position: static;
	display: inline-block;
	margin: 5px 10px;
}
.pro-tab-container .tab-active {
	border-radius: 5px;
	padding: 10px;
	text-align: center;
	height: auto;
	width: 100%;
}
.pro-tab-container .circleBg {
	display: none;
}
.pro-tab-container .pro-tab-inner {
	border-radius: 0px;
	height: auto;
	width: auto;
	padding: 15px;
}
.pro-tab-container .pro-tab {
	float: none;
	padding: 10px;
}
.essentials {
	background: none;
}
.ess-tab-container {
	float: none;
	height: auto;
	width: auto;
}
.ess-tab {
	position: static;
	transform: none;
	height: auto;
	text-align: center;
}
.ess-tab-menu ul {
	overflow-x: auto;
	white-space: nowrap;
	text-align: center;
	padding: 30px 0;
}
.ess-tab-menu ul li {
	position: static;
	display: inline-block;
	vertical-align: top;
	margin: 0 20px;
	height: 90px;
	width: 90px;
	transform: rotate(45deg);
}
.ess-tab-menu ul li .tab-name {
	font-size: 0.8em;
	top: 34px;
}
}
@media screen and (max-width: 767px) {
html {
	font-size: 12px;
}
.txt {
	text-align: center;
	position: static;
	transform: none;
}
.section {
	padding: 20px 0;
}
.txt h2 {
	font-size: 2em;
}
.fold-graphic {
	display: none;
}
.txt h4 {
	font-size: 1em;
}
.optimization h2 {
	font-size: 1.5em;
	text-align: center;
}
.optimization h2:after {
	left: 0;
	right: 0;
	margin: 0 auto;
}
.tabs {
	display: block;
}
.tabs-header {
	float: none;
	height: auto;
	overflow: hidden;
	position: static;
	right: 0;
	top: -113px;
	width: auto;
}
.tabs-header > ul {
	white-space: nowrap;
	overflow-x: auto;
}
.tabs-nav {
	position: static;
	width: 100%;
}
.tabs-nav {
	display: none;
}
.tabs-content {
	float: none;
	margin-bottom: 0;
	max-width: none;
}
.tabs-header li {
	display: inline-block;
	position: static;
	max-width: 289px;
	vertical-align: top;
	margin: 0 auto;
}
.tabs-header a {
	padding: 5px;
}
.tabs-content .tab.active {
	text-align: center;
}
.hexagon {
	width: 70px;
	height: 70px;
}
.hexagon p {
	display: none;
}
.hexagon .icn {
	max-width: 30px;
}
.tabs-header li.black {
	display: none;
}
.section-heading {
	text-align: center;
}
.section-heading h2 {
	font-size: 1.5em;
}
.cta {
	text-align: center;
}
.cta h3 {
	font-size: 1.5em;
	display: block;
	margin: 0 auto;
}
.cta a.cta-btn {
	float: none;
	margin: 10px auto;
}
.process .section-heading {
	float: none;
	text-align: center;
}
.cta h3 {
	max-width: none;
}
.pro-tab-container .pro-tab-inner {
	padding: 0;
	margin: 0;
	background: none;
}
}