.heroImageWrapper
{
display: block;
width: 100%;
position: relative;
}

.heroImage
{
width: 100%;
height: 17.5rem;
background: #222 url("https://dh36nblqpps8a.cloudfront.net/assets/used/970_used-landing_2020.jpg") no-repeat center center;
background-size: cover;
position: relative;
}

.heroImageWrapper .usedLogo
{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
margin: 0 auto;
padding: 0;
position: absolute;
top: 1rem;
left: 0;
right: 0;
width: 13.75rem;
height: 8.4375rem;
background: url("https://dh36nblqpps8a.cloudfront.net/assets/used/nrs-used-logo.png") no-repeat center center;
background-size: cover;
}

.h2ImageWrapper
{
display: block;
width: 100%;
position: relative;
background: #222 url("https://dh36nblqpps8a.cloudfront.net/assets/straps/480_icons-background-straps_1_13_2020.png") no-repeat center center;
background-size: cover;
}

.h2ImageWrapper h2
{
color: #fff;
padding: 1.5rem 0 0;
margin: 0;
line-height: 1.2;
font-size: 1.75rem;
text-align:center;
}

.h2ImageWrapper p
{
color: #fff;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 90%;
max-width: 45rem; 
padding-bottom: 1.75rem;
line-height: 1.5;
}





.categoryItemWrapper h3, .used-categories h3 {
text-align: center;
font-family: proxima-nova-extra-condensed, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 1.75rem;
margin: 0 .5rem 0 0;
}

.paginationSortBar
{
display: none;
}

.used-categories
{
margin: 1rem auto 0;
display: flex;
flex-flow: row wrap;
width: 100%;
box-sizing: border-box;
padding: 1%;
max-width: 60.625rem;
}

.used-categories h3
{
flex: 0 0 100%;
max-width: 100%;
}

.used-categories a
{
display: flex;
box-sizing: border-box;
height: 12rem;
background-color: #222;
margin: 1%;
flex: 1 1 98%;
max-width: 98%;
align-items: flex-end;
text-decoration: none;
color: #fff;
font-family: proxima-nova-extra-condensed, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 1.25rem;
}

.used-categories a:hover
{
/* color: #c00; */
}

.used-categories a span
{
height: 2.5rem;
display: flex;
flex: 1 1 100%;
max-width: 100%;
background-color: rgba(0, 0, 0, .7);
justify-content: center;
align-items: center;
transition: height 0.15s ease-out;
}

.used-categories a:hover span
{
height: 4rem;
}

.used-apparel
{
background: url("https://dh36nblqpps8a.cloudfront.net/assets/used/Used-Category-Apparel.jpg") no-repeat center center;
background-size: cover;
}

.used-gear
{
background: url("https://dh36nblqpps8a.cloudfront.net/assets/used/Used-Category-Gear.jpg") no-repeat center center;
background-size: cover;
}

.used-rafts
{
background: url("https://dh36nblqpps8a.cloudfront.net/assets/used/Used-Category-Rafts.jpg") no-repeat center center;
background-size: cover;
}

.used-SUPs
{
background: url("https://dh36nblqpps8a.cloudfront.net/assets/used/Used-Category-SUPs.jpg") no-repeat center center;
background-size: cover;
}

.used-IKs
{
background: url("https://dh36nblqpps8a.cloudfront.net/assets/used/Used-Category-IKs.jpg") no-repeat center center;
background-size: cover;
}

.used-catarafts
{
background: url("https://dh36nblqpps8a.cloudfront.net/assets/used/Used-Category-Catarafts.jpg") no-repeat center center;
background-size: cover;
}


/* ******************************************
	Media Queries for screen wider than 23rem (368px)
****************************************** */
@media screen and (min-width: 23rem) {
	
	.used-categories a
	{
	flex: 1 1 48%;
	max-width: 48%;
	margin: 1%;
	}


} /* end @media screen and (min-width: 23rem)  */


/* ******************************************
	Media Queries for screen wider than 37.75rem (604px)
****************************************** */
@media screen and (min-width: 37.75rem)
{
	
	
}

/* ******************************************
	Media Queries for screen wider than 40rem (640px)
****************************************** */
@media screen and (min-width: 40rem) {
	
	.h2ImageWrapper
	{
	background: #222 url("https://dh36nblqpps8a.cloudfront.net/assets/straps/1600_icons-background-straps_1_13_2020.png") no-repeat center center;
	background-size: cover;
	}
	
	.h2ImageWrapper h2
	{
	font-size: 2rem;
	}
	
	.h2ImageWrapper p
	{
	font-size: 1.125rem;
	margin-bottom: 2rem;
	}
	
	.used-categories
	{
	padding: .5%;
	}
	
	.used-categories a
	{
	flex: 1 1 32%;
	max-width: 33%;
	margin: .5%;
	font-size: 1.5rem;
	}
	
	.categoryItemInnerGrouping {
	grid-template-columns: repeat(4, 1fr);
	}


} /* end @media screen and (min-width: 40.5rem)  */







/* ******************************************
	Media Queries for screen wider than 48rem (768px)
****************************************** */
@media screen and (min-width: 48rem) {
	
	.heroImage
	{
	height: 25rem;
	background: #222 url("https://dh36nblqpps8a.cloudfront.net/assets/used/1600_used-landing_2020.jpg") no-repeat center center;
	background-size: cover;
	}

	.heroImageWrapper .usedLogo
	{
	top: 2rem;
	width: 20rem;
	height: 12.25rem;
	}
    

	
} /* end @media screen and (min-width: 48rem)  */