*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html { width: 100%; height: 100%; overflow-x:hidden; margin: 0; padding:0; font-size: 0; clear: both; }
body {
	margin: 0 auto;
	padding: 0;
	color: #777;
	opacity: 1;
	font-size: 16px;
	font-weight: 100;
	transition: all 500ms ease-in-out;
	position: relative;
	background-color: #777;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-image: url(../img/bg.png);
}
body.loading { opacity: 0; background: none; }
a, a:hover, a:focus, a:active { text-decoration: none; outline: none; }

/** INTRO */
#intro { width: 100vw; height: 100vh; position: relative; background-color: #FFF; }
#intro #intro_indicators {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translate(-50%,0);
	margin: 0;
	padding: 0;
	z-index: 9;
	width: 300px;
	display: flex;
}
#intro #intro_indicators li {
	display: block;
	flex: 1;
	height: 30px;
	position: relative;
	text-align: center;
	cursor: pointer;
	color: #111;
	transition: all 500ms ease-in-out;
}
#intro #intro_indicators li:hover { color: #666; }
#intro #intro_indicators li.intro-index:after {
	content: " ";
	display: block;
	width: 10px;
	height: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 50%;
	background-color: rgba(255,0,0,0.8);
	transition: all 500ms ease-in-out;
}
#intro #intro_indicators li.intro-index:hover:after,
#intro #intro_indicators li.intro-index.active:after { width: 14px; height: 14px; background-color: rgba(20,20,20,0.8); }

#intro #intro_slides {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0;
}

.intro-item {
	position: relative;
	width: 100%;
	height: 100%;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: none;
	display: inline-block;
	transition: all 500ms ease-in-out;
	margin: 0;
	top: 0;
	right: 0;
	font-size: 14px;
}
.intro-item .intro-item-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/** INDEX 1 */
.intro-item[data-index="1"] {
	background-position: 75% 50%;
	background-image: url(../img/intro.png);
}
.intro-item[data-index="1"] .intro-title {
	width: 400px;
	box-shadow: 0 10px 10px -10px #111;
	margin: 200px 0 0 60px;
}
.intro-item[data-index="1"] .intro-title h1 {
	display: block;
	position: relative;
	font-weight: 300;
	font-size: 48px;
	text-align: center;
	text-transform: uppercase;
	background-color: rgba(255,0,0,0.75);
	color: #111;
	padding: 8px 12px;
	box-shadow: none;
}
.intro-item[data-index="1"] .intro-title h3 {
	display: block;
	font-weight: 100;
	font-size: 14px;
	text-align: center;
	text-transform: uppercase;
	background-color: rgba(0,0,0,0.75);
	color: #FFF;
	padding: 8px 12px;
}
.intro-item[data-index="1"] .intro-icons { position: relative; width: 100%; }
.intro-item[data-index="1"] .intro-icons .intro-icon-item {
	display: block;
	float: left;
	width: 33.33%;
	height: 160px;
	padding: 10px;
	text-align: center;
	cursor: pointer;
	color: #111;
	font-size: 14px;
}
.intro-item[data-index="1"] .intro-icons .intro-icon-item img {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
}
.intro-item[data-index="1"] .intro-icons .intro-icon-item p {
	position: absolute;
	top: -100px;
	left: 0;
	background-color: #FFF;
	color: #111;
	opacity: 0;
	transition: 250ms all ease-in-out;
	padding: 8px 12px;
	box-shadow: 0 10px 10px -10px #111;
}
.intro-item[data-index="1"] .intro-icons .intro-icon-item:hover p {
	opacity: 1;
}
@media (max-width: 767px) {
	.intro-item[data-index="1"] { background-position: 75% 0; }
	.intro-item[data-index="1"] .intro-title { width: 100%; margin: 39.5px auto 0 auto; }
	.intro-item[data-index="1"] .intro-title h1 { font-size: 24px; }
	.intro-item[data-index="1"] .intro-title h3 { font-size: 12px; }
	.intro-item[data-index="1"] .intro-icons { margin: 100px auto 0 auto; width: 300px; }
}

/** INDEX 2 */
.intro-item[data-index="2"] { background-image: url(../img/flow.png); }
/** INDEX 3 */
.intro-item[data-index="3"] { background-image: url(../img/cloud.png); }
/** INDEX 4 */
.intro-item[data-index="4"] { background-image: url(../img/intro_ind.png); }
/** INDEX 5 */
.intro-item[data-index="5"] { background-position: 100% 50%; background-image: url(../img/biz_vis.png); }

.intro-item:not([data-index="1"]) h1 {
	position: absolute;
	bottom: 40px;
	left: 10px;
	font-weight: 300;
	font-size: 16px;
	text-transform: uppercase;
	background-color: rgba(255,0,0,0.75);
	color: #EAEAEA;
	padding: 4px 6px;
	box-shadow: 0 10px 10px -10px #111;
}
@media (max-width: 767px) {
	#intro { height: 75vh; }
	.intro-item:not([data-index="1"]) h1 {
		max-width: 300px;
		font-size: 12px;
	}
}

/** PRODUCTS */
#products { width: 100%; height: 100%; background-color: #FFF; }
#products #products_list { padding: 40px; overflow: hidden; display: flex; }
#products .product-item { float: left; flex: 1; padding: 12px; margin-bottom: 24px; }
#products .product-item h3 { margin-bottom: 12px; font-weight: 100; position: relative; color: #999; }
#products .product-item h3:after {
	content: " ";
	display: block;
	width: 40px;
	height: 1px;
	margin: 0 0 0 10px;
	background-color: #999;
}

@media (max-width: 767px) {
	#products #products_list { display: block; }
	#products .product-item { float: none; flex: 0; }
}

#products #products_icon { padding: 10px 40px; overflow: hidden; display: block; }
#products .icon-item { float: left; width: 12.5%; height: 100px; overflow: hidden; } 
#products .icon-item img { display: block; margin: 0 auto; width: 100%; height: auto; }
@media (max-width: 767px) {
	#products .icon-item { width: 50%; } 
}

/** INDUSTRIES */
#industries { width: 100%; height: 100%; padding: 40px; overflow: hidden; position: relative; background-color: #FFF; }
#industries ul {
	margin: 0;
	padding: 0 0 0 24px;
	display: block;
	float: left;
	width: 50%;
	list-style: none;
}
#industries ul li { position: relative; }
#industries ul li:before {
	content: " ";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #777;
	position: absolute;
	top: 50%;
	left: -10px;
	transform: translate(0,-50%);
}
#industries h1 {
	text-align: center;
	padding: 12px 0;
	font-size: 16px;
	clear: both;
}
#industries h3 {
	width: 200px;
	position: absolute;
	bottom: 120px;
	right: 24px;
	padding: 8px 12px;
	background-color: rgba(255,0,0,0.8);
	color: #FFF;
	border-radius: 10px;
	font-weight: 100;
	transform: rotateZ(-20deg) perspective(1px) translateZ(0);
}
#industries h3:hover, #industries h3:focus, #industries h3:active {
  -webkit-animation-name: industries-wobble;
  animation-name: industries-wobble;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
@keyframes industries-wobble {
  16.65% { transform: rotateZ(-20deg) skew(-12deg); }
  33.3% { transform: rotateZ(-20deg) skew(10deg);  }
  49.95% { transform: rotateZ(-20deg) skew(-6deg); }
  66.6% { transform: rotateZ(-20deg) skew(4deg); }
  83.25% { transform: rotateZ(-20deg) skew(-2deg); }
  100% { transform: rotateZ(-20deg) skew(0); }
}

@media (max-width: 767px) {
	#industries ul { float: none; clear: both; width: 100%; }
	#industries h3 {
		position: relative;
		bottom: auto;
		right: auto;
		transform: perspective(1px) translateZ(0);
		width: 100%;
		text-align: center;
	}
	@keyframes industries-wobble {
		16.65% { transform: skew(-12deg); }
		33.3% { transform: skew(10deg);  }
		49.95% { transform: skew(-6deg); }
		66.6% { transform: skew(4deg); }
		83.25% { transform: skew(-2deg); }
		100% { transform: skew(0); }
	}
}

/** FEATURES */
#features { width: 100%; height: 100%; background-color: #FFF; }
#features > ul {
	overflow: hidden;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 8px 12px;
}
#features > ul > li {
	display: block;
	float: left;
	flex: 1;
	padding: 4px 8px;
}
#features i {
	display: block;
	width: 60px;
	height: 60px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	margin: 0 0 12px 0;
}
#features strong { display: block; margin-bottom: 12px; }
#features > ul > li > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#features > ul > li > ul > li { position: relative; margin-left: 12px; }
#features > ul > li > ul > li:before {
	content: " ";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #777;
	position: absolute;
	top: 50%;
	left: -10px;
	transform: translate(0,-50%);
}
@media (max-width: 767px) {
	#features > ul { display: block; }
	#features > ul > li { flex: 0; width: 100%; }
	#features i { margin: 0 auto; }
	#features strong { text-align: center; }
	#features > ul > li > ul { padding-bottom: 24px; }
	#features > ul > li > ul > li { text-align: center; margin: 0; }
	#features > ul > li > ul > li:before { display: none; }
}
#features span {
	display: block;
	width: 100%;
	height: 300px;
	margin: 24px auto;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/** PRICING */
#pricing { width: 100%; height: auto; margin: 24px auto; padding: 0 60px; }
#pricing img { display: block; width: 100%; height: auto; margin: 0 auto; }
@media (max-width: 767px) {
	#pricing { padding: 0; }
}

/** CUSTOMERS */
#customers { width: 100%; height: auto; margin: 120px auto; padding: 0 40px; }
#customers #customers_icon { padding: 0; overflow: hidden; display: block; }
#customers .icon-item { float: left; width: 12.5%; height: 100px; overflow: hidden; position: relative; } 
#customers .icon-item img {
	display: block; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%,-50%);
	margin: 0 auto;
	width: 80%;
	height: auto;
}
@media (max-width: 767px) {
	#customers { padding: 0; }
	#customers .icon-item { width: 50%; } 
}

/** CONTACT */
#contact {
	width: 100%;
	height: 100vh;
	background-position: right top;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(../img/contact.png);
	position: relative;
}
#contact h1,
#contact h3 {
	position: absolute;
	left: 5%;
	width: 300px;
	color: #FFF;
	font-weight: 100;
	text-align: left;
	padding: 8px 12px;
}
#contact h1 { background-color: rgba(255,0,0,0.8); top: 25%; }
#contact h3 { background-color: rgba(0,0,0,0.8); bottom: 25%; }
@media (max-width: 767px) {
	#contact h1,
	#contact h3 { top: auto; bottom: auto; left: auto; width: 100%; }
	#contact h1 { bottom: 100px; text-align: center; }
	#contact h3 { height: 100px; bottom: 0; font-size: 14px; padding-left: 100px; }
}

/** DEMO */
#demo { width: 100%; height: 100%; overflow: hidden; padding: 40px; }
#demo #demo_left,
#demo #demo_right { float: left; width: 50%; padding: 12px; }
#demo #demo_left ul { margin: 0; padding: 0; list-style: none; }
#demo #demo_left ul li { display: block; position: relative; overflow: hidden; padding: 24px; }
#demo #demo_left ul li img,
#demo #demo_left ul li p { display: block; float: left; height: auto; }
#demo #demo_left ul li img { width: 10%; }
#demo #demo_left ul li p { width: 90%; padding-left: 12px; }
#demo #demo_form { margin-top: 24px; }
#demo #demo_form .form-field { width: 100%; overflow: hidden; margin-bottom: 12px; }
#demo #demo_form .form-label { float: left; width: 30%; padding: 4px 8px; }
#demo #demo_form .form-input { float: left; width: 70%; height: 100%; position: relative; }
#demo #demo_form .form-input input:not([type="submit"]) {
	width: 100%;
	height: 32px;
	line-height: 32px;
	padding: 0 0 0 12px;
	outline: none;
	border: 1px solid #111;
}
#demo #demo_form .form-input input:not([type="submit"])::-webkit-input-placeholder { text-transform: uppercase; }
#demo #demo_form .form-input input:not([type="submit"])::-moz-placeholder { text-transform: uppercase; }
#demo #demo_form .form-input input:not([type="submit"]):-ms-input-placeholder { text-transform: uppercase; }
#demo #demo_form .form-input input:not([type="submit"]):-moz-placeholder { text-transform: uppercase; }
#demo #demo_form .form-input input[type="submit"] {
	display: block;
	outline: none;
	border: 0;
	box-shadow: 0 10px 10px -10px #111;
	background-color: rgba(255,0,0,0.8);
	color: #FFF;
	padding: 8px 12px;
	text-transform: uppercase;
	transition: all 250ms ease-in-out;
	cursor: pointer;
}
#demo #demo_form .form-input input[type="submit"]:hover,
#demo #demo_form .form-input input[type="submit"]:active,
#demo #demo_form .form-input input[type="submit"]:focus { background-color: rgba(0,0,0,0.8); }

#demo .demo-err {
	position: absolute;
	top: 0;
	right: 0%;
	height: 32px;
	line-height: 32px;
	padding: 0 4px;
	background-color: rgba(255,0,0,0.8);
	color: #FFF;
	box-shadow: 0 10px 10px -10px #111;
	transition: all 250ms ease-in-out;
}

@media (max-width: 767px) {
	#demo,
	#demo #demo_left,
	#demo #demo_right { padding: 0; }
	#demo #demo_left,
	#demo #demo_right { float: none; width: 100%; clear: both; }
	#demo #demo_right { padding: 12px; }
	#demo #demo_right h3 { text-align: center; }
	#demo #demo_left ul li img,
	#demo #demo_left ul li p { float: none; clear: both; width: 100%; }
	#demo #demo_left ul li img { width: 60px; margin: 0 auto; }
}

/** FOOTER */
#footer { width: 100%; height: auto; overflow: hidden; margin-top: 60px; background-color: #111; color: #FFF; }
#footer > ul { margin: 0; padding: 0; display: block; overflow: hidden; list-style: none; }
#footer > ul > li { display: block; float: left; padding: 8px 12px; position: relative; height: 100%; }
#footer > ul > li:first-child { width: 20%; height: 100px; }
#footer > ul > li:last-child { width: 80%; height: 100px; }
#footer > ul > li > ul { display: flex; list-style: none; }
#footer > ul > li > ul > li { flex: 1; line-height: 80px; }
#footer > ul > li > ul > li > a { display: block; color: #FFF; text-decoration: none; }
#footer img { width: 100px; height: auto; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

@media (max-width: 767px) {
	#footer > ul > li { float: none; clear: both; width: 100% !important; }
	#footer > ul > li:last-child { padding-left: 120px; height: auto; }
	#footer > ul > li > ul { display: block; }
	#footer > ul > li > ul > li { display: block; width: 100%; height: 40px; line-height: 32px; }
	#footer img { width: 80%; }
}