/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

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

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
    max-width: 100% !important;
    border:none;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body {
    padding:0;
    margin:0;
}
.contentwrap {
    position:relative;
    text-align: center;
    max-width: 1200px;
    padding:40px 30px;
    margin: 0 auto;
}
header,
footer {
    letter-spacing: 1px;
}
.page-body p,
.page-body ul,
.page-body ol {
    text-align: left;
}
a,
a:visited {
    display: inline-block;
    color: inherit;
}
header a,
footer a {
    text-decoration: none;
}
.no-wrap {
    white-space: no-wrap;
}
header .button,
footer .button {
    display: block;
    text-align: center;
    font-size: 14px;
    padding: 10px 20px;
    width: 200px;
    box-sizing: border-box;
    margin-left: auto;
}
footer .download {
    color: inherit;
    font-size: 13px;
    padding-left: 0;
    padding-right: 0;
    border: 1px solid #6d7278;
    margin: 8px 0px;
    margin-left: auto;
}

/* dealer menu in header and footer */
.dealer-login {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    color: #FFF;
}
footer .dealer-login {
    display: block;
    margin: 0px auto;
}
.dealer-login nav li {
    position: relative;
    display: block;
}
.dealer-login li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0px;
    right: 0px;
    border: 0.5px solid #6d7278;
    border-top: 2px solid #FFF;
    background: #181f2d;
    background: rgba(27,30,47, 0.8);
    text-align: left;
    z-index: 10000;
}
li.d-button > a {
    padding: 0px;
}
.dealer-login li.d-button:hover > ul {
    display: block;
}
.dealer-login li li {
    display: block;
    text-align: center;
}
.dealer-login li li > a {
    display: block;
    padding: 10px 5px;
    min-height: 40px;
    box-sizing: border-box;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
}
.dealer-login li li > a:hover {
    background-color: #0202cc;
}


/* menus */
nav ul {
    list-style:none;
    padding:0;
    margin:0;
}
nav li {
    display: inline-block;
    vertical-align:top;
}
nav a {
    display: block;
    color: inherit;
    text-decoration:none;
}
nav li a[href="#"],
nav li a[href="/#"] {
    cursor: default;
}

/* social links */
.social .label,
.social h3,
.social .site-links {
    display: inline-block;
    vertical-align: middle;
}
.social .label,
.social h3 {
    margin-right: 5px;
}
.site-link {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    margin: 5px;
}
.site-link img {
    width: 35px;
    height: 35px;
}
/** layout **/
.table {
    display: table;
    width: 100%;
}
.col {
    display: table-cell;
    vertical-align: top;
}
.col.left {
    width: 40%;
    text-align: left;
    padding-right: 20px;
    box-sizing: border-box;
}
.back {
    width: 100%;
    text-align: left;
    float: none;
}

/** form default **/
form p {
    position: relative;
    text-align: left;
    margin:0;
    margin-top: 8px;
}
form h3 {
    text-align: left;
    font-weight: normal;
    text-transform: uppercase;
}
form h4 {
    text-align: left;
    text-transform: uppercase;
}
label.infield {
    position: absolute;
    padding-left: 15px;
    line-height:35px;
    font-weight: 300;
}
label.infield.spesh,
label.spesh {
    font-weight: normal;
}
label.error {
    display: block;
    font-size: 12px;
    line-height:1;
}
input,
select,
textarea {
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 300;
    font-size: 16px;
    padding-left: 15px;
    width: 100%;
    border: 0;
    box-sizing: border-box;
}
input,
select {
    height: 35px;
}
input[type='checkbox']{
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    padding-left:0;
    margin-right: 8px;
}
textarea {
    padding: 10px;
    padding-left: 15px;
    min-height: 78px;
}
button {
    display: inline-block;
    padding: 10px;
    text-align: left;
    background-color: #ff0000;
    color: #FFF;
    width: 200px;
    line-height: 20px;
    max-width: 100%;
    border: 0;
    box-sizing: border-box;
    margin-top: 5px;
}
button.green {
    background-color: #1aa853;
}
button:before {
    content:"";
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/red-river/app_files/img/right-white.svg');
    background-repeat: no-repeat;
    background-size: 20px 20px;
    margin-left: 4%;
    float: right;
}
button:after {
    content:"";
    display: block;
    width: 100%;
    height: 1px;
    clear: both;
}
/* adjust gallery style to grid */
.kmsgallery.display-default {
    text-align: center;
}
.kmsgallery.display-default .kmsgallery-thumbnail-image {
    width: 31%;
    height: 0;
    padding-top: 31%;
    margin: 0.5%;
}

/*============ header ============*/
header.top {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    color:#fff;
    letter-spacing: 1px;
    z-index: 100;
}
header .contentwrap {
    padding: 0 30px;
}
.header-bar-top {
    font-size:14px;
}
header .contentwrap.top {
    text-align: left;
}
a.logo {
    display: inline-block;
    width: 400px;
    max-width: 100%;
    height: 105px;
    float: left;
}
.logo h1 {
    margin: 0;
}
.logo img {
    padding: 10px 0;
}
header .right {
    text-align: right;
    min-height: 100px;
    padding: 20px 0;
    padding-top: 30px;
    box-sizing: border-box;
}
header .right a,
header .right a.button {
    display: inline-block;
    vertical-align: middle;
}

header .right a.action {
    padding: 10px 2%;
    text-align: left;
}
header .right > a.action:first-of-type {
    position: relative;
}
header .right > a.action:first-of-type:after {
    content:"";
    position: absolute;
    top:10px;
    bottom:10px;
    right:-1px;
    display: inline-block;
    width: 2px;
    background: #8a8f9b;
}
header .right a > span {
    display: block;
    text-transform: uppercase;
}
.header-bar-top:after {
    content:"";
    display: table;
    width:100%;
    height:1px;
    clear: both;
}

/*** menu ***/
.header-bar-bottom {
    position: relative;
    font-size: 16px;
}
.main-menu {
    background-color: #ff0000;
    -webkit-box-shadow: 0px 4px 3px 0px rgba(73,68,68,0.34);
    -moz-box-shadow: 0px 4px 3px 0px rgba(73,68,68,0.34);
    box-shadow: 0px 4px 3px 0px rgba(73,68,68,0.34);
}
.main-menu > ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.main-menu li {
    display:block;
    width:100%;
    text-align: center;
}
.main-menu li.depth-0 {
    display: table-cell;
    vertical-align: middle;
    border-left: 1px solid #c91717;
    border-right: 1px solid #c91717;
}
.main-menu a {
    padding: 10px 5px;
    min-height: 40px;
    border: 0;
    color: #FFF !important;
    box-sizing: border-box;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
}
.main-menu li:hover > a {
    background-color: #e10505;
    background-color: rgba(255,5,5,0.5);
}
.main-menu li.depth-0 > a {
    font-size: 18px;
    font-weight: normal;
    min-height: 0;
    padding: 10px 0;
    padding-bottom: 7px;
    border-bottom: 5px solid transparent;
}
.main-menu li.depth-0:hover > a, 
.main-menu li.depth-0.active > a,
.main-menu li.depth-0.sub-active > a {
    background-color: transparent;
    border-bottom: 5px solid #FFF;
}

/* Page submenus */
.main-menu li.depth-0 + li.depth-0.has-sub {
    position: relative;
}
.main-menu li .menu-icon {
    display: none;
}
.main-menu li > ul {
    display:none;
    position: absolute;
    left:0;
    background: #181f2d;
    background: rgba(27,30,47, 0.8);
    text-align: left;
    z-index:10000;
}
.main-menu li.depth-0 > ul {
    top: 100%;
    left:0;
    right:0;
}
.main-menu li.depth-1 > ul {
    top:0;
    left: 100%;
}
/** only 2 deep in normal menu **/
.main-menu li.depth-0:hover > ul {
    display:block;
}

/* product submenu + menu */
#products {
    position: relative;
    font-size: 18px;
    line-height: 1;
    color: #FFF;
    background-color: #1f232c;
    background: rgba(27,30,47, 0.8);
    margin-bottom: 200px;
    z-index: 100;
}
#products > ul {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
}
#products li,
.main-menu > ul > li:first-child li {
    font-size: 14px;
    line-height: 1;
}
#products li.depth-1,
.main-menu > ul > li:first-child li.depth-1 {
    font-size: 16px;
    line-height:1;
}
#products li.depth-0:hover > a,
.main-menu  > ul > li:first-child li.depth-1:hover > a {
    background-color: #e10505;
    background-color: rgba(255,5,5,0.5);
}
.main-menu > ul > li:first-child li li:hover > a {
    background-color: transparent;
}
.main-menu > ul > li:first-child li li > a .menu-icon {
    border: 2px solid transparent;
}
#products .menu-icon,
.main-menu > ul > li:first-child .menu-icon {
    display: inline-block;
    max-width: 100%;
    background-repeat: no-repeat;
}
.main-menu li .menu-icon::before {
    content:"";
    display: block;
    width:100%;
    padding-top: 60%;
}
.main-menu li .menu-icon {
    position: relative;
    width: 150px;
    background-size: cover;
    background-position: center;
    border: 2px solid transparent;
}
#products li.depth-1 .menu-icon,
.main-menu > ul > li:first-child > ul > li > a > .menu-icon {
    width: 200px;
    background-size: contain;
    background-position: bottom;
    border: 0;
}
#products li.depth-1:hover > a > .menu-icon,
.main-menu > ul > li:first-child  li li:hover > a > .menu-icon {
    border: 2px solid #FFF;
}

#products li,
.main-menu > ul > li:first-child li,
.main-menu > ul > li:first-child li {
    display: table-cell;
    vertical-align: top;
    text-align: center;
}

#products li > a,
.main-menu > ul > li:first-child li > a {
    position: relative;
    display: block;
    padding-top: 120px;
    padding: 20px;
    box-sizing: border-box;
}

#products li > a > .title,
.main-menu > ul > li:first-child  li > a > .title {
    display: block;
    padding-top: 5%;
}

#products li > ul,
.main-menu > ul > li.first-child li > ul,
.main-menu > ul > li:first-child li > ul {
    display: none;
    position: absolute;
    top:100%;
    left:0;
    right:0;
    background-color: #1f232c;
    background: rgba(27,30,47, 0.8);
}

#products li:hover > ul,
.main-menu > ul > li:first-child:hover > ul,
.main-menu > ul > li:first-child li:hover > ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

/** mobile **/
#mobile-menu {
    display: none;
    position: relative;
    background: #f8a21b;
    background-size: 24px;
    font-size: 24px;
    padding: 8px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    z-index:100;
}
#mobile-menu > span {
    display: block;
    width:100%;
    height: 3px;
    background-color: #000;
    border-radius: 3px;
    margin: 4px 0;
    opacity:1;
    transition: opacity 0.3s ease-in-out;
}
.slide-menu-active #mobile-menu span.one {
    -webkit-transform: rotate(-45deg) translate(-5px, 5px);
    transform: rotate(-45deg) translate(-5px, 5px);
}
.slide-menu-active #mobile-menu span.two {
     opacity: 0;
}
.slide-menu-active #mobile-menu span.three {
    -webkit-transform: rotate(45deg) translate(-5px, -5px) ;
    transform: rotate(45deg) translate(-5px, -5px) ;
}
/***** Slide menu ****/
.slide-menu {
    display:none;
}
.slide-menu {
	background: #ccc;
    width:240px;
    z-index:1000;
	position: fixed;
	height: 100%;
	top: 0;
	right: -240px;
	border-left: 1px solid #000;
	overflow-y:scroll;
}
.slide-menu-active .slide-menu {
    right: 0px;
}
.site-content-menu-slide {
    overflow-x:hidden;
    position:relative;
    right:0;
}
/* transition for menu slide */
.slide-menu,
.site-content-menu-slide,
#mobile-menu {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.slide-menu h3 {
	padding: 1em;
	color: #000;
	background: #f8a21b;
	margin:0;
}
.slide-menu ul {
    padding:0;
    margin:0;
    list-style:none;
}
.slide-menu ul ul {
	background:#999;
}
.slide-menu ul ul ul{
	background:#666;
}
nav.slide-menu li {
    position:relative;
    display:block;
}
.slide-menu li > ul {
    display:none;
}
.slide-menu li.expand-active > ul {
    display:block;
}
.slide-menu a {
	display: block;
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	border-bottom: 1px solid #000;
	padding: 18px;
	text-decoration:none;
}
.slide-menu a:hover {
	background-color: #e10505;
    background-color: rgba(255,5,5,0.8);
}
.slide-menu li.has-sub > a {
    position: relative;
    border-right: 1px solid #000;
    margin-right: 50px;
}
.slide-menu li.has-sub > a::after {
    content:"";
    position: absolute;
    bottom: -1px;
    left: 100%;
    width: 50px;
    height: 1px;
    background-color: #000;
    z-index: 1;
}
.slide-menu ul .expand {
    position: absolute;
    top: 0;
    right: 0;
    height: 59px;
    width: 50px;
    cursor: pointer;
}
.slide-menu ul .expand i {
    content:"";
    display: block;
    height: 62px;
    width: 48px;
    background: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/red-river/app_files/img/menu-drop.svg') no-repeat center center;
    background-size: 30%;
    -webkit-transition: -webkit-transform 500ms ease;
    transition: -webkit-transform 500ms ease;
    transition: transform 500ms ease;
    transition: transform 500ms ease, -webkit-transform 500ms ease;
}
.expand-active > .expand i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*============ footer ============*/
.t-catalogue-form #content,
.t-form #content,
#quick-links,
#form-block {
    background-color: #f2f2f2;
}
.t-form #quick-links {
    background-color: #FFF;
}
#quick-links .table {
    table-layout: fixed;
}
.model.green-button,
#quick-links .green-button,
.map.red-button {
    display: inline-block;
    text-align: left;
    padding: 10px;
    padding-right: 40px;
    cursor: pointer;
}
.model.green-button::after,
#quick-links .green-button::after,
.map.red-button::after {
    content:"";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/red-river/app_files/img/right-white.svg');
    background-repeat: no-repeat;
    background-size: contain;
}
#quick-links h3 {
    text-transform: capitalize;
}
/** navs **/
footer {
    background: #181f2d;
    color: #6d7278;
}
footer .col {
    text-align: left;
}
footer .col.sml {
    text-align: right;
}
/** product category menu **/
.footer-products {
    display: inline-block;
    width: 230px;
    max-width: 100%;
}
.footer-products h4#drop-menu {
    position: relative;
    display: block;
    text-align: left;
    font-weight: normal;
    width: 100%;
    padding: 5px;
    padding-right: 30px;
    border: 2px solid #6d7278;
    box-sizing: border-box;
    margin: 0;
    cursor: pointer;
}
.footer-products ul,
.footer-products li > ul {
    display: none;
}
.footer-products.expand-active > ul,
.footer-products li.expand-active > ul {
    display: block;
}
.footer-products li {
    display: block;
    font-size: 16px;
}
.footer-products li li > a {
    font-size: 14px;
    padding-left: 20px;
}
.footer-products li.depth-2 > a {
    padding-left: 30px;
}
.footer-products li.depth-3 > a {
    padding-left: 40px;
}
.footer-products li.has-sub {
    position: relative;
    border-right: 1px solid #6d7278;
}
.footer-products a {
    display: block;
    padding: 5px;
    min-height: 30px;
    border: 1px solid #6d7278;
    border-top: 0px;
    box-sizing: border-box;
    transition: background-color 0.2s ease-in-out;
}
.footer-products li.has-sub > a {
    position: relative;
    border-right: 1px solid #6d7278;
    margin-right: 50px; /* space for drop */
}
.footer-products li.has-sub > a:after {
    position: absolute;
    content: "";
    display: block;
    left: 100%;
    bottom: -1px;
    background-color: #6d7278;
    width: 50px;
    height: 1px; /* border bottom */
    z-index: 1;
}
.footer-products a:hover {
    background-color: #FFF;
}
h4 .top-expand,
.footer-products ul .expand {
    position: absolute;
    top: 0;
    right: 0;
    height: 30px;
    width: 50px;
    cursor: pointer;
}
h4 .top-expand {
    height: 100%;
    border-left:0;
}
h4 .top-expand i,
.footer-products ul .expand i {
    content:"";
    display: block;
    height: 100%;
    width: 48px;
    background: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/red-river/app_files/img/products-drop.svg') no-repeat center center;
    background-size: 30%;
    -webkit-transition: -webkit-transform 500ms ease;
    transition: -webkit-transform 500ms ease;
    transition: transform 500ms ease;
    transition: transform 500ms ease, -webkit-transform 500ms ease;
}
h4 .top-expand i {
    background: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/red-river/app_files/img/footer-products.svg') no-repeat center;
    background-size: 20px 20px;
}
.expand-active > .expand i,
.expand-active .top-expand i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

/** footer menu **/
.site-map ul,
a.dealer-pg {
    color: #fff;
}
nav.footer-menu > ul {
    display: table;
    width:100%;
}
nav.footer-menu > ul > li {
    display:table-cell;
    font-size: 18px;
}
nav.footer-menu li li,
a.dealer-pg {
    display: block;
    font-size: 14px;
}

nav.footer-menu li > a {
    position:relative;
    line-height:30px;
}
nav.footer-menu li > a:hover {
    text-decoration: underline;
}
nav.footer-menu li > a[href$="#"]:hover {
    text-decoration: none;
}

/** bottom section **/
footer > .bottom {
    border-top: 2px solid #6d7278;
}
footer .bottom .contentwrap {
    padding: 20px;
    padding-bottom: 0;
}
footer .copyright p,
footer .copyright a {
    display: inline;
    padding: 0 5px;
}
/** bykeo ***/
.bykeo {
    display: block;
    text-align: center;
    font-size: 12px;
    padding-top: 15px;
    padding-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}
.bykeo img {
    vertical-align: middle;
    display: inline-block;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
.bykeo a:hover img{
    transform-origin: center;
    transform: translateX(-200%) rotate(-360deg);
}


/*============ splash ============*/
/*  banner */
#top-banner {
    position: relative;
    z-index: 1;
}
#top-banner .fallback,
#top-banner .page-graphic {
    padding-top: 200px; /* header */
    background-color: grey;
}
.banners-home {
    position: relative;
    color: #FFF;
    background-color: grey;
    padding-top: 50%;
}
.banners-home .banner-stage {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.banners-home .banner {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100%;
    display: table;
    padding-top: 200px; /* header */
    text-decoration: none;
    background-position:center;
    background-size:cover;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index:0;
}
.banners-home .banner:before {
    content:"";
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: rgba(27,30,47, 0.44);
    z-index: -1;
}
.banner-content {
    display: table-cell;
    vertical-align: middle;
    max-width: 1200px;
    padding 20px;
    padding-bottom: 12%;
    font-size: 30px;
    text-align: center;
}
.banner-content .banner-name,
.banner-content .banner-title {
    display: block;
}
.banner-content .banner-name {
    font-size: 50px;
    margin-bottom: 40px;
}
.banner-content .banner-title {
    font-weight: 300;
    font-size: 40px;
    margin-bottom: 20px;
}
.banner-content .banner-caption {
    text-transform: uppercase;
    font-weight: 600;
}
.banner-content .banner-caption > span {
    display: inline-block;
    padding-right: 40px;
    background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/red-river/app_files/img/right-red.svg');
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: right;
}
.banner.active {
    opacity: 1;
    z-index: 2;
}
.banners-home .banner-navigation {
    display:none;
    position:relative;
    padding-bottom: 40px;
    z-index: 2;
}
.banner-navigation-body {
    max-width: 1200px;
    text-align: center;
    letter-spacing: 1px;
    padding: 0 20px;
    margin: 0 auto;
}
.banner-nav-item {
    position: relative;
    display: inline-block;
    width: 33.33%;
    padding: 1% 20px;
    padding-right: 40px;
    font-size: 18px;
    background: #181f2d;
    background: rgba(27,30,47, 0.8);
    text-align: left;
    box-sizing: border-box;
    border-right: 0.5px solid #000;
    border-bottom: 5px solid transparent;
    cursor: pointer;
}
.banner-nav-item .banner-name,
.banner-nav-item .banner-caption {
    display: none;
}
.banner-nav-item:after {
    content:"";
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/red-river/app_files/img/right-red.svg');
    background-size: contain;
    background-position: center;
}
.banner-nav-item.active {
    background-color: #000;
    border-bottom: 5px solid #FFF;
}

/** feature menu **/
.featured .contentwrap {
    padding-top: 0;
}
.featured .sub {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 30%;
    padding: 2%;
    padding-bottom: 2%;
    min-height: 400px;
    border: 1px solid #a2a2a2;
    box-sizing: border-box;
    margin: 1%;
}
.featured .sub a,
.featured .sub a:visited {
    text-decoration: none;
    display: block;
}
.featured .sub .icon,
.featured .sub .no-icon {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 60%;
    background-size: cover;
}
.featured .sub .icon {
    background-color: #a2a2a2;
}
.featured .sub .icon a,
.featured .sub .no-icon a {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
}
.featured .sub .light-button {
    min-width: 0;
}
/*============ page ============*/
.page-graphic {
    position: relative;
    background-size:cover;
    background-position:center;
    padding-bottom: 5%;
}
.t-products .page-graphic,
.t-content-in-banner .page-graphic {
    padding-bottom: 0;
}
#top-banner .page-graphic:before {
    content:"";
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: rgba(27,30,47, 0.44);
}
#top-banner .page-title {
    font-weight: normal;
    padding-bottom: 40px;
    margin-bottom: 0;
}
#top-banner .page-title,
.t-content-in-banner #top-banner .contentwrap h1,
.t-content-in-banner #top-banner .contentwrap h2 {
    font-size: 40px;
    font-weight: normal;
    margin-top: 0;
}
#top-banner .contentwrap {
    color: #FFF;
}
#top-banner .page-graphic div.contentwrap.content {
/* content over banner */
    text-align: left;
}

.page-body.contentwrap::after,
.category-info .content::after {
    content:"";
    display: table;
    width: 100%;
    height: 1px;
    clear: both;
}

/** related pages **/
.related-content {
    padding-top: 30px;
}
.related-content .set-height {
    position: relative;
    height: 50vw;
}
a.related {
    position:absolute;
    top:0;
    left:0;
    width: 37%; /* rectangle */
    height: 33%;
    color: #FFF;
    display: block;
    display:flex;
    justify-content:space-around;
    text-decoration: none;
    align-items:center;
    overflow:hidden;
}
a.related::before { /* darken */
    content:"";
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: rgba(27,30,47, 0.44);
    border: 1px solid #FFF;
    z-index:1;
}
.related .icon {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-size:cover;
    background-position: center;
    z-index: 0;
    transform: scale(1.1);
    transition: transform 1s ease;
}
.related .teaser {
    position:relative;
    text-align: left;
    padding: 5%;
    padding-left: 10%;
    width:100%;
    box-sizing: border-box;
    z-index:10;
}
.related h3 {
    font-weight: normal;
    font-size: 1.5em;
}
.related .teaser .button {
    display: inline-block;
    color: #FFF !important;
    letter-spacing: 1px;
    padding: 10px 20px;
    max-width: 100%;
    border: 2px solid #FFF;
    box-sizing: border-box;
    transition: background-color 0.2s ease-in-out;
    text-decoration: none;
}
a.related:hover .button {
    background-color: #FFF;
    color: #222 !important;
}
a.related .arrow {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/red-river/app_files/img/right-red.svg');
    background-size: contain;
}

a.related:hover > .icon {
    transform: scale(1);
}

/* big square */
a.related:nth-of-type(1) {
    height: 66%;
}
/* small squares */
a.related:nth-of-type(2),
a.related:nth-of-type(5),
a.related:nth-of-type(7) {
    width: 21%;
}

/** first col **/
a.related:nth-of-type(1),
a.related:nth-of-type(6) {
    width: 42%
}

/** 2nd col **/
a.related:nth-of-type(2),
a.related:nth-of-type(4),
a.related:nth-of-type(7){
    left: 42%;
}

/** 3rd col **/
a.related:nth-of-type(3),
a.related:nth-of-type(5),
a.related:nth-of-type(8){
    right:0;
    left:auto;
}

/** 2nd row **/
a.related:nth-of-type(4),
a.related:nth-of-type(5),
a.related:nth-of-type(7){
    top: 33%;
}

/** 3rd row = bottom **/
a.related:nth-of-type(n+6) {
    top: 66%;
    bottom: 0;
}

/** max 8 only **/
.related:nth-of-type(n+9) {
    display:none;
}

/** dealer menu **/
.dealer-menu {
    margin-bottom: 20px;
}
.dealer-menu li.top {
    position: relative;
    border: 0.5px solid #FFF;
}
.dealer-menu li.top > a {
    position: relative;
    display: block;
    color: #FFF !important;
    letter-spacing: 1px;
    padding: 10px 20px;
    min-width: 200px;
    max-width: 100%;
    background: #0000FF;
    box-sizing: border-box;
    transition: background 0.2s ease-in-out;
    text-decoration: none;
}
.dealer-menu li > a:hover {
    background: #0202cc;
}
.dealer-menu li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0px;
    right: 0px;
    border: 0.5px solid #6d7278;
    border-top: 2px solid #FFF;
    background: #181f2d;
    background: rgba(27,30,47, 0.8);
    text-align: left;
    z-index: 10000;
}
.dealer-menu li.top:hover > ul {
    display: block;
}
.dealer-menu li li {
    display: block;
}
.dealer-menu li li > a {
    display: block;
    text-align: center;
    color: #FFF;
    padding: 10px 5px;
    min-height: 40px;
    box-sizing: border-box;
}
/** subpages **/
.subpages.contentwrap {
    padding: 0 30px;
    margin-bottom: -40px;
}

.subpages .sub {
    position: relative;
    background-color: #FFF;
    z-index:2;
}

/** with images **/
.subpages .sub.has-img {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    clear: both;
}

.subpages .sub.has-img .content,
.subpages .sub .icon {
    flex-basis:50%;
}

.subpages .sub .icon {
    background-size: cover;
    background-color: grey;
}
.subpages .icon::before { /** set proportion **/
    content:"";
    display: block;
    padding-top: 80%;
}

.subpages .content {
    text-align: left;
    padding: 40px 0;
}
.subpages .sub.has-img .content {
    padding-bottom: 20px;
}
.subpages .content > div {
    position: relative;
    padding-left: 40px;
}
.subpages .content > div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 25px;
    height: 30px;
    background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/red-river/app_files/img/red-next.svg');
    background-size: 25px 30px;
    background-repeat: no-repeat;
}

/** no image subs **/
.subpages .sub.no-img {
    /* display: inline-block; */
    /* vertical-align: top; */
    /* width: 50%; */
    padding-right:50%;
}
.subpages .sub.no-img:nth-child(even) {
    padding-right:0;
    padding-left:50%;
}

/* odd subs **/
.subpages > div:nth-of-type(odd).sub .icon {
    order: 1;
}
.subpages > div:nth-of-type(odd).sub .content {
    padding-right: 20%;
}

/** even subs **/
.subpages > div:nth-of-type(even).sub .content {
    padding-left: 20%;
}

/** every 3rd sub has coloured background **/
.subpages > div:nth-of-type(3n).sub {
    /* display: block; */
    width:100%;
    background-color: #f2f2f2;
    z-index:1;
}

/* colour extending outside content wrap */
.subpages > div:nth-of-type(3n).sub::before,
.subpages > div:nth-of-type(3n).sub::after {
    content:"";
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    background-color: #f2f2f2;
    z-index: -1;
}
.subpages > div:nth-of-type(3n).sub::before {
    right: 100%;
}
.subpages > div:nth-of-type(3n).sub::after {
    left: 100%;
}

/*============ Members (Dealers) ============*/
.login-wrap {
    text-align: left;
    font-weight: normal;
    max-width: 500px;
    margin: 30px auto;
}
#form_login_user {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    box-sizing: border-box;
}
.form-group {
    position: relative;
    /* flex-grow: 1; */
    margin: 10px 0px;
}
.wtfield-PasswordField {
    flex-grow: 1;
}
.login-wrap label.error {
    position: absolute;
    top: 100%;
}
.login-wrap button.green-button {
    padding: 5px 10px;
    height: 35px;
    line-height: 20px;
    width: 120px;
    min-width: 0px;
    box-sizing: border-box;
}

/*============ find us  ============*/
.t-findus .page-body.contentwrap {
    padding-bottom:0;
}
.contact .table {
    table-layout: fixed;
}
.contact .col {
    vertical-align: top;
    text-align: left;
    padding: 1% 2%;
}
.contact .col.content {
    padding-left: 0;
    padding-right: 10%;
}
.contact .details p {
    font-weight: normal;
    margin: 0;
}
.footer-contact {
    font-size: 18px;
    line-height: 1;
}
span.label {
    display: inline-block;
    font-weight: 300;
    min-width: 55px;
}
.contact .details h3 {
    margin-bottom: 10px;
}
.contact .details a {
    text-decoration: none;
}
.opening-hours,
.opening-days,
.opening-times {
    display: block;
}
.opening-hours {
    margin-bottom: 10px;
}
.opening-seperator {
    display: inline-block;
    padding: 0 5px;
}
.opening-times {
    font-weight: normal;
}
/** locations **/
.location-list {
    background: #f2f2f2;
}
.location-list .office {
    text-align: left;
    box-sizing: border-box;
    padding: 20px 0;
}
.office h3 {
    margin:0;
}
.office p {
    margin:0;
}
.office div {
    display: inline-block;
    vertical-align: middle;
}
.office .details {
    width: 32%;
}

/*============ quote ============*/
/* both modes */
.js form p.error {
    display: none;
}
#form-block .contentwrap {
    padding-top: 0;
}
.js #quote .enquiry-show {
    display: none;
}
.wrap {
    text-align: left;
}
#form-block .table {
    table-layout: fixed;
}
#form-block .table .col:nth-of-type(odd) {
    padding-right: 1%;
}
#form-block .table .col:nth-of-type(even) {
    padding-left: 1%;
}
textarea#message {
    min-height: 121px;
    padding: 10px;
}
#quote textarea {
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 35px;
}
.product.table {
    min-height: 70px;
}
form p > span {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
}
#horse-options p > span:first-of-type {
    width: 150px;
    padding-right: 10px;
}
form span.wrap {
    width: 120px;

}
/*============ Actions  ============*/
/** indexes **/
.share {
    position: relative;
    display: inline-block;
    background-color: #1360a4;
    padding: 5px 10px;
    padding-right: 40px;
    font-size: 16px;
    font-weight: 300;
    color: #FFF;
    text-decoration: none;
    z-index: 5;
}
.share:before {
    content:"";
    position: absolute;
    top: 5px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/red-river/app_files/img/share-icon.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}
.share .links {
    display: none;
    position: absolute;
    top:100%;
    left: 0;
    right:0;
    width: 100%;
    background-color: #FFF;
    text-align:center;
    padding: 5px 0;
    box-sizing: border-box;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
}
.share .links:before {
    content:"";
    position: absolute;
    top: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #FFF transparent;
}
.share:hover .links {
    display: block;
}
.share img {
    width: 20px;
    height: 20px;
    margin:2px;
}

/** pager **/
.pager .button {
    text-decoration: none;
    text-align: middle;
    color: #FF0000;
    font-weight: normal;
    width: 40px;
    height: 40px;
    padding: 10px 5px;
    box-sizing: border-box;
    border: 1px solid #FF0000;
    margin: 5px;
}
.pager .button.active {
    background-color: #FF0000;
    color: #FFF;
}

/** item **/
.page-body .page-title,
.page-body .title {
    text-align: left;
}
.title .share {
    float: right;
}
.page-body .share .links,
#product-index > .contentwrap > div:nth-of-type(odd) .share .links {
    background-color: #f2f2f2;
}
.page-body .share .links::before,
#product-index > .contentwrap > div:nth-of-type(odd) .share .links::before {
    border-color: transparent transparent #f2f2f2 transparent;
}

/*============ products  ============*/
p.right {
    text-align: right;
    margin-top: 0;
}
/** product banner sub-nav **/
.t-products #top-banner .contentwrap,
.t-product #top-banner .contentwrap,
.t-product #top-banner .page-graphic {
    padding-bottom: 0;
}
.t-products #top-banner .contentwrap .wrap,
.t-product #top-banner .contentwrap .wrap {
    background-color: #181f2f;
    background: rgba(27,30,47, 0.8);
    padding: 40px 20px;
}
ul.product-breadcrumbs {
    position: relative;
    font-size: 18px;
    line-height: 1;
    color: #FFF;
    display: block;
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.product-breadcrumbs ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.product-breadcrumbs a {
    text-decoration: none;
}
.product-breadcrumbs li {
    display: inline-block;
    box-sizing: border-box;
}
.product-breadcrumbs > li > a:after {
    content:" > ";
    color: #FFF;
}
.product-breadcrumbs > li:last-of-type > a:after {
    content:"";
}
.product-breadcrumbs li.active {
    color: #ec0a00;
}

.scroll-wrap {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin-top: 20px;
}
.scroll-wrap .prev,
.scroll-wrap .next {
    display: none;
    position: absolute;
    top:0;
    bottom:0;
    width: 40px;
    height: 98px;
    background-color: #000;
    background-size: 25px 40px;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #FFF;
    z-index: 10;
}
.scroll-wrap .prev {
    left:0;
    background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/red-river/app_files/img/next.svg');
    transform: rotate(180deg);
}
.scroll-wrap .next {
    right:0;
    background-image:url('https://keo-cms.appspot.com.storage.googleapis.com/sites/red-river/app_files/img/next.svg');

}

.scroller {
    white-space: nowrap;
    overflow-x: auto; /* overridden js */
}
.scroller .item {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    width: 150px;
    height: 100px;
    margin: 0 5px;
}
.scroller .item > a {
    position: relative;
    display: table;
    width: 100%;
    height: 98px;
    border: 1px solid #FFF;
    background-position: center;
    background-size: cover;
}
.scroller .item > a.active {
    border: 1px solid #cc0202;
}
.scroller .item .menu-icon {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.scroller .item span.title {
    position: relative;
    display: table-cell;
    font-size: 14px;
    vertical-align: middle;
    text-align: center;
    padding: 5px;
    background: rgba(27,30,47, 0.44);
    z-index:1;
    opacity:1;
    transition: opacity 0.2s ease-in-out;
}
.scroller .item > a.has-icon:hover > span.title {
    opacity: 0;
}

/** product index **/
.category-info {
    padding-top: 20px;
    background: #f2f2f2; /* grey */
}
.category-info .content {
    position: relative;
}
.category-info .contentwrap {
    text-align: left;
    box-sizing: border-box;
}
.category-info > div.contentwrap:last-of-type {
    padding-bottom: 40px;
}

/* reverse content style for category content */
.category-info .grey-block,
.grey-block:before,
.grey-block:after {
    background: #FFF;
}

/** block products **/
.products.contentwrap {
    position: static;
    padding:0px 30px;
    box-sizing: border-box;
}
.products .product {
    position: relative;
    text-align: left;
    padding: 40px 0;
}

#square-grid.no-subs,
#square-grid .products,
.products > div:nth-of-type(even){
    background: #f2f2f2; /* grey */
    z-index: 2;
}

.products > div:nth-of-type(even)::before,
.products > div:nth-of-type(even)::after,
#square-grid .products::before,
#square-grid .products::after {
    content:"";
    background: #f2f2f2;
    position: absolute;
    top:0;
    bottom:0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.products > div:nth-of-type(even)::before,
#square-grid .products::before {
    right: 100%;
}
.products > div:nth-of-type(even)::after,
#square-grid .products::after {
    left: 100%;
}

.product .image,
.product .content {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    box-sizing: border-box;
}
.product .image > a {
    display: block;
}
.products > div:nth-of-type(even) .image {
    text-align: right;
    float: right;
}
.product .image .share {
    margin-top: 10px;
}

/* content */
.product.has-img .content {
    padding-right: 10%;
}
.products > div:nth-of-type(odd) .content {
    padding-right: 0;
    padding-left: 10%;
}
.content .title {
    margin-top: 0;
}

/** Squares: categories + yard products **/
#square-grid .contentwrap {
    padding: 30px;
}

/** sub-categories and products the same **/
#square-grid div.square,
#square-grid .products .product {
    display: inline-block;
    vertical-align: top;
    width: 33%;
    padding: 2% 1%;
    box-sizing: border-box;
}
#square-grid .products > div:nth-of-type(even)::before,
#square-grid .products > div:nth-of-type(even)::after {
    display: none;
}

#square-grid .square > .image,
#square-grid .square > .content,
#square-grid .products .product .image,
#square-grid .products .product .content {
    display: block;
    text-align: left;
    width:100%;
    padding:0;
    float: none;
}

.square.has-image > .content,
#square-grid .products > div:nth-of-type(odd).has-image .content {
    padding:0;
}
#square-grid .square > .content,
#square-grid .products .content {
    padding-top: 10px;
}

.sub-category a,
.product a {
    text-decoration: none;
}

/** image styles **/
.square .image,
#loader.image {
    position: relative;
    color: #FFF;
    background-color: #FFF;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.sub-category.square .image,
#loader.image {
    background-color: grey;
}
.sub-category.square .image {
    background-size: cover;
}
.square .image:before,
#loader.image:before { /** make square */
    content:"";
    display: block;
    width: 100%;
    padding-top: 100%;
}
.square .image a,
#loader .image a {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

.square .image .hover,
#loader.image .load {
    position: absolute;
    top:0;
    left:0;
    display: block;
    width: 100%;
    height:100%;
}
#loader.image .load {
    display:none;
}
.square .hover .wrap,
.load .wrap {
    display: table;
    width:100%;
    height: 100%;
}
#square-grid .products .product .hover .content,
.square .image .hover .content,
.image .load .content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 1%;
}
.hover .content > a {
    display: block;
}
.hover .content {
    font-size: 18px;
}
/** has image **/
.square.has-image .image .hover {
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.square.has-image .image:hover .hover {
    opacity: 1;
}
.square .image .top-title {
    position: absolute;
    top:0;
    left:0;
    display: inline-block;
    background-color: #a6a9b0;
    padding: 5px 10px;
    max-width: 100%;
    box-sizing: border-box;
    margin:0;
    opacity:1;
    transition: opacity 0.2s ease-in-out;
}
.square.has-image .image:hover .top-title {
    opacity: 0;
}


/** make footer quick links white **/
.t-square #quick-links,
.t-model #quick-links,
.t-find-us {
    background-color: #FFF;
}

/*============ product item  ============*/
.t-model #content {
    background: #f2f2f2;
}
.table.model {
    table-layout: fixed;
    margin-bottom: 40px;
}
#loader.image {
    width: 100%;
    background-size: cover;
    background-position: center;
}
#loader .kms-loader {
    display: none;
    position: absolute;
    top:50%;
    left:50%;
    margin-top: -50px;
    margin-left: -50px;
}
#loader.image .load .content {
    background-color: rgba(0,0,0,0.5);
    cursor: pointer;
}
#loader.image .load .content p {
    text-align: center;
    font-size: 20px;
}
#model {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    display: block;
}
#loader .directions {
    position: absolute;
    color: #000;
    top:0;
    left:0;
    width: 100%;
    background-color: transparent;
}
#loader .directions p {
    text-align: center;
}
.table.model .col.content {
    padding-left: 5%;
}
/*============ Events  ============*/
/** event banner content **/
.t-events #top-banner .contentwrap {
    padding-bottom: 0;
}
/* not currently used
.search-wrap {
    background-color: #181f2f;
    background: rgba(27,30,47, 0.8);
    padding-bottom: 4%;
}
#search {
    max-width: 400px;
    box-sizing: border-box;
    margin: 0 auto;
}
form#search h3 {
    display: block;
    text-transform: none;
    font-size: 30px;
    line-height: 1;
    font-weight: normal;
    text-align: center;
    color: #FFF;
    padding: 20px 0;
    margin: 0;
}
#search p {
    position: relative;
    padding-right: 52%;
    text-align: left;
}
#search input[type="submit"]{
    position: absolute;
    top:0;
    right:0;
    width: 50%;
    text-align: left;
    box-sizing: border-box;
} */

/** event list **/
#events .contentwrap {
    padding-top: 0;
}
.event {
    position: relative;
    display: inline-table;
    vertical-align: top;
    text-align: left;
    width: 48%;
    padding: 20px;
    background-color: #f2f2f2;
    box-sizing: border-box;
    border: 2px solid #FFF;
    box-sizing: border-box;
    height: 380px;
    margin: 1%;
}
.darken {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    background: rgba(27,30,47, 0.5);
    z-index: 0;
}
.event.has-icon {
    color: #FFF;
    background-size: cover;
    background-position: center;
}
.event a {
    text-decoration: none;
}
p.state {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    display: inline-block;
    color: #FF0000;
    width: 45px;
    height: 45px;
    line-height: 45px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #FFF;
    margin: 0;
}
.event h2 {
    font-weight: normal;
    margin-bottom:0;
}
.event .details {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #181f2d;
    background: transparent;
    transition: background 0.2s ease-in-out;
    margin-top: 20px;
}
.event .details:hover {
    background: #1aa853;
    background: rgba(26,169,87,0.6);
}
.has-icon .details {
    border: 1px solid #FFF;
}
.event .wrap {
    position: relative;
    display: table-cell;
    padding-top: 10%;
    vertical-align: top;
    padding-bottom: 70px;
    z-index:1;
}
.date {
    font-weight: 300;
    margin-top:0;
}

.event .share {
    position: absolute;
    top: 20px;
    right: 20px;
}

/*============ Testimonials ============*/
#testimonials .list.contentwrap {
    padding: 0 30px;
}
#testimonials .list > div:nth-of-type(odd){
    position: relative;
    background: #f2f2f2;
    z-index: 2;
}
#testimonials .list > div:nth-of-type(odd)::before,
#testimonials .list > div:nth-of-type(odd)::after {
    content:"";
    background: #f2f2f2;
    position: absolute;
    top:0;
    bottom:0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#testimonials .list > div:nth-of-type(odd)::before {
    right: 100%;
}
#testimonials .list > div:nth-of-type(odd)::after {
    left: 100%;
}

.testimonial {
    padding: 40px 0;
    text-align: left;
}
.testimonial h2.title {
    font-weight: 300;
    margin-bottom:0;
}
.testimonial h3.sub-title {
    margin-top:0;
}
.testimonial .content {
    position: relative;
    min-height: 60px;
    padding-left: 40px;
}
.testimonial .content:before,
.testimonial .content > div p:last-of-type:after {
    content:"";
    position: absolute;
    width: 60px;
    height: 60px;
    background-image:url('https://keo-cms.appspot.com.storage.googleapis.com/sites/red-river/app_files/img/quote.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    z-index:-1;
}
.testimonial .content:before {
    left: 0;
    top: 0;
}
.testimonial .content > div p:last-of-type {
    position: relative;
    display: inline-block;
    padding-right: 40px;
}
.testimonial .content > div p:last-of-type:after {
    right: 0;
    bottom: -20px;
    transform: rotate(180deg);
    background-position: bottom right;
}
/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width:1000px){
/** home **/
    #top-banner .page-title,

    .banner-content .banner-name {
        font-size: 40px;
        margin-bottom: 20px;
    }
    .banner-content .banner-title {
        margin-bottom: 15px;
    }
    .banners-home .banner-navigation {
        padding-bottom: 10px;
    }
    .sub {
        width: 48%;
    }
/** related content **/
    .related-content .set-height {
        height: 60vw;
    }
    .related h3 {
        font-size: 18px;
    }
/** subpages **/
    .subpages > div:nth-of-type(odd).sub .content {
        padding-right: 10%;
    }
    .subpages > div:nth-of-type(even).sub .content {
        padding-left: 10%;
    }
}

@media only screen and (max-width: 960px) {
/** mobile header **/
    header .contentwrap.top {
        padding-right: 65px;
    }
    header .right a.action {
        display: none;
    }
    header .button {
        margin: 1px;
    }
    #mobile-menu {
        display: block;
        position: absolute;
        top: 31px;
        right: 20px;
    }
    .main-menu {
        display:none;
    }
    .slide-menu {
        display:block;
    }
    .slide-menu-active .site-content-menu-slide {
        right: 240px;
    }
/* home */
    .banners-home .banner {
        padding-top: 100px;
    }
    .banner-content {
        line-height: 30px;
        font-size: 20px;
    }
    .banner-name {
        font-size: 30px;
    }
    .banner-name,
    .banner-title {
        margin-bottom: 10px;
    }
    .banners-home .banner-navigation {
        display: none !important;
    }
    /* featured */
    .sub .summary {
        display: none;
    }
    .featured .sub {
        min-height: 330px;
    }

/** product index squares stack (categories + yards products) **/
    #square-grid .contentwrap > div,
    #square-grid .products .product {
        width: 48%;
    }
/** subpages **/
    .subpages > div:nth-of-type(odd).sub .content {
        padding-right: 20px;
    }
    .subpages > div:nth-of-type(even).sub .content {
        padding-left: 20px;
    }
}

@media only screen and (max-width: 760px) {
    a {

        /* These are technically the same, but use both */
        overflow-wrap: break-word;
        word-wrap: break-word;

        -ms-word-break: break-all;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;

        /* Adds a hyphen where the word breaks, if supported (No Blink) */
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;

    }
/** header **/
    header .contentwrap.top {
        text-align: center;
        padding-right: 30px;
    }
    a.logo {
        padding-right: 60px;
        float: none;
    }
    header .right {
        display: block;
        min-height: 0;
        padding: 0;
        text-align: center;
        /* margin-top: -15px; */
    }
    .t-home header .right .button {
        display: none;
    }
/** home **/
    .banners.banners-home {
        padding-top:0;
    }
    .banners-home .banner-stage {
        position: static;
        width:100%;
        height: auto;
    }
    .banners-home .banner {
        position: static;
        display: none;
    }
    .banners-home .banner.active {
        display: table;
    }
    .banner-content .banner-name {
        font-size: 30px;
    }
    .featured .sub {
        padding: 20px;
        width: 80%;
        min-height: 0;
        margin: 20px 0;
    }
    .featured .sub .no-icon {
        display: none;
    }
/** page **/
    #top-banner .fallback,
    #top-banner .page-graphic,
    .banners-home .banner {
        padding-top: 150px;
    }
    #top-banner .page-title {
        margin:0;
        padding-bottom: 20px;
    }
/** events **/
    .t-events .page-body.contentwrap {
        padding-bottom: 0;
    }
    .event {
        display: table;
        width: 550px;
        margin: 1% auto;
    }
/** footer stack **/
    footer .table,
    footer .col.sml {
        display: block;
    }
    footer .col.browse,
    footer .col.site-map {
        display: inline-block;
        vertical-align: top;
        width: 48%;
    }
    footer .button {
        margin:10px auto;
    }
    /* expand dealer menu */
    footer .dealer-login .button.blue-button {
        padding: 0px;
        background-color: transparent;
    }
    footer .dealer-login .button.blue-button > a {
        padding: 10px 20px;
        width: 200px;
        background: #0000FF;
        border: 1px solid #6d7278;
        box-sizing: border-box;
    }
    footer .dealer-login li.d-button > ul {
        position: relative;
        display: block;
        border: none;
    }
    footer .dealer-login li.d-button > ul > li {
        border: 1px solid #6d7278;
        border-top: 0px;
    }
/** stack product index **/
    .product {
        text-align: center;
    }
    .product .image,
    .products > div:nth-of-type(even) .image,
    .product .content,
    .products > div:nth-of-type(odd) .content {
        display: block;
        width: 80%;
        float: none;
        margin: 0 auto;
    }
    .product .content {
        padding: 0;
        padding-top: 20px;
    }
/* product item */
/* product item */
    .table.model,
    .table.model .col {
        display: block;
        width:100%;
        margin-bottom: 0;
    }
    .table.model .col.content {
        padding:0;
        margin-top: 20px;
    }
/** stack forms **/
    form .table,
    form .col,
    .contact .table,
    .contact .table .col,
    .office .details,
    .office .button-wrap {
        display: block;
        width: 100%;
        padding: 0;
    }
    .office .button-wrap {
        padding-top: 20px;
    }
    .contact .stack,
    .location-list .office {
        display: inline-block;
        vertical-align: top;
        width: 50%;
        box-sizing: border-box;
    }
    .col.details > div:nth-of-type(odd),
    .location-list .contentwrap > div:nth-of-type(odd) {
        padding-right: 2%;
    }
    .col.details > div:nth-of-type(even),
    .location-list .contentwrap > div:nth-of-type(even) {
        padding-left: 2%;
    }
/** related items **/
    .related-content {
        padding-top: 0;
    }
    .related-content .set-height {
        display: block;
        height: auto;
    }
    .related h3 {
        font-size: 20px;
    }
    a.related {
        position: relative;
        display: inline-block;
        min-height: 200px;
        width: 60%;
    }
    a.related:nth-of-type(1),
    a.related:nth-of-type(6) {
        width: 100%;
    }
    a.related:nth-of-type(3),
    a.related:nth-of-type(5),
    a.related:nth-of-type(8),
    a.related:nth-of-type(3),
    a.related:nth-of-type(5),
    a.related:nth-of-type(8),
    a.related:nth-of-type(4),
    a.related:nth-of-type(5),
    a.related:nth-of-type(7),
    a.related:nth-of-type(2),
    a.related:nth-of-type(4),
    a.related:nth-of-type(7){
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }
    a.related:nth-of-type(2),
    a.related:nth-of-type(5),
    a.related:nth-of-type(7) {
        width: 40%;
    }
}

@media only screen and (max-width: 650px){
/** reduce vertical scroll **/
    .contentwrap {
        padding: 20px 30px;
    }
    .subpages.contentwrap {
        margin-bottom: -20px;
    }
    div > .grey-block:first-of-type {
        margin-top: -20px;
    }
    .t-products #top-banner .contentwrap .wrap,
    .t-product #top-banner .contentwrap .wrap {
        padding: 20px;
    }
    #top-banner .contentwrap {
        /* padding-top: 0; */
    }
    .t-content-in-banner #top-banner .contentwrap h1,
    t-content-in-banner #top-banner .contentwrap h2,
    #top-banner .page-title {
        line-height: 1;
    }
/** home **/
    .featured .contentwrap > div.sub:first-child {
        margin-top: 0;
    }
/** subpages -stack **/
    .subpages .sub.has-img .content,
    .subpages .sub .icon,
    .subpages .sub.no-img {
        display: block;
        width: 100%;
        margin: 0 auto
    }
    .subpages .icon::before {
        padding-top: 50%;
    }
    .subpages > div:nth-of-type(odd).sub .icon {
        float: none;
    }
    .subpages .sub .content,
    .subpages .sub.has-img .content,
    .subpages > div:nth-of-type(odd).sub .content,
    .subpages > div:nth-of-type(even).sub .content {
        padding: 20px 0;
        padding-bottom: 30px;
    }
    .subpages .content > div {
        padding-left: 30px;
    }
    .subpages > div:nth-of-type(3n).sub { /* grey */
        padding: 10px 0;
    }
/** contact **/
    #quick-links .table > div:nth-of-type(2) {
        padding-top: 20px;
    }
    #quick-links h3 {
        margin-bottom: 5px;
    }
    .contact .stack,
    .location-list .office,
    .col.details > div:nth-of-type(odd),
    .location-list .contentwrap > div:nth-of-type(odd),
    .col.details > div:nth-of-type(even),
    .location-list .contentwrap > div:nth-of-type(even){
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }
    .contact .stack {
        padding: 0;
    }
/** events **/
    .event {
        width: 100%;
        height: auto;
    }
    .event .wrap {
        padding-bottom: 50px;
    }
/** footer **/
    #quick-links .contentwrap {
        padding: 20px 30px;
    }
    #quick-links .table,
    #quick-links .col {
        display: block;
    }
    footer .top .contentwrap {
        padding-bottom: 20px;
    }
    footer .col.browse {
        display: block;
        text-align: center;
        width: 100%;
    }
    footer .col.site-map {
        display: none;
    }
}

@media only screen and (max-width: 600px){
/** header **/
    a.logo {
        height: 50%;
        padding-right: 30px;
        box-sizing: border-box;
        margin-left: -30px; /* centers the logo text */
    }
/** stack product/category squares too **/
    #square-grid .contentwrap > div {
        width: 500px;
        max-width: 100%;
    }
}

@media only screen and (max-width: 500px){
/** header **/
    #top-banner .fallback,
    #top-banner .page-graphic,
    .banners-home .banner {
        padding-top: 200px;
    }
    #mobile-menu {
        top: 10px;
        right: 10px;
    }
/** gallery style **/
    .kmsgallery.display-default .kmsgallery-thumbnail-image {
        width: 48%;
        padding-top: 48%;
    }
/** home **/
    .featured .sub {
        width: 100%;
    }
/** products **/
    .scroll-wrap {
        display: none;
    }
/** yards **/
    #yard-grid .contentwrap > div {
        width: 98%;
    }
/* related content */
    a.related,
    a.related:nth-of-type(2),
    a.related:nth-of-type(5),
    a.related:nth-of-type(7) {
        width: 100%;
        min-height: 150px;
    }
}

@media only screen and (max-width: 300px){
    header .contentwrap.top {
        padding-top: 40px;
    }
    a.logo {
        padding-right: 0px;
    }
    header .button,
    footer .button,
    footer .dealer-login .button.blue-button > a,
    button {
        width: 100%;
        min-width: 0px;
        padding: 10px 5px;
    }
    .dealer-login,
    .dealer-menu li {
        display: block;
    }
    .form-group {
        flex-grow: 1;
        margin: 5px 0px;
    }
    .login-wrap label.error {
        position: static;
    }
    .login-wrap button.green-button {
        width: 100%;
    }
}

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

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

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

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

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

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

    thead {
        display: table-header-group;
    }

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

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

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

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