/********************* New styles June 2019 **********************/
	@media (max-width: 768px) {
		.mobile-only {display:block !important;}
		.desktop-only {display:none !important;}
	}
	@media (min-width: 411px) {
		.for-desktop-only {display:block !important;}
		.for-mobile-only {display:none !important;}
	}
	@media (max-width: 410px) {
		.for-desktop-only {display:none !important;}
		.for-mobile-only {display:block !important;}
	}
.clear {clear: both;}

/******* call out box feature ********/
/******* Overwrite Bootstrap styles to add gutters ********/
.col-md-4a {width: 30%;}
.col-sm-4a {width: 30%;}
.col-md-offset-1 {margin-left: 3%;}
	@media (min-width: 992px) {
		.col-md-4a {width: 30%;}
		.col-sm-4a {width: 30%;}
		.col-md-offset-1 {margin-left: 3%;}
	}
	@media (min-width: 768px) {
		.col-md-4a {width: 30%;}
		.col-sm-4a {width: 30%;}
		.col-md-offset-1 {margin-left: 3%;}
	}
	@media (max-width: 415px) {
		.col-md-4a {width: 100%;}
		.col-sm-4a {width: 100%;}
		.col-md-offset-1 {margin-left: 3%;}
	}
/******** Font styles ********/
h2.center,h3.center,h4.center,h5.center,p.center {text-align: center;}
p.smCopy {font-size: 14px;}
p.xlrgCopy {font-size: 54px;line-height: 1.5em;font-weight: 600;}

/******** Margin and Padding ********/
.noPadding {padding: 0 !important;}
.noMargin {margin:0 !important;}
.noPadMargin {padding:0 !important;margin: 0 !important;}
.topMarginBoxes {margin-top: 80px;}
.paraPadding {padding: 5%;}
.paddingBtm2 {padding-bottom: 2%;}
.paddingBtm {padding-bottom: 5%;}
.padBtmGreyBox {padding-bottom:22%;}/*main ars page*/
.padBtmGreyBox2 {padding-bottom:14%;}/*membership page*/
.padBtmWhtBox {padding-bottom:20%;}
.padBtmPayBox {padding-bottom:10%;}/*pay box*/
/******** Font and Background Colors ********/
.bg-md-grey {background-color:#eaeaea;border-radius: 6px;}

/******** Alignment styles ********/
.centerItems {text-align: center;}

/******** Border styles ********/
.borderBlue {border:solid 1px #0033a0;border-radius: 6px;}

/******** Icon styles ********/
.iconMargin {margin-bottom: 20px;}
.iconFeatures {margin:-40px 60px 20px;}
.iconBulletContainer {display:flex;justify-content: center;}
.iconBullet {padding: 0 0 5%;}
.iconMainContainer {text-align:center;display:flex;margin-bottom: 25px;justify-content:center;flex-wrap:wrap;}
.icon_container {margin:0 auto;align-self: baseline;}
.icon_container {display: block;text-align: center;font-weight: 600;color:#213647;}
.icon-tow {margin-left:0}
.icon-battery {margin-left:0}
.icon-fuel {margin-left:20px;}
.icon-lockout {margin-left:30px;}
/****** Fix for icons in IE ******/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	.icon_container {margin:20px;}
}
/******** Call Out Box styles ********/
.callOutContainer {margin-top:40px;margin-left:5px;}
.whiteBox {background-color:#fff;border-radius: 6px;padding:0 15px;}
.whiteBox h3 {margin-bottom:10px;}
.whiteBox p.xlrgCopy {font-size: 54px;line-height: 1.5em;font-weight: 600;margin:2px 0;}
.whiteBox p.smCopy {font-size: 14px;margin:2px 0;}
.greyBox {background-color:#eaeaea;padding:0 15px;border-radius: 6px;}
.greyBox h3 {margin-bottom:10px;}
.greyBox p.xlrgCopy {font-size: 54px;line-height: 1.5em;font-weight: 600;margin:2px 0;}
.greyBox p.smCopy {font-size: 14px;margin:2px 0;}
.smGreyBox {width:100%;background-color:#eaeaea;border-radius: 6px;margin-top:2%;}
.smGreyBox p {padding:2%;}
.smGreyBox2 {width:95%;background-color:#eaeaea;border-radius: 6px;margin:2% 0 0 2%;}
.smGreyBox2 p {padding:2%;}
.smWhiteBox p, ul, li {font-weight: 700}
.smWhiteBox ul {list-style: none;}
	@media only screen and (max-width: 500px){
		.greyBoxTopMargin {margin-top:40px;}/*added top marging for second grey box in mobile*/
	}
/****** ARS table/chart mobile bsFreeTextCarousel ******/
	@media only screen and (max-width: 768px) {
	.arsChartMobile {margin:0;padding: 0;width:100%;font-family: 'Open Sans', sans-serif;}
	.arsChartMobileCol {width:100%;margin:0;padding: 0;float:left;}
	.arsChartMobileCol .title {background-color:#e44b4f;height:40px;text-align:center;padding:10px 0;}
	.arsChartMobileCol .title h3, .arsChartCol3 .title h3 {color:#fff;font-size:18px;text-align:center;padding:15px 0 10px 0 !important;}
	.arsChartMobileCol .content{text-align:center;padding:10px 0 10px 0 !important;}
	.arsChartMobileCol .content p {color:#2F3847;font-size:16px !important;font-style:normal;font-stretch:normal; line-height:1.29;letter-spacing:normal;text-transform:initial;margin:0 0 10px 0;padding:10px;}
	.arsChartMobileCol .divider {border-top: solid 2px #B9C6D3;}
	/*.bulletCheckMark {left:0;}*/

}
	/****** styles for freetxt carousel to not show on desktop ******/
	@media (min-width:769px) {
		.bsFreeTextCarousel .carousel-outer .carousel-control {display: none !important;}
		.bsFreeTextCarousel .carousel-outer .carousel-indicators li {display: none !important;}
		.bsFreeTextCarousel .carousel-outer .carousel-control.left .glyphicon, .bsFreeTextCarousel .carousel-outer .carousel-control.right .glyphicon {top: 50%;display: none !important;}
		.bsFreeTextCarousel .carousel-outer .carousel-indicators {bottom: -50px;display: none !important;}
		.desktop-only {display:block !important;}
		.mobile-only {display:none !important;}
	}
/************ End New styles June 2019 ************/

/*Roadside Assistance - 2018*/
img {width:auto}
.noMarPad {margin:0;padding:0}
.pad20 {padding:20px;}	
.h4-dark {font-size:14px;font-weight:bold;font-style:normal;font-stretch:normal;line-height:1.29;letter-spacing:normal;color:#333;}

@media only screen and (min-width: 769px) {  
.showMobile {display:none;}
}
@media only screen and (max-width: 768px) {  
.hideMobile {display:none;}
}

/*left navigation*/
.bsLeftNavigation .glyphicon {margin-right:10px;}
.bsLeftNavigation .glyphicon a {margin-right:-10px;}

/*Start Alert CTA*/
.alertCTA {margin:10px 0 0 0}
.rsaHelp {border-radius:5px;background-color:#fdfff8;border:#95d600 solid 1px;margin:0 0 10px 0;padding:0;}
.rsaHelp .rsaAssistance {height: 36px;font-family:inherit;font-size: 26px;font-style: normal;font-stretch: normal;font-weight:400;line-height: 1.2;letter-spacing: normal;text-align: left;color: #333333;margin:15px 0 0 20px;text-transform: none !important;}
.rsaHelp .btn-primary {width:161px;margin:15px;display:block;}
@media only screen and (min-width: 768px) and (max-width: 1199px) {  
	.rsaHelp .rsaAssistance {font-size:24px}
}
@media only screen and (max-width: 768px) {   	
	.rsaHelp .rsaAssistance {text-align:center;font-size:26px;margin-bottom:0}
	.rsaHelp .btn-primary {width:220px;margin:30px auto;display:block;}
}
	
.rsaApp {border-radius:5px;background-color:#f8f8f8;border:solid 1px #d8d8d8;margin:0 5px 0 0;padding:20px 10px 20px 20px;height:138px;}
.rsaPhone {border-radius:5px;background-color:#f8f8f8;border:solid 1px #d8d8d8;margin:0 0 0 5px;padding:20px 10px 20px 20px;height:138px;}
.rsaApp img, .rsaPhone img {display:block;}
.rsaApp h3, .rsaPhone h3 {margin-top:-24px}
.rsaApp h3, .rsaApp p, .rsaApp h4, .rsaPhone h3, .rsaPhone p, .rsaPhone h4 {margin-left:45px;}
.phoneNo {color:#000;font-weight:bold;}
.phoneNo:hover {text-decoration:underline;}
@media only screen and (max-width: 768px) {
	.rsaApp {margin:0 0 10px 0;padding:10px;height:auto;}
	.rsaPhone {margin:0 0 10px 0;padding:20px;height:auto;}
	.rsaApp img, .rsaPhone img {display:none;width:1px;}
	.rsaApp h3, .rsaPhone h3 {margin-top:0}
	.rsaApp h3, .rsaApp p, .rsaApp h4, .rsaPhone h3, .rsaPhone p, .rsaPhone h4 {text-align:center;margin-left:0;padding:0 5%;}
}
/*End Alert CTA*/

/*Start Blue CTA*/
.blueCTA {width:100%;border-radius:10px;background-color:#0033a0;text-align:center;margin:30px 0;}
.blueCTA p {color:#fff;padding:10px}
.blueCTA a {color:#fff;text-weight:bold;text-decoration: underline;}
/*End Blue CTA*/

/*Start grayBorder*/
.grayBorder {border-radius:5px;background-color:#f8f8f8;border:solid 1px #d8d8d8;padding:20px;}	
.grayBorderLeft {border-radius:5px;background-color:#f8f8f8;border:solid 1px #d8d8d8;padding:20px;margin-right:15px;margin-bottom:20px;text-align:center;height:294px;}
.grayBorderLeft1 {border-radius:5px;background-color:#f8f8f8;border:solid 1px #d8d8d8;padding:20px;margin-right:15px;margin-bottom:20px;text-align:left;height:470px;}
.grayBorderRight {border-radius:5px;background-color:#f8f8f8;border:solid 1px #d8d8d8;padding:20px;margin-left:15px;margin-bottom:20px;text-align: center;height:294px;}
.grayBorderRight1 {border-radius:5px;background-color:#f8f8f8;border:solid 1px #d8d8d8;padding:20px;margin-left:15px;margin-bottom:20px;text-align: left;height:470px;}
.grayBorder img {margin-bottom:10px;}
.grayBorderLeft img, .grayBorderRight img, .grayBorderLeft1 img, .grayBorderRight1 img {padding-bottom:20px}
.grayBorder .widthFull {width:100%;}
.grayBorder .displayCenter, .grayBorderLeft .displayCenter, .grayBorderRight .displayCenter {width:auto;margin:0 auto;display:block;}
.grayBorder .btn-primary  {width:313px;}
.grayBorderLeft .btn-primary, .grayBorderRight .btn-primary, .grayBorderLeft1 .btn-primary, .grayBorderRight1 .btn-primary {width:298px;}	
@media only screen and (max-width: 768px) { 
	.grayBorderLeft, .grayBorderLeft1 {margin-right:0;height:auto;}
	.grayBorderRight, .grayBorderRight1 {margin-left:0;height:auto;text-align:center;}
	.grayBorder .displayNone {display:none}
	.grayBorder h2, .grayBorder p {text-align:center;padding:0  6%}	
	.grayBorder h2 {margin-bottom:10px;}
	.grayBorder .btn-primary {display:block;width:220px;margin:0 auto;}
	.grayBorderLeft .btn-primary, .grayBorderLeft1 .btn-primary {display:block;width:260px;margin:0 auto;}
	.grayBorderRight .btn-primary, .grayBorderRight1 .btn-primary {display:block;width:260px;margin:0 auto;}
}
/*End grayBorder*/

/*Start iconComponent*/
.iconComponent img {margin:15px 0;width:80px;}	
.iconComponent p.sub-head {margin-bottom:10px}
@media only screen and (max-width: 768px) {
	.iconComponent img {margin:15px auto;width:80px;}		
	.iconComponent h3, .iconComponent p {text-align:center;}
	.iconComponent p {padding:0 6%}
}
/*End iconComponent*/

/*Start three-upFeature*/
.three-upFeature img {width:150px;margin:0 auto 20px;}
.three-upFeature h3 {text-align:center;margin-bottom:15px;}
.three-upFeature p {text-align:center;padding:0 10%}
@media only screen and (max-width: 768px) {
	.three-upFeature p {padding:0 20%}
}
/*End three-upFeature*/

/*Start twoPlans*/
.plan {padding:0 30px 0 20px}
@media only screen and (max-width: 768px) {
   .planStar {width:80px;margin:0 auto;display:block;}
   .plan {padding:20px;text-align:center;}
}
/*End Blue CTA*/

/*roadside assistant table*/
/*Desktop view - Roadside Service Chart/table */
.rsaPlans {margin:20px 0 30px 0;padding: 0;width:100%;}
@media only screen and (max-width: 768px) {  
.rsaPlans {display:none;}
}
.rsaPlansCol {width:25%;margin:0;padding: 0;float:left;}
.rsaPlansCol .content{height:60px !important;text-align:left;border-bottom:solid 2px #d8d8d8;}

.rsaPlansCol .title {height:70px;text-align:center;}
.rsaPlansCol .content p {color:#333;font-size:14px !important;font-weight:bold;font-style:normal;font-stretch:normal; line-height:1.29;letter-spacing:normal;text-transform:initial;padding:15px 10px 0 10px;}

.rsaPlansCol2, .rsaPlansCol3, .rsaPlansCol4 {padding:0;margin:0;width:24%;float:left;}
.rsaPlansCol2, .rsaPlansCol3 {border-right:solid 2px #fff;}
.rsaPlansCol2 .title, .rsaPlansCol3 .title, .rsaPlansCol4 .title {background-color:#e9e9e9;text-align:center;height:70px;}
.rsaPlansCol2 .title h3, .rsaPlansCol3 .title h3 {color:#333;font-size:16px;text-align:center;padding:15px 0;}
.rsaPlansCol2 .content, .rsaPlansCol3 .content, .rsaPlansCol4 .content {border-bottom: solid 2px #d8d8d8;height:60px !important;padding:0 5%;text-align:center}
.rsaPlansCol2 .arrow-down-white, .rsaPlansCol3 .arrow-down-white, .rsaPlansCol4 .arrow-down-white{border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid #e9e9e9;width:0;margin:0 auto;z-index:200;}
.rsaPlansCol2 .content p, .rsaPlansCol3 .content p, .rsaPlansCol4 .content p {font-size:14px;padding: 15px 0 0;}
.rsaPlansCol2 .content img,.rsaPlansCol3 .content img, .rsaPlansCol4 .content img {margin:0 auto;padding:15px 0;width:20px;display:block;}
.grey {background-color:#f8f8f8;}
.no-border-bottom {border-bottom:none !important;}
/*.mobileamcPlans {display: none;}*/

@media only screen and (min-width: 769px) {
	#w1523686951248 {display:none !important;}
	#w1523686948320 {display:none !important;}
}
@media only screen and (max-width: 768px) {
	.rsaPlansMobile {margin:0;padding: 0;width:100%;}
	.rsaPlansMobileCol {width:100%;margin:0;padding: 0;float:left;}
	.rsaPlansMobileCol .title {background-color:#e9e9e9;height:90px;text-align:center;padding:20px 0;}
	.rsaPlansMobileCol .title h3, .rsaPlansCol3 .title h3 {color:#333;font-size:16px;text-align:center;padding:15px 0;}
	.rsaPlansMobileCol .greyArrow {border-left:15px solid transparent;border-right:15px solid transparent;border-top:15px solid #e9e9e9;width:0;margin:-15px auto 15px;z-index:200;}
	.rsaPlansMobileCol .content{;text-align:center;border-bottom:solid 2px #d8d8d8;padding:15px 0 10px 0 !important;}
	.rsaPlansMobileCol .content p {color:#333;font-size:14px !important;font-style:normal;font-stretch:normal; line-height:1.29;letter-spacing:normal;text-transform:initial;margin:0 0 10px 0}
	.rsaPlansMobileCol .content .btn-primary {width:200px;margin:0 auto;}
}

.grey {background-color:#f8f8f8;}
.no-border-bottom {border-bottom:none !important;}
.mobileamcPlans {display: none;}

/*membership table*/
/*Desktop view - Motor Club Plan Chart/table */
.amcPlans {margin:0;padding: 0;width:100%;}
/*@media only screen and (max-width: 768px) {  
   .amcPlans {display:none;}
}*/
.amcPlansCol {width:27%;margin:0;padding: 0;float:left;}
.amcPlansCol .content{height:60px;text-align:left;border-bottom:solid 2px #d8d8d8;}

.amcPlansCol .title {height:60px;text-align:center;}
.amcPlansCol .content p {color:#333;font-size:14px !important;font-weight:bold;font-style:normal;font-stretch:normal; line-height:1.29;letter-spacing:normal;text-transform:initial;padding:15px 5px 0 5px;}

.amcPlansCol2, .amcPlansCol3 {padding:0;margin:0;width:36%;float:left;border-right:solid 1px #fff;}
.amcPlansCol2 .title, .amcPlansCol3 .title {background-color:#e9e9e9;text-align:center;height:60px}
.amcPlansCol2 .title h3, .amcPlansCol3 .title h3{color:#333;font-size:16px;text-align:center;padding:15px 0;}
.amcPlansCol2 .content, .amcPlansCol3 .content{border-bottom: solid 2px #d8d8d8;height:60px;padding:0 5%;text-align:center}
.amcPlansCol2 .arrow-down-white, .amcPlansCol3 .arrow-down-white{border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid #e9e9e9;width:0;margin:0 auto;z-index:200;}
.amcPlansCol2 .content p, .amcPlansCol3 .content p {font-size:14px;padding: 15px 0 0;}
.amcPlansCol3 .content img {margin:0 auto;padding:20px 0;width:20px;display:block;}
.amcPlansCol2 .content .btn-primary, .amcPlansCol3 .content .btn-primary {margin-top:20px;width:200px;}
.grey {background-color:#f8f8f8;}
.border-top {border-top:1px solid #ccc;}
.no-border-bottom {border-bottom:none !important;}
.mobileamcPlans {display: none;}


.popover {position: absolute;top: 0;left: 0;z-index: 1060;display: none;max-width: 276px;padding: 1px;
 text-align: left;white-space: normal;background-color: #fff; -webkit-background-clip: padding-box;background-clip: padding-box;border: 1px solid #ccc;border: 1px solid rgba(0, 0, 0, .2);border-radius: 6px;-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);box-shadow: 0 5px 10px rgba(0, 0, 0, .2);}
.popover.left {margin-left: -10px;margin-top:-22px;}
.popover-content {padding: 9px 14px !important;width:100%;}
.popover > .arrow,
.popover > .arrow:after {position: absolute;display: block;width: 0;height: 0;border-color: transparent;border-style: solid;}
.popover > .arrow {border-width: 11px;}
.popover > .arrow:after {content: "";border-width: 10px;}
.popover.left > .arrow {top: 50%;right: -11px;margin-top:11px;border-right-width: 0;border-left-color: transparent !important;border-left-color: rgba(0, 0, 0, .25);}
.popover.left > .arrow:after {right: 1px;bottom: -10px;content: " ";border-right-width: 0;border-left-color: #fff;}

@media only screen and (min-width: 501px) and (max-width: 768px) { 
	.popover {max-width:200px;}
}
@media only screen and (min-width: 426px) and (max-width: 500px) { 
	.popover {max-width:150px;}
}
@media only screen and (min-width: 300px) and (max-width: 425px) { 
	.popover {max-width:125px;}
}