/*===================== 
	Color information
	
	-
	-
	-
	-
		 
=======================*/
/*===================== 
	CSS reset/normalize 
=======================*/

/**Correct `block` display not defined in IE 8/9.**/
article,aside,details,figcaption,figure,footer,header,hgroup,
main,nav,section,summary {display: block;}
pre {white-space: pre-wrap;}
small { font-size: 80%;}


/*===================== 
	@Font-Face 
=======================*/


/*===================== 
	base styles 
=======================*/

html {
    font-family: 'Oswald', sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
	}

body {
    margin: 0;
	overflow-x: hidden;
	background: url('../siteart/black-textured-bg.jpg') repeat;
	}

svg:not(:root) {overflow: hidden;/*reset*/}
	
/* clear floats */ 
.group:before,
.group:after {content: ""; display: table;} 
.group:after {clear: both;}
.group {zoom: 1;}	
.clear { clear: both;}
	
/*image replacement*/
.hide-text {
	text-indent:  100%;
	white-space:  nowrap;
	overflow:  hidden;
	}	

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
	border-style: solid;
    height: 0;
	} 

img { border: 0;} 
	
/*===================== 
	typography 
=======================*/

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	}
	h1 {font-size: 2em;}

p {
	margin: 0;
	}

b, strong {
    font-weight: bold;
	}
	
.txt-right { text-align:right;}
.txt-cnt { text-align:center;}
.red { color:#c92127;}
.white { color: #fff;}
.uppercase { text-transform:uppercase;}

/*===================== 
	link styles 
=======================*/

a:focus {outline: thin dotted;/*reset*/
	}
	
a,
a:link, 
a:visited, 
a:active {
	outline: 0;/*reset*/
    color: #aaa; 
    text-decoration:none;
	}
	a:hover  {
		outline: 0;/*reset*/
		text-decoration: none;
		color: #ccc;
		}  

/*===================== 
	header styles 
=======================*/
	
header p a.link {
	color: #000;
	font-weight: 600;
	font-size: 18px;
	transition: ease all .5s;
	}
	header p a.link:hover { 
		color: #aaa;
		}
header p a.red {
	color: #ef382e;
	font-size: 36px;
	font-weight: 600;
	transition: ease all .5s;
	}
	header p a.red:hover {
		color: #ef382e;
		opacity: .75;
		}

/*===================== 
	nav styles 
=======================*/

nav.primary {
	}
	nav.primary ul {
		}
		nav ul li {
			}
			nav ul li a {
				}	
			nav ul li a:hover {
				}

/*===================== 
	content styles 
=======================*/

.header-wrap, .wrap, .container, .footer {
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
	}
		
.sm-wrap {
	max-width: 765px;
	width: 100%;
	margin: 0 auto;
	}
	
.lite-gray-bg { background: #7d7d7d;}
.gray-bg { background: #464646;}
.gray-bg img{width:95%;}
.white-bg { background: #fff;}
.drk-gray-bg { background: #2e2e2e;}
.black-bg { background: #000;}
.red-bg { background: #c92127; color: #fff;}
.blue-bg { background: #4b64aa;}

/*----- LARGE BUTTONS ------*/
.categories {
	text-align: center;	
	}

.categories h1 {
	font-size: 3rem;
}

.categories h2 {
	color: #ed1e24;
}

.categories a {
	text-align: center;
	text-transform: uppercase;
	color: #000;
	font-size: 1rem;
	line-height: 1.2rem;
	}
	.categories a:hover {
		color: #ed1e24;
		}
.categories a.ghost {
	margin-bottom: 2rem;
	font-size: 1.7rem;
	padding: 2rem 3.5rem;
	color: #ed1e24;
	}
	
.outer {
    margin: .5rem;
    overflow: hidden;
    position: relative;
    display: inline-block;
    cursor: pointer;
	width: 330px;
	height: 280px;
	}

.inner {
	width: 100%;
	height: 100%;
    -webkit-transition: ease all .5s;
    -moz-transition: ease all .5s;
    transition: ease all .5s;
	}

.inner::before {
    content: "";
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(201, 33, 39, .75);
	}

.outer:hover .inner:before,
.outer:focus .inner:before, a.inv-link:hover .inner:before,
a.inv-link:focus .inner:before {
    display: block;
	}

.outer:hover .inner,
.outer:focus .inner, a.inv-link:hover .inner,
a.inv-link:focus .inner {
    transform: scale(1.2);
	}

.inner span {
    color: white; /* Good thing we set a fallback color! */
    text-align: center;
    position: relative;
    z-index: 500;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.3rem;
	}

.outer span {
    display: block;
    text-shadow: 2px 2px #000;
    font-size: 1.5rem;
	}

.outer a {
	text-decoration: none;
	}

[class*="category-"] {
	background-repeat: no-repeat;
	background-size: 350px;
	background-position: center center;
	background-color: #fff;
	}

.category-01 {
	background-image: url('../siteart/lrg-btn-01.jpg');
	}
.category-02 {
	background-image: url('../siteart/lrg-btn-02.jpg');
	}
.category-03 {
	background-image: url('../siteart/lrg-btn-03.jpg');
	}
	
.lrg-btns {
	margin: .8rem auto 1.2rem;
	}
.lrg-btn-title {
	margin: -.3rem .5rem .5rem;
	padding: .5rem 0;
	text-align: center;
	}
	
/*----- SEARCH PRICES ------*/
.search-bar {
	margin-bottom: 1.2rem;
	}
	.blue-bg {
		text-align: center;
		}
	.search-bar h2 {
		text-align: center;
		padding: 1rem 0;
		}
	.search-bar .blue-bg {
		padding: 1rem 2.2rem;
		}
	.search-bar a {
		color: #fff;
		font-weight: 600;
		font-size: 14px;
		transition: ease all .5s;
		margin: 1rem 0;
		}
		.search-bar a:hover {
			transform: scale(1.1);
			}
			
/*----- SECONDARY LRG BTNS ------*/
.secondary-lrg-btns img {
	box-sizing: border-box;
	padding: 1rem;
	}
	.secondary-lrg-btns h2 {
		text-align: center;
		padding: 1rem 0;
		}
	.secondary-lrg-btns a {
		color: #fff;
		font-weight: 600;
		font-size: 14px;
		transition: ease all .5s;
		margin-bottom: 1.2rem;
		}
		.secondary-lrg-btns a:hover {
			transform: scale(1.1);
			}

/*----- CONTACT PAGE ------*/
.contact {
	background: #fff;
	box-sizing: border-box;
	margin: 2rem auto;
	padding:1rem 2rem 2rem;
	}
	.contact-title {
		text-align: center;
		margin-bottom: 1rem;
		}
	.contact-map p a {
		color: #c92127;
		transition: ease all .5s;
		}
		.contact-map p a:hover {
			color: #ccc;
			}
	.contact div.col-1-2 {
		margin: 0 auto;
		border-left: 2px solid #ccc;
		padding-left: 2rem;
		}

/*----- VALUE PAGE ------*/
div.trade.col-1-2 {
	border: none;
	padding: 0;
	}
	
/*----- THANK YOU PAGE ------*/
.thank-you {
	padding: 1rem;
	}
	.thank-you p:nth-of-type(2) {
		margin: 3rem 0 2rem;
		}

/*===================== 
	slideshow styles 
=======================*/

.cycle-overlay {
	position: absolute;
	bottom: 35%;
	left: 5%;
	color: #fff;
	box-sizing: border-box;
	font-size: 4.8rem;
	width: 90%;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 1px 1px 5px #000;
	font-weight: 600;
	}
	
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 10px; overflow: hidden;
	}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #fff; cursor: pointer; 
	}
.cycle-pager span.cycle-pager-active { color: #c92127;}
.cycle-pager > * { cursor: pointer;}


/*===================== 
	  form styles 
=======================*/
form, #formpage { margin: 0 auto;}

#formpage { max-width: 600px; width: 100%;}

tbody > tr > td {
	display: block;
	}

table, input {
	width: 100%;
	}

input, select {
	font-family: 'Oswald', sans-serif;
	font-size: 1.3rem;
	margin-bottom: 2rem;
	}	

input {
	border: none;
	border-bottom: 2px solid #c92127;
	background: none;
	}
	
select {
	border: 2px solid #ccc;
	color: #717171;
	}

textarea {
	width: 100%;
	border: 1px solid #ccc;
	font-family: 'Oswald', sans-serif;
	box-sizing: border-box;
	padding: .8rem .8rem;
	font-size: 1.3rem;
	}
textarea:active, textarea:focus {
	border: none;
	box-shadow: 0.4em 0.4em 1em #ccc;
	}
	
a.ghost, form .button {
	border: 2px solid #c92127;
	padding: 1rem 2.5rem;
	color: #c92127;
	transition: ease all .5s;
	font-size: 1rem;
	cursor: pointer;
	}
	a.ghost:hover, form .button:hover {
		background: #c92127;
		color: #fff;
		}

/*===================== 
	layout styles 
=======================*/
.flex { display:flex;}
.flex-jus-cnt { justify-content:center;}
.flex-spc-btwn { justify-content:space-between;}
.flex-spc-arnd { justify-content:space-around;}
.flex-align-cnt { align-items:center;}
.flex-wrap { flex-wrap:wrap;}
.flex-direct-col { flex-direction:column;}

.left {float: left;}
.right {float: right;}
	
.col-1-6 { width: 16%;}
.col-1-5 { width: 20%;}
.col-1-4 { width: 24%;}
.col-1-3 { width: 33%;}
.col-1-2 { width: 49%;}
.col-2-3 { width: 65%;}
.col-3-4 { width: 75%;}

/*===================== 
	footer styles 
=======================*/

.footer-nav {
	}
	.footer-nav ul {
		margin: 0 auto;
		padding: 1rem 0;
		}
		.footer-nav ul li {
			display: inline-block;
			}
			.footer-nav ul li a {
				color: #fff;
				transition: ease all .5s;
				}
				.footer-nav ul li a:hover {
					color: #aaa;
					}

a.footerlink:link,
a.footerlink:visited, 
a.footerlink:active {
	text-decoration: none; 
	font-size:13px;
	color: #aaa;
	}
	a.footerlink:hover {
		text-decoration:none; 
		font-size:13px;
		color: #fff;
		}

.footertext {
	font-size:13px; 
	color:#aaa;
	}

.smallfootertext {
	font-size:10px; 
	color:#aaa;
	}

.divfooter {
	max-width:490px;
	width: 100%; 
	text-align:center; 
	margin:0 auto;
	padding-bottom: 1rem;
	}

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

section, header {
	padding: 0 1rem;
	}

/*----- LRG BTNS ------*/
.outer {
	width: 280px;
	height: 230px;
	}

/*----- SECONDARY LRG BTNS ------*/	
.secondary-lrg-btns .col-1-4 {
	width: 49%; 
	}
	.secondary-lrg-btns a:hover {
			transform: scale(.9);
			}

/*----- CONTACT PAGE ------*/
.contact {
	margin: 1rem 0;
	}
}

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

/*----- SLIDESHOW ------*/
.cycle-overlay {
	font-size: 4rem;
	}

/*----- LRG BTNS ------*/
.outer {
	width: 240px;
	height: 190px;
	}

/*----- CONTACT PAGE ------*/
.contact iframe {
	width: 300px;
	margin-right: 1rem;
	}
	.contact div.col-1-2 {
		padding: 0 1rem;
		}
}

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

/*----- HEADER ------*/
header div.flex {
	flex-direction: column;
	}
	img.primary-logo {
		width: 100%;
		}
	header p {
		text-align: center;
		margin-bottom: .5rem;
		}
		header p a.red, header p a.link {
			font-size: 90%;
			}

/*----- LRG BTNS ------*/
.lrg-btns {
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
	}
	.outer {
		width: 350px;
		height: 190px;
		}
	.inv-cat {
		margin-bottom: 1rem;
		}
}

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

/*----- SLIDESHOW ------*/
.cycle-overlay {
	font-size: 2.8rem;
	}

/*----- SEARCH BAR ------*/
.search-bar a {
	width: 40%;
	margin: 1rem .5rem;
	}
	.search-bar a:hover {
		transform: scale(.9);
		}

/*----- FOOTER ------*/
.footer-nav ul {
	padding: 1rem;
	}
	
/*----- CONTACT PAGE ------*/
.contact div.flex {
	flex-direction: column;
	}
	.contact iframe {
		width: 100%;
		height: 250px;
		}
	.contact div.col-1-2 {
		border: none;
		width: 90%;
		margin-top: 1.5rem;
		padding: 0;
		}
}

@media screen and (max-width: 600px)  {
.header-wrap, .secondary-lrg-btns img {
	display: block;
	}
}

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

/*----- SLIDESHOW ------*/
.cycle-overlay {
	font-size: 2rem;
	}
	
.cycle-pager {
	display: none;
	}

/*----- SEARCH BAR ------*/
.search-bar div.flex {
	flex-direction: column;
	padding: 1rem;
	box-sizing: border-box;
	}
	.search-bar a {
		width: 100%;
		margin: 0 0 .5rem 0;
		}
		
/*----- SECONDARY LRG BTNS ------*/
.secondary-lrg-btns .col-1-4 {
	width: 100%;
	}

/*----- FOOTER ------*/
.footer-nav ul {
	flex-direction: column;
	text-align: center;
	}
	.footer-nav ul li {
		margin-bottom: .5rem;
		}

}

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

/*----- SLIDESHOW ------*/
.cycle-overlay {
	font-size: 1.5rem;
	}

/*----- LRG BTNS ------*/
.outer {
	width: 240px;
	}

/*----- CONTACT PAGE ------*/
.contact {
	padding: .5rem;
	}
	.contact iframe {
		width: 100%;
		height: 250px;
		}
	.contact div.col-1-2 {
		width: 98%;
		margin: 1.5rem 0;
		}
	td, table, input, tbody, textarea {
		width: 100% !important;
		}
	textarea {
		width: 88% !important;
		}
}