/*
Title: "RighterTrack" screen styles
Date Modified: 4/18/2022
--
Author: Fervr Design
Contact: http://FervrDesign.com/contact
--
Table of Contents:
	layout
	typography
	navigation
	alignment
*/

/* layout
------------------------------------- */


/* fix box model */
*, *:before, *:after {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}


html, body {
	margin: 0;
	padding: 0;
	}

body {
	color: #000;
	font: normal 14px/1.4em 'lucida sans', 'lucida grande', 'lucida sans unicode', verdana, sans-serif;
	}



/* 12 column grid */	
.section {
	clear: both;
	margin: 0;
	padding: 0;
	}

.column {
	position: relative;
	width: 25%;
	
	float: left;
	margin: 0;
	padding: 0;
	
	/* for testing */
	/* background-color: rgba(50,50,50,0.05); */
	}

.column-content {
	position: relative;
	padding: 15px;
}

.column {
	width: 8.33%;
	}

.column.span2 {
	width: 16.66%;
	}

.column.span3 {
	width: 24.99%;
	}
	
.column.span4 {
	width: 33.32%;
	}
	
.column.span5 {
	width: 41.65%;
	}
	
.column.span6 {
	width: 49.98%;
	}
	
.column.span7 {
	width: 58.31%;
	}
	
.column.span8 {
	width: 66.64%;
	}
	
.column.span9 {
	width: 74.97%;
	}
	
.column.span10 {
	width: 83.3%;
	}
	
.column.span11 {
	width: 91.63%;
	}
	
.column.span12 {
	width: 99.96%;
	}


/* ----- header ----- */
#main-header {
	border: 1px solid #fff;
    border-top: 1px solid #fff;
    border-radius: 0 0 5px 5px;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
    background-color: #fff;
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #ececec), color-stop(1, #fff) );
    background-image: -o-linear-gradient(bottom, #ececec 0%, #fff 90%);
    background-image: -moz-linear-gradient(bottom, #ececec 0%, #fff 90%);
    background-image: -webkit-linear-gradient(bottom, #ececec 0%, #fff 90%);
    background-image: -ms-linear-gradient(bottom, #ececec 0%, #fff 90%);
    background-image: linear-gradient(to bottom, #ececec 0%, #fff 90%);
	}

#tagline {
	position: absolute;
	top: 30px;
	right: 50px;
	}

#tagline p {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 22px;
	color: #2d5554;
	width: 346px;
	height: 39px; 
	border: none;
	text-align: right;
	text-decoration: none;
	text-shadow: 0 1px 1px #fff;
	}

#phone-nav {
	position: absolute;
	bottom: 25px;
	right: 50px;
	font-weight: bold;
	font-size: 16px;
	}


/* ----- main content ----- */
.container {
	max-width: 1200px;
	}

#main-content {
	padding-top: 75px;

	background: #122022;  /* #23AE99 */ /* fallback for old browsers */
	/* background-image: linear-gradient(134deg, #41757e 0%, #6D9AD7 100%); */
	background-image: linear-gradient(134deg, #122022 0%, #353f4c 100%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	}

[class*="col-"] {
	transition: all .2s ease;
	}



#products-overview {
	position: relative;
	box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
	border-radius: 5px;
	background: #fff;
	}


.featured-category a {
	text-decoration: none;
	}
	
.featured-category a h2 {
	font-size: 24px;
	line-height: 1.2;

	text-decoration: none;
	color: #333;
	}
	
.featured-category p {
		margin-top: 1.2em;
	}
	

.featured-item-sm {
	position: relative;	
	overflow: hidden;
	transition: all .2s ease;
	}

.featured-item-sm img {	
	transition: all .2s ease;
	}

.featured-item-sm:hover img {	
	transform: scale(1.1);

	-webkit-filter: brightness(.65);
	filter: brightness(.65); /* brightness(.65) */
	}

.video {
	display: block;
	position: relative;
	}
	
.video:before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -26px;
    margin-left: -26px;
    opacity: 1;
    color: #fff;
    font-size: 52px;
    font-family: 'FontAwesome';
    content: '\f144';
    line-height: 52px;
    text-align: center;
    text-shadow: 1px 1px 15px rgba(0,0,0,.5);
    pointer-events: none;
    z-index: 1;
    transition: 0.4s;
	}

.video:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .25;
    background-color: rgba(0, 0, 0, 0.7);
    content: '';
    transition: 0.4s;
	}
	
	
#featured-partner a {
	display: block;
	color: #333;
	text-decoration: none;
	}


@media (min-width: 768px) {
	.carousel-inner {
		border-radius: 5px 0 0 5px;
	}
	
	
	.hero-featured {
		box-shadow: 1px 2px 4px rgba(0,0,0,0.15), 
					1px 15px 150px rgba(75,200,255,0.5);
	}
	
	
	.hero-featured-aside > .row {
		overflow: hidden;
		border-radius: 0 5px 5px 0;
	}
	
	
	#products-overview {
		margin-top: 50px !important;
		position: relative;
		background: none;
		box-shadow: none;
	}
	
	.featured-category .col-content {
		margin: 0;
		padding: 0;
		
		box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
		border-radius: 5px;
		background: #fff;
	}
	
	
	.featured-category figure {
		position: absolute;
		display: block;
		top: -50px;
		left: 0;
		right: 0;
		background-color: #fff;
		background-image: linear-gradient(to top, #ececec 0%, #fff 90%);
		background-position: center;
		background-repeat: none;
		background-size: cover;
		border-radius: 250px;
		padding: 25px 0 0;
		margin: 0 auto;
		width: 250px;
		height: 250px;
		text-align: center;
   		box-shadow: 1px 2px 4px rgba(0,0,0,0.15),
   					1px 0px 30px rgba(0,0,0,0.15);
   		overflow: hidden;
   		transition: all .2s ease-in-out; 
   	}
   		
	.featured-category a:hover figure {
   		transform: scale(1.05);
	}

	.featured-category a figure img {	
		transition: all .2s ease-in-out; 
	}
	
	.featured-category a:hover figure img {
		-webkit-filter: brightness(1.25);
		filter: brightness(1.25); /* brightness(.65) */
	}
	
	.featured-category h2 {
		padding-top: 220px;
	}
	
	.featured-category h2, 
	.featured-category p {
		margin: 0 auto;
		text-align: left;
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.featured-category p {
		margin-top: 1.2em;
		padding-bottom: 30px; 
	}
	
	
}



	

.carousel-caption {
    bottom: 0;
    right: auto;
    left: 0;
    width: 100%;
    padding: 20px 0 60px;
    color: #fff;
	background-image: linear-gradient(to top, #000 0%, rgba(255,255,255,0) 90%);
	background-position: center;
	background-repeat: none;
	background-size: cover;
	border-radius: 0 5px 5px 0;
	}
	
.carousel-caption h1 {
	margin-top: 2em;
	margin-bottom: .5em;
	font-size: 32px;
}
	
	

/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}










#sidebar {
	display: none;
	}


#nicelabel-feature {
    background: #fff url(/images/backgrounds/main-gradient.jpg) left top repeat-x;
    border: 3px solid #fff;
    border-radius: 15px;
    margin: 0 auto;
    padding: 15px 25px;
	}

#nicelabel-feature, 
#nicelabel-feature li, 
#nicelabel-feature p {
	font-family: helvetica, arial, sans-serif;
	color: #002c59;
	}

#nicelabel-feature a, 
#nicelabel-feature a:hover {
	text-decoration: none;
	}

#nicelabel-feature h2 {
	margin: 0;
	font-family: helvetica, arial, sans-serif;
	font-size: 20px;
	border: none;
	color: #002c59;
	}

#nicelabel-feature .button {
	background: #002c59;
	text-align: center;
	padding: 5px;
	width: auto;
	max-width: 150px;
	height: auto;
	font-size: 14px;
	font-weight: normal;
	margin: 15px auto;
	}
	
#nicelabel-feature a:hover button {	
	background: #16a75d;
	}



/* ----- footer ----- */	
.footer_nav ul {
	text-align: center;
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 0;
	margin-top: 0;
	/* cancels gap caused by top padding in Opera 7.54 */
	margin-left: 0;
	background: none; 
	color: #333;
	width: 100%;
	font-family: Arial,Helvetica,sans-serif;
	line-height: 18px;
	/* fixes Firefox 0.9.3 */
	}

.footer_nav ul li {
	display: inline;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 5px;
	/* matches link padding except for left and right */
	padding-top: 5px;
	}

.footer_nav ul li a {
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-top: 5px;
	color: #333;
	text-decoration: none;
	border-right: 1px solid #DBDBDB;
	}

.footer_nav ul li a:hover {
	background: none;
	color: #000;
	}

.footer_nav ul li a.last { border-right: none; }
	
#footer p {
	clear: both;
	}





/* helpers */

.full-width {
	width: 100%;
	}
	
.min-height-200 {
	min-height: 200px;
	}

.bg-gradient-green-blue {
    background: #23AE99;
    background-image: linear-gradient(134deg, #23AE99 0%, #6D9AD7 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	}

.bg-gradient {
	background: #fff;	
	background-image: linear-gradient(to top, #ececec 0%, #fff 90%);
	background-position: center;
	background-repeat: none;
	background-size: cover;
	}
	
.bg-light-tint {
	background: rgba(235,243,246,0.5);
	}


/* section */
.section-shadow {
    box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
	}
	
.section-rounded {
	border-radius: 5px;
	}

.col-content {
	padding: 10px 15px;
	}




/* typography
------------------------------------- */
body {
    font: normal 16px/1.3em "Arimo", "PT Sans Narrow", "helvetica neue", helvetica, arial, sans-serif;
    font-weight: 400;
    color: #333;
	}
	
h1, h2, h3, h4, 
.h1, .h2, .h3, .h4 { 
	font-family: "PT Sans Narrow", "helvetica neue", helvetica, arial, sans-serif;
    font-weight: 400;
    line-height: 1;
	}
	
h1 {

	}
	
h2 {

	}

.caption {
	text-align: left;
	line-height: 1.5em;
	font-size: x-small;
	}

.alert {
	color: #C00;
	}
	
.alert .field {
border: 1px solid #C00;
background: #ffc;
}

.small {
	font-size: 90%;
	line-height: 1.3em;
	}
	
abbr, acronym {
	font-style: italic;
	cursor: help;
	}

/* navigation
------------------------------------- */
/*
a {
	color: #417e7d;
	text-decoration: none
	}

a:link {
	color: #417e7d;
	text-decoration: none
	}

a:hover  {
	color: #4c918e;
	text-decoration: underline
	}
*/

a:not('.button'), 
a:link {
	color: #417e7d;
	text-decoration: none;
	transition: all .2s ease;
	}

a:hover  {
	color: #6ab1a4;
	}


.button {
	width: 200px;
	height: 50px;
	padding: 5px 10px;
	background-color: rgb(89,175,165);
	font-size: 18px;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	border: 1px solid rgb(47,99,94);
	border-top: 1px solid rgb(117,227,215);
	border-top-color: rgb(117,227,215);
	border-left-color: rgb(117,227,215);
	border-radius: 5px;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
	}

.button:hover {
	background-color: rgb(115,200,188);
	}
	
.button.btn-gradient {
    background: #23AE99;
    background-image: linear-gradient(134deg, #23AE99 0%, #6D9AD7 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding: 5px;
    width: auto;
    max-width: 150px;
    height: auto;
    font-size: 14px;
    font-weight: normal;
    margin: 10px auto 0;
}

/* ----- misc ----- */
.hide {
	display: none;
	}

.show {
	display: block;
	}

.payment-methods {
	width: 228px;
	margin: 25px auto;
	padding: 0;
	list-style-type: none;
	overflow: hidden;
	}

.payment-methods li {
	float: left;
	width: 51px;
	margin: 0 3px;
	padding: 0;
	}





.social-networks {
	z-index: 100; 
	position: absolute; 
	top: -75px; /* 215px; */
	right: 260px; /* 70px; */
	list-style-type: none;
	overflow: hidden;
	margin: 15px auto;
	padding: 0;
	}

#main .social-networks {
	position: static;
	}

.social-networks li {
	float: left;
	margin: 0 10px 0 0;
	padding: 0;
	}

.social-networks a {
	background: url(/images/icons/social-icons-sprite.png) 0 0 no-repeat;
	width: 24px;
	height: 24px;
	display: block;
	text-decoration: none;
	}

a.icon-facebook {
	background-position: 0 0;
	}
a.icon-facebook:hover {
	background-position: 0 -24px;
	text-decoration: none;
	}

a.icon-twitter {
	background-position: -24px 0;
	}
a.icon-twitter:hover {
	background-position: -24px -24px;
	text-decoration: none;
	}

a.icon-linkedin {
	background-position: -48px 0;
	}
a.icon-linkedin:hover {
	background-position: -48px -24px;
	text-decoration: none;
	}

a.icon-google {
	margin-right: 0;
	background-position: -72px 0;
	}
a.icon-google:hover {
	background-position: -72px -24px;
	text-decoration: none;
	}





.social-fb {
position: absolute;
top: -15px;
left: 55px;
}

.share-social {
overflow: hidden;
position: relative;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
margin: 25px auto;
padding: 7px 5px 5px;
}

.share-social li {
float: left;
min-width: 90px;
}

#sidebar .vcard p {
font-size: 85%;
line-height: 1.5em;
}

.byline {
font-size: 16px;
color: #666666;
padding: 3px 0;
}

.article {
margin-bottom: 25px;
}

h2[itemprop~="headline"] {
    font-family: "PT Sans Narrow", "helvetica neue", helvetica, arial, sans-serif!important;
	font-size: 2.35rem!important;
    font-weight: 400!important;
    line-height: 1!important;
}

.article h3 a {
display: block;
}

.article h4 {
margin-bottom: 0;
}

.article h3+h4 {
margin-top: .5em;
}

.article p {
font-size: 1.25rem; /* 14px */
line-height: 1.3;
}

.article-image, 
.article .product-image {
background: #fff;
padding: 15px;
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
overflow: hidden;
-moz-box-shadow: 1px 1px 5px #ccc; 
-webkit-box-shadow: 1px 1px 5px #ccc; 
box-shadow: 1px 1px 5px #ccc; 
}

.article-image img, 
.article .product-image img {
text-align: center;
margin: 0 auto;
padding: 0;
}

.article-image {
	margin-bottom: 2em;
}

.article-image img {
	min-width: 100%!important;
	height: 420px!important;
	object-fit: cover!important;
}

.article .product-image {
width: 100%;
max-height: 480px;
padding: 0;
margin-bottom: 45px;
}

.lead-in, 
.article .lead-in {
font-size: 18px;
line-height: 1.3em;
color: #2d5554; /* #2d5554 */
}

/* articles listing */
#the-inside-track {
display: block;
text-indent: -99999px;
background: url(/images/logos/the-inside-track.png) left top no-repeat;
margin: 0;
padding: 132px 0 0;
width: 368px
height: 132px;
border: 0;
}

.category-desc {
z-index: 10;
position: absolute;
top: 145px;
left: 165px;
width: 475px;
font-size: 18px;
line-height: 1.3em;
color: #999;
}

.articles-list {
margin: 25px 0 15px;
display: flex;
flex-wrap: wrap;
gap: 1rem 2rem;
}

.articles-list .article {
flex: 1 1 280px; /* 280px */
background: transparent;
position: relative;
padding: 0 10px 0 0;
}

.articles-list .article h3 {
font-size: 22px;
margin-top: 0;
}

.articles-list .article a, 
.articles-list .article a:hover {
text-decoration: none;
color: #333;
}

.articles-list .article p {
font-size: 14px;
color: #999;
}

.articles-list .article:hover p {
color: #666666;
}

.articles-list .article img {
transition: all .2s ease-in-out;
}

.articles-list .article:hover img {
	transform: scale(1.05);
	filter: brightness(1.15);
}

.articles-list .article h3+p {
margin-top: 0.5em;
}

.articles-list .article-image-sm {
margin-bottom: 1rem;
padding: 0;
}

.articles-list .article-image.article-image-sm img {
text-align: center;
margin-block: auto;

height: 180px!important;
width: 100%;
object-fit: cover;
}

.articles-list .article.article-featured {
	flex: 4 100%;
position: relative;
margin-bottom: 3em;
}


.articles-list .article.article-featured a {
display: flex;
gap: 1rem 2rem;
position: relative;
}

.article.article-featured .article-summary {
	display: flex;
	flex: 1 1 280px;
	flex-wrap: wrap;
	align-content: center;
  	justify-content: flex-start;
}

.articles-list .article.article-featured h3 {
	flex: 1 1 280px;
font-size: 32px;
line-height: 1.3;
}

.articles-list .article.article-featured p {
	flex: 1 1 280px;
font-size: 18px;
line-height: 1.4e;
}

.articles-list .article.article-featured .article-image {
flex: 1 1 280px;
padding: 0;
overflow: hidden;
}

.articles-list .article.article-featured .article-image img {
	flex: 1 1 280px;
width: 100%;
height: 380px!important;
border-radius: 10px;
object-fit: cover;
padding: 0;
}



.testimonial {
background: url(/images/misc/quote.png) 15px 25px no-repeat;
padding: 25px 35px 0 95px;
margin: 25px auto;
width: 65%;
border-top: 2px solid #b9cbcb;
border-bottom: 2px solid #b9cbcb;
}

.testimonial .quote {
margin: 0;
padding: 0;
}

.testimonial .author {
text-align: right;
}



input:focus, textarea:focus { 
	background-color: #ffc; 
	}

label {
cursor: pointer;
}

.footnote {
	color: #999;
	font-size: 80%;
	}

img, a img {
	max-width: 100%;
	height: auto;
	border-width: 0;
	border: none;
	text-decoration: none;
	}

[itemprop="articleBody"] .pad-center img {
	max-width: 90%;
	height: auto;
	margin: 25px auto;
	}

.border {
	border: 1px solid #ccc;
	}

.border_btm {
	border-bottom: 1px dashed silver;
	}

.lrg_banner {
	margin: 15px auto 45px auto;
	text-align: center;
	}

.banner {
	margin: 15px auto 20px auto;
	text-align: center;
	}

.inset {
	width: 175px;
	margin: 0;
	text-align: center;
	float: right;
	}

.inset .caption {
	font-size: 80%;
	}

.no_bullet {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
	
dd {
	margin: 0;
	}

.clearFieldBlurred {
color: #ccc;
font-style: normal;
}

.clearFieldActive {
color: #ccc;
}

/* tables */
.comparison-chart {
margin: 15px auto 35px;
border-collapse: collapse;
border: 1px solid #ccc;
}

.comparison-chart th, 
.comparison-chart td {
padding: 10px;
text-align: left;
min-width: 180px;
}

.comparison-chart th {
border-collapse: collapse;
border-bottom: 1px solid #ccc;
font-size: 14px;
background: #ccc;
}

.comparison-chart td {
border-collapse: collapse;
border-bottom: 1px solid #dedede;
font-size: 12px;
line-height: 1.4em;
}

.comparison-chart.chart-2col th, 
.comparison-chart.chart-2col td {
min-width: 280px;
}

.comparison-chart .shade {
background: #f5f5f5;
}

.comparison-chart td[scope="row"] {
font-weight: bold;
font-size: 14px;
}


/* List Styles */
.no-bullet {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
	}

.list-horz {
	overflow: hidden;
	}

.list-horz li {
	float: left;
	margin-right: 15px;
	}
	
.list-horz li:last-child {
	margin-right: 0;
	}


/* alignment
------------------------------------- */
.align-left, 
.align_left {
	float: left;
	}

.pad-left, 
.pad_left {
	float: left;
	margin: 0 15px 10px 0;
	}

.align-right, 
.align_right {
	float: right;
	}

.pad-right, 
.pad_right { 
	float: right;
	margin: 0 0 10px 15px;
	}

.align-center, 
.align_center {
	text-align: center;
	margin: 0 auto;
	}

.pad-center, 
.pad_center {
	text-align: center;
	margin: 0 auto 10px auto;
	}

	
/* misc
------------------------------------- */
.hide {
	display: none;
	}

.show {
	display: block;
	}

.clear {
    clear: both;
    }
    
.required {
	color: red;
	}
	
hr {
	margin: 25px auto;
	border: none;
	border-top: 1px solid rgba(0,0,0,0.15);
	border-bottom: 1px solid rgba(255,255,255,0.75);
	}