*, :before, :after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }

audio:not([controls]) { display: none; height: 0; }

[hidden], template { display: none; }

a { background: transparent; text-decoration: none; }

a:active, a:hover { outline: 0; text-decoration: none; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: 700; }

dfn { font-style: italic; }

h1 { font-size: 2em; margin: .67em 0; }

mark { background: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -.5em; }

sub { bottom: -.25em; }

img { border: 0; vertical-align: middle; width: 100%; height: auto; }

svg:not(:root) { overflow: hidden; }

figure { margin: 1em 40px; }

hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }

pre { overflow: auto; }

code, kbd, pre, samp { font-family: monospace,monospace; font-size: 1em; }

button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }

button { overflow: visible; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], html input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

fieldset { border: 0; margin: 0; padding: 0; }

legend { border: 0; padding: 0; }

textarea { overflow: auto; resize: vertical; }

optgroup { font-weight: 700; }

table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

audio, canvas, img, svg, video { vertical-align: middle; }

ul, li { margin: 0; padding: 0; list-style: none; }

.browsehappy { margin: .2em 0; background: #ccc; color: #000; padding: .2em 0; }

.full-wrapper { position: relative; width: 1080px; margin-left: auto; margin-right: auto; }

.medium-wrapper { position: relative; width: 900px; margin-left: auto; margin-right: auto; }

.col-3 { position: relative; float: left; width: 33.33333%; padding: 0 10px; }

.col-half { position: relative; float: left; width: 50%; padding: 0 10px; }

.col-full { position: relative; width: 100%; padding: 0 10px; }

/*
## Typography 
***********************************************
*/
html { color: #464C4C; font-size: 18px; line-height: 1.333; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; }

h1 { font-size: 32px; }

h2 { font-size: 30px; }

h3 { font-size: 20px; }

p { margin: 0; color: #92A5A5; font-size: 18px; }

.os-light, h1 { font-family: "Open Sans",sans-serif; font-style: normal; font-weight: 300; }

.os-regular, html { font-family: "Open Sans",sans-serif; font-style: normal; font-weight: 400; }

.os-medium, h3, .siteNav a { font-family: "Open Sans",sans-serif; font-style: normal; font-weight: 600; }

.os-bold { font-family: "Open Sans",sans-serif; font-style: normal; font-weight: 700; }

.btnBlue { padding: 12px 20px; display: inline-block; vertical-align: middle; font-size: 18px; color: #fff; line-height: 24px; text-align: center; border-radius: 4px; background-color: #3398db; box-shadow: inset 0 1px 0 0 rgba(225, 225, 225, 0.3); }
.btnBlue:hover { background-color: #5eaee3; }

.btnAppleStore { display: inline-block; vertical-align: middle; background-position: 0 -49px; width: 162px; height: 48px; }

.heading-section { text-align: center; width: 700px; margin: 0 auto 36px; }
.heading-section p { margin-top: 24px; }

/*
## Icon 
***********************************************
*/
.icon-feature01 { background-position: -169px -49px; width: 48px; height: 48px; }

.icon-feature02 { background-position: -220px -49px; width: 48px; height: 48px; }

.icon-feature03 { background-position: -271px -49px; width: 48px; height: 48px; }

.icon-feature04 { background-position: -322px -49px; width: 48px; height: 48px; }

.icon-feature05 { background-position: -169px -102px; width: 48px; height: 48px; }

.icon-feature06 { background-position: -220px -102px; width: 48px; height: 48px; }

.icon-feature07 { background-position: -271px -102px; width: 48px; height: 48px; }

.icon-feature08 { background-position: -322px -102px; width: 48px; height: 48px; }

/*
## Helper Class 
***********************************************
*/
.hidden { display: none !important; visibility: hidden; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.invisible { visibility: hidden; }

.clearfix:before, .full-wrapper:before, .medium-wrapper:before, .inner-siteHeader:before, .feature-lists li:before, .clearfix:after, .full-wrapper:after, .medium-wrapper:after, .inner-siteHeader:after, .feature-lists li:after { content: " "; display: table; }

.clearfix:after, .full-wrapper:after, .medium-wrapper:after, .inner-siteHeader:after, .feature-lists li:after { clear: both; }

.sprite, .btnAppleStore, .icon-feature01, .icon-feature02, .icon-feature03, .icon-feature04, .icon-feature05, .icon-feature06, .icon-feature07, .icon-feature08, .logo, .footerlogo { display: inline-block; font: 0/0 a; text-shadow: none; color: transparent; background-image: url(../img/sprite.png); background-repeat: no-repeat; background-size: 400px 400px; }

.transition-background, .btnBlue { -webkit-transition: background 0.2s ease; -moz-transition: background 0.2s ease; -ms-transition: background 0.2s ease; -o-transition: background 0.2s ease; transition: background 0.2s ease; }

.transition-color, .siteNav a { -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; -ms-transition: color 0.2s ease; -o-transition: color 0.2s ease; transition: color 0.2s ease; }

/*
## Navigation 
***********************************************
*/
.siteHeader { position: absolute; top: 0; left: 0; width: 100%; z-index: 9; }

.inner-siteHeader { padding: 24px 0; width: 1080px; margin-left: auto; margin-right: auto; }

.logo { float: left; background-position: 0 0; vertical-align: top; width: 190px; height: 48px; }

.siteNav { float: right; }
.siteNav a { padding: 14px 0; margin-left: 20px; display: inline-block; color: #CDDFDF; font-size: 15px; }
.siteNav a:hover { color: #FFF; }

/*
## Hero 
***********************************************
*/
.overview-hero-wrapper { position: relative; height: 670px; overflow: hidden; }

.inner-hero { position: relative; z-index: 2; padding-top: 95px; }

.hero-text { margin-top: 55px; }
.hero-text h1 { color: white; margin-bottom: 32px; }
.hero-text a { margin-right: 28px; }

.hero-device-shell { position: relative; }
.hero-device-shell img { vertical-align: bottom; }

#js-particles { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background-color: #17222E; }

/*
## Overview Description 
***********************************************
*/
.ov-desc-wrapper { padding: 132px 0; border-bottom: 1px solid #eaeded; }

.ov-device-shell { margin-top: 24px; }

.ov-list-items li { margin-top: 36px; }
.ov-list-items li:first-child { margin-top: 0; }
.ov-list-items h3 { margin-bottom: 12px; }

/*
## Features section
***********************************************
*/
.features-wrapper { padding-top: 100px; border-bottom: 1px solid #eaeded; overflow: hidden; }

.feature-lists li { margin-top: 32px; }
.feature-lists span { float: left; }
.feature-lists h3 { margin-left: 70px; }
.feature-lists p { margin-top: 6px; margin-left: 70px; }

.features-device-shell { overflow: hidden; padding-top: 56px; text-align: center; width: 760px; margin: 0 auto; }
.features-device-shell img { vertical-align: bottom; }

.howitworks-wrapper { padding-top: 132px; background-color: #F7F9F9; border-bottom: 1px solid #eaeded; overflow: hidden; }

.hiw-content h3 { margin-bottom: 12px; height: 52px; text-align: center; }
.hiw-content img { vertical-align: bottom; }

.wui-wrapper { padding-top: 132px; padding-bottom: 132px; border-bottom: 1px solid #eaeded; }

.user-company { text-align: center; }
.user-company img { display: inline-block; vertical-align: middle; width: inherit; margin: 0 10px; }

.contact-wrapper { padding: 132px 0; position: relative; }

.contact-form h2 { color: white; margin-bottom: 24px; }
.contact-form .form-block { margin-top: 12px; }
.contact-form .form-block:first-child { margin-top: 0; }
.contact-form .form-block input, .contact-form .form-block textarea { width: 100%; border: 1px solid #92a5a5; padding: 12px; border-radius: 4px; }
.contact-form .btnSend { padding-left: 30px; padding-right: 30px; }

.errorMessage { display: none; margin-top: 12px; padding: 12px; color: white; vertical-align: middle; width: 100%; background-color: #EE4920; border-radius: 4px; }
.successMessage { display: none; margin-top: 12px; padding: 12px; color: white; vertical-align: middle; width: 100%; background-color: #99CC99; border-radius: 4px; }
.error { border: 1px solid #EE4920 !important; background-color: #fcdcd4; }

.contact-info { margin-left: 90px; }
.contact-info h2 { margin-bottom: 24px; color: white; }
.contact-info p { margin-bottom: 24px; }

#js-particles-contact { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background-color: #17222E; z-index: -1; }

.siteFooter { background-color: #17222E; padding: 24px 0; }

.footerlogo { margin-top: 12px; background-position: -193px 0; width: 150px; height: 38px; vertical-align: top; float: left; }

p.footerContent { float: right; color: white; font-size: 16px; width: 224px; }
p.footerContent a { color: white; }

/*
## Animation tween 
***********************************************
*/
.ani-ov-device { position: relative; left: -100px; opacity: 0; }

.ani-feature-device { position: relative; top: 200px; opacity: 0; }

.ani-hiw-con-01, .ani-hiw-con-02, .ani-hiw-con-03 { position: relative; top: 100px; opacity: 0; }

@media only screen and (max-width: 1024px) { .full-wrapper { width: 100%; padding-left: 15px; padding-right: 10px; }
  .medium-wrapper { width: 100%; padding-left: 15px; padding-right: 15px; }
  .heading-section { width: 80%; }
  .inner-siteHeader { width: 100%; padding-left: 20px; padding-right: 20px; }
  .btnSignIn { display: none !important; }
  .overview-hero-wrapper { height: 640px; }
  .hero-text { margin-top: 100px; }
  .hero-text h1 { font-size: 30px; }
  .hero-text a { margin-right: 10px; }
  .ov-desc-wrapper { padding: 66px 0; }
  .features-wrapper { padding-top: 34px; }
  .features-device-shell { width: 70%; }
  .howitworks-wrapper { padding-top: 66px; }
  .wui-wrapper { padding-top: 66px; padding-bottom: 66px; }
  .contact-wrapper { padding: 66px 0; }
  .contact-info { margin-left: 10px; } }
@media only screen and (max-width: 767px) { .col-3 { width: inherit; float: none; }
  .col-half { width: inherit; float: none; }
  .col-full { width: inherit; float: none; }
  .heading-section { width: 90%; margin-bottom: 24px; }
  .overview-hero-wrapper { height: 640px; }
  .hero-text { margin-top: 0px; margin-bottom: 24px; text-align: center; }
  .hero-text h1 { font-size: 21px; margin-bottom: 12px; }
  .hero-text a { margin-top: 10px; margin-bottom: 10px; }
  .ov-desc-wrapper { padding: 33px 0; }
  .ov-device-shell { display: none; }
  .features-wrapper { padding-top: 1px; }
  .features-device-shell { width: 100%; }
  .hiw-content { text-align: center; }
  .hiw-content h3 { height: inherit; margin-top: 30px; margin-bottom: 0; }
  .hiw-content img { width: 70%; }
  .howitworks-wrapper { padding-top: 33px; }
  .wui-wrapper { padding-top: 33px; padding-bottom: 33px; }
  .wui-wrapper img { margin-top: 12px; margin-bottom: 12px; }
  .contact-wrapper { padding: 33px 0; }
  .contact-form .form-block .btnSend { width: 100%; }
  .contact-info { margin-top: 36px; margin-left: 0; }
  .contact-info .btnDownload { width: 100%; }
  .footerlogo { float: none; }
  p.footerContent { margin-top: 24px; float: none; }
  .ani-ov-device { position: relative; left: 0; opacity: 1; }
  .ani-feature-device { position: relative; top: 0; opacity: 1; }
  .ani-hiw-con-01, .ani-hiw-con-02, .ani-hiw-con-03 { position: relative; top: 0; opacity: 1; } }
@media print { * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; } }
