#content
{
width: 100%;
}

#heroImage
{
width: 100%;
height: 24em;
background: url("/assets/images/2013_redesign/homepage/2017/480_EU_6_1_2017.jpg") no-repeat center center;
background-size: cover;
position: relative;
}

.heroCopy
{
box-sizing: border-box;
background-color: #acc637;
background-color: rgba(172,198,55,.9);
margin: 0 auto;
position: absolute;
bottom: 4%;
left: 0;
right: 0;
width: 18em;

padding-left: .5em;
padding-right: .5em;
-webkit-border-radius: 3px;
border-radius: 3px;
}

#heroImageWrapper h2
{
font-size: 1.2em;
line-height: 1.2;
font-family:'ProximaNova-Regular', Arial, Helvetica, sans-serif;
font-weight: normal;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .25);
}

#heroImageWrapper h1
{
font-family: 'ProximaNova-Bold', Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 2.5em;
text-transform: uppercase;
line-height: .9;
margin-top: .15em;
margin-bottom: 0;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .25);
}

#heroImageWrapper h3
{
font-size: 1.2em;
text-transform: uppercase;
line-height: 1.2;
font-family:'ProximaNova-Regular', Arial, Helvetica, sans-serif;
font-weight: normal;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .25);
}

.homepageProductItem
{
box-sizing: border-box;
float: left;
width: 50%;
padding: .25em;
min-height: 19.375em;
}

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

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

.homepageProductItem h2
{
font-size: 1em;
line-height: 1.25;
text-align: center;
font-weight: normal;
margin-top: .75em;
margin-bottom: .75em;
}

.homepageProductItem h4
{
font-size: 1em;
line-height: 1;
text-align: center;
margin-top: 0;
margin-bottom: .75em;
}

.homepageProductItem h2 a, .homepageProductItem h4 a
{
text-decoration: none;
color: #444;
}

.homepageProductItem h4 a
{
color: #F05A28;
}

.homepageProductItem h4 a del
{
font-weight: normal;
color: #777;
}
 
/* ******************************************
	Media Queries for screen wider than 27.5em (440px)
****************************************** */
@media screen and (min-width: 27.5em) {
 
    .homepageProductItem
    {
    min-height: 22em;
    }
 
} /* end @media screen and (min-width: 27.5em)  */

/* ******************************************
	Media Queries for screen wider than 30em (480px)
****************************************** */
@media screen and (min-width: 30em) { 
    
    #heroImage
    {
    width: 100%;
    height: 25em;
    background: url("/assets/images/2013_redesign/homepage/2017/768_EU_6_1_2017.jpg") no-repeat center bottom;
    }

    .homepageProductItem
    {
    width: 25%;
    padding: .25em;
    min-height: 0;
    }


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



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

@media screen and (min-width: 40em) {
    
    .heroCopy
    { 
    width: 32em;
    bottom: 12%
    }

    
    #heroImageWrapper h2
    {
    font-size: 1.2em;
    }
    
    #heroImageWrapper h1
    {
    font-size: 2.8em;
    margin-bottom: 0;
    }
    
    #heroImageWrapper h3
    {
    font-size: 1.2em;
    }


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







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

@media screen and (min-width: 48em) {
    
    #heroImage
    {
    height: 31.25em;
    background: url("/assets/images/2013_redesign/homepage/2017/970_EU_6_1_2017.jpg") no-repeat center bottom;
    }
    
    .heroCopy
    { 
    width: 38em;
    bottom: 18%
    }

    
    #heroImageWrapper h2
    {
    font-size: 1.4em;
    }
    
    #heroImageWrapper h1
    {
    font-size: 3.4em;
    }
    
    #heroImageWrapper h3
    {
    font-size: 1.4em;
    }



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








/* ******************************************
	Media Queries for screen wider than 60.625em (970px) // old, fixed layout. huzzah.
****************************************** */
@media screen and (min-width: 60.625em) {
    
    #heroImageWrapper
    {
    background-image: none;
    background-color: transparent;
    position: relative;
    }
    
    #heroImage
    {
    height: 43em;
    background: url("/assets/images/2013_redesign/homepage/2017/1600_EU_6_1_2017.jpg") no-repeat center top;
    overflow: hidden;
    background-size: cover;
    }
    
    .heroCopy
    {
    bottom: 32%;
    }

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