body{
  background: #edebeb;
  font-family: 'Open Sans', sans-serif;
}

.range-holder{
	margin: 0 auto;
	padding: 150px 0 0 0;
  /*width: 560px;*/
  width: 60%;
}

.dragdealer {
  position: relative;
  height: 10px;
  background: #AAA;
  border-radius: 8px;
  border: 1px solid #a7a7a7;
}
.dragdealer .handle {
  position: absolute;
  top: 0;
  left: 0;
}

.stripe{
	/*background: #ddd  url("https://dl.dropboxusercontent.com/u/4277345/codepen/stripe-bg.png") top left repeat;*/
	position: absolute;
	top: 0;
	left: 0;
	margin: 3px;
	height: 24px;
	border-radius: 8px;
}

	#green-highlight{position: absolute; top:0; left: 67px; height: 24px; opacity: .5; background: #8dc63f; display: none;}
	#orange-highlight{position: absolute; top:0; left: 381px; height: 24px; opacity: .5; background: #e07c00; display: none;}
	#blue-highlight{position: absolute; top:0; left: 814px; height: 24px; opacity: .5; background: #008da8; display: none;}

.square{
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -9px;
  margin-left: -14px;
  cursor: ew-resize;
  width: 20px;
  height: 20px;
  background: #2990ea;
  border-radius: 30px;
  color: #FFF;
  text-align: center;
  /*padding-top: 13px;*/
}

.menu-line{width: 50%; margin: 2px auto; height: 5px; background: #FFF; display: block;}

.infobox{
  cursor: ew-resize;
  text-align: center;
	position: absolute;
    top: 0;
    left: 0;
    margin-top: -145px;
    margin-left: -72px;
	width: 135px;
	height: 110px;
	background: #2990ea;
	padding: 0px;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
	border: #2990ea solid 2px;
}

	.infobox:after {
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 20px 23px 0;
		border-color: #2990ea transparent;
		display: block;
		width: 0;
		z-index: 1;
		bottom: -20px;
		left: 44px;
	}

	/*.infobox:before {
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 21px 24px 0;
		border-color: #008da8 transparent;
		display: block;
		width: 0;
		z-index: 0;
		bottom: -23px;
		left: 106px;
	}*/

	.titlebar{
		background: #008da8;
		color: #FFF;
		padding: .5em;
     line-height: 1.5em;
		font-size: 15px;
	}
	#plan-holder{font-weight: bold;}

	.innerbox{
		padding: 5px;
	}

	.info-price{color: #FFF; font-size: 20px; line-height: 22px; font-weight: 600;}
	.annual-label{color: #505054; font-size: 14px; font-weight: bolder; width: 110px; line-height: 22px;}
	.annual-price{color: #FFF; font-size: 35px; line-height: 30px;}

  .pre-price{color: #FFF; font-size: 35px;}
  /*.pre-price{color: #FFF; font-size: 20px; position: relative; top:-9px;}*/
  .products, .post-price{color: #FFF; font-size: 20px; line-height: 22px; font-weight: }

@media (max-width: 786px) {
  .info-price{color: #FFF; font-size: 15px; line-height: 22px;}
	.annual-label{color: #505054; font-size: 14px; font-weight: bold; width: 110px; line-height: 22px;}
	.annual-price{color: #FFF; font-size: 25px; line-height: 20px;}
  .pre-price{color: #FFF; font-size: 22px;}
  /*.pre-price{color: #FFF; font-size: 20px; position: relative; top:-9px;}*/
  .products, .post-price{color: #FFF; font-size: 15px; line-height: 18px;}

  .infobox{
    cursor: ew-resize;
    text-align: center;
  	position: absolute;
      top: 0;
      left: 0;
      margin-top: -120px;
      margin-left: -58px;
  	width: 110px;
  	height: 90px;
  	background: #2990ea;
  	padding: 0px;
  	/*-webkit-border-radius: 8px;
  	-moz-border-radius: 8px;
  	border-radius: 8px;*/
  	border: #2990ea solid 2px;
  }

  	.infobox:after {
  		content: '';
  		position: absolute;
  		border-style: solid;
  		border-width: 15px 18px 0;
  		border-color: #2990ea transparent;
  		display: block;
  		width: 0;
  		z-index: 1;
  		bottom: -17px;
  		left: 35px;
  	}

    .range-holder{
    	margin: 0 auto;
    	padding: 130px 0 0 0;
      /*width: 560px;*/
      width: 60%;
    }


}