/* Pages (services, about, etc) */

#page-header
	align-items: center
	background-position: center
	background-size: cover
	border-bottom: 2px solid $color-background-light
	color: white
	display: flex
	flex-direction: column
	justify-content: center
	min-height: 350px
	overflow: hidden
	position: relative

	.page-title-icons
		font-size: 3em
		display: flex
		align-items: center
		justify-content: center
		margin-top: 15px
		text-shadow: 2px 2px 1px rgba(black, .2)

		.pi-blender-cloud
			position: relative
			left: -10px

		.pi-heart-filled
			font-size: .6em
			padding: 0 15px
			color: $color-danger
			animation:
				name: grow-bounce-heartbeat
				duration: 2.5s
				iteration-count: infinite

	.page-title
		text-align: center
		font:
			size: 2.8em
			weight: 300

		padding: 15px
		position: relative
		text-shadow: 0 0 30px black, 0 0 50px black, 2px 2px 1px rgba(black, .2)
		z-index: 1

		+media-xs
			font-size: 2.5em

		i.pi-blender-cloud-logo
			width: 230px
			display: inline-block
		em
			padding-left: 10px
			font-size: .7em


	.page-title-summary
		font-size: 1.2em
		padding: 10px 15px
		position: relative
		text-align: center
		z-index: 1

	.page-header-cta-container
		display: flex
		flex-direction: row
		justify-content: center
		align-items: center
		margin: 30px auto

	a.page-header-cta
		+button($color-info, 3px, true)
		font:
			size: 1.3em
			weight: 500
		padding: 4px 50px
		display: inline-block
		opacity: 1

	a.page-header-cta-extra
		display: inline-block
		font-size: 1.2em
		padding: 5px 25px
		color: white

#page-content
	background-color: white
	width: 100%

.page-triplet-container-fluid
	&.dark
		background-color: $color-background-nav
		color: $color-text-light-primary

		section.page-card-header
			h2, h2 a
				color: white

		p.extra a
			color: $color-text-light-primary


.page-triplet-container
	+container-behavior
	padding: 25px 30px

	p.extra
		padding: 25px 0
		text-align: center
		a
			color: $color-text-dark-primary

	.triplet-card
		width: 100%
		+container-box
		display: flex
		flex-direction: column

		.triplet-card-thumbnail
			img
				border-top-left-radius: 3px
				border-top-right-radius: 3px
				width: 100%
				+img-responsive

		.triplet-card-info
			padding: 15px
			text-align: center
			flex: 1
			display: flex
			flex-direction: column

			h3
				margin-top: 10px
				color: $color-danger
				padding-bottom: 20px
				position: relative

				&:after
					content: ''
					border-bottom: 2px solid rgba($color-danger, .8)
					width: 35px
					position: absolute
					left: 50%
					bottom: 10px
					transform: translateX(-50%)
			p
				display: block
				font-size: 1.1em
				line-height: 1.5em
				color: $color-text-dark-primary
				flex: 1
				padding-left: 5px
				padding-right: 5px

		.triplet-cta
			display: block
			font-size: .9em
			padding: 10px 0
			color: $color-primary-dark
			cursor: pointer
			&:hover
				text-decoration: underline


$page-card-icon-size: 75px
.page-card-header
	position: relative
	width: 100%
	text-align: center
	color: $color-info
	display: block
	padding: 40px 0 25px 0
	margin-bottom: -50px
	font:
		size: 2.4em
		weight: 300

	&:after
		content: '';
		border-bottom: 2px solid rgba(104,179,200,0.8);
		width: 120px;
		position: absolute;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		bottom: 7px;

	span
		display: block
		padding: 10px 0
		font-size: .6em
		color: $color-text-light-secondary

	a.page-card-cta
		font-size: .5em
		min-width: 250px
		margin:
			right: 0
			top: 10px
			bottom: 10px

	&.dark
		color: white

		&:after
			border-bottom-color: rgba(white, .6)

.page-card
	display: flex
	align-items: center
	justify-content: center
	min-height: 200px
	margin: 0 auto
	background:
		color: white
		size: cover
		position: 50% 50%

	+clearfix

	+media-sm
		min-height: 150px
	+media-xs
		min-height: 150px
		flex-direction: column-reverse


	&:nth-child(even)
		background-color: $color-background-light

	hr
		width: 100%
		height: 1px
		display: block
		margin: 10px auto
		padding: 0
		border: none
		background-color: $color-background

	&.right
		flex-direction: row-reverse

		+media-xs
			flex-direction: column-reverse

	&.dark
		background-color: #2b2b2b

		&:nth-child(even)
			background-color: darken(#2b2b2b, 5%)

		a
			color: $color-info

		hr
			background-color: rgba(white, .1)

		.page-card-summary
			color: #ccc

	.page-card-full
		padding: 60px 30px
		width: 100%
		max-width: 1000px
		position: relative
		align-self: stretch

	.page-card-side
		width: 50%
		padding: 60px 0
		max-width: 450px
		position: relative
		align-self: stretch

		+list-bullets

		+media-sm
			padding: 40px 0
		+media-xs
			width: 90%
			max-width: 90%
			padding: 40px 0

	.page-card-title
		font:
			size: 2em
			weight: 300
		color: $color-danger
		padding-bottom: 15px
		position: relative
		margin-top: 0

		&:after
			content: ''
			border-bottom: 2px solid rgba($color-danger, .8)
			width: 35px
			position: absolute
			left: 0
			bottom: 7px

		small
			color: $color-text-dark-hint
			font-size: .8em
			padding-left: 5px

	.page-card-summary
		font-size: 1.4em
		color: $color-text-dark-primary
		padding: 15px 0 25px 0

	.page-card-image
		width: 100%
		text-align: center

		img
			max-width: 100%
		span
			display: block
			text-align: center
			padding: 20px 0
			color: $color-text-dark-primary

	.page-card-icon
		display: block
		position: relative
		+position-center-translate
		margin: 0 auto
		width: $page-card-icon-size * 2
		height: $page-card-icon-size * 2
		border: 2px solid rgba($color-text-dark-hint, .5)
		border-radius: 50%
		background:
			position: 50% 50%
			repeat: no-repeat
			size: $page-card-icon-size

		+media-sm
			width: $page-card-icon-size * 1.5
			height: $page-card-icon-size * 1.5
			background-size: $page-card-icon-size * 0.75

		+media-xs
			width: $page-card-icon-size * 1.5
			height: $page-card-icon-size * 1.5
			background-size: $page-card-icon-size * 0.75

			margin: 40px auto

		svg
			+position-center-translate



a.page-card-cta
	padding: 5px 30px
	margin-right: 25px
	font-size: 1em
	font-weight: 500
	display: inline-block
	opacity: 1
	color: white !important

	i
		position: relative
		left: -10px
		margin-right: 0

	&.download
		+button($color-success, 3px, true)
		opacity: 1
		padding-left: 20px
		padding-right: 20px

		i
			position: relative
			left: 0

.page-section-container
	background:
		color: transparent
		size: cover
		position: 50% 50%
	.page-card, .page-card.dark,
	.page-card-header, .page-card-header.dark,
		background-color: transparent

	.page-card.dark:nth-child(even)
			background-color: rgba(black, .1)
			border-top: 2px solid rgba(black, .35)

	.page-card-side
		max-width: 500px
		padding: 90px 25px

/* Page specific changes */
.page-triplet-container.homepage
	.triplet-card
		cursor: pointer
		transition: box-shadow 150ms ease-in-out
		&:hover
			box-shadow: 0 0 25px rgba(black, .2)

.join.navbar-backdrop
	position: relative
	video
		display: block
		+position-center-translate


		+media-xs
			display: none
		+media-sm
			display: none
		+media-md
			width: 100%
		+media-lg
			width: 100%

.services.navbar-backdrop-overlay
	background: rgba(black, .5)

.services
	.page-card-side
		max-width: 500px
		padding: 75px 25px

	.page-card-header.dark
		&:after
			border: none