/* uemo.net */
@-moz-keyframes ue-pudding {
	0% {
		-moz-transform: scale(1.2,0.8)
	}

	1% {
		-moz-transform: scale(1.18,0.82)
	}

	2% {
		-moz-transform: scale(1.16,0.84)
	}

	3% {
		-moz-transform: scale(1.13,0.87)
	}

	4% {
		-moz-transform: scale(1.1,0.9)
	}

	5% {
		-moz-transform: scale(1.07,0.93)
	}

	6% {
		-moz-transform: scale(1.04,0.96)
	}

	7% {
		-moz-transform: scale(1.01,0.99)
	}

	8% {
		-moz-transform: scale(0.99,1.01)
	}

	9% {
		-moz-transform: scale(0.97,1.03)
	}

	10% {
		-moz-transform: scale(0.95,1.05)
	}

	11% {
		-moz-transform: scale(0.94,1.06)
	}

	12% {
		-moz-transform: scale(0.93,1.07)
	}

	13% {
		-moz-transform: scale(0.93,1.07)
	}

	14% {
		-moz-transform: scale(0.93,1.07)
	}

	15% {
		-moz-transform: scale(0.93,1.07)
	}

	16% {
		-moz-transform: scale(0.94,1.06)
	}

	17% {
		-moz-transform: scale(0.94,1.06)
	}

	18% {
		-moz-transform: scale(0.95,1.05)
	}

	19% {
		-moz-transform: scale(0.96,1.04)
	}

	20% {
		-moz-transform: scale(0.98,1.02)
	}

	21% {
		-moz-transform: scale(0.99,1.01)
	}

	22% {
		-moz-transform: scale(1,1)
	}

	23% {
		-moz-transform: scale(1,1)
	}

	24% {
		-moz-transform: scale(1.01,0.99)
	}

	25% {
		-moz-transform: scale(1.02,0.98)
	}

	26% {
		-moz-transform: scale(1.02,0.98)
	}

	27% {
		-moz-transform: scale(1.02,0.98)
	}

	28% {
		-moz-transform: scale(1.03,0.97)
	}

	29% {
		-moz-transform: scale(1.03,0.97)
	}

	30% {
		-moz-transform: scale(1.02,0.98)
	}

	31% {
		-moz-transform: scale(1.02,0.98)
	}

	32% {
		-moz-transform: scale(1.02,0.98)
	}

	33% {
		-moz-transform: scale(1.02,0.98)
	}

	34% {
		-moz-transform: scale(1.01,0.99)
	}

	35% {
		-moz-transform: scale(1.01,0.99)
	}

	36% {
		-moz-transform: scale(1.01,0.99)
	}

	37% {
		-moz-transform: scale(1,1)
	}

	38% {
		-moz-transform: scale(1,1)
	}

	39% {
		-moz-transform: scale(1,1)
	}

	40% {
		-moz-transform: scale(0.99,1.01)
	}

	41% {
		-moz-transform: scale(0.99,1.01)
	}

	42% {
		-moz-transform: scale(0.99,1.01)
	}

	43% {
		-moz-transform: scale(0.99,1.01)
	}

	44% {
		-moz-transform: scale(0.99,1.01)
	}

	45% {
		-moz-transform: scale(0.99,1.01)
	}

	46% {
		-moz-transform: scale(0.99,1.01)
	}

	47% {
		-moz-transform: scale(0.99,1.01)
	}

	48% {
		-moz-transform: scale(0.99,1.01)
	}

	49% {
		-moz-transform: scale(1,1)
	}
}




.fl {
	float: left
}

.fr {
	float: right
}

.clear {
	clear: both
}

html,body,.page {
	width: 100%
}

#preload {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #41b1e7;
	z-index: 999;
	overflow: hidden;
	text-align: center;
	-webkit-animation: preload-layer 4.2s cubic-bezier(0.77,0,0.175,1) both;
	-moz-animation: preload-layer 4.2s cubic-bezier(0.77,0,0.175,1) both;
	animation: preload-layer 4.2s cubic-bezier(0.77,0,0.175,1) both
}

.csstransitions #preload {
	clip: rect(0px 2560px 2000px 0)
}

.no-csstransitions .preload-logo {
	background: url('index-logo2.png') no-repeat 50% 0
}

.preload {
	width: 550px;
	height: 580px;
	position: absolute;
	top: 60%;
	left: 50%;
	margin: -275px 0 0 -290px;
	color: #fff;
	overflow: hidden
}

.preload article {
	color: #fff
}

.preload-logo2 {
	margin: 10px 0 10px;
	height: 50px
}

.preload-logo1 {
	width: 165px;
	height: 165px;
	margin: 0 auto;
	margin-top: -2px;
	margin-top: 0px\9
}

.preload-logo1 svg path {
	stroke-dasharray: 908.1746215820312;
	stroke-dashoffset: -650;
	stroke-width: 2
}

#preload .preload-logo1 svg path {
	-webkit-animation: preload 2.2s cubic-bezier(0.77,0,0.175,1) both;
	-moz-animation: preload 2.2s cubic-bezier(0.77,0,0.175,1) both;
	animation: preload 2.2s cubic-bezier(0.77,0,0.175,1) both
}

#preload .preload-logo2 svg path {
	stroke-dasharray: 908.1746215820312;
	stroke-dashoffset: -900;
	stroke-width: 2;
	-webkit-animation: preload2 2.5s cubic-bezier(0.77,0,0.175,1) both .2s;
	-moz-animation: preload2 2.5s cubic-bezier(0.77,0,0.175,1) both .2s;
	animation: preload2 2.5s cubic-bezier(0.77,0,0.175,1) both .2s
}

.preload-logo3 {
	-webkit-animation: preload3 .5s cubic-bezier(0.215,0.61,0.355,1) both 2s;
	-moz-animation: preload3 .5s cubic-bezier(0.215,0.61,0.355,1) both 2s;
	animation: preload3 .5s cubic-bezier(0.215,0.61,0.355,1) both 2s
}

#preload .title {
	-webkit-animation: preload3 1.5s cubic-bezier(0.215,0.61,0.355,1) both 2s;
	-moz-animation: preload3 1.5s cubic-bezier(0.215,0.61,0.355,1) both 2s;
	animation: preload3 1.5s cubic-bezier(0.215,0.61,0.355,1) both 2s
}

#preload article {
	-webkit-animation: preload3 1.9s cubic-bezier(0.215,0.61,0.355,1) both 2s;
	-moz-animation: preload3 1.9s cubic-bezier(0.215,0.61,0.355,1) both 2s;
	animation: preload3 1.9s cubic-bezier(0.215,0.61,0.355,1) both 2s
}

@-moz-keyframes preload {
	0% {
		fill: rgba(255,255,255,0);
		stroke-dashoffset: -650;
		stroke-width: 1
	}

	80% {
		fill: rgba(255,255,255,0);
		stroke-dashoffset: 0;
		stroke-width: 1
	}

	100% {
		fill: rgba(255,255,255,1);
		stroke-dashoffset: 0;
		stroke-width: 0
	}
}

@-webkit-keyframes preload {
	0% {
		fill: rgba(255,255,255,0);
		stroke-dashoffset: -650;
		stroke-width: 2
	}

	80% {
		fill: rgba(255,255,255,0);
		stroke-dashoffset: 0;
		stroke-width: 2
	}

	100% {
		fill: rgba(255,255,255,1);
		stroke-dashoffset: 0;
		stroke-width: 0
	}
}

@keyframes preload {
	0% {
		fill: rgba(255,255,255,0);
		stroke-dashoffset: -650;
		stroke-width: 2
	}

	80% {
		fill: rgba(255,255,255,0);
		stroke-dashoffset: 0;
		stroke-width: 2
	}

	100% {
		fill: rgba(255,255,255,1);
		stroke-dashoffset: 0;
		stroke-width: 0
	}
}

@-moz-keyframes preload2 {
	0% {
		fill: rgba(255,255,255,0);
		stroke-dashoffset: -900;
		stroke-width: 2
	}

	80% {
		fill: rgba(255,255,255,0);
		stroke-dashoffset: 0;
		stroke-width: 2
	}

	100% {
		fill: rgba(255,255,255,1);
		stroke-dashoffset: 0;
		stroke-width: 0
	}
}

@-webkit-keyframes preload2 {
	0% {
		fill: rgba(255,255,255,0);
		stroke-dashoffset: -900;
		stroke-width: 2
	}

	80% {
		fill: rgba(255,255,255,0);
		stroke-dashoffset: 0;
		stroke-width: 2
	}

	100% {
		fill: rgba(255,255,255,1);
		stroke-dashoffset: 0;
		stroke-width: 0
	}
}

@keyframes preload2 {
	0% {
		fill: rgba(255,255,255,0);
		stroke-dashoffset: -900;
		stroke-width: 2
	}

	80% {
		fill: rgba(255,255,255,0);
		stroke-dashoffset: 0;
		stroke-width: 2
	}

	100% {
		fill: rgba(255,255,255,1);
		stroke-dashoffset: 0;
		stroke-width: 0
	}
}

@-webkit-keyframes ue-pudding {
	0% {
		-webkit-transform: scale(1.2,0.8)
	}

	1% {
		-webkit-transform: scale(1.18,0.82)
	}

	2% {
		-webkit-transform: scale(1.16,0.84)
	}

	3% {
		-webkit-transform: scale(1.13,0.87)
	}

	4% {
		-webkit-transform: scale(1.1,0.9)
	}

	5% {
		-webkit-transform: scale(1.07,0.93)
	}

	6% {
		-webkit-transform: scale(1.04,0.96)
	}

	7% {
		-webkit-transform: scale(1.01,0.99)
	}

	8% {
		-webkit-transform: scale(0.99,1.01)
	}

	9% {
		-webkit-transform: scale(0.97,1.03)
	}

	10% {
		-webkit-transform: scale(0.95,1.05)
	}

	11% {
		-webkit-transform: scale(0.94,1.06)
	}

	12% {
		-webkit-transform: scale(0.93,1.07)
	}

	13% {
		-webkit-transform: scale(0.93,1.07)
	}

	14% {
		-webkit-transform: scale(0.93,1.07)
	}

	15% {
		-webkit-transform: scale(0.93,1.07)
	}

	16% {
		-webkit-transform: scale(0.94,1.06)
	}

	17% {
		-webkit-transform: scale(0.94,1.06)
	}

	18% {
		-webkit-transform: scale(0.95,1.05)
	}

	19% {
		-webkit-transform: scale(0.96,1.04)
	}

	20% {
		-webkit-transform: scale(0.98,1.02)
	}

	21% {
		-webkit-transform: scale(0.99,1.01)
	}

	22% {
		-webkit-transform: scale(1,1)
	}

	23% {
		-webkit-transform: scale(1,1)
	}

	24% {
		-webkit-transform: scale(1.01,0.99)
	}

	25% {
		-webkit-transform: scale(1.02,0.98)
	}

	26% {
		-webkit-transform: scale(1.02,0.98)
	}

	27% {
		-webkit-transform: scale(1.02,0.98)
	}

	28% {
		-webkit-transform: scale(1.03,0.97)
	}

	29% {
		-webkit-transform: scale(1.03,0.97)
	}

	30% {
		-webkit-transform: scale(1.02,0.98)
	}

	31% {
		-webkit-transform: scale(1.02,0.98)
	}

	32% {
		-webkit-transform: scale(1.02,0.98)
	}

	33% {
		-webkit-transform: scale(1.02,0.98)
	}

	34% {
		-webkit-transform: scale(1.01,0.99)
	}

	35% {
		-webkit-transform: scale(1.01,0.99)
	}

	36% {
		-webkit-transform: scale(1.01,0.99)
	}

	37% {
		-webkit-transform: scale(1,1)
	}

	38% {
		-webkit-transform: scale(1,1)
	}

	39% {
		-webkit-transform: scale(1,1)
	}

	40% {
		-webkit-transform: scale(0.99,1.01)
	}

	41% {
		-webkit-transform: scale(0.99,1.01)
	}

	42% {
		-webkit-transform: scale(0.99,1.01)
	}

	43% {
		-webkit-transform: scale(0.99,1.01)
	}

	44% {
		-webkit-transform: scale(0.99,1.01)
	}

	45% {
		-webkit-transform: scale(0.99,1.01)
	}

	46% {
		-webkit-transform: scale(0.99,1.01)
	}

	47% {
		-webkit-transform: scale(0.99,1.01)
	}

	48% {
		-webkit-transform: scale(0.99,1.01)
	}

	49% {
		-webkit-transform: scale(1,1)
	}
}

@-moz-keyframes preload3 {
	0% {
		-webkit-transform: translateY(80px);
		opacity: 0
	}

	100% {
		-webkit-transform: translateY(0px);
		opacity: 1
	}
}

@-webkit-keyframes preload3 {
	0% {
		-webkit-transform: translateY(80px);
		opacity: 0
	}

	100% {
		-webkit-transform: translateY(0px);
		opacity: 1
	}
}

@keyframes preload3 {
	0% {
		-webkit-transform: translateY(80px);
		opacity: 0
	}

	100% {
		-webkit-transform: translateY(0px);
		opacity: 1
	}
}

@-moz-keyframes preload-layer {
	0% {
		visibility: visible;
		clip: rect(0px 2560px 1400px 0)
	}

	60% {
		visibility: visible;
		clip: rect(0px 2560px 1400px 0)
	}

	100% {
		visibility: hidden;
		clip: rect(0px 2560px 0px 0)
	}
}

@-webkit-keyframes preload-layer {
	0% {
		visibility: visible;
		clip: rect(0px 2560px 1400px 0)
	}

	60% {
		visibility: visible;
		clip: rect(0px 2560px 1400px 0)
	}

	100% {
		visibility: hidden;
		clip: rect(0px 2560px 0px 0)
	}
}

@keyframes preload-layer {
	0% {
		visibility: visible;
		clip: rect(0px 2560px 1400px 0)
	}

	60% {
		visibility: visible;
		clip: rect(0px 2560px 1400px 0)
	}

	100% {
		visibility: hidden;
		clip: rect(0px 2560px 0px 0)
	}
}

.csstransitions html,.csstransitions body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative
}

.wrap {
	width: 1100px;
	margin: 0 auto;
	position: relative
}

header {
	height: 50px;
	position: fixed;
	width: 100%;
	height: 50px;
	background: #323436;
	z-index: 99
}

#logo {
	opacity: 0.6;
	-webkit-transition: all 1s cubic-bezier(0.86,0,0.07,1);
	-moz-transition: all 1s cubic-bezier(0.86,0,0.07,1);
	transition: all 1s cubic-bezier(0.86,0,0.07,1)
}

#logo.active {
	opacity: 1
}

#logo img,#logo a {
	display: block
}

nav {
	margin-left: 60px;
	height: 50px
}

nav ul li {
	display: inline-block;
	margin-right: 60px;
	line-height: 50px
}

nav ul li a {
	color: #848484;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	transition: all .3s ease-out
}

nav ul li.current a,nav ul li:hover a {
	color: #fff
}

#wrapper {
	position: relative;
	-webkit-transition: all 1s cubic-bezier(0.86,0,0.07,1);
	-moz-transition: all 1s cubic-bezier(0.86,0,0.07,1);
	transition: all 1s cubic-bezier(0.86,0,0.07,1);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden
}

.page {
	position: relative;
	overflow: hidden
}

#index {
	background: #1c1e20;
	text-align: center
}

.index-bg {
	width: 100%
}

.index-bg {
	transform: translateY(-100px);
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-webkit-transition: all 2s cubic-bezier(0.215,0.61,0.355,1);
	-moz-transition: all 2s cubic-bezier(0.215,0.61,0.355,1);
	transition: all 2s cubic-bezier(0.215,0.61,0.355,1)
}

.show .index-bg {
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-webkit-transition: all 2s cubic-bezier(0.215,0.61,0.355,1) .4s;
	-moz-transition: all 2s cubic-bezier(0.215,0.61,0.355,1) .4s;
	transition: all 2s cubic-bezier(0.215,0.61,0.355,1) .4s
}

.index-bg img {
	width: 100%
}

.index {
	width: 550px;
	height: 580px;
	position: absolute;
	top: 60%;
	left: 50%;
	margin: -275px 0 0 -290px
}

.title {
	margin: 50px 0 10px 0
}

article {
	color: #979797;
	line-height: 26px;
	font-size: 15px
}

.action {
	width: 50px;
	height: 50px;
	overflow: hidden;
	margin: 0 auto;
	margin-top: 100px
}

.borderradius .action {
	overflow: hidden;
	background: rgba(0,0,0,0.5);
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	transition: all .3s ease-out;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	cursor: pointer
}

.borderradius .action:hover {
	background: #41b1e7;
	-webkit-animation: ue-pudding 1s linear;
	-moz-animation: ue-pudding 1s linear;
	animation: ue-pudding 1s linear
}

@keyframes ue-pudding {
	0% {
		transform: scale(1.2,0.8)
	}

	1% {
		transform: scale(1.18,0.82)
	}

	2% {
		transform: scale(1.16,0.84)
	}

	3% {
		transform: scale(1.13,0.87)
	}

	4% {
		transform: scale(1.1,0.9)
	}

	5% {
		transform: scale(1.07,0.93)
	}

	6% {
		transform: scale(1.04,0.96)
	}

	7% {
		transform: scale(1.01,0.99)
	}

	8% {
		transform: scale(0.99,1.01)
	}

	9% {
		transform: scale(0.97,1.03)
	}

	10% {
		transform: scale(0.95,1.05)
	}

	11% {
		transform: scale(0.94,1.06)
	}

	12% {
		transform: scale(0.93,1.07)
	}

	13% {
		transform: scale(0.93,1.07)
	}

	14% {
		transform: scale(0.93,1.07)
	}

	15% {
		transform: scale(0.93,1.07)
	}

	16% {
		transform: scale(0.94,1.06)
	}

	17% {
		transform: scale(0.94,1.06)
	}

	18% {
		transform: scale(0.95,1.05)
	}

	19% {
		transform: scale(0.96,1.04)
	}

	20% {
		transform: scale(0.98,1.02)
	}

	21% {
		transform: scale(0.99,1.01)
	}

	22% {
		transform: scale(1,1)
	}

	23% {
		transform: scale(1,1)
	}

	24% {
		transform: scale(1.01,0.99)
	}

	25% {
		transform: scale(1.02,0.98)
	}

	26% {
		transform: scale(1.02,0.98)
	}

	27% {
		transform: scale(1.02,0.98)
	}

	28% {
		transform: scale(1.03,0.97)
	}

	29% {
		transform: scale(1.03,0.97)
	}

	30% {
		transform: scale(1.02,0.98)
	}

	31% {
		transform: scale(1.02,0.98)
	}

	32% {
		transform: scale(1.02,0.98)
	}

	33% {
		transform: scale(1.02,0.98)
	}

	34% {
		transform: scale(1.01,0.99)
	}

	35% {
		transform: scale(1.01,0.99)
	}

	36% {
		transform: scale(1.01,0.99)
	}

	37% {
		transform: scale(1,1)
	}

	38% {
		transform: scale(1,1)
	}

	39% {
		transform: scale(1,1)
	}

	40% {
		transform: scale(0.99,1.01)
	}

	41% {
		transform: scale(0.99,1.01)
	}

	42% {
		transform: scale(0.99,1.01)
	}

	43% {
		transform: scale(0.99,1.01)
	}

	44% {
		transform: scale(0.99,1.01)
	}

	45% {
		transform: scale(0.99,1.01)
	}

	46% {
		transform: scale(0.99,1.01)
	}

	47% {
		transform: scale(0.99,1.01)
	}

	48% {
		transform: scale(0.99,1.01)
	}

	49% {
		transform: scale(1,1)
	}
}

.no-csstransitions .action {
	cursor: pointer;
	background: url('radius.png')
}

.action i {
	width: 12px;
	height: 8px;
	display: block;
	margin: 21px auto
}

.action i img {
	display: block
}

#intro {
	background: #42b8f1;
	text-align: center
}

.intro-bg {
	height: 340px;
	width: 100%;
	top: 65%;
	position: absolute;
	margin: -170px 0 0 0px
}

.csstransitions .intro-bg {
	opacity: 0.4;
	opacity: 0;
	transform: translateY(100px);
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	-webkit-transition: all 1.2s cubic-bezier(0.215,0.61,0.355,1) .4s;
	-moz-transition: all 1.2s cubic-bezier(0.215,0.61,0.355,1) .4s;
	transition: all 1.2s cubic-bezier(0.215,0.61,0.355,1) .4s
}

.csstransitions .inview .intro-bg {
	opacity: .4;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px)
}

.intro-bg ul {
	width: 100%
}

.intro-bg li {
	float: left;
	display: block;
	width: 535px;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40)
}

.intro-bg img {
	display: block;
	float: left;
	width: 100%
}

.intro {
	width: 870px;
	height: 700px;
	position: absolute;
	top: 60%;
	left: 50%;
	margin: -440px 0 0 -435px
}

.no-csstransitions .intro {
	overflow: hidden
}

.intro-screen {
	width: 870px;
	height: 537px;
	background: url('intro.png') no-repeat 0 0;
	position: relative
}

.csstransitions .intro-screen {
	opacity: .8;
	transform: translateY(400px);
	-webkit-transform: translateY(400px);
	-moz-transform: translateY(400px);
	-webkit-transition: all 2s cubic-bezier(0.19,1,0.22,1) .4s;
	-moz-transition: all 2s cubic-bezier(0.19,1,0.22,1) .4s;
	transition: all 2s cubic-bezier(0.19,1,0.22,1) .4s
}

.inview .intro-screen {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px)
}

.screen {
	width: 670px;
	height: 420px;
	position: absolute;
	top: 30px;
	left: 102px;
	overflow: hidden;
	cursor: pointer
}

.screen ul {
	display: block;
	width: 9999%;
	position: absolute;
	top: 0;
	left: 0
}

.screen li {
	float: left;
	display: block;
	width: 670px;
	height: 420px
}

.intro article {
	color: #fff;
	margin: 30px 0 70px;
	-webkit-transition: all 1.4s cubic-bezier(0.19,1,0.22,1) .4s;
	-moz-transition: all 1.4s cubic-bezier(0.19,1,0.22,1) .4s;
	transition: all 1.4s cubic-bezier(0.19,1,0.22,1) .4s
}

.csstransitions .intro article {
	opacity: 0;
	transform: translateY(200px);
	-webkit-transform: translateY(200px);
	-moz-transform: translateY(200px)
}

.inview .intro article {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px)
}

#feature {
	background: #eff3f6
}

.intro-bg-left {
	position: absolute;
	top: 0;
	overflow: hidden;
	height: 335px
}

.intro-bg-right {
	position: absolute;
	top: 0;
	overflow: hidden;
	height: 335px
}

.intro-bg-left ul,.intro-bg-right ul {
	display: block;
	position: absolute;
	top: 0;
	left: 0
}

.intro-bg-right li.jump {
	-webkit-animation: ue-pudding 2s linear;
	-moz-animation: ue-pudding 2s linear;
	animation: ue-pudding 2s linear
}

.intro-bg-left li.jump {
	-webkit-animation: ue-pudding 2s linear alternate;
	-moz-animation: ue-pudding 2s linear alternate;
	animation: ue-pudding 2s linear alternate
}

.feature .title {
	text-align: center
}

.feature .title img {
	display: inline-block
}

.feature {
	height: 660px;
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -330px
}

#feature-preview {
	height: 500px;
	margin-top: 50px;
	position: relative
}

#feature-preview article {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0
}

#feature-control {
	height: 14px;
	padding: 3px;
	margin-top: 20px;
	text-align: center;
	position: relative
}

#feature-control b {
	width: 14px;
	height: 14px;
	display: inline-block;
	margin: 0 7px;
	cursor: pointer
}

#feature-control b i {
	display: block;
	background: #acacac;
	width: 14px;
	height: 14px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	transition: all .2s ease-out
}

.no-csstransitions #feature-control b i {
	width: 10px;
	height: 10px;
	margin: 2px
}

.csstransitions #feature-control b i {
	transform: scale(0.7);
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7)
}

.csstransitions #feature-control b.cur i {
	background: #6dc2eb;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1)
}

.no-csstransitions #feature-control b.cur i {
	width: 14px;
	height: 14px;
	margin: 0px;
	background: #6dc2eb
}

.feature-preview .wrap {
	position: relative
}

.device {
	width: 754px;
	height: 466px;
	background: url('air.png') no-repeat 0 0;
	position: absolute;
	right: -20px;
	top: 0
}

.viewport-wrap {
	width: 754px;
	height: 466px;
	position: absolute;
	right: -20px;
	top: 0
}

.device-inner {
	width: 582px;
	height: 368px;
	position: absolute;
	top: 20px;
	left: 87px
}

.no-csstransitions .viewport {
	display: none
}

.feature-info {
	width: 345px;
	height: 220px;
	top: 40%;
	left: 0;
	position: absolute;
	margin-top: -110px
}

.feature-info p {
	margin: 24px 0 35px;
	line-height: 24px;
	color: #868585;
	font-size: 15px;
	display: block;
	width: 345px;
	height: 60px;
	overflow: hidden
}

.feature-info .viewmore {
	width: 200px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #ff;
	font-size: 16px;
	display: block;
	background: #41b1e7;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	overflow: hidden
}

.viewmore:hover {
	background: #29b9ff
}

.csstransitions .viewmore:after {
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	transition: all 0.15s ease;
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 0px solid #169bdb
}

.csstransitions .viewmore:hover:after {
	width: 192px;
	height: 42px;
	border: 4px solid #169bdb
}

.csstransitions #feature-preview #article.show .device {
	-webkit-transition: all 2s cubic-bezier(0.19,1,0.22,1) .4s;
	-moz-transition: all 2s cubic-bezier(0.19,1,0.22,1) .4s;
	transition: all 2s cubic-bezier(0.19,1,0.22,1) .4s
}

.csstransitions #feature-preview #article.show {
	visibility: visible;
	opacity: 1;
	-webkit-transition: all .2s ease-out .4s;
	-moz-transition: all .2s ease-out .4s;
	transition: all .2s ease-out .4s
}

.csstransitions #feature-preview #article.show .feature-info .viewmore {
	-webkit-transition: -webkit-transform 1.2s cubic-bezier(0.19,1,0.22,1) .4s,opacity 1.2s cubic-bezier(0.19,1,0.22,1) .4s,background 0.15s ease;
	-moz-transition: -moz-transform 1.2s cubic-bezier(0.19,1,0.22,1) .4s,opacity 1.2s cubic-bezier(0.19,1,0.22,1) .4s,background 0.15s ease;
	transition: transform 1.2s cubic-bezier(0.19,1,0.22,1) .4s,opacity 1.2s cubic-bezier(0.19,1,0.22,1) .4s,background 0.15s ease
}

.csstransitions #feature-preview #article.show .feature-info p {
	-webkit-transition: all .9s cubic-bezier(0.19,1,0.22,1) .4s;
	-moz-transition: all .9s cubic-bezier(0.19,1,0.22,1) .4s;
	transition: all .9s cubic-bezier(0.19,1,0.22,1) .4s
}

.csstransitions #feature-preview #article.show .feature-info h4 {
	-webkit-transition: all .7s cubic-bezier(0.19,1,0.22,1) .4s;
	-moz-transition: all .7s cubic-bezier(0.19,1,0.22,1) .4s;
	transition: all .7s cubic-bezier(0.19,1,0.22,1) .4s
}

.csstransitions #feature-preview #article {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all .2s cubic-bezier(0.19,1,0.22,1);
	-moz-transition: all .2s cubic-bezier(0.19,1,0.22,1);
	transition: all .2s cubic-bezier(0.19,1,0.22,1)
}

.csstransitions #feature-preview #article .feature-info .viewmore {
	opacity: 0;
	transform: translateY(210px);
	-webkit-transform: translateY(210px);
	-moz-transform: translateY(210px);
	-webkit-transition: all 0s cubic-bezier(0.19,1,0.22,1);
	-moz-transition: all 0s cubic-bezier(0.19,1,0.22,1);
	transition: all 0s cubic-bezier(0.19,1,0.22,1)
}

.csstransitions #feature-preview #article .feature-info p {
	opacity: 0;
	transform: translateY(140px);
	-webkit-transform: translateY(140px);
	-moz-transform: translateY(140px);
	-webkit-transition: all 0s cubic-bezier(0.19,1,0.22,1);
	-moz-transition: all 0s cubic-bezier(0.19,1,0.22,1);
	transition: all 0s cubic-bezier(0.19,1,0.22,1)
}

.csstransitions #feature-preview #article .feature-info h4 {
	opacity: 0;
	transform: translateY(100px);
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	-webkit-transition: all 0s cubic-bezier(0.19,1,0.22,1);
	-moz-transition: all 0s cubic-bezier(0.19,1,0.22,1);
	transition: all 0s cubic-bezier(0.19,1,0.22,1)
}

.csstransitions #feature-preview #article .device {
	opacity: 0;
	transform: translateY(200px);
	-webkit-transform: translateY(200px);
	-moz-transform: translateY(200px);
	-webkit-transition: all 0s cubic-bezier(0.19,1,0.22,1);
	-moz-transition: all 0s cubic-bezier(0.19,1,0.22,1);
	transition: all 0s cubic-bezier(0.19,1,0.22,1)
}

#feature-preview #article.show {
	visibility: visible
}

#feature-preview #article {
	visibility: hidden
}

.csstransitions .inview #feature-preview #article.show .device {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-webkit-transition: all 2s cubic-bezier(0.19,1,0.22,1) .4s;
	-moz-transition: all 2s cubic-bezier(0.19,1,0.22,1) .4s;
	transition: all 2s cubic-bezier(0.19,1,0.22,1) .4s
}

.csstransitions .inview #feature-preview #article.show {
	visibility: visible;
	opacity: 1;
	-webkit-transition: all .2s ease-out .4s;
	-moz-transition: all .2s ease-out .4s;
	transition: all .2s ease-out .4s
}

.csstransitions .inview #feature-preview #article.show .feature-info .viewmore {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-webkit-transition: -webkit-transform 1.2s cubic-bezier(0.19,1,0.22,1) .4s,opacity 1.2s cubic-bezier(0.19,1,0.22,1) .4s,background 0.15s ease;
	-moz-transition: -moz-transform 1.2s cubic-bezier(0.19,1,0.22,1) .4s,opacity 1.2s cubic-bezier(0.19,1,0.22,1) .4s,background 0.15s ease;
	transition: transform 1.2s cubic-bezier(0.19,1,0.22,1) .4s,opacity 1.2s cubic-bezier(0.19,1,0.22,1) .4s,background 0.15s ease
}

.csstransitions .inview #feature-preview #article.show .feature-info p {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-webkit-transition: all .9s cubic-bezier(0.19,1,0.22,1) .4s;
	-moz-transition: all .9s cubic-bezier(0.19,1,0.22,1) .4s;
	transition: all .9s cubic-bezier(0.19,1,0.22,1) .4s;
	font-size: 15px;
	line-height: 26px
}

.csstransitions .inview #feature-preview #article.show .feature-info h4 {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-webkit-transition: all .7s cubic-bezier(0.19,1,0.22,1) .4s;
	-moz-transition: all .7s cubic-bezier(0.19,1,0.22,1) .4s;
	transition: all .7s cubic-bezier(0.19,1,0.22,1) .4s
}

.csstransitions #feature-preview #article.show.viewport {
	-webkit-transition: all 1.4s cubic-bezier(0.19,1,0.22,1) .4s;
	-moz-transition: all 1.4s cubic-bezier(0.19,1,0.22,1) .4s;
	transition: all 1.4s cubic-bezier(0.19,1,0.22,1) .4s
}

.svg-circle {
	width: 248px;
	height: 248px;
	left: 0;
	top: 0;
	position: relative;
	-webkit-transition: stroke-dashoffset .9s cubic-bezier(0.785,0.135,0.15,0.86) .4s;
	-moz-transition: stroke-dashoffset .9s cubic-bezier(0.785,0.135,0.15,0.86) .4s;
	transition: stroke-dashoffset .9s cubic-bezier(0.785,0.135,0.15,0.86) .4s;
	stroke-dasharray: 162;
	stroke-dashoffset: -162;
	opacity: 0
}

.csstransitions .nd #feature-preview #article.show .device,.csstransitions .nd #feature-preview #article.show,.csstransitions .nd #feature-preview #article.show .feature-info .viewmore,.csstransitions .nd #feature-preview #article.show .feature-info p,.csstransitions .nd #feature-preview #article.show .feature-info h4,.csstransitions .nd #feature-preview #article.show.viewport {
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s
}

.inview .show .viewport {
	box-shadow: 0px 9px 18px rgba(0,0,0,.2);
	-webkit-box-shadow: 0px 9px 18px rgba(0,0,0,.2);
	-moz-box-shadow: 0px 9px 18px rgba(0,0,0,.2)
}

.inview .show .viewport .svg-circle {
	stroke-dashoffset: 0;
	opacity: 1
}

.viewport {
	width: 248px;
	height: 248px;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	overflow: hidden;
	-webkit-transition: -webkit-box-shadow .6s 1.2s ease-in-out;
	-moz-transition: -moz-box-shadow .6s 1.2s ease-in-out;
	transition: box-shadow .3s 1.2s ease-in-out;
	transform: translate3d(6px,127px,0);
	-webkit-transform: translate3d(6px,127px,0);
	-moz-transform: translate3d(6px,127px,0)
}

.viewport-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 248px;
	height: 248px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%
}

.viewport-fg {
	width: 234px;
	height: 234px;
	background: #fff;
	overflow: hidden;
	margin: 7px;
	position: relative;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	opacity: 0;
	-webkit-transition: opacity .5s 1.3s ease-in-out;
	-moz-transition: opacity .5s 1.3s ease-in-out;
	transition: opacity .5s 1.3s ease-in-out
}

.inview .show .viewport-fg {
	opacity: 1
}

.viewport-fg img {
	display: block;
	position: absolute;
	top: 2px;
	left: 210px;
	margin-top: -474px;
	margin-left: -308px
}

#showcase {
	background: #4d4a47;
}

.showcase {
	
	width: 100%
}

.showcase .title {
	text-align: center;
	    color: #fff;
    font-size: 36px;
    padding-top:80px;
}

.showcase .title img {
	display: inline-block
}

.showcase p {
	text-align: center;
	margin: 23px 0 60px 0;
	width: 100%;
	position: relative;
	display: block;
	color:#f4f4f4;
}

#showcase-preview {
	height: 380px;
	position: relative
}

.showcase-preview {
	width: 1180px;
	height: 380px;

	overflow: hidden;
	margin: 0 auto
}

.no-csstransitions .showcase-preview-left,.no-csstransitions .showcase-preview-right,.no-csstransitions .showcase-preview-left:hover,.no-csstransitions .showcase-preview-right:hover {
	background: url('radius.png')
}

.showcase-preview-left,.showcase-preview-right {
	display: block;
	top: 40%;
	margin-top: -25px;
	width: 50px;
	height: 50px;
	position: absolute;
	position: absolute;
	cursor: pointer;
	overflow: hidden;

	cursor: pointer
}

.showcase-preview-left:hover,.showcase-preview-right:hover {
	/*-webkit-animation: ue-pudding 1s linear;
	-moz-animation: ue-pudding 1s linear;
	animation: ue-pudding 1s linear;
	background: #41b1e7*/
}

.showcase-preview-left img,.showcase-preview-right img {
	display: block;
	width: 9px;
	height: 12px;
	margin: 19px auto
}
.showcase-preview-right
{

	    width: 80px;
    height: 110px;
    background:url('../images/productright.png')
}
.showcase-preview-right:hover {

    background:url('../images/productrighth.png')
}
.showcase-preview-left {
	left: 0px;
	    width: 80px;
    height: 110px;
    background:url('../images/productleft.png')
}
.showcase-preview-left:hover {

    background:url('../images/productlefth.png')
}
.showcase-preview-right {
	right: 0px
}

.showcase-preview ul {
	width: 9999%;
	display: block;
	position: relative;
	left: 0
}

.list-item {
	width: 280px;
	height: 380px;
	margin-right: 20px;
	float: left;
	display: block
}

.showcase-preview li {
	display: block;
	height: 380px;
	position: relative
}

.showcase-preview li p {
	display: block;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	color: #fff;
	width: 100%;
	margin: 0;
	background: #1a1a1b;
	position: absolute;
	bottom: -40px;
	left: 0;
	-webkit-transition: all .6s cubic-bezier(0.19,1,0.22,1);
	-moz-transition: all .6s cubic-bezier(0.19,1,0.22,1);
	transition: all .6s cubic-bezier(0.19,1,0.22,1)
}

.showcase-preview a {
	height: 180px;
	overflow: hidden
}

.showcase-preview a:hover p {
	background: #e8470f;
	bottom: 0px
}

.showcase-preview li a img {
	display: block;
	position: relative;
	top: 0;
	-webkit-transition: all 1s cubic-bezier(0.19,1,0.22,1);
	-moz-transition: all 1s cubic-bezier(0.19,1,0.22,1);
	transition: all 1s cubic-bezier(0.19,1,0.22,1)
}

.showcase-preview a:hover img {
	top: -30px
}

.showcase-preview li a {
	display: block;
	height: 180px;
	position: relative
}

.r {
	margin-top: 20px
}

.csstransitions .showcase .title {
	transform: translateY(140px);
	-webkit-transform: translateY(140px);
	-moz-transform: translateY(140px);
	opacity: 0;
	-webkit-transition: all 1.2s cubic-bezier(0.19,1,0.22,1) .4s;
	-moz-transition: all 1.2s cubic-bezier(0.19,1,0.22,1) .4s;
	transition: all 1.2s cubic-bezier(0.19,1,0.22,1) .4s
}

.inview .showcase .title {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px)
}

.csstransitions .showcase .showcase-preview {
	opacity: 0;
	transform: translateY(350px);
	-webkit-transform: translateY(350px);
	-moz-transform: translateY(350px);
	-webkit-transition: all 2s cubic-bezier(0.19,1,0.22,1) .4s;
	-moz-transition: all 2s cubic-bezier(0.19,1,0.22,1) .4s;
	transition: all 2s cubic-bezier(0.19,1,0.22,1) .4s
}

.inview .showcase .showcase-preview {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px)
}

.csstransitions .showcase p.p {
	opacity: 0;
	transform: translateY(200px);
	-webkit-transform: translateY(200px);
	-moz-transform: translateY(200px);
	-webkit-transition: all 1.5s cubic-bezier(0.19,1,0.22,1) .4s;
	-moz-transition: all 1.5s cubic-bezier(0.19,1,0.22,1) .4s;
	transition: all 1.5s cubic-bezier(0.19,1,0.22,1) .4s;
	font-size: 15px;
	line-height: 26px
}

.inview .showcase p.p {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px)
}

#getstarted {
	background: #fff
}

.getstarted {
	text-align: center;
	height: 520px;
	position: absolute;
	top: 60%;
	margin-top: -260px;
	width: 100%;
	overflow: hidden
}

.getstarted .wrap {
	height: 520px;
	overflow: hidden
}

.getstarted .title img {
	display: inline-block
}

.getstarted p {
	color: #8c8c8c;
	font-size: 15px
}

#started-now {
	width: 240px;
	height: 60px;
	color: #ff;
	background: #41b1e7;
	display: block;
	line-height: 60px;
	font-size: 18px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	margin: 50px auto 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px
}

#started-now:hover {
	background: #29b9ff
}
.product
{
        background: #4d4a47;
        height:100px;
}
.csstransitions #started-now:after {
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	transition: all 0.15s ease;
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 0px solid #169bdb
}

.csstransitions #started-now:hover:after {
	width: 232px;
	height: 52px;
	border: 4px solid #169bdb
}

#footer {
	font-size: 12px;
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0
}

#footer a {
	color: #41b1e7
}

.getstarted .wrap {
	width: auto
}

.csstransitions .getstarted .title {
	opacity: 0;
	transform: translateY(140px);
	-webkit-transform: translateY(140px);
	-moz-transform: translateY(140px);
	-webkit-transition: all 1.2s cubic-bezier(0.19,1,0.22,1) .4s;
	-moz-transition: all 1.2s cubic-bezier(0.19,1,0.22,1) .4s;
	transition: all 1.2s cubic-bezier(0.19,1,0.22,1) .4s
}

.inview .getstarted .title {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px)
}

.csstransitions .getstarted p {
	opacity: 0;
	line-height: 26px;
	transform: translateY(200px);
	-webkit-transform: translateY(200px);
	-moz-transform: translateY(200px);
	-webkit-transition: all 1.6s cubic-bezier(0.19,1,0.22,1) .4s;
	-moz-transition: all 1.6s cubic-bezier(0.19,1,0.22,1) .4s;
	transition: all 1.6s cubic-bezier(0.19,1,0.22,1) .4s
}

.inview .getstarted p {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px)
}

.csstransitions .getstarted #started-now {
	opacity: 0;
	transform: translateY(300px);
	-webkit-transform: translateY(300px);
	-moz-transform: translateY(300px);
	-webkit-transition: -webkit-transform 2s cubic-bezier(0.19,1,0.22,1) .4s,opacity 2s cubic-bezier(0.19,1,0.22,1) .4s,background 0.15s ease;
	-moz-transition: -moz-transform 2s cubic-bezier(0.19,1,0.22,1) .4s,opacity 2s cubic-bezier(0.19,1,0.22,1) .4s,background 0.15s ease;
	transition: transform 2s cubic-bezier(0.19,1,0.22,1) .4s,opacity 2s cubic-bezier(0.19,1,0.22,1) .4s,background 0.15s ease
}

.inview .getstarted #started-now {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px)
}
@media screen and (max-width: 1600px)
{
    .showcase .title
    {
        padding-top: 0px;
            margin: 30px 0 10px 0;
    }
    .showcase p
    {
        margin: 13px 0 20px 0;
    }
    }