#pricing-group-slider {
	margin-top: 3em;
	margin-bottom: 3em;
	margin-right: 5em;
	margin-left: 5em;
}

#pricing-group-handle {
	width: 10em;
	height: 4.5em;
	top: 50%;
	margin-top: -2.25em;
	margin-left: -5em;
	padding-top:0.4em;
	text-align: center;
	font-weight: normal;
	line-height: 1.3;
	vertical-align: middle;
	background: #00c6b3;
	color: #000;
}

#pricing-details {
	display: none;
}

.culled #pricing-group-handle {
	background: #F40;
}

.culled button {
	border-color: #F40;
	color: #F40;
}

#pricing-cull {
	color: #F40;
	display: none;
}

.culled #pricing-cull {
	display: block;
}

div.users {
	font-weight: bold;
	font-size: 120%;
}

@media (hover: none) {
	#pricing-group-slider {
		margin-right: 1em;
		margin-left: 1em;
	}
	#pricing-group-handle {
		width: 36px;
		height: 36px;
		font-size: 1px;
		top: 50%;
		margin-top: -18px;
		margin-left: -18px;
	}
	#pricing-details {
		display: block;
		margin-bottom: 1.5em;
		text-align:center;
	}
	#pricing-details div {
		font-size: 120%;
	}
	#pricing-details div.users {
		color: #00ffe7;
		font-size: 160%;
	}
}
#pricing-group-handle .pricing, #pricing-group-handle .storage {
	font-size: 90%;
}
.pricing-group .pricing-description * {
	text-align: center;
}
.pricing-group .pricing-note, .pricing-group-interval, .pricing-group-button {
	text-align: center;
}
.pricing-note {
	margin-top: 1em;
	margin-bottom: 1em;
}
.pricing-group-button {
	padding-top: 1em;
	padding-bottom: 1em;
}
.pricing-group-interval div {
	display: inline-block;
	vertical-align: middle;
}
label#monthly, label#yearly {
	display: inline-block;
	height:34px;
	font-weight: bold;
	padding:7px;
}

span.per-month {
	font-family: 'Open Sans Condensed', sans-serif;
	color: #888;
	font-weight: 700;
	letter-spacing: 1px;
	margin-top: 10px;
	font-size: 13px;
	line-height: 90%;
	text-transform: uppercase;
}

@media (min-width: 640px) {
	label#monthly, label#yearly {
		font-size: 120%;
	}
}

label#yearly {
	color: #00ffe7;
}

#plan-basic a:hover {
	color: #ffac3b;
}

#plan-premium a:hover {
	color: #00ffe7;
}

button#affiliate:disabled {
	background-image: url('/assets/images/plan-selected-background.png');
	background-size: 62px 62px;
	background-origin: 4px 4px;
	background-repeat: no-repeat;
	background-color: #ffac3b;
	color: #000;
}

button#outline:disabled {
	background-image: url('/assets/images/plan-selected-background.png');
	background-size: 62px 62px;
	background-origin: 4px 4px;
	background-repeat: no-repeat;
	background-color: #00c6b3
	color: #000;
}

.ind-plan.selected#plan-basic {
	box-shadow:0 0 40px 20px rgba(255,128,0,0.5);
}

.ind-plan.selected#plan-basic span.per-month {
	color: #ffac3b;
}

.ind-plan.selected#plan-premium {
	box-shadow:0 0 40px 20px rgba(0,255,255,0.5);
}

.ind-plan.selected#plan-premium span.per-month {
	color: #00c6b3
}

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	top:-7px;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(128,128,128,0.5);
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: #FFF;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
	background-color: #00c6b3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #00c6b3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}