.price-container
	display: flex
	justify-content: center
	align-items: center
	flex-wrap: wrap

.price-box
	width: 240px
	box-sizing: border-box
	border-bottom: 1px solid #e5e5e5
	border-top: 1px solid #e5e5e5

	@include phone
		margin-top: 30px
	
	@include tablet
		margin-top: 10px
		
	

	&:first-of-type
		border-top-left-radius: 5px
		border-bottom-left-radius: 5px
		border-left: 1px solid #e5e5e5
		border-right: 1px solid #e5e5e5

		.price-bracket-heading
			border-top-left-radius: 5px
	
	&:last-of-type
		border-top-right-radius: 5px
		border-bottom-right-radius: 5px
		border-left: 1px solid #e5e5e5
		border-right: 1px solid #e5e5e5
	
		.price-bracket-heading
			border-top-right-radius: 5px


	&.price-popular
		box-shadow: 0 0 30px rgba(0,0,0,0.25)
		position: relative
		z-index: 1
	
		.price-highlight
			position: absolute
			display: block
			padding: 5px 0
			left: 0
			top: -17px
			width: 100%
			border: 1px solid #D5D5D5
			background: #fff
			text-align: center
			border-top-left-radius: 4px
			border-top-right-radius: 4px
			text-transform: uppercase
			font-family: $mont-light
			content: ""
			z-index: 2
			
	ul
		padding: 0 15px

		li
			padding: 6px 0
			border-bottom: 1px solid #e5e5e5
			position: relative
			font-family: $mont-light

			&.strike
				text-decoration: line-through
				color: #999
				font-weight: 300

				span
					display: none

			&.active

				span
					display: inline

	h5.text-light
		margin-bottom: 0  

	span
		color: #47a447
		font-weight: bold

	.price-bracket-heading
		padding: 20px
		background: #f9fafa
		text-align: center
		border-bottom: 1px solid #e5e5e5
		min-height: 200px

		h3
			color: #999
			margin-top: 15px

		h4
			font-size: 2em
			margin-top: 0
			margin-bottom: 25px
			font-weight: bold

			em, 
			span
				color: #999
				font-size: 12px
				display: block  

			em
				margin-bottom: 20px