/*Fonts*/

@font-face {
    font-family: 'montserrat-bold';
    src: url('../font/montserrat-bold-webfont.eot');
    src: url('../font/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/montserrat-bold-webfont.woff') format('woff'),
         url('../font/montserrat-bold-webfont.woff2') format('woff2'),
         url('../font/montserrat-bold-webfont.ttf') format('truetype'),
         url('../font/montserrat-bold-webfont.svg') format('svg');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: 'montserrat-regular';
    src: url('../font/montserrat-regular-webfont.eot');
    src: url('../font/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/montserrat-regular-webfont.woff') format('woff'),
         url('../font/montserrat-regular-webfont.woff2') format('woff2'),
         url('../font/montserrat-regular-webfont.ttf') format('truetype'),
         url('../font/montserrat-regular-webfont.svg') format('svg');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: 'notosans-regular';
    src: url('../font/notosans-regular-webfont.eot');
    src: url('../font/notosans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/notosans-regular-webfont.woff') format('woff'),
         url('../font/notosans-regular-webfont.woff2') format('woff2'),
         url('../font/notosans-regular-webfont.ttf') format('truetype'),
         url('../font/notosans-regular-webfont.svg') format('svg');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: 'notosans-bold';
    src: url('../font/notosans-bold-webfont.eot');
    src: url('../font/notosans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/notosans-bold-webfont.woff') format('woff'),
         url('../font/notosans-bold-webfont.woff2') format('woff2'),
         url('../font/notosans-bold-webfont.ttf') format('truetype'),
         url('../font/notosans-bold-webfont.svg') format('svg');
    font-weight:normal;
    font-style:normal;

}

/*Grid*/

.span1_of_12 {
	float:	left;
	width:	8.33%
}

.span2_of_12 {
	float:	left;
	width:	16.66%
}

.span3_of_12 {
	float:	left;
	width:	25%
}


.span4_of_12 {
	float:	left;
	width:	33.33%;
}

.span5_of_12 {
	float:	left;
	width:	41.66%;
}

.span6_of_12 {
	float:	left;
	width:	50%;
}

.span7_of_12 {
	float:	left;
	width:	58.33%;
}

.span8_of_12 {
	float:	left;
	width:	66.66%;
}

.span9_of_12 {
	float:	left;
	width:	75%;
}

.span10_of_12 {
	float:	left;
	width:	83.33%;
}

.span11_of_12 {
	float:	left;
	width:	91.66%;
}

.span12_of_12 {
	float:	left;
	width:	100%;
}

@media screen and (max-width: 768px){
	.span1_of_12, .span2_of_12, .span3_of_12, .span4_of_12, .span5_of_12, .span6_of_12 {
		width:		50%;
	}

	.spacer {
		display:	none;
	}
}

@media screen and (max-width: 480px), handheld{
	.span1_of_12, .span2_of_12, .span3_of_12, .span4_of_12, .span5_of_12, .span6_of_12,
	.span7_of_12, .span8_of_12, .span9_of_12, .span10_of_12, .span11_of_12, .span12_of_12 {
		width:	100%;
	}
}

/*Generic classes*/
.break {
	margin:				60px 4.16% 20px;
	width:				91.66%;
	float:				left;
	min-height:			1px;
	border-bottom:		1px solid #C2C4C6;
	background-color:	#C2C4C6;
}

.spacer {
	height:				inherit;
	min-height:			1px;
}

/*Tags*/

*{
	margin:0%;
	padding:0%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

html, body{
	height:100%;
}

a{
	text-decoration:none;
	color:inherit;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

a:focus, a:hover{
	outline:none;
	color:#F33E57;
}

/*Header and Paragraph Styles*/

h1{
	font-family:'notosans-bold', helvetica-neue, Arial, sans-serif;
	font-size:40px;
	letter-spacing: 0.01em;
	color:#fff;
}

h2{
	font-family:'montserrat-regular', Helvetica-Neue, Arial, sans-serif;
	font-size:60px;
	text-align:center;
	letter-spacing: 0.02em;
	color:#4A4C4B;
}

h3{
	font-family:'notosans-regular', helvetica-neue, Arial, sans-serif;
	font-size:18px;
	text-align:center;
	letter-spacing: 0.02em;
	color:#4A4C4B;
}

h4{
	font-family:'notosans-bold', Helvetica-Neue, Arial, sans-serif;
	font-size:30px;
	letter-spacing: 0.02em;
	color:#F33E57;
}

h5{
	font-family:'notosans-regular', Helvetica-Neue, Arial, sans-serif;	
	font-size:18px;
	color:#fff;
	font-weight: 400;
	line-height: 26px;
}


h6{
	font-size:10px;
	font-family:'notosans-regular', Helvetica-Neue, Arial, sans-serif;
	line-height: 22px;
	color:#4A4C4B;
	font-weight:400;
}

button{
	font-family:'montserrat-regular', helvetica-neue, Arial, sans-serif;
	font-size:18px;
	letter-spacing: 0.05em;
	color:#F33E57;
	border:none;
	background-color:#fff;
}

p{
	font-family:'notosans-regular', Helvetica-Neue, Arial, sans-serif;
	font-size:14px;
	line-height: 22px;
	color:#4A4C4B;
}

li{
	list-style:none;
	font-family:'notosans-regular', helvetica-neue, Arial, sans-serif;
	text-align:center;
	letter-spacing: 0.05em;
	font-size:16px;
	color:#fff;
	font-weight: 400;
}

.fixed li{
	color:#4A4C4B;
}

/*Container and Image styles*/
#header{
	height:100%;
}

#header #headerOverlay{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background-color:#000;
	opacity:0.76;
	z-index:75;
}

#header #headerImage {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background-image:url("../images/HeaderBackground1920x1280.jpg");
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	z-index:50;
}

#header #headerMain{
	position:relative;
	height:100%;
	width:100%;
	overflow:hidden;
	z-index:100;
}

#headerMain #name{
	position:absolute;
	top:40px;
	left:8.33%;
	z-index:500;
}

#headerMain #nav{
	top:51px;
	right:8.33%;
	text-align:right;
}

.fixed{
	position:fixed;
	top:-50px;
	padding:0 0 10px;
	height:50px;
	background-color:#fff;
	z-index:25;
	box-shadow:1px 1px 4px #d7d7d7;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    -ms-transform: translateY(50px);
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
}

.unfixed{
	position:fixed;
	top:0;
	padding:0 0 10px;
	height:50px;
	background-color:#fff;
	z-index:25;
	box-shadow:1px 1px 4px #d7d7d7;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    -ms-transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
}

#staticNav.fixed #name, #staticNav.unfixed #name{
	top:3px;
}

#headerMain .fixed #nav, #headerMain .unfixed #nav {
	top:10px;
	text-align:right;
}

#headerMain .navButton{
	display:inline-block;
	width:85px;
}

#headerMain #headerContent{
	position:absolute;
	top:25%;
	left:30%;
	right:30%;
	height:500px;
	text-align:center;
	overflow:hidden;
}

#headerMain #headerTitle{
	margin:10px 0 30px;
}

#headerMain #scrollButton{
	position:absolute;
	right:50%;
	-webkit-transform: translate(50%, 0);
	-ms-transform: translate(50%, 0);
	transform: translate(50%, 0);	
	color:#fff;
	bottom:55px;
	opacity:0.68;
	padding:0 8px;
	border-radius: 200px 200px 200px 200px;
	-moz-border-radius: 200px 200px 200px 200px;
	-webkit-border-radius: 200px 200px 200px 200px;
	border: 2px solid #fff;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

 #headerMain #scrollButton:hover{
	opacity:0.85;
	color:#fff;
}

#services{
	padding:0 2%;
}

#services #servicesHeader{
	margin:80px 0 55px 0;
}

#services .icon{
	margin:0 auto 20px;
	text-align:center;
	padding-top:30px;
	height:125px;
}

#services .serviceName{
	margin:0 15% 30px;
	height:25px;
	overflow:hidden;
}

#services .serviceContent{
	padding:0 18px 50px;
	margin-bottom:20px;
	height:200px;
	max-height:200px;
	overflow:hidden;
}

#projects #projectsHeader{
	text-align:center;
	margin:75px 0;
}

#projectDisplay #projImg1{
	background-image:url("../images/BrandingIdentityMock-UpVol4resize.png");
}

#projectDisplay #projImg2{
	background-image:url("../images/BrandingIdentityMockUpVol7resize.jpg");
}

#projectDisplay #projImg3{
	background-image:url("../images/BrandingIdentityMockUpVol10resize.png");
}

#projectDisplay #projImg4{
	background-image:url("../images/BrandingIdentityMockUpVol13resize.jpg");
}

#projectDisplay #projImg5{
	background-image:url("../images/Business-Card-Mock-Up-vol-22resize.jpg");
}

#projectDisplay #projImg6{
	background-image:url("../images/Photorealistic-Magazine-MockUp-2resize.jpg");
}

#projects #projectDisplay .backgroundProperties{
	position:relative;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	overflow:hidden;
	width:100%;
	height:25em;
	padding-right:20%;
}

#projects .projHover{
	position:absolute;
	top:0;
	left:0;
	height:25em;
	width:100%;
	background-color:#000;
	opacity:0;
	z-index:24;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#projects .projHover img{
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#projects .projHover:hover{
	opacity:0.76;
}

#projects .lightBoxImgs{
	display:none;
}

#contact{
	padding:0 2%;
	text-align:center;
}

#contact #contactButton{
	height:75px;
	margin-top:15px;
	text-align:center;
}

#contact #contactButton button{
    border:1px solid #F33E57;
	height:50px;
	width:275px;
	margin:0 auto;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#contact #contactButton button:hover{
  background-color:#F33E57;
	color:#fff;
	cursor:pointer;
}

#contact #mediaIcons{
	height:75px;
	margin-top:15px;
}

#contact #mediaIcons .icon{
	display:inline-block;
	margin:0 13px;
}

#contact #mediaIcons .icon:first-of-type{
	margin-left:0;
}

#contact #mediaIcons .icon:last-of-type{
	margin-right:0;
}

/*Media Queries*/

@media screen and (max-width: 1024px){
		#header #headerContent{
		left:20%;
		right:20%;
	}
}

@media screen and (max-width: 768px), handheld{

	h1{
		font-size:35px;
		line-height:40px;
	}
	
	h4{
		font-size:22px;
	}

	h6{
		font-size:10px;
		line-height: 21px;
	}
	
	li{
		font-size:25px;
		color:#fff;
	}
	
	li a:focus, li a:hover{
		outline:none;
		color:#fff;
	}
	
	.fixed li{
		color:#fff;
	}	
	
	#staticNav.fixed #name, #staticNav.unfixed #name, .fixed #navWrap, .unfixed #navWrap{
		top:8px;
	}
	
	#headerMain .fixed #nav, #headerMain .unfixed #nav {
		top:-10px;
	}
	
	.fixed #navWrap a, .unfixed #navWrap a{
		top:12px;
	}
	
	#headerMain #nav{
		top:0;
		right:0;
	}
		
	#staticNav #nav{
		text-align:center;
	}
	
	.nav-collapse ul {
		position:relative;
		background-color:#F33E57;
		height:110vh;
		opacity:0.95;
		z-index:1000;
	}

	.nav-collapse li {
		height:33.33%;
		padding:12.5% 0 0;
	}
	
	#staticNav .nav-toggle{
		margin-left:80%;
	}
	
	#staticNav .navButton{
		width:100%;
	}
	
	#headerMain #scrollButton{
		display:none;
	}
	
	#projects #projectDisplay .backgroundProperties, #projects .projHover{
		height:20em;
	}
}
	
@media screen and (max-width: 480px), handheld{

	h1{
		font-size:27px;
		line-height:28px;
	}
	
	h5{
		font-size:14px;
		line-height: 20px;
	}
	
	#header #headerOverlay{
		height:107%;
	}
		
	#header #headerImage {
		height:107%;	
	}

	.lb-data .lb-close {
	    right:-10px;
	    top:-10px;
	}
	
	#header #headerContent{
		top:90px;
		left:5%;
		right:5%;
	}
	
	#headerMain #headerTitle{
		margin:0 0 25px;
	}
	
	#projects #projectDisplay .backgroundProperties, #projects .projHover{
		height:15em;
	}
	

}