.dashboard-container
	+media-xs
		flex-direction: column
	display: flex
	justify-content: space-around
	align-items: flex-start
	align-content: center
	word-break: break-word

	+container-behavior

	section#main
		+container-box
		margin: 20px auto
		width: 52%

		+media-xs
			width: 100%
			border-radius: 0

	section#side
		width: 46%
		flex-direction: column
		margin-right: auto

		+media-xs
			width: 100%

	section.announcement,
	section#blog-stream,
	section#random-asset
		+container-box
		margin: 20px auto

		+media-xs
			border-radius: 0

		span.section-lead
			display: block
			padding: 10px 0 10px 15px
			color: $color-text-dark-secondary

	section#main,
	section#side
		h3
			margin: 0
			padding: 15px
			cursor: default
			font:
				family: $font-body
				size: 1.4em

			a
				color: $color-text-dark
				&:hover
					color: $color-primary
					cursor: pointer

	section#nav-tabs,
	section#sub-nav-tabs
		ul#nav-tabs__list,
		ul#sub-nav-tabs__list
			margin: 0
			padding: 0
			list-style: none
			border-bottom: thin solid $color-background
			+clearfix

			li.nav-tabs__list-tab
				float: left
				font:
					size: 1.2em
					weight: 400
				border: none
				border-bottom: 3px solid transparent
				color: $color-text-dark-primary
				user-select: none

				&:hover
					border-color: rgba($color-secondary, .3)
					cursor: pointer
					color: $color-text-dark
					a
						color: $color-text-dark

				a
					display: block
					text-decoration: none
					padding: 15px 20px 10px 20px
					color: $color-text-dark-primary

				i
					margin-right: 5px
					color: $color-text-dark-secondary
					font-size: .9em

					&.pi-blender
						margin-right: 10px

				span
					color: $color-text-dark-hint
					margin-left: 5px

				&.active
					border-color: $color-secondary
					color: $color-secondary-dark
					a, i
						color: $color-secondary-dark

				&.disabled
					border-color: $color-background-light
					color: $color-text-dark-hint
					cursor: default
					a, i
						color: $color-text-dark-hint

					&:hover
						border-color: $color-background-light
						pointer-events: none

			li.create
				float: right
				cursor: pointer
				font:
					size: 1.2em
					weight: 400
				display: inline-block
				padding: 10px 10px

				a
					color: $color-success
					text-decoration: none

				&.disabled
					cursor: wait
					border-color: $color-success
					opacity: .8
					a
						cursor: wait

	section#stream
		position: relative
		background-color: $color-background-light
		border-bottom-left-radius: 3px
		border-bottom-right-radius: 3px

		h3
			padding:
				top: 25px
				left: 15px
				bottom: 0
			span
				padding-left: 5px
				color: $color-text-dark-secondary

		ul#activity-stream__list
			margin: 0
			padding: 15px 0
			list-style: none

			$activity-stream-thumbnail-size: 110px
			li.activity-stream__list-item
				position: relative
				display: flex
				margin: 0 10px 5px
				background-color: white
				border-radius: 3px
				box-shadow: 0 0 0 1px rgba(black, .05), 0 2px 2px rgba(black, .1)
				overflow: hidden

				&.active .activity-stream__list-details .title
					color: $color-primary

				&:hover
					.title
						text-decoration: underline
					&.video
						border-color: $node-type-asset_video
						a.image
							&:hover
								i
									font-size: 3.5em
								img
									opacity: .9
							img
								opacity: .7
								z-index: 0
								transition: opacity 150ms ease-in-out

							i
								+position-center-translate
								z-index: 1
								color: rgba(white, .6)
								font-size: 3em
								transition: font-size 100ms ease-in-out

					&.image
						border-color: $node-type-asset_image

					&.file
						border-color: $node-type-asset_file

				&.comment
					.activity-stream__list-thumbnail
						background: transparent
						border-color: $node-type-comment
						color: $node-type-comment
						font-size: 1.2em
						box-shadow: none

						i
							+position-center-translate
							left: 22px
							top: 19px

					.activity-stream__list-details
						padding: 0
						.title
							color: $color-text-dark
							padding: 7px 10px 2px 10px
							font-size: 1em
							margin: 0

						ul.meta
							padding: 0 10px 7px 10px

							li
								&.where-parent:before
									content: '\e83a'
									font-family: 'pillar-font'

								&.what:before
									display: none

				&.post
					.activity-stream__list-thumbnail
						border-color: $node-type-post
						background-color: $node-type-post
					.activity-stream__list-details .title
						color: darken($node-type-post, 15%)
						font:
							size: 1.3em
							weight: 500

				&.asset, &.comment, &.post
					&:hover
						cursor: pointer
				&.empty
					display: none
					color: $color-text-dark-primary
					padding: 20px
					text-align: center
					span
						color: $color-primary
						&:hover
							text-decoration: underline
							cursor: pointer

				&.with-picture
					min-height: $activity-stream-thumbnail-size

					.activity-stream__list-thumbnail
						background-color: black
						width: $activity-stream-thumbnail-size * 1.69
						min-width: $activity-stream-thumbnail-size * 1.69

						.activity-stream__list-thumbnail-icon
							position: absolute
							top: 0
							left: 0
							right: 0
							bottom: 0
							font-size: 1.3em
							text-shadow: 1px 1px 0 rgba(black, .2)
							background-image: linear-gradient(10deg, rgba(black, .5) 0%, transparent 40%)

							i
								position: absolute
								bottom: -8px
								left: 20px
								top: initial
								right: initial
								color: white

				.activity-stream__list-thumbnail
					position: relative
					display: flex
					justify-content: center
					align-items: center
					overflow: hidden
					width: 35px
					height: auto
					min-width: 35px
					min-height: auto

					+media-xs
						display: none


					&.image i
						color: $node-type-asset_image
					&.file i
						color: $node-type-asset_file
					&.video i
						color: $node-type-asset_video

					i
						+position-center-translate
						left: 23px
						top: 21px
						font-size: 1.1em

					img
						max-height: $activity-stream-thumbnail-size
						+position-center-translate

				.activity-stream__list-details
					display: flex
					flex-direction: column
					justify-content: space-around
					flex: 1
					overflow: hidden
					position: relative
					max-width: 100%
					margin-right: auto
					padding: 10px 0

					+media-xs
						margin-left: 0

					.ribbon
						+ribbon
						right: -47px
						top: 5px
						font:
							size: 12px
							weight: 500

						span
							padding: 1px 50px

					.title
						display: inline-block
						padding: 0 10px
						color: $color-text-dark
						font-size: 1.1em

						span
							@include badge(hsl(hue($color-success), 60%, 45%), 3px)
							font-size: .7em
							padding: 1px 5px
							margin-right: 5px

					ul.meta
						+list-meta
						padding: 5px 10px 0 10px
						font-size: .85em
						color: $color-text-dark-secondary
						display: flex
						white-space: nowrap

						&.extra
							margin-top: auto

						li
							padding-left: 10px
							&:before
								left: -5px
							&.where-project
								+text-overflow-ellipsis

		ul#activity-stream__filters
			margin: 0
			padding: 0
			list-style: none
			position: absolute
			top: 20px
			right: 15px
			border-radius: 3px

			li
				float: left
				padding: 5px
				cursor: pointer
				border: thin solid $color-background
				border-right: none
				background-color: white
				color: $color-text-dark-primary

				&:hover
					color: $color-primary

				/* First is the 'filter by' label */
				&:first-child
					border: none
					background-color: transparent
					border-top-left-radius: 3px
					border-bottom-left-radius: 3px
					color: $color-text-dark-hint
					font-size: .9em

				&:nth-child(2)
					border-top-left-radius: 3px
					border-bottom-left-radius: 3px

				&:last-child
					border-right: thin solid $color-background
					border-top-right-radius: 3px
					border-bottom-right-radius: 3px

				&:active
					background-color: $color-background-dark

				&.active
					background-color: $color-background

				&.clear:hover
					color: $color-danger

	section#blog-stream
		position: relative

		.feed
			position: absolute
			top: 10px
			right: 10px
			font-size: 1.4em
			color: lighten($color-text-dark-hint, 10%)

			&:hover
				color: $color-primary

		ul#blog-stream__list
			background-color: $color-background-light
			margin: 0
			padding: 0
			list-style: none
			border:
				top: thin solid $color-background
				bottom-left-radius: 3px
				bottom-right-radius: 3px

			.blog-stream__list-item
				display: flex
				padding: 7px 15px
				border-top: thin solid $color-background

				&:first-child
					border-top: none
				&:last-child
					border:
						bottom-left-radius: 3px
						bottom-right-radius: 3px

				&.more
					font-size: .9em
					a
						width: 100%
						text-align: right
						color: $color-text-dark-secondary
						&:hover
							color: $color-primary

				.blog-stream__list-thumbnail
					display: block
					position: relative
					width: 50px
					min-width: 50px
					height: 50px
					min-height: 50px
					margin-right: 15px
					background-color: $node-type-post
					border-radius: 50%
					overflow: hidden

					img
						width: 100%

					i
						+position-center-translate
						font-size: 1.6em
						color: $color-text-light-primary

				.blog-stream__list-details
					.title
						display: block
						color: $color-text-dark-primary
						&:hover
							color: $color-primary

					ul.meta
						+list-meta
						padding-top: 5px
						font-size: .9em
						color: $color-text-dark-secondary

						li
							padding-left: 10px
							&:before
								left: -5px

				&.featured
					flex-direction: column
					padding: 0

					a.title
						font-size: 1.1em
						padding: 10px 0 0 15px
						display: block
						color: $color-text-dark-primary
						&:hover
							color: $color-primary

					a.blog-stream__thumbnail
						display: block
						position: relative
						img
							width: 100%

					ul.meta
						+list-meta
						padding: 5px 15px 10px 15px
						font-size: .9em



	section.announcement
		border-bottom: thin solid $color-background

		.header-icons
			display: flex
			align-items: center
			justify-content: center
			padding: 20px 0 5px 0

			i
				font-size: 2.5em
				color: $color-info

				&.pi-heart-filled
					color: $color-danger
					margin-left: 5px

		img.header
			width: 100%
			margin: 0 auto
			border-top-left-radius: 3px
			border-top-right-radius: 3px

		iframe
			width: 100%
			position: relative
			left: 15px
			margin: 25px auto

			+media-sm
				height: 500px
			+media-md
				height: 520px
			+media-lg
				height: 580px

		.text
			padding: 15px

			.title
				padding-bottom: 10px
				font:
					family: $font-body
					size: 1.4em
					weight: 300

				+media-xs
					font-size: 1.4em

				strong
					color: $color-primary-dark

				a
					color: $color-text-dark-primary

			.lead
				font-size: 1em
				+list-bullets

				ul
					margin-top: 10px
					padding-left: 10px

				hr
					border: none
					height: 1px
					width: 100%
					margin: 10px 0
					background-color: $color-background
					clear: both

				+media-xs
					padding-left: 10px


			.buttons
				margin: 15px auto 0 auto
				display: flex
				align-items: center
				justify-content: space-around
				flex-wrap: wrap

				a
					+button($color-text-light, 3px)
					padding: 5px 0
					margin:
						bottom: 5px
						right: auto
						left: auto
					font-size: .9em
					opacity: 1
					flex: 1

					+media-xs
						margin: 10px auto
						width: 100%

					&:first-child
						margin-right: 15px

					&.blue
						+button(hsl(hue($color-info), 60%, 45%), 3px)

					&.orange
						+button(hsl(hue($color-secondary), 50%, 50%), 3px)
						padding: 5px 15px

					&.green
						+button(hsl(hue($color-success), 60%, 40%), 3px, true)

	section#random-asset

		h3
			padding-bottom: 0

		ul.random-asset__list
			border-top: thin solid $color-background
			background-color: $color-background-light
			border-bottom-left-radius: 3px
			border-bottom-right-radius: 3px
			padding: 0
			margin: 0
			list-style: none

			.random-asset__list-item
				display: flex
				align-items: center
				padding: 7px 15px
				border-top: thin solid $color-background
				position: relative
				overflow: hidden

				&:first-child
					border-top: none

				.ribbon
					+ribbon
					right: -47px
					top: 5px
					font:
						size: 12px
						weight: 500

					span
						padding: 1px 50px

				.random-asset__list-thumbnail
					width: 50px
					min-width: 50px
					height: 50px
					min-height: 50px
					margin-right: 15px
					background-color: $color-background

					border-radius: 50%
					overflow: hidden
					display: block
					position: relative

					img
						width: 100%

					i
						+position-center-translate
						font-size: 1.6em
						color: $color-text-light

					&.image
						background-color: $node-type-asset_image
					&.file
						background-color: $node-type-asset_file
						font-size: .8em
					&.video
						background-color: $node-type-asset_video
						font-size: .8em
					&.None
						background-color: $node-type-group

				.random-asset__list-details
					.title
						display: block
						font-size: 1em
						color: $color-text-dark-primary
						&:hover
							color: $color-primary

					ul.meta
						+list-meta
						padding-top: 5px
						font-size: .9em

						li
							&:before
								left: -5px
							&.what
								text-transform: capitalize

				&.project
					padding: 10px 15px

					a.title
						font-size: 1.2em

					a.random-asset__list-thumbnail
						border-radius: 3px

					ul.meta
						padding-top: 0

						li.what
							text-transform: initial

						a
							color: $color-text-dark-primary

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

				&.featured
					align-items: flex-start
					flex-direction: column
					padding: 0

					a.title
						font-size: 1.1em
						padding: 10px 0 0 15px
						display: block
						color: $color-text-dark-primary
						&:hover
							color: $color-primary

					a.random-asset__thumbnail
						display: block
						position: relative
						width: 100%

						&.video
							background-color: black
							img
								opacity: .7

						img
							width: 100%
							transition: opacity 150ms ease-in-out

						i
							+position-center-translate
							color: white
							font-size: 3em
							text-shadow: 0 0 25px black
							transition: font-size 150ms ease-in-out

						&:hover
							i
								font-size: 3.5em
							img
								opacity: .85

					ul.meta
						+list-meta
						padding: 5px 15px 10px 15px
						font-size: .9em

						li.what
							text-transform: capitalize


/* Sections for the non-logged in */
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
		min-height: 340px
		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)

				&:hover
					+button($color-success, 3px, true)

		&.education
			.pricing-caption
				padding: 25px
				font-size: 1.1em
				transition: color 100ms ease-in-out

			&:hover
				.pricing-caption
					color: $color-text-dark-primary

			a.sign-up-now
				width: 70%

		h3
			font:
				size: 1.8em
				family: $font-body
			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
			text-align: center
			padding-bottom: 0

			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

		&:hover
			.sign-up-now
				+button($color-success, 3px, true)


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

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

		+media-xs
			max-width: 100%


section.team
	background:
		color: white
		size: cover
		position: 50% 50%
	padding: 50px 0 40px 0
	text-align: center

	h2
		padding-bottom: 30px
		font-size: 2.2em
		color: $color-text-light

	.people-container
		max-width: $screen-lg
		margin: 0 auto 60px auto

		.people-intro
			opacity: 1
			position: relative
			top: 0
			transition: opacity 100ms ease-in-out, top 150ms ease-out

			&.active
				opacity: 0
				top: 15px

			h3
				font:
					family: $font-body
				color: $color-danger

			span
				color: $color-text-light-primary

		.people-faces
			padding-top: 40px
			display: flex
			flex: row flex
			flex-wrap: wrap
			margin: 0 auto
			align-items: center
			justify-content: center
			width: 100%
			max-width: 750px

			.face
				background-color: $color-background
				border-radius: 50%
				padding: 4px

				opacity: 1
				width: 120px
				height: 120px
				margin: 7px 15px
				z-index: 0
				position: relative
				transition: transform 100ms ease-in-out, background-color 100ms ease-in-out, opacity 100ms ease-in-out

				+media-xs
					height: initial
					margin-top: 20px

				&:hover
					transform: scale(1.1)
					z-index: 1
					background-color: $color-primary

					img
						opacity: .8

				img
					position: relative
					width: 100%
					border-radius: 50%
					transition: opacity 150ms ease-in-out


		.people-bio
			display: block
			width: 100%
			position: relative

			+media-xs
				display: none


			.bio
				opacity: 0
				visibility: hidden
				margin: 0
				padding: 0
				position: absolute
				top: -370px
				left: 50%
				transform: translateX(-50%)

				transition: opacity 180ms ease-in-out, top 150ms ease-out

				&.active
					top: -370px
					opacity: 1
					visibility: visible

				h3
					position: relative
					top: -18px
					font-family: $font-body
					color: $color-info

					small
						position: absolute
						left: 50%
						transform: translateX(-50%)
						bottom: -22px
						white-space: nowrap
						font-size: .6em
						color: $color-text-light-primary
				span
					color: $color-text-light-hint

		&.online
			.people-faces
				max-width: 1000px

			.people-bio
				.bio
					top: -250px
					&.active
						top: -240px


body.homepage
	.dashboard-container
		+media-xs
			flex-direction: column-reverse

		flex-direction: row-reverse

		#main
			+media-xs
				width: 100%
			width: 38%

		#side
			+media-xs
				width: 100%
			width: 60%