/*
	Theme Name: Sundog
	Theme URI: http://designbysundog.com
	Version: 1.0
	Author: Sundog Studio
	Author URI: http://designbysundog.com
	License:
	License URI:
	Description:
*/

/* ----------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------ MAIN */
/* ----------------------------------------------------------------------------------------------------------- */

html {
	height: 100%;
}

body {
	height: 100%;
	background: rgb(255, 255, 255);
	font-family: neue-haas-grotesk-text, Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1;
	font-weight: 400;
	color: rgba(49,46,42,1);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: rgba(49,46,42,1);
	transition: 200ms ease-out color;
	-webkit-transition: 200ms ease-out color;
	-o-transition: 200ms ease-out color;
	-moz-transition: 200ms ease-out color;
}

a:hover {
	color: rgba(26, 26, 26, 1);
}

*::selection {
	background: rgba(49,46,42,1);
	color: rgb(255, 255, 255);
}

*::-moz-selection {
	background: rgba(49,46,42,1);
	color: rgb(255, 255, 255);
}

em, b, strong {
	font-weight: 700;
}

i 	{
	font-style: italic;
}

h1 {
	font-size: 1em;
	line-height: 1em;
	font-weight: 500;
	margin: 0 0 1em 0;
}

h1.big {
	font-family: neue-haas-grotesk-display, sans-serif;
	font-size: 3.625em;
	line-height: 1em;
	font-weight: 500;
	letter-spacing: 0;
	margin: 0 0 0.75em 0;
	text-transform: none;
}

h1.big a {
	font-weight: 600;
}

h2 {
	font-size: 1em;
	line-height: 1.25em;
	font-weight: 400;
	margin: 0 0 0.25em 0;
}

h2.big {
	font-size: 1.5em;
	line-height: 1.125em;
	font-weight: 400;
	margin: 0 0 0.5em 0;
}

h3 {
	font-size: 0.875em;
	line-height: 1.35em;
	font-weight: 400;
	text-transform: uppercase;
}

p {
	font-size: 1em;
	line-height: 1.5em;
	font-weight: 400;
	margin: 0 0 0.375em 0;
}

p img {
	margin: 0 0 2.5em 0;
}

p a {
	color: rgba(69, 58, 70, 0.6);
	
	transition: color 200ms ease-out;
	-webkit-transition: color 200ms ease-out;
	-o-transition: color 200ms ease-out;
	-moz-transition: color 200ms ease-out;
}

p a:hover {
	color: rgba(69, 58, 70, 1);
}

img {
	max-width: 100%;
	display: block;
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- LAYOUT */
/* ----------------------------------------------------------------------------------------------------------- */

.wrapper {
	width: 100%;
	background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(	#f6ecd1 0%, #f0d289 20%, #de8656 40%, #9c7892 60%, #1d252c 80%, #141313 100%);
    background: -o-linear-gradient(			#f6ecd1 0%, #f0d289 20%, #de8656 40%, #9c7892 60%, #1d252c 80%, #141313 100%); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(		#f6ecd1 0%, #f0d289 20%, #de8656 40%, #9c7892 60%, #1d252c 80%, #141313 100%); /* For Firefox 3.6 to 15 */
    background: linear-gradient(			#f6ecd1 0%, #f0d289 20%, #de8656 40%, #9c7892 60%, #1d252c 80%, #141313 100%); /* Standard syntax */
}

.wrapper.work {
	background: white;
}

.grud {
	width: 100%;	
	min-height: 100vh;
	box-sizing: border-box;
}

.box {
	position: relative;
	float: left;
	display: inline;
	height: auto;
	box-sizing: border-box;
}

.box img {
	width: 100%;
	height: auto;
	display: block;
}

.clearer {
	clear: both;
}

.half {width: 50%;}
.full {width: 100%;}

#sundog {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-image: url('./images/sundog.gif');
	background-position: 75% 33%;
	background-repeat: no-repeat;
	background-size: 300px 300px;
}

#work {
	position: relative;
	background: rgba(255, 255, 255, 1);
}

#about {
	position: relative;
	min-height: 100vh;
	background: rgb(255, 255, 255);
}

#contact {
	position: relative;
	min-height: 100vh;
	/*background: rgb(255, 254, 242);*/
	background: rgb(255, 255, 255);
}

.see-through {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
}

.see-through#lamp {
	background-image: url('./images/sundog-lamp.png');
	background-size: 2560px 1440px;
}

.see-through#cactus {
	background-image: url('./images/sundog-cactus.png');
}

#night {
	position: relative;
	height: 800vh;
}

#night #stars {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-image: url('./images/sundog-stars.png');
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 2560px 1440px;
}

#night #goodbye {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	padding: 2em;
	box-sizing: border-box;
}

#night #goodbye h1 {
	color: #3d3935;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- HEADER */
/* ----------------------------------------------------------------------------------------------------------- */

header {
	width: 100%;
	height: 3.75em;
	position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    background: rgba(255, 255, 255, 0);
}

header .header-wrap {
	position: relative;
	width: 100%;
	padding: 0 2em;
	box-sizing: border-box;
	margin: 0 auto;
}

/* ---------------------------------------------------------------------------------------------------- Logo */

header #logo {
	position: relative;
	float: left;
	display: inline;
}

header #logo a {
	display: block;
	height: 0.75em;
	padding: 1.5em 0;
	opacity: 1;
	transition: all 200ms ease-out;
}

header #logo a:hover {
	opacity: 0.7;
}

header #logo h2 {
	font-weight: 500;
	color: inherit;
}

/* ---------------------------------------------------------------------------------------------------- Navbar */

header nav {
	position: relative;
	float: right;
	display: inline;
	font-size: 1em;
}

header nav ul#navbar li {
	position: relative;
	float: left;
	display: inline;
}

header nav ul#navbar li a {
	display: block;
	height: 0.75em;
	padding: 1.5em 0 1.5em 1em;
	opacity: 1;
	transition: all 200ms ease-out;
}

header nav ul#navbar li a:hover {
	opacity: 0.7;
}

.nav-up {
	top: -3.75em;
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------ HOME */
/* ----------------------------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------------------------- Welcome */

#welcome {
	position: relative;
	width: 100%;
	height: calc(100vh - 6em);
	min-height: 400px;
	overflow: hidden;
}

#welcome .welcome-mat {
	position: absolute;
	width: 50%;
	bottom: 0;
	left: 0;
	padding: 2em;
	box-sizing: border-box;
}

#welcome h1 {margin: 0;}

/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------- ABOUT */
/* ----------------------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------------- About */

#about p {
	max-width: 640px;
	font-size: 1em;
	line-height: 1.5em;
	white-space: pre-line;
}
	
/* ----------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------ WORK */
/* ----------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------- Work List */

.work-list {
	padding: 3.75em 0 0 0;
}

.work-list.home {
	padding: 0;
}

.work-list .box {
	width: 50%;
	padding-top: 33.2%;
	overflow: hidden;
}

.work-list .box.small 		{width: 50%; padding-top: 33.2%;}
.work-list .box.medium 		{width: 100%; padding-top: 33.2%;}
.work-list .box.large 		{width: 100%; padding-top: 56.25%;}

.work-list .box a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.box-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	padding: 2em;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 1);
}

.box-overlay h1 {
	margin: 0 0 0.25em 0;
	opacity: 1;
	transition: all .2s ease-in-out;
}

.box-overlay h2 {
	margin: 0;
	opacity: 0.5;
	transition: all .2s ease-in-out;
}

.work-list .box a:hover h1 { opacity: 0.5; }
.work-list .box a:hover h2 { opacity: 1; }

.work-list .box a img {
	transform: scale(1.00);
	/*filter: grayscale(100%);*/
	transition: all .2s;
	opacity: 1;
}

.work-list .box a:hover img {
	transform: scale(1.04);
	/*filter: grayscale(0);*/
}

/* -------------------------------------------------------------------------------------------- Single Project */

.project-cover {
	position: relative;
	width: 100%;
	height: 100vh;
	background-attachment: fixed;
	background-position: center center;
	background-color: rgb(50, 50, 50);
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.project-cover .shadow {
	position: absolute;
	width: 100%;
	height: 100%;
	background: -webkit-linear-gradient(rgba(0,0,0,0) 75%, rgba(0,0,0,0.2) 100%);
    background: -o-linear-gradient(); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(); /* For Firefox 3.6 to 15 */
    background: linear-gradient(); /* Standard syntax */
}

.project-cover .project-info {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
}

.project-cover h1.big {
	margin: 0 0 0.4em 0;
	max-width: 640px;
}

.project-text-white,
.project-text-white h1,
.project-text-white h2,
.project-text-white a,
.project-text-white p {
	color: rgba(255, 255, 255, 1);
}

.project-text-black,
.project-text-black h1,
.project-text-black h2,
.project-text-black a,
.project-text-black p {
	color: rgba(49,46,42,1);
}

.project-content {
	position: relative;
	width: 100%;
	overflow: hidden;
	max-width: 1920px;
	margin: 0 auto;
	padding: 4em;
	box-sizing: border-box;
}

.project-text {
	padding: 4em;
}

.project-text p {
	font-size: 1em;
	line-height: 1.5em;
	white-space: pre-line;
}

.next-project, .prev-project {
	position: relative;
	float: left;
	display: inline;
	width: 50%;
	padding: 4em 2em;
	box-sizing: border-box;
}

.next-project a, .prev-project a {
	border-bottom: 1px solid rgb(100, 100, 100);
}

.next-project 		{float: right; text-align: right;}
.prev-project 		{float: left; text-align: left;}

/* ----------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- FOOTER */
/* ----------------------------------------------------------------------------------------------------------- */

footer {
	position: relative;
	width: 100%;
	padding: 1em 2em;
	box-sizing: border-box;
}

/* ----------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------- Z-INDEX */
/* ----------------------------------------------------------------------------------------------------------- */

header 						{z-index: 4000;}
footer 						{z-index: 3000;}

#sundog 					{z-index: 1000;}
#welcome 					{z-index: 2100;}
#about 						{z-index: 1100;}
#work 						{z-index: 1200;}
#contact 					{z-index: 1300;}
#night 						{z-index: 900;}
#night #goodbye 			{z-index: 1400;}

.work-list .box 			{z-index: 2000;}
.box-overlay 				{z-index: 2001;}

/* ----------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------- MEDIA QUERIES */
/* ----------------------------------------------------------------------------------------------------------- */

/* Larger than standard 1080p (devices and browsers) */
@media only screen and (min-width: 1919px) {
	/*.work-list .box 		{width: 33.33%; padding-top: 22.2%;}
	.work-list .box.small 	{width: 33.33%; padding-top: 22.2%;}*/
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	.half 					{width: 100%;}
	.work-list .box 		{width: 100%; padding-top: 80%;}
	.work-list .box.small 	{width: 100%; padding-top: 80%;}
	.work-list .box.medium 	{width: 100%; padding-top: 80%;}
	.work-list .box.large 	{width: 100%; padding-top: 80%;}
	.box-overlay 			{width: 100%; top: auto; bottom: 0;}
	
	#welcome .welcome-mat 	{padding: 2em; width: 100%;}
	
	.project-cover 			{
							width: 100%;
							padding-top: 100%;
							height: 0;
							background-attachment: scroll;
						}
	.project-cover .shadow {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
						}
	.project-cover .project-info 			{padding: 2em;}
	
	.project-text 			{padding: 2em;}
	
	.next-project,
	.prev-project 			{padding: 2em;}
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	body 					{font-size: 90%;}
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	body 					{font-size: 80%;}
	header nav {
		display: none;
}
}