website/_sass/_desktop.sass

$main-max-width: 1200px
$vendor-strip-height: 44px
$video-section-height: 550px

@media screen and (min-width: 1025px)
	#hamburger
		display: none

	ul.global-nav
		display: inline-block

	#docs #vendorStrip #searchBox:before
		top: 15px

	#vendorStrip
		height: $vendor-strip-height
		line-height: $vendor-strip-height

		li
			a.YAH
				&:after
					content: ""
					display: block
					position: absolute
					left: 0
					bottom: 0
					width: 100%
					height: 4px
					background-color: $blue


		#searchBox
			float: right


	#home
		#hero
			#vendorStrip
				display: block

	#docs
		#hero
			h1, h5
				text-align: left

			#vendorStrip
				ul
					float: left

				#searchBox
					float: right
					width: 320px

				#search
					vertical-align: middle

		.flyout-button
			display: none

		.logo
			position: relative
			float: left
			display: block
			width: 180px
			height: 88px
			top: 0
			left: 0
			transform: none
			background-image: url(../images/nav_logo.svg)

		&.flip-nav, &.open-nav
			.logo
				background-image: url(../images/nav_logo2.svg)


	#encyclopedia
		padding: 50px 50px 100px 100px
		clear: both

	#docsToc
		position: relative
		float: left
		padding: 0 20px
		left: 0
		width: 350px
		z-index: auto

		.push-menu-close-button
			display: none

	#docsContent
		width: calc(100% - 400px)

		#editPageButton
			right: -25px

	section, header, footer
		main
			max-width: $main-max-width
	
	header, #vendorStrip, #encyclopedia, #hero h1, #hero h5, #docs #hero h1, #docs #hero h5,
	#community #hero h1, .gridPage #hero h1, #community #hero h5, .gridPage #hero h5
		padding-left: 100px
		padding-right: 100px

	#home
		section, header, footer
			main
				max-width: 1000px

	#oceanNodes
		main
			position: relative
			max-width: 830px

			&:nth-child(1)
				max-width: 1000px
				padding-right: 475px

				h3, p
					text-align: left

				.image-wrapper
					position: absolute
					max-width: 48%
					transform: translateY(-50%)

					img
						max-width: 425px

				//.content
				//	width: 50%


	#video
		height: $video-section-height
		position: relative
		background-image: url(../images/kub_video_banner.jpg)
		background-position: center center
		background-size: cover



	#talkToUs
		h4
			br
				display: block

		#bigSocial
			div
				width: calc(25% - 18px)

			div + div
				margin-left: 20px
			//
			//div:nth-child(3), div:nth-child(4)
			//	margin-top: 0


	//#home #bigSocial
	//	div
	//		width: calc(33% - 15px)
	//
	//	div:nth-child(3)
	//		margin-top: inherit

	// FOOTER
	footer
		width: 100%
		background-image: url(../images/texture.png)
		background-color: $dark-grey

		main
			padding: 20px 0

		nav
			overflow: hidden
			margin-bottom: 20px

			a
				width: 16.65%
				float: left
				font-size: 24px
				font-weight: 300
				white-space: nowrap

		.social
			padding: 0 30px
			max-width: 1200px

			div
				float: left

			div:last-child
				float: right

	#search, #wishField
		background-color: transparent
		padding: 10px
		font-size: 16px
		font-weight: 100
		color: white
		border: 1px solid white
		transition: 0.3s

		&:focus
			background-color: $light-grey
			color: $dark-grey

	.social a
		display: inline-block
		background-image: url(../images/social_sprite.png)
		background-repeat: no-repeat
		background-size: auto
		width: 50px
		height: 50px
		border-radius: 5px
		margin-right: 10px

		&:hover
			background-color: #fff

		span
			position: absolute
			display: block
			height: 0
			overflow: hidden

	a.twitter
		background-position: 0 0

		&:hover
			background-position: 0 100%

	a.stack-overflow
		background-position: -50px 0

		&:hover
			background-position: -50px 100%

	a.slack
		background-position: -100px 0

		&:hover
			background-position: -100px 100%

	a.github
		background-position: -150px 0

		&:hover
			background-position: -150px 100%

	a.mailing-list
		background-position: -200px 0

		&:hover
			background-position: -200px 100%

	a.calendar
		background-position: -250px 0

		&:hover
			background-position: -250px 100%
























	#community, .gridPage
		#hero
			text-align: left

			h1
				padding: 20px 100px

		#tryKubernetes
			width: auto
			background-color: $blue
			padding: 0 20px
			



	#bigSocial
		div
			width: calc(25% - 18px)


	#home #caseStudiesWrapper
		div
			width: 24%
			min-height: 260px