.join
	position: relative

	nav.navbar
		background-color: white

		.navbar-brand
			color: $color-text

		li a.navbar-item
			color: $color-text

		.navbar-container
			+container-behavior

		.navbar-toggle
			border: 2px solid $color-text-dark-primary
			color: $color-text

		.navbar-nav
			+media-xs
				padding: 10px

	#page-header
		+media-lg
			min-height: 600px
		+media-xs
			background-size: cover
			background-position: right
		min-height: 500px

		.page-title,
		.page-title-summary
			line-height: 1.2em
			text-align: left
			text-shadow: 1px 1px 0 rgba(black, .5), 0 0 25px rgba(black, .5)

		.page-title-summary
			font-size: 1.4em

	li.special
		color: $color-success
		font-weight: bold

	.page-card
		&:nth-child(even)
			background-color: white

		&-header
			margin-bottom: 0

		&-side
			+media-xs
				width: 100%
				max-width: 100%

			&.text
				+media-xs
					padding-left: 50px
				padding:
					bottom: 150px
					top: 150px

		&.right
			background-color: $color-background-light

			.page-card-title,
			.page-card-summary
				padding-left: 25px

			.page-card-title:after
				left: 25px

			.text
				+media-xs
					padding-left: 25px

		&.intro
			+media-xs
				margin-left: 50px

			.page-card-side
				+media-sm
					max-width: 500px
				max-width: 600px

			padding:
				bottom: 0
				top: 50px

			&+.page-card-header
				padding-top: 0

			.page-card-summary
				font-size: 1.2em

			.page-card-image
				align-items: center
				display: flex
				height: 100%
				justify-content: center

		&.light
			overflow: hidden
			position: relative

			.learn
				color: white
				text-decoration: underline

			.page-card
				&-title
					color: white
					font-weight: bold

					&:after
						border-color: white

				&-summary
					color: white
					position: relative
					text-shadow: 1px 1px 0 rgba(black, .5), 0 0 25px rgba(black, .2)
					z-index: 1

					p
						font-size: .9em

						&.summary-action
							font-size: .8em

							a.page-card-cta
								font-size: .9em

					a
						color: white
						text-decoration: underline


			a.page-card-cta
				background: #ff4970
				border-radius: 3px
				border: none
				box-shadow: 1px 1px 0 rgba(black, .2)
				font-weight: bold
				margin-right: 15px
				margin-top: 25px
				padding: 7px 20px
				text-decoration: none
				text-shadow: none

				&:hover
					background: lighten(#ff4970, 5%)

			.page-card-image
				img
					+media-xs
						display: none
					max-width: initial
					position: absolute
					width: initial
					z-index: 0

		&.training
			margin-top: 45px

			a.page-card-cta
				background: #0082ff

			.page-card-image
				img
					right: 50px
					top: 50%
					transform: translateY(-50%)

		&.open-movies
			.page-card-image
				img
					top: 50px
					left: 50px

		&.services
			.page-card-image
				img
					left: 50px

		&.subscribe
			padding: 40px 0
			text-align: center

			span strong
				color: $color-danger

			.page-card-side
				width: 100%
				max-width: 100%

			.page-card-title
				line-height: 1.5em
				color: white
				text-align: center
				padding-bottom: 15px

				&:after
					border: none

			.page-card-summary
				color: $color-text-light-primary

			.page-card-cta
				text-align: center
				font-size: 1.3em
				padding: 7px 35px
				margin-right: initial
				border: thin solid rgba(white, .8)
				border-radius: 3px


	.training-other
		color: $color-text-dark-secondary
		font-size: .9em
		padding: 30px
		text-align: center

		a
			color: $color-text-dark-secondary
			text-decoration: underline

			&:hover
				color: $color-text-dark-primary

	.pricing
		+media-xs
			padding-top: 30px
		margin-bottom: 0
		padding-bottom: 100px


	.supported-by
		padding: 50px 0
		text-align: center
		background-color: $color-background
		border-top: 5px solid $color-background-dark

		img.logos
			padding: 60px 0 100px 0
			max-height: 500px
			max-width: 100%

			+media-xs
				max-width: 100%

	.assets
		padding-bottom: 80px

	.flex
		+media-xs
			flex-direction: column

		display: flex

		.box
			flex: 1
			margin: 20px

	.page-triplet-container
		.triplet-card
			+media-xs
				margin-top: 20px

	.navbar
		.nav-item-sign-in
			a.navbar-item
				background-color: $color-primary
				border: none
				border-radius: 3px
				color: white
				height: auto
				font-weight: bold
				margin-top: 5px
				margin-left: 10px
				padding: 10px 20px

				&:hover
					background-color: lighten($color-primary, 10%)
					box-shadow: none

.container.wide-on-sm
	+media-sm
		width: 100%


section.pricing
	padding: 50px 0
	margin-bottom: 25px
	background-color: $color-background-light
	+clearfix
	+media-xs
		padding: 0

	h2
		text-align: center
		font-size: 2.3em
		text-shadow: 1px 1px 0 white
		margin:
			top: 10px
			bottom: 50px
		padding: 0

		+media-xs
			font-size: 1.6em

	.box
		margin-top: 40px
		padding: 20px 20px 60px 20px
		border: 1px solid $color-text-dark-hint
		background-color: white
		position: relative
		text-align: center
		border-top: 3px solid rgba($color-text-dark-secondary, .5)
		border-bottom-left-radius: 3px
		border-bottom-right-radius: 3px

		+media-xs
			margin-bottom: 15px

		&.yearly
			border-top: 3px solid $color-info
			transform: scale(1.1)

			+media-xs
				transform: scale(1)

			a.sign-up-now
				+button($color-primary, 3px, true)

		h3
			font-size: 1.8em
			padding-bottom: 0
			margin: 25px 0 0 10px

		.pricing-display
			position: relative
			color: $color-info
			padding: 10px 0

			.currency-sign,
			.digit-dec
				font-size: 1.7em
				position: relative
				top: -25px
				font-weight: 100

			.digit-int
				font-size: 4.5em
				font-weight: 100

		.pricing-caption
			color: $color-text-dark-hint
			text-align: center
			padding-bottom: 25px

			ul
				text-align: left

		+list-bullets

		ul
			color: $color-text-dark-primary
			padding-left: 10px
			margin-top: 15px

			li
				padding-bottom: 8px

		.sign-up-now
			position: absolute
			bottom: 25px
			width: 65%
			left: 50%
			transform: translateX(-50%)
			font-size: 1.2em

			+button($color-primary, 3px)
			padding: 5px 25px
			white-space: nowrap
			text-align: center

	.education
		color: $color-text-dark-primary
		font-size: 1.1em
		padding: 25px 15px 0
		text-align: center

		h3
			color: $color-primary-dark

		.btn
			margin-top: 15px
			min-width: 200px