.join
	position: relative

	nav.navbar
		background-color: white

		.navbar-brand
			color: $color-text

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

		.navbar-container
			+container-behavior

	#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
		img
			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%