// TEXT
//$h1-font-size: 60px
//$h1-line-height: 80px
//
//$h2-font-size: 42px
//$h2-line-height: 60px
//
//$h3-font-size: 26px
//$h3-line-height: 32px
//
//$h4-font-size: 26px
//$h4-line-height: 40px
//
//$h5-font-size: 18px
//$h5-line-height: 36px
//
//$p-font-size: 20px
//$p-line-height: 28px


// header
$full-width-paddingX: 20px

$main-width: 100%
$main-max-width: 100%

$header-height: 80px

$logo-width: 180px

$nav-buttons-margin-left: 30px

$hamburger-size: 50px


// main nav
$main-nav-padding: 140px 0 30px
$main-nav-h5-margin-bottom: 1em
$main-nav-h3-margin-bottom: 0.6em
$nav-box-width: 20%
$nav-box-sibling-margin-left: calc(20% / 3)
$main-nav-main-sibling-margin-top: 60px
$main-nav-left-button-size: 50px
$main-nav-left-button-font-size: 18px


// hero
$hero-padding-top: 80px
$headline-wrapper-margin-bottom: 40px
$quickstart-button-padding: 0 50px
$vendor-strip-font-size: 16px

//video
$video-section-height: 400px

//features
$features-h3-margin-bottom: 40px
$feature-box-margin-bottom: 60px
$feature-box-div-margin-bottom: 0
$feature-box-div-width: 45%



////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////

@media screen and (min-width: 750px)
	@import "size"

	p
		font-size: 16px
		line-height: 24px
		letter-spacing: 0.1px

	h1
		font-size: 36px
		line-height: 44px

	h3
		font-size: 28px
		line-height: 36px

	h4
		font-size: 24px
		line-height: 40px



	#home
		#viewDocs, #tryKubernetes
			display: inline-block

	#vendorStrip
		display: block
		text-align: center

		img
			max-height: 24px
			vertical-align: middle
			margin: 0 30px

	#docs
		#vendorStrip
			li
				a
					font-size: 1em
					font-weight: normal

				li + li
					margin-left: 60px


	#oceanNodes
		h3
			text-align: left
			margin-bottom: 18px

		main
			position: relative
			clear: both
			display: table

			.content
				display: table-cell
				position: relative
				vertical-align: middle

			.image-wrapper
				position: absolute
				top: 50%
				max-width: 25%
				max-height: 100%
				transform: translateY(-50%)

			&:nth-child(odd)
				padding-right: 210px

				.image-wrapper
					right: 0

			&:nth-child(even)
				padding-left: 210px

				.image-wrapper
					left: 0

			&:nth-child(1)
				padding-right: 0

				h3, p
					text-align: center

				.image-wrapper
					position: relative
					display: block
					float: none
					max-width: 100%
					transform: none

				.content
					display: block

			img
				width: 100%


	#video
		height: $video-section-height
		display: block

		& > .light-text
			display: block

	#mobileShowVideoButton
		display: none

	#features
		padding-bottom: 60px

		.feature-box
			margin-bottom: 30px

			&:last-child
				margin-bottom: 0

		h3
			margin-bottom: $features-h3-margin-bottom

		.feature-box
			& > div
				width: $feature-box-div-width
				margin-bottom: $feature-box-div-margin-bottom

	#talkToUs
		#bigSocial
			div
				width: calc(50% - 15px)

			div + div
				margin-top: 0

			div:nth-child(2)
				margin-left: 20px

			div:nth-child(3)
				margin-top: 20px

			div:nth-child(4)
				margin-top: 20px
				margin-left: 20px

			a
				display: inline-block
				color: $blue
				font-weight: 400
				text-decoration: none

	// FOOTER
	footer
		nav
			text-align: center

			a
				width: 30%
				padding: 0 20px

		.social
			text-align: center

			div
				display: inline-block

			div:last-child
				display: block
				margin: 0

			span
				display: inline-block
				margin-right: 10px

			input
				text-align: left



	#home #caseStudiesWrapper
		div
			width: 48%
