#home.page-pricing
	.hero
		background: url('../images/bzpro-hero.jpg') no-repeat
		background-size: cover
		padding: 90px 0
		height: auto
		h1, h2
			color: white
			text-align: center
			font-weight: 300
		h1
			font-size: 2.5rem
			line-height: 3rem
			margin-bottom: 20px
			strong
				font-weight: 600
		h2
			font-size: 1.2rem
			line-height: 1.8rem
			max-width: 810px
			margin: 0 auto
	.change-pricing
		padding: 30px 0 35px
		text-align: center
		h1
			font-weight: 400
			font-size: 1rem
			margin-bottom: 10px
			color: #808080
		&-switch
			background: white
			border: 1px solid #B7B8B9
			border-radius: 25px
			display: block
			height: 30px
			margin: 0 auto
			position: relative
			width: 70px

			label
				color: #2EB647
				font-size: 1rem
				font-weight: 400
				line-height: 30px
				text-transform: uppercase
				transition: color .2s ease
				width: 85px
				cursor: pointer
				&:nth-of-type(1)
					left: -155%
					position: absolute
					text-align: right
				&:nth-of-type(2)
					position: absolute
					right: -155%
					text-align: left

			input
				height: 30px
				cursor: pointer
				left: 0
				margin: 0
				opacity: 0
				position: absolute
				top: 0
				width: 70px
				z-index: 2

			&-toggle
				background: #2EB647
				border-radius: 50%
				height: 24px
				left: 0
				position: absolute
				top: 3px
				transition: left .2s ease
				width: 24px
				z-index: 1
				&.monthly
					left: 3px
				&.annual
					left: 43px
	.products
		font-size: 0
		background: white
		.package
			position: relative
			overflow: hidden
			&:not(:last-of-type)
				margin-bottom: 20px
			.button
					width: 100%
					display: block
			&-expanded
				.package-features
					position: static // just for now. Do animation
			&-box
				background-color: black
				padding: 20px 60px 20px 20px
				position: relative
				height: 100px
				box-sizing: border-box
				cursor: pointer
				.button
					display: none
				&:after
					font-family: 'bzpro-font'
					content: '\f108'
					position: absolute
					right: 20px
					font-size: 20px
					color: white
					top: 0
					height: 100px
					line-height: 110px
				&-header, &-subheader
					float: left
					width: 100%
				&-header-price, &-header-name, &-subheader-occurrence
					color: white
					width: 50%
				&-header
					&-price
						float: right
						text-align: right
						font-size: 2.25rem
						font-weight: 400
						.interval
							font-size: 1.125rem
					&-name
						float: left
						font-size: 1.5rem
						font-weight: 400
				&-subheader
					font-size: 0.875rem
					&-occurrence
						text-align: right
						float: right

				&-popular
					background-color: #2EB647
					&:before
						background-color: #2EB647
						text-transform: uppercase
						color: white
						font-size: 0.9375rem
						left: 20px
						position: absolute
						bottom: 20px
						content: 'MOST POPULAR'
				&-enterprise
					display: none
			&-features
				position: absolute
				bottom: 0 // - HEIGHT px for dropped down
				width: 100%
				padding: 20px
				box-sizing: border-box
				z-index: -1
				background-color: #F4F5F6
				&-exclusive
					color: #2EB647
					&:before
						color: #2EB647
						border-color: #2EB647 !important // TEMPORARY
				ul
					margin: 0
					font-size: 1rem
					padding: 0
					list-style-type: none
					li
						margin: 0 0 20px 25px
						position: relative
						&:before
							font-family: 'bzpro-font'
							content: '\f107'
							position: absolute
							border: 1px solid black
							border-radius: 50%
							padding: 3px
							font-size: .6rem
							left: -25px
		.callus
			text-align: center
			font-size: 1rem
			line-height: 1.6875rem
			font-weight: 400
			margin: 10px 0 0
			padding-bottom: 30px
			color: #666
			a
				text-decoration: none
				color: #2EB647
	.features, .questions
		font-size: 0
		h1
			font-weight: 300
			color: #666
			padding: 50px 0
			font-size: 1.5rem
		h2
			color: #666
			font-weight: 600
			font-size: 1.125rem
		ul
			width: 100%
			list-style-type: none
			margin: 0
			padding: 0
			display: inline-block
			vertical-align: top
		p
			font-size: 1.062rem
			color: #666
			line-height: 1.37625rem
			margin: 10px 0 50px
	.features
		background: white
		h1
			border-top: 1px solid #DDD
	.questions
		background-color: #F4F5F6
		section
			border-bottom: 1px solid #DDD

	@media (min-width: 1000px)
		.hero
			h1
				font-size: 3rem
			h2
				font-size: 1.3755rem
				line-height: 2.0625rem
		.change-pricing
			padding-bottom: 55px

		.products
			.package
				margin-bottom: 60px
				width: calc((100% - 76px) / 4)
				display: inline-block
				vertical-align: top
				margin-right: 25px
				overflow: visible
				&:last-of-type
					margin-right:0
				&-box
					padding: 20px
					height: auto
					cursor: default
					float: left
					border-top: 3px solid #2EB647
					.button
						display: block
						margin-top: 30px
						float: left
					&:after
						content: ' '
					&-header, &-subheader
					float: left
					width: 100%
					&-header-price, &-header-name, &-subheader-occurrence
						color: white
						width: 50%
					&-header
						&-price
							width: 100%
							text-align: center
							padding-top: 15px
							font-size: 3rem
						&-name
							width: 100%
							text-align: center
					&-subheader
						&-occurrence
							float: right
							width: 100%
							text-align: center

					&-popular
						background-color: black
						&:before
							background-color: #2EB647
							height: 25px
							line-height: 28px
							text-align: center
							text-transform: uppercase
							color: white
							font-weight: 600
							font-size: 0.9375rem
							left: 0
							width: 100%
							position: absolute
							bottom: 100%
							content: 'MOST POPULAR'
					&-enterprise
						display: inline-block
						background-color: #666
						border-color: #2A80B7
						.package-box-header-price
							font-size: 1rem
							line-height: 1.3125rem
				&-features
					position: static
					float: left
					padding: 20px 0
					background-color: transparent
					.button
						display: none
					ul
						margin: 0
						padding: 0
						list-style-type: none
						li
							&:last-of-type
								margin-bottom: 0

		.features, .questions
			h1
				font-size: 2.25rem
		.features
			ul
				width: calc((100% - 100px) / 3)
				&+ul
					margin-left: 50px
		.questions
			background-color: #F4F5F6
			section
				border-bottom: 1px solid #ddd
			ul
				width: calc((100% - 60px) / 2)
				&+ul
					margin-left: 60px