/*
Theme Name: 23K DotCom
Description: Requires the 23K DARWIN Publishing Platform
*/


@import "../23K_Darwin/_less/mixins.less";



/*======================================================================================
		GOOGLE FONTS
======================================================================================*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);


/*======================================================================================
		MIXINS
======================================================================================*/




/*======================================================================================
		VARIABLES
======================================================================================*/

.arial(@font-size, @line-height) { font-family: Arial, Helvetica, sans-serif; font-size: @font-size; line-height: @line-height; }
.opensans(@font-size, @line-height) { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: @font-size; line-height: @line-height; }

@23k-red: #ee1c25;
@dark-red: darken(@23k-red, 15%);
@dark-gray: #333;
@light-gray: #666;
@lighter-gray: #777;
@lightest-gray: #bbb;


/* Bootstrap Fixes */
.content  ul.nav li { background: none; list-style-type: none; padding-left: none; }


/*=================================================================
		GLOBAL - Typography
=================================================================*/

h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; 
	color: #333; text-align: center;
	clear: both;
	
	#footer & { text-align: left; }
}

h1 { margin-bottom: 10px;
	.opensans(64px, 76px); font-weight: 400; letter-spacing: -1px;
}
h2 { color: #333; .opensans(36px, 46px); font-weight: 400; }
h3 { margin-bottom: 10px;
	color: #333; .opensans(28px, 40px); font-weight: 300;
}
h2 + h3 { margin-top: -20px;
	font-size: 22px;
}
h4 { margin-bottom: 0;
	color: #333; .opensans(36px, 76px); font-weight: 300;
}
h5 {  }
h6 {  }

p { margin: 0 0 20px;
	color: #666; .opensans(16px, 26px); font-weight: 300;
	
	&.lead { font-size: 18px; }
	&.breadcrumb { margin: 0 0 10px 3px; padding: 0;
		color: #797979; font-size: 11px; line-height: 11px;
		background-color: transparent;
		.border-radius(none); .clearfix();
		
		span { float: left; }
		i { width: 10px; margin: -2px 5px 0 5px; padding: 3px;
			font-size: 9px; text-align: center;
			border: 1px solid #797979;
			display: block; float: left;
			.border-radius(25px);
		}
	}
	&.number-circle { width: 35px; margin: 5px auto 15px auto; padding: 15px 10px;
		color: #fff; font-size: 35px; font-weight: 600; text-align: center;
		background: url('_img/bg-number-circle.png') no-repeat 0 0; background-size: contain; .border-radius(100%);
	}
}

strong { font-weight: 600; }

a, a:hover, a:active, a:focus { text-decoration: none; }

.content ul li { color: #666; .opensans(16px, 26px); font-weight: 300; }


/*======================================================================================
		MASTHEAD
======================================================================================*/

#masthead, #masthead-light, #masthead-shrink {	
	&.wrapper { position: fixed; top: 0; left: 0;
		background: url('_img/bg-masthead-float.png') repeat-x 0 0;
		z-index: 11;
		.transition(background-image 1s ease);
		
		.container { position: relative; height: 95px; }
	}
	&:before { position: absolute; top: 0; left: 0; width: 100%; height: 10px;
		background: @23k-red; content: '';
		.box-shadow(0 1px 2px #666); .transition(background-color 0.5s ease);
	}
	ul.menu { margin: 0;
		
		li { position: relative; list-style-type: none;
			float: left;
			
			&#menu-item-32 { margin-left: 125px; }
			&:hover > a { color: @23k-red; }
			&.current-menu-item, &.current-menu-parent {
				> a { font-weight: 600; }
				&:hover > a, &:hover > a:after { color: #363636; border: none; }
			}
			&.current-menu-parent:hover > a { color: @23k-red; }
			div { position: absolute; top: 90px; left: -40%; width: 100%; padding: 0 50px 50px 50px; }
		}
		a { position: relative; padding: 40px 34px 4px 34px;
			color: #363636; .opensans(14px, 44px); letter-spacing: 1px;
			text-transform: uppercase;
			border-bottom: 2px solid transparent;
			display: block;
		}
	}
	ul.sub-menu { position: absolute; top: -2px; left: 54px; margin: 0 0 0 2px; width: 100%;
		background: #fff; border-top: 2px solid @23k-red;
		display: none;
		.box-shadow(~"2px 2px 4px rgba(201, 201, 201, 0.6), -2px 2px 6px rgba(201, 201, 201, 0.6)");
		
		&:before { position: absolute; top: -10px; left: 43%;
			border-bottom: 10px solid @23k-red;
			border-left: 10px solid transparent; border-right: 10px solid transparent;
			content: '';
		}
		li { float: none;
			
			&:last-of-type a { border-bottom: none; }
			&.current-menu-item { background: #f1f2f3;
				
				a:hover { color: #777;
					
					i { border-color: #777; }
				}
			}
			&:hover a:after, &.current-menu-item a:after { border: none; }
		}
		a { padding: 0 0 0 10px;
			color: #777; font-size: 14px; text-transform: none; letter-spacing: 0;
			border-bottom: 1px solid #e7e7e7 !important;
			z-index: 10;
			
			i { width: 12px; margin: 10px 5px 0 0; padding: 5px;
				font-size: 12px; text-align: center;
				border: 1px solid #777;
				display: block; float: left;
				.border-radius(25px);
			}
			&:hover { color: @23k-red; background: #f1f2f3; border-bottom: 1px solid #e7e7e7;
				
				i { border-color: @23k-red; }
			}
		}
	}
}

/* masthead - standard */
a#masthead-logo { position: relative; width: 110px; height: 110px; margin: 10px auto 0 auto;
	text-indent: -9999px;
	background: url('_img/23k-red.png') no-repeat 0 0;
	display: block;
	.transition(background-image 1s ease);
}
div#masthead-navigation { position: absolute; top: 5px; left: 0; }

/* masthead - light */
#masthead-light, body#blog #masthead {
	&:before { background: #fff; }
	a#masthead-logo { background: url('_img/23k-light.png') no-repeat 0 0; }
	ul.menu {
		> li > a { color: #fff; text-shadow: none;
			
			&:hover { color: #000; }
		}
		li:hover > a { color: #000; }
		li.current-menu-item > a:hover { color: #fff; }
	}
	li.current-menu-item:hover a, li:hover a:after { color: #fff; }
	ul.sub-menu { border-color: #000;
		
		&:before { border-bottom: 10px solid #000; }
		li:hover a { color: @23k-red; }
	}
}
body#blog #masthead ul.menu > li > a:hover { color: @23k-red; }

/* masthead on scroll */
#masthead.menu-dark, #masthead-light.menu-dark, body#blog #masthead.menu-dark, 
#masthead-shrink.menu-dark { background: url('_img/bg-masthead-dark.jpg') repeat-x 0 0;
	.transition(background-image 1s ease);
	
	&:before { background: @23k-red;
		.box-shadow(0 2px 1px #000); .transition(background-color 0.5s ease);
	}
	a#masthead-logo { background: url('_img/23k-dark2.png') no-repeat 0 0;
		.transition(background-image 1s ease);
	}
	ul.menu {
		a { color: #fff; text-shadow: none;
			
			&:hover { color: @23k-red; }
		}
		li.current-menu-item a:hover { color: #777;
			
			i { border-color: #777; }
		}
	}
	ul.sub-menu a { color: #777; }
}
#masthead-light.menu-dark, body#blog #masthead.menu-dark {
	ul.menu li {
		&.current-menu-item > a:hover { color: #fff; }
		&:hover > a, a:hover { color: @23k-red; }
	}
	ul.sub-menu { border-color: @23k-red;
		
		&:before { border-bottom: 10px solid @23k-red; }
	}
}
#masthead-shrink.menu-dark {
	a#masthead-logo { width: 85px; height: 85px;
		background-size: cover;
		transition: width 0.5s ease, height 0.5s ease;
	}
}


/*======================================================================================
		GLOBAL
======================================================================================*/

body { position: relative;
	background: url('_img/whiteroom-tile.jpg') repeat 0 0;
}

.wrapper > .container > .row { margin-left: 0;
	body.single-portfolio & { margin-left: -20px; }
}
#main.wrapper { min-width: 960px; padding-bottom: 60px;
	background: url('_img/whiteroom.jpg') no-repeat top center;
	overflow: hidden;
	
	> div.container { margin-top: 120px; }
}
#main.wrapper.secondary > div.container { margin-top: 50px; }

.content ul li { padding-left: 15px;
	background: url('_img/bullet.png') no-repeat 0 10px; list-style-type: none;
}

div#feature.wrapper { min-width: 960px;
	overflow: hidden;
	
	> div.container { position: relative; min-width: 940px; margin: 0 auto; padding-top: 120px;
		
		> div.row { position: relative; }
	}
	div#services-feature { position: absolute; top: 0; right: -200px; width: 1340px; height: 800px; }
}


/* icon dividers */
.icon { position: relative;
	
	&:before {
		position: absolute; top: -55px; left: -2px; width: 100%; height: 110px;
		background: url('_img/sprite-icons.png') no-repeat center 0;
		content: '';
	}
	&.quote:before { background-position: center 0; }
	&.twentythreek:before { background-position: center -110px; }
	&.ribbon:before { background-position: center -220px; }
	&.laptop:before { backgrond-position: center -330px; }
	&.tablet:before { background-position: center -440px; }
	&.phone:before { background-position: center -550px; }
	&.gear:before { backgruond-position: center -660px; }
	&.envelope:before { background-position: center -770px; }
	&.comment:before { background-position: center -880px; }
	&.financial:before { background-position: center -990px; }
	&.home:before { background-position: center -1100px; }
	&.beaker:before { background-position: center -1210px; }
	&.portfolio:before { background-position: center -1320px; }
	&.services:before { background-position: center -1430px; }
	&.interactive:before { background-position: center -1540px; }
	&.design:before { background-position: center -1650px; }
	&.branding:before { background-position: center -1760px; }
	&.marketing:before { background-position: center -1970px; }
	&.advertising:before { background-position: center -2080px; }
	&.video:before { background-position: center -2190px; }
}

[class^="services-"], [class*=" services-"] { position: relative; padding-top: 110px;
	color: #444;
	display: block;
	
	&:before { position: absolute; top: 0; left: 75px; width: 150px; height: 150px;
		.scale(0.8); .transition(all 0.5s ease);
		content: '';
	}
	&:hover { color: darken(@23k-red, 25%);
		
		&:before { .scale(0.9); }
	}
}
a.services-advertising:before { background: url('_img/services-advertising.png') no-repeat center 0; }
a.services-marketing:before { background: url('_img/services-marketing.png') no-repeat center 0; }
a.services-branding:before { background: url('_img/services-branding.png') no-repeat center 0; }
a.services-interactive:before { background: url('_img/services-interactive.png') no-repeat center 0; }
a.services-design:before { background: url('_img/services-design.png') no-repeat center 0; }
a.services-video:before { background: url('_img/services-video.png') no-repeat center 0; }

/* icons */
div.round-icon { width: 36px; height: 36px; margin-right: 20px;
	text-align: center;
	border: 1px solid #a7a7a7; float: left;
	.border-radius(50px);
	
	i { margin: 6px 0;
		color: @lighter-gray; font-size: 22px;
		display: block;
	}
}
span.round-logo { width: 36px; height: 36px; margin: 0 5px;
	line-height: 30px; text-align: center;
	display: inline-block;
	.border-radius(50px);
}

/* viewport triggers */
.vp-trigger {
	&.vp-fade-out { opacity: 1;
		
		&.on { opacity: 0; }
	}
	&.vp-fade-in { opactiy: 0;
		
		&.on { opacity: 1; .transition(all 5s ease 0.5s); }
	}
	&.vp-slide-from-bottom.on { .transition(all 1s ease 2.5s);
	
		&.wait { .transition(all 1s ease 4s); }
	}
}


/*======================================================================================
		PAGES
======================================================================================*/

/* Services Pages */
/*body.page-template-page-service-php {*/
body#agency-services {
	div#feature > div.container > div.row { z-index: 3; }
	h1, h3 { text-align: left; }
	h1 { margin-bottom: 30px; font-size: 36px; line-height: 42px; font-weight: 300;
		
		strong { font-weight: 400; }
	}
	div#main h3 { color: @23k-red; font-size: 22px; line-height: 22px; font-weight: 600; }
	#main.wrapper { padding-bottom: 60px; }
	article#page { margin-top: 20px; }
	div.span6 p { padding-right: 30px; }
	div#showcase-wrapper { margin-top: 0; padding-bottom: 90px; }
	ul#preview-portfolio li { position: relative; width: 207px; height: 130px; margin: 0 20px 20px 0;
		border: 4px solid #fff;
		float: left; overflow: hidden;
		
		&:hover { border: 4px solid #ddd; }
		div.project { position: absolute; bottom: -50px; left: 0; width: 100%; height: 45px;
			background: rgba(102, 102, 102, 0.8); border-top: 2px solid #444;
			.transition(bottom 0.3s ease-in-out);
			
			p { width: 95%; margin: 20px auto 0 auto; padding: 10px 0;
				color: #fff; .opensans(14px, 25px); text-align: center;
				.opacity(0); .transition(~"margin 0.5s ease-in-out, opacity 0.5s ease-in-out");
				
				&.long {  padding-top: 6px;
					line-height: 16px;
				}
				&.x-long { padding: 6px 0 0 0;
					line-height: 16px;
					overflow: hidden;
				}
			}
		}
		&:hover div.project, &:active div.project { bottom: 0;
			
			p { margin-top: 0;
				.opacity(100);
			}
		}
	}
	.content ul { margin: 0;
		
		li { width: 205px; margin-right: 10px;
			.opensans(16px, 26px); font-weight: 300;
			float: left;
		}
	}
}
div#showcase-wrapper h2 { margin: 30px auto 40px auto;
	color: #fff;
}

.HYPE_scene { color: #e4e5e7 !important; }


/* testimonials */
.quote { background: url('_img/bg-feature-slate.jpg') repeat 0 0;
	
	div.container { position: relative; padding: 110px 0 80px 0; display: table; }
	p { color: #fff; .opensans(28px, 38px); font-weight: 300;
		font-style: italic; text-align: center;
		
		&.author-name { margin: 35px 0 5px 0;
			font-size: 36px; font-style: normal; font-weight: 600;
		}
		&.author-title { margin-bottom: 0;
			font-size: 22px; font-style: normal;
		}
	}
}
div.testimonial { width: 940px;
	vertical-align: middle;
	.opacity(0); display: none;
	
	&.active { display: table-cell;
		.opacity(100);
	}
}


/*======================================================================================
		VIDEO
======================================================================================*/

body.single-videos { padding: 0 0; background-color: #FFF; }
body.single-videos div#video.video-js { background-color: #FFF !important; }

#video_html5_api { background: #FFF; }


div#services-feature {
	div#video-background-container { display: block; position: absolute; top: 0; left: 0; }
	#video-background.video-js { background: #FFF !important; }
	
	div.video-background-cover { position: absolute; top: 0; left: 0;
	width: 1340px; height: 800px;
	background: #6C0; }
	#video-background-firstframe { display: block; }
	#video-background-lastframe { display: none; }
	
	
	div#video-double-container-1 { position: absolute; top: 0; left: 0; wdith: 1340px; height: 800px;
		display: block; z-index: 2;
	}
	div#video-double-container-2 { position: absolute; top: 0; left: 0; width: 1340px; height: 800px;
		display: block; z-index: 1;
		
		p:empty { display: none; }
	}
	#video-double-1.video-js, #video-double-2.video-js { background: transparent !important; }
	div#video-double-mask { position: absolute; bottom: 0; width: 1340px; height: 60px;
		background: url('_img/mask-video-bottom-b.png');
	}
}


/*======================================================================================
		FRONTPAGE
======================================================================================*/

body.home {
	/*#masthead ul.menu a { text-shadow: none; }
	#masthead ul.menu > li > a { color: #fff;
		
		&:hover, &:active, &:focus { color: @23k-red; }
	}*/
	div.rotating-banner { width: 100% !important; height: 100%;
		> div { width: 100% !important; }
	
		img, /*div#video, div#video video*/ { width: 100% !important; }
		div.vjs-controls, div.vjs-loading-spinner { display: none !important; }
	}
	div.rotating-banner > div p a { color: #aaa;
		
		&:hover, &:active, &:focus { color: @23k-red; }
	}
	/*ul.rotating-banner-nav { display: none; z-index: 10; }*/
}


/*======================================================================================
		TACTICS PAGE
======================================================================================*/

body.pid-tactics { background: #ecedee;
	
	ul#masthead-menu { display: none; }
	
	#masthead-shrink {
		a#masthead-logo { background: transparent none;  }
	}
	#masthead-shrink.menu-dark { 
		a#masthead-logo { background: transparent url('_img/23k-dark2.png') no-repeat scroll 0px 0px; background-size: cover;  }
	}
	
	#main.wrapper { background: url('_img/bg-whiteroom-gray.jpg') no-repeat center top;
		background-size: 100% 730px;
	}
	h2 small { color: #333; font-size: 20px; font-weight: 300; }
}

div.tab-section { position: relative; padding: 60px 0 40px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);  .box-shadow(0 -5px 25px rgba(0, 0, 0, 0.08) inset); 
	
	h2 { font-weight: 300; text-align: left;
		
		strong { font-weight: 400; }
		&.text-center { text-align: center; }
	}
	h3 { color: @23k-red; font-size: 22px; line-height: 22px; font-weight: 600; text-align: left; }
	/*
	&:before { position: absolute; top: 0; left: 0; width: 75px; height: 100%;
		/*background: -webkit-linear-gradient(right, red, transparent);*/
		/*
		background: linear-gradient(to right, #dcdee0, transparent);
		content: '';
	}
	&:after { position: absolute; top: 0; right: 0; width: 75px; height: 100%;
		background: linear-gradient(to right, transparent, #dcdee0);
		content: '';
	}
	*/
	&#section-1 { .box-shadow(~"0 -5px 25px rgba(0, 0, 0, 0.08) inset, 0px -10px 40px rgba(0, 0, 0, 0.08)"); }
	&.section-light { background: #fafafa;
		
	/*	&:before { background: linear-gradient(to right, #ececec, transparent); } */
	/*	&:after { background: linear-gradient(to right, transparent, #ececec); } */
	}
	a.thumb-flipbook { width: 204px; height: 204px; margin: auto;
		display: block; .box-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
		transform: translateY(8px); .transition(all 0.3s ease);
		
		&:hover, &:active, &:focus { width: 220px; height: 220px;
			transform: translateY(0); .box-shadow(0 16px 15px -8px rgba(0, 0, 0, 0.4));
		}
	}
	a.iframe, a.iframe-infographic img { margin: auto;
		display: block; .box-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
		transform: translateY(0.5%) scale(0.95); .transition(all 0.3s ease);
		
		&:hover, &:active, &:focus { transform: translateY(0) scale(1);
			.box-shadow(0 16px 15px -8px rgba(0, 0, 0, 0.4));
		}
	}
}
#main.wrapper div.tab-section + div.container { margin-top: 0; }

div.scrollspy-nav {
	&.affixed-top { background: #fff; borde-bottom: 1px solid #DDD; }
	.nav { margin: 0; }
	ul { font-size: 0; text-align: center; }
	.nav-tabs > li, .nav-pills > li { display: inline; float: none; }
	.nav-pills > li > a { margin: 0; }
	a { padding: 25px 22px;
		color: #000; .opensans(15px, 15px); text-transform: uppercase;
		background: #fff; border-right: 2px solid #ddd; .border-radius(0);
		display: inline-block; outline: none;
		
		&:hover, &:active, &:focus { color: @23k-red;
			background: #fff;
		}
	}
	li.active a { color: #fff;
		background: @23k-red;
		
		&:hover, &:active, &:focus { color: #fff; background: @23k-red; }
	}
	li:first-of-type a { border-left: 2px solid #ddd; }
}

div.affixed-top { position: fixed; top: 95px; width: 100%;
	z-index: 10;
}

ul.nav-tabs { margin-bottom: 60px;
	text-align: center;
	border-bottom: 1px solid #797979;
	
	li { width: 1%;
		display: table-cell; float: none;
	}
	a { margin-bottom: -1px; padding-left: 25px; padding-right: 25px;
		color: #4e4e4e; .opensans(18px, 26px); font-weight: 300;
		background: #e0e0e2; border: 1px solid #e0e0e2;
		border-bottom: 1px solid #797979; .border-radius(10px 10px 0 0); outline: none;
		
		&:hover, &:active, &:focus { color: @23k-red;
			background: #dadadc; border: 1px solid #dadadc; border-bottom: 1px solid #797979;
		}
	}
	li.active a { background: #ecedee; border-color: #797979;
		border-bottom: 1px solid #ecedee;
		
		&:hover, &:active, &:focus { background: #ecedee; border-color: #797979;
			border-bottom: 1px solid #ecedee;
		}
		div.tab-section.section-light & { background: #fafafa; border-bottom: 1px solid #fafafa; }
	}
}

.table { .opensans(14px, 18px); border-collapse: separate;
	
	thead {
		th { padding: 20px;
			color: #fff; .opensans(27px, 27px); text-align: center;
			background: #ee1c25;
			
			&:nth-of-type(2) { background: #d71821; }
			&:nth-of-type(3) { background: #a9141a; }
		}
		td { padding: 15px 20px;
			color: #fff; .opensans(14px, 20px); text-align: center;
			background: #c90305;
			
			&:nth-of-type(2) { background: #b50204; }
			&:nth-of-type(3) { background: #8e0203; }
		}
	}
	th, td { width: 25%;
		font-weight: 400; text-align: center;
		border: none; vertical-align: middle;
	}
	tbody td { padding: 15px 20px;
		color: #424242; .opensans(18px, 24px);
		background: #dcdcde; border-left: 1px solid #fff; border-right: 1px solid #fff;
	}
	tbody > tr:nth-child(2n+1) > td { background: #e7e7e7; }
	td { background: #e5e5e5;
		
	}
}
table.multi-row {
	thead {
		th {
			&:first-of-type { background: transparent; }
			&:nth-of-type(2) { background: #ee1c25; }
			&:nth-of-type(3) { background: #d71821; }
			&:nth-of-type(4) { background: #a9141a; }
		}
		td {
			&:first-of-type { background: transparent; }
			&:nth-of-type(2) { background: #c90305; }
			&:nth-of-type(3) { background: #b50204; }
			&:nth-of-type(4) { background: #8e0203; }
		}
	}
	tbody th { .opensans(18px, 24px); font-weight: 300;
		background: #dcdcde;
	}
	tbody tr:nth-child(2n+1) > th { background: #e5e5e5; }
}


div.cover { position: relative; min-height: 100%; padding: 0;
	display: flex; overflow: hidden; align-items: center; justify-content: center;
}
body.pid-tactics div.cover { background: #aaa; }
div.video-single-player { position: relative; }
body.pid-tactics div.vjs-controls { display: none !important; }
a#replay-video { position: relative; margin: 325px 0 0 550px; padding: 20px 40px;
	color: #fff; .opensans(16px, 16px); font-weight: 600;
	background: @23k-red;
	z-index: 2;
}

a#cover-continue { position: absolute; bottom: -75px; left: 0; width: 100%;
	text-align: center;
	display: block; outline: none;
	
	i { color: #000; font-size: 75px; }
	&:hover i, &:active i, &:focus a { color: #fff; }
}

div.infographic-scroll { width: 960px; height: 800px; overflow: scroll;
	line-height: 800px; text-align: center;
	
	img { margin: 0 auto;
		display: inline-block; vertical-align: middle;
	}
	&.short { height: 600px; line-height: 600px; }
}
img.fancybox-image { max-width: none; width: auto; max-height: none; height: auto; }

a.iframe-infographic { height: 285px;
	line-height: 285px; text-align: center;
	display: block;
	
	&.infographic-short { height: 135px; line-height: 135px; }
	img { display: inline-block; vertical-align: middle; }
	/*&:hover img { height: 285px; line-height: 285px;
		
	}*/
}


/*======================================================================================
		404
======================================================================================*/

div#fourohfour { width: 295px; margin: 50px auto 10px auto;
	.clearfix();
	
	p { .opensans(125px, 125px); letter-spacing: 15px;
		background: none !important;
		float: left;
		
		span { position: relative;
			color: hsla(0, 0%, 0%, 0.6); line-height: 1; font-weight: 900;
			display: inline-block; z-index: 1;
			transform-style: preserve-3d; perspective: 550px;
			
			&:before, &:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    		line-height: inherit;
				content: attr(data-letter); z-index: 2;
				-webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%;
				transition: all 0.3s;
			}
			&:before { color: hsla(0, 0%, 0%, 0.12); text-shadow: none;
				-webkit-transform: scale(1,0.95) skew(-4deg,0deg); -ms-transform: scale(1,0.95) skew(-4deg,0deg); transform: scale(1,0.95) skew(-4deg,0deg);
			}
			&:after { color: @23k-red; text-shadow: 0px 1px 0px hsla(360, 100%, 100%, 0.1), 0px -3px 1px hsla(0, 0%, 0%, 0.4);
				-webkit-transform: rotateX(-15deg); -ms-transform: rotateX(-15deg); transform: rotateX(-15deg);
			}
		}
		&:hover span:before { -webkit-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
			-ms-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg); transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
		}
		&:hover span:after { color: #ea6253;
			-webkit-transform: translateY(-0.035em) rotateX(-40deg); -ms-transform: translateY(-0.035em) rotateX(-40deg);
			transform: translateY(-0.035em) rotateX(-40deg);
		}
	}
}

@keyframes tiltbefore {
	0% { transform: scale(1,0.95) skew(-4deg,0deg); }
	20% { transform: translateY(-0.030em) scale(1,0.90) skew(-5deg,0deg); }
	60% { transform: translateY(-0.060em) scale(1,0.60) skew(-15deg,0deg); }
	100% { transform: scale(1,0.95) skew(-4deg,0deg); }
}
@keyframes tiltafter {
	0% { transform: rotateX(-15deg); }
	20% { transform: translateY(-0.02em) rotateX(-20deg);  }
	60% { transform: translateY(-0.035em) rotateX(-50deg); }
	100% { transform: rotateX(-15deg); }
}
@keyframes flipin {
	0% { transform: rotateX(0deg); }
	50% { transform: rotateX(-90deg); }
	100% { transform: rotateX(0deg); }
}

div#fourohfour p:first-of-type span:before { animation: tiltbefore 1.4s 1s 1; }
div#fourohfour p:first-of-type span:after { animation: tiltafter 1.4s 1s 1; }
div#fourohfour p:nth-of-type(2) span:before { animation: tiltbefore 1.4s 1.8s 1; }
div#fourohfour p:nth-of-type(2) span:after { animation: tiltafter 1.4s 1.8s 1; }
div#fourohfour p:last-of-type span:before { animation: tiltbefore 1.4s 2.6s 1; }
div#fourohfour p:last-of-type span:after { animation: tiltafter 1.4s 2.6s 1; }

body.error404 div.content { margin-bottom: 65px;
	
	div.portfolio { margin: 10px 15px;
		float: left;
	}
	h3 { margin-top: 30px;
		text-align: left;
	}
	div.column-container { margin: 0 70px; }
	li { padding-left: 0 !important;
		.opensans(18px, 32px);
		background: none !important;
		
		a { color: #444; font-weight: 200;
			
			&:hover, &:active { color: @23k-red; }
		}
	}
	p#not-found { margin-bottom: 40px;
		.opensans(21px, 36px); text-align: center;
		animation: flipin 0.75s 4s 2;
	}
}


/*======================================================================================
		SHOWCASE
======================================================================================*/

body.single-showcase {
	div#main.wrapper { padding-top: 150px; padding-bottom: 0;
		background: url('_img/bg-showcase-message2.jpg') no-repeat 0 0 #d7d7d9;
		.background-size(100% 100%);
		
		> div.container { margin-top: 0; }
	}
	#showcase.content { margin-bottom: 20px;
		color: #fff; text-align: center;
		
		h1 { margin-bottom: 10px; }
		h2.prepared { color: @lighter-gray; }
		
		/*.span4 { margin-top: 50px; margin-bottom: 20px; }*/
	}
	div#closing-wrapper { padding-bottom: 50px;
		background: url('_img/bg-whiteroom.jpg') no-repeat 0 0;
		.background-size(cover);
		
		#showcase.content { padding: 50px 0 20px 0; }
	}
}
div#showcase-wrapper { position: relative; margin-top: 60px; padding: 60px 0;
	background: url('_img/bg-dark-isos.jpg') no-repeat top center #262626; border-top: 2px solid #bbb;
}
body.single-showcase div#showcase-wrapper:before { position: absolute; top: -44px; left: 0; width: 100%; height: 44px;
	background: url('_img/bg-section-shadow.png') repeat-x bottom left;
	content: '';
}

#showcase { clear: both;
	
	&.isotope { margin: 0 50px; }
}

.item { position: relative; width: 22.5%; margin: 8px 0;
	background: #fff; border: 4px solid #fff;
	float: left; overflow: hidden; display: block; z-index: 2;
	
	&:hover { border: 4px solid #ddd; }
	&.w2 { width: 47.5%; }
	img { margin: 0 auto;
		display: block;
	}
	.project { position: absolute; bottom: -50px; left: 0; width: 100%; height: 45px;
		background: rgba(102, 102, 102, 0.8); border-top: 2px solid #444;
		.transition(bottom 0.3s ease-in-out);
		
		p { width: 95%; margin: 20px auto 0 auto; padding: 10px 0;
			color: #fff; .opensans(14px, 25px); text-align: center;
			.opacity(0); .transition(~"margin 0.5s ease-in-out, opacity 0.5s ease-in-out");
			
			&.long { padding-top: 6px;
				line-height: 16px;
			}
			&.x-long { padding: 6px 0 0 0;
				line-height: 16px;
				overflow: hidden;
			}
		}
		.touch & { display: none !important; }
	}
	&:hover .project, &:active .project { bottom: 0;
		
		p { margin-top: 0;
			.opacity(100);
		}
	}
}


.isotope-hidden.isotope-item { z-index: 1; }

.isotope, .isotope .isotope-item { 
	-webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s;
	-ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;
	}

.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;
}

.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;
}


/* filter menus */
div.option-combo { margin: 0 0 20px 0;
	text-align: center;
	
	&:last-of-type { margin: 0 0 50px 0; }
}
ul.filter, ul#blog-menu { margin: 0;
	display: inline-block; *display: inline; zoom: 1;
	
	li { list-style-type: none; float: left;
		
		a { padding: 10px 40px;
			color: @dark-gray; .opensans(14px, 14px); text-align: center;
			background: #fff; border: 2px solid @lightest-gray; border-left-width: 0;
			display: block;
			
			&:hover { background: #ddd; }
			&.selected { color: #fff;
				background: @light-gray;
			}
			&:focus { text-decoration: none; }
		}
		&:first-of-type a { border-left-width: 2px; .border-radius(20px 0 0 20px); }
		&:last-of-type a { .border-radius(0 20px 20px 0); }
	}
}

div#protected { min-height: 800px;
	
	p { margin-bottom: 60px; }
	label { color: #666; .opensans(16px, 18px); font-weight: 400; }
	input:focus { border: 1px solid #ccc !important;
		.box-shadow(~"0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #ee1c25");
	}
	input[type="submit"] { margin-left: 10px; padding: 3px 10px;
		color: #fff; .opensans(16px, 16px); text-align: center;
		background: @23k-red; border: none;
		.border-radius(10px);
		
		&:focus { border: 1px solid #999 !important; }
	}
	
}


/* Showcase - SAP LPs */
body.sap-creative, body.sap-process-idea {
	&.single-showcase div#main.wrapper { padding-top: 0;
		background: #fff;
		
		&.secondary { background: url('_img/whiteroom.jpg') no-repeat center top; }
	}
	
	div.one_third p { font-size: 18px; line-height: 30px; text-align: center; }
	#masthead-light ul.menu a:hover { color: @23k-red; }
	.quote p { width: 600px; margin: 0 auto;
		
		&.author-name { margin: 35px auto 10px auto; }
	}
	div.rotating-banner { margin: 0 auto; }
	div#showcase-wrapper { margin-top: 0; padding-bottom: 75px;
		
		&:before { height: 0; }
	}
	div#closing-wrapper { position: relative;
		
		article { padding: 85px 0 50px 0; }
		h2 { margin-bottom: 10px;
			font-size: 43px; line-height: 50px; font-weight: 600;
		}
		h4 { margin-bottom: 40px;
			color: #777; font-size: 22px; line-height: 28px;
		}
		p { width: 525px; margin: 0 auto;
			font-size: 23px; line-height: 51px;
			border-bottom: 1px solid #d6d6d6;
			
			strong { color: #333; }
			span { color: @23k-red; font-weight: 700;
				float: right;
			}
			&:last-of-type { border: none; }
		}
		&:before { position: absolute; top: -55px; left: -2px; width: 100%; height: 110px;
			background: url('_img/icon-people.png') no-repeat center 0;
			content: '';
		}
	}
}


/*======================================================================================
		PORTFOLIO
======================================================================================*/

body.single-portfolio { overflow: hidden;
	
	#main.wrapper { background: #fff;
		
		> div.container { margin-top: 0; }
	}
	#portfolio { margin-left: 10px; padding: 0; }
	div#portfolio-content { width: 940px; height: 540px;
		overflow: hidden;
		
		img { max-width: 960px; margin: 0 auto 0 -10px;
			display: block;
		}
		div.rotating-banner { width: 960px !important; height: 540px !important; }
	}
	div#portfolio-title { position: relative;
		background: #fff; border-bottom: 1px solid #e5e5e5;
		z-index: 2;
		
		h1 { width: 650px; margin-bottom: 0; margin-left: 40px;
			font-size: 30px; line-height: 80px; font-weight: 400; text-align: left;
			
			&.long { padding: 8px 0;
				line-height: 32px;
			}
			&.x-long { padding: 8px 0;
				font-size: 26px; line-height: 32px;
				overflow: hidden;
			}
		}
	}
	a#fancy-prev, a#fancy-next, a#fancy-close, a#get-description { display:inline-block;*display:inline;padding:9px 16px;margin-bottom:0;*margin-left:.3em;font-size:16px;line-height:20px;color:#333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;cursor:pointer;background-color:#f5f5f5;*background-color:#e6e6e6;background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(to bottom,#fff,#e6e6e6);background-repeat:repeat-x;border:1px solid #ccc;*border:0;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);*zoom:1;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	
		&:hover, &:focus { background-color:#e6e6e6;color:#333;text-decoration:none;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear }
		&.active, &:active, &.opened { background-image:none;outline:0;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); }
	}
	
	a#fancy-prev { position: absolute; top: 20px; right: 87px;
		.border-radius(4px 0 0 4px);
	}
	a#fancy-next { position: absolute; top: 20px; right: 40px;
		.border-radius(0 4px 4px 0);
	}
	a#fancy-close { position: absolute; top: 20px; right: 170px; }
	
	a#get-description { position: absolute; top: 20px; right: 175px;
		display: none;
	}
	
	div#portfolio-description { padding: 20px 40px;
		
		p { .opensans(18px, 30px);
			
			&.long { height: 180px;
				overflow: hidden;
			}
		}
	}
	div#details { height: 220px; padding: 20px 40px 20px 20px;
		border-left: 1px solid #e5e5e5;
		
		p { .opensans(12px, 14px);
			
			&.title { margin-bottom: 3px;
				font-size: 13px;
			}
		}
	}
	div.round-icon { margin-right: 15px; margin-bottom: 10px;
		clear: both;
	}
	div.logo { width: 36px; margin-right: 15px;
		float: left; clear: both;
		
		span.round-logo { margin: 0;
			line-height: 32px;
		}
	}
	div.project { width: 95px; margin-bottom: 5px;
		float: left;
		
		a { color: @dark-red;
			
			&:hover, &:active { color: @23k-red; }
		}
	}
}
body.viewport-small {
	a#get-description { display: block; }
	div.portfolio-full { position: absolute; bottom: -260px; left: 0;
		background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid #e5e5e5;
		z-index: 1;
	}
}

.fancybox-close { top: -32px; right: 0; width: 37px; height: 32px;
	background: url('_img/fancybox-close.png') no-repeat 0 0;
	
	&:hover { background-position: 0 -32px; }
	&:active { background-position: 0 -64px; }
}
.fancybox-prev span, .fancybox-next span { background: transparent; }
.fancybox-nav { width: 5%;
	
	span { visibility: visible; }
	&.fancybox-prev { left: -30px;
		
		span { left: 0; }
	}
	&.fancybox-next { right: -30px;
		
		span { right: 0; }
	}
}


div.rotating-banner { position: relative;
	
	> div { position: absolute; top: 0; left: 0;
		display: none;
		
		&:first-of-type { display: block; }
	}
}
ul.rotating-banner-nav { position: absolute; bottom: 1px; right: 40px;
	li { position: relative; width: 10px; height: 20px; 
		margin-right: 1px; padding: 5px 10px 1px 10px;
		color: #000; font-size: 12px; line-height: 18px; font-weight: bold; text-align: center;
		background: #fff; list-style-type: none;
		float: left; cursor: pointer;
		
		&.active { background: #ccc;
		
			&:before { position: absolute; top: -26px; left: 9px; height: 20px;
				border-bottom: 6px solid #ccc;
				border-right: 6px solid transparent; border-left: 6px solid transparent;
				content: '';
			}
		}
	}
}


/* Portfolio Archives */
body.post-type-archive-portfolio.archive, body.archive.tax-deliverable, 
body.archive.tax-service, body.archive.tax-industry, body.archive.tax-deliverable,
body.archive.tax-demographic, body.archive.tax-client, body.archive.tax-tactic {
	div#main { padding-top: 120px;
		background: url('_img/bg-showcase-message2.jpg') repeat-y 0 0;
		.background-size(100% 300px);
		
		h1 { margin-bottom: 10px;
			color: #333; text-align: center;
		}
		p { text-align: center; }
	}
}





.content form.application { width: 500px; margin: 0 auto;
	
	ul li { padding-left: 0;
		background: none;
	}
}
input#gform_submit_button_5 { width: 200px; margin: 0 auto; padding: 10px;
	color: #fff; .opensans(16px, 16px); font-weight: 600px; text-align: center;
	background: @23k-red; border: 1px solid #575757; .border-radius(10px);
	display: block;
}


/*======================================================================================
		BLOG ARCHIVES
======================================================================================*/

body.archive {
	div#main.wrapper { padding-bottom: 0; }
	#masthead-showcase {
		ul#masthead-menu li a { color: #fff;
			
			&:hover, &:active { color: #000; }
		}
		#masthead-logo { background: url('_img/23k-light.png') no-repeat 0 0; }
		&.menu-light {
			ul#masthead-menu li a { color: #000;
				
				&:hover, &:active { color: @light-gray; }
			}
			#masthead-logo { background: url('_img/23k-white.png') no-repeat 0 0; }
		}
	
	}
	
	#main.wrapper > div.container { margin-top: 0; }
	h1 { margin-bottom: 10px; }
	p.lead { width: 800px; margin: 0 auto;
		.opensans(28px, 40px); text-align: center;
	}
		
	div#main { padding-top: 150px;
		background: url('_img/hero-1.jpg') repeat-y 0 0;
		.background-size(100% 615px);
	}
	&.staff-affection div#main { background-image: url('_img/hero-2.jpg'); }
	&.news div#main { background-image: url('_img/hero-3.jpg'); }
	&.design div#main { background-image: url('_img/hero-4.jpg'); }
	&.marketing div#main { background-image: url('_img/hero-5.jpg'); }
	
	div.post { position: relative; height: 265px; margin-bottom: 16px;
		background: #fff;
		
		&:hover, &:active { background: #ddd; }
		&.post-newest { height: 545px;
			
			h2 { width: 80%; margin: 0 auto;
				.opensans(34px, 40px);
			}
			p.byline { bottom: 8px; width: 90%; }
			&:before { position: absolute; top: 20px; left: 0; padding: 15px;
				color: #fff; .opensans(18px, 20px); font-weight: 600;
				background: @23k-red; border-bottom: 2px solid #000;
				content: 'NEW';
			}
		}
		a.post-thumbnail-link { margin: 4px 0 10px 4px;
			display: block;
		}
		h2 { width: 90%; margin: 0 auto;
			.opensans(18px, 22px); font-weight: 400; text-align: center;
			overflow: hidden;
			
			a { color: @dark-gray;
				
				&:hover, &:active { color: @dark-red; }
			}
		}
		&.long h2 { margin-top: -2px;
			line-height: 19px;
		}
		p.byline { position: absolute; bottom: 10px; left: 0; width: 210px; margin: 0 5px;
			color: @lighter-gray; .opensans(13px, 20px); text-align: center;
			
			a { color: @lighter-gray;
				
				&:hover, &:active { color: @dark-red; }
			}
		}
		&.long p.byline { bottom: 8px; }
	}
}
div#blog-wrapper { margin-top: 85px; padding: 60px 0 100px 0;
	background: url('_img/bg-dark-isos.jpg') no-repeat top center #262626; border-top: 2px solid #bbb;

	a.load-more { width: 90px; margin: 30px auto 0 auto; padding: 11px 19px;
		color: #fff; font-size: 17.5px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
		background: @23k-red; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
		display: block;
		.border-radius(6px);
		
		&:hover, &:active, &:focus { color: #fff;
			background: @dark-red;
			.transition(background-color 0.2s ease-in-out);
		}
		&:active { .box-shadow(~"0 2px 1px rgba(0, 0, 0, 0.4) inset, 0 -2px rgba(0, 0, 0, 0.2) inset"); }
		&.inactive { background: @dark-red; cursor: default;
			.opacity(50);
			
			&:active { .box-shadow(~"0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05)"); }
		}
	}
}
div.menu-blog-nav-container { margin: 0 0 50px 0;
	text-align: center;
}
ul#blog-menu li.current-menu-item a { color: #fff;
	background: @light-gray;
}


/*======================================================================================
		BLOG POSTS
======================================================================================*/

body.single-post { overflow: hidden;
	
	#main.wrapper > div.container { margin-top: 0;
		
		> .row { margin-left: -30px; }
	}
	#post.content { position: relative; height: 840px;
		overflow: hidden;
	}
	div.row.main { position: relative; width: 960px; height: 710px; margin-left: 0;
		border-top: 10px solid @dark-gray;
		
		div#blog-content { width: 600px; height: 100%; margin-left: 0; padding: 0 20px;
			background: #fff;
			overflow-x: hidden; overflow-y: auto; z-index: 1;
		}
		div.span4 { position: relative; height: 100%; margin: 0; margin-right: -2px;
			background: #fff; border-right: 2px solid #e5e5e5;
			overflow: hidden; z-index: 10;
			
			img { max-width: none; }
		}
		div.featured { width: 100%; height: 530px;
			background-position: center top; background-repeat: no-repeat;
		}
		h1 { margin: 30px 0 20px 0; padding-bottom: 20px;
			font-size: 36px; line-height: 42px; font-weight: 600; text-align: left;
			border-bottom: 1px solid #c9c9c9;
		}
	}
	div#details { position: absolute; bottom: 0; left: 0; width: 100%; height: 235px;
		text-align: center;
		
		img { margin-bottom: 5px;
			background: #fff;
			.border-radius(50px);
		}
		a[rel="author"] { margin: 0 5px;
			color: @23k-red; .opensans(22px, 22px); font-weight: 600;
			display: block;
			
			&:hover, &:active { color: @dark-red; }
		}
		span.author-title { .opensans(16px, 22px); }
		p.post-title { width: 80%; margin: 10px auto 5px auto;
			color: @dark-gray; .opensans(12px, 18px); font-weight: 600;
			overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
		}
		p.byline { margin-bottom: 10px;
			.opensans(12px, 18px);
			
			a { color: @lighter-gray;
				
				&:hover, &:active { color: @dark-red; }
			}
		}
		.addthis_toolbox { width: 125px; margin: 0 auto; }
	}
	h4.comments { margin: 30px 0 20px 0;
		font-size: 15px; line-height: 20px; font-weight: bold; text-align: left;
		
		span { position: relative;
			background: #fff;
			
			&:after { position: absolute; top: 12px; left: 95px; width: 500px; height: 1px;
				border-top: 1px solid #c9c9c9;
				content:"";
			}
		}
	}
	div.row.related { position: absolute; top: 720px; left: 0; width: 100%; height: 120px; margin-left: 0;
		background: #e5e5e5;
	}
	ul#preview-related { margin-left: 3px;
		
		a { display: block;
			
			&:hover h4, &:active h4 { color: @dark-red; }
		}
		li { padding-left: 0;
			list-style-type: none; background: none;
		}
		img { margin-right: 15px;
			display: block; float: left;
		}
		h4 { width: 130px; margin-bottom: 0; padding-top: 13px;
			color: @dark-gray; .opensans(13px, 19px); font-weight: 400; text-align: left;
			float: left; clear: none;
		}
		p.byline { position: absolute; bottom: 2px; left: 145px; margin-bottom: 10px;
			color: @dark-gray; .opensans(11px, 19px); text-align: left;
		}
	}
	div.span4 { margin-top: 0; margin-left: 10px; }
	li:first-of-type div.span4 { margin-left: 0; }
	div.span4 div.post { position: relative; width: 285px; height: 90px; margin: 15px 0 0 15px;
		background: #fff;
		.transition(~"transform 0.1s linear, -moz-transform 0.1s linear, -webkit-transform 0.1s linear");
		
		&:hover { .scale(1.05);
			.transition(~"transform 0.1s linear, -moz-transform 0.1s linear, -webkit-transform 0.1s linear");
		}
	}
	div#blog-content div.addthis_toolbox { width: 100px; margin-top: -28px;
		background: #fff;
		float: right;
		
		a.addthis_button_compact { padding-right: 5px;
			color: @dark-gray; .opensans(12px, 12px);
		
			span { margin-right: 0;
				background-image: none;
			}
		}
	}
	&.viewport-small { height: 620px; overflow: hidden;
		
		#post.content { height: 620px; }
		div.row.main { height: 620px;
			
			> div.span4, > div.span8 { height: 490px; }
			div.featured { height: 315px;
				background-position: center center;
			}
		}
		div.row.related { top: 500px; }
	}
}
.touch body.single-post {
	div.main.row { margin-left: -15px; }
	div.related.row { margin-left: -5px; height: 125px; }
	div.span4 div.post { margin: 15px 0 0 10px; }
	
	&.viewport-small {
		div.row.related { left: 5px; }
	}
}


/* Temporary blog coming soon page */
body#blog { background: url('_img/bg-dark-isos.jpg') repeat 0 0;
	
	div#main.wrapper { min-height: 700px;
		background: url('_img/blog-coming-soon.png') no-repeat center center;
		background-size: initial;
	}
}


/*======================================================================================
		SIDEBAR
======================================================================================*/




/*======================================================================================
		FOOTER
======================================================================================*/

#footer { position: relative;
	background: url('_img/bg-footer.jpg') no-repeat center bottom #df1921;
	
	#footer-main { height: 390px; }
	h3 { color: #fff; font-weight: 400; }
	p { color: #fff; }
	div.container { position: relative; }
	
	div#icon { position: absolute; top: -55px; left: 45.5%; width: 110px; height: 110px;
		background: url('_img/icon-contact.png') no-repeat 0 0;
		cursor: pointer; z-index: 10; .rotate(0deg); .transition(transform 1s ease);
		
		&.open { .rotate(360deg); }
	}
}
div#footer-widgets-row { margin: 100px 0 0 -35px;
	
	> div { width: 285px; margin-left: 35px; }
	span.phone-number { .opensans(44px, 36px); font-weight: 200; }
	
	a.location-link { text-decoration: none; color: #FFF; }
}

a#social-twitter, a#social-facebook, a#social-linkedin, 
a#social-pinterest, a#social-instagram { width: 56px; height: 56px;
	text-indent: -9999px;
	background: url('_img/sprite-social.png') no-repeat 0 0;
	display: block; float: left;
	.scale(0.8); .transition(-webkit-transform 0.2s ease-in-out); .transition(transform 0.2s ease-in-out);
	
	&:hover { background-position: -56px 0;
		.scale(1); .transition(-webkit-transform 0.2s ease-in-out); .transition(transform 0.2s ease-in-out);
	}
	&:active { background-position: -112px 0; }
}
a#social-facebook { background-position: 0 -56px;
	
	&:hover { background-position: -56px -56px; }
	&:active { background-position: -112px -56px; }
}
a#social-linkedin { background-position: 0 -112px;
	
	&:hover { background-position: -56px -112px; }
	&:active { background-position: -112px -112px; }
}
a#social-pinterest { background-position: 0 -168px;
	
	&:hover { background-position: -56px -168px; }
	&:active { background-position: -112px -168px; }
}
a#social-instagram { background-position: 0 -224px;
	
	&:hover { background-position: -56px -224px; }
	&:active { background-position: -112px -224px; }
}
div#footer-toolbar { background: #323232;
	
	p { margin-bottom: 0;
		color: #9f9f9f; .opensans(11px, 35px); font-weight: 400; text-align: center;
		
		a { color: #BBB; }
	}
}

/* frontpage footer */
#footer-frontpage { background: #333;
	
	div#contact { border-top: 1px solid transparent;
		
		&.open { border-top: 10px solid @23k-red; }
	}
	div#footer-main { height: 82px;
		> div.row { margin-left: -20px; }
		p { margin-bottom: 3px;
			color: #eee; .opensans(12px, 18px);
			
			&#footer-message { margin-top: 15px; }
			&#footer-copyright { font-size: 9px; }
		}
	}
	div.span10 { width: 730px; }
	div.span2 { width: 160px; margin-top: 25px; padding-left: 20px;
		border-left: 2px solid #777;
	}
}
a[id^="social-circle-"], [id*=" social-circle-"] { width: 20px; margin-right: 5px; padding: 5px;
	color: #777; line-height: 10px; text-align: center;
	border: 2px solid #777;
	display: block; float: left;
	.border-radius(25px); .transition(all 0.2s ease);
	
	i { width: 20px;
		font-size: 18px;
	}
	&:hover { color: #eee; border-color: #eee;
		.scale(1.2); .transition(all 0.2s ease);
	}
}

/* contact area */
div#contact { background: #242424; border-top: 1px solid @23k-red;
	height: 0; overflow: hidden;
	.box-shadow(~"0 12px 5px -10px #000 inset, 0 -12px 5px -10px #000 inset");
	.transition(border-top 0.5s linear);
	
	&.open { border-top: 12px solid @23k-red;
		.transition(border-top 0.5s linear);
	}
	div.container { padding: 75px 0 50px 0; }
	h2 { margin-bottom: 5px;
		color: #fff; font-weight: 600; text-align: center;
	}
	h4 { margin-bottom: 20px;
		color: #aaa; font-size: 22px; line-height: 28px; text-align: center;
	}
	p { color: #fff; text-align: center; }
	
	.gform_wrapper { margin: 30px 0 0 5px; }
	.gform_wrapper ul { margin-left: -20px; }
	.gform_wrapper ul li.gfield { margin-left: 15px !important;
		clear: none;
	}
	form.inline ul.gform_fields li.span3 { width: 200px; }
	label { display: none; }
	li#field_2_5 { clear: both; }
	input { position: relative; }
	div.ginput_container { position: relative;
		
		&:after { position: absolute; top: 12px; right: 13px;
			color: #575757; font-family: 'FontAwesome'; font-size: 24px;
		}
	}
	li#field_2_1 div.ginput_container:after,
	li#field_2_2 div.ginput_container:after { content: '\f007'; }
	li#field_2_3 div.ginput_container:after { content: '\f0f2'; }
	li#field_2_4 div.ginput_container:after { content: '\f0e0'; }
	li#field_2_5 div.ginput_container:after { content: '\f098'; }
	input.medium { width: 170px; height: 45px; margin-bottom: 25px; padding: 10px 15px;
		color: #fff; .opensans(16px, 16px); font-weight: 300;
		background: #414141; border: 1px solid #575757;
		.border-radius(10px);
	}
	::-webkit-input-placeholder, :-moz-placeholder,
	::-moz-placeholder, :-ms-input-placeholder { color: #575757; }
	li#field_2_6 > label { width: 115px; margin-top: 0;
		color: #fff; .opensans(14px, 20px); font-weight: 600;
		display: block; float: left;
	}
	ul#input_2_6 { margin: 0;
		
		li { width: 150px; margin-right: 5px;
			color: #fff; font-weight: 300;
			
			label { color: #fff; .opensans(14px, 16px); font-weight: 300;
				display: block;
			}
			&.gchoice_6_4 { width: 185px; }
		}
	}
	li.gchoice_6_1, li.gchoice_6_3 { display: block; float: left; }
	.gform_wrapper .gform_footer { width: 220px; margin: 0 0 0 10px; padding: 0;
		clear: none; float: left;
	}
	input#gform_submit_button_2 { width: 200px; padding: 10px;
		color: #fff; .opensans(16px, 16px); font-weight: 600px; text-align: center;
		background: @23k-red; border: 1px solid #575757;
		.border-radius(10px);
	}
	
	form.inline li.assist li label { width: auto; }
	form.inline ul.gform_fields li.assist div.ginput_container { width: 350px;
		float: left;
	}
	form.inline li.assist { position: relative; }
	form.inline li.assist div.ginput_container { position: absolute; top: 0; left: 140px; }
	.gform_wrapper .gform_footer { position: absolute; bottom: 92px; right: 10px; }
	
	div.validation_error { display: none; }
	li.gfield_error { width: auto !important; margin-bottom: 0 !important; padding: 3px !important;
		
		input.medium { margin-bottom: 0 !important; }
		.instruction { margin: 3px 0 0 0 !important; }
	}
	div#gforms_confirmation_message { margin-top: 60px;
		color: #fff; .opensans(21px, 28px); text-align: center;
	}
	input:focus { border: 1px solid #575757 !important;
		.box-shadow(~"0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #ee1c25");
	}
}
body.home div#contact div.container { position: relative; }

/* showcase footer */
#footer-showcase { background: #fff; border-top: 10px solid #f2f2f2;
	.box-shadow(inset 0 3px 2px -3px #444);
	
	.container { height: 155px; }
	p { width: 580px; margin: 0 auto 15px auto;
		color: #111; .opensans(15px, 20px); text-align: center;
		
		&#copyright { margin-top: 30px;
			line-height: 42px; font-weight: bold;
			
			img { padding: 0 5px; }
		}
	}
}