/* Prog overview */
#mma{background: none !important; border-bottom: none !important;}
#mma .wrap{
    padding: 0;
}
#mma .imageWrap{
    background-image: url(/Content/images/progressive_insurance/progressive_overview_background.jpg);
}
@media screen and (min-width: 481px){
    #mma .imageWrap{
        height: 220px;
    }
}


#body {border-top: none; margin-top: 0;}
aside.promotional
{
    margin: 1em auto 5.5em auto;
    padding-top: 3.5em;
    clear: both !important;
    height: 14em;
    width: 90%; 
    background: url(/content/images/shared/horizontal-hairline-gradient.png) top center no-repeat;
    background-size: contain;
}
aside.promotional .contentRight h5, aside.promotional .contentRight p
{
    text-align: left;
    font-family: Humanist777BT-LightB, Arial, Verdana, sans-serif;
}
 aside.promotional .contentRight h5
{
  font-size: 2.4em;
  color: #ff8a00;
}
aside.promotional .contentRight p
{
  font-size: 1.6em;
}
aside.promotional .lowerHairline 
{
    background: url(/content/images/shared/horizontal-hairline-gradient.png) bottom center no-repeat;
    background-size: contain;
    height: 2.5em;
    clear: both;  
}
@media screen and (max-width: 750px)/*--------------------------------Max width: 750px-------------------------------------Max width: 750px------------------------------------------Max width: 750px------------*/ 
{
.crop{
	float:left;
	overflow:hidden; /* this is important */
	}
	/* input values to crop the image: top, right, bottom, left */
.crop img
{
    min-height: 120px;
    min-width: 900px;
	margin: 0 0 0 -25%;
	}

}
@media screen and (max-width: 670px)/*--------------------------------Max width: 670px-------------------------------------Max width: 670px------------------------------------------Max width: 670px------------*/ 
{
.crop img
{
    min-height: 90px;
    min-width: 850px;
    margin: 0 0 0 -29%;
	}

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

aside.promotional .imgLeft
{width: 100%;    
 float: none;
    }
 aside.promotional .imgLeft img
{display: none;
}  
aside.promotional .contentRight
{width: 100%;    
 float: none;
    }
}
@media screen and (max-width: 515px)/*--------------------------------Max width: 515px-------------------------------------Max width: 515px------------------------------------------Max width: 515px------------*/ 
{
.crop img
{
    min-height: 65px;
    min-width: 620px;
    margin: 0 0 0 -28%;
	}

}
@media screen and (max-width: 481px)/*--------------------------------Max width: 481px-------------------------------------Max width: 481px------------------------------------------Max width: 481px------------*/ 
{
#mma {margin-top: 0;}
article#contentContainer, #contentContainer {
margin-top: 3em;
}
}
@media screen and (max-width: 400px)/*--------------------------------Max width: 400px-------------------------------------Max width: 400px------------------------------------------Max width: 400px------------*/ 
{
.crop img
{
    min-height: 45px;
    min-width: 520px;
    margin: 0 0 0 -35%;
	}

#AutoXPrize .imageWrapper
{
  min-height: 26em;
  width: 120px; 
}
#ProgressiveField .imageWrapper
{
  min-height: 12em;
  width: 120px; 
}
}
@media screen and (min-width: 571px){

aside.promotional .imgLeft
{width: 20%;    
 float: left;
 min-width: 85px;
 margin-right: 15px;
    }
  aside.promotional .imgLeft img
{display: block;
    }
 aside.promotional .contentRight
{width: 70%;    
 float: left;
 clear: right;
    }
aside.promotional
{
    clear: both !important;
}
}