/*
  TXT 2.0 by HTML5 UP
  html5up.net | @n33co
  Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/
/* Prevent the slideshow from flashing on load */
#slides {
    display: none
}

/* Center the slideshow */
.container {
    margin: 0 auto
}

/* Show active item in the pagination */
.slidesjs-pagination .active {
    color: red;
}

/* Media quires for a responsive layout */

/* For tablets & smart phones */
@media (max-width: 767px) {
    body {
        padding-left: 10px;
        padding-right: 10px;
    }

    .container {
        width: auto
    }
}

/* For smartphones */
@media (max-width: 480px) {
    .container {
        width: auto
    }
}

/* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: 979px) {
    .container {
        width: 724px
    }
}

/* For larger displays */
@media (min-width: 1200px) {
    .container {
        width: 1170px
    }
}

body {
    -webkit-font-smoothing: antialiased;
    font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    /*background-color: #303030;*/
    color: #787878;
    padding-top: 30px;
}

#slides {
    display: none
}

#slides .slidesjs-navigation {
    margin-top: 5px;
}

a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
    background-image: url(./images/btns-next-prev.png);
    background-repeat: no-repeat;
    display: block;
    width: 12px;
    height: 18px;
    overflow: hidden;
    text-indent: -9999px;
    float: left;
    margin-right: 5px;
}

a.slidesjs-next {
    margin-right: 10px;
    background-position: -12px 0;
}

a:hover.slidesjs-next {
    background-position: -12px -18px;
}

a.slidesjs-previous {
    background-position: 0 0;
}

a:hover.slidesjs-previous {
    background-position: 0 -18px;
}

a.slidesjs-play {
    width: 15px;
    background-position: -25px 0;
}

a:hover.slidesjs-play {
    background-position: -25px -18px;
}

a.slidesjs-stop {
    width: 18px;
    background-position: -41px 0;
}

a:hover.slidesjs-stop {
    background-position: -41px -18px;
}

.slidesjs-pagination {
    margin: 7px 0 0;
    float: right;
    list-style: none;
}

.slidesjs-pagination li {
    float: left;
    margin: 0 1px;
}

.slidesjs-pagination li a {
    display: block;
    width: 13px;
    height: 0;
    padding-top: 13px;
    background-image: url(./images/pagination.png);
    background-position: 0 0;
    float: left;
    overflow: hidden;
}

.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
    background-position: 0 -13px
}

.slidesjs-pagination li a:hover {
    background-position: 0 -26px
}

#slides a:link,
#slides a:visited {
    color: #333
}

#slides a:hover,
#slides a:active {
    color: #9e2020
}

.navbar {
    overflow: hidden
}

.qnet_logo {
    width: 80px;
    height: 50px;
    margin: 0px auto 0px auto;
    float: left;
}



*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}


h1, h2, h3, h4, h5, h6, h7
{
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7770;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h7 a
{
    text-decoration: none;
    color: inherit;
}

.slide-desc {
    width: 100%; height: 40px; position: relative; z-index: 1000; top: 0px;  margin: 0px auto; padding: 5px; font-size: 16px; color: #ffffff; text-align: center;
}

h2.major
{
    color: #fff;
    position: relative;
    border-top: solid 5px #faa732;
}

h2.major span
{
    background: #faa732;
    position: relative;
    display: inline-block;
}

#footer h2.major span
{
    background: #faa732;
}

a
{
    color: #fff;
    text-decoration: underline;
}

a:hover
{
    text-decoration: none;
}

form
{
}

form input,
form select,
form textarea
{
    -webkit-appearance: none;
}

br.clear
{
    clear: both;
}

p, ul, ol, dl, table
{
    margin-bottom: 3em;
}

section,
article
{
    margin-bottom: 6em;
}

section > :last-child,
article > :last-child
{
    margin-bottom: 0;
}

section:last-child,
article:last-child
{
    margin-bottom: 0;
}

.byline
{
    display: block;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #c1cac5;
}

.image
{
    position: relative;
    display: inline-block;
    border-radius: 8px;
}

.image img
{
    display: block;
    width: 100%;
    border-radius: 8px;
}

/*
  Note: The following style adds the textured/pixelated look to content
  images. I added this to help mask the distortion introduced when a browser
  resizes an image, but if you don't want this to happen just remove or comment
  out the entire style.
*/

.image:before
{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*background: url('images/overlay.png');*/
    opacity: 0.2;
    border-radius: 8px;
}

.image-full
{
    display: block;
    width: 100%;
    margin: 0 0 2em 0;
}

.image-left
{
    float: left;
    margin: 0 2em 2em 0;
}

.image-centered
{
    display: block;
    margin: 0 0 2em 0;
}

.image-centered img
{
    margin: 0 auto;
    width: auto;
}

.button
{
    display: inline-block;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    background: #e3daa8;
    color: #fff;
    border-radius: 8px;
    outline: 0;
    -moz-transition: background-color .2s ease-in-out;
    -webkit-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
}

.button:hover
{
    background: #ebe3b2;
}

.button-alt
{
    background: #c1cac5;
}

.button-alt:hover
{
    background: #ccd5d0;
}

.actions
{
}

ul.style1
{
    list-style: disc;
    padding-left: 1.5em;
}

ul.style2
{
}

ul.style2 > li
{
    border-top: solid 2px #e7eae8;
    padding-top: 2.35em;
    margin-top: 2.35em;
}

ul.style2 > li:first-child
{
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

ul.contact
{
}

ul.contact li
{
    position: relative;
    display: inline-block;
    margin: 0 0.25em 0 0.25em;
    top: 0;
    -moz-transition: top .15s ease-in-out;
    -webkit-transition: top .15s ease-in-out;
    -o-transition: top .15s ease-in-out;
    -ms-transition: top .15s ease-in-out;
    transition: top .15s ease-in-out;
}

ul.contact li a
{
    display: block;
    position: relative;
    background: #c1cac5 url('images/icons-contact.png');
    width: 48px;
    height: 48px;
    text-indent: -9999px;
    border-radius: 6px;
    outline: 0;
    -moz-transition: background-color .2s ease-in-out;
    -webkit-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
}

ul.contact li a.facebook				{ background-position: 0px 0px; }
ul.contact li:hover a.facebook		{ background-color: #3C5A98; }
ul.contact li a.twitter					{ background-position: -48px 0px; }
ul.contact li:hover a.twitter		{ background-color: #2DAAE4; }
ul.contact li a.rss						{ background-position: -96px 0px; }
ul.contact li:hover a.rss			{ background-color: #F2600B; }
ul.contact li a.dribbble				{ background-position: -144px 0px; }
ul.contact li:hover a.dribbble		{ background-color: #C4376B; }
ul.contact li a.linkedin				{ background-position: -192px 0px; }
ul.contact li:hover a.linkedin		{ background-color: #006599; }
ul.contact li a.tumblr					{ background-position: -240px 0px; }
ul.contact li:hover a.tumblr		{ background-color: #31516A; }
ul.contact li a.googleplus				{ background-position: -288px 0px; }
ul.contact li:hover a.googleplus	{ background-color: #DA2713; }

ul.contact li:hover
{
    top: -5px;
}

ul.contact li:active
{
    top: 0;
}

ul.special
{
    position: relative;
    top: -30px;
}




ul.special li
{
    position: relative;
    display: inline-block;
    margin: 0 10px 0 10px;
    top: 0;
    -moz-transition: top .15s ease-in-out;
    -webkit-transition: top .15s ease-in-out;
    -o-transition: top .15s ease-in-out;
    -ms-transition: top .15s ease-in-out;
    transition: top .15s ease-in-out;
}

ul.special li a
{
    display: block;
    background: #bfbfbf url('images/icon_topics.png');
    width: 100px;
    height: 100px;
    text-indent: -9999px;
    border-radius: 0px;
    outline: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -50px;
    -moz-transition: background-color .2s ease-in-out;
    -webkit-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out;
        transition: background-color .2s ease-in-out;
}

ul.special li a.check-in {
    background-position: 0px 0px;
}
ul.special li.active a.check-in	{
    background-color: #faa732;
    background-position: 0px 100px;
}
ul.special li a.digital-signage {
    background-position: -100px 0px;
}
ul.special li.active a.digital-signage	{
    background-color: #faa732;
    background-position: -100px 100px;
}
ul.special li a.customer-advisory {
    background-position: -500px 0px;
}
ul.special li.active a.customer-advisory {
    background-color: #faa732;
    background-position: -500px 100px;
}
ul.special li a.mobile-shopping	{
    background-position: -300px 0px;
}
ul.special li.active a.mobile-shopping	{
    background-color: #faa732;
    background-position: -300px 100px;
}
ul.special li a.queue-management	{
    background-position: -200px 0px;
}
ul.special li.active a.queue-management	{
    background-color: #faa732;
    background-position: -200px 100px;
}
ul.special li a.messaging	{
    background-position: -400px 0px;
}
ul.special li.active a.messaging {
    background-color: #faa732;
    background-position: -400px 100px;

}
ul.special li a.customer-reporting	{
    background-position: -600px 0px;
}
ul.special li.active a.customer-reporting	{
    background-color: #faa732;
    background-position: -600px 100px;
}

ul.special li div.desc {
    font-size: 14px;
    line-height: 16px;
}
ul.special li:hover a
{
    background-color: #faa732;
}



ul.meta
{
    font-size: 0.85em;
    color: #a1aaa5;
}

ul.meta li
{
    position: relative;
    display: inline-block;
    padding-left: 24px;
    margin-left: 1em;
}

ul.meta li a
{
    color: inherit;
    outline: 0;
}

ul.meta li:first-child
{
    margin-left: 0;
}

ul.meta li:before
{
    content: '';
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 50%;
    margin-top: -8px;
    background: url('images/icons-meta.png');
}

ul.meta li.timestamp:before
{
    background-position: 0px 0px;
}

ul.meta li.comments:before
{
    background-position: -16px 0px;
}

/*********************************************************************************/
/* Section + Article Types                                                       */
/*********************************************************************************/

.is-highlight
{
    text-align: center;
}

.is-features
{
}

.is-feature
{
}

.is-blog
{
}

.is-post
{
}

.is-post-summary
{
}

.is-page-content
{
}

/*********************************************************************************/
/* Sidebar + Content                                                             */
/*********************************************************************************/

.sidebar
{
}

.content
{
}

/*********************************************************************************/
/* Wrappers                                                                      */
/*********************************************************************************/

#banner-wrapper
{
    position: relative;
    background: url('../images/banner.jpg') center center no-repeat;
    background-size: cover;
    z-index: 1;
}

/*
  Note: The following style adds the textured/pixelated look to the banner
  image. I added this to help mask the distortion introduced when a browser
  resizes an image, but if you don't want this to happen just remove or comment
  out the entire style.
*/

#banner-wrapper:before
{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('images/overlay.png');
    opacity: 0.175;
}

#main-wrapper
{
    background: #fff;
    border-top: solid 70px #faa732;
    border-bottom: solid 5px #faa732;
}

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

#header
{
}

/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/

#nav
{
}

/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/

#banner
{
    position: relative;
    background: rgba(21, 28, 23, 0.95);
    text-align: center;
    z-index: 2;
}

#banner:before
{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('images/highlight.png') center center;
    background-size: 100% 200%;
}

#banner:after
{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('images/overlay.png');
    opacity: 0.25;
}

#banner > *
{
    position: relative;
    z-index: 3;
}

#banner h2
{
    color: #fff;
}

#banner .byline
{
    color: #575d59;
}

#banner .button
{
    color: #b4b7b5;
    background: transparent !important;
    border: solid 4px rgba(87, 93, 89, 0.35);
    border-radius: 16px;
    -moz-transition: border-color .2s ease-in-out, color .2s ease-in-out;
    -webkit-transition: border-color .2s ease-in-out, color .2s ease-in-out;
    -o-transition: border-color .2s ease-in-out, color .2s ease-in-out;
    -ms-transition: border-color .2s ease-in-out, color .2s ease-in-out;
    transition: border-color .2s ease-in-out, color .2s ease-in-out;
}

#banner .button:hover
{
    color: #e4e7e5;
    border-color: rgba(87, 93, 89, 0.75);
}

#banner .button:active
{
    color: #fff;
    border-color: rgba(97, 103, 99, 1.0);
}


/*********************************************************************************/
/* Main                                                                          */
/*********************************************************************************/

#main
{
}

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/

#footer
{

}

#footer a
{
    color: inherit;
}

/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/

#copyright
{
    display: inline-block;
    background: #e7eae8;
    padding: 0.75em 2em 0.75em 2em;
    border-radius: 8px;
    font-size: 0.85em;
    color: #8b9790;
}

#copyright a
{
    color: inherit;
}