/* ------------------ Page Style ------------------ */

body{
	margin: 0;
	padding: 0;
}



a{
	color: #008aff;
	text-decoration: none;
}

h1 {
font-weight: 100;
font-size: 3.25em;
margin: 0;
}

.content-box{
	background: no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
	padding: 80px 0 0 0;
	box-shadow: inset 0px 4px 0px rgba(0,0,0,.3);
	
	
}

.mobile{
	display: none;
}

.cover{
	width: 100%;
	z-index: 2000;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	background: #fff;
}

/* ------------------ Navigation ------------------ */

.nav {
	border-bottom: 3px solid rgba(134, 0, 0, 1);
	font-family: "proxima-nova",sans-serif;
	font-weight: lighter;
	height: 50px;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
}

.nav img{
	float: left;
	width: 50px;
}

.nav-buttons {
	float: left;
	background: #c2282f;
	color: #ffffff;
	font-size: 1.5em;
	height: 50px;
	text-align: right;
	line-height: 48px;
	cursor: pointer;
}

.nav-buttons span{
	padding: 0 10px;
}

/* ------------------ Home Box ------------------ */

#home{
	background-image:url("../img/bg2.jpg");
	min-height: 800px;
}

#logo {
margin: 20px auto;
max-width: 250px;
width: 50%;
font-size: 1.75em;
text-align: center;
color: #C41010;
font-family: "proxima-nova",sans-serif;
font-weight: lighter;
}

#logo > img{
	width: 100%;
}

/* ------------------ Work Box ------------------ */

#work{
	background-image:url("../img/wood2.jpg");
	padding: 80px 0;
}

.filter-button {
background: rgba(194, 40, 47, .45);
display: inline;
padding: 15px;
box-shadow: inset 0px -3px 0px rgba(0,0,0,.3);
cursor: pointer;
font-family: "proxima-nova",sans-serif;
font-weight: 400;
color: #ffffff;
}

.filter-highlight{
background: rgba(194, 40, 47, 1);
}

#isotope-options {
width: 286px;
margin: 0 auto 10px;
height: 60px;
}

.item {
width: 480px;
overflow: hidden;
height: 270px;
text-align: center;
margin: 20px;
border: 5px solid #fff;
}

.item img{
	width: 480px;
	height: 270px;
}

.item:hover .item-info{
	top: 0;
	opacity: 1;
}

.item-info{
	opacity: 0;
	position: absolute;
	top: 200px;
	left: 0;
	padding: 10px;
	background: rgba(0,0,0,.85);
	margin: 0;
	width: 480px;
	height: 270px;
	-webkit-transition: top .25s ease 0s, opacity .25s ease 0s;
	   -moz-transition: top .25s ease 0s, opacity .25s ease 0s;
	     -o-transition: top .25s ease 0s, opacity .25s ease 0s;
		    transition: top .25s ease 0s, opacity .25s ease 0s;
	overflow: hidden;
}

.item a{
	color: #fff;
	font-family: "proxima-nova",sans-serif;
	font-weight: 100;
	font-size: 2em;
}

.item p {
font-size: .7em;
padding: 0;
margin: 15px 15px;
}

.item .title{
font-size: 1.7em;

text-align: center;
width: 100%;

}

#isotope-container{
	width: 90%;
	margin: 0 auto;
	z-index: 0;
}

/* ------------------ Contact Box ------------------ */

.contact{
	background: url('../img/head.png') no-repeat 90% 30% #151415;
	background-size: auto;

	
}

.contact img{
	position: absolute;
	right: 0;
	top: 20px;
}


.contact p {
font-size: 5em;
margin: 0;
padding: 55px;
text-align: center;
color: #ffffff;
max-width: 800px;
font-family: "proxima-nova",sans-serif;
width: 50%;
}

.contact p a{
	color: #008aff;
	text-decoration: none;
}

.content-box#contact-bottom {
	padding: 0;
}

/* ------------------ Work Popup ------------------ */

.mfp-close-btn-in .mfp-close {
color: #fff;
font-size: 10em;
font-family: "proxima-nova",sans-serif;
font-weight: 100;
position: fixed;
width: 100px;
height: 100px;
top: 0;
right: 0;
-webkit-transition: all .25s ease 0s;
-moz-transition: all .25s ease 0s;
-o-transition: all .25s ease 0s;
transition: all .25s ease 0s;
}

.mfp-close-btn-in .mfp-close:hover {
	-webkit-transform: rotatez(180deg);
	-moz-transform: rotatez(180deg);
	-o-transform: rotatez(180deg);
	transform: rotatez(180deg);
}

.work-wrapper {
width: 80%;
margin: 0 auto;
}

.work-image{
	width: 33%;
	float: left;
}

.work-image img {
width: 100%;
}

.work-info {
float: right;
width: 60%;
color: #fff;
font-family: "proxima-nova",sans-serif;
font-weight: 100;
font-size: 1.25em;
}

.work-info a {
font-weight: 100;
font-size: 2em;
display: block;
padding: 20px 20px 20px 0;
}

.mfp-bg {
background: rgba(1, 1, 1, 0.9);
opacity: 1;
}

.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 1;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

.work-motion-wrapper{
text-align: center;
}

/* ------------------ Mobile ------------------ */

@media all and (max-width: 980px){
	.mobile{
		display: inline;
	}
	
	.desktop{
		display: none;
	}
	
	.nav{
		height: 100px;
	}
	
	.nav img{
		width: 100px;
	}
	
	.nav-buttons{
		height: 50px;
		font-size: 4em;
		padding: 25px 0;
		overflow: hidden;
	}
	#work{
		background-image:url("../img/wood2.jpg");
		padding: 130px 0 80px 0;
	}
	
	.contact p {
		font-size: 3.5em;
		width: 90%;
	}
	
	#isotope-options {
		width: 450px;
		height: 100px;
	}
	
	.filter-button{
		font-weight: 200;
		font-size: 2em;
	}
	
	.contact{
		background: url('../img/head-sm.png') no-repeat 50% 85% #151415;
		background-size: 30%;
	}
	
	.contact.noface{
		background: #151415;
	}
}

@media all and (max-width: 550px){
	.nav-buttons span {
		padding: 0;
	}
	
	.nav-buttons {
		font-size: 3em;
	}
}

/* Isotope */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* Finish Isotope Code */















