#content
{
width: 100%;
}

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

.heroImage
{
width: 100%;
height: 17.5rem;
position: relative;
}

.heroCopy
{
width: 18.75rem;
box-sizing: border-box;
margin: 0 auto;
text-align: center;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

.homepage-product-layout
{
background-color: #efeeee;
padding-top: 1rem;
}




.hero-homepage .heroImage
{
height: 25rem;
background: url("https://dh36nblqpps8a.cloudfront.net/homepage/2020/480_Dry-Bags_1_12_2020.jpg") no-repeat center center;
background-size: cover;
}

.hero-homepage .heroCopy
{
box-sizing: border-box;
padding: 0;
width: 16.5625rem;
height: 7.8125rem;
margin: .25rem auto;
background: url("https://dh36nblqpps8a.cloudfront.net/homepage/2020/1000_Overlay_Dry-Bags_10_25_2020.png") no-repeat center center;
background-size: cover;
position: absolute;
top: 1rem;
left: 0;
right: 0;
}




.heroCopy h1
{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin: 0;
}



.homepageProductWrapper
{
display: flex;
flex-flow: row wrap;
}

.homepageProductItem
{
box-sizing: border-box;
flex: 0 0 50%;
text-align: center;
padding: .25rem;
}

.homepageProductItem a
{
color: #444;
text-decoration: none;
display: block;
}

.homepageProductItem a:hover, .homepageProductItem a:hover .categoryItemPricing
{
color: #16619D;
}

.homepageProductItem img.productImageThumb
{
width: 100%;
height: auto;
}

.homepageProductItem .productColorOptions
{
text-align: center;
min-height: 1.5rem;
}

.homepageProductItem p:first-of-type
{
font-size: 1rem;
line-height: 1.25;
text-align: center;
font-weight: normal;
margin-top: 0;
margin-bottom: .5rem;
}

.homepageProductItem a .categoryItemPricing
{
font-size: .875rem;
line-height: 1;
text-align: center;
margin-top: 0;
margin-bottom: .75rem;
color: #c00;
}

.homepageProductItem a .categoryItemPricing del
{
font-weight: normal;
color: #777;
}


/* ******************************************
	Media Queries for screen wider than 30em (480px)
****************************************** */
@media screen and (min-width: 30em) { 
    
    
    .hero-homepage .heroImage
    {
    width: 100%;
    height: 25rem;
    background: url("https://dh36nblqpps8a.cloudfront.net/homepage/2020/970_Dry-Bags_1_12_2020.jpg") no-repeat center center;
    background-size: cover;
    }
    
    .hero-homepage .heroCopy
	{
	left: -12rem;
	top: 12rem;
	}



	
} /* end @media screen and (min-width: 30em)  */



/* ******************************************
	Media Queries for screen wider than 40em (640px)
****************************************** */

@media screen and (min-width: 40em) {
    .hero-homepage .heroImage
    {
    height: 31.25rem;
    }
    
	.hero-homepage .heroCopy
	{
    width: 18.125rem;
    height: 8.5625rem;
    left: -18rem;
	}
	
	.homepageProductItem
	{
	flex: 0 0 25%;
	}

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



/* ******************************************
	Media Queries for screen wider than 48em (768px)
****************************************** */

@media screen and (min-width: 48em) {

	.hero-homepage .heroCopy
	{
    width: 20rem;
    height: 9.5rem;
    left: -22rem;
    top: 10rem;
	}

	
	

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


/* ******************************************
	Media Queries for screen wider than 60.625em (970px)
****************************************** */
@media screen and (min-width: 60.625em) {
    
    .hero-homepage .heroImage
    {
    height: 43.75rem;
    background: url("https://dh36nblqpps8a.cloudfront.net/homepage/2020/1600_Dry-Bags_1_12_2020.jpg") no-repeat center center;
    overflow: hidden;
    background-size: cover;
    }
    
    .hero-homepage .heroCopy
    {
	 width: 23.75rem;
	height: 11.25rem;
	top: 15rem;
	left: -25rem;
    }

    

	.homepageLargePromoBlock p.promoCopy
    {
    padding-left: 8%;
	padding-right: 8%;
    }

} /* end @media screen and (min-width: 60.625em)  */