/* ----------------------------------------------------------------------------------------------------------  UPGRADE OPTIONS PAGE ---------------- */

.upgrade-options-page #header{
	padding-bottom:30px;
}

.upgrade-options-page .free{
	top:-40px;
}

	.PriceMonthly {
		text-align: right;
    	margin: -10px 15px 0 0;
	}
	.PriceMonthly span { color:#fff;}

#chart{
	margin-bottom:100px;
	border:1px solid #eee;
	background:#fff;
	padding:3px;
	margin-top:50px;
}



.container1{
	float: left;
	width: 100%;
	position: relative;
	right: 16%;
	background: #fff;
		
}



.container2{
	clear: left;
	float: left;
	width: 100%;
	position: relative;
	right: 16%;
	background: #fcf0f0;
}

.container3 {
	clear: left;
	float: left;
	width: 100%;
	position: relative;
	right: 16%;
	background: #f8e1df;
}

.container4 {
	clear: left;
	float: left;
	width: 100%;
	position: relative;
	right: 16%;
	background: #eedce4;
}

.container5 {
	clear: left;
	float: left;
	width: 100%;
	position: relative;
	right: 16%;
	background: #e8d1db;
}

.container6 {
	clear: left;
	float: left;
	width: 100%;
	overflow: hidden;
	background: #e3c6d2;
}

.dark .container1{
	background:#f0f0f0;
}
.dark .container2{
	background:#fbebeb;
}
.dark .container3{
	background:#f6d8d6;
}
.dark .container4{
	background:#e9d2dc;
}
.dark .container5{
	background:#e1c3d0;
}
.dark .container6{
	background:#dab5c4;
}

.col1{
	font-size:85%;
	padding:10px 0px;
	color:#7e556d;
	text-transform: capitalize;
}

.col2, .col3, .col4, .col5, .col6{
	text-align:center;
	font-size:75%;
	padding:10px 0px;
	text-transform: capitalize;
}

.col1{
	float: left;
	width: 16%;
	position: relative;
	left: 82%;
	overflow: hidden;
	
}

.col2{
	float: left;
	width: 12%;
	position: relative;
	left: 86%;
	overflow: hidden;

}
.col3{
	float: left;
	width: 12%;
	position: relative;
	left: 90%;
	overflow: hidden;

}
.col4{
	float: left;
	width: 12%;
	position: relative;
	left: 94%;
	overflow: hidden;
}
.col5{
	float: left;
	width: 12%;
	position: relative;
	left: 98%;
	overflow: hidden;
}
.col6{
	float: left;
	width: 12%;
	position: relative;
	left: 102%;
	overflow: hidden;
}

.col2.tick, .col3.tick, .col4.tick, .col5.tick, .col6.tick{
	padding:9px 0px 0px 0px;
}

.col2.tick img, .col3.tick img, .col4.tick img, .col5.tick img, .col6.tick img{
	width:18px;
}


.first .col1{
	padding-top:100px;
}

.first .col2, .first .col3, .first .col4, .first .col5, .first .col6{
	font-weight:400;
	color:#7e556d;
	padding-top:70px;
	font-size:120%;
}

#chart #button1, #chart #button2, #chart #button3, #chart #button4, #chart #button5{
	width:112px;
	height:112px;
	display:block;
	position:absolute;
	margin-left: 218px;
	margin-top: -50px;
	z-index:999999;
	background:url(../images/simple-plan-btn.png);
}

#chart #button2{
	margin-left: 371px;
	background:url(../images/sassy-plan-btn.png);
}
#chart #button3{
	margin-left: 526px;
	background:url(../images/smitten-plan-btn.png);
}
#chart #button4{
	margin-left: 683px;
	background:url(../images/smart-plan-btn.png);
}
#chart #button5{
	margin-left: 835px;
	background:url(../images/savvy-plan-btn.png);
}
.first .container2 img, .first .container3 img, .first .container4 img , .first .container5 img, .first .container6 img{
display:none;
}

.upgrade-options-page .button {
float: none;
margin: 0 auto;
color: #fff;
font-weight: 400;
font-size: 14px;
padding: 7px 20px;
cursor: pointer;
box-shadow: 4px 4px 9px 0px rgba(119, 119, 119, 0.75);
-moz-box-shadow: 4px 4px 9px 0px rgba(119, 119, 119, 0.75);
-webkit-box-shadow: 4px 4px 9px 0px rgba(119, 119, 119, 0.75);
background: #98375f;
text-align: center;
}

.upgrade-options-page span{
	display:block;
}

.upgrade-options-page #monthly{
	display:block;
	height:25px;
	line-height:25px;
	padding:0px;
	width:65%;
	background:#7e556d;
}
.upgrade-options-page h2 {
    border-bottom: 1px solid #ddd;
    color: #81566d;
    font-size: 170%;
    margin-bottom: 20px;
    margin-top: 40px;
    padding-bottom: 6px;
}
.upgrade-options-page ul{
	padding:0;
	margin:0;
}
.upgrade-options-page .content  ul li{
	padding:0;
	margin:0;
	list-style: none;
	color:#6c6c6c;
	clear:both;
	height:40px;
	font-size:90%;
	border-bottom:1px solid #ddd;
	padding-top:8px;
}
.upgrade-options-page .content .extras ul li{
	border:none;
	height:auto;
}
.upgrade-options-page .pricingcircle {
float:left;
margin:10px;
}
.upgrade-options-page .pricingcircle img {
width:100%;
}

.upgrade-options-page .content .extras .centered{
	margin:50px 0px;
}
.extras {
margin-bottom:100px;
}
@media all and (max-width: 980px)  {

	#chart #button1, #chart #button2, #chart #button3, #chart #button4, #chart #button5{
		display:none;
	}
	
	#chart{
		margin-top:0px;
	}
	
	.first .container2 img, .first .container3 img, .first .container4 img , .first .container5 img, .first .container6 img{
		display:block;
		width:100%;
		margin-bottom:10px;
	}
	
	.first .col2, .first .col3, .first .col4, .first .col5, .first .col6{
		padding:20px 0px;
	}
}

@media all and (max-width: 670px)  {
	
	.upgrade-options-page .button{
		font-size:10px;
		padding:7px 10px;
	}
	
	
	
@media all and (max-width: 320px)  {
	
	.upgrade-options-page .button, .upgrade-options-page #monthly{
		font-size:10px;
		padding:2px 5px;
		height:10px;
		line-height:10px;
	}
	
	.first .col1{
		padding-top:0px;
	}
	
	#chart{
		margin-top:40px;
	}
	
	
}