/* ! normalize.css v1.0.0 | MIT License | git.io/normalize */
 
/* ==========================================================================
HTML5 display definitions
========================================================================== */
 
/* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */
 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
/* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
/* * Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }
/* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4.
* Known issue:no IE 6 support. */
[hidden] { display: none; }
/* ==========================================================================
Base
========================================================================== */
/* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
*    `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
*    user zoom. */
 
html { font-size: 100%; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */ }
html, html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
/* * Addresses `font-family` inconsistency between `textarea` and other form
* elements. */
html, button, input, select, textarea { font-family: 'Open Sans', sans-serif; }
/* * Addresses margins handled incorrectly in IE 6/7. */
body { margin: 0; font-family: 'Open Sans', sans-serif; }
/* ==========================================================================
Links
========================================================================== */
/* * Addresses `outline` inconsistency between Chrome and other browsers. */
 
a:focus { outline: thin dotted; }
/* * Improves readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }
/* ==========================================================================
Typography
========================================================================== */
/* * Addresses font sizes and margins set differently in IE 6/7.
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */
@font-face {
    font-family: FontAwesome;
    src: url(../fonts/fontawesome-webfont.woff);
} 

h1 { font-size: 2em; margin: 0.67em 0; color: #353535; }
h2 { font-size: 1.5em; margin: 0.83em 0; }
h3 { font-size: 1.17em; margin: 1em 0; }
h4 { font-size: 1em; margin: 1.33em 0; }
h5 { font-size: 0.83em; margin: 1.67em 0; }
h6 { font-size: 0.75em; margin: 2.33em 0; }
/* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }
/* * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
/* * Addresses styling not present in Safari 5 and Chrome. */
dfn { font-style: italic; }
/* * Addresses styling not present in IE 6/7/8/9. */
mark { background: #ff0; color: #000; }
/* * Addresses margins set differently in IE 6/7. */
p, pre { margin: 1em 0; }
/* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */
code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* * Improves readability of pre-formatted text in all browsers. */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
/* * Addresses CSS quotes not supported in IE 6/7. */
q { quotes: none; }
/* * Addresses `quotes` property not supported in Safari 4. */
q:before, q:after { content: ''; content: none; }
small { font-size: 75%; }
/* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* ==========================================================================
Lists
========================================================================== */
/* * Addresses margins set differently in IE 6/7. */
 
dl, menu, ol, ul { margin: 1em 0; }
dd { margin: 0 0 0 40px; }
/* * Addresses paddings set differently in IE 6/7. */
menu, ol, ul { padding: 0 0 0 40px; }
/* * Corrects list images handled incorrectly in IE 7. */
nav ul, nav ol { list-style: none; list-style-image: none; }
/* ==========================================================================
Embedded content
========================================================================== */
/* * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7. */
 
img { border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */ }
/* * Corrects overflow displayed oddly in IE 9. */
svg:not(:root) { overflow: hidden; }
/* ==========================================================================
Figures
========================================================================== */
/* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */
 
figure { margin: 0; }
/* ==========================================================================
Forms
========================================================================== */
/* * Corrects margin displayed oddly in IE 6/7. */
 
form { margin: 0; }
/* * Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
/* * 1. Corrects color not being inherited in IE 6/7/8/9.
* 2. Corrects text not wrapping in Firefox 3.
* 3. Corrects alignment displayed oddly in IE 6/7. */
legend { border: 0; /* 1 */
	padding: 0; white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */ }
/* * 1. Corrects font size not being inherited in all browsers.
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, *    and Chrome.
* 3. Improves appearance and consistency in all browsers. */
button, input, select, textarea { font-size: 100%; /* 1 */
	margin: 0; /* 2 */
	vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */ }
/* * Addresses Firefox 3+ setting `line-height` on `input` using ` !important` in
* the UA stylesheet. */
button, input { line-height: normal; }
/* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
*    and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
*    `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
*    Known issue:inner spacing remains in IE 6. */
button, html input[type="button"], /* 1 */
input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */
	cursor: pointer; /* 3 */
*overflow: visible; /* 4 */ }
/* * Re-set default cursor for disabled elements. */
button[disabled], input[disabled] { cursor: default; }
/* * 1. Addresses box sizing set to content-box in IE 8/9.
* 2. Removes excess padding in IE 8/9.
* 3. Removes excess padding in IE 7.
*    Known issue:excess padding remains in IE 6. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
	*height: 13px; /* 3 */
*width: 13px; /* 3 */ }
/* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
*    (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */
	-moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box; }
/* * Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X. */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/* * Removes inner padding and border in Firefox 3+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/* * 1. Removes default vertical scrollbar in IE 6/7/8/9.
* 2. Improves readability and alignment in all browsers. */
textarea { overflow: auto; /* 1 */
vertical-align: top; /* 2 */ }
/* ==========================================================================
Tables
========================================================================== */
/* * Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }
/* ==========================================================================
Global Styles
========================================================================== */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset };
a { color: #353535; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
a:hover, a:focus { color: #23abe2; text-decoration: none; }
p { color: #8c9398; word-spacing: 1px; line-height: 30px; font-size: 14px; }
h2 { font-size: 15px; color: #353535; text-transform: uppercase; font-weight: bold; }
h2::after { content: " "; border: solid 2px #23abe2; display: block; width: 35px; margin: 25px auto; }
.section-padding { padding: 90px 0 100px }
.dark-bg { background: #f3f5f8; }
.light-bg { background-color: #fff; }
.dark-box { background: #f3f5f8; -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4; -moz-box-shadow: 0px 3px 0px 0px #f0f2f4; box-shadow: 0px 3px 0px 0px #f0f2f4; }
.light-box { background-color: #fff; -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4; -moz-box-shadow: 0px 3px 0px 0px #f0f2f4; box-shadow: 0px 3px 0px 0px #f0f2f4; padding: 20px 0; }
.light-box:hover, .light-box:focus { -webkit-box-shadow: 0px 3px 0px 0px #23abe2; -moz-box-shadow: 0px 3px 0px 0px #23abe2; box-shadow: 0px 3px 0px 0px #23abe2; }
.box-hover { transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; }
.box-hover:hover, .box-hover:focus { transform: translate(0, -15px); -webkit-transform: translate(0, -15px); -ms-transform: translate(0, -15px); }
.wrapper { height: 650px; }
.nopadding { padding: 0; }
.inner { display:inline-block; }
.standard-clear-btn {padding:10px 25px; background:transparent; border:1px solid #444; border-radius: 3px; color:#444; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.standard-clear-btn:hover {color:#23abe2; border:1px solid #23abe2; cursor: pointer;}
.row-bottom-spacing{margin-bottom:80px;}
.center-text {text-align:center;}
.right-text{text-align:right;}
.left-text {text-align:left;}
.smooth-transitions * {-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.flex-center{display:flex; align-items:center; flex-direction:row;}
.white{color:white !important;}
.blue{background:#23abe2 !important;}
.no-border{border: 0px !important}
.overview{margin-bottom:100px;}
.white-background{background:white !important}
.border-hidden{border:hidden}
/* ==========================================================================
Slick Padding
========================================================================== */
.overview-wrapper .slick-slide, #features .slick-slide, .slick-price-breaks .slick-slide  {padding:0 15px;}
.slick-sales .slick-slide, .slick-service .slick-slide, .slick-stock .slick-slide{ padding: 0 25px;}
.slick-price-breaks {max-width:900px; margin:0 auto;}
/* ==========================================================================
Navigation
========================================================================== */
nav { margin-bottom:0px !important; border-radius: 0!important; background:white !important}
.navbar-brand{ padding-top:8px; padding-bottom:4px; padding-left:15px; }
/* ==========================================================================
Hero
========================================================================== */
#hero { background: url('../img/auckland.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#hero .inner {text-align:left; font-family:"Open Sans";}
#hero h1 {font-size:3em;color:white;margin:0;}
.ezemobile-trans-logo {background: url('../img/em-trans-logo.png') no-repeat center center; background-size:250px; width:250px; height:40px;}
.hero h1, #hero h1 { font-size: 40px; letter-spacing: 1px; }
.hero p, #hero p { letter-spacing: 0.1pt; color: #eee; word-spacing: 0.1pt; line-height:1.2em;}
.hero-desc, #hero .hero-desc{max-width:500px; font-size:1.2em;}
.free-demo-btn { background: rgba(35, 171, 226, 1); padding: 15px 40px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; color: #fff; text-transform: uppercase; letter-spacing: 1px; display: inline-block; font-weight: normal; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
#hero .free-demo-btn { margin: 15px 0 0; }
/*.free-demo-btn:hover, .free-demo-btn:focus { background: rgba(240, 241, 243, 1); color: #23abe2; }*/
.free-demo-btn:hover, .free-demo-btn:focus { background:#ea732b; color:white;}

/* ==========================================================================
Feature Hero
========================================================================== */
#feature-hero { background: url('../img/eda50_shop.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#feature-hero h1 {font-size:3em;color:white;margin:0;}
#feature-hero .inner {text-align:left; font-family:"Open Sans";}

.feature-hero-center {}
#feature-salesoverview-hero {background: url('../img/sales_invoices_hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#feature-overview-hero { background:linear-gradient(#5b86e5, #36d1dc); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#feature-transactions-hero { background: url('../img/product-transcations-hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#feature-stocktakes-hero { background: url('../img/stocktakes-hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#feature-customers-hero { background: url('../img/customer-management-hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#feature-sales-orders-hero { background: url('../img/so_picking_hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 30%; }
#feature-invoice-hero {background: url('../img/sales_invoices_hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#feature-purchases-hero {background: url('../img/eda50_shop.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#feature-credits-hero {background: url('../img/sales_credit_hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#feature-jobs-hero {background: url('../img/job_tracking_hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#feature-inventory-hero {background: url('../img/warehouse.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#feature-scanning-hero {background: url('../img/hero-sales.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#feature-batches-hero {background: url('../img/batch_tracking_hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#feature-locations-hero {background: url('../img/warehouse.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#feature-supplier-hero {background: url('../img/feature_supplier.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
.feature-hero-center h1 {color:#444; border-bottom: 1px solid #444; padding-bottom:0.5em;}
.feature-hero-center .inner{text-align:center;}
.feature-hero-center {display:flex; align-items:center; flex-direction:row; text-align:left;}
.feature-hero-center .banner-text {text-align:center;}
.feature-hero-center .hero-desc {display:inline-block; color:#444;}

#feature-batches-hero h1 {font-size:3em;color:white;margin:0;}
#feature-scanning-hero h1{border-color: red;}

/* ==========================================================================
Next Key Feature Section
========================================================================== */
#next-feature-po {background: url('../img/eda50_shop.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
#next-feature-so-orders {background: url('../img/sales_invoices_hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; border-bottom:1px solid white;}
#next-feature-so-invoices {background: url('../img/sales_credit_hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; border-bottom:1px solid white;}
#next-feature-so-credits {background: url('../img/job_tracking_hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; border-bottom:1px solid white;}
#next-feature-so-jobs {background: url('../img/customer-management-hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; border-bottom:1px solid white;}
#next-feature-so-customers {background: url('../img/eda50_shop.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; border-bottom:1px solid white;}
#next-feature-batches {background: url('../img/product-transcations-hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; border-bottom:1px solid white;}
#next-feature-transactions {background: url('../img/stocktakes-hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; border-bottom:1px solid white;}
#next-feature-po-receipts {background: url('../img/feature_supplier.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; border-bottom:1px solid white;}
#next-feature-stocktakes {background: url('../img/hero-sales.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; border-bottom:1px solid white;}
#next-feature-supplier {background: url('../img/warehouse.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; border-bottom:1px solid white;}
#next-feature-locations {background: url('../img/batch_tracking_hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; border-bottom:1px solid white;}
#next-feature-dashboard {background: url('../img/sales_credit_hero.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; border-bottom:1px solid white;}
.next-feature-heading{ padding:0.5em; color:white;}
.next-feature-a {margin:0 auto;}
.next-feature-a p {border-bottom:1px solid white; border-top:1px solid white; color:white; font-size:1.3em; padding:0.2em;}
.next-feature-a i {font-size:1.2em; margin-left:0.5em;}
.next-feature-a p:hover{border-bottom:1px solid #23abe2; border-top:1px solid #23abe2;}
.next-feature-dark-text .next-feature-heading, .next-feature-dark-text .next-feature-a p  ,next-feature-dark-text{color:#444;}

/* ==========================================================================
Key Feature Section
========================================================================== */

.key-features-section .container {
    padding-top:50px;
    padding-bottom:50px;
}

.key-features-section .dash-image {
    width:100%;
    margin-top:-100px;
}

.key-features-section .key-feature-img-box{
    /*border-right:1px solid #CCC;*/
}

.key-feature-box, .key-feature-img-box{
    /*height:20em;*/
}

.key-feature-row {
    margin-top:4em;
}

.key-feature-icon{
    width:100%;
    margin:0 auto;
    color:#999;
}

.key-feature-box {
    display:flex;
    align-items:center;
    flex-direction:column;
    text-align:left;
}

.key-feature-box h1, .key-feature-box p{
    margin:0.5em;
    width:100%;
    text-align:left;
}

.key-feature-box a{
    text-decoration: underline;
}

.key-feature-box h1{
    font-weight:100;
    font-size:2em;
    text-align:left;
    line-height:1.5em;
}

.key-feature-icon-box:hover {
    cursor:pointer;
}

/* ==========================================================================
Website - We Listen
========================================================================== */
#we-listen {background:url('../img/black-Linen.png'); padding-top: 5em; padding-bottom:5em; border-bottom:1px solid whitesmoke;}
#we-listen h1, #we-listen p {color:white;}
#we-listen .we-listen-button {border:1px solid white; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; background:none; color:white; padding: 1em 1.5em 1em 1.5em; margin-top:1em;}
#we-listen .we-listen-button i {margin-right:10px; font-size:1.5em; margin-bottom:-10px;}
#we-listen .we-listen-button:hover, #we-listen .we-listen-button:active {background:white; color:#444;}
#we-listen .we-listen-button:hover i {color:#109347;}

/* ==========================================================================
Website - theres a lot to love section -- FEATURES
========================================================================== */
.flex-row {
    display:flex;
    align-items:center;
    justify-content:center;
}

#features{background: url('../img/grid.png')}
#features h1 {margin: 2em;}
#features h3 {margin: 1em 0 2em 0; font-size:1.4em;}
.features-row-box{padding:2em; border-top:1px solid #CCC; border-left:1px solid #CCC; border-right:1px solid #CCC; background:white;}
#features .features-purchases{border-bottom:1px solid #CCC;}
#features .feature-box p{color:#444;}
#features .feature-box {padding:1em; border:1px solid transparent; }
#features .feature-box:hover{cursor:pointer; background:#FAFAFA;  border:1px solid #f7552a; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
#features .feature-box:hover h2:after{border-color:#f7552a;}
/*#features .features-sales{background:#f4f4f4;}*/
#features .see-more-btn { background: rgba(35, 171, 226, 1); padding: 10px 20px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; color: #fff; letter-spacing: 1px; display: inline-block; font-weight: normal; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.margin-bottom{margin-bottom:100px}


/* ==========================================================================
Feature pages - sales -> sales orders, sales -> invoice etc..
========================================================================== */
.area-app-pdf-print:hover {
    background:red;
}

#module1, #module3{background: #FAFAFA;}
#module1, #module2, #module3, #module4{border-bottom:1px solid #F2F2F2;}
.feature-page p {line-height:1.6em;}
.modal-body {position: relative;padding: 5px;}
.receipt-in-link{color:white; text-decoration:underline;}
.receipt-in-link:hover{color:#444; text-decoration:underline;}
#imagemodal .modal-dialog{top:50%; transform:translateY(-50%);overflow-y:auto; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; width:200px;}
.pop:hover{cursor:zoom-in; cursor:-webkit-zoom-in;}

/* ==========================================================================
Pricing
========================================================================= */
#pricing-hero { background: url('../img/hero-pricing.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position:relative;  height: auto; }
#pricing-hero h1, #pricing-hero p { color: #444; }
.pricing-head p {color: white !important;}
.pricing-row p {color: #8c9398 !important; font-size:13px !important;}
.choose-modules {margin-top:50px;}
#pricing-modules {padding-bottom:5px;}
#pricing-modules .icon { height: 135px; width: 135px; line-height: 135px; max-width: 100%; background: #23abe2; border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; color: #fff; font-size: 55px; text-align: center; vertical-align: middle; position: relative; margin: 0 auto 20px; }
.price-module img:hover {cursor:pointer;}
.price-module img {border:3px solid transparent; border-radius: 50%; margin: 0 auto; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.grey-image {-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); }
.active-price-mod, .price-module img:hover {-webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); filter: grayscale(0%);  }
.checked-modules{display:inline-block; background:#EEE; padding:3px 5px; width:80px; margin:15px 5px; border: 1px solid #CCC; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; }
.choose-price-btn:hover {border: 1px solid #23abe2 !important; color:#23abe2 !important; cursor:pointer;}
.choose-price-btn {background:none; border:1px solid #444; color:#444; font-size:1em; padding:2px 5px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; margin:20px auto; width:100px;}
#price-mod-overview{margin: 80px 0;}
#price-mod-overview img, #price-mod-overview h3 {display:inline-block;}
#price-mod-overview h3 {margin-left:20px;}
#price-mod-overview li {text-align: left;}
.price-mod-overview-head {background: #EEE; text-align:left;}
/*.price-mod-cont{border:1px solid #EEE; margin:30px;}*/
#price-mod-overview img {margin:8px;}
.price-mod-overview-foot { margin-top:20px;}
/*#integration{margin:80px 0;}*/
/* ==========================================================================
Integration
========================================================================== */
#integration-hero { background: url('../img/hero-cogs.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position:relative; height: auto; }
#integration-hero .inner {top: 47% !important;}
.integration-header {text-align:center;}
.integration-header h1 { color:white;}
.integration-intro {text-align: justify;}
.integration-intro p {font-size:14px; line-height: 35px; margin:50px 0;}
.integration-intro h1 {text-align: center; margin-top:50px;}
.darker-txt {color: #666;}

/* ==========================================================================
Modules
========================================================================== */
#service-hero { background: url('../img/hero-bg5.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: auto; }
#stock-hero { background: url('../img/van-stock-3.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: auto; }
#sales-hero { background: url('../img/hero-sales.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: auto; }
#sales-hero .inner, #stock-hero .inner {text-align: center;}
#sales-hero h1 span, #sales-hero p, #stock-hero h1 span, #stock-hero p, #service-hero h1 span, #service-hero p { color: #FFF !important; letter-spacing: 1px}
#sales-hero h1, #stock-hero h1, #service-hero h1 { font-size: 28px; margin:0; letter-spacing: 1px;}
#service-hero .hero-sub-header {font-size: 0.5em; letter-spacing: 1px;}

#sales-overview i, #stock-overview i, #service-overview i{font-size: 5em; margin-bottom:35px;}
#sales-overview .spacing {padding:0 40px;}
.sales-ignite .free-demo-btn:hover {background: white; border: 1px solid transparent; color:#444;}
.sales-ignite .free-demo-btn {background:none; border:1px solid white; color:white;}
.sales-ignite { background:#23abe2 !important;}

#sales-demo h1, #stock-demo h1, #service-demo h1 {margin-bottom: 150px; color:white;}
#sales-demo { background: #444;}
#stock-demo, #service-demo { background: black; }

#template { display:inline-block; position:relative;}
#template img { position: absolute; }
.vid-header { margin: -40px 0px 30px 0px;}
.sales-icon, .stock-icon, .service-icon { height: 80px; width: 80px; line-height: 80px; max-width: 100%; background: #444; border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; color: #fff; font-size: 55px; text-align: center; vertical-align: middle; position: relative; margin: 0 auto 0px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.sales-icon-container, .stock-icon-container, .service-icon-container {margin-bottom:40px;}
.sales-icon img, .stock-icon img, .service-icon img {width:55px; height:55px;}
.active-feature { background: #3e5b6c; } 
.instructions p {font-size:0.9em; opacity:0.7;}
.current-instruction { font-size: 1.2em !important; opacity:1 !important;}
.sales-icon:hover, .stock-icon:hover, .service-icon:hover{ background:#3e5b6c; cursor:pointer; -moz-animation: bounceOut .3s linear; -webkit-animation: bounceOut .3s linear;}
@-moz-keyframes bounceOut { 0%{ box-shadow: 0 0 0 1px #23abe2; opacity:1;} 25%{ box-shadow: 0 0 0 1.5px #23abe2; opacity:1;} 25%{ box-shadow: 0 0 0 2px #23abe2; opacity:1;} 75%{ box-shadow: 0 0 0 2.5px #23abe2; opacity:1;} 100%{ box-shadow: 0 0 0 1.5px #23abe2; opacity:1;}}
@-webkit-keyframes bounceOut { 0%{ box-shadow: 0 0 0 1px #23abe2; opacity:1;} 25%{ box-shadow: 0 0 0 1.5px #23abe2; opacity:1;} 25%{ box-shadow: 0 0 0 2px #23abe2; opacity:1;} 75%{ box-shadow: 0 0 0 2.5px #23abe2; opacity:1;} 100%{ box-shadow: 0 0 0 1.5px #23abe2; opacity:1;}}
.video-js { background:none !important; position:inherit !important; height:100%; width:100%;}
.vjs-tech { width: 100%; height:100%;}
.vjs-big-play-button:hover {box-shadow:none !important; border-color:#444 !important;}
#template {width:100%;}
.instruction{display:none;}
.module-intro {background: white;}
/* ==========================================================================
Intro
========================================================================== */
/*.intro { background: #f3f5f8; }
.intro p { margin: 50px 0 0; font-size:14px; line-height: 35px;}
h1.arrow { font-size: 15px; text-transform: uppercase; color: #353535; letter-spacing: 1px; background: url('../img/h1-bg.png') no-repeat center bottom; padding-bottom: 30px; font-weight: bold; }*/
/* ==========================================================================
Overview and features
========================================================================== */
/*.overview-wrapper, .features-wrapper, .team-wrapper, .modules-wrapper { margin: 70px 0 0; }
.shadow { text-shadow: rgb(31, 150, 199) 1px 1px, rgb(31, 150, 199) 2px 2px, rgb(31, 150, 199) 3px 3px, rgb(31, 150, 199) 4px 4px, rgb(31, 150, 199) 5px 5px, rgb(31, 150, 199) 6px 6px, rgb(31, 150, 199) 7px 7px, rgb(31, 150, 199) 8px 8px, rgb(31, 150, 199) 9px 9px, rgb(31, 150, 200) 10px 10px, rgb(31, 151, 201) 11px 11px, rgb(31, 152, 202) 12px 12px, rgb(31, 153, 203) 13px 13px, rgb(31, 154, 204) 14px 14px, rgb(32, 155, 205) 15px 15px, rgb(32, 156, 206) 16px 16px, rgb(32, 157, 208) 17px 17px, rgb(32, 157, 209) 18px 18px, rgb(32, 158, 210) 19px 19px, rgb(32, 159, 211) 20px 20px, rgb(33, 160, 212) 21px 21px, rgb(33, 161, 213) 22px 22px, rgb(33, 162, 214) 23px 23px, rgb(33, 163, 215) 24px 24px, rgb(33, 164, 217) 25px 25px, rgb(33, 164, 218) 26px 26px, rgb(34, 165, 219) 27px 27px, rgb(34, 166, 220) 28px 28px, rgb(34, 167, 221) 29px 29px, rgb(34, 168, 222) 30px 30px, rgb(34, 169, 223) 31px 31px, rgb(34, 170, 224) 32px 32px, rgb(35, 171, 226) 33px 33px;}
.shadow-features { text-shadow: rgb(59, 59, 59) 1px 1px, rgb(59, 59, 59) 2px 2px, rgb(59, 59, 59) 3px 3px, rgb(59, 59, 59) 4px 4px, rgb(59, 59, 59) 5px 5px, rgb(59, 59, 59) 6px 6px, rgb(59, 59, 59) 7px 7px, rgb(59, 59, 59) 8px 8px, rgb(59, 59, 59) 9px 9px, rgb(60, 60, 60) 10px 10px, rgb(60, 60, 60) 11px 11px, rgb(61, 61, 61) 12px 12px, rgb(62, 62, 62) 13px 13px, rgb(62, 62, 62) 14px 14px, rgb(63, 63, 63) 15px 15px, rgb(64, 64, 64) 16px 16px, rgb(64, 64, 64) 17px 17px, rgb(65, 65, 65) 18px 18px, rgb(66, 66, 66) 19px 19px, rgb(66, 66, 66) 20px 20px, rgb(67, 67, 67) 21px 21px, rgb(68, 68, 68) 22px 22px; }
.icon { height: 165px; width: 165px; line-height: 165px; max-width: 100%; background: #23abe2; border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; color: #fff; font-size: 55px; text-align: center; vertical-align: middle; position: relative; margin: 0 auto 50px; }
.icon-feature { height: 135px; width: 135px; line-height: 140px; max-width: 100%; background: #444; border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; color: #fff; font-size: 55px; text-align: center; vertical-align: middle; position: relative; margin: 0 auto 50px; }
.row-spacing { margin-top:30px; }
#features li p {padding: 0 8px;}*/

/* ==========================================================================
Workbench
========================================================================== */
.wb-wrapper {margin: 70px 0 0; }
#responsive {background: #f3f5f8; padding:80px 0;}
/* ==========================================================================
iPhone Section
========================================================================== */
.iphone { width: 50%; background: #f3f5f8; float: left; height: 100%; box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); z-index: 1; }
.fluid-white { width: 50%; background: #fff; float: right; height: 100%; z-index: 2; }
.responsive-services { position: relative; }
/* ==========================================================================
Swag
========================================================================== */
.swag { background: url('../img/black-Linen.png'); background-attachment: fixed; padding: 50px 0; }
.swag h1 { color: #fff; text-transform: uppercase; letter-spacing: 5px; }
.swag h1 span { display: block; font-size: 25px; margin-top: 20px; }
.down-arrow-btn { width: 40px; height: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: rgba(35, 171, 226, 0.8); display: inline-block; margin: 10px auto 20px; color: #fff; font-size: 16px; line-height: 40px; text-align: center; }
.down-arrow-btn:hover, .down-arrow-btn:focus { color: #fff; background: #23abe2; }
/* ==========================================================================
Modules
========================================================================== */
.effects { padding-left: 15px; }
.effects .img { position: relative; margin-bottom: 25px; z-index: 1; overflow: hidden; }
.effects .img:nth-child(n) { margin-right: 5px; }
.effects .img:first-child { margin-left: -15px; }
.effects .img:last-child { margin-right: 0; }
.effects .img img { display: block; margin: 0; padding: 0; height: auto; }
.overlay { display: block; position: absolute; z-index: 20; background: rgba(35, 171, 226, 0.8); overflow: hidden; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; }
a.close-overlay { display: block; position: absolute; top: 0; right: 0; z-index: 100; width: 45px; height: 45px; font-size: 20px; font-weight: 700; color: #fff; line-height: 45px; text-align: center; background-color: #000; cursor: pointer; }
a.close-overlay.hidden { display: none; }
a.expand { display: block; position: absolute; z-index: 100; text-align: center; color: #fff; font-weight: 400; font-size: 14px; text-transform: uppercase; line-height: 30px; }
.overlay-effect .img i { font-size: 30px; margin-top:80px;}
.overlay-effect .overlay { bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 0; }
.overlay-effect .overlay a.expand { left: 0; right: 0; margin: 0 auto 0px auto; height:100%;}
.overlay-effect .img.hover .overlay { height: 100%; opacity: 1; }
.img img { width: -webkit-calc(100% + 40px) !important; width: calc(100% + 40px) !important; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -moz-transition: opacity 0.35s, -moz-transform 0.35s; -o-transition: opacity 0.35s, -o-transform 0.35s; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); -ms-transform: translate3d(-40px, 0, 0); }
.img:hover img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -ms-transform: translate3d(-40px, 0, 0); }
.designs { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 50px; }
.module-item { margin-bottom: 80px; }
/* ==========================================================================
Login, creating account, resetting password
========================================================================== */
.login-top-bar { height:60px; background:#23abe2; }
.login-em-logo { height:50px; margin-top:5px;}
.login, .pw-reset { padding: 5px 5px; margin-top:100px; margin-bottom:100px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background:#23abe2;}
.login #login-error { display:inline-block; height:40px; width:100%; color:white;}
.login p, .pw-reset p {margin-bottom: 20px; margin-top:50px; color:white;}
.creating-account p {margin-bottom:40px; margin-top:20px; color:white;}
.please-wait { margin-bottom:40px;}
.login .password-reset {color:white; margin-top:50px; margin-bottom:5px; display:block; opacity:0.7; font-size:0.9em;}
.login .password-reset:hover {opacity: 1;}
.login input[type=text], .login input[type=password], .pw-reset input[type=email], .pw-reset input[type=password] {color: #444; outline: none; width:80%; background-color: rgba(255, 255, 255, 1); border:none; padding: 15px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; }
.login input[type=text], .pw-reset input[type=email], .pw-reset input[position=top] { border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-top-right-radius: 5px; border: 1px solid rgba(0,0,0, 0.1); }
.login input[type=password], .pw-reset input[position=bottom] {  border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-bottom-right-radius: 5px; border-bottom: 1px solid rgba(0,0,0, 0.1); border-left:1px solid rgba(0,0,0, 0.1); border-right: 1px solid rgba(0,0,0, 0.1); border-top:1px solid transparent;}
.login input[type=submit], .pw-reset input[type=submit] {margin-top:30px; max-width:105px; max-height:50px; -webkit-box-shadow: #006d9b 0 1px 1px; border:none; border-radius:5px; background: white; color: #23abe2; padding: 12px 30px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; }
.login input[type=submit]:hover, .pw-reset input[type=submit]:hover { background: #0787ba; color: white;}
.pw-reset input[type=submit], .pw-reset .sending-form-btn {margin-bottom:50px; max-width: 94px; max-height:41px;}
.pw-reset input[type=email] {border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.pw-reset .form-alert p {margin:10px 0;}
/* ==========================================================================
Contact - Email & Demo 
========================================================================== */
#contact { background: url('../img/keyboard-bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; padding: 120px 0 140px; }
.swt-form h1 { margin-bottom: 40px; color:#fff}
.swt-form h1 span { display: block; font-size: 15px; text-transform: uppercase; font-weight: bold; margin-top: 20px; letter-spacing: 1px; }
.swt-form input[type=text], .swt-form textarea, .swt-form input[type=password], .swt-form input[type=email]{ background-color: transparent; border: solid 1px #fff; padding: 15px; margin-bottom: 15px; color: #fff; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease;border-radius: 3px;}
#contact ::-webkit-input-placeholder { color: white;}
#contact ::-moz-placeholder { color: white;}
#contact :-ms-input-placeholder { color: white;}
#contact :-moz-placeholder { color: white;}

.swt-form input[type=text], .swt-form input[type=password]{ width: 48%; margin:1%;}
.swt-form input[type=email] {width:98%; margin:1%;}
.swt-form .error {  background-color: rgba(150, 0, 0, 0.1) !important; border: solid 1px rgba(150, 0, 0, 1) !important;}
.swt-form .left-input { float: left; }
.swt-form .right-input { float: right; }
.swt-form textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 98%; margin:1%;}
.swt-form input[type=submit], .sending-form-btn {color:white;background: #23abe2;border: solid 1px rgba(35, 171, 226, 0.5);border-radius:5px; max-width:105px; max-height:50px; margin:auto; padding: 15px 30px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; }
.swt-form input[type=submit]:hover { background: #ea732b; color: white;border: solid 1px #ea732b; }
#contact .swt-form input[type=submit] { width:105px; height:50px; }
#contact .sending-form-btn {width: 105px; height:50px; margin-top:0px;}
.swt-form .form-inputs{width:60%; display:inline-block}
.sending-form-btn img { width:50%; }
.form-success, .form-fail{ width: 100%; margin-bottom:20px; text-align:center; color:white;}
.form-fail {border: solid 1px rgba(150, 0, 0, 1) !important; background: rgba(150, 0, 0, .3) !important;}
.form-success {border: 1px solid #0ba01c; background: rgba(11,160,28, 0.3);}
.enquiry-fail{border: 1px solid rgb(150, 0, 0);}
.form-alert p {line-height:20px !important; font-size:0.9em !important; color:white !important; opacity:0.7 !important; display:inline-block !important; margin-left:15px !important;}
.form-alert span {float:right; margin:15px; opacity:0.8;}
.form-alert span:hover {cursor:pointer; opacity:1;}

.demo-container {background:#23abe2; margin-top:100px; margin-bottom:100px; padding:20px 60px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.demo-container .form-header {color:white; margin-top:30px; margin-bottom:50px;}
#demo input[type=text], #demo input[type=password] { background-color: white; border-radius: 3px; color:#444; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
#demo #ClientUsername {width:98%;}
#demo input[type=submit], .sending-form-btn {margin-top:30px; max-width:170px; max-height:50px; -webkit-box-shadow: #006d9b 0 1px 1px; border:none; border-radius:5px; background: white; color: #23abe2; padding: 12px 30px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; }
#demo input[type=submit]:hover { background: #0787ba; color: white;}
#demo .error{background: rgba(150, 0, 0, 0.3) !important; border: solid 1px rgba(150, 0, 0, 1) !important;}
#demo-form .checkbox {display:inline-block; color:white;}
#demo .sending-form-btn img {width: 18%;}
.terms-anchor {text-decoration: underline; color:white;}
.terms-anchor:hover, .terms-anchor:focus {color: #444; text-decoration: underline;}
/* ==========================================================================
CTA
========================================================================== */
.ignite-cta { background-color: #444; padding: 70px 0; }
.ignite-btn { display: inline-block; padding: 25px 40px; color: #fff; border: solid 1px #fff; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; }
.ignite-btn:hover, .ignite-btn:focus { color: #23abe2; border: solid 1px #23abe2; }

/* ==========================================================================
Pricing 
========================================================================== */
.pricing-table { display:table; border: 1px solid #eee; background:#23abe2; border-radius: 5px; color:white;  -webkit-box-shadow: rgba(0, 0, 0, 0.09) 0px 0px 7px 0px; width:95%; margin-left:5%; margin-bottom:40px;}
.pricing-head { display:table-row;}
.pricing-head p {color:white; text-transform: uppercase; font-size:1em;}
.pricing-head .term {opacity: 0.7;}
.pricing-head .price { font-size:4em; padding-right:0.4em; line-height:35px;}
.pricing-head sup { top: -1em; right:-0.5em; font-size:0.4em;  }
.pricing-row { display:table-row; background: white; border-bottom:1px solid #eee;}
.pricing-td { display:table-cell;}
.pricing-td { border-bottom:1px solid #eee;}
.pricing-feature { font-size: 1em;}
.pricing-dev-num {color:#444;}
/* ==========================================================================
Agreement
========================================================================== */
#agreement p {text-align:left; line-height:20px; }
#agreement h3{margin:60px 0 20px 0;}
#agreement h4{text-align:left;}
#agreement strong {font-weight:100; color:#666;}
#agreement li {color: #8c9398; word-spacing: 1px; line-height: 20px; font-size: 14px; text-align:left;}
#agreement table {text-align: left; border-collapse: separate; border-spacing:0px; margin:20px 0;}
#agreement table td, #agreement table th {border:1px solid #8c9398; padding:10px;}
/* ==========================================================================
Footer
========================================================================== */
footer a { color: #a1a9b0; }
footer { background:url('../img/black-Linen.png'); padding: 40px 0 30px; }
footer p { color: #fff; }
ul.legals { list-style: none; color: #fff; line-height: 25px; }
ul.legals li { display: inline-block; }
ul.legals li::after { content: " |"; }
ul.legals li:last-child::after { content: ""; }
.legals { text-align: left; }
.credit { text-align: right; }
.social-button-box {text-align:center;}
footer .contact-address p {line-height:1.4em;}
footer .footer-logo img {margin-left:-5px;}
footer .footer-tandc{text-align:center;}
footer .footer-heading{color:white; text-transform:uppercase;}
footer .footer-heading u{text-decoration:none; border-bottom:1px solid white; padding-top:10px;}
footer ul {list-style-type:none;margin:0;padding:0;}
footer ul li{color:white;}
/* ==========================================================================
FlexSlider Custom CSS
========================================================================== */
#servicesSlider { margin-top: 70px; }
ul.slides li { margin-bottom: 20px; }
/* ==========================================================================
Waypoints
========================================================================== */
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6 { visibility: hidden; }
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.delay-1-5s { animation-delay: 1.5s; -webkit-animation-delay: 1.5s; }
.delay-2s { animation-delay: 2s; -webkit-animation-delay: 2s; }
/* ==========================================================================
Contact page
========================================================================== */
.contact-details { margin: 70px 0; }
.contact-details h2 { font-size: 20px; }
.contact-details h2 span { display: block; color: #23abe2; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; margin-top: 15px; }
#contact-page-main-sect h2 {color:white;}
#contact-page-main-sect .contact-deets {color:white;}
.contact-wrap { position: relative; }
ul.social-buttons { list-style: none; margin: 0; padding: 0; }
ul.social-buttons li { display: inline-block; margin-right: 10px; }
ul.social-buttons li:last-child { margin-right: 0; }
.social-btn { width: 40px; height: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: #444; display: inline-block; color: #fff; font-size: 17px; line-height: 40px; text-align: center; }
.social-btn:hover, .social-btn:focus { background: #23abe2; color: #fff; }
.social { margin-top: 25px }
#contact-tel { cursor: default; color:inherit;}

#contact-page-main-sect { background: url('../img/map-newmarket.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; padding: 120px 0 140px; }

#contact-us-form{ -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-attachment:fixed;padding: 20px;}
#map {height: 0;overflow: hidden;padding-bottom: 22.25%;padding-top: 30px;position: relative;}
#contact-us-form h1{color:white;}
#contact-us-form input[type=text], #contact-us-form textarea, #contact-us-form input[type=password], #contact-us-form input[type=email] {background-color:transparent; border: solid 1px white; padding: 15px;margin-bottom: 15px;color:white;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-o-transition: all 0.5s ease;border-radius: 3px;}
#contact-us-form input[type=text]::placeholder, #contact-us-form textarea::placeholder, #contact-us-form input[type=password]::placeholder, #contact-us-form input[type=email]::placeholder {color:rgba(255,255,255,0.7);}
#contact-us-form input[type=submit], .sending-form-btn {color: white;background: #23abe2;border: solid 1px rgba(35, 171, 226, 0.5);border-radius: 5px;max-width: 105px;max-height: 50px;margin: auto;padding: 15px 30px;text-transform: uppercase;letter-spacing: 1px;transition: all 0.5s ease;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-o-transition: all 0.5s ease;}
#contact-us-form input[type=submit]:hover { background: #ea732b; border: solid 1px #ea732b;color: white; }
#contact-page-main-sect .contact-deets {text-align:left; margin-left:2em; display:inline-block; font-size:1.2em;}
#contact-page-main-sect .contact-deets i {font-size:2em; margin-left:-40px; padding-right:10px;}

.contact-us-form-container{border-left: 1px solid white;}
/* ==========================================================================
FAQ Section
========================================================================== */
.faq-header{font-size: 2em;border-bottom: 1px dotted #ccc;padding: 1em 0;}
.faq-c {border-bottom: 1px dotted #ccc;padding: 1em 0;text-align: left;}
.faq-t {line-height: 1em;color: #aaa; font-family: sans-serif; float:left; font-weight: 700; padding-right: 0.3em; -webkit-transition: all 200ms;-moz-transition: all 200ms;transition: all 200ms;}
.faq-o {transform: rotate(-45deg);transform-origin: 50% 50%;-ms-transform: rotate(-45deg);-ms-transform-origin: 50% 50%;-webkit-transform: rotate(-45deg);-webkit-transform-origin: 50% 50%;-webkit-transition: all 200ms;-moz-transition: all 200ms;transition: all 200ms;}
.faq-q {cursor: pointer;font-size: 1.5em;font-weight: 100;}
.faq-a {clear: both;color: #666;display: none;padding-left: 1.5em;}
/* ==========================================================================
About 
========================================================================== */
/*Flip cards ----------------------*/
.jumbotron {background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;list-style-type: none;}
#no-bullet{list-style-type: none;}.jumbotron h1,.jumbotron h2,.jumbotron h3,.jumbotron h4,.jumbotron h5,.jumbotron h6 {margin-top: -0.5rem;margin-bottom: 0;color: white;}
.jumbotron h1 {font-weight: bold;}
.jumbotron hgroup {margin: 3rem 0;}
.jumbotron .card-icon {display: block;margin: 0.5rem auto 0;font-size: 2rem;color: white;}
.jumbotron .clients {margin: 2rem auto;}
.jumbotron .clients a {color: white;}
.clients .fa-stack-2x {color: gray;}
.clients:hover .fa-stack-2x {color: #333333;}

/* Card design - front */
.button.large {margin: 0;padding: 3.25rem;}
.button.large a {color: white;font-size: 1.75rem;font-weight: 100;margin-top: 2rem;}

/* Card design - back */
.panel i {font-size: 2rem;display: block;float: left;width: 20%;opacity: 0.5;}
.panel a, .panel p, .panel small {width: 80%;float: right;}
.panel a { margin-bottom: 0.5rem;}
.panel a:hover { text-decoration: underline;}
.panel small {margin-top: -0.5rem;font-style: italic;}
.flip-cards {float: left;width: 100%;height: 100%;padding-left: 1rem;}
.flip-cards li {float: left;width: 33.3%;height: 180px;position: relative;padding: 0;}
.flip-cards li:hover {cursor: pointer;}
.flip-cards li:hover .card-front {-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg);transform: rotateY(180deg);-webkit-transform: perspective(1000) rotateY(180deg);-moz-transform: perspective(1000) rotateY(180deg);-ms-transform: perspective(1000) rotateY(180deg);-o-transform: perspective(1000) rotateY(180deg);transform: perspective(1000) rotateY(180deg);}
.flip-cards li:hover .card-back {z-index: 950;-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);-webkit-transform: perspective(1000) rotateY(0deg);-moz-transform: perspective(1000) rotateY(0deg);-ms-transform: perspective(1000) rotateY(0deg);-o-transform: perspective(1000) rotateY(0deg);transform: perspective(1000) rotateY(0deg);}
.flip-cards .card-front,.flip-cards .card-back {-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;-o-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition: -webkit-transform 0.6s;-moz-transition: -moz-transform 0.6s;-o-transition: -o-transform 0.6s;transition: transform 0.6s;display: block;height: 100%;position: absolute;width: 100%;}
.flip-cards .card-front {-webkit-transform: perspective(1000) rotateY(0);-moz-transform: perspective(1000) rotateY(0);-ms-transform: perspective(1000) rotateY(0);-o-transform: perspective(1000) rotateY(0);transform: perspective(1000) rotateY(0);z-index: 900;}
.flip-cards .card-back {-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-ms-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);transform: rotateY(-180deg);z-index: 800;}

/* Button Card Colors */
.flip-cards .panel {border: none;}
.flip-cards .panel i,.flip-cards .panel p,.flip-cards .panel a,.flip-cards .panel small {color: white;}

/* First button color */
.flip-cards li:first-child > .button {background-color: rgba(68, 68, 68, 0.8);}
.flip-cards li:first-child > .panel {background-color: rgba(68, 68, 68, 1);}

/* Second button color */
.flip-cards li:nth-child(2) > .button {background-color: rgba(9, 112, 84, 0.8);}
.flip-cards li:nth-child(2) > .panel {background-color: rgba(9, 112, 84, 1);}

/* Third button color */
.flip-cards li:nth-child(3) > .button {background-color: rgba(234, 115, 43, 0.8);}
.flip-cards li:nth-child(3) > .panel {background-color: rgba(234, 115, 43, 1);}

/* Fourth button color */
.flip-cards li:nth-child(4) > .button {background-color: rgba(235, 167, 36, 0.8);}
.flip-cards li:nth-child(4) > .panel {background-color: rgba(235, 167, 36, 1);}

/* Fifth button color */
.flip-cards li:nth-child(5) > .button {background-color: rgba(35, 171, 226, 0.8);}
.flip-cards li:nth-child(5) > .panel {background-color: rgba(35, 171, 226, 1);}

/* Sixth (last) button color */
.flip-cards li:last-child > .button {background-color: rgba(161, 169, 176, 0.8);}
.flip-cards li:last-child > .panel {background-color: rgba(161, 169, 176, 1);color: white;}

/*
 * RESPONSIVENESS -------------------------------------------------
 */
@media only screen and ( max-width: 40em ) {
	.jumbotron {
		height: 800px;
	}
	.flip-cards li {
		width: 50%;
		/*height: 160px;*/
	}
}
@media only screen and ( max-width: 30em ) {
	.jumbotron h1 {
		font-size: 1.75rem;
	}
	.jumbotron h3 {
		font-size: 1.125rem;
	}
}
@media only screen and ( max-width: 25em ) {
	.jumbotron {
		height: 920px;
	}
	.jumbotron hgroup {
		margin: 2rem 0;
	}
	.jumbotron h1 {
		font-size: 1.35rem;
		padding-bottom: 0.25rem;
	}
	.jumbotron h3 {
		font-size: 0.85rem;
	}
	.jumbotron .card-icon {
		font-size: 1.35rem;
	}
	.jumbotron .card-back .card-icon {
		font-size: 2rem;
		margin: 0;
		padding: 5px 0 20px 5px;
	}
	.flip-cards li {
		width: 100%;
		font-size: 1.35rem;
		height: 120px;
	}
	.flip-cards .panel p {
		display: none;	
	}
	.flip-cards .panel small {
		margin: 0;
	}
	.button.large {
		padding: 2rem;
	}
	.button.large a {
		font-size: 1.35rem;
	}
}
/* ==========================================================================
Media Queries for Different Screen Sizes
========================================================================== */
@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}
@media only screen and (max-width: 767px) {
    /* phones */
    .demo-video-ref { display:none; }
    
    /* phone hero */
    #hero { background: url('../img/auck_banner_dark.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 50%; }
    #hero, #feature-hero,#feature-sales-orders-hero,#feature-invoice-hero,#feature-credits-hero ,#feature-jobs-hero,#feature-batches-hero,#feature-customers-hero,#feature-purchases-hero,#feature-supplier-hero,#feature-inventory-hero,#feature-locations-hero, #feature-transactions-hero,#feature-stocktakes-hero,#feature-scanning-hero{display:flex; align-items:center; justify-content:center; flex-direction:column;}
    #feature-hero,#feature-sales-orders-hero,#feature-invoice-hero,#feature-credits-hero,#feature-jobs-hero,#feature-batches-hero,#feature-customers-hero,#feature-purchases-hero,#feature-supplier-hero,#feature-inventory-hero,#feature-locations-hero,#feature-transactions-hero,#feature-stocktakes-hero,#feature-scanning-hero{height:300px !important;}
    #hero .hero-heading, #feature-hero .hero-heading ,#feature-sales-orders-hero .hero-heading,#feature-invoice-hero .hero-heading,#feature-credits-hero .hero-heading,#feature-jobs-hero .hero-heading,#feature-batches-hero .hero-heading,#feature-customers-hero .hero-heading, #feature-purchases-hero .hero-heading,#feature-supplier-hero .hero-heading,#feature-inventory-hero .hero-heading,#feature-locations-hero .hero-heading,#feature-transactions-hero .hero-heading,#feature-stocktakes-hero .hero-heading,#feature-scanning-hero .hero-heading{font-size:2em !important; text-align:center;}
    #hero .inner, #feature-hero .inner,#feature-sales-orders-hero .inner,#feature-invoice-hero .inner,#feature-credits-hero .inner,#feature-jobs-hero .inner,#feature-batches-hero .inner,#feature-customers-hero .inner,#feature-purchases-hero .inner,#feature-supplier-hero .inner,#feature-inventory-hero .inner,#feature-locations-hero .inner,#feature-transactions-hero .inner,#feature-stocktakes-hero .inner,#feature-scanning-hero .inner{margin-left:0 !important; left: 0 !important; position:static !important; margin-top:-50px !important;margin-top:10% !important;}
    #hero .hero-desc, #feature-hero .hero-desc,#feature-sales-orders-hero .hero-desc, #feature-invoice-hero .hero-desc,#feature-credits-hero .hero-desc,#feature-jobs-hero .hero-desc,#feature-batches-hero .hero-desc, #feature-customers-hero .hero-desc,#feature-purchases-hero .hero-desc,#feature-supplier-hero .hero-desc,#feature-inventory-hero .hero-desc,#feature-locations-hero .hero-desc,#feature-transactions-hero .hero-desc,#feature-stocktakes-hero .hero-desc,#feature-scanning-hero .hero-desc{text-align:center; padding-left:1em; padding-right:1em;}
    #hero .hero-try-btn, #feature-hero .hero-try-btn,#feature-sales-orders-hero .hero-try-btn,#feature-invoice-hero .hero-try-btn,#feature-credits-hero .hero-try-btn, #feature-jobs-hero .hero-try-btn,#feature-batches-hero .hero-try-btn, #feature-customers-hero .hero-try-btn,#feature-purchases-hero .hero-try-btn,#feature-supplier-hero .hero-try-btn,#feature-inventory-hero .hero-try-btn,#feature-locations-hero .hero-try-btn,#feature-transactions-hero .hero-try-btn,#feature-stocktakes-hero .hero-try-btn,#feature-scanning-hero .hero-try-btn{text-align:center;}
    .key-feature-row{display:none;}
    .key-feature-container {display:block !important;}
    .key-features-section .dash-image {margin-top:0;}
    #dashboard .dash-image {margin-top:-100px;}
    .key-feature-box h1 {font-size:1.6em; text-align:center;}
    .key-feature-box p{text-align:center;}
    .flex-center{display:block;}
    #app-print-sales-order{width:200px; height:249px;}
    .contact-us-form-container{border-left: 1px solid transparent;}
    
    .social-buttons {
        padding-bottom:2em !important;
    }
    
    .hero-try-btn{
        display:none;
    }
    .login{
        margin-top:2em !important;
    }
}  
@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}

@media only screen and (max-width: 767px) and (orientation:landscape) {
    /* phone hero */
    #hero .hero-heading {font-size:2em !important; text-align:center;}
    #hero .hero-heading .hero-heading-landscape {display:block !important; margin-top:-50px !important;}
    #hero .hero-heading .hero-heading-portait {display:none;}
    #hero .inner {margin-left:0 !important; left: 0 !important; width:100%;}
    #hero .hero-desc {text-align:center; padding-left:1em; padding-right:1em; max-width:767px;}
    #hero .hero-try-btn {text-align:center;}    
    #hero .hero-try-btn {display:none;}
    .key-feature-box, .key-feature-img-box{height:auto;}
}    

@media only screen and (max-width: 481px) and (orientation:landscape) {
    /* iphone 4 */
}