@charset "utf-8";
/*Author: Vicki Pearson
New style sheet for Inlon
*/

/*Design comments
Please don't change order of rules applying to screen sizes as the wrong styles will overwrite
*/

/*Use these to target specific width screens - at present only using 2 to target smnartphones and desktops
@media (min-width:481px) and (min-width:641px){ /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */

@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
}
@media (max-width:959px) { /* big landscape tablets, laptops, and desktops */
}
/*Reset margins and paddings to zero to account for browsers having different defaults*/
html
{
	overflow-y: scroll;
}

html, body
{
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', Helvetica, Arial, sans-serif !important;

	height: 100%; /*for sticky footer*/
}
/*General pages styles*/
body
{
	color: black;

	font-weight: 300;
	font-size: 1.15em;
	line-height: 1.4;
	height: 100%;

}
h1, h2, h3, h4, h5, h6
{
	line-height: 1;
	font-weight: 300;
	/*color: #77C7AC;*/
	color: #5982c3;
	margin: 5px 0px;
}
h2
{
	font-size: 1.5em;
}
h3
{
	font-size: 1.17em;
}
h2:before, h3:before
{
  display: block;
  content: " ";
  margin-top: -50px;
  height: 50px;
  visibility: hidden;
}

a
{
	text-decoration: none;
	font-weight: 400;
	color: #4200FF;
	color: blue;
}
/*a:visited
{
	color: #3A3AC9;
}*/
a:hover
{
	/*color: #3c3c3c;*/
	text-decoration: underline;
}

p a
{
	text-decoration:underline;
}
p a.btn
{
	text-decoration: none;
}

strong {
	font-weight: bold;
}
/*Layout styles*/
#wrapper
{
	width: 90%;
	margin:0 auto;
	min-height: 100%; /*for sticky footer*/

}
#content
{
	background-color: #fff;
	width: 67%;
	max-width:1900px;
	margin:0 auto;
	padding-top: 150px;

	padding-bottom: 80px;
	overflow:hidden;
}

.brandLogo,
#content > a > img:first-child {
	max-width: 230px;
}

header {
	width: 100%;
	/*overflow:hidden;*/
	position: fixed;
	top: -20px;
	left: 0;
	z-index: 9;

	background-repeat: repeat-x;

	-webkit-transition: height 0.3s;
	-moz-transition: height 0.3s;
	-ms-transition: height 0.3s;
	-o-transition: height 0.3s;
	transition: height 0.3s;
}

header #logo {
	margin: 0 0 0 3px;

	background-position: 50% 0%;
	background-repeat: no-repeat;

	line-height: 55px;
	font-size: 55px;

	z-index: 5;
}

header nav {
	position:absolute;
	top:20px;
	right:0px;
}

header nav a {
	font-size: .875em;
	color: #fcfcfc;
	/*line-height: 20px;*/
}


header nav a, footer nav a {
	/*border-right: 1px solid #828282;*/
	border-radius: 2px;
}
header nav a:last-child, footer nav a:last-child {
	border-right:0;
}

ul.horizontalMenu {
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}

.horizontalMenu li {
	display: inline-block;
	list-style-type: none;
	margin:0;
	padding:0;
}

.horizontalMenu i {/*When hovering, the con turns dark*/
	color:white !important
}

ol.uppercaseList {
	list-style-type: upper-alpha;
}

footer
{
	/*background-color: #3c3c3c;/*Darker grey for the footer ORIGINAL*/
	background-color: grey;
	text-align: center;
	height: 93px; /*was 50px before copyright*/
	margin-top: -103px; /*For sticky footer must equal size of footer*/
	color: #bababa;
	width: 100%;
	position: relative;
	clear: both;
	font-weight: 300;/*Font styles here instead of for a tag, so that the copyright text is the same size*/
	font-size: .875em;
}

footer nav a
{
	-webkit-transition: background-color 0.1s;
	-moz-transition: background-color 0.1s;
	-ms-transition: background-color 0.1s;
	-o-transition: background-color 0.1s;
	transition: background-color 0.1s;

	line-height: 20px;
	text-align:center;
	color: #fcfcfc;
	/*font-weight: 300;
	font-size: .875em;*/
	padding:0 3px;
}

header nav a, footer nav a {
	/*background-color: #666;*/
	background-color: #6D6D6D;
	font-weight: 300;
}

header nav a:hover, footer nav a:hover
{
	color:white;
	background-color:#333;
	text-decoration: none;
}

footer .footerMenu {
	margin:3px 0;
	border-radius: 3px;
}

footer nav div.sm_bar {
	display:inline;
	margin:0 !important;
	padding:0 2px !important;
}
footer nav span{
	margin-bottom: 4px;
}

footer .horizontalMenu {
	justify-content: center;
}

.horizTextMenu, .horizIconMenu, .footerMenu {
	display:inline-block;
	/*background-color: #666;*/
}

footer div.fb-like > span {
	height: 24px !important;
	margin-bottom: 0px;
}

.centerClass
{
	text-align: center;
}
.centerClass img
{
	display: block;
	margin: 0 auto;
	padding:0 !important;
}

img.centerClass
{
	display: block;
	margin: 0 auto;
}

nav a:visited
{
	color: white;
}

.highlight
{
	color: #353B8F;
	font-weight: bold;
}

.rightLink
{
	/*color: #353B8F !important;*/
	color: #0072c6;
	line-height: 1em;
	/*font-size:1.16em;*/
	font-size: 1.08em;
}

.rightJustify {
	float: right;
}
.leftJustify {
	float: left;
}

.fas.fa-balance-scale-left, .fas.fa-balance-scale-left:hover{
	font-size: 2em;
	padding-right: 10px;
	text-decoration: none;
	vertical-align:middle;
}

.carousel {
	width: 230px;
	height: 200px;
}

.carousel-inner, .carousel-item, .carousel img, .carousel-image {
	height: 100%;
}

.carousel img {
	max-height: 100%;
	object-fit: contain;
}

.carousel-image {
	display: flex;
	vertical-align: middle;
}

small {
	color: #333;
	font-weight: 100;
}

.mobPhone ul{
  /* positioning */
  	position:relative;
      z-index:1000;
  /* remove the dots next to list items: */
      list-style:none;
  /* get rid of any default or inherited margins and padding: */
      margin:0;
      padding:0;
  }

  /* we're using the direct descendant selectors > to ONLY affect the main menu items */
  .mobPhone > ul > li {
  /* positioning */
      position: relative;
			margin:0;
  }
  .mobPhone > ul > li > a {
  /* positioning */
      display:block;
  /* styling: */
  }

  .mobPhone ul ul{
      width:100px; /* you need a width to accommodate tertiary menus */

      position:absolute;
      z-index:100;

      height: 0;
      overflow: hidden;

      -webkit-transition: height 0.3s ease-in;
      -moz-transition: height 0.3s ease-in;
      -o-transition: height 0.3s ease-in;
      -ms-transition: height 0.3s ease-in;
      transition: height 0.3s ease-in;
  }

  /* don't display tertiary box yet */
  .mobPhone > ul > li:hover ul ul, .mobPhone > ul > li > a:hover ul ul{
      height:0;

  }

  .mobPhone > ul > li:hover ul, .mobPhone > ul > li > a:hover ul,
  .mobPhone ul ul li:hover > ul, .mobPhone ul ul li a:hover > ul{
      height:100px; /* need a height to accommodate any tertiary menus */
  }

  /* drop-down item styles */
  /* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".mobPhone ul ul li", becomes: ".mobPhone ul ul ul li" */

  .mobPhone ul ul li{
      width:100%;
			margin:0;
			display: inline;
  }

  .mobPhone ul ul li:hover {
      background-color:#999; /* grey */
  }

	/* dropdown menu hyperlink */
  .mobPhone ul ul li a {
      display:block;
			padding: 5px;
  }
  .mobPhone ul ul li a:hover, .mobPhone ul ul li:hover > a {
      color:#ffffff; /* white */
  }

  .mobPhone ul ul li + li a{
      border-top:1px dotted #999;
  }
  .mobPhone ul ul li:hover + li a{
      border-top:1px solid #eaeaea;
  }
  .mobPhone ul ul ul li:hover + li{
      border-top:1px solid #999 !important;
  }

@media (min-width:320px) and (max-width:949px)
{ /* smartphones, iPhone, portrait 480x320 phones */

	header {
		height: 100px;

		/*background-image: url(/images/headerBackSmall.png);*/
		background: linear-gradient(180deg, #828282 85px, rgba(255, 255, 255, 0) 0%);
		z-index: 99;
	}
	header #logo {

		height: 98px;
		width: 100px;
		background-image: url(/images/LogoL.png);
		background-size: 100px;
		background-position: 0 12px;
		margin-left: 1px;
		/*height: 100px;*/
		/*margin: 0;*/
		/*margin: 0 auto;*/
		/*margin-left: 10px;*/
		/*min-width:180px;*/
	}
	header nav {
		/*text-align: center;*/
		/*width: calc(100% - 103px);*/
		/*width: 190px;*/
		left: 103px;
		right: 40px;
		top: 5px;
	}

	ul.horizontalMenu a
	{
		/*margin: 1px 5px;*/
		padding: 3px 6px;
		background-color: #666;
	}

	header ul.horizontalMenu {
		margin: 13px 0px 0px;
	}

	header .horizontalMenu li.icon,
	header .horizontalMenu li.text {
		margin: 3px 3px 2px;
	}

	.horizontalMenu .icon {
		margin: 0px 6px;
	}

	.horizontalMenu .icon a {
		padding-left: 10px;
		padding-right: 10px;
		display: inline;
	}

	/*.horizTextMenu {
		background-color: transparent;
		width: 500px;
	}*/


	/*header nav a:nth-child(3):after {
		content:"\a";
    	white-space: pre;
	}*/

	/*header nav a:hover
	{
		color: #00C;
	}*/

	#topPhoneNumber div {
		display:none;
	}

	.phoneSales {
		right:20px;
	}
	.phonePartsService {
		left:20px;
	}

	.phoneHover {
		position:fixed;
		bottom:20px;
		z-index:599;
		/*overflow:hidden;
		-webkit-overflow-scrolling:touch;*/
		/*transform:translate3d(0,0,0);*/

		background-color:#5982c3;
		color:white;

		/*width:58px;*/
		height:30px;
		padding-left:10px;
		padding-right:10px;
		border-radius:15px;

		text-align:center;
		vertical-align:middle;
		line-height:0px;

		-webkit-box-shadow: 4px 4px 10px -5px rgba(0,0,0,0.85);
		-moz-box-shadow: 4px 4px 10px -5px rgba(0,0,0,0.85);
		box-shadow: 4px 4px 10px -5px rgba(0,0,0,0.85);
	}
	.phoneHover:hover {
		color: white;
		text-decoration: none;
	}

	footer {
		/*height: 120px;	This was for when there was freecall text in footer*/
		margin-top:-80px;
		z-index:999;
	}

	footer .mobileOnly
	{
		visibility:visible;
		height:auto;
		line-height:1;
	}

	footer .mobileOnly a {
		color: white;
	}

	footer .footerMenu {
		/*margin: 1px 0;*/
		border-radius: 3px;
	}

	footer nav, footer div{
		/*padding-top: 8px;*/
		margin-top:8px
	}

	footer nav:first-child {
		padding-top:8px
	}

	footer .horizontalMenu li {
		margin: 0px 3px;
	}

	footer .horizontalMenu a {
		padding: 5px;
	}

	footer nav:last-child {
		margin-bottom: 3px;
	}

	footer:not(nav)
	{
		font-size: 0.7em;
	}

	footer .copyright
	{
		font-size: 0.65em;
	}

	#leftBar
	{
		display: none;
	}
	#rightBar
	{
		display: none;
	}

	.display-rightBar-mobile {
		display:block;
		position: sticky;
		top: 0;
		top: 80px;

		padding-left: 20px;
		padding-right: 20px;
		color: black;
		margin-bottom: 70px;
		border-top: 4px solid #CCC;
	}
	#rightBar ul{
		padding:0;
		margin:0;
	}
	#rightBar li{
		list-style-type:none;
	}
	#rightBar img
	{
		max-width:230px;
	}
	#rightBar li {
		width: 100%;
		border-top: 1px solid #CCC;
		padding: 10px 0px;
	}
	#rightBar li:first-child {
		border-top: none;
	}
	#rightBar li:last-child {
		border-bottom: 1px solid #CCC;
	}

	#rightBar figure {
		margin: 0;
	}
	#rightBar figure img {
		width: auto;
	}
	#rightBar .navbar-youtube {
		width: 100%;
	}
	#rightBar .navbar-facebook {
		display: block;
		text-align: center;
		max-height: 400px;
	}

	img.floatRight
	{
		display: none;
	}
	#wrapper
	{
		width: 98% !important;
	}
	/*To use entire width of screen, as this is precious on phones.*/
	#content
	{
		margin: 0 auto;
		width: 98%;
		padding-top: 80px;
		/*padding-top: 130px;*/
		top: 0px;
		right: 0px;
	}/**/

	.slicknav_menu {
		overflow: auto;
		max-height: 80vh;
	}

}

@media (min-width:950px)
{ /* hi-res laptops and desktops */
	/*950px*/
	header
	{
		height: 160px;
		padding: 0;
		/*background-image: url(/images/headerBack2.png);*/
		background: linear-gradient(180deg, #828282 128px, rgba(255, 255, 255, 0) 0%);
	}

	header #logo
	{
		display: inline-block;
		height: 152px;
		width:230px;

		background-image: url(/images/LogoL.png);

		margin-left: calc(19.5% - 250px);
	}
	.horizontalMenu {
		margin:0;
	}
	.horizontalMenu li {
		margin: 0 3px;
	}

	header nav
	{
		width:calc(27% + 336px);
		min-width: 340px;
		margin:30px 0 0;

	}
	header nav a
	{
		float:left;
		padding: 8px 8px;

		border-radius: 5px;
	}

	header nav a, footer nav a
	{
		-webkit-transition: background-color 0.3s;
		-moz-transition: background-color 0.3s;
		-ms-transition: background-color 0.3s;
		-o-transition: background-color 0.3s;
		transition: background-color 0.3s;
	}

	header nav a:hover, footer nav a:hover
	{
		color:white;
		background-color:#333;
	}
	header.smaller
	{
		z-index: 10;
		height:95px;
		background: linear-gradient(180deg, #888 60px, rgba(255, 255, 255, 0) 0%);
	}
	header.smaller #logo
	{
		height: 100%;
		line-height: 55px;
		font-size: 55px;
		background-image: url(/images/newLogoSm.png);
	}

	*, *:before, *:after
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	header.smaller #logo
	{
		line-height: 50px;
		font-size: 30px;
	}

	header.smaller nav {
		margin-top:0px;
	}

	.mobPhone ul ul {
		top: 40px;
	}

	.phoneWrapper {
		display:inline-block;
		position: relative;
	}

	footer #topPhoneNumber:hover div {
		bottom:10px;
		top:auto;
	}

	footer .mobileOnly
	{
		visibility:hidden;
		height: 0px;
	}

	footer .horizontalMenu {
		padding-top: 10px;
		margin: 10px 0px;
	}

	footer .horizontalMenu a {
		padding: 3px 6px;
	}

	footer nav:nth-child(2) div:nth-child(1) {/*Like button*/
		width: 52px !important;
		min-width: 52px;
		max-width: 52px;
	}
	footer nav:nth-child(2) div:nth-child(2) {/*Share button*/
		width: 60px !important;
	}
	footer nav:nth-child(2) div:nth-child(3) {/*Follow button*/
		width: 63px;
	}
	footer nav:nth-child(2) div:nth-child(4) {/*Tweet button*/
		width: 124px;
	}

	/*footer
	{
		font-size:0.875em;
	}
	footer nav:not(a)
	{
		font-size: 0.875em;
	}*/
	#leftBar, #rightBar
	{
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		top: 80px;
		margin-bottom:100px;
	}

	#leftBar
	{
		width: 16%;
		float: left;
		margin-top: 160px;
		display: inline;
		padding-right: 20px;
		z-index: 9;
	}
	#leftBar a
	{
		color: black;
	}

	/****LEFT BAR SUB-MENUS****/
	/**-->*/
	/* We remove the margin, padding, and list style of UL and LI components */
	#leftMenu a
	{
		width: 100%;
	}

	#leftMenu ul, #leftMenu ul li{
		margin:0;
		padding:0;
		list-style:none;
		float:right;
	}

	/* We apply background color and border bottom white and width to (150px) 230px */
	#leftMenu ul li{
		background-color:grey;
		border-bottom:solid 1px white;
		width:230px;
		border-top: 1px solid gray;
		text-align: left;
		border-left: 1em solid #0072c6;
		/**/border-left: 1em solid #6493BC;/**/
	}

	#leftMenu ul li:last-child
	{
		border-bottom: 1px solid gray;
	}

	/* We apply the background hover color when user hover the mouse over of the li component */
	#leftMenu ul li:hover{
		background-color:black;
		position:relative;
		border-color: #0072c6;
	}
	#leftMenu ul li.navBreak:hover{
		background-color:#AAB;
		background-color:#6493BC;
		position:relative;
		border-color:#AAB;
		border-top: 1px solid gray;
		border-left: 1em solid #6493BC;
		border-bottom: 1px solid white;
	}

	/* We apply the link style */
	#leftMenu ul li a{
		padding:2px 5px;
		color:#ffffff;
		display:inline-block;
		text-decoration:none;
		font-size:14px;
		font-weight: 300;
	}

	/**** SECOND LEVEL MENU ****/
	/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
	#leftMenu ul li ul{
		position:absolute;
		display:none;
	}

	/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
	#leftMenu ul li:hover ul{
		left:210px;
		top:0px;
		display:block;
	}

	/**** THIRD LEVEL MENU ****/
	/* We need to hide the 3rd menu, when hovering the first level menu */
	#leftMenu ul li:hover ul li ul{
		position:absolute;
		display:none;
	}

	/* We show the third level menu only when they hover the second level menu parent */
	#leftMenu ul li:hover ul li:hover ul{
		display:block;
		left:150px;
		top:0;
	}

	#leftBar .navBreak
	{
		height: 5px;
		background-color: #AAAABB;
		background-color: #6493BC;
	}
	/*<--*/

	#rightBar
	{
		width: 14%;
		float: right;
		margin-top: 155px;
		padding-right: 10px;
		color: black;
		display: inline;

	}
	#rightBar ul{
		padding:0;
		margin:0;
	}
	#rightBar li{
		list-style-type:none;
	}
	#rightBar img
	{
		max-width:230px /*!important*/;
	}
	#rightBar li {
		width: 230px;
		border-top: 1px solid #CCC;
		padding: 10px 0px;
	}
	#rightBar li:last-child {
		border-bottom: 1px solid #CCC;
	}

	#rightBar figure {
		margin: 0;
	}
	#rightBar figure img {
		width: auto;

	}
	#rightBar .navbar-youtube {
		width: 230px;
	}
	#rightBar .navbar-facebook {
		width: 230px;
	}

	#navList
	{
		padding: 0 1px 1px;
		margin-left: 0;
		font: bold 12px 'Segoe UI', sans-serif;
		background: gray;
		width: 14em;
		float: right;
	}
	#navList li
	{
		list-style: none;
		margin: 0;
		border-top: 1px solid gray;
		text-align: left;
	}
	#navList li a
	{
		display: block;
		padding: 0.25em 0.5em 0.25em 0.75em;
		border-left: 1em solid #AAB;
		background: #CCD;
		text-decoration: none;
	}
	#navList li a:hover
	{
		border-color: #00C;
		color: #FFF;
		background: #332;
	}
	/*Now in bottom of css*/
	/*img
	{
		max-width: none;
		height: auto;
	}*/
	img.floatRight
	{
		display: block;
		float: right;
		/*height: 100%;*/
		height:auto;
		padding: 10px 0px;

	}
	/*To use entire width of screen, as this is precious on phones.*/
	#content
	{
		width:67%;
		/*max-width:750px;*/
		margin:0 auto;
		/*padding-top: 150px;
		padding-bottom: 80px;*/
		padding: 150px 0px 103px 5px;
	}/**/

}

@media(max-width: 1310px) {
	#wrapper {
		width: 70%;
	}

	header #logo {
		margin-left: calc(26.2% - 250px);
	}
}

/*Mobile Menu*/
.slicknav_menu
{
	display:none;
}

/*@media screen and (max-width: 40em)*/
@media screen and (max-width: 950px)
{
	header #logo {
		margin-left: 1px;
	}

	.js #menu
	{
			display:none;
	}
	.js .slicknav_menu
	{
			display:block;
	}
}

#menuPosition /*This is to hook the mobile menu to */
{
	position:fixed;
	/*top:80px;
	left:10px;*/
	top:20px;
	right:0px;
	z-index:9999;
}
img
{
	max-width: 100%;
	height: auto;
}