html, body {
	height: 100%;
    background-color: #f5f5f5;
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    margin: 0;
    padding: 0;
}
.inner {
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
/*        padding-right: 10px;
        padding-left: 10px*/
}
@media (max-width: 800px) {
    .inner {
        width: 100%!important;
    }
}
@media (min-width: 801px) {
    .inner {
        width: 100%;
    }
}
@media (min-width: 993px) {
    .inner {
        width: 100%
    }
}
@media (min-width: 1140px) {
    .inner {
        width: 1140px
    }
}

.wrapper {
	overflow: hidden;
}

.header {
	background-color: #f5f5f5;
}

.m-title {
	text-align: center;
	font-size: 30px;
	/*font-weight: bold;*/
	margin: 40px 0 50px;
	line-height: 1.5;
	height: 100%;
}

h1 {
	display: block !important;
}

.typewrite {
	font-weight: bold;
	color: #1a96f2;
	min-width: 5px;
	position: relative;
	/*background-color: red;*/
	display: inline;
}

.wrap {
	position: relative;
	display: inline;
}
.wrap:after {
	content: '';
	display: block;
	float: right;
	width: 2px;
	position: absolute;
	right: -5px;
	top: 0;
	bottom: 0;
	animation: blink 0.7s infinite;
	background-color: #888;
}

@keyframes blink {0% {opacity: 1;}50% {opacity: 0;}100% {opacity: 1;}}@-webkit-keyframes blink {0% {opacity: 1;}50% {opacity: 0;}100% {opacity: 1;}}@-moz-keyframes blink {0% {opacity: 1;}50% {opacity: 0;}100% {opacity: 1;}}

.screens {
	position: relative;
}

.top1 {
	/*min-height: 540px;*/
	/*overflow: hidden;*/
	border-bottom: 1px solid #e0e0e0;
}

.top1 .row {
	overflow: hidden;
}

.top1 .screens {
	min-height: 345px;
}

.screens img {
	position: absolute;
    border-radius: 8px;
    background-color: #fff;
    -webkit-box-shadow: 0px 15px 35px 10px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 15px 35px 10px rgba(0,0,0,0.15);
    box-shadow: 0px 15px 35px 10px rgba(0,0,0,0.15);
}

.insta1 {
	bottom: -70px;
	left: 50%;
	margin-left: -244px;
}

.tapid1 {
	bottom: -150px;
	left: 50%;
	margin-left: -30px;
}

@-webkit-keyframes arrows {
  to {
    -webkit-transform: translateX(300%) rotate(45deg);
            transform: translateX(300%) rotate(45deg);
    opacity: 0;
  }
}
@keyframes arrows {
  to {
    -webkit-transform: translateX(300%) rotate(45deg);
            transform: translateX(300%) rotate(45deg);
    opacity: 0;
  }
}

.move:before {
    content: "";
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 207px;
    width: 10px;
    height: 10px;
    margin-left: -95px;
    border: 4px solid #08c;
    border-left: none;
    border-bottom: none;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: arrows 1.5s infinite;
    animation: arrows 1.5s infinite;
}
/*.move:after {
	margin-left: -75px;
	animation-delay: .15s;
}

.move:nth-child(2):before {
	animation-delay: .30s;
	margin-left: -55px;
}*/

.feat {
	padding-top: 60px
}

.f-item {
	position: relative;
	padding: 0 0 40px 25px;
	line-height: 1.4;
	font-size: 15px;
	box-sizing: border-box;
	color: #888;
}

.f-head {
	color: #0088cc;
	font-size: 17px;
	font-weight: bold;
	margin-bottom: 10px;
}

.top2 {
	text-align: center;
	padding: 40px 40px 140px;
	position: relative;
	z-index: 2;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='50px' version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129' xmlns:xlink='http://www.w3.org/1999/xlink' enable-background='new 0 0 129 129'%3E%3Cg%3E%3Cpath fill='%23dcdcdc' d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z'/%3E%3C/g%3E%3C/svg%3E%0A");
	background-position: center 212px;
	background-repeat: no-repeat;
}

.top2 h2 {
	font-size: 26px;
	margin: 40px 0 20px;
}

.h2-desc {
	font-size: 17px;
	opacity: .7;
}

.button {
	margin-top: 30px;
}

.gonew {
	margin: 10px 0;
}

.gonew a {
	font-size: 16px;
	color: #08c;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' width='12px' height='12px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 451.846 451.847' style='enable-background:new 0 0 451.846 451.847;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%2308c' d='M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744 L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284 c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z'/%3E%3C/g%3E%3C/svg%3E%0A");
	background-position: top 8px right 5px;
	background-repeat: no-repeat;
	padding: 5px 25px 5px 0;
}

.gonew a:hover {
	background-position: top 8px right 0px;
}

.goexample, .clickbottom {
    position: relative;
    z-index: 3;
    color: #fff;
    background-color: #1193f5;
    padding: 12px 35px 12px 18px;
    border-radius: 3px;
    display: inline-block;
    font-size: 17px;
    line-height: 1;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' width='15px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129' xmlns:xlink='http://www.w3.org/1999/xlink' enable-background='new 0 0 129 129'%3E%3Cg%3E%3Cpath fill='%23fff' d='m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-position: right 12px center;
    background-repeat: no-repeat;
}

.goexample:hover, .clickbottom:hover {
	background-position: right 7px center;
}

.f-border {
	position: relative;
	background-color: #ededed;
}

.f-border:before {
	content:' ';
	position:absolute;
	top:-100px;
	width:0;
	height:0;
	border-bottom: 100px solid #ededed; 
	border-right: 100vw solid transparent; 
	z-index: 1;
}

.f-border:after {
	content:' ';
	position:absolute;
	bottom:-100px;
	width:0;
	height:0;
	border-top: 100px solid #ededed; 
	border-right: 100vw solid transparent; 
	z-index: 1;
}

.feature {
	position: relative;
	z-index: 2;
	margin-bottom: 140px;
}

.feature h3 {
	font-size: 30px;
	font-weight: normal;
	margin: 55px 0 15px;

}

.feature .h3-desc {
	font-size: 20px;
	margin: 0 0 30px;
	color: #0088cc;
}

.feature p {
	font-size: 16px;
	line-height: 1.7;
	opacity: .7;
}

.slide-screen {
	position: relative;
}

.slide-screen img {
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.08);
    box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.08);
}

@keyframes fade {
  0%   { opacity: 0; left: 40%; }
  10%   { opacity: 1; left: 50%; }
  30%  { opacity: 1; left: 50%; }
  37%  { opacity: 0; left: 55%;  }
  100% { opacity: 0; }
}
@keyframes fadeRight {
  0%   { opacity: 0; left: 55%; }
  10%   { opacity: 1; left: 50%; }
  30%  { opacity: 1; left: 50%; }
  37%  { opacity: 0; left: 40%; }
  100% { opacity: 0; left: 55%; }
}

.fadein {
	position: absolute;
	width: 100%;
	top: 100px;
	left: -37px;
}
.fadein img {
	background-color: #fff;
	position:absolute;
	width:221px;
	top: -40px;
	left:50%;
	right: 50px;
	opacity:0;
	animation-name: fade;
	animation-duration: 9s;
	animation-iteration-count: infinite;
	z-index: 3;
}
.fadein.right {
	left: -184px;
}
.fadein.right img {
	animation-name: fadeRight;
}
.fadein img:nth-child(1) { animation-delay: 0s;  }
.fadein img:nth-child(2) { animation-delay: 3s;  }
.fadein img:nth-child(3) { animation-delay: 6s;  }

	.fadein.msg img {
		top: -70px;
	}

	.fadein.link img {
		top: -50px;
	}

	.fadein.soc img {
		top: -104px;
	}

	.fadein.im img {
		top: -70px;
	}

.microland {
	text-align: center;
}

.microland img {
	/*border: 7px solid #fff;*/
	-webkit-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.08);
	-moz-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.08);
	box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.08);
	border-radius: 5px;
	background-color: #fff;
}

.tapidimg {
	position: relative;
	z-index: 3;
}

.tapidimg.right {
	float: right;
}


@keyframes fadeTop {
  0%   { opacity: 0; left: 30%; }
  10%   { opacity: 1; left: 45%; }
  28%   { opacity: 1; left: 45%; }
  34%  { opacity: 0; left: 30%; }
  100% { opacity: 0; left: 30%; }
}

.lead {
	cursor: default;
	background-color: #1193f5;
	/*background-color: #fff;*/
	color: #fff;
	border-radius: 20px;
	padding: 15px 20px;
	font-size: 15px;
	line-height: 1.5;
	position:absolute;

	top: 100px;
	left:50%;
	margin-left: 50px;
	right: 50px;
	width: 180px;
	opacity:0;
	animation-name: fadeTop;
	animation-duration: 9s;
	animation-iteration-count: infinite;
	z-index: 3;
	-webkit-box-shadow: 0px 10px 15px 10px rgba(0,0,0,0.05);
	-moz-box-shadow: 0px 10px 15px 10px rgba(0,0,0,0.05);
	box-shadow: 0px 10px 15px 10px rgba(0,0,0,0.05);
}

.lead:nth-child(1) { animation-delay: 0s;  }
.lead:nth-child(2) { animation-delay: 3s;  }
.lead:nth-child(3) { animation-delay: 6s;  }

.lead .zag {
	/*color: #1193f5;*/
	font-weight: bold;
	margin-bottom: 10px;
}

@-webkit-keyframes ball-scale-multiple {0% {-webkit-transform: scale(0);transform: scale(0);opacity: 0;}5% {opacity: 1;}100% {-webkit-transform: scale(1);transform: scale(1);opacity: 0;}}@keyframes ball-scale-multiple {0% {-webkit-transform: scale(0);transform: scale(0);opacity: 0;}5% {opacity: 1;}100% {-webkit-transform: scale(1);transform: scale(1);opacity: 0;}}

.anitap {
	opacity: .35;
	position: absolute;
	left: -10px;
	top: 46px;
	width: 10px;
	height: 10px;
	-webkit-transform: translateY(0px);
	transform: translateY(-50px);
}

.anitap>div {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	margin: 0;
	width: 30px;
	height: 30px;
	-webkit-animation: ball-scale-multiple 1.6s 0s linear infinite;
	animation: ball-scale-multiple 1.6s 0s linear infinite;
}

.anitap>div:nth-child(2) {
	-webkit-animation-delay: -.8s;
	animation-delay: -.8s;
}

.anitap>div {
	background-color: #1897f2;
	border-radius: 100%;
}

.goreg {
	position: relative;
	text-align: center;
	color: rgba(0,0,0,.7);
	font-size: 16px;
	line-height: 1.7;
	padding-bottom: 50px;
	/*background-color: #ededed;*/
}

/*.goreg:before {
	content:' ';
	position:absolute;
	top:-100px;
	left: 0;
	width:0;
	height:0;
	border-bottom: 100px solid #ededed; 
	border-right: 100vw solid transparent; 
	z-index: 1;
}*/

.goreg h2 {
	font-size: 30px;
	font-weight: normal;
	color: #000;
}

.f-right .row .col {
	float: right;
}

.payments .tapidimg {
	float: right;
}

.payments .ss-inner {
	position: relative;
}

.payments .fadein {
	left: -65px;
}

@keyframes fadeRightPay {
  0%   { opacity: 0; left: 60%; }
  10%   { opacity: 1; left: 50%; }
  30%  { opacity: 1; left: 50%; }
  37%  { opacity: 0; left: 40%; }
  100% { opacity: 0; left: 55%; }
}

.payments .lead {
	margin-left: -150px;
	animation-name: fadeRightPay;
	background-color: #ffdb4d;
	color: #000;
}

.cardtypes {
	opacity: 1 !important;
}

.cardtypes img {
	margin-right: 15px;
}

@media (max-width: 800px) {

	.m-title {
		font-size: 25px;
		margin-bottom: 20px;
	}

	.typewrite {
		min-height: 45px;
		display: block;
	}

	.feat {
		/*display: none;*/
		padding: 20px 20px 0;
	}

	.f-item {
		padding-bottom: 20px;
	}

	.insta1 {
	    margin-left: -160px;
	    width: 150px;
	    bottom: -53px;
	}

	.tapid1 {
		width: 190px;
		bottom: -104px;
	}

	.top1 .row {
		padding: 0;
	}

	.top1 .screens {
		min-height: 270px;
		overflow: hidden;
		border-bottom: 1px solid #e0e0e0;
	}

	.f-head {
		font-size: 15px;
	}

	.top2 {
		padding: 20px 20px 85px;
		background-position: center 250px;
	}

	.goexample {
		text-align: left;
		line-height: 1.4;
	}

	.top2 h2 {
		font-size: 21px;
	}

	.f-border {
		background-color: transparent;
	}

	.f-border:before, .f-border:after {
		display: none;
	}

	.tapidimg {
		width: 190px;
	}

	.fadein img {
		width: 180px;
	}

	.feature {
		padding-bottom: 75px;
		margin-bottom: 75px;
		background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='30' height='30' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cpath fill='%23dcdcdc' d='M346.001,114c-5.147,0-10.29-1.973-14.201-5.916l-61.653-62.162C266.358,42.103,261.335,40,256,40 s-10.358,2.103-14.146,5.922L180.2,108.084c-7.778,7.842-20.44,7.895-28.284,0.116c-7.843-7.778-7.895-20.442-0.116-28.284 l61.653-62.162C224.809,6.305,239.919,0,256,0s31.191,6.305,42.547,17.754L360.2,79.916c7.778,7.842,7.727,20.506-0.116,28.284 C356.185,112.068,351.091,114,346.001,114z M298.547,494.246l61.653-62.162c7.778-7.842,7.727-20.506-0.116-28.284 c-7.844-7.778-20.506-7.726-28.284,0.116l-61.653,62.162C266.358,469.897,261.335,472,256,472s-10.358-2.103-14.146-5.922 L180.2,403.916c-7.778-7.841-20.44-7.895-28.284-0.116c-7.843,7.778-7.895,20.442-0.116,28.284l61.653,62.162 C224.809,505.695,239.919,512,256,512S287.191,505.695,298.547,494.246z M325,255c0-38.598-31.402-70-70-70s-70,31.402-70,70 s31.402,70,70,70S325,293.598,325,255z M285,255c0,16.542-13.458,30-30,30s-30-13.458-30-30s13.458-30,30-30S285,238.458,285,255z'/%3E%3C/svg%3E%0A");
		background-position: center bottom;
		background-repeat: no-repeat;
	}

	.ss-inner {
		max-width: 400px;
		margin: 0 auto;
	}

	.feat-desc {
		position: relative;
		z-index: 10;
		padding: 0 20px;
		/*background-color: #f5f5f5;*/
	}

	.feature h3 {
		font-size: 23px;
		margin: 35px 0 15px;
	}

	.feature .h3-desc {
		font-size: 16px;
		margin: 0 0 25px;;
	}

	.feature p {
		font-size: 15px;
	}

	.fadein.msg img {
		top: -73px;
		margin-left: 25px;
	}

	.fadein.link img {
		top: -46px;
		margin-left: 18px;
	}

	.fadein.soc img {
		top: -117px;
		margin-left: 0px;
	}

	.fadein.im img {
	    top: -90px;
	    margin-left: 0px;
	}

	.fadein.notice {
		top: 55px;
		left: -80px;
	}

	.fadein.notice.notice_pay {
		top: 53px;
		left: -37px;
	}

	.move:before {
		margin-left: -70px;
		top: 178px;
	}

	.goreg:before {
		top: -50px;
		border-bottom: 50px solid #ededed;
	}

}