/* ============

Global Styles...

=============== */

body {
	font-family: "Atlas Grotesk Web", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 1.3em;
	background-color: #191919;
	color: #FAFAFA;
  padding: 30px 0;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

}

a{
	/*color: rgba(245, 245, 245, 0.5); */
	color: #878380;
	text-decoration: none;
}

a:visited {
	/*color: rgba(245, 245, 245, 0.5); */
	 color: #878380;
	 opacity: 1.0;
}
a:hover {
	color: rgba(245, 245, 245, 1.0);
	-ms-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
a:focus {
	color: rgba(245, 245, 245, 1.0);

}

a:focus, a:active{
	color: rgba(245, 245, 245, 1.0);
}

h1 {

		/*font-family: "Atlas Grotesk Web Bold", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 2.3em;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.35;*/
		font-family: "Atlas Grotesk Web Bold", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 600;
	  color: #fff;
	  font-size: 2.0em;
	  font-weight: 1200;
	  letter-spacing: 0.00em;
	  line-height: 1.55em;
	  /*margin-bottom: 10px;
	  margin-top: 0px;*/
}

.inline-img{
	max-width:100%;
	max-height:100%;
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}

.embed-container-inline{
	position: relative;
	padding-bottom: 0%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	width: 100%;
	height: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


h2 { font-size: 2.0em; font-weight: 300;}
h3 { font-size: 1.7em; }
h4 { font-size: 1.5em; }
p  { font-size: 1.0em; }




a.morelink {
	text-decoration:none;
	outline: none;
}
.morecontent span {
	display: none;

}
/* ============

Header Styles...

=============== */

header#logo {
	font-family: "Atlas Grotesk Web Bold", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 600;
  color: #fff;
  font-size: 2.3em;
  font-weight: 1200;
  letter-spacing: 0.00em;
  line-height: 1.55em;
  /* margin-bottom: 10px; */
  margin-top: 0px;
}

header#logo a {
  color: #fff;
  display: block;
  line-height: 1.08em;
	width: 100%;
}

/* ============

Navigation Styles...

=============== */

#main-nav {
  height: 100%;
  position: fixed;
  z-index: 999;
  /* overflow: hidden; */
  max-width: 200px;
}

#content-navigation{
	margin-top: 10px;
}

#content-navigation > li {
  display: inline-block;
  /*font-size: 1.7em;
  letter-spacing: 0.06em;
  line-height: 1.15em;
  margin-bottom: 0;*/
	font-size: 1.6em;
	font-weight: 400;
	line-height: 1.25em;
	letter-spacing: 0.03em;
	margin: 0;
	padding: 0;
  width: 100%;
}

#content-navigation > li a {
 color:#878380;
 font-weight: 500;
}

#content-navigation li a.active, #content-navigation li a:hover {
  color: #fff;
}

#mobile-menu{
	display: none;
}

#mobile-menu-trigger {
		font-family: "Atlas Grotesk Web", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    display: none;
    /* float: right; */
    /* font-size: 0.9em; */
    font-weight: 100;
    /* margin-top: -20px;
		margin-right:20px; */
		z-index: 999;
}

#mobile-navigation-parts{
	display: none;
}

header#logo #mobile-menu-trigger a {
    color: #878380;
		display: block;
		z-index: 999999;
		position:relative;


}
header#logo #mobile-menu-trigger a:hover {
    color: #FFF;
		display: block;
}

/* ============

Content Styles...

=============== */
/*hero{
		cursor: url("../images/cursor-arrow.png"),auto;
}*/

.hero {
    margin-bottom: -17px;
    z-index: -1;


}

.content-main {
    position: relative;
    padding-top: 28px;
		padding-left: 80px;
		padding-right: 300px;
}

.content-main h1:first-child {
    font-size: 2.3em;
    font-weight: 900;
    line-height: 1.1em;
    margin-bottom: 10px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.content-main p {
    font-size: 1.5em;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.5em;
}

.readMore{
	float:right;
	margin-top: 0.2em;
	font-size: 1.5em;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.5em;
}

/* ============

Projects only...

=============== */

#projects {
    margin-top: 140px;
		width: 120%;

}

#projects li {
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1.25em;
    letter-spacing: 0.03em;
    list-style: outside none none;
    margin: 0;
    padding: 0;

    /*opacity: 100%;*/
}

#projects li a.active {
    color: #fff;
}

#project-wrapper img {
    display: block;
    margin: 20px auto 30px;
    max-width: 100%;
}

#project-details {
		float: left;
		font-size: 0.75em;
    margin-top: 60px;
}
#project-details h3 {
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.1em;
    margin-bottom: 0;
}
#project-details a {
    color: #878380;
    text-decoration: underline;
		/*was underline*/
}

#project-details a:visited {
	/*color: rgba(245, 245, 245, 0.5); */
	 color: #878380;
	 opacity: 0.8;
}
#project-details a:hover {
	color: rgba(245, 245, 245, 0.8);
	-ms-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
#project-details a:focus { color: rgba(245, 245, 245, 0.8); }


/* ============

Content replated code...

=============== */

.content-text {
	max-width: 800px;
	font-weight: 1.25em;
}
.content-text h1 { }
.content-text h2 { }
.content-text p {
	font-weight: 300;
	font-size: 1.25em;
	line-height: 1.35;
	margin-bottom: 0.625em;
}
.content-text {
	max-width: 800px;
	font-weight: 1.25em;
}
.content-about {
	max-width: 1130px;
}
.content-about p {
	max-width: 610px;
	font-size: 1.25em;
	line-height: 1.35;
	margin-bottom: 0.625em;
}
.address {
	margin: 2em 0px;
}
.close {
	font-size: 2em;
}
.primary a {
	color: rgba(245, 245, 245, 1.0);
}
.primary a:hover {
	color: rgba(245, 245, 245, 0.5);
}
.secondary a {
	color: rgba(245, 245, 245, 1.0);
}
.secondary a:hover {
	color: rgba(245, 245, 245, 0.5);
}

/* ============

Slideshow Styles...

=============== */

.hero{
	width: 100%;
	height: 220px;
}
.a-slide{
	height: 100%;
	width: 100%;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

.slick-slider{
	height: 100%;

}
.slick-list,
.slick-track {
	height: 100%;
}
.slick-prev {
	left: 0;
}
.slick-next {
	right: 0;
}
.slick-prev:before,
.slick-next:before {
    color: black;
}

.slick-dots {
    color: #fff;
    font-size: 0.8em;
    right: 20px;
    text-align: right;
    top: 10px;

		height: 30px;
    width: 310px;
}

/*.slick-dots {
   color: #fff;
   font-size: 0.8em;
   right: 20px;
   text-align: right;
   top: 10px;
   height: 30px;
   width: 310px;
}*/


.slick-dots a {
    color: #fff;
    font-size: 1.6em;
    font-weight: 300;
    opacity: 0.7;
}

.slick-active a {
	opacity: 1;
}

.slick-track:hover {
	cursor: pointer;
}


/* ============

Responsive and mobile

=============== */

@media screen and (min-width: 400px){
	h1 {
				/*font-size: 2.5em;
				line-height: 1.35;
				font-weight: 300; */
				font-size: 2.3em;
		    font-weight: 900;
		    line-height: 1.1em;
		    margin-bottom: 10px;
		    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
			}
	.hero { height: 280px; }
	.secondary { font-size: 1.2em; }
}

@media screen and (min-width: 500px){
  .hero {
  	height: 360px;
  }
}

@media screen and (min-width: 768px){

	h1 { font-size: 2.3em; line-height: 1.35; font-weight: 300; }

	#frame-top {
		top: 0;
		position: fixed;
		width: 100%;
		height: 2em;
		z-index: 999;
		background-color: #2A2A2A;
	}
	#frame-bottom {
		bottom: 0;
		position: fixed;
		width: 100%;
		height: 2em;
		z-index: 999;
		background-color: #2A2A2A;
	}

	.hero { height: 70vh; }

	.content-hero {
		height: 70vh;
		width: 100%;
		max-width:1000px;
		height: 600px;
		background: #1A1A1A;
		margin:auto;
	}

	.close {
		line-height: 1;
	}

	.content-main {
    position: relative;
    padding-top: 28px;
    padding-left: 80px;
    padding-right: 0;
}

}

@media screen and (min-width: 1024px){
	.hero { height: 85vh; }

	.content-main {
    padding-left: 3%;
    padding-right: 3%;
		max-width: 800px;
    padding-top: 0px;
    position: relative;
}
}

@media screen and (min-width: 1800px){
	.secondary { font-size: 1.3em; }
	.content-main {
    padding-left: 3%;
    padding-right: 10%;
		max-width: 900px;
    padding-top: 0px;
    position: relative;
}
}


/* Larger than Desktop HD */
@media (min-width: 1800px) {
  body .columns.offset-by-one-and-a-bit {
    margin-left: 5%;
	}
}

/* Larger than desktop */
@media (min-width: 1301px) and (max-width: 1400px)  {
  body .columns.offset-by-one-and-a-bit {
    margin-left: 8.6%;
  }
}

/* Larger than desktop */
@media (min-width: 1200px) and (max-width: 1300px)  {
	body .columns.offset-by-one-and-a-bit {
		margin-left: 8.6%;
	}
}

/* Larger than desktop */
@media (min-width: 1000px) and (max-width: 1199px)  {
	body .columns.offset-by-one-and-a-bit {
		margin-left: 10.333%;
	}

	.ten.columns {
    width: 88.3%;
	}

}

/* Larger than tablet */
@media (min-width: 820px) and (max-width: 999px) {
	body .columns.offset-by-one-and-a-bit {
		margin-left: 5.55%;
	}
}

/* Larger than tablet */
@media (min-width: 750px) and (max-width: 819px) {
	body .columns.offset-by-one-and-a-bit {
		margin-left: 5.55%;
	}

	/* #mobile-navigation-parts {
		display: block;
	} */

}

/* Everything below mobile */
@media (max-width: 749px) {


	header#logo {
    /* background: rgba(26, 26, 26, 0.9) none repeat scroll 0 0; */
    left: 5%;
    /* padding-bottom: 10px; */
    padding-top: 20px;
		font-size: 20px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }

	header#logo a {
	  color: #fff;
	  display: block;
	  line-height: 1.08em;
		width: 40%;
	}

  #mobile-menu-trigger {
		display: inline-block;
    float: right;
    position: fixed;
    right: 20px;
    top: 40px;
  }

	#navigation-parts{
		display: none;
	}

	#projects {
		width: 100%;
	}


	#mobile-navigation-parts {
		right: -10px;
    top: 65px;
		display: block;
    /* background: rgba(26,26,26,0.9) none repeat scroll 0 0; */
    height: 100%;
		padding-right: 0px;
		padding-left:10%;
    display: none;
    position: fixed;
    /* text-align: right; */
		text-align: center;
    z-index: 9999;
		width:100%;
		right:0px;
	}

	#project-wrapper {
		margin-top:-20px;
    margin-left: 0;
    width: 90%;
}
	body .columns.offset-by-one-and-a-bit {
    float: none;
		margin-top:85px;

  }

  #main-nav {
    display: block;
    float: none;
    height: 100%;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    position: inherit;
    width: 98.6667%;
    z-index: 999;
    max-width: 1000px;
  }

  .hero {
		margin-top:2vh;
    margin-bottom: -0px;
    z-index: -1;
		height: 33vh;
  }

	.content-main p{
		font-size: 1.5em;
		font-weight: 400;
		letter-spacing: 0.01em;
		line-height: 1.5em;
		 width: 100%;
	}

	h1{
		width: 100%;
	}

	.content-main {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0;
    /*padding-top: 56px;*/
		padding-top: 3vh;

    position: relative;
    width: 100% !important;
  }

	.content-navigation{
		top:55px;
		padding-top:60px;

	}

	body {
		padding: 0px 0;
		/* font-size: 1.1em; */
		font-size: 2.8vw;
		/* padding-top: 70px; */

	}

	#mobile-background{
		background: rgba(26,26,26,0.9) none repeat scroll 0 0;
		isplay: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 10vh;
    width: 100%;
    z-index: 99;
	}

	h1 {
    font-size: 2em;
    margin: 0em 0;
	}

	.content-main h1:first-child {
	    font-size: 20px;
	    font-weight: 900;
	    line-height: 1.1em;
	    margin-bottom: 22px;
			margin-top: 6px;
			margin-left: 0px;
	    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	}

	#projects{
		  float: inherit;
			margin-top:20px;
			line-height: 14px;
	}

	#projects li {
		line-height: 34px;
	}

	#content-navigation{
		float: right;
		margin-top:70px;
		margin-right:20px;

		/* font-size: 11px; */
		/* line-height: 12px; */

	}

	.slick-dots {
    color: #fff;
    font-size: 0.8em;
    right: 0;
    text-align: right;
    top: 10px;
    position: relative;
}


	.slick-dots {
			display: none;
			color: #fff;
			font-size: 0.8em;
			right: 20px;
			text-align: right;
			top: 10px;


	}
	.slick-dots li {
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin: 0 0 0 0px;
    padding: 0;
		padding-right:4px;
    position: relative;
    width: 11px;
  }


}

/* Up to phablet (also point when grid becomes active) */
@media (min-width: 401px) and (max-width: 749px) {


	/* #mobile-navigation-parts {
		right: -10px;
		top: 65px;
		display: block;
		background: rgba(26,26,26,0.9) none repeat scroll 0 0;
		height: 100%;
		padding-right: 10px;
		padding-left:10%;
		display: none;
		position: fixed;
		text-align: right;
		z-index: 100;
		width:50%;
	} */

	.content-main {
		margin-left: -0px !important;
		padding-left: 0 !important;
		padding-right: 0;
		padding-top: 4vh;
		position: relative;
		width: 100% !important;
	}

	.slick-dots li {
		display: none;
	}



}

/* Mobile only */
@media (max-width: 400px) {
  header#logo {
		display: inline-block;
    /* font-size: 2.0em; */
    font-size: 20px;
    position: fixed;
		left: 20px;
    /* top: 20px; */
  }

	#content-navigation > li{
		font-size: 20px;
		/* font-size: 2.0em; */
	}

	#projects li{
		font-size: 20px;
		/* font-size: 2.0em; */
	}

  /* #mobile-navigation-parts {
    top:0vh;
		position: fixed;
		z-index: 100;
		font-size: 20px;
  } */


		.slick-dots li {
			display: none;
		}

}



/* ============

@Font Faces...

=============== */


@font-face {
  font-family: 'Atlas Grotesk Web';
  src: url('/fonts/AtlasGrotesk-Regular-Web.eot');
  src: url('/fonts/AtlasGrotesk-Regular-Web.eot?#iefix') format('embedded-opentype'),
     url('/fonts/AtlasGrotesk-Regular-Web.woff') format('woff'),
     url('/fonts/AtlasGrotesk-Regular-Web.ttf') format('truetype'),
     url('/fonts/AtlasGrotesk-Regular-Web.svg#AtlasGrotesk-Regular') format('svg');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

@font-face {
font-family: 'Atlas Grotesk Web Bold';
src: url('/fonts/AtlasGrotesk-Bold-Web.eot');
src: url('/fonts/AtlasGrotesk-Bold-Web.eot?#iefix') format('embedded-opentype'),
url('/fonts/AtlasGrotesk-Bold-Web.woff2') format('woff2'),
url('/fonts/AtlasGrotesk-Bold-Web.woff') format('woff');
font-weight: 700;
font-style: normal;
font-stretch: normal;
}