@charset "utf-8";
@import url("reset.css");
body{ overflow: hidden;}
#showBar {
	background: url(../images/bg.gif) top center no-repeat;
	position:fixed;
	top:0;
	width:100%;
	z-index:300;
}
.st-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.st-container > input, .st-container > a {
	position: fixed;
	bottom: 108px;
	width: 17%;
	cursor: pointer;
	font-size: 16px;
	height: 34px;
	line-height: 34px;
}
.st-container > input {
	opacity: 0;
	z-index: 1000;
}
.st-container > a {
	z-index: 10;
	font-weight: 700;
	background: #eb6100;
	color: #fff;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(235,97,0,0.2);
}
.st-container:before {
	content: '';
	position: fixed;
	width: 100%;
	height: 34px;
	background: #eb6100;
	z-index: 9;
	bottom: 0;
}
#st-control-1, #st-control-1 + a { left: 0;}
#st-control-2, #st-control-2 + a { left: 17%;}
#st-control-3, #st-control-3 + a { left: 34%;}
#st-control-4, #st-control-4 + a { left: 51%;}
#st-control-5, #st-control-5 + a { left: 68%;}
#st-control-6, #st-control-6 + a { left: 85%;}

.st-container > input:checked + a,
.st-container > input:checked:hover + a{ background: #e23500;}

.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
	bottom: 100%;
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: #e23500;
	border-width: 20px;
	left: 50%;
	margin-left: -20px;
}

.st-container > input:hover + a{ background: #e23500;}
.st-container > input:hover + a:after { border-bottom-color: #e23500;}

.st-scroll, .st-panel {
	position: relative;
	width: 100%;
	height: 100%;
}

.st-scroll {
	top: 0;
	left: 0;
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
}

.st-panel{
	background: #fff;
	overflow: hidden;
} 

#st-control-1:checked ~ .st-scroll {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
	-webkit-transform: translateY(-200%);
	-moz-transform: translateY(-200%);
	-o-transform: translateY(-200%);
	-ms-transform: translateY(-200%);
	transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
	-webkit-transform: translateY(-300%);
	-moz-transform: translateY(-300%);
	-o-transform: translateY(-300%);
	-ms-transform: translateY(-300%);
	transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
	-webkit-transform: translateY(-400%);
	-moz-transform: translateY(-400%);
	-o-transform: translateY(-400%);
	-ms-transform: translateY(-400%);
	transform: translateY(-400%);
}
#st-control-6:checked ~ .st-scroll {
	-webkit-transform: translateY(-500%);
	-moz-transform: translateY(-500%);
	-o-transform: translateY(-500%);
	-ms-transform: translateY(-500%);
	transform: translateY(-500%);
}

#cname {
	background:url(../images/appnames.png) bottom center no-repeat;
	height:50px;
	top:25%;
}
#ename {
	background:url(../images/appnames.png) top center no-repeat;
	height:20px;
	top:22%;
}
.appname {
	width:270px;
	position:absolute;
	left:20%;
	text-indent:-9999px;
	z-index:310;
}

/* Content elements */
.st-panel h2 {
	color: #e23500;
	text-shadow: 1px 1px 1px rgba(119,58,39,0.2);
	position: absolute;
	font-size: 3rem;
	font-weight: 900;
	width: 50%;
	left: 20%;
	line-height: 50px;
	margin: -70px 0 0 0;
	padding: 0;
	top: 50%;
	-webkit-backface-visibility: hidden;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2,
#st-control-6:checked ~ .st-scroll #st-panel-6 h2 {
	-webkit-animation: moveDown 0.6s ease-in-out 0.6s backwards;
	-moz-animation: moveDown 0.6s ease-in-out 0.6s backwards;
	-o-animation: moveDown 0.6s ease-in-out 0.6s backwards;
	-ms-animation: moveDown 0.6s ease-in-out 0.6s backwards;
	animation: moveDown 0.6s ease-in-out 0.6s backwards;
}
@-webkit-keyframes moveDown{
	0% { 
		-webkit-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-webkit-transform: translateY(0px);  
		opacity: 1;
	}
}
@-moz-keyframes moveDown{
	0% { 
		-moz-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-moz-transform: translateY(0px);  
		opacity: 1;
	}
}
@-o-keyframes moveDown{
	0% { 
		-o-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-o-transform: translateY(0px);  
		opacity: 1;
	}
}
@-ms-keyframes moveDown{
	0% { 
		-ms-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-ms-transform: translateY(0px);  
		opacity: 1;
	}
}
@keyframes moveDown{
	0% { 
		transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		transform: translateY(0px);  
		opacity: 1;
	}
}

.st-panel p {
	position: absolute;
	font-size: 1.3rem;
	line-height: 1.6em;
	letter-spacing:0.1em;
	color: #313c54;
	z-index: 2;
	padding: 0;
	width: 50%;
	left: 20%;
	top: 50%;
	margin: 10px 0 0 0;
	-webkit-backface-visibility: hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p,
#st-control-6:checked ~ .st-scroll #st-panel-6 p {
	-webkit-animation: moveUp 0.6s ease-in-out 0.8s backwards;
	-moz-animation: moveUp 0.6s ease-in-out 0.8s backwards;
	-o-animation: moveUp 0.6s ease-in-out 0.8s backwards;
	-ms-animation: moveUp 0.6s ease-in-out 0.8s backwards;
	animation: moveUp 0.6s ease-in-out 0.8s backwards;
}
@-webkit-keyframes moveUp{
	0% { 
		-webkit-transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		-webkit-transform: translateY(0px);  
		opacity: 1;
	}
}
@-moz-keyframes moveUp{
	0% { 
		-moz-transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		-moz-transform: translateY(0px);  
		opacity: 1;
	}
}
@-o-keyframes moveUp{
	0% { 
		-o-transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		-o-transform: translateY(0px);  
		opacity: 1;
	}
}
@-ms-keyframes moveUp{
	0% { 
		-ms-transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		-ms-transform: translateY(0px);  
		opacity: 1;
	}
}
@keyframes moveUp{
	0% { 
		transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		transform: translateY(0px);  
		opacity: 1;
	}
}

.AppShow {
	display:block;
	float:right;
	position:absolute;
	top:16%;
	right:10%;
	width:500px;
	height:426px;
	text-indent:-9999px;
}
#AppShow1 {
	background:url(../images/app_1.jpg) 0 0 no-repeat;
	background-size:cover;
}
#AppShow2 {
	background:url(../images/app_2.jpg) 0 0 no-repeat;
	background-size:cover;
}
#AppShow3 {
	background:url(../images/app_3.jpg) 0 0 no-repeat;
	background-size:cover;
}
#AppShow4 {
	background:url(../images/app_4.jpg) 0 0 no-repeat;
	background-size:cover;
}
#AppShow5 {
	background:url(../images/app_5.jpg) 0 0 no-repeat;
	background-size:cover;
}
#AppShow6 {
	background:url(../images/app_6.jpg) 0 0 no-repeat;
	background-size:cover;
}

@media only screen and (min-width: 1440px) {
.AppShow {
	top:20%;
	width:600px;
	height:478px;
}
}

@media only screen and (min-width: 1600px) {
.AppShow {
	top:15%;
	width:790px;
	height:630px;
}
}
@media only screen and (min-width: 1920px) {
.st-panel h2 { font-size: 3.6rem;}
.st-panel p {
	font-size: 1.6rem;
	line-height: 1.6em;
}
}