@charset "UTF-8";
/* CSS Document */

			@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
			*{
				margin: 0;
				padding: 0;
				color: #dddddd;
			
			}
			
			body {
				font-family: "Roboto", Helvetica, Arial, sans-serif;
				font-weight: 100;
				line-height: 50px;
				background-color: #333333;
				margin: 0;
				padding: 0;
				color: #333333;
			}
			
/* ==========================================================================
   Element/tag selectors
   ========================================================================== */			
			
			ul, ol, dl { 
			/* Due to variations between browsers, it's best practices to zero padding and margin on lists. 
			For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. 
			Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
				padding: 0;
				margin: 0;
			}
			
			h1, h2, h3, h4, h5, h6, p {
				margin-top: 0;	 
			/* removing the top margin gets around an issue where margins can escape from their containing div. 
			The remaining bottom margin will hold it away from any elements that follow. */
				padding-right: 0;
				padding-left: 0; 
			/* adding the padding to the sides of the elements within the divs, instead of the divs themselves, 
			gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
				color: #333333;
			}
			
			h1 {
				font-size: 5.9vw;
				line-height: 1.5em;

			}
			
			h2 {
				font-size: 4rem;
				line-height: 1.5em;

			}

			h3 {
				font-size: 2rem;
				line-height: 1em;

			}
			
			p {
				font-size: 1.175rem;
				margin-top: 0.8em;
  				margin-bottom: 1em ;
  				line-height: 1.5em;
			}

			#TextWrap {
				padding-left: 1em ;
  				padding-right: 1em ;
			}

		/* Line Break for inline elements (span)
		--------------------------------------------------*/

			.break:after {
				  content: '\A';
				  white-space: pre;
			}


			.Para {
				float: left;
				display: block;
				width: 400px;
				height: auto;
				min-width: 320px;
				min-height: auto;
				margin-right: 25px;
				margin-top: 10px;
				margin-bottom: 10px;
				overflow: auto;
				clear: both;
			}

			.Para2 {
				float: left;
				display: block;
				width: 350px;
				height: auto;
				min-height: auto;
				margin-right: 25px;
				margin-top: 10px;
				margin-bottom: 10px;
				overflow: auto;
				clear: both;
			}


			@media screen and (max-width: 1280px) {

				.Para2 {
					width: 35%;
				}

			}

			@media screen and (max-width: 736px) {

				.Para2 {
					width: 100%;
				}

			}

			@media screen and (max-width: 320px) {

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

			}


/* ==========================================================================
   Link Styles
   ========================================================================== */

			a img { 
			/* Removes link's blue border */
				border: none;
			}

			a:link {
				color:#cd2333;
				text-decoration: none; 
			}
			a:visited {
				color: #cd2333;
				text-decoration: none;
			}
			a:hover, a:active, a:focus { 
				text-decoration: underline;
			}
			
			img {
				max-width: 100%;
				height: auto;
			}
			
/* ==========================================================================
   Layout
   ========================================================================== */

		/* Header Styles
		--------------------------------------------------*/

				.header {
					background-color: #DDDDDD;
					width: 100%;
					height: auto;
					margin: auto;
					padding-top: 3%;
					padding-bottom: 3%;
					background height: 100%;
					background width: 100%;
					background-image: url('../images/bg/bg_steel_header.jpg');
					background-position: center;
					background-repeat: no-repeat;
					background-size: cover;
				}
	
				#exce_logo	{
					display: block;
					margin-left: auto;
					margin-right: auto;
					max-width: 400px;
					max-height: auto;
					text-align: center;
					vertical-align: middle;
					filter:drop-shadow(0px 0px 5px #FFFFFF); 
				}
				
		/* Divder Styles
		--------------------------------------------------*/
				
				#divider-top	{
					background-color: #cd2333;
					margin: 0 auto;
					padding: 0 auto;
					width: 100%;
					height: 9px;
					position: relative;
				}
				
				#divider-bottom	{
					background-color: #cd2333;
					margin: 0 auto;
					padding: 0 auto;
					width: 100%;
					height: 9px;
					position: relative;
				}

		/* Navigation Styles
		--------------------------------------------------*/

				.nav_container {
					background-color: #000000;
					width: 100%;
					position: relative;
					padding: 0 auto;
				}

				.mobile-menu {
					display: block;
					width: 100%;
					background: #000000/*e0b88f/*c99393/*e5d1a4/*dcc591/*EFD3A3*/;
					line-height: 1em;
					font-weight: 400;
					text-align: center;
					position: relative;
					margin: 0 auto;
				}

			/*Strip the ul of padding and list styling*/
				.mobile-menu ul {
				  list-style-type:none;
				  margin: 0 auto;
				  padding-left:0;
				  text-align:center;
				  width:100%;
				  position: relative;
				  background: #000000;
				}


			/*Create a horizontal list with spacing*/
				.mobile-menu li {
					display:inline-block;
					/*float: left;
					margin-right: 1px;*/
				}

				.mobile-menu a.active {
				  background-color: #000000;
				  color: #cd2333;
				}
				

			/*Style for menu links*/
				.mobile-menu li a {
					display:block;
					min-width:140px;
					text-align: center;
					font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
					color: #fff;
				  text-transform:uppercase;
					background: #000000;
					text-decoration: none;
				  margin-left:-5px;
				  padding: 15px 0;  
				-webkit-transition: all 0.4s ease 0s;
				-moz-transition: all 0.4s ease 0s;
				-ms-transition: all 0.4s ease 0s;
				-o-transition: all 0.4s ease 0s;
				transition: all 0.4s ease 0s;
				}

			/*Hover state for top level links*/
				.mobile-menu li:hover a:not(.active) {
					color: #ffffff;
					background-color:#cd2333;
				}

			/*Style for dropdown links*/
				.mobile-menu li:hover ul a {
					background: #cd2333;
					color: #ffffff;
					height: 40px;
					line-height: 40px;
				}

			/*Hover state for dropdown links*/
				.mobile-menu li:hover .mobile-menu ul a:hover {
					color: #ffffff;
				}

			/*Hide dropdown links until they are needed*/
				.mobile-menu li ul {
					display: none;
				}

			/*Make dropdown links vertical*/
				.mobile-menu li ul li {
					display: block;
					float: none;
				}

			/*Prevent text wrapping*/
				.mobile-menu li ul li a {
					width: auto;
					min-width: 100px;
					padding: 0 20px;
				}


			/*Style 'show menu' label button and hide it by default*/
				.mobile-menu .show-menu {
					text-decoration: none;
					color: #ffffff;
					background: #000000;
					font-weight: 700;
					text-align: center;
					vertical-align: middle;
					padding: 10px 15px 20px;
					display: none;
					cursor: pointer;
					text-transform: uppercase;
				}

				.mobile-menu .show-menu span{
				   padding-left: 25px;
				}

			/*Hide checkbox*/
				.mobile-menu input[type=checkbox]{
					display: none;
				}

			/*Show menu when invisible checkbox is checked*/
				.mobile-menu input[type=checkbox]:checked ~ #menu{
					display: block;
				}

			/*Responsive Styles*/

				@media screen and (max-width : 800px){
				  .mobile-menu .lines {
					border-bottom: 15px double #cd2333; 
					border-top: 5px solid #cd2333; 
					content:"";
					height: 5px; 
					width: 15px;
					padding-right: 15px;
					float: right;
				}
				/*Make dropdown links appear inline*/
					.mobile-menu ul {
						position: static;
						display: none;
					}
				/*Create vertical spacing*/
					.mobile-menu li {
						margin-bottom: 1px;
					}
				/*Make all menu links full width*/
					.mobile-menu ul li, .mobile-menu li a {
						width: 100%;
					}
				/*Display 'show menu' link*/
					.mobile-menu .show-menu {
						display: block;
					}
				}


/* ==========================================================================
   Splash Banners
   ========================================================================== */

		/* Banner Styles
		--------------------------------------------------*/

				.splash-home {
					background-color: #4c1315;
					background: url('../images/banners/exeq_home_banner.jpg') top left no-repeat;
					background-position: center;
					background-repeat: no-repeat;
					background-size: cover;
					width: 100%;
					height: auto;
					max-height: 420px;
					border-bottom: 5px;
					border-bottom-color: #CCCCCC;
					clear: both;
					position: relative;
				}
				

				.splash-general {
					background-color: #4c1315;
					background: url('../images/banners/exeq_general_banner.jpg') top left no-repeat;
					background-repeat: no-repeat;
					background-size: cover;
					position: relative;
					width: 100%;
					height: auto;
					border-bottom: 5px;
					border-bottom-color: #CCCCCC;
					clear: both;
				}
				
		/* Banner Content
		--------------------------------------------------*/
		
				.sphead {
					color: #FFFFFF;
					text-align: center;
					position: relative;
					top: 1.5rem; 
					font-size: 3.5rem;
					line-height: 1.2em;
					padding-right: 15px;
					padding-left: 15px; 
					margin: 0 0 0 0;
					text-shadow: 2px 2px 4px #000000;

				}
				.sphead2 {
					color: #FFFFFF;
					font-size: 4em;
					line-height: 1em;
					text-shadow: 2px 2px 4px #000000;


					  width: 100%;
					  height: auto;
					  
					  align-items: center;
					  justify-content: center;
					  
					  text-align: center;
					  vertical-align: middle;
					  position: relative;
					  display: block;
				}


				.vcHEAD {
					display: flex;
					justify-content: center;
					align-items: center;
					vertical-align: middle;
					margin-top: auto;
					margin-bottom: auto;
					margin-left: auto;
					margin-right: auto;
					position: relative;
					clear: both;
					width: 100%;
					line-height: 1.5;
					display: inline-block;
					vertical-align: middle;
				}
						

				/* VERTICAL /// CENTER FOR ELEMENTS -------------*/


						.vCENTER {
						  line-height: 220px;
						  text-align: center;
						  width: 100%;
						}

			   
				
				.btn-shop {
					border: 2px solid #FFFFFF;
					background-color: transparent;
					position: relative;
					color: #FFFFFF;
					padding: 5px 10px;
					font-size: 1.2em;
					cursor: pointer;
					text-align: center;
					border-radius: 8px;
					transition: 0.3s;
					opacity: 1;
					box-shadow: 2px 2px 4px #000000;

				}
				
				/* White Button */
				.btn-shop {
					border-color: #FFFFFF;
					color: #FFFFFF;
				  
				}
				
				.btn-shop:hover {
					border: 2px solid #ffffff;
					background-color: #000000;
					color: #ffffff;
					opacity: 0.7;

				}
				
				.vertical-center {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 15px;
					position:relative;
					left:0px;
					top:-50px;
					z-index:1;

				}
				
				#ExceEquip	{
					display: block;
					margin-left: auto;
					margin-right: auto;
					max-width: 900px;
					width: 95%;
					height: auto;
					text-align: center;
					vertical-align: middle;
					align-items: center;
					filter:drop-shadow(0px 0px 2px #666666); 
					clear:both;
					margin-top: 15px;
					margin-bottom: 15px;
				}




/* ==========================================================================
   Main Content
   ========================================================================== */
   
   		/* Content Layout
		--------------------------------------------------*/
   
				.main-container {
					background-color: #cccccc;
					background-image:url(../images/bg/bg_metal_brush.jpg);
					width: 100%;
					margin-left: auto;
					margin-right: auto;
					border-bottom-width: 0px;
					padding-left: 0px;
					padding-top: 0px;
					padding-right: 0px;
					padding-bottom: 0px;
				}
				.row {
					width: 100%;
					margin-top: 0px;
					margin-right: 0px;
					margin-bottom: 0px;
					margin-left: 0px;
					padding-top: 0px;
					padding-right: 0px;
					padding-bottom: 0px;
					padding-left: 0px;
					display: inline-block
				}
				.row.blockDisplay {
					display: block;
				}
				.column_half {
					width: 50%;
					float: left;
					margin-top: 0px;
				}
				.columns {
					width: 25%;
					float: left;
					font-family: "Arial";
					color: #A5A5A5;
					line-height: 24px;
					padding-top: 10px;
					padding-bottom: 10px;
					padding-left: 0px;
					padding-right: 0px;
					text-align: justify;
					margin-top: 15px;
					margin-bottom: 15px;
					margin-left: 0px;
					margin-right: 0px;
				}
				.row .columns p {
					padding-left: 10%;
					padding-right: 10%;
				}
				.main-container .columns h4 {
					text-align: center;
					color: #01B2D1;
				}
				.primary_header {
					width: 100%;
					background-color: #52bad5;
					padding-top: 10px;
					padding-bottom: 10px;
					clear: left;
					border-bottom: 2px solid #2C9AB7;
				}
				.secondary_header {
					width: 100%;
					padding-top: 50px;
					padding-bottom: 50px;
					background-color: #B3B3B3;
					clear: left;
				}
				.main-container .secondary_header ul {
					margin-top: 0%;
					margin-right: auto;
					margin-bottom: 0px;
					margin-left: auto;
					padding-top: 0px;
					padding-right: 0px;
					padding-bottom: 15px;
					padding-left: 0px;
					width: 100%;
				}
				.secondary_header ul li {
					list-style: none;
					float: left;
					margin-right: auto;
					margin-top: 0px;
					font-family: "Arial";
					font-weight: normal;
					color: #FFFFFF;
					letter-spacing: 1px;
					margin-left: auto;
					text-align: center;
					width: 16%;
					transition: all 0.3s linear;
				}
				.secondary_header ul li:hover {
					color: #717070;
					cursor: pointer;
				}
				.left_article {
					background-color: #FFFFFF;
					width: 60%;
					float: left;
					font-family: "Arial";
					color: #343434;
					padding-bottom: 15px;
				}
				.noDisplay {
					display: none;
				}
				.main-container .left_article h3 {
					padding-left: 5%;
					padding-right: 5%;
					margin-top: 5%;
					color: #717070;
					font-weight: bold;
					text-transform: uppercase;
				}
				.main-container .left_article p {
					padding-left: 5%;
					padding-right: 5%;
					text-align: justify;
					line-height: 24px;
					margin-top: 30px;
					margin-bottom: 15px;
					color: #B3B3B3;
				}
				.right_article {
					width: 40%;
					float: left;
					background-color: #F6F6F6;
				}
				.main-container .right_article ul {
					margin-top: 0px;
					margin-right: 0px;
					margin-bottom: 0px;
					margin-left: 0px;
					padding-top: 0px;
					padding-right: 0px;
					padding-bottom: 0px;
					padding-left: 0px;
				}
				.right_article ul li {
					font-family: "Arial";
					list-style: none;
					text-align: center;
					background-color: #B3B3B3;
					width: 90%;
					margin-left: auto;
					margin-right: auto;
					margin-top: 10px;
					margin-bottom: 10px;
					padding-top: 15px;
					padding-bottom: 15px;
					color: #FFFFFF;
					font-weight: bold;
					border-radius: 0px;
					transition: all 0.3s linear;
					border-left: 5px solid #717070;
				}
				.right_article ul li:hover {
					background-color: #717070;
					cursor: pointer;

				}
				.title {
					font-weight: bold;
					font-style: normal;
					font-family: "Arial";
					text-align: center;
					color: #FFFFFF;
					letter-spacing: 2px;
				}
				.placeholder {
					/* [disabled]max-width: 400px;
				*/
					/* [disabled]max-height: 200px;
				*/
					width: 100%;
					padding-top: 30px;
					/* [disabled]padding-left: 19px;
				*/
					padding-bottom: 30px;
					height: 100%;
				}
				.left_half {
					background-color: #52BAD5;
				}
				.main-container .column_half.left_half h2 {
					color: #FFFFFF;
					font-family: "Arial";
					text-align: center;
				}
				.right_half {
					background-color: #01B2D1;
					color: #FFFFFF;
					font-family: "Arial";
					text-align: center;
					font-weight: bold;
				}
				.column_title {
					padding-top: 25px;
					padding-bottom: 25px;
				}
				.copyright {
					text-align: center;
					background-color: #717070;
					color: #FFFFFF;
					text-transform: uppercase;
					font-weight: lighter;
					letter-spacing: 2px;
					border-top-width: 2px;
					font-family: "Arial";
				}
				body {
					margin-top: 0px;
					margin-right: 0px;
					margin-bottom: 0px;
					margin-left: 0px;
				}
				
				@media (max-width: 320px) {
				.secondary_header ul li {
					float: none;
					margin-top: 28px;
					margin-left: 0px;
					width: 100%;
				}
				.main-container .secondary_header ul {
					margin-top: 0px;
					margin-right: 0px;
					margin-bottom: 0px;
					margin-left: 0px;
					padding-top: 0px;
					padding-right: 0px;
					padding-bottom: 0px;
					padding-left: 0px;
					height: auto;
					width: 100%;
					text-align: center;
				}
				.secondary_header {
					margin-top: 0px;
					margin-right: 0px;
					margin-bottom: 0px;
					margin-left: 0px;
					padding-top: 1px;
					padding-bottom: 40px;
				}
				.left_article {
					width: 100%;
					height: auto;
				}
				.right_article {
					width: 100%;
					height: auto;
				}
				.placeholder {
					width: 100%;
					margin-top: 22PX;
					margin-right: 0px;
					margin-bottom: 22PX;
					margin-left: 0px;
					padding-top: 0px;
					padding-right: 0px;
					padding-bottom: 0px;
					padding-left: 0px;
					max-width: 400px;
					max-height: 200px;
					height: auto;
				}
				.columns {
					width: 100%;
					margin-top: 0px;
					margin-right: 0px;
					margin-bottom: 0px;
					margin-left: 0px;
					padding-top: 0PX;
					padding-right: 0PX;
					padding-bottom: 0PX;
					padding-left: 0PX;
				}
				.columns p {
					padding-left: 10px;
					padding-right: 10px;
				}
				.column_half.left_half {
					width: 100%;
				}
				.column_half.right_half {
					width: 100%;
				}
				.copyright {
					padding-top: 25px;
					padding-bottom: 0px;
					margin-bottom: 0px;
				}
				.container .left_article h3 {
					margin-top: 30px;
				}
				.social .social_icon img {
					width: 80%;
				}
				.main-container .secondary_header {
				}
				}
				
				@media (min-width: 321px) and (max-width: 768px) {
				.secondary_header ul li {
					float: none;
					margin-top: 28px;
					margin-left: 0px;
					width: 100%;
				}
				.main-container .secondary_header ul {
					margin-top: 0px;
					margin-right: 0px;
					margin-bottom: 0px;
					margin-left: 0px;
					padding-top: 0px;
					padding-right: 0px;
					padding-bottom: 0px;
					padding-left: 0px;
					height: auto;
					width: 100%;
					text-align: center;
				}
				.secondary_header {
					margin-top: 0px;
					margin-right: 0px;
					margin-bottom: 0px;
					margin-left: 0px;
					padding-top: 1px;
					padding-bottom: 40px;
				}
				.left_article {
					width: 100%;
					height: auto;
				}
				.right_article {
					width: 100%;
					height: auto;
					padding-bottom: 25px;
				}
				.placeholder {
					margin-top: 0px;
					margin-right: 0px;
					margin-bottom: 0px;
					margin-left: 0px;
					padding-top: 0px;
					padding-right: 0px;
					padding-bottom: 0px;
					padding-left: 0px;
					width: 100%;
					max-width: 100%;
					height: auto;
					max-height: 100%;
				}
				.columns {
					width: 100%;
					margin-top: 6px;
					margin-right: 0px;
					margin-bottom: 6px;
					margin-left: 0px;
					padding-top: 0px;
					padding-right: 0px;
					padding-bottom: 0px;
					padding-left: 0px;
				}
				.columns p {
					padding-left: 14px;
					padding-right: 14px;
				}
				.column_half.left_half {
					width: 100%;
				}
				.column_half.right_half {
					width: 100%;
				}
				}
				
				@media (min-width: 769px) and (max-width: 1000px) {
				.secondary_header {
					overflow: auto;
					padding-top: 30px;
					padding-bottom: 30px;
				}
				.secondary_header ul li {
					margin-top: 10px;
					margin-right: 7%;
					margin-bottom: 10px;
					margin-left: 7%;
				}
				.left_article {
					height: auto;
				}
				.right_article {
					height: auto;
					padding-bottom: 27px;
				}
				.placeholder {
					width: 100%;
					margin-left: 0px;
					margin-right: 0px;
					padding-left: 0px;
					padding-right: 0px;
				}
				.columns {
					width: 50%;
					float: left;
					padding-left: 0px;
					padding-top: 0px;
					padding-right: 0px;
					padding-bottom: 0px;
				}
				.main-container .columns p {
					padding-left: 25px;
					padding-right: 25px;
				}
				}
				
				@media (min-width: 1001px) {
				}
				.thumbnail {
					width: 100px;
					height: 100px;
					margin-left: auto;
				}
				.thumbnail_align {
					text-align: center;
				}
				.social {
					text-align: center;
					margin-right: 0px;
					margin-bottom: 0px;
					margin-left: 0px;
					width: 100%;
					background-color: #414141;
					clear: both;
					overflow: auto;
				}
				.social_icon {
					width: 25%;
					text-align: center;
					float: left;
					transition: all 0.3s linear;
					line-height: 0px;
					padding-top: 7px;
				}
				.main-container .social .social_icon:hover {
					cursor: pointer;
					opacity: 0.5;
				}

		


   		/* Round Corner Container
		--------------------------------------------------*/

				#round-container {
					background-color: #ffffff;
					margin: 40px auto 20px auto;
					padding: 30px 10px 30px 10px;
					border-radius: 25px;
					-webkit-box-shadow: 2px 2px 8px 4px #666666;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
					-moz-box-shadow:    2px 2px 8px 4px #666666;  /* Firefox 3.5 - 3.6 */
					box-shadow:         2px 2px 8px  #666666;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
					clear: both;
					overflow: hidden;
					overflow-wrap: break-word;
					word-wrap: break-word;
					width: 80%;

										}


				.shadow {
					-webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
					-moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
					box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
				}


		/* HOME - Categories
		--------------------------------------------------*/
		
		   		/* col Layout -------------*/
		
				.category {
					width: 185px;
					border-radius: 200px;
					height: 185px;
					margin-left: auto;
					
				}
				.category_align {
					text-align: center;
				}
				.category p {
					padding: 0 0 0 0;

				}		


   		/* Catalog Layout
		--------------------------------------------------*/


			/* Catalog Header Buttions -------------*/



				.CatBTN-Ctr {
					display: inline-block;
					margin-top: 20px;
					margin-left: auto;
					margin-right: auto;
					text-align: center;
					position: relative;
					clear: both;
					overflow: auto;
					
				}


				.CatBTN {
				  display: block;
				  margin: 0;
				  position: absolute
				  top: 50%;
				  left: 50%;
				  -ms-transform: translate(-50%, -50%);
				  transform: translate(-50%, -50%);

				}


				.CatBTN-group button {
				  background-color: transparent;
				  border: none; 
				  color: #ffffff; 
				  font-size: 1em;
				  padding: 8px 10px; 
				  display: inline-block;
				  cursor: pointer; 
				  float: left; /* Float the buttons side by side */
				  text-align: center;
				  margin: 0 10px 0 10px;
				  border-radius: 8px;

				}

				.CatBTN-group button.active {
				  background-color: #cd2333;
				  border: 2px solid #ffffff; 
				  color: #ffffff; 
				  font-size: 1em;
				  padding: 8px 10px; 
				  display: inline-block;
				  cursor: pointer; 
				  float: left; /* Float the buttons side by side */
				  text-align: center;
				  margin: 0 10px 0 10px;
				  border-radius: 8px;
				}

				/* Disabled -- Prevents Double Borders in Menu

				.CatBTN-group button:not(:last-child) {
				  border-right: none; 
				}

				*/

				/* Clear floats (clearfix hack) */
				.CatBTN-group:after {
				  content: "";
				  clear: both;
				  display: table;
				}

				/* Add a background color on hover */
				.CatBTN-group button:hover {
				  background-color: #cd2333;
				}






			/* Product Cards -------------*/

	
				
				.ProdCards {
					display: -moz-flex;
					display: -webkit-flex;
					display: -ms-flex;
					display: flex;
					-moz-align-items: stretch;
					-webkit-align-items: stretch;
					-ms-align-items: stretch;
					align-items: stretch;
					-moz-justify-content: center;
					-webkit-justify-content: center;
					-ms-justify-content: center;
					justify-content: center;
					-moz-flex-wrap: wrap;
					-webkit-flex-wrap: wrap;
					-ms-flex-wrap: wrap;
					flex-wrap: wrap;

				}

					.ProdCards .card {
						margin: 1em 1em 2em 1em;
						width: 20%;
						min-width: 300px;
						box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
					}

						@media screen and (max-width: 1280px) {

							.ProdCards .card {
								width: 35%;
							}

						}

						@media screen and (max-width: 736px) {

							.PodCards .card {
								width: 100%;
							}

						}

						@media screen and (max-width: 320px) {

							.PodCards .card {
								width: 100%;
							}

						}



						/* Product Card Layout -------------*/



							.card {
							  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
							  margin: auto;
							  text-align: center;
							  background-color: #ffffff;
							  padding: 12px 12px 0 12px;
							  border-radius: 10px;


							}

							.cardHEAD {
								font-size: 28px;
							}

							.price {
							  color: grey;
							  font-size: 22px;
							}

							.card button {
							  border: none;
							  outline: 0;
							  padding: 12px;
							  color: #ffffff;
							  background-color: #cd2333;
							  text-align: center;
							  cursor: pointer;
							  width: 100%;
							  font-size: 18px;
							  border-radius: 5px;

							}

							.card button:hover {
							  background-color: #000000;
							  opacity: 0.7;
							}




			/* Box -------------*/
				.box {
					border-radius: 4px;
					margin-bottom: 2em;
					background: #eeeeee;
					text-align: center;
					border-color: #C0C0C0;
					border-style:solid;
					border-width:thin;
					box-sizing: border-box;
				}

				.box > :last-child,
				.box > :last-child > :last-child,
				.box > :last-child > :last-child > :last-child {
					margin-bottom: 0;
				}

				.box .image.fit {
					margin: 0;
				}

				.box .image img {
					border-radius: 4px 4px 0 0;

				}

				.box .inner {
					padding: 1.5em;
					width: 100% !important;
				}

					@media screen and (max-width: 480px) {

						.box .inner {
							padding: 1em;
						}

					}

				.box.alt {
					border: 0;
					border-radius: 0;
					padding: 0;
				}

			/* Catalog Images -------------*/

				.CatImage {
					width: 100%;
					border: 0;
					background-color: #bcbcbc;
				}







/* ==========================================================================
   Product Gallery
   ========================================================================== */


	   	/* Pop Up View
		--------------------------------------------------*/







		/* Gallery Grid
		--------------------------------------------------*/






/* ==========================================================================
   Form Content
   ========================================================================== */


	   	/* Contact Us Form
		--------------------------------------------------*/










		/* Product Order Form
		--------------------------------------------------*/









/* ==========================================================================
   Footer Content
   ========================================================================== */
				
				footer {
				  background-color: #000000;
				  margin: 0 auto;
				  padding: 0 auto;
				  text-align: center;
				  color: #ffffff;
				  line-height: 1.5;

				}


		/* Footer Styles
		--------------------------------------------------*/

				footer {
				  background-color:#000000;
				}
				
				footer ul {
				  list-style: none;
				  padding-left: 0;
				  color: #ffffff;

				}
				footer a {
				  color: #ffffff;
				}

				a:hover {
				  text-decoration: none;
				  color: #cd2333;
				}
				.ft-title {
				  color: #cd2333;
				  font-family: arial;
				  font-size: 1.375rem;
				  padding-bottom: 0.625rem;
				  text-align: left;
				}
				
				.ft-title a:link {
				  color: #ffffff;

				}
				
			/* Sticks footer to bottom */
				body {
				  display: flex;
				  min-height: 100vh;
				  flex-direction: column;
				}

				.container {
				  flex: 1;
				}
				
			/* Footer main */
				.ft-main {
				  padding: 1.25rem 1.875rem;
				  display: flex;
				  flex-wrap: wrap;
				  text-align: left;
				}

			/* SiteMap */

				#SiteMap a {
				  color: #ffffff;
				}
				
				#SiteMap a:active {
				  text-decoration: none;
				  color: #ffffff;
				}
				#SiteMap a:hover {
				  text-decoration: none;
				  color: #cd2333;

				}
				@media only screen and (min-width: 29.8125rem /* 477px */) {
				  .ft-main {
					justify-content: space-evenly;
				  }
				}
				@media only screen and (min-width: 77.5rem /* 1240px */) {
				  .ft-main {
					justify-content: space-evenly;
				  }
				}
				.ft-main-item {
				  padding: 1.25rem;
				  min-width: 12.5rem;
				  color: #ffffff;
				  text-align: left;


				}
			
			/* Footer main | Newsletter form */
				form.newsletter {
				  display: flex;
				  flex-wrap: wrap;
				  position: relative;
				  display: block;
			 	  margin : 0 auto;
				}
				
				input.newEM[type="email"] {
				  border: 0;
				  padding: 0.625rem;
				  margin-top: 0.3125rem;
				  color: #000000;
				  width: 200px;
				}
				
				input.newSub[type="submit"] {
				  background-color: #cd2333;
				  color: #cccccc;
				  cursor: pointer;
				  border: 0;
				  padding: 0.625rem 0.9375rem;
				  margin-top: 0.3125rem;
				}
				input.newSub[type="submit"]:hover {
				  background-color: #777777;
				  color: #ffffff;
				}
				
			/* Footer social */
				.ft-social {
				}
				.ft-social-list {
				  display: flex;
				  justify-content: left;
				}
				.ft-social-list li {
				  margin-left: 0;
				  margin-right: 0.75rem;
				  font-size: 1.25rem;
				}
				#socialicons {
				  width:  40px;
				  height: 40px;
				  background-color: #cccccc;
				  border-radius: 50%;
				}
			
			/* Footer legal */
				.ft-legal {
				  padding: 0.9375rem 1.875rem;
				  background-color: #333333;
				  border-top: 4px #777 solid;

				}
				.ft-legal-list {
				  width: 100%;
				  display: flex;
				  flex-wrap: wrap;
				}
				.ft-legal-list li {
				  margin: 0.125rem 0.625rem;
				  white-space: nowrap;
				}
				
			/* one before the last child */
				.ft-legal-list li:nth-last-child(2) {
					flex: 1;
				}
			
			/* ~~ miscellaneous float/clear classes ~~ */
					.fltrt {  
					/* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
						float: right;
						margin-left: 8px;
					}
					.fltlft { 
			/* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
						float: left;
						margin-right: 8px;
					}
					.clearfloat { 
			/* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or
			   taken out of the #container */
						clear:both;
						height:0;
						font-size: 1px;
						line-height: 0px;
					}
					.ccards {
						width: 233px;
						height: 36px;
					}