/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Import: fonts
   ========================================================================== */

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html,
button,
input,
select,
textarea {
	color: #222;
	font:  300 1em/100% 'Open Sans', Verdana, Arial, sans-serif;
}

select,
textarea,
input[type="submit"],
button[type="submit"] {
	font-size: 0.875em;
}

textarea {
	resize: vertical;
}

html, body {
	background: #EEE;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 */
::-moz-selection {
	background:  #CCC;
	text-shadow: none;
}

::selection {
	background:  #CCC;
	text-shadow: none;
}

/* WebKit browsers */
::-webkit-input-placeholder {
	color:          #313131;
	text-transform: uppercase;
}

.light ::-webkit-input-placeholder {
	color: #FFF;
}

/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
	color:          #313131;
	text-transform: uppercase;
}

.light :-moz-placeholder {
	color: #FFF;
}

/* Mozilla Firefox 19+ */
::-moz-placeholder {
	color:          #313131;
	text-transform: uppercase;
}

.light ::-moz-placeholder {
	color: #FFF;
}

/* Internet Explorer 10+ */
:-ms-input-placeholder {
	color:          #313131;
	text-transform: uppercase;
}

.light :-ms-input-placeholder {
	color: #FFF;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="color"],
textarea,
select,
input[type="submit"],
button[type="submit"] {
	transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, background 0.2s ease-in-out;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0);
	border:     none;
	outline:    0;
}

input[type="submit"],
button[type="submit"] {
	padding: 0.875em 1.5em;
	width:   100%;
	font:    300 1em/100% 'Open Sans', Verdana, Arial, sans-serif;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="color"],
textarea,
select {
	background: #EEE;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus {
	background: #DDD;
}

button i.fa-spinner {
	margin-left: 0.5em;
}

span.error, small.error {
	font-family: 'Open Sans', Verdana, Arial, sans-serif;
	font-weight: 300;
	font-style:  normal;
	background:  #FF7676;
}

.inline-inputs {
	background:    #FFF;
	padding:       0.5rem;
	margin-bottom: 1rem;
}

.inline-inputs ~ .error {
	margin-top: -1rem;
}

.inline-inputs label {
	display: inline-block;
	margin:  0 0.5rem 0 0;
	font:    300 0.875em/100% 'Open Sans', Verdana, Arial, sans-serif;
}

.inline-inputs label input {
	margin: 0;
}

/*
 * A better looking default horizontal rule
 */
hr {
	display:    block;
	height:     1px;
	border:     0;
	border-top: 1px solid #222;
	margin:     1em 0;
	padding:    0;
}

hr.wide {
	margin: 2.5em 0;
}

strong, b {
	font-weight: normal;
}

a {
	color:                       inherit;
	font-weight:                 normal;
	text-decoration:             none;
	transition:                  all 0.3s ease-in-out;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

a:hover, a:focus {
	color:   #000;
	outline: none;
}

a[href^="tel:"] {
	white-space: nowrap;
}

/* set image max width to 100% */
img {
	max-width: 100%;
	height:    auto;
	width:     auto \9; /* ie8 */
}

@-moz-document url-prefix() {
	img {
		width: 100%;
	}
}

.fix-the-table td {
	width: 33%;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	img {
		width: 100%;
	}
}

#app-notices {
	position: fixed;
	top:      -2.5em;
	width:    100%;
	color:    #FFF;
	z-index:  100;
	font:     300 1.25em/150% 'Open Sans', Verdana, Arial, sans-serif;
}

#app-notices div.notice {
	padding:    0.75em;
	background: rgba(0, 0, 100, 0.9);
}

#app-notices div.notice a {
	color: #FFF;
}

#app-notices div.notice div.icon {
	float:  left;
	margin: 0 0.5em 0 0;
}

#app-notices div.notice div.close {
	float:      right;
	text-align: left;
	cursor:     pointer;
	margin:     0 0 0 1em;
}

#app-header {
	background: url(../img/top-bg.jpg) repeat-x;
}

#app-header * {
	margin: 0;
}

#app-header a {
	transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

#app-header .left-side {
	position:   relative;
	background: #FFF;
}

#app-header .left-side h1 {
	font-size:  1em;
	text-align: center;
}

#app-header .left-side h1 a {
	display: inline-block;
}

#app-search {
	background: #3C7DBA;
	color:      #54420A;
	position:   absolute;
	bottom:     0;
	width:      100%;
}

#app-search .prefix {
	background: none;
	border:     none;
	text-align: right;
}

#app-search input {
	background:      #3C7DBA url(../img/search-bg.png?v=2) no-repeat center 45%;
	background-size: 60%;
	border:          none;
	box-shadow:      none;
	text-align:      center;
	transition:      background-color 0.3s ease-in-out;
}

#app-search input:hover {
	background-color: #356FA6;
}

#app-search input:focus, #app-search input.has-search {
	background: #356FA6;
}

#app-header .right-side {
	position: relative;
}

#app-header .right-side aside {
	position: absolute;
}

#app-header .right-side aside .button {
	background:     rgba(53, 118, 174, 0.7);
	font:           300 1em/100% 'Open Sans Condensed', Verdana, Arial, sans-serif;
	text-transform: uppercase;
}

#app-header .right-side aside .button:hover {
	background: rgba(53, 118, 174, 1);
}

#app-header .right-side aside .button.right-off-canvas-toggle {
	background: rgba(99, 165, 221, 0.7);
}

#app-header .right-side aside .button.right-off-canvas-toggle:hover {
	background: rgba(99, 165, 221, 1);
}

#app-menu {
	background: rgba(12, 94, 186, 0.6);
	position:   absolute;
	bottom:     0;
	width:      100%;
}

#app-menu ul {
	list-style: none;
}

#app-menu ul li {
	display: inline-block;
}

#app-menu a {
	font:           300 1em/100% 'Open Sans Condensed', Verdana, Arial, sans-serif;
	color:          #FFF;
	display:        block;
	text-transform: uppercase;
}

#app-menu a:hover, #app-menu a.active {
	background: #032347;
}

.touch #app-menu a:hover {
	background: transparent !important;
}

#app-menu a i {
	margin-right: 0.313em;
}

#app-content a.close-off-canvas {
	position:   absolute;
	left:       0;
	top:        0;
	display:    none;
	padding:    0.375em 0.75em;
	font-size:  1.5em;
	background: #5191CB;
	color:      #FFF;
	z-index:    99999;
}

#app-products-menu {
	color:           #FFF;
	background:      #5191CB;
	background-size: contain;
	background:      -moz-linear-gradient(top, #5191CB 70%, #335F87 97%);
	background:      -webkit-gradient(linear, left top, left bottom, color-stop(70%, #5191CB), color-stop(97%, #335F87));
	background:      -webkit-linear-gradient(top, #5191CB 70%, #335F87 97%);
	background:      -o-linear-gradient(top, #5191CB 70%, #335F87 97%);
	background:      -ms-linear-gradient(top, #5191CB 70%, #335F87 97%);
	background:      linear-gradient(to bottom, #5191CB 70%, #335F87 97%);
	text-align:      center;
}

.touch #app-products-menu {
	overflow-y:                 scroll; /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;
}

#app-products-menu a {
	color:          #FFF;
	border:         none;
	text-transform: uppercase;
	font:           300 0.875em/150% 'Open Sans', Verdana, Arial, sans-serif;
}

#app-products-menu a:hover, #app-products-menu a.active:hover, #app-products-menu ul ul a.active {
	background: rgba(255, 255, 255, 0.2);
}

#app-products-menu a.active {
	background: rgba(255, 255, 255, 0.2);
}

#app-products-menu hr {
	border-color: #FFF;
	margin:       -1em 1em 1.5em 1em;
}

#app-products-menu ul ul {
	background: rgba(40, 75, 150, 0.3);
}

#app-products-menu ul ul a {
	text-transform: none;
	color:          #FFF;
	line-height:    100%;
}

#app-products-menu .button.clear {
	color:      #FFF;
	box-shadow: inset 0 0 0 1px #FFF;
	padding:    0.75em 1.5em;
	font-size:  0.75em;
	width:      70%;
	background: rgba(255, 255, 255, 0.05)
}

#app-products-menu .button.clear:hover {
	background: rgba(255, 255, 255, 0.25) !important;
}

#app-products-menu .button.clear span {
	border-top: 1px solid #FFF;
}

.mCSB_outside + .mCSB_scrollTools {
	right:  -4px !important;
	top:    4px !important;
	bottom: 4px !important;
}

#app-roi {
	background: rgba(0, 0, 0, 0.1);
}

#app-roi:hover {
	background: rgba(0, 0, 0, 0.2) !important;
}

#app-roi-calculator {
	padding: 0 1.5em 1.5em 1.5em;
	display: none;
}

#app-roi-calculator * {
	font-weight: 300;
}

#app-roi-calculator header h1 {
	font-size:      1.375em;
	text-transform: uppercase;
	color:          #FFF;
}

#app-roi-calculator p {
	font-size: 0.875em;
	margin:    0;
}

#app-roi-calculator label {
	font-size:      0.875em;
	margin:         1em 0 -1em 0;
	text-transform: uppercase;
	color:          inherit;
	text-align:     left;
}

#app-roi-calculator label strong {
	font-weight: normal;
}

#app-roi-calculator .results {
	border-left:   1px solid #FFF;
	border-bottom: 1px solid #FFF;
	margin:        0 0 0.5em 0;
}

#app-roi-calculator .results .bars {
	padding: 0.5em 0 0 0;
}

#app-roi-calculator .results .bars b {
	display:        block;
	text-align:     left;
	text-transform: uppercase;
	padding:        0 0 0.5em 1em;
	font-size:      0.5em;
}

#app-roi-calculator .results .bars > div {
	padding:     0.5em 0;
	margin:      0 0 0.5em 0;
	text-align:  left;
	text-indent: 0.5em;
	background:  rgba(40, 75, 150, 0.3);
	border:      1px solid #FFF;
	border-left: none;
	font-weight: normal;
	transition:  width 0.2s ease-in-out;
}

#app-roi-calculator .results .ticks span {
	display:    inline-block;
	width:      33%;
	box-sizing: border-box;
}

#app-roi-calculator .results .ticks span:first-child {
	text-align:   left;
	padding-left: 1.5em;
}

#app-roi-calculator .results .ticks span:last-child {
	text-align:    right;
	padding-right: 1.5em;
}

#app-roi-calculator small a, #app-roi-calculator small a:hover {
	font-weight:    bold;
	text-transform: none;
	color:          inherit;
	background:     transparent;
	display:        inline;
}

#app-quote-list {
	box-sizing: border-box;
	text-align: center;
	color:      #FFF;
	overflow:   visible;
}

#app-quote-list * {
	font-weight: 300 !important;
}

#app-quote-list a {
	color: #FFF;
}

#app-quote-list a:hover {
	color: #BBB;
}

#app-quote-list input, #app-quote-list textarea {
	background: #555;
	color:      #FFF;
	box-shadow: none;
	text-align: center;
}

#app-quote-list input:focus, #app-quote-list textarea:focus {
	background: #666;
}

#app-quote-list button {
	background:     #999;
	color:          #FFF;
	text-transform: uppercase;
	font-size:      0.875em;
	box-shadow:     none;
}

#app-quote-list button:hover, #app-quote-list button:focus {
	background: #AAA;
}

#app-quote-list .small-6:last-child {
	padding: 0 0 0 1em;
}

#app-quote-list h1 {
	background:     #222;
	margin:         0;
	padding:        1em;
	color:          #FFF;
	font-size:      1em;
	text-align:     center;
	text-transform: uppercase;
}

#app-quote-list .content {
	padding: 1em;
}

#app-quote-list table {
	border-left:     none;
	border-right:    none;
	border-top:      none;
	border-collapse: collapse;
	background:      transparent;
	text-align:      left;
}

#app-quote-list table tr {
	background:    transparent;
	border-bottom: 1px solid #FFF;
}

#app-quote-list table tr:last-child {
	border-bottom-color: #333;
}

#app-quote-list table td {
	background: transparent;
	padding:    1em 0.5em;
}

#app-quote-list table td img {
	max-width: 25px;
}

#app-quote-list p.cards {
	font-size: 0.875em;
	color:     #BBB;
	width:     90%;
	margin:    1em auto;
}

#app-quote-list p.cards img {
	margin: 0.5em 0 0 0;
}

#app-quote-list a.close-off-canvas {
	position:   absolute;
	left:       -2.25em;
	top:        0;
	display:    none;
	padding:    0.375em 0.75em;
	font-size:  1.5em;
	background: #222;
	color:      #FFF;
}

#app-main {
	background: #FFF;
}

#app-main, #app-main h1, #app-main h2, #app-main p {
	font-weight: 300;
}

#app-main header small {
	font-size: 0.75em;
	margin:    -0.5em 0 1em 0;
	display:   block;
}

#app-main header small a:hover {
	text-decoration: underline;
}

#app-main header + hr {
	margin: 1.5em 0 2em 0;
}

#app-main header.dark {
	background: #414141;
	text-align: center;
}

#app-main header.dark h1 {
	color:  #FFF;
	margin: 0;
}

#app-main header.dark h1 strong {
	font-weight: bold;
}

#app-main p:last-child {
	margin-bottom: 0;
}

#app-slides {
	margin-right: -1px;
}

#app-slides .swiper-pagination {
	text-align: right;
	padding:    1em 0.5em 0 0;
	top:        0;
	transition: none;
}

#app-slides .swiper-pagination-bullet {
	width:      1em;
	height:     1em;
	opacity:    1;
	background: transparent;
	border:     1px solid rgba(0, 0, 0, 0.7);
}

#app-slides .swiper-pagination-bullet-active {
	background: rgba(0, 0, 0, 0.7);
}

#app-slides h1 {
	position:    absolute;
	bottom:      1em;
	left:        1em;
	color:       #FFF;
	font-weight: 300;
	margin:      0;
}

#app-slides h1 span {
	display:    inline-block;
	background: rgba(0, 0, 0, 0.7);
	padding:    5px 15px;
}

#app-map iframe {
	width:  100%;
	height: 30em;
}

#app-footer {
	background: #A49D95;
}

#app-footer, #app-footer h1, #app-footer h2, #app-footer p {
	font-weight: 300;
}

#app-footer .newsletter, #app-footer .info, #app-footer .logo {
	padding: 1em;
}

#app-footer .newsletter {
	background: #948B80;
	text-align: center;
}

#app-footer input {
	background: #A69E96;
	text-align: center;
}

#app-footer button,
#app-footer a.distributor {
	background: #BEB3A4;
	color:      #222;
	font-size:  0.875em;
}

#app-footer input:focus, #app-footer button:focus,
#app-footer a.distributor {
	box-shadow: none;
}

#app-footer input:focus {
	background: #BDB3AA;
}

#app-footer button:hover, #app-footer button:focus,
#app-footer a.distributor:hover, #app-footer a.distributor:focus {
	background: #D9CCBA;
}

#app-footer .info p {
	font-size: 0.875em;
}

#app-footer .logo {
	text-align: center;
}

#app-footer aside {
	background: #867D73;
	text-align: center;
	padding:    0.25em;
}

#app-footer aside p {
	margin:    0;
	padding:   0.5em;
	font-size: 0.938em;
}

#app-footer aside p.large {
	font-size:      1.25em;
	padding-bottom: 0;
}

#app-footer aside p:last-child {
	padding-top: 0;
	font-size:   0.75em;
}

#app-footer aside p:last-child a {
	color: rgba(0, 0, 0, 0.3);
}

#app-footer .button.clear {
	color:     #222;
	padding:   0.75em 1.5em;
	font-size: 0.75em;
	width:     80%;
}

.button {
	color:           #FFF;
	background:      #5191CA;
	font-weight:     300;
	text-decoration: none !important;
	text-transform:  uppercase;
	padding-left:    1em;
	padding-right:   1em;
}

.button:hover, .button:focus {
	background: #5FABED;
}

button.disabled, button[disabled], .button.disabled, .button[disabled],
button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
	background: #5191CA;
}

.button.prominent {
	background: #DB2828;
}

.button.prominent:hover, .button.prominent:focus {
	background: #F04346;
}

.button.clear {
	color:      #222;
	background: transparent;
	box-shadow: inset 0 0 0 1px #222;
}

.button.clear span {
	display:    block;
	border-top: 1px solid #222;
	margin:     0.5em 0 0 0;
	padding:    0.5em 0 0 0;
}

.button i {
	margin: 0 0.313em 0 0 !important;
}

.button.clear:hover, .button.clear:focus {
	background:      rgba(0, 0, 0, 0.1);
	text-decoration: none;
}

.button-row {
	padding-top: 1em;
}

.button-row .columns {
	padding: 0 1em !important;
}

.logos .swiper-slide {
	width:   auto;
	display: inline-block;
}

div.blocking {
	background: rgba(0, 0, 0, 0.01);
	position:   absolute;
	text-align: center;
	z-index:    999;
}

div.spinner {
	margin: 0 auto;
}

div.swiper-container .swiper-slide {
	visibility: hidden;
}

div.swiper-container .swiper-slide:first-child {
	visibility: visible;
}

.range-slider-wrap {
	width:      100%;
	position:   relative;
	background: none;
	border:     none;
	overflow:   hidden;
	height:     36px;
	margin:     20px 0;
}

.range-slider-wrap input[type="range"] {
	position:            relative;
	width:               100%;
	margin:              4px 0 5px 0;
	-webkit-appearance:  none;
	-moz-appearance:     none;
	-ms-appearance:      none;
	appearance:          none;
	background:          -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #457CBB), color-stop(100%, #457CBB));
	background:          linear-gradient(to right, #457CBB 0, #457CBB 100%);
	background-position: center;
	background-size:     100% 2px;
	background-repeat:   no-repeat;
	outline:             0;
}

.range-slider-wrap input[type="range"]:after {
	height:     2px;
	background: #FFF;
	content:    ' ';
	width:      5px;
	top:        50%;
	margin-top: -1px;
	left:       -5px;
	z-index:    1;
	position:   absolute;
}

.range-slider-wrap input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	-moz-appearance:    none;
	-ms-appearance:     none;
	appearance:         none;
	border:             none;
	height:             28px;
	width:              28px;
	position:           relative;
	background:         none;
	border-radius:      28px;
	background:         #FFF;
	box-shadow:         0 2px 4px rgba(0, 0, 0, 0.4);
}

.range-slider-wrap input[type="range"]::-webkit-slider-thumb:after {
	height:        28px;
	width:         28px;
	border-radius: 28px;
	background:    #FFF;
	z-index:       10;
	box-shadow:    0 2px 4px rgba(0, 0, 0, 0.4);
	position:      absolute;
	left:          0;
	top:           0;
	content:       ' ';
}

.range-slider-wrap input[type="range"]::-webkit-slider-thumb:before {
	position:   absolute;
	top:        50%;
	right:      100%;
	width:      2000px;
	height:     2px;
	margin-top: -1px;
	z-index:    1;
	background: #032347;
	content:    ' ';
}

html.ie .range-slider-wrap {
	width:    100%;
	position: relative;
	height:   80px;
	margin:   20px 0 0 0;
}

html.ie .range-slider-wrap input[type="range"] {
	height:     100%;
	background: none;
}

.range-slider-wrap ::-ms-fill-lower {
	background: #032347;
	height:     2px;
}

.range-slider-wrap ::-ms-fill-upper {
	background-size: 100% 2px;
	background:      linear-gradient(to right, #457CBB 0, #457CBB 100%) no-repeat center;
}

.range-slider-wrap ::-ms-thumb {
	border:        none;
	height:        28px;
	width:         28px;
	border-radius: 28px;
	background:    #FFF;
	z-index:       10;
	box-shadow:    0 2px 4px rgba(0, 0, 0, 0.4);
}

.range-slider-wrap ::-ms-track {
	background: transparent;
	color:      transparent;
	border:     none;
}

.products a {
	transition: none;
	margin:     1em;
	display:    inline-block;
	position:   relative;
}

.products a span {
	position:       absolute;
	width:          100%;
	top:            0;
	left:           0;
	background:     rgba(0, 0, 0, 0.5);
	color:          #FFF;
	font-size:      0.875em;
	font-weight:    300;
	text-align:     center;
	text-transform: uppercase;
	padding:        0.5em 0.75em;
	transition:     all 0.3s ease-in-out;
}

.products a:hover span {
	background: #000;
}

.clients img {
	padding: 15px;
}

.news img {
	padding: 15px;
}

.product-right .swiper-container {
	padding-bottom: 3em;
}

.product-right .swiper-pagination {
	bottom:     0;
	transition: none;
}

.product-right .swiper-pagination-bullet {
	width:      1em;
	height:     1em;
	background: transparent;
	border:     2px solid #222;
	opacity:    1;
}

.product-right .swiper-pagination-bullet-active {
	background: #222;
}

.product-right figure {
	margin:        1em 0;
	padding:       0 0 1.5em 0;
	border-bottom: 1px solid #222;
}

.product-right figure blockquote {
	border:      none;
	color:       inherit;
	margin:      0 0 1.5em 0;
	font-size:   0.75em;
	font-weight: 300;
}

.product-right figure blockquote i.fa {
	font-size: 0.313em;
	padding:   0 0.5em;
}

.product-right figure figcaption {
	font-size:      0.5em;
	font-weight:    300;
	text-transform: uppercase;
}

.product-right .logos .columns {
	padding: 0.5em 0.313em;
}

.product-right .manufacturer {
	padding: 1em 0;
}

img.right {
	width:     auto;
	max-width: none;
}

.downloads {
	list-style: none;
	margin:     0 0 1em 0;
}

.downloads i {
	margin: 0 0.313em 0 0;
}

.abbr {
	overflow:   hidden;
	position:   relative;
	transition: height 0.3s ease-in-out;
}

.abbr:after {
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 1)));
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 1) 100%);
	background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 1) 100%);
	background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 1) 100%);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 1) 100%);
	width:      100%;
	height:     50%;
	bottom:     0;
	left:       0;
	position:   absolute;
	content:    ' ';
	transition: opacity 0.3s ease-in-out;
}

.abbr.open:after {
	opacity: 0;
}

.abbr + p.more {
	margin-top: -1em;
}

.abbr + p.more a i {
	transition: all 0.3s ease-in-out;
}

.abbr + p.more a i.up {
	-ms-transform:     rotate(-180deg); /* IE 9 */
	-webkit-transform: rotate(-180deg); /* Safari */
	transform:         rotate(-180deg);
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.full-width {
	width:        100%;
	margin-left:  auto;
	margin-right: auto;
	max-width:    100%;
}

.nowrap {
	white-space: nowrap;
}

/*
 * Image replacement
 */

.ir {
	background-color: transparent;
	border:           0;
	overflow:         hidden;
	/* IE 6/7 fallback */
	*text-indent:     -9999px;
}

.ir:before {
	content: "";
	display: block;
	width:   0;
	height:  150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
	display:    none !important;
	visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
	border:   0;
	clip:     rect(0 0 0 0);
	height:   1px;
	margin:   -1px;
	overflow: hidden;
	padding:  0;
	position: absolute;
	width:    1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip:     auto;
	height:   auto;
	margin:   0;
	overflow: visible;
	position: static;
	width:    auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
	visibility: hidden;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
	*zoom: 1;
}

[unselectable], .unselectable, label {
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select:    none; /* Firefox */
	-ms-user-select:     none; /* IE10+ */

	/* Rules below not implemented in browsers yet */
	-o-user-select:      none;
	user-select:         none;
}

.dougs_hack {
	width:  100%;
	height: auto;
}

.product .table_convert p,
.product .table_convert table,
.product .table_convert table,
.product .table_convert table tr,
.product .table_convert table tr td,
.product .table_convert table tr.even,
.product .table_convert table tr.alt,
.product .table_convert table tr:nth-of-type(even) {
	background: none;
	padding:    0 0 0 0;
	margin:     0 0 0 0;
	border:     none;
	font-size:  1rem;
	width:      auto !important;
}

.product .table_convert table tr td {
	padding: 4px 8px 4px 0px;
}

.product h1 {
	margin-top: 15px;
}

.swiper-container-out {
	margin-bottom: 30px;
}

table#table_attribute td[width="10"] {
	display: none;
}

table#table_attribute td:first-child::after {
	content: ":";
}

.secret_content {
	display: none;
}

ul.pagination {
	text-align: center;
	margin-top: 40px;
}

ul.pagination li span {
	border-radius: 3px;
	transition:    background-color 300ms ease-out;
	background:    none;
	color:         #999999;
	display:       block;
	font-size:     1em;
	font-weight:   normal;
	line-height:   inherit;
}

ul.pagination li {
	float:   none;
	display: inline-block;
	padding: 0px;
	margin:  0px;
}

ul.pagination li.active span,
ul.pagination li.active a {
	background: #5191CB;
	color:      #FFF;
}

ul.pagination li a,
ul.pagination li span {
	margin:     3px;
	padding:    2px 9px;
	background: rgba(81, 145, 203, 0.2);
}

li.disabled span,
li.disabled a {
	background: none !important;
}

h5 {
	color: #5191CB;
}

.product h1,
.product h2,
.product h3,
.product h4 {
	color: #5191CB;
}

.product h4 {
	font-size: 1.1375rem;
	color:     #385A7E;
	/*font-weight: bold;*/
}

.product strong, b {
	font-weight: bold;
}

.product td strong,
.product td b {
	font-weight: normal;
}

img.fr-fin,
img.fr-dib,
img.fr-just-inserted {
	clear:     both;
	display:   block;
	max-width: 800px;
	width:     100%;
	margin:    20px 0;
	float:     none;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

/* Small screens */

@media only screen {

	#app-header, #app-header .left-side, #app-header .right-side {
		height: 6.5em;
	}

	#app-header .left-side h1 a {
		padding:   0.875em 1.5em;
		max-width: 10em;
	}

	#app-header .left-side h1 a {
		padding: 0.875em 1.5em;
	}

	#app-search, #app-menu, #app-search input {
		height:   2em;
		overflow: hidden;
	}

	#app-search i {
		font-size:   0.875em;
		padding-top: 0.875em;
		display:     block;
	}

	#app-search input {
		/*padding: 1.25em 0.75em;*/
		height:    100%;
		font-size: 1em;
	}

	#app-header .right-side aside {
		top:        0.5em;
		right:      0.5em;
		text-align: right;
	}

	#app-header .right-side aside .button {
		padding:    0.5em 0.75em;
		margin:     0 0 0.5em 0.25em;
		font-size:  0.875em;
		display:    inline-block;
		text-align: center;
	}

	#app-header .right-side aside .button.right-off-canvas-toggle {
		display: none;
	}

	#app-menu {
		padding: 0 0.313rem;
	}

	#app-menu a {
		font-size: 1em;
		padding:   0.5rem 0.313rem;
	}

	#app-products-menu {
		padding: 1em 0;
	}

	#app-products-menu.init {
		display: none;
	}

	#app-products-menu ul {
		margin: 0 0 2.5em 0;
	}

	#app-products-menu ul ul {
		margin:         0;
		padding-bottom: 1em;
	}

	#app-products-menu ul li a {
		padding: 0.5em 1em;
	}

	#app-products-menu ul ul li a {
		padding: 0.313em 1em 0.5em;
	}

	#app-main {
		min-height: 50em;
	}

	#app-main .content {
		padding: 1em;
	}

	#app-main h1 {
		font-size: 1.5em;
	}

	#app-main h2 {
		font-size:      1em;
		text-transform: uppercase;
	}

	#app-main header.dark {
		margin:  -1em -1em 1em -1em;
		padding: 1em;
	}

	#app-main header br {
		display: none;
	}

	#app-slides h1 {
		font-size: 1em;
	}

	#app-footer h1 {
		font-size:      1em;
		margin-bottom:  1em;
		text-transform: uppercase;
	}

	#app-footer .newsletter h1 {
		margin-bottom: 1.375em;
	}

	#app-footer .logo img {
		margin:    -2em 0 2em 0;
		max-width: 50%;
	}

	.inner-wrap.no-animate {
		transition: none;
	}

	.product-right {
		width:      100%;
		text-align: center;
		margin:     2.5em 0 1em 0;
	}

	.product-right .logos .columns img, .product-right .manufacturer img {
		max-width: 75%;
	}

	.image-left, .image-right {
		float:      none;
		margin:     1em 0;
		text-align: center;
	}
}

/* Define mobile styles */

@media only screen and (max-width: 40em) {
}

/* max-width 640px, mobile-only styles, use when QAing mobile issues */

/* Medium screens */
@media only screen and (min-width: 40.063em) {
	#app-header, #app-header .left-side, #app-header .right-side {
		height: 6.5em;
	}

	#app-header .left-side {
		background: #FFF;
	}

	#app-header .left-side h1 a {
		padding:   0.875em 1.5em;
		max-width: 10em;
	}

	#app-search, #app-menu {
		height: 2em;
	}

	#app-header .right-side aside {
		top:   0.75em;
		right: 0.75em;
	}

	#app-header .right-side aside .button {
		padding:   0.5em 0.75em;
		margin:    0 0 0.75em 0.5em;
		font-size: 0.875em;
	}

	#app-header .right-side aside .button.right-off-canvas-toggle {
		display: inline-block;
	}

	#app-menu {
		padding: 0 0.313rem;
	}

	#app-menu a {
		font-size: 1em;
		padding:   0.5rem 0.313rem;
	}

	#app-close-left {
		display: none !important;
	}

	#app-products-menu {
		width:    25%;
		position: absolute;
		top:      0;
		bottom:   0;
	}

	#app-products-menu.init {
		display: block;
	}

	#app-roi-calculator .results .ticks span {
		font-size: 0.5em;
	}

	#app-main {
		margin: 0 0 0 25%;
	}

	#app-slides h1 {
		font-size: 1em;
	}

	#app-footer .logo img {
		margin:    0 0 2em 0;
		max-width: 100%;
	}

	.product-right {
		width:  25%;
		float:  right;
		margin: 1em 0 1em 1em;
	}

	.product-right .logos .columns img, .product-right .manufacturer img {
		max-width: 100%;
	}

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

	.image-right {
		float:  right;
		margin: 0 0 1em 1em;
	}
}

/* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
}

/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* Large screens */
@media only screen and (min-width: 64.063em) {
	#app-header, #app-header .left-side, #app-header .right-side {
		height: 7.438em;
	}

	#app-header .left-side h1 a {
		padding:   0.875em 1.5em;
		max-width: 12.5em;
	}

	#app-search, #app-menu {
		height: 2.188em;
	}

	#app-search i {
		font-size:   1.125em;
		padding-top: 0.625em;
	}

	#app-search input {
		/*padding: 1.25em 0.75em;*/
		padding:   0.65em !important;
		height:    100%;
		font-size: 1em;
	}

	#app-header .right-side aside {
		top:   0.875em;
		right: 0.875em;
	}

	#app-header .right-side aside .button {
		padding:   0.375em 0.75em;
		margin:    0 0 0.875em 0.5em;
		font-size: 1em;
	}

	#app-menu ul {
		padding: 0 0.375rem;
	}

	#app-menu a {
		font-size: 1.375em;
		padding:   0.375rem 0.75rem 0.438rem 0.75rem;
	}

	#app-roi-calculator .results .ticks span {
		font-size: 1em;
	}

	#app-main .content {
		padding: 1.5em;
	}

	#app-main header.dark {
		margin:  -1.5em -1.5em 1.5em -1.5em;
		padding: 1.5em;
	}

	#app-main header br {
		display: inline;
	}

	#app-slides h1 {
		font-size: 1.25em;
	}
}

/* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 80em) {
}

/* min-width 1025px and max-width 1280px, use when QAing large screen-only issues */

/* Larger screens */
@media only screen and (min-width: 80.063em) {
	#app-header, #app-header .left-side, #app-header .right-side {
		height: 10.313em;
	}

	#app-header .left-side h1 a {
		padding:   0.875em 1.5em;
		max-width: 17.188em;
	}

	#app-search, #app-menu {
		height: 2.875em;
	}

	#app-search i {
		font-size:   1.5em;
		padding-top: 0.625em;
	}

	#app-search input {
		padding:   1.25em 1em;
		font-size: 1.25em;
	}

	#app-header .right-side aside {
		top:   1em;
		right: 1em;
	}

	#app-header .right-side aside .button {
		padding:   0.625em 1em;
		margin:    0 0 1em 0.5em;
		font-size: 1.125em;
	}

	#app-menu {
		padding: 0 0.375rem 0.5rem;
	}

	#app-menu a {
		font-size: 1.875em;
		padding:   0.5rem 1rem;
	}

	#app-products-menu ul li a {
		font-size: 1em;
	}

	#app-main .content {
		padding: 2em;
	}

	#app-main header.dark {
		margin: -2em -2em 2em -2em;
	}

	#app-slides h1 {
		font-size: 1.5em;
	}
}

@media only screen and (min-width: 80.063em) and (max-width: 90em) {
}

/* min-width 1280px and max-width 1440px, use when QAing large screen-only issues */

/* XLarge screens */
@media only screen and (min-width: 90.063em) {
}

/* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) {
}

/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XXLarge screens */
@media only screen and (min-width: 120.063em) {
}

/* min-width 1921px, xxlarge screens */

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dppx) {
	/* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
	* {
		background:  transparent !important;
		color:       #000 !important; /* Black prints faster: h5bp.com/s */
		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) ")";
	}

	/*
	 * Don't show links for images, or javascript/internal links
	 */
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	pre,
	blockquote {
		border:            1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group; /* h5bp.com/t */
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows:  3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}

	#app-footer {
		page-break-before: always;
	}
}

@media (max-width: 640px) {
	#app-products-menu hr {
		margin: -1em 1em 0.5em 1em;
	}

	#app-products-menu ul {
		margin: 0 0 1.5em 0;
	}

	#app-products-menu ul li a {
		padding: 0.15em 1em;
	}

	#app-products-menu ul ul li a {
		padding: 0.1em 1em 0.1em;
	}
}

.dist a {
	text-decoration: underline;
	font-style:      italic;
	color:           #948B80;
}

@media (max-width: 768px) {

	.fix-the-table {
		width: 100%;
	}

	.fix-the-table td {
		width:      100%;
		padding:    0px;
		display:    block !important;
		text-align: center;
	}

	.fix-the-table img {
		width:  80% !important;
		margin: 20px auto;
	}
}

@media (max-width: 640px) {

	.img-gal {
		display: none;
	}
}

img.fr-fin, img.fr-dib, img.fr-just-inserted {
	display: inline;
}