/********************************
Josh Austin
9.10.14
********************************/

html {
	/*height: 100%;*/
}

body {
	background: #fff;
	position: relative;
	border: 18px solid #fff;
	height: 100%;
}

/*.outer-border {
	width: 100%;
	height: 100%;
		border: 20px solid #000;
		background: none;
		position: fixed;
		top: 0;
		left: 0;
}*/

a {
	text-decoration: none;
	color: #000;
}

.button {
	font-family: 'proxima-nova', Helvetica, sans-serif;
	font-size: .85em;
	text-transform: uppercase;
	padding: 20px 30px;
	border: 1px solid #ccc;
	border-radius: 50px;
	display: inline-block;
	min-width: 175px;
	text-align: center;
	-webkit-transition: all 0.3s ease-out;
	     -moz-transition: all 0.3s ease-out;
	       -o-transition: all 0.3s ease-out;
	          transition: all 0.3s ease-out;
}

.button.icon {
	font-family: 'entypo';
	min-width: none;
	font-size: 1.75em;
	padding: 18px 26px;
	min-width: 20px;
}

.button:hover {
	border: 1px solid #000;
/*-moz-box-shadow:    		0px 0px 10px  #ccc;
-webkit-box-shadow: 		0px 0px 10px  #ccc;
box-shadow:         			0px 0px 10px  #ccc;*/
}




/********************************
HP HERO
********************************/

.hero {
	/*height: 840px;*/
	/*background: url(../img/header-3.jpg) no-repeat ;*/
	/*background-size: cover;*/
	background: #f7f7f7;
}

.logo {
	position: absolute;
	top: 42px;
	left: 35px;
	z-index: 999
}

nav {
	position: absolute;
	top: 35px;
	right: 35px;
	z-index: 999;
}

header {
	overflow: auto;
	padding: 55px 0px;
	/*background: #fff;*/
}


nav ul {
	float: right;
}

nav ul li {
	list-style-type: none;
	display: inline;
	text-align: center;
	margin: 5px;
}

nav ul li a{
	color: rgba(0,0,0,0.2);
}

nav ul li a:hover{
	color: rgba(0,0,0,1);
}


.hero .lockup {
	padding: 150px 0px 285px 0px;
}


.lockup {
	text-align: center;
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
/*	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);*/
}

.lockup h1,
.lockup h2 {
	padding: 48px 0px;
}

.lockup img {
	max-width: 960px;
	width: 100%;
}

.lockup p {
	width: 850px;
	margin: 0 auto;
}

.lockup a {
	margin: 48px 0px;
}

.lockup span {
	position: absolute;
	bottom: 140px;
	left: 50%;
	opacity: 0.5;
	transform: translate(-50%, 0%);
	-webkit-transform: translate(-50%, 0%);
}

.lockup span:after {
	content: "\E764";
	font-family: "entypo";
	display: block;
	margin-top: 10px;
	font-size: 1.5em;
}




/********************************
WORK CARD LAYOUT
********************************/

.page-contents {
	padding: 150px 0px;
	background: #fff;
	z-index: -1;
}

.work li a {
	height: 470px;
	width: 100%;
	display: inline-block;
	background: #fff;
	color: #222;
	outline: 1px solid #ccc;
	position: relative;
	margin:10px 0px;
	  -webkit-transition: all 0.3s ease-out;
	     -moz-transition: all 0.3s ease-out;
	       -o-transition: all 0.3s ease-out;
	          transition: all 0.3s ease-out;
}

.work li:nth-child(1) a {
	opacity: 0.5;
	background: #eee;
}

.work li:nth-child(1) a:hover {
	opacity: 0.5;
	outline: 1px solid #ccc;
	background: #eee;
}

.work li a:hover {
	background: #fff;
	outline: 1px solid #000;
/*	-moz-box-shadow:    	6px 8px 10px  #ccc;
-webkit-box-shadow: 		6px 8px 10px  #ccc;
box-shadow:         			6px 8px 10px  #ccc;*/

}

.card-content {
	position: absolute;
	width: 85%;
	top: 50px;
	left: 50%;
	transform: translate(-50%, 0%);
	-webkit-transform: translate(-50%, 0%);
	text-align: center;
}

.card-content h3:after {
	content: "";
	display: block;
	width: 60px;
	border-top: 1px solid #ccc;
	margin: 24px auto;
}

.card-content h3,
.card-content p {
	margin-bottom: 24px;
}

.work h2 {
	padding-bottom: 96px;
	text-align: center;
}

.work .strong {
	padding:
}

.work .link {
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translate(-50%, 0%);
	-webkit-transform: translate(-50%, 0%);
	text-align: center;
}

.work .link {
	font-family: 'proxima-nova', Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5em;
	/*text-transform: uppercase;*/
	border: 1px solid #fff;
	padding: 10px 25px;
	border-radius: 50px;
	-  -webkit-transition: all 0.3s ease-out;
	     -moz-transition: all 0.3s ease-out;
	       -o-transition: all 0.3s ease-out;
	          transition: all 0.3s ease-out;
}

.work li a:hover .link {
	/*background: #ccc;*/
	border: 1px solid #000;
	padding: 10px 25px;
	border-radius: 50px;
}

/********************************
Projects
********************************/

.project {
	margin: 96px 0px 48px 0px;
}

.project .wrapper {
        max-width: 960px;
        text-align: center;
}

.project-info {
	margin-bottom: 96px
}

.project-info h2 {
	margin-bottom: 36px;
}

.project-info  .strong {
	margin-bottom: 36px;
	display: block;
}

.project-info  p {
	margin-bottom: 36px;
}

.project-info  a {
	margin: 0px 12px ;
}

.project img {
        width: 100%;
        margin: 0 auto;
}

.project  ul li {
        width: 100%;
        max-width: 1080px;
        margin-bottom: 24px;
}

.project  ul li:last-child {
	margin-bottom: 0;
}

.project  ul li p {
	padding:  0 48px;
	margin:  24px;
}

.project .home {
	margin: 36px 0px
}

/********************************
Work nav
********************************/

/*.next,
.prev {
	font-family: "entypo";
	font-size: 1.5em;
	padding: 18px 26px;
	border: 1px solid #ccc;
	border-radius: 100px;
	position: fixed;
	top: 50%;
	-webkit-transition: all 0.3s ease-out;
	     -moz-transition: all 0.3s ease-out;
	       -o-transition: all 0.3s ease-out;
	          transition: all 0.3s ease-out;
}

.next:hover,
.prev:hover  {
	border: 1px solid #000;
}

.next {
	right: 50px;
}

.prev {
	left: 50px;
}*/

/*.work-nav {
	z-index: 998;
}

.next,
.prev {
	height: 100%;
	width: 120px;
	background: rgba(100,100,100,0.0);
	position: fixed;
	top: 0;
	-webkit-transition: all 0.3s ease-out;
	     -moz-transition: all 0.3s ease-out;
	       -o-transition: all 0.3s ease-out;
	          transition: all 0.3s ease-out;
}
.next {
	right: 10px;
}

.prev {
	left: 10px;
}

.next:hover,
.prev:hover  {
	background: rgba(100,100,100,0.1);
}

.next:after,
.prev:after {
	position: absolute;
	font-family: "entypo";
	font-size: 2em;
	top: 50%;
	color: #ccc;
		-webkit-transition: all 0.3s ease-out;
	     -moz-transition: all 0.3s ease-out;
	       -o-transition: all 0.3s ease-out;
	          transition: all 0.3s ease-out;
}

.next:after {
	content:'\E766';
}

.prev:after {
	content:'\E765';
}

.next:hover:after,
.prev:hover:after   {
	color: #000;
}*/

.work-nav {
	position: relative;
	width: 100%;
	/*margin:50px 35px 25px 35px;*/
	display: inline-block;
}

.next,
.prev {
	font-family: "proxima-nova", Helvetica, sans-serif;
	font-size: 0.85em;
	width: 50%;
	float: left;
	padding: 64px 24px;
	text-align: center;
	background: rgba(100,100,100,0.1);
	position: relative;
	color: #888;
	-webkit-transition: all 0.3s ease-out;
	     -moz-transition: all 0.3s ease-out;
	       -o-transition: all 0.3s ease-out;
	          transition: all 0.3s ease-out;
}

.next p,
.prev p {
	font-size: 1.25em;
	font-style: italic;
	line-height: 1.75em;
	color: #000;
}

.next:hover,
.prev:hover  {
	background: rgba(100,100,100,0.2);
}




/********************************
About
********************************/

.about {
	background: url(../img/beach-1.jpg) no-repeat center top;
	background-size: cover;
	padding: 170px 0;
	height: 800px;
	background-color: #fff;
	text-align: center
}

.about h2 {
	padding-bottom: 96px;
}

ul.social li {
	display: inline-block;
	margin: 96px 20px;
}

ul.social li a {
	font-size: 3em;
	color: rgba(0,0,0,0.5);
	  -webkit-transition: all 0.3s ease-out;
	     -moz-transition: all 0.3s ease-out;
	       -o-transition: all 0.3s ease-out;
	          transition: all 0.3s ease-out;
}

ul.social li a:hover {
	color: rgba(0,0,0,1);
}

/*.about p {
	font-family: 'merriweather', Helvetica, sans-serif;
	font-size: 1.15em;
	font-weight: 300;
	line-height: 2em;
}
*/



/********************************
Footer
********************************/

footer {
	overflow: auto;
	position: relative;
	height: 100px;
	background: #fff;
	width: 100%;
	text-align: center;
	color: #888;
}

.copyright,
.date {
	position: absolute;
	bottom: 35px;
	font-size: 11px;
}

.copyright {
	left: 50px;
}

.date {
	right: 50px;
}