@charset "utf-8";
/* CSS Document */

/* ==========================================================================
   Stanadrd
   ========================================================================== */

::selection {
	background: #ff4234; 
	color: #fff;
}

::-moz-selection {
	background: #ff4234; 
	color: #fff;
}

body,html {
	margin: 0;
	font-family: 'DIN Next W01 Light', Helvetica, Arial, sans-serif;
}

body {
	padding: 10px;
	background: rgba(255,255,255,1);
}

/**** Type ****/

p,h1,h2,h3,h4,h5,h6, .large {
	font-size: 17px;
	line-height: 23px;
	padding-bottom:5px;
	font-weight:400;
}

a {
	text-decoration: none;
	color: #000000;
	color: rgba(0,0,0,1);
	border-bottom: 1px solid rgba(0,0,0,1);
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
}

a:focus {
	outline: none;
}

a:hover {
	text-decoration: none;
	color: #ff4032;
	color: rgba(255,64,50,1);
	border-bottom: 1px solid rgba(255,255,255,1);
}

a.no-link {
	text-decoration: none !important;
	border: none !important;
}
a.no-link:hover {
	color: #000000 !important;
}

/* ==========================================================================
   Main
   ========================================================================== */
	 
iframe {
	border: 1px solid rgba(0,0,0,1);
}

header {
	margin-top: 30px;
	margin-bottom: 40px;
}

.logo {
	background:url(../img/feast-default.svg) no-repeat;		
	width: 75px;
	height: 26px;
	opacity: 1;
	transition: all .3s ease-in-out;
}
		.no-svg .logo {
			background:url(../img/feast-logo-small.png);		
		}
		
.logo-mobile {
	display:none;
	width: 75px;
	height: 26px;
	opacity: 1;
	transition: all .3s ease-in-out;
	position:relative;
	top:4px;
}
		
.logo:hover {
	cursor: pointer;
	opacity: .6;
}

.logo h1 {
	text-indent: -999em;
}
	
nav {}
		
ul.main-nav {
	margin: 21px 0 0 0;
	padding: 0;
	list-style: none;
}

h3.left-col{
	margin-top:0;
}
		
ul.main-nav li {
	font-size:17px;
	float: left;
	margin-right: 120px;
	font-weight:400;
}
				
ul.main-nav li:last-child {
	margin-right: 0 !important;
}

.side-bar {
	margin-bottom: 40px;
}

.side-bar ul {
	margin: -16px 0 0 0;
	padding: 0;
	list-style: none;
}
		
.side-bar ul li {
	margin-bottom: 5px;
	font-size:17px;
	line-height:20px;
	font-weight:400;
	padding:5px 0 0;
}
							
.text-area {
	margin-bottom: 40px;
}

.main {
	min-height: 500px;
}
		
/* ==========================================================================
   Sections
   ========================================================================== */
	 
	.home-html-area {
		background: rgba(0,0,0,.1);
		color:#151515;
		}
		
		.home-html-area p {
			padding:0 10px;}
	 
.tweet-latest ul {
	list-style:none;
	padding:0;
	margin:0;
	display:block;}	 
	
	.tweet-latest ul li {
		background: rgba(255,64,50,1);
		color:#f4f4f4;
		padding:10px;}
		
		.tweet-latest ul li a {
			color:#f4f4f4 !important;
			border:none !important}
			
	.youtube-video {
		background: rgba(255,64,50,1);
		color:#f4f4f4;
		border: 5px solid rgba(255,64,50,1) !important;}
		
		#intro {
			margin-bottom:50px;}
	
/* Work
   ========================================================================== */

.brick{
	*display: none;
	float:left;
	position:relative;
	margin-right:20px;
	margin-bottom:20px;
	padding:0 !important;
}
	
	.brick-one {
		width:240px;
	}
	
	.brick-two {
		width:360px;
	}
	
	.brick-three {
		width:520px;
	}		

#items .item {
	position:relative;}	
	
#items a{
	background-image:url(about:blank);
}

	
.item { float: left; }

.item img { display: block }

.is-hidden { display: none; }
	
	
#items .work-name {
	width:100%;
	height:100%;
	position:absolute;
	padding:10px;
	cursor: pointer;
	/* background: rgba(255,64,50,1); */
	background-color:#ff4032;
	background-image:url(about:blank);
	transition:all .3s ease-in-out;
	opacity:0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;	
}		

#items .work-name:hover {
	opacity:1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}		
	
#items .work-name h3,
#items .work-name p {
	color:#f4f4f4;
	margin:0;
	padding:0;
}

.categories {
	margin-bottom: 40px;
}
.categories ul {
	margin: -16px 0 0 0;
	padding: 0;
	list-style: none;
}
.categories ul li {
	margin-bottom: 5px;
	font-size: 17px;
	line-height: 20px;
	font-weight: 400;
	padding: 5px 0 0;
}
		

/* Profile
   ========================================================================== */
		
.team-area {}

.team-pic {
	position:relative;}
	
	.team-member .team-pic img {
		cursor: pointer;
		transition:all .3s ease-in;
		opacity:1;
		padding:0;
		margin:0;
			}
		
		
		
		.team-pic-cover {
			background: rgba(255,64,50,1);
			opacity:0;
			position:absolute;
			top:0;
			left:0;
			z-index:10;
			height:100%;
			width:100%;
			transition:all .3s ease-in-out;}
			
			.team-pic-cover:hover {
				opacity:1;}
		
		.team-pic {
			margin-bottom:5px;}
	
		
/* Page
   ========================================================================== */

.nav-sidebar li {
	list-style: none;
}

.client-list-area {
	margin-top:20px;}

ul.client-list {
	margin:0;
	padding:0;
	list-style:none;}

ul.client-list li {
	font-size:17px;
	margin-bottom:5px;}

ul.client-list li a {
	border-bottom: none !important;}

body.jobs #page li{
	font-size: 17px;
	line-height: 23px;
	font-weight:400;	
}

/* Contact
   ========================================================================== */

#map {
	margin-top:20px;
	margin-bottom:5px;
	width:100%;
	height:300px;
	border: 1px solid #333333;
}

.fade-in {
	opacity:0;}

/* Footer
   ========================================================================== */
		
footer {
	margin-top: 80px;
}

footer p a, footer p a:link, footer p a:visited {
	margin: 0 0 10px 0;
	display: inline-block;
}

footer p {}
 
footer .span3 {
	margin-bottom: 40px;
}


/* Social Icons
   ========================================================================== */

.social a {
	text-indent: 22px;
}

a.twitter:before {
	background: url('../img/social-spritesheet-feast.png') no-repeat -16px -8px; width: 15px; height: 15px;
	content: "  ";
	display: block;
	position: absolute;
	margin-top: 3px;
}

a.twitter:hover:before {
	background: url('../img/social-hover-spritesheet-feast.png') no-repeat -16px -8px; width: 15px; height: 15px;	
}

a.facebook:before {
	background: url('../img/social-spritesheet-feast.png') no-repeat -48px -8px; width: 15px; height: 15px;
	content: "  ";
	display: block;
	position: absolute;
	margin-top: 3px;
}

a.facebook:hover:before {
	background: url('../img/social-hover-spritesheet-feast.png') no-repeat -48px -8px; width: 15px; height: 15px;	
}

a.youtube:before {
	background: url('../img/social-spritesheet-feast.png') no-repeat -80px -8px; width: 15px; height: 15px;
	content: "  ";
	display: block;
	position: absolute;
	margin-top: 3px;
}

a.youtube:hover:before {
	background: url('../img/social-hover-spritesheet-feast.png') no-repeat -80px -8px; width: 15px; height: 15px;	
}

a.newsletter:before {
	background: url('../img/social-spritesheet-feast.png') no-repeat -111px -8px; width: 15px; height: 15px;
	content: "  ";
	display: block;
	position: absolute;
	margin-top: 3px;
}

a.newsletter:hover:before {
	background: url('../img/social-hover-spritesheet-feast.png') no-repeat -111px -8px; width: 15px; height: 15px;	
}

/* responsive media queries
   ========================================================================== */

  
/* mobile & iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 768px) 
and (orientation : portrait) {
	
	
	.brick-one,
	.brick-two,
	.brick-three {
		width:100%;
		float:left;
	}
	
	ul.main-nav {
		margin-top:15px;
	}
	
	ul.main-nav li{
		margin-right: 30px;
	}	
	
	.logo {
		display:none;
	}	
	
	.logo-mobile {
		display:block;
	}	
	
	p, 
	h1, 
	h2, 
	h3, 
	h4, 
	h5, 
	h6, 
	.large {
		font-size:15px;
	}
	
		
}
			
/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

	ul.main-nav {
		margin-top:15px;
	}

	.logo {
		display:none;
	}	
		
	.logo-mobile {
		display:block;
	}
	
}		

/* Big desktop ----------- */
@media (min-width: 1200px) {
	.masonary [class*="span"] {
		margin-bottom: 30px;
	}
}		

@media (max-width: 767px) {

header {
	margin-bottom: 0; }
	
ul.main-nav li {
    line-height: 2;
    width: 100%; }

}