$background-color-hex: #f0f0f0;
$background-color-rgb: rgba(240,240,240,1.0);
$background-color-rgb-fade: rgba(240,240,240,0);

$max-page-width: 1400px;

$theme-accent: rgba(11,11,5,0.8);
$theme-accent-hover: rgba(11,11,5,1.0);
$theme-accent-subtle: rgba(11,11,5,0.3);

$theme-accent-fade-odd: rgba(11,11,5,0.69);
$theme-accent-fade-odd-hover: rgba(11,11,5,0.74);

$theme-accent-fade-even: rgba(11,11,5,0.70);
$theme-accent-fade-even-hover: rgba(11,11,5,0.75);

@mixin post-layout-basic() {
	margin: 0 auto;
	max-width: 640px;
	box-sizing: border-box;
	@media (max-width: 680px) {
		padding: 0 20px;
		width: 100%;
	}
}

@mixin text-bubble()
{
	padding: 0.5em 1em;
	display: inline;
	border-radius: 1.25em;
	color: $font-main-color-light;
	background: $theme-accent;
}

@mixin media-standard-layouts()
{
	@media(max-width: 920px) and (min-width: 620px)
	{
		@include span_columns(8);
		@include shift(2);
	}

	@include media($page-single-col)
	{
		@include span_columns(10);
		@include shift(1);
	}
}

hmtl, body
{
	background: $background-color-hex;
}

ul {
	margin: 0;
}

li
{
	list-style-type: none;
}

div.wrapper
{
	//border: 1px solid red;
}

.button, a.button:visited
{
	@include main-button;
	padding: 0.5em 0.75em;
	background: $theme-accent;
	@include transition(all 0.5s);
	border-radius: 9px;
	border: 2px solid $font-main-color-light;
	@include link-button;
}

.button:hover
{
	@include transition(all 0.5s);
	background: $theme-accent-hover;
}

$page-single-col: new-breakpoint(max-width 620px);

header.main
{
	margin: 0 auto;
	padding-bottom: 3em;
	max-width: $max-page-width;

	@include media($page-single-col)
	{
		padding-bottom: 2em;
	}

	background-size: cover;
	div.header-inner
	{
		@include outer-container();

		nav
		{
			@include span-columns(12);
			//@include omega();
			height: 5em;
			line-height: 5em;

			@include media($page-single-col)
			{
				height: auto;
				line-height: auto;
			}

			h1
			{
				@include span-columns(5 of 12);
				@include shift(1);
				@include main-header();
				a.home
				{
					padding: 2em 5px 2px 5px;
					background: $theme-accent;
					@include border-bottom-radius(3px);
					@include transition (background-color 2s);
				}
				a.home:hover
				{
					background: $theme-accent-hover;
				}

				@include media($page-single-col)
				{
					@include span-columns(10 of 12);
					@include shift(1);
					line-height: 2.5em;
					text-align: center;
					a.home
					{
						padding: 2em 0.25em 0.125em 0.25em;
					}
				}

			}
			div.menu-main-container
			{
				@include span-columns(5 of 12);
				@include main-nav();
				ul
				{
					float: right;
					li
					{
						padding-left: 1.5em;
					}
				}

				@include media($page-single-col)
				{
					@include span-columns(10 of 12);
					@include shift(1);
					margin-bottom: 2em;
					line-height: 2.5em;
					text-align: center;
					color: $font-main-color-light;
					ul
					{
						float: none;
						li
						{
							float: none;
							display: inline;
							a
							{
								display: inline;
							}
						}
					}
				}
			}

		}

		section.featured-project
		{
			@include span-columns(12);
			
			section.featured-project-info
			{
				@include span-columns(4 of 12);
				@include shift(1);
				text-align: center;
				div.logo-wrapper
				{
					position: relative;
					min-height: 120px;
					@media(min-width: 760px) and (max-width: 960px)
					{
						min-height: 100px;
					}
					@media(min-width: 720px) and (max-width: 760px)
					{
						min-height: 80px;
					}
				}
				img, p
				{
					margin: 0 auto;
					max-width: 90%;
				}
				img
				{
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -45%;
					opacity: 0.8;
				}
				p
				{
					padding: 1em 0;
					@media (min-width: 720px) and (max-width: 920px)
					{
						font-size: 1em;
					}
				}

				@media(max-width: 720px)
				{
					@include span-columns(10 of 12);
					@include shift(1);
					img
					{
						position: relative;
						margin: 0;
						padding-top: 1em;
						left: 0;
					}
					p
					{
						padding: 0 0 1.5em 0;
						max-width: 280px;
					}
					a
					{
						margin: 1em 0;
					}
				}

			}
			section.featured-project-image
			{
				@include span-columns(6 of 12);
				img
				{

				}
				@media(max-width: 720px)
				{
					display: none;
				}
			}

			section.featured-project-image-mobile
			{
				display: none;
				@media(max-width: 720px)
				{
					@include span-columns(10 of 12);
					@include shift(1);
					display: inline;
				}
			}
		}

		section.project-archive-header
		{
			@include span-columns(8);
			@include shift(2);
			text-align: center;
		}

	}
}






section.focus
{
	div.divide
	{
		width: 100%;
		height: 1.5em;
		background: $theme-accent;
	}
	ul
	{
		margin: 0 auto;	
		max-width: $max-page-width;

		li
		{
			position: relative;
			//padding: 1em 0;
			width: 33.33333333%;
			float: left;
			box-shadow: inset 0px 8px 8px -5px rgba(50, 50, 50, 0.75);
			@media(max-width: 720px)
			{
				@include span-columns(12);
			}
			text-align: center;
			list-style-type: none;

			a
			{
				@include main-focus;
				width: 100%;
				display: block;
				padding: 1em 0;
			}
			a:hover
			{
				//background: rgba(32,32,20,0.6);
			}

			a:nth-child(odd)
			{
				background: $theme-accent-fade-odd;
			}
			a:nth-child(odd):hover
			{
				background: $theme-accent-fade-odd-hover;
			}
			a:nth-child(even)
			{
				background: $theme-accent-fade-even;
			}
			a:nth-child(even):hover
			{
				background: $theme-accent-fade-even-hover;
			}

			div.image-wrap
			{
				margin: 0 auto 1em auto;
				position: relative;
				width: 240px;
				height: 160px;

				img
				{
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
					width: auto;
					max-width: 238px;
					height: auto;
					max-height: 154px;
				}
			}
			h3
			{
				padding: 0.375em 0.75em;
				opacity: 0.9;
				display: inline;
				
				background: $theme-accent;
				border-radius: 1em;
			}
			p
			{
				margin: 0 auto;
				padding: 0.5em 0;
				max-width: 280px;
				opacity: 0.9;
			}
		}
		li:hover
		{
			//background: rgba(32,32,20,0.6);
			filter: invert(100%);
		}
		li:after
		{
			position: absolute;
			top:0;
			bottom: 0;
			left: 0;
			right: 0;
			background: black;
		}
		li:not(:first-child)
		{
			@media(max-width: 720px)
			{
				box-shadow: none;
			}
		}
	}
	ul:after
	{
		content:'';
		display: block;
		clear: both;
	}
}


section.intro
{
	@include outer-container();
	padding-top: 2em;
	text-align: justify;
	article
	{
		@include span-columns(6);
		@include shift(3);

		@include media-standard-layouts;
	}
}

footer.main
{
	@include outer-container;

	padding: 2em 0;
	text-align: justify;

	section.about, section.contact
	{
		@include span-columns(6);
		@include shift(3);

		@include media-standard-layouts;

		//margin-bottom: 3em;

		text-align: center;
		img
		{
			margin-bottom: 2em;
			border-radius: 50%;
			max-width: 256px;
		}
		p
		{
			text-align: justify;
		}

	}


	ul.social
	{
		@include span-columns(6);
		@include shift(3);

		@include media-standard-layouts;

		margin-bottom: 1.5em;
		text-align: center;
		li
		{
			padding: 0 0.5em;
			display: inline;
			a, a:visited {
				opacity: 0.8;
			}
			a:hover {
				opacity: 1.0;
			}
		}
	}


	section.legal
	{
		@include span-columns(6);
		@include shift(3);
		@include main-legal();
		text-align: center;

		@include media-standard-layouts;
	}
}
