#add_ons {
	margin-top:25px;
}

#ao_header_top {
	height:100px;
	width:100%;
	height:100px;

	color:#fff;
	background-color:#F89728;/*#F89728;*/
	position:relative;
}
#ao_header_bottom {
	clear:both;
}

#add_on_hd_br {
	display:none;
}

#ao_header_top {
	margin-bottom:10px;
}

.header_content {
	height:100px;
}

.header_content h2 {
	padding-top:18px;
	padding-top:20px;
	text-align:center;
	color:#fff;
	font-size:35px;
	font-family:"ProximaNovaSemiBold";
}

#add_on_content {
	border-left:5px black;
	border-right:5px black;
}

.add_on_box {
	width:43%;
	float:left;
	padding: 2% 3%;
	padding-bottom:475px;  /** this number needs tweaking based on the copy length **/
	background-color:#188ebb;
	margin-bottom:10px;
	margin-right:0.5%;
	margin-left:0.5%;
}

.add_on_box.dark {
	background-color:#188ebb;
}
.add_on_box.light {
	background-color:#31b6e7;
}
.add_on_box.orange {
	background-color:#f68b1b;
}

.add_on_box.full {
	clear:both;
	width:93%;
	float:initial;
	padding-bottom:50px;
}


.box_content {
	color:#ffffff;
	max-width:40%;
	position:absolute;
}

.full .box_content {
	max-width:100%;
	position:relative;
}


.add_on_box h1 {
    font-family: 'ProximaNovaSemiBold';
    font-size: 48px;
    line-height: 52px;
    margin-bottom: 20px;
}

.add_on_box p {
    width: 100%;
    margin-bottom: 15px;
    font-family: 'ProximaNovaThin';
    font-size: 26px;
    line-height: 30px;
}

.add_on_box.full p {
	width: 80%;
}

.add_on_box img {
	display:none;
}

.add_on_box.full img {
	max-width:20%;
	display:block;
	position:absolute;
	right:0px;
	top:0px;
}

.add_on_box p.value_disclaimer {
    font-size: 18px;
    line-height: 20px;
}





@media screen and (max-width:1250px) {
	
	.add_on_box h1 {
		font-size:38px;
		line-height:40px;
		margin-bottom:10px;
	}

	.add_on_box p {
		font-size:22px;
		line-height:26px;
	}

	.add_on_box p.value_disclaimer {
		font-size:14px;
		line-height:18px;
	}
}


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

    .add_on_box h1 {
	    font-size: 25px;
	    line-height: 28px;
	}

	.add_on_box p {
	    margin-bottom: 10px;
	    font-size: 18px;
	    line-height: 22px;
	}

	.header_content {
		height:100px;
	}

	.header_content h2 {
		font-size:30px;
		line-height: 45px;
		padding-top:26px;
	}


}


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

	.add_on_box {
		clear:both;
		width:93%;
		float:initial;
		padding-bottom:20px;
	}

	.box_content {
		max-width:100%;
		position:relative;
	}

	.add_on_box p {
		width: 100%;
	}

	.add_on_box.full p {
		width: 80%;
	}


    .add_on_box h1 {
	    font-size: 20px;
	    line-height: 24px;
	    margin-bottom:5px;
	}

	.add_on_box p {
	    font-size: 14px;
	    line-height: 15px;
	    font-family: 'ProximaNovaRegular';
	}


	.add_on_box p.value_disclaimer {
	    font-size: 12px;
	    line-height:14px;
	}

	.header_content {
		height:100px;
	}

	.header_content h2 {
		font-size:22px;
		line-height: 26px;
		padding-top:26px;
	}

	#ao_header_top {
    	height: 82px;
	}

}

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

	#add_ons {
	    margin-top: 25px;
	    background-image: url(../images/addon_1_bg_mobile.png);
	    background-repeat: no-repeat;
	    padding-top: 35%;
	    background-size: 100%;
	}

	.add_on_box h1 {
	    font-size: 18px;
	    line-height: 20px;
	}

    #add_on_hd_br {
    	display:inline;
    }

	.header_content h2 {
		font-size:28px;
		line-height: 30px;
		padding-top:12px;
	}

	#ao_header_top {
    	height: 82px;
    	margin-bottom:3px;
	}
}

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

	.add_on_box h1 {
    	font-size: 16px;
    	line-height: 18px;
    	margin-bottom:3px;
	}

	.add_on_box p {
	    font-size: 12px;
	    line-height: 13px;
	}

	.add_on_box p.value_disclaimer {
	    font-size: 10px;
	    line-height: 12px;
	}

	.header_content h2 {
		font-size:20px;
		line-height: 24px;
		padding-top:10px;
	}

	#ao_header_top {
    	height: 70px;
	}
}

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

	.header_content h2 {
		font-size:16px;
		line-height:20px;
		padding-top:8px;
	}

	#ao_header_top {
    	height: 55px;
	}
	

}

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