/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {font: 13px Helmet, Freesans, sans-serif;}

/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */

/* We like off-black for text. */
body, select, input, textarea {color: #333;}

a {color: #03f;}
a:hover {color: #69f;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #d3d3d3; color: #fff; text-shadow: none;}
::selection {background: #eb7d73; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #d3d3d3;} 

ins {background-color: #d3d3d3; color: #000; text-decoration: none;}
mark {background-color: #d3d3d3; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }




/* Base Styles
-------------------------------------------------------------------------------*/

/* ///////// Base Section ///////// */

body{
	font-family: 'Open Sans', Helvetica, sans-serif;
	background-color: #444445;
}

a{
	text-decoration: none;
}

a:hover{
	border-bottom: 1px solid white;
	padding-bottom: 3px;
}

.wrapper{
	background-color: white;
	width: 100%;
}

.bg_container{
	background: white;
	box-shadow: 0px 0px 27px 2px rgba(0,0,0,0.15);
	max-width: 1200px;
	width: 85%;
	margin: 0 auto;
	overflow: hidden;
}

/* ///////// Header Section ///////// */

header{
	background: #dc3a3f;
	min-height: 500px;	
	max-height: 600px;
	height: 75%;
	position: fixed;
	top: 75px;
	max-width: 1200px;
	width: 85%;
	z-index: 1;
}

header a{
	text-decoration: none;
}

.header_push{
	position: relative;
	height: 75%;
	min-height: 500px;
	max-height: 600px;
	-webkit-animation-duration: 0.4s;
	-webkit-animation-delay: 1.45s;
	-webkit-animation-fill-mode: backwards;
}
.paralax{
	z-index: 2;
	position: relative;
}

/* NAV */
nav{
	float: right;
	margin-right: 30px;
	margin-top: 15px;
}

nav li{
	list-style: none;
	display: inline-block;	
	padding: 0px 12px;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: 300;
	vertical-align: middle;
}

.nav_select{
	color: white;
	text-decoration: none;
}

.nav_select{
	color: white;
	text-decoration: none;
}

nav_select:hover{
	border-bottom: 1px solid white;
	padding-bottom: 3px;
	color: white;
	height: auto;
	overflow: auto;
}

/* SLICK NAV - MOBILE */
.slicknav_menu {
	display:none;
	position: fixed;
	z-index: 8;
	background: none;
	right: 0;
	width: 45%;
	margin-top: 15px;
}

.slicknav_menutxt{
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-weight: 300;
	display: none;
}

.slicknav_btn{
	background-color: #dc393e;
}

.slicknav_menu ul{
	font-size: 1em;
	text-align: center;
	width: 250%;
	margin-left: -145%;
	background: #dc393e;
	height: 265px;
}

.slicknav_nav a{
	padding: 15px 0px 15px 0px;
	border-bottom: #dc393e;
}

.slicknav_nav a:hover{
	border-bottom: #ffffff;
}

.slicknav_btn, .slicknav_btn:hover, .slicknav_btn a{
	text-decoration: none;
	border: 0px;
}

.slicknav_menu .slicknav_icon-bar{
	background-color: white;
}

.slicknav_btn, .slicknav_btn:hover, .slicknav_btn a:hover{
	padding: 0.438em 0.625em 0.438em 2.625em;
	border: none;
}

/* MOBILE NAV */
.scroll_nav{
	position: fixed;
	z-index: 3;
	top: 0px;
	max-width: 1200px;
	width: 85%;
	height: 75px;
	background: #dc393e;
	padding: 10px 0px;
}

#mini_logo_container{
	z-index: 10;
	float: left;
	margin-left: 20px;
	margin-top: 10px;  
	display: block;  
	opacity: 1;
	margin-top: -300px;
	width: 189px;
	height: 40px;
	/* animation */
	-webkit-transition: margin-top 1s ease 150ms;
    -moz-transition: margin-top 1s ease 150ms;
    -o-transition: margin-top 1s ease 150ms;
    transition: margin-top 1s ease 150ms;
}

#mini_logo_container-subpage{
	float: left;
	margin-left: 20px;
	margin-top: 10px;  
	display: block;  
	opacity: 1;
	width: 189px;
	height: 40px;
}

.active{
	opacity: 1 !important;  
	display: block !important; 
	margin-top: 8px !important;
}

.mini_logo, #mini_logo_container h4{
	display: inline-block;
	float: left;
}

#mini_logo_container-subpage h4{
	display: inline-block;
	float: left;
}

h4:hover{
	padding-bottom: 4px;
	border-bottom: 1px solid white;
}

.mini_logo{
	padding-right: 10px;
	width: 50px;	
	height: 40px;
}

.logo_container{
	width: 100%;
	clear: both;
	text-align: center;
	padding-top: 35px;
}

.logo_container a:hover{
	border-bottom: 0px;
}

.logo{
	margin: 0 auto;
	max-width: 140px;
	margin-top: 60px;
}

.logo_text{
	margin-bottom: 60px;
	margin-top: 3px;
	color: white;
}

/* ///////// Misc. Type Section ///////// */

h1{
	font-weight: 100;
	font-size: 2.1em;
	letter-spacing: 1px;
}

h1 span{
	font-weight: 700;
	margin-left: 3px;
}

h2{
	font-size: 1.3em;
	font-weight: 100;
}

h3{
	font-weight: 100;
	font-size: 1.8em;
	letter-spacing: 1px;
	margin-bottom: 2px;
}

h3 span{
	font-weight: 700;
	margin-left: 3px;
}

p{
	font-size: 1.2em;
	line-height: 138%;
	font-weight: 100;
	letter-spacing: 1px;
	color: #424244;
}

h4{
	font-weight: 100;
	font-size: 1.5em;
	letter-spacing: 1px;
	color: white;
	vertical-align: top;
	padding-top: 5px;
}

h4 span{
	font-weight: 700;
	margin-left: 3px;
}


/* ///////// Work Section ///////// */

.work{
	width: 102%;
	overflow: hidden !important;
	background-color: white;
	z-index: 4;
}

.grid-sizer { 
	width: 33.33%; 
	width: calc(100%/3);
}

#work_anchor{
	position:relative; 
	top:-75px;
}

.work_1, .work_2, .work_3, .work_4, .work_5, .work_6, .work_7, .work_8, .work_9, .work_10, .work_11, .work_12, .work_13, .work_14{
	display: inline-block;
	margin: 0;
	padding: 0;
	float: right;
	opacity: .7;
	/* animation */
	-webkit-transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-o-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;
}

.work_1:hover, .work_2:hover, .work_3:hover, .work_4:hover, .work_5:hover, .work_6:hover, .work_7:hover, .work_8:hover, .work_9:hover, .work_10:hover, .work_11:hover, .work_12:hover, .work_13:hover, .work_14:hover{
	opacity: 1;
}

.centered{
}

/* The ghost, nudged to maintain perfect centering */
.block {
  text-align: center;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 85%;
}

/*///// Work Items - Default Invisible /////*/
/* Oasis Brands */
.work_1{
	width: 33.33%; 
	width: calc(100%/3);
	height: 480px;
	background-image: url(../../images/work/oasis-bg.jpg);
	background-position: center center;
}

/* Abu Garcia */
.work_2{
	width: 33.33%; 
	width: calc(100%/3);
	height: 260px;
	background-image: url(../../images/work/abu-bg.jpg);
	background-position: center center;
}

/* Dollar Tree */
.work_3{
	width: 33.33%; 
	width: calc(100%/3);
	height: 260px;
	background-image: url(../../images/work/dollartree-bg.jpg);
	background-position: center center;
}

/* RMHC */
.work_4{
	width: 33.33%; 
	width: calc(100%/3);
	height: 220px;
	background-image: url(../../images/work/rmhc-bg.png);
	background-position: center center; 
}

/* TriState */
.work_5{
	width: 33.33%; 
	width: calc(100%/3);
	height: 480px;
	background-image: url(../../images/work/tristate-bg.png);
	background-position: center bottom;
}

/* Baylor */
.work_6{
	width: 33.33%; 
	width: calc(100%/3);
	height: 260px;
	background-image: url(../../images/work/baylor-bg.png);
	background-position: top center;	
}

/* Ugly Stik */
.work_7{
	width: 33.33%; 
	width: calc(100%/3);
	height: 260px;
	background-image: url(../../images/work/uglystik-bg.jpg);
	background-position: center center;	
}

/*///// Work Items - Default Invisible /////*/
/* Kernel */
.work_8{
	width: 33.33%; 
	width: calc(100%/3);
	height: 480px;
	background-image: url(../../images/work/kernel-bg.jpg);
	background-position: center center;
}

/* McCafe */
.work_9{
	width: 33.33%; 
	width: calc(100%/3);
	height: 260px;
	background-image: url(../../images/work/mccafe-bg.png);
	background-position: left bottom;
}

/* Alumni */
.work_10{
	width: 33.33%; 
	width: calc(100%/3);
	height: 260px;
	background-image: url(../../images/work/alumni-bg.png);
	background-position: center center;
}

/* Newsletter */
.work_11{
	width: 33.33%; 
	width: calc(100%/3);
	height: 220px;
	background-image: url(../../images/work/newsletter-bg.png);
	background-position: center center;
}

/* Crowdstory */
.work_12{
	width: 33.33%; 
	width: calc(100%/3);
	height: 480px;
	background-image: url(../../images/work/crowdstory-bg.png);
	background-position: center center;
}

/* Infographic */
.work_13{
	width: 33.33%; 
	width: calc(100%/3);
	height: 260px;
	background-image: url(../../images/work/infograph-bg.png);	
	background-position: center center;
}

/* School */
.work_14{
	width: 33.33%; 
	width: calc(100%/3);
	height: 260px;
	background-image: url(../../images/work/ou-bg.png);	
	background-position: center center;
}

.see_more{
	width: 100%;
	background: #eeeeee;
	text-align: center;
	height: 40px;
	z-index: 5;
	cursor: pointer;
}

button{
	background: none;
	border: 0;
	color: #999999;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-weight: 500;
	font-size: 1em;
	width: 100%;
	height: 100%;
}

button:active{
	border: none;
	box-shadow: none;
	outline: none;
}

button:focus {
    outline: none;
}

h5{
	color: #999999;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-weight: 500;
}

.see_more h5:hover{
	color: #393939;
}

/* ///////// About Section ///////// */
#about_anchor{
	position:relative; 
	top:-75px;
}

.about{
	height: auto;
	overflow: auto;
	display: block;
	padding: 140px 0px 140px 0px;
	background: white;
}

.about_left {
	display: inline-block;
	float: left;
	width: 58%;
	padding: 0% 4% 0% 8%;
}

.about_left h1{
	color: #dc3a3f;
	margin-bottom: 15px;
}

.about_right {
	display: inline-block;
	float: left;
	width: 42%;
	padding: 0% 8% 0% 4%;
	text-align: center;
}

.selfie{
	margin-bottom: 15px;
}

.resume{
	text-align: center;
	display: block;
	clear: both;
	border-bottom: none;
	padding-bottom: 0px;
}

.resume:hover{
	border: none;
	padding-bottom: 0px;
}

.resume h3{
	vertical-align: top;
	font-size: 1.4em;
	color: #dc3a3f;
	font-weight: 100;
	text-decoration: none;
	display: inline-block;
	padding-top: 3px;
}

.resume h3:hover{
	border-bottom: 1px solid #dc393e;
	padding-bottom: 3px;
}

.resume_icon{
	display: inline-block;
	padding-right: 10px;
}

/* ///////// Footer Section ///////// */
#footer_anchor{
	position:relative; 
	top:-75px;
}

footer{
	background: #424244;
	color: white;
	width: 100%;
}

footer p{
	color: white;
	font-size: 1.5em;
	font-weight: 100;
}

small{
	font-size: 0.6em;
	color: #8e8e8e;
}

.small{
	text-align: center;
	margin: 0 auto;
	width: 40%;
}

.footer_content{
	width: 40%;
	margin: 0 auto;
	text-align: center;
	padding: 150px 0px 120px 0px;
}

.footer_content a{
	margin-top: 20px;
}

.email_icon{
	display: inline-block;
	padding-right: 7px;
	padding-bottom: 5px;
}

.email{
	display: inline-block;
	vertical-align: bottom;
	padding-bottom: 4px;
	border-bottom: 1px solid #444445;
}

.social_icons{
	margin-top: 16px;
	clear: both;
}

.social_icons a:hover{
	border-bottom: 0px solid #ffffff;
	padding-bottom: 8px;
}

.social_icon{
	display: inline-block;
	margin: 0px 1px;
	padding-bottom: 8px;
	border-bottom: 1px solid #444445;
}

.social_icon:hover{
	border-bottom: 1px solid white;
}

/* ///////// SUBPAGE WORK SECTIONS ///////// */

.client_container{
	width: 100%;
	clear: both;
	text-align: center;
	padding-top: 35px;
	margin-top: 120px;
}

.client_container .logo_text h1{
	font-size: 3em;
}

.client_container .logo_text h2{
	font-size: 1.8em;
}

.work_content{
	background: white;
	height: auto;
	overflow: auto;
	padding-bottom: 100px;
}

/* INTRO */
.subpage_intro{
	width: 100%;
	padding-top: 75px;
	height: auto;
	overflow: auto;
	display: block;
	clear: both;
	margin-bottom: 80px;
}

.subpage_description{
	width: 100%;
	padding-top: 75px;
	height: auto;
	overflow: auto;
	display: block;
	clear: both;
	margin-bottom: 80px;
	text-align: left;
}

.subpage_left {
	display: inline-block;
	float: left;
	width: 65%;
	padding: 0% 4% 0% 8%;
}

.subpage_left_mcdt {
	display: inline-block;
	float: left;
	width: 65%;
	padding: 0% 4% 0% 8%;
}

.subpage_right h1{
	color: #dc3a3f;
	font-size: 1.5em;
	margin-bottom: 10px;
}

.subpage_right h1 a{
	color: #dc3a3f;
	border-bottom:1px solid #dc393e;
	padding-bottom: 3px;
}

.subpage_right h1 a:hover{
	color: #444445;
	border-bottom:1px solid #444445;
}

.subpage_right {
	display: inline-block;
	float: left;
	width: 35%;
	padding: 0% 8% 0% 4%;
}

/* McD Page Link Workaround */

.subpage_right_mcdt h1{
	color: #dc3a3f;
	font-size: 1.5em;
	margin-bottom: 10px;
}

.subpage_right_mcdt h1 a{
	color: #dc3a3f;
	border-bottom:1px solid #dc393e;
	padding-bottom: 3px;
}

.subpage_right_mcdt h1 a:hover{
	color: #444445;
	border-bottom:1px solid #444445;
}

.subpage_right_mcdt {
	display: inline-block;
	float: left;
	width: 35%;
	padding: 0% 8% 0% 4%;
}


.subpage_left p a{
 color: #dc393e;
}

.subpage_left p a:hover{
 color: #dc393e;
 text-decoration: underline;
}

/* IMAGES */
.images_center{
	text-align: center;
	width: 85%;
	margin: 0 auto;
}

.image_spacer{
	padding: 2% 0px 2% 0px;
	clear:both;
	display: block; 
}

.mini_image_spacer{
	padding: 1% 0px 1% 0px;
	clear:both;
	display: block; 
}

/* IMAGE SINGLE */
.image_large{
	width: 100%;
	height: auto;
	overflow: hidden;
	display: block;
	clear: both;
}

/* IMAGE DUO */
.image_duo_left{
	width: 48%;
	max-height: auto;
	display: inline-block;
	float: left;
}

.image_duo_right{
	width: 48%;
	max-height: auto;
	display: inline-block;
	float: right;
}

/* IMAGE TRIO */

.image_trio_left{
	width: 30.65%;
	background: none;
height: 300px;
	display: inline-block;
	float: left;
	max-height: 300px;
}

.image_trio_middle{
	width: 30.65%;
height: 300px;
	display: inline-block;
	float: left;
	margin: 0px 4% 0px 4%;
	max-height: 300px;
}

.image_trio_right{
	width: 30.65%;
height: 300px;
	display: inline-block;
	float: left;
}

.images_center img{
	vertical-align: -webkit-baseline-middle;
}

.subpage_subnav{
	width: 85%;
	display: block;
	clear: both;
	height: 50px;
	margin: 0 auto;
}

.subpage_subnav h1{
	color: #dc3a3f;
	font-size: 1.3em;
	margin-bottom: 10px;
	text-align: right;
	float: right;
}

.subpage_subnav span{
	text-align: left;
	float: left;
}

.subpage_subnav h1:hover{
	border-bottom: 1px solid #dc393e;
	padding-bottom: 3px;
}

/* Media queries
-------------------------------------------------------------------------------*/

@media screen and (max-width: 1024px) { 
	.bg_container{
		width: 100%;
		max-width: none;
	}
	
	header{
		width: 100%;
		max-width: none;
	}
	
	.scroll_nav{
		width: 100%;
	}
	
	.subpage_right_mcdt{
		width: 100%;
		padding: 0% 8% 0% 8%;
		display: block;
		margin-top: 30px;
	}
	
	.subpage_right_mcdt h1{
		font-size: 1.5em;
		text-align: center;
	}
	
	.subpage_left_mcdt{
		width: 100%;
		padding: 0% 8% 0% 8%;
		display: block;
		margin-top: 30px;
	}
	
}

@media screen and (max-width: 800px) { 
	
	.logo_text{
		width: 85%;
		margin: 0 auto;
	}
	
	.about_left{
		width: 100%;
	}
	
	.about_right{
		width: 100%;
		margin-top: 60px;
	}
	
	.footer_content{
		width: 100%;
	}
	
	/* IMAGE DUO */
	.image_duo_left{
		width: 100%;
		display: block;
	}
	
	.image_duo_right{
		width: 100%;
		display: block;
	}
	
	/* IMAGE TRIO */
	.image_trio_left{
		width: 100%;
		display: block;
	}
	
	.image_trio_middle{
		width: 100%;
		display: block;
	}
	
	.image_trio_right{
		width: 100%;
		display: block;
	}

}

@media screen and (max-width: 640px)
and (min-width: 320px) { 

	.work_1, .work_2, .work_3, .work_4, .work_5, .work_6, .work_7,.work_8, .work_9, .work_10, .work_11, .work_12, .work_13, .work_14	{
		background-size: 100%;
		width: 100%;
		height: 250px;
		opacity: 1;
	}
	
	/* #menu is the original menu */
	#menu {
		display:none;
	}
	
	.slicknav_menu {
		display:block;
	}
	
	.about{
		padding: 60px 0px 60px 0px;
	}

	.footer_content{
		padding: 70px 0px 60px 0px;
	}
	
	header{
		min-height: 400px;
	}

	.header_push{
		min-height: 400px;
	}
	
	.logo_container{
		padding-top: 0px;
	}
	
	.client_container{
		padding-top: 0px;
		margin-top: 90px;
	}
	
	.subpage_intro{
		margin-bottom: 50px;
	}
	
	.subpage_left{
		width: 100%;
		display: block;
		padding: 0% 8% 0% 8%;
	}
	
	.subpage_right{
		width: 100%;
		padding: 0% 8% 0% 8%;
		display: block;
		margin-top: 30px;
	}
	
	.subpage_right h1{
		font-size: 1.5em;
		text-align: center;
	}
	
	.images_center img{
		margin-bottom: 20px;
	}
	
	.image_spacer{
		padding: 0% 0px 0% 0px;
	}
	
	.mini_image_spacer{
		padding: 0% 0px 0% 0px;
	}
}


/* Print styles
-------------------------------------------------------------------------------*/
@media print {



}

/* Browser Update Styling
-------------------------------------------------------------------------------*/

body .buorg {
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
    border-bottom:1px solid #7a7a83;
    background:#444445 no-repeat 1em 0.55em;\
    text-align:left;
    cursor:pointer;
    font-family: 'open-sans',Helvetica,sans-serif; color:#ffffff;
    font-size: 13px;
    font-weight: lighter;
}
body .buorg div {
    padding:5px 36px 5px 40px;
}
html .buorg a {
    color:#ff494f !important;
    border-bottom: none;
    text-decoration: none;
}
html .buorg a:hover {
	text-decoration: underline;
}

body #buorgclose {
    position: absolute;
    right: .5em;
    top:.3em;
    height: 20px;
    width: 12px;
    font-weight: bold;
    font-size:14px;
    padding:0;
}