/*
Theme Name: Green Chameleon
Theme URI: http://greenchameleondesigns.com
Author: Blobfolio
Author URI: http://blobfolio.com
Version: 1.0
Description: Custom Theme for Green Chameleon
*/





/*---------------------------
/*
/*     TABLE OF CONTENTS
/*
/* 1. RESET
/* 2. CORE ELEMENTS
/* 3. REUSEABLES
/* 4. SINGLE OR LIMITED USE
/* 5. ISOTOPE
/* 6. SELECT 2
/* 5. MEDIA QUERIES
/*
/*---------------------------*/




/*---------------------------
/*
/*     RESET
/*
/*---------------------------*/

*{font-family:'΢ÈíÑźÚ';}



html, body, div, span, applet, object, iframe,
h1, h2,h21, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-family:"Microsoft YaHei";
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol {
	list-style-type: decimal;
	list-style-position: outside;
	margin-left: 20px;
	padding-left: 15px;
}

ul {
	list-style-type: disc;
	list-style-position: outside;
	margin-left: 20px;
	padding-left: 15px;
}


blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-spacing: 0;
}

p {
	margin: 1em 0;
	line-height: 1.5;
}

sup{font-size:0.6em; vertical-align:top;}

strong, b {
	font-weight: bold;
}

em, i {
	font-style: italic;
}



/*---------------------------
/*
/*     FONTS
/*
/*---------------------------*/


/*html, body, a {
	font-smoothing: antialiased!important;
}*/


/*---------------------------
/*
/*     CORE ELEMENTS
/*
/*---------------------------*/

body {
	font-family: 'Microsoft YaHei';
	color: #4f4f4f;
	/*background: url('img/bg-light-grid.png');*/
}

a {
	color: #76c044;
	font-weight: bold;
	text-decoration: none;
	transition: color 0.15s ease-in-out;
	outline: 0;
}

	a:hover {
		text-decoration: none;
		transition: color 0.15s ease-in-out;
		color: #4f4f4f;
	}

h2 {
	font-family: 'Microsoft YaHei';
	font-size: 46px;
	font-size: 2.75rem;
	text-align: center;
	text-shadow: 4px 4px 0 #cdcdcd;
	color: #656565;
}

h21 {
	font-family: 'Microsoft YaHei';
	font-size: 33px;
	font-size: 1.95rem;
	text-align: center;
	text-shadow: 4px 4px 0 #cdcdcd;
	color: #656565;
}

h3 {
	font-weight: bold;
	margin: 0 auto;
	text-transform: uppercase;
	color: #fff;
	letter-spacing: 1px;
	text-shadow: 0 2px 0 #bdbdbd;
	background-color: #cdcdcd;
	display: inline-block;
	height: 32px;
	line-height: 32px;
	padding: 0 5px;
	box-shadow: inset 0 2px 0 #bdbdbd;
	position: relative;
}

	h3:before {
		position: absolute;
		content: "";
		left: -98px;
		top: 0;
		width: 98px;
		height: 32px;
		background: url('img/sprite.png') 0 -40px no-repeat;
	}

	h3:after {
		position: absolute;
		content: "";
		right: -97px;
		top: 0;
		width: 98px;
		height: 32px;
		background: url('img/sprite.png') -110px -40px no-repeat;
	}

h4 {
	font-family: "Microsoft YaHei";
	color: #ffffff;
	font-size: 23px;
	font-size: 1.4375rem;
	margin-bottom: 15px;
}

input1,
textarea1 {
	padding: 13px 20px;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	box-shadow: inset 1px 2px 6px #ddd,
				0 1px #fff;
	background: #f7f7f7;
	font-size: 18px;
	font-size: 1.125rem;
	font-family: 'Microsoft YaHei';
	color: #7C7D7D;
	margin: 0 0 15px 0;
	outline: 0;
}

	input1:focus,
	textarea1:focus {
		box-shadow: inset 1px 2px 6px #ddd,
					0 0 6px rgba(120,186,74,0.75);
		border-color: #BAC5B3;
	}

	input1.error,
	textarea1.error {
		border-color: #FE7E7E;
		box-shadow: inset 1px 2px 6px #FDC8C6,
					0 1px #fff;
	}

textarea1 {
	margin-bottom: 0;
	box-sizing: content-box;
	height: 100%;
	resize: none;
}

input1#contact-phone {
	margin-bottom: 0;
}

:-ms-input-placeholder,
:-moz-placeholder,
::-webkit-input-placeholder,
.placeholder {
	color: #b6b6b6;
	font-weight: 600;
}

.request-form .placeholder,
.newsletter-form .placeholder {
	text-transform: uppercase;
	font-size: 13px;
	font-size: 0.8125rem;
}

input[type="submit"],
.button-green {
	border-radius: 30px;
	text-transform: uppercase;
	display: block;
	text-align: center;
	background: #75BE42 url('img/bg-button-texture-green.png');
	background: url('img/bg-button-texture-green.png'),
				linear-gradient(top, #75BE42 0%,#55A121 100%);
	background: url('img/bg-button-texture-green.png'),
				linear-gradient(to bottom, #75BE42 0%,#55A121 100%);
	color: #fff;
	border: 1px solid #5D9934;
	box-shadow: 0 2px rgba(0,0,0,0.55),
			inset 0 1px rgba(255,255,255,0.36);
	text-shadow: 0 -1px #4D8329;
	font-weight: bold;
	width: auto;
	min-width: 130px;
	margin-top: 10px;
	cursor: pointer;
	transition: background-color 0.25s ease-in-out;
}

.button-green {
	display: inline-block;
	padding: 13px 20px;
	transition: background-color 0.25s ease-in-out;
}

	input[type="submit"]:hover,
	.button-green:hover {
		color: #FFF;
		background: #83CB51 url('img/bg-button-texture-green.png');
		background: url('img/bg-button-texture-green.png'),
					linear-gradient(top, #83CB51 0%,#5BA726 100%);
		background: url('img/bg-button-texture-green.png'),
					linear-gradient(to bottom, #83CB51 0%,#5BA726 100%);
		box-shadow: 0 0 6px rgba(102,169,54,0.5),
					0 2px rgba(0,0,0,0.55),
					inset 0 1px rgba(255,255,255,0.36);
		transition: background-color 0.25s ease-in-out;
	}

	input[type="submit"]:active,
	.button-green:active {
		background: #71B343 url('img/bg-button-texture-green.png');
		background: url('img/bg-button-texture-green.png'),
					linear-gradient(top, #71B343 0%,#5C9A30 100%);
		background: url('img/bg-button-texture-green.png'),
					linear-gradient(to bottom, #71B343 0%,#5C9A30 100%);
		box-shadow: inset 0 2px 2px #5B8F36,
					0 1px rgba(255,255,255,0.36);
		transition: background-color 0.25s ease-in-out;
	}

.wrapper {
	min-width: 960px;
	max-width: 1225px;
	margin: 0 auto;
	position:relative;
}

/*---------------------------
/*
/*     REUSABLES
/*
/*---------------------------*/

.clear {
	clear: both;
	height: 0;
}

.center {
	text-align: center;
}

.title-effect {
	position: relative;
	top: -200px;
}

	.title-effect.active {
		top: 0;
		transition: top 1s ease-in-out 1s;
	}

.title-fade {
	opacity: 0;
}

	.title-effect.title-fade.active {
		opacity: 1;
		transition: top 1s ease-in-out 1s,
		            opacity 2s ease-in-out 1s;
	}

.paper-bottom,
.paper-top-shadow,
.paper-bottom-shadow {
	position: relative;
}

.paper-bottom:after {
	content: "";
	position: absolute;
	bottom: -16px;
	left: 0;
	width: 100%;
	height: 18px;
	/*background: url('img/bg-paper-bottom.png') center center repeat-x;*/
	z-index: 100;
}

.paper-bottom-shadow:after {
	content: "";
	position: absolute;
	bottom: -24px;
	left: 0;
	width: 100%;
	height: 26px;
	/*background: url('img/bg-paper-bottom-shadow.png') center center repeat-x;*/
	z-index: 100;
}

.paper-top-shadow:before {
	content: "";
	position: absolute;
	top: -29px;
	left: 0;
	width: 100%;
	height: 31px;
	/*background: url('img/bg-paper-top-shadow.png') center center repeat-x;*/
}

.button {
	border-radius: 30px;
	text-transform: uppercase;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s ease-in-out;
}

	.button:hover {
		text-decoration: none;
		transition: background-color 0.25s ease-in-out;
	}

.button.big-blue {
	box-shadow: 0 1px rgba(0,0,0,0.55),
				inset 0 1px rgba(255,255,255,0.35);
	color: #fff;
	text-shadow: 0 -1px rgba(0,0,0,0.35);
	background: #7da8c6 url('img/bg-button.png');
	background: url('img/bg-button.png'),
				linear-gradient(top, #6598BC 0%,#427BA4 100%);
	background: url('img/bg-button.png'),
				linear-gradient(to bottom, #6598BC 0%,#427BA4 100%);
	padding: 12px 22px;
	font-weight: 600;
	font-size: 16px;
	font-size: 1.125rem;
	border-radius: 40px;
	margin-top: 50px;
	border: 1px solid #395b73;
	transition: background-color 0.25s ease-in-out;
}

	.button.big-blue:hover {
		background: #8CB6D4 url('img/bg-button.png');
		background: url('img/bg-button.png'),
					linear-gradient(top, #7da8c6 0%,#5888aa 100%);
		background: url('img/bg-button.png'),
					linear-gradient(to bottom, #7da8c6 0%,#5888aa 100%);
		transition: background-color 0.25s ease-in-out;
	}

	.button.big-blue:active {
		background: #79A4C2 url('img/bg-button.png');
		background: url('img/bg-button.png'),
					linear-gradient(top, #6598BC 0%,#427BA4 100%);
		background: url('img/bg-button.png'),
					linear-gradient(to bottom, #6598BC 0%,#427BA4 100%);

		box-shadow: inset 0 1px rgba(0,0,0,0.55),
					0 1px rgba(255,255,255,0.35);
		transition: background-color 0.25s ease-in-out;
	}

.button-grey {
	color: #808080;
	font-size: 15px;
	font-weight: 600;
	padding: 0 18px 0 52px;
	text-shadow: 0 1px rgba(255,255,255,1);
	box-shadow: 0 2px rgba(0,0,0,0.25),
				inset 0 1px rgba(255,255,255,1);
	background: #ededed url('img/bg-button-texture.png');
	background: url('img/bg-button-texture.png'),
				linear-gradient(top, #EDEDED 0%,#d5d5d5 100%);
	background: url('img/bg-button-texture.png'),
				linear-gradient(to bottom, #EDEDED 0%,#d5d5d5 100%);
	height: 45px;
	line-height: 48px;
	border: 1px solid #ccc;
	margin: 10px;
	position: relative;
	transition: background-color 0.25s ease-in-out;
}

	.button-grey:hover {
		background: #f7f7f7 url('img/bg-button-texture.png');
		background: url('img/bg-button-texture.png'),
					linear-gradient(top, #F7F7F7 0%,#DCDCDC 100%);
		background: url('img/bg-button-texture.png'),
					linear-gradient(to bottom, #F7F7F7 0%,#DCDCDC 100%);
		transition: background-color 0.25s ease-in-out;
	}

	.button-grey:active {
		background: #ededed url('img/bg-button-texture.png');
		background: url('img/bg-button-texture.png'),
					linear-gradient(top, #EDEDED 0%,#D4D4D4 100%);
		background: url('img/bg-button-texture.png'),
					linear-gradient(to bottom, #EDEDED 0%,#D4D4D4 100%);
		box-shadow: 0 -2px rgba(0,0,0,0.35),
					0 1px rgba(255,255,255,1);
		border-color: #bbb;
		transition: background-color 0.25s ease-in-out;
	}

	.button-grey:before {
		position: absolute;
		content: "";
		width: 27px;
		height: 45px;
		left: 18px;
		background: url('img/sprite-home.png') -340px 0;
	}

	.button-grey.active {
		background: #75BE42 url('img/bg-button-texture-green.png');
		background: url('img/bg-button-texture-green.png'),
					linear-gradient(top, #75BE42 0%,#55A121 100%);
		background: url('img/bg-button-texture-green.png'),
					linear-gradient(to bottom, #75BE42 0%,#55A121 100%);
		color: #fff;
		border-color: #5D9934;
		box-shadow: 0 2px rgba(0,0,0,0.55),
				inset 0 1px rgba(255,255,255,0.36);
		text-shadow: 0 -1px #4D8329;
		transition: background-color 0.25s ease-in-out;
	}

.small-heading {
	font-family: '΢ÈíÑźÚ', serif;
	font-size: 38px;
	font-size: 2.375rem;
	text-align: center;
	text-shadow: 2px 1px 0 #CCCCCC;
	color: #ffffff;
	padding-top: 30px;
	margin-bottom: 10px;
}

.line {
	background: url('img/bg-line-white.png') 0 0 repeat-x;
	height: 1px;
	width: 100%;
}

.alignnone,
.aligncenter {
	margin: 20px auto;
	display: block;
	width: 100%;
	height: auto;
}

.alignleft {
	float: left;
	margin: 20px 20px 20px 0;
}

.alignright {
	float: right;
	margin: 20px 0 20px 20px;
}





/*---------------------------
/*
/*     SINGLE OR LIMITED USE
/*
/*---------------------------*/


/*------------
/* HEADER
/*------------*/
.up-arrow {
	position: fixed;
	display: block;
	width: 40px;
	height: 40px;
	background: url('img/sprite.png') -40px -310px;
	bottom: 0;
	right: 0;
	opacity: 0;
	z-index: 9999;
	transition: opacity 0.5s ease-in-out;
}

.up-arrow.active,
.up-arrow.selected {
	opacity: 0.75;
	transition: opacity 0.5s ease-in-out;
}

.up-arrow:hover {
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
}

#header {
	background: #48BB87 bottom center repeat-x;
	height: 63px;
	text-align: center;
	position: fixed;
	width: 100%;
	z-index: 150;
}
#beijing{
    /*background: url('img/bg-light-grid.png');*/
	background-color:#ffffff;
}

.home #header {
	top: -100px;
	opacity: 0;
}

	.home #header.active {
		top: 0;
		opacity: 1;
		transition: top 1.5s ease-in-out,
					opacity 2s ease-in-out;
	}

	.nav-item {
		color: #ffffff;
		line-height: 63px;
		text-transform: uppercase;
		margin: 0 0.45%;
		padding: 0 0.45%;
		font-size: 16px;
		font-size: 0.8125rem;
		letter-spacing: 1px;
		text-decoration: none;
		position: relative;
		transition: color 0.25s ease-in-out;
		font-weight: normal;
		zoom: 1;
	}

		.nav-item:hover {
			color: #99FE00;
			text-decoration: none;
			transition: color 0.25s ease-in-out;
		}

		.nav-item:before {
			position: absolute;
			content: "";
			width: 100%;
			height: 1px;
			background: url('img/bg-nav-line.png') bottom center no-repeat;
			left: 0;
			bottom: -7px;
			filter: alpha(opacity=1);
			opacity: 0;
			transition: opacity 0.25s ease-in-out;
		}

			.nav-item:hover:before,
			.nav-item.active:before {
				opacity: 1;
				-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
				transition: opacity 0.25s ease-in-out;
			}

	.logo {
		display: inline-block;
		text-indent: -9999%;
		width: 320px;
		height: 36px;
		background: url('img/sprite.png') 0 0 no-repeat;
		background-origin: content-box;
		margin: 0 1%;
		line-height: 28px;
	}

/*------------
/* HOME
/*------------*/

.parallax-container {
	text-align: center;
	overflow: hidden;
}

	#parallax div {
		width: 100%;
		text-align: center;
	}

	#parallax img {
		width: 100%;
		min-width: 1000px;
		max-width: 1577px;
		display: inline-block;
		margin: 0 -20%;
	}

	.layers {
		opacity: 0;
	}
	
	.layers.active {
		opacity: 1;
		transition: opacity 1s ease-in-out 1.5s;
	}

	.tagline {
		font-size: 38px;
		font-size: 2.375rem;
		padding-right: 585px;
		opacity: 0;
	}

		.tagline.active {
			opacity: 1;
			transition: opacity 1s ease-in-out 2.5s;
		}

		.words {
			position: relative;
			display: inline;
		}

		.words span {
			font-weight: bold;
			color: #7ac148;
			padding-bottom: 10px;
			white-space: nowrap;
			zoom: 1;
			overflow: hidden;
			display: block;
			position: absolute;
			right: -565px;
			top:0;
			left: 5px;
			width: 565px;
			
			background: url('img/bg-tagline-line.png') bottom center no-repeat;
		}

			.words span.fallback {
				filter: alpha(opacity=0);
			}

			.words span:nth-child(2) {
				animation-delay: 6s;
			}

			.words span:nth-child(3) {
				animation-delay: 9s;
			}

			.words span:nth-child(4) {
				animation-delay: 12s;
			}

			.words span:nth-child(5) {
				animation-delay: 15s;
			}

			.words span:nth-child(6) {
				animation-delay: 18s;
			}

			.words span:nth-child(7) {
				animation-delay: 21s;
			}

			@keyframes rotateWord {
				0% { opacity: 0; }
				1.25% { opacity: 0; top: -30px; }
				3.125% { opacity: 1; top: 0;}
				10.625% { opacity: 1; top: 0; }
				12.5% { opacity: 0; top: 30px; }
				50% { opacity: 0; }
				100% { opacity: 0; }
			}

	.home-desc {
		font-size: 18px;
		font-size: 1.125rem;
		padding: 30px 60px;
		opacity: 0;
	}

	.home-desc.active {
		opacity: 1;
		transition: opacity 1s ease-in-out 2.5s;
	}

.home-services {
	background: #76C043 top center no-repeat;
	padding: 90px 0 70px 0;
	position: relative;
	overflow-x: hidden;
}
.home-services1 {
	background: #68C49F top center no-repeat;
	padding: 60px 0 70px 0;
	position: relative;
	overflow-x: hidden;
}
.home-services2 {
	background: #ffffff top center no-repeat;
	padding: 30px 0 70px 0;
	position: relative;
	overflow-x: hidden;
}
.home-services1:before {
		position: absolute;
		content: "";
		top: 0px;
		left: 0;
		width: 100%;
		height: 18px;
		/*background: url('img/bg-paper-bottom.png') center center repeat-x;*/
	}

	.home-services:before {
		position: absolute;
		content: "";
		top: 0px;
		left: 0;
		width: 100%;
		height: 18px;
		/*background: url('img/bg-paper-bottom.png') center center repeat-x;*/
	}

	.ruler {
		position: absolute;
		width: 371px;
		height: 293px;
		background: url('img/sprite-home.png') 0 -3150px;
		right: -1px;
		top: 270px;
	}

	.pencil {
		position: absolute;
		width: 394px;
		height: 283px;
		background: url('img/sprite-home.png') 0 -3450px;
		right: 0;
		top: 410px;
	}

	.paperclip-1 {
		position: absolute;
		width: 121px;
		height: 45px;
		background: url('img/sprite-home.png') -400px -3150px;
		left: 115px;
		top: 750px;
	}

	.paperclip-2 {
		position: absolute;
		width: 102px;
		height: 92px;
		background: url('img/sprite-home.png') -400px -3200px;
		top: 812px;
		left: 167px;
	}

	.paperclip-3 {
		position: absolute;
		width: 69px;
		height: 116px;
		background: url('img/sprite-home.png') -400px -3300px;
		top: 797px;
		left: 74px;
	}

	.paperclip-4 {
		position: absolute;
		width: 94px;
		height: 102px;
		background: url('img/sprite-home.png') -400px -3430px;
		top: 750px;
		left: 120px;
	}

	.home-services h3 {
		background-color: #fff;
		background-color: rgba(65,116,146,0.5);
		box-shadow: inset 0 2px 0 rgba(60,107,135,0.2);
		text-shadow: 0 2px 0 rgba(60,107,135,0.2);
	}

	.home-services h3:before {
		background-position: 0 -80px;
	}

	.home-services h3:after {
		background-position: -110px -80px;
	}

	.home-services h2 {
		color: #fff;
		text-shadow: 3px 3px 0 rgba(65,116,146,0.5);
	}
	
	
	.home-services1 h3 {
		background-color: #fff;
		background-color: rgba(65,116,146,0.5);
		box-shadow: inset 0 2px 0 rgba(60,107,135,0.2);
		text-shadow: 0 2px 0 rgba(60,107,135,0.2);
	}

	.home-services1 h3:before {
		background-position: 0 -80px;
	}

	.home-services1 h3:after {
		background-position: -110px -80px;
	}

	.home-services1 h2 {
		color: #fff;
		text-shadow: 4px 4px 0 rgba(65,116,146,0.5);
	}

	.service-row {
		width: 257px;
		float: left;
		margin: 21px;
	}

		.service-badge {
			height: 257px;
			width: 257px;
			position: relative;
		}

		.badge-spikes {
			background: url('img/sprite-home.png') 0 -120px;
			width: 257px;
			height: 257px;
			position: absolute;
			top: 0;
			left: 0;
		}
		
		

		.badge-text {
			width: 257px;
			height: 257px;
			position: absolute;
		}
		
		

			.service-graphic .badge-text {
				background: url('img/sprite-home.png') 0 -380px;
			}

			.service-website .badge-text {
				background: url('img/sprite-home.png') 0 -640px;
			}

			.service-product .badge-text {
				background: url('img/sprite-home.png') 0 -910px;
			}

			.service-marketing .badge-text {
				background: url('img/sprite-home.png') 0 -1170px;
			}
			
			

		.badge-stamp {
			width: 257px;
			height: 257px;
			position: absolute;
		}
		
			.service-graphic .badge-stamp {
				background: url('img/sprite-home.png') -260px -380px;
			}

			.service-website .badge-stamp {
				background: url('img/sprite-home.png') -260px -640px;
			}

			.service-product .badge-stamp {
				background: url('img/sprite-home.png') -260px -910px;
			}

			.service-marketing .badge-stamp {
				background: url('img/sprite-home.png') -260px -1170px;
			}
			
			

		@keyframes anticlockwise {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(-360deg);
			}
		}

		@keyframes clockwise {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.service-info-wrapper {
			position: relative;
			z-index: 500;
		}

		.service-info {
			background: url('img/bg-paper1.png');
			margin-top: 40px;
			padding: 20px;
			z-index: 800;
			position: relative;
			box-shadow: 1px 1px 2px rgba(0,0,0,0.25),
						-1px -1px 2px rgba(0,0,0,0.25);
		}


			.service-info-wrapper:before {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: #fff;
				z-index: 700;
				box-shadow: 1px 1px 2px rgba(0,0,0,0.25),
							-1px -1px 2px rgba(0,0,0,0.25);
			}

				.service-graphic .service-info-wrapper:before {
					transform: rotate(3deg);
					top: 2px;
				}

				.service-website .service-info-wrapper:before {
					transform: rotate(-2deg);
					top: 1px;
				}

				.service-product .service-info-wrapper:before {
					transform: rotate(-1deg);
				}

				.service-marketing .service-info-wrapper:before {
					transform: rotate(-2deg);
				}


			.service-info-wrapper:after {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: #fff;
				z-index: 600;
				top: 0;
				left: 0;
				box-shadow: 1px 1px 2px rgba(0,0,0,0.25),
							-1px -1px 2px rgba(0,0,0,0.25);
			}

				.service-graphic .service-info-wrapper:after {
					transform: rotate(5deg);
				}

				.service-website .service-info-wrapper:after {
					transform: rotate(-5deg);
				}

				.service-product .service-info-wrapper:after {
					transform: rotate(-3deg);
					left: -1px;
				}

				.service-marketing .service-info-wrapper:after {
					left: 5px;
					transform: rotate(-6deg)
				}

			.service-info-wrapper:hover:before {
				animation: wobblebefore 0.25s ease-in-out 0s 2 alternate;
			}

			.service-info-wrapper:hover:after {
				animation: wobbleafter 0.25s ease-in-out 0s 2 alternate;
			}

			@keyframes wobblebefore {
				from {
					tranform: rotate(0deg);
				}

				to {
					transform: rotate(1deg);
				}
			}

			@keyframes wobbleafter {
				from {
					tranform: rotate(0deg);
				}

				to {
					transform: rotate(-2deg);
				}
			}

			.service-title {
				font-family: '΢ÈíÑźÚ';
				font-size: 18px;
				
				color: #787878;
				text-align: center;
			}

			.service-item {
				font-size: 15px;
				padding-left: 37px;
				line-height: 24px;
				color: #717171;
				margin: 5px 0 5px 10px;
				position: relative;
				transition: color 1s ease-in-out;
			}

				.service-item:hover {
					color: #8ccb49;
					cursor: default;
					transition: color 0s ease-in-out;
				}
				
				.service-item1 {
				font-size: 15px;
				padding-left: 37px;
				line-height: 24px;
				color: #717171;
				margin: 5px 0 5px 10px;
				position: relative;
				transition: color 1s ease-in-out;
			}

				.service-item1:hover {
					color: #6a92ae;
					cursor: default;
					transition: color 0s ease-in-out;
				}

				.service-item:before {
					content: "";
					position: absolute;
					background: url('img/sprite.png') -210px -120px;
					width: 24px;
					height: 24px;
					top: 0;
					left: 0;
					opacity: 1;
					-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
					transition: opacity 1s ease-in-out;
				}

				.service-item:after {
					content: "";
					position: absolute;
					background: url('img/sprite.png') -210px -160px;
					width: 24px;
					height: 24px;
					top: 0;
					left: 0;
					opacity: 0;
					-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
					transition: opacity 1s ease-in-out;
				}
				
				.service-item1:before {
					content: "";
					position: absolute;
					background: url('img/sprite.png') -210px -40px;
					width: 24px;
					height: 24px;
					top: 0;
					left: 0;
					opacity: 1;
					-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
					transition: opacity 1s ease-in-out;
				}

				.service-item1:after {
					content: "";
					position: absolute;
					background: url('img/sprite.png') -210px -80px;
					width: 24px;
					height: 24px;
					top: 0;
					left: 0;
					opacity: 0;
					-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
					transition: opacity 1s ease-in-out;
				}

				.service-item:hover:before {
					opacity: 0;
					-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
					transition: opacity 0s linear;
				}

				.service-item:hover:after {
					opacity: 1;
					-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
					transition: opacity 0s linear;
				}
				
				.service-item1:hover:before {
					opacity: 0;
					-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
					transition: opacity 0s linear;
				}

				.service-item1:hover:after {
					opacity: 1;
					-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
					transition: opacity 0s linear;
				}

	.services-tagline {
		color: #fff;
		font-size: 26px;
		font-weight: 300;
		background: url('img/bg-underline-white.png') bottom center no-repeat;
		padding-bottom: 15px;
		padding-left: 20px;
		margin-top: 30px;

	}
	.services-tagline1 {
		color: #8ccb49;
		font-size: 26px;
		font-weight: 300;
		background: url('img/bg-tagline-line.png') bottom center no-repeat;
		padding-bottom: 15px;
		padding-left: 20px;
		margin-top: 30px;

	}

.home-portfolio {
	padding-top: 0px;
}
	#port-cats {
		width: 960px;
		margin: 0 auto 40px auto;
		text-align: center;
		position: relative;
	}

		#port-cats:before {
			position: absolute;
			content: "";
			bottom: -280px;
			left: -168px;
			width: 327px;
			height: 270px;
			background: url('img/sprite-home.png') 0 -2590px;
		}

		#port-cats:after {
			position: absolute;
			content: "";
			bottom: -280px;
			right: -160px;
			width: 327px;
			height: 270px;
			background: url('img/sprite-home.png') -330px -2590px;
		}

		.cats-instruction {
			position: absolute;
			width: 223px;
			height: 203px;
			background: url('img/sprite-home.png') 0 -2310px;
			top: -138px;
			right: -150px;
		}

	#port-items {
		width: 1194px;
		position: relative;
		padding: 0 48px 30px 48px;
		margin-left: -48px;
	}

		#port-items:before {
			position: absolute;
			content: "";
			bottom: 0;
			left: 0;
			width: 327px;
			height: 270px;
			background: url('img/sprite-home.png') 0 -2870px;
		}

		#port-items:after {
			position: absolute;
			content: "";
			bottom: 0;
			right: 0;
			width: 327px;
			height: 270px;
			background: url('img/sprite-home.png') -330px -2870px;
		}

		.active#cat-everything-link:before {
			background-position: -340px -50px;
		}

		#cat-websites-link:before {
			background-position: -370px 0;
		}

			.active#cat-websites-link:before {
				background-position: -370px -50px;
			}

		#cat-graphics-link:before {
			background-position: -400px 0;
		}

			.active#cat-graphics-link:before {
				background-position: -400px -50px;
			}

		#cat-products-link:before {
			background-position: -430px 0;
		}

			.active#cat-products-link:before {
				background-position: -430px -50px;
			}

		#cat-marketing-link:before {
			background-position: -460px 0;
		}

			.active#cat-marketing-link:before {
				background-position: -460px -50px;
			}

	.item {
		/*border: 4px solid #fff;
		box-shadow: 1px 1px #dcdcdc,
		            -1px -1px #dcdcdc;*/
		width: 360px;
		height: 275px;
		margin: 15px;
		position: relative;
		overflow: hidden;
	}

	.attachment-port-thumb {
		position: relative;
	}

	.item-desc {
		width: 360px;
		height: 60px;
		background: #383838 url('img/bg-desc-text.png') center -5px;
		position: absolute;
		right: 0;
		bottom: -60px;
		z-index: 0;
		color: #fff;
		text-transform: uppercase;
		font-size: 20px;
		font-size: 1.25rem;
		transition: bottom 0.5s ease-in-out;
	}

		.item:hover .item-desc {
			bottom: 0;
			transition: bottom 0.5s ease-in-out;
		}

		.item-title {
			width: 320px;
			padding: 10px 20px 0 20px;
			font-weight: normal;
			text-align: left;
		}

			.item-title:after {
				position: absolute;
				content: "";
				width: 21px;
				height: 21px;
				background: url('img/sprite.png') -260px -40px;
				bottom: 20px;
				right: 20px;
			}

		.item-tags {
			font-size: 12px;
			font-size: 0.75rem;
			text-transform: none;
			padding: 0 20px;
			font-weight: normal;
		}

	.new:after {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 65px;
		height: 66px;
		background: url('img/sprite-home.png') -490px 0;
		z-index: 100;
	}

.item-logo-modal {
	position: fixed;
	top: -1000px;
	width: 100%;
	z-index: 800;
	opacity: 0;
	display: none;
	transition: top 1s ease-in-out,
	            opacity 0s linear 1s;
}

	.item-logo-modal.active {
		top: 90px;
		opacity: 1;
		transition: top 1s ease-in-out;
	}

	.logo-modal-container {
		padding: 0 10px;
	}

		.attachment-logo-modal {
			width: 100%;
			height: auto;
		}


/*------------
/* ABOUT
/*------------*/

.about-img {
	background: url('img/img-about.jpg') scroll center center no-repeat;
	background-size: cover;
	position: relative;
	background-color: #fff;
}

	.no-touch .about-img {
		background-size: 1600px 1067px;
		background-attachment: fixed;
	}

	.about-tagline {
		position: absolute;
		text-indent: -9999%;
		width: 383px;
		height: 136px;
		background: url('img/sprite-about.png') -260px 0;
		left: 50%;
		margin-left: -191px;
		top: -200px;
		opacity: 0;
		transition: top 1.5s ease-in-out,
					opacity 2s ease-in-out;
	}

	.about-tagline.active {
		top: 40%;
		opacity: 1;
		transition: top 1.5s ease-in-out,
					opacity 2s ease-in-out;
	}

.arrow-down{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:4s;-moz-animation-duration:4s;-ms-animation-duration:4s;-o-animation-duration:4s;animation-duration:4s;}.animated.hinge{-webkit-animation-duration:8s;-moz-animation-duration:8s;-ms-animation-duration:8s;-o-animation-duration:8s;animation-duration:8s;}@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

	.arrow-down {
		position: absolute;
		bottom: 50px;
		left: 50%;
		margin-left: -21px;
		width: 42px;
		height: 74px;
		background: url('img/sprite-about.png') -170px 0;
		cursor: pointer;
		opacity: 0.5;
		transition: opacity 0.25s ease-in-out;
		-webkit-animation-name: bounce;
		-moz-animation-name: bounce;
		-o-animation-name: bounce;
		animation-name: bounce;
	}

		.arrow-down:hover {
			opacity: 1;
			transition: opacity 0.25s ease-in-out;
		}

.about-us,
.about-process {
	padding: 30px 0 60px 0;
}

	.team {
		text-align: center;
		position: relative;
	}

		.team:before {
			position: absolute;
			content: "";
			width: 167px;
			height: 205px;
			background: url('img/sprite-about.png') -650px 0;
			left: -50px;
			top: -50px;
		}

		.bio-modal {
			position: fixed;
			top: -1000px;
			left: 50%;
			margin-left: -417px;
			background: url('img/sprite-about.png') 0 -2210px;
			width: 832px;
			height: 532px;
			z-index: 800;
			opacity: 0;
			display: none;
			transition: top 1s ease-in-out,
			            opacity 0s linear 1s;;
		}

			.bio-modal:before {
				position: absolute;
				content: "";
				width: 38px;
				height: 100px;
				background: url('img/sprite-about.png') -220px 0;
				left: 75px;
				top: -2px;
			}

			.bio-modal .close {
				position: absolute;
				content: "";
				width: 20px;
				height: 20px;
				background: url('img/sprite-about.png') -120px 0;
				right: 8px;
				top: 22px;
				cursor: pointer;
			}

				.bio-modal .close:hover {
					background-position: -120px -40px;
				}

				.bio-modal a:hover {
					text-decoration: none;
					color: #656565;
				}

			.bio-modal.active {
				top: 90px;
				opacity: 1;
				transition: top 1s ease-in-out;
			}

			.bio-left {
				width: 345px;
				height: 450px;
				padding: 54px 17px 25px 46px;
				float: left;
				text-align: left;
				color: #515151;
			}

				.attachment-modal-img {
					float: left;
					margin: -15px 0 0 -35px;
				}

				.bio-name {
					font-family: '΢ÈíÑźÚ';
					font-size: 28px;
					font-size: 1.75rem;

				}

				.bio-meta {
					font-family: '΢ÈíÑźÚ', serif;
					font-size: 14px;
					font-size: 0.875rem;
					text-transform: uppercase;
					line-height: 1.5;
				}

					.bio-social {
						text-align: center;
					}

						.bio-social-icon {
							display: inline-block;
							width: 35px;
							height: 35px;
							background: url('img/sprite-about.png') 0 0;
							margin: 10px 5px;
						}

							.bio-social-icon:hover {
								background-position: 0 -40px;
							}

						.bio-skype {
							background-position: -40px 0;
						}

							.bio-skype:hover {
								background-position: -40px -40px;
							}

						.bio-pinterest {
							background-position: -80px 0;
						}

							.bio-pinterest:hover {
								background-position: -80px -40px;
							}

				.bio-content {
					padding-top: 15px;
					font-family: '΢ÈíÑźÚ', serif;
					font-size: 14px;
					font-size: 0.875rem;
				}

					.bio-content p {
						line-height: 1.4;
					}

			.bio-right {
				float: right;
				padding: 63px 57px 47px 30px;
				width: 337px;
				height: 420px;
			}

		.person-wrapper {
			width: 242px;
			height: 242px;
			padding: 29px;
			display: inline-block;
			background: url('img/sprite-about.png') 0 -1590px;
			margin: 0 -3px;
		}

			.tom-anderson {
				background-position: -310px -1590px;
			}

			.nathan-riley {
				background-position: 0 -1900px;
			}

			.rollo-lewis {
				background-position: -310px -1900px;
			}

			.person {
				width: 242px;
				height: 242px;
				border-radius: 130px;
				cursor: pointer;
				transition: all 0.4s ease-in-out;
			}

				.person:hover {
					box-shadow: inset 0 0 0 130px rgba(0,0,0,0.49);
					transition: all 0.4s ease-in-out;
				}

				.person-meta {
					padding-top: 105px;
					text-align: center;
					transition: all 0.4s ease-in-out;
					transform: scale(0);
				}

					.person:hover .person-meta {
						transform: scale(1);
						transition: all 0.4s ease-in-out;
					}

					.person-name {
						font-family: '΢ÈíÑźÚ';
						font-size: 28px;
						font-size: 1.75rem;
						color: #fff;
						line-height: 1;
						zoom: 1;
					}

					.bio-view-link {
						text-decoration: none;
						text-transform: uppercase;
						font-weight: 600;
						color: #f28135;
						letter-spacing: 1px;
						padding-right: 10px;
						position: relative;
						display: inline;
					}

						.bio-view-link:after {
							position: absolute;
							content: "";
							width: 5px;
							height: 10px;
							background: url('img/sprite.png') -260px -90px;
							top: 4px;
							right: 0;
						}

	.about-text {
		font-size: 18px;
		font-size: 1.125rem;
		color: #5e5e5e;
		padding-right: 550px;
		padding-left: 20px;
		margin-top: 60px;
		position: relative;
	}

		.jukebox-placeholder {
			float: right;
			width: 139px;
			height: 130px;
		}

		.jukebox {
			position: absolute;
			width: 678px;
			height: 391px;
			background: url('img/sprite-about.png') 0 -210px;
			top: -25px;
			right: 0px;
		}

			.jukebox-info-wrapper {
				position: absolute;
				z-index: 10;
				top: -10px;
				right: 485px;
				width: 170px;
				height: 100px;
				display: table;
			}

				.jukebox-info {
					display: table-cell;
					vertical-align: middle;
					font-size: 18px;
					font-size: 1.125rem;
					line-height: 1.25;
				}

					.jukebox-info a {
						color: #5e5e5e;
						text-decoration: none;
					}

.about-img-2 {
	background: url('img/img-about-2.jpg') scroll top center no-repeat;
	background-size: cover;
	height: 419px;
}

.no-touch .about-img-2 {
	background-attachment: fixed;
	background-size: 1600px 1200px;
}

.about-process {
	position:relative;
}

	.stamp-wrapper {
		position:relative;
	}

		.stamp {
			position: fixed;
			content: "";
			width: 265px;
			height: 302px;
			background: url('img/sprite-about.png') -510px -610px;
			top: 0;
			right: -500px;
			margin-top: 0;
			transition: all 1s ease-in-out;
		}

			.stamp.active {
				top: 600px;
				right: 0;
				transition: all 1s ease-in-out;
			}

	.stage {
		padding-left: 280px;
		padding-right: 20px;
		margin-bottom: 30px;
		text-align: justify;
		position: relative;
		min-height: 243px;
	}

		.stage-quote {
			font-weight: 600;
			font-size: 23px;
			font-size: 1.4375rem;
			color: #f28135;
			line-height: 1;
			padding-top: 30px;
		}

		.stage:before {
			position: absolute;
			content: "";
			width: 243px;
			height: 243px;
			background: url('img/sprite-about.png') 0 -610px;
			top: 50%;
			margin-top: -121px;
			left: 0;
		}

			.stage-2:before {
				background-position: 0 -860px;
				width: 245px;
				height: 245px;
			}

			.stage-3:before {
				background-position: 0 -1110px;
				width: 235px;
				height: 235px;
			}

			.stage-4:before {
				background-position: 0 -1350px;
				width: 235px;
				height: 235px;
			}

		.stage:after {
			position: absolute;
			content: "";
			width: 243px;
			height: 243px;
			background: url('img/sprite-about.png') -260px -610px;
			top: 50%;
			margin-top: -121px;
			left: 0;
		}

			.stage-2:after {
				background-position: -260px -860px;
				width: 245px;
				height: 245px;
			}

			.stage-3:after {
				background-position: -260px -1110px;
				width: 235px;
				height: 235px;
			}

			.stage-4:after {
				background-position: -260px -1350px;
				width: 235px;
				height: 235px;
			}

		.stage:hover:before {
			animation: anticlockwise 0.75s ease-in-out;
		}

		.stage:hover:after {
			animation: clockwise 0.75s ease-in-out;
		}

	.even {
		padding-left: 20px;
		padding-right: 280px;
	}

		.even.stage:before,
		.even.stage:after {
			right: 0;
			left: auto;
		}


/*------------
/* BLOG
/*------------*/

.blog-content {
	padding-top: 93px;
}

	.blog-chameleon img {
		width:100%;
		margin-bottom: 30px;
		opacity: 0;
	}

	.blog-chameleon img.active {
		opacity: 1;
		transition: opacity 0.75s ease-in-out 2s;
	}

	.posts {
		width: 74%;
		float: left;
	}

		.post {
			background: url('img/bg-paper-blog.png');
			padding: 23px;
			padding-top: 0;
			margin-bottom: 30px;
			border-top: 1px solid #dadada;
			box-shadow: 0 2px 3px #B3B3B4;
		}

			.post-rings {
				height: 21px;
				width: 100%;
				background: url('img/bg-paper-ring.png') top center;
				position: relative;
				top: -2px;
				margin-bottom: 15px;
			}

			.post-date {
				width: 60px;
				height: 62px;
				padding-right: 2px;
				text-align: center;
				background: url('img/sprite-blog.png') -150px 0;
				color: #fff;
				text-transform: uppercase;
				font-weight: bold;
				line-height: 0.8;
				display: inline-block;
				vertical-align: middle;
			}

				.post-day {
					font-size: 20px;
					font-size: 1.25rem;
					padding-top: 15px;
				}

			.post-meta-top {
				display: inline-block;
				vertical-align: middle;
				margin-left: 15px;
				text-transform: uppercase;
			}

				.post-title {
					text-transform: uppercase;
					font-weight: bold;
					color: #5b5b5b;
					font-size: 27px;
					font-size: 1.6875rem;
				}


					a.post-title:hover {
						text-decoration: none;
						color: #76c044;
					}

				.post-info-top {
					color: #7d7d7d;
					font-size: 14px;
					font-size: 0.875rem;
				}

					.post-info-top a {
						color: #7d7d7d;
						font-weight: bold;
					}

						.post-info-top a:hover {
							text-decoration: none;
							color: #76c044;
						}

				.attachment-blog-img {
					width: 100%;
					height: auto;
					margin: 20px 0 0 0;
				}

				.post-content {
					font-size: 14px;
					font-size: 0.875rem;
					color: #595959;
					background: url('img/bg-line-dark.png') bottom center repeat-x;
					padding-bottom: 1px;
				}

					.post-read-more {
						text-transform: uppercase;
						padding-left: 16px;
						position: relative;
						line-height: 12px;
						transition: none;
					}

						.post-read-more:before {
							position: absolute;
							content: "";
							width: 13px;
							height: 12px;
							background: url('img/sprite-blog.png') -250px 0;
							left: 0;
							top: 2px;
						}

						.post-read-more:hover {
							color: #589032;
							transition: none;
							text-decoration: none;
						}

							.post-read-more:hover:before {
								background-position: -250px -20px;
							}

				.post-meta-bottom {
					margin-bottom: -10px;
					padding-top: 10px;
				}

					.post-comment-count{
						width: 45%;
						float: left;
						line-height: 25px;
						text-transform: uppercase;
						font-size: 14px;
						font-size: 0.875rem;
						position: relative;
						padding-left: 25px;
					}

						.post-comment-count a {
							color: #7d7d7d;
						}

							.post-comment-count a:hover {
								text-decoration: none;
							}

						.post-comment-count:before {
							position: absolute;
							content: "";
							width: 19px;
							height: 14px;
							background: url('img/sprite-blog.png') -220px 0;
							left: 0;
							top: 6px;
						}

					.post-social {
						width: 50%;
						float: right;
						text-align: right;
					}

		#comments {

		}

			.comment {
				position:relative;
				min-height: 80px;
				margin-bottom: 20px;
			}

				.avatar {
					position: absolute;
					height: 80px;
					width: 80px;
				}

					.avatar img {
						position: relative;
						border-radius: 80px;
						z-index: 100;
					}

					.avatar:before {
						position: absolute;
						content: "";
						width: 100%;
						height: 100%;
						box-shadow: 0 1px #fff,
									inset 0 2px 4px rgba(0,0,0,0.28);
						border-radius: 80px;
						z-index: 200;
					}

				.comment-body {
					margin-left: 100px;
					background: url('img/bg-paper-blog.png');
					box-shadow: 0 2px 3px #B3B3B4;
					padding: 20px 20px 1px 20px;
					border-radius: 5px;
					position: relative;
					border-top: 1px solid #dadada;
					font-size: 14px;
					font-size: 0.875rem;
					color: #595959;
				}

					.comment-body:before {
						position: absolute;
						content: "";
						width: 15px;
						height: 33px;
						background: url('img/sprite-blog.png') -270px 0;
						left: -15px;
						top: 23px;
					}

					.comment-author {
						text-transform: uppercase;
						font-weight: bold;
						font-size: 18px;
						font-size: 1.125rem;
						color: #7d7d7d;
					}

						a.comment-author:hover {
							text-decoration: none;
							color: #76c044;
						}

					.comment-date {
						color: #b3b3b3;
						display: inline-block;
						margin-left: 5px;
					}

			#reply-title {
				font-family: '΢ÈíÑźÚ', serif;
				font-size: 35px;
				font-size: 2.1875rem;
				color: #9d9d9d;
				text-shadow: 0 -1px rgba(0,0,0,0.6),
							 0 1px #fff;
				position: relative;
				margin-bottom: 10px;
				font-weight: normal;
				text-transform: none;
				background: transparent;
				height: auto;
				line-height: 1;
				border: 0;
				box-shadow: none;
				padding: 35px 0 20px 0;
				letter-spacing: 0;
				display: block;
			}

				#reply-title:before,
				#reply-title:after {
					position: relative;
				}

			#commentform {
				position: relative;
			}

				#commentform input[type="text"],
				#commentform input[type="email"],
				#commentform textarea {
					background: transparent;
					border-color: #c6c6c6;
					font-weight: bold;
					text-transform: uppercase;
					font-size: 13px;
					font-size: 0.8125rem;
					padding: 17px 20px;
				}

				#commentform textarea {
					text-transform: none;
				}

				.comment-left {
					padding-right: 505px;
					min-height: 190px;
				}

				.comment-right {
					width: 450px;
					right: 40px;
					height: 147px;
					top: 0;
					position: absolute;
				}

				.comment-frm-instructions {
					font-size: 14px;
					font-size: 0.875rem;
					color: #9d9d9d;
					font-style: italic;
					text-align: right;
				}

				#submit {
					margin: 0 auto 30px auto;
				}

		.pagination {
			text-align: center;
			margin-bottom: 20px;
		}

			.page-numbers {
				width: 25px;
				height: 25px;
				display: inline-block;
				line-height: 25px;
				color: #808080;
				font-size: 18px;
				font-size: 1.125rem;
				font-weight: 600;
				text-shadow: 0 1px rgba(255,255,255,1);
				box-shadow: 0 2px rgba(0,0,0,0.25),
							inset 0 1px rgba(255,255,255,1);
				background: #EDEDED url('img/bg-button-texture.png');
				background: url('img/bg-button-texture.png'),
							linear-gradient(top, #EDEDED 0%,#d5d5d5 100%);
				background: url('img/bg-button-texture.png'),
							linear-gradient(to bottom, #EDEDED 0%,#d5d5d5 100%);
				border: 1px solid #ccc;
				border-radius: 3px;
				vertical-align: top;
			}

				.page-numbers:hover {
					text-decoration: none;
					background: #f7f7f7 url('img/bg-button-texture.png');
					background: url('img/bg-button-texture.png'),
								linear-gradient(top, #F7F7F7 0%,#DCDCDC 100%);
					background: url('img/bg-button-texture.png'),
								linear-gradient(to bottom, #F7F7F7 0%,#DCDCDC 100%);
				}

				.page-numbers:active {
					background: #ededed url('img/bg-button-texture.png');
					background: url('img/bg-button-texture.png'),
								linear-gradient(top, #EDEDED 0%,#D4D4D4 100%);
					background: url('img/bg-button-texture.png'),
								linear-gradient(to bottom, #EDEDED 0%,#D4D4D4 100%);
					box-shadow: inset 0 1px 2px rgba(0,0,0,0.35),
								0 1px rgba(255,255,255,1);
					border-color: #bbb;
					height: 27px;
					line-height: 27px;
				}

				.page-numbers.current {
					background: #75BE42 url('img/bg-button-texture-green.png');
					background: url('img/bg-button-texture-green.png'),
					            linear-gradient(top, #75BE42 0%,#55A121 100%);
					background: url('img/bg-button-texture-green.png'),
								linear-gradient(to bottom, #75BE42 0%,#55A121 100%);
					color: #fff;
					border-color: #5D9934;
					box-shadow: 0 2px rgba(0,0,0,0.55),
							inset 0 1px rgba(255,255,255,0.36);
					text-shadow: 0 -1px #4D8329;
				}

			.next,
			.prev {
				font-family: 'Thirsty Rough';
				position: relative;
				color: #9d9d9d;
				font-size: 23px;
				font-size: 1.4375rem;
				font-weight: normal;
				width: auto;
				border: 0;
				text-shadow: none;
				background: transparent;
				box-shadow: none;
				line-height: 27px;
				height: 27px;
				padding-top: 4px;
				transition: none;
			}

				.next:hover,
				.prev:hover {
					background: transparent;
					text-decoration: none;
					color: #5b5b5b;
					box-shadow: none;
					transition: none;
				}

				.prev:active,
				.next.active {
					background: transparent;
					box-shadow: none;
					line-height: 27px;
					height: 27px;
				}

			.next {
				padding-right: 35px;
				margin-left: 20px;
			}

			.prev {
				padding-left: 35px;
				margin-right: 20px;
			}

				.next:after {
					position: absolute;
					content: "";
					width: 29px;
					height: 15px;
					background: url('img/sprite-blog.png') -30px 0;
					right: 0;
					top: 5px;
				}

					.next:hover:after {
						background-position: -70px 0;
					}

				.prev:before {
					position: absolute;
					content: "";
					width: 29px;
					height: 15px;
					background: url('img/sprite-blog.png') -30px -20px;
					left: 0;
					top: 5px;
				}

					.prev:hover:after {
						background-position: -70px -20px;
					}

	.sidebar {
		width: 23%;
		float: right;
	}

		.sidebar-heading {
			font-family: '΢ÈíÑźÚ', serif;
			font-size: 35px;
			font-size: 2.1875rem;
			color: #9d9d9d;
			text-shadow: 0 -1px rgba(0,0,0,0.6),
						 0 1px #fff;
			position: relative;
			margin-bottom: 10px;
			z-index: 200;
		}

		.sidebar-heading-categories:after {
			position: absolute;
			content: "";
			width: 20px;
			height: 43px;
			background: url('img/sprite-blog.png');
			top: 30px;
			margin-left: 5px;
		}

		#newsletter-form {
			position: relative;
			z-index: 100;
			width: 210px;
			margin-top: -10px;
		}

		#newsletter-form:before {
			position: absolute;
			content: "";
			width: 112px;
			height: 67px;
			background: url('img/bg-newsletter.png');
			z-index: 100;
			right: -33px;
			top: -50px;
		}

		.sidebar-section {
			margin-bottom: 75px;
		}

			.sidebar-categories a {
				text-transform: uppercase;
				font-weight: normal;
				color: #9d9d9d;
			}

				.sidebar-categories a:hover {
					text-decoration: none;
					color: #76c044;
				}

			.newsletter-name,
			.newsletter-email {
				background: url('img/bg-light-grid.png');
				border-color: #c6c6c6;
				font-weight: bold;
				text-transform: uppercase;
				font-size: 13px;
				font-size: 0.8125rem;
				padding: 17px 20px;
				position: relative;
				z-index: 200;
			}

			.blog-author {
				margin-bottom: 15px;
			}

			.author-img-wrapper {
				display: inline-block;
				position: relative;
				vertical-align: middle;
			}

				.author-img {
					width: 75px;
					height: auto;
					vertical-align: middle;
					position: relative;
					z-index: 100;
				}

				.author-img-wrapper:before {
					position: absolute;
					content: "";
					width: 100%;
					height: 100%;
					box-shadow: 0 1px #fff,
								inset 0 2px 4px rgba(0,0,0,0.28);
					border-radius: 75px;
					z-index: 200;
			}

			.author-meta {
				display: inline-block;
				vertical-align: middle;
				margin-left: 10px;
				color: #9d9d9d;
			}

				.author-meta a {
					font-size: 17px;
					font-size: 1.0625rem;
					color: #5b5b5b;
					text-transform: uppercase;
				}

					.blog-author:hover .author-meta a {
						color: #76c044;
						text-decoration: none;
					}


/*------------
/* CONTACT
/*------------*/

#contact-wrapper {
	position: fixed;
	width: 999px;
	height: 736px;
	top: -1000px;
	left: 50%;
	margin-left: -499px;
	background: url('img/bg-contact.png');
	z-index: 800;
	opacity: 0;
	display: none;
	transition: top 1s ease-in-out,
	            opacity 0s linear 1s;
}

	#contact-wrapper.active {
		top: 90px;
		opacity: 1;
		transition: top 1s ease-in-out;
	}

	#contact-form {
		padding: 90px 100px 0 100px;
		position: relative;
	}

	.contact-close {
		position: absolute;
		right: 55px;
		top: 60px;
		width: 20px;
		height: 20px;
		background: url('img/sprite-contact.png') -40px -210px;
		cursor: pointer;
	}

		.contact-success {
			margin-top: 100px;
			text-align: center;
			font-size: 50px;
			font-size: 3.125rem;
			font-family: '΢ÈíÑźÚ';
		}

		.contact-info {
			text-align: right;
			color: #676767;
			font-size: 19px;
			font-size: 1.1875rem;
			margin-bottom: 30px;
		}

		.contact-left {
			display: table-cell;
			width: 220px;
			padding-right: 15px;
			vertical-align:middle;
		}

		.contact-right {
			display: table-cell;
			width: 525px;
		}

			.contact-checkbox {
				margin: 25px 0;
				text-align: center;
			}

				.label-checkbox {
					line-height: 22px;
					vertical-align: middle;
					color: #676767;
				}

				.icheckbox {
					width: 22px;
					height: 22px;
					background: url('img/sprite.png') -210px -200px;
					display: inline-block;
					vertical-align: middle;
				}

					.icheckbox:hover {
						background-position: -210px -240px;
					}

				.icheckbox.checked {
					background-position: -210px -120px;
				}

					.icheckbox.checked:hover {
						background-position: -210px -160px;
					}


				#contact-wrapper input[type="submit"] {
					margin: 75px auto 0 auto;
				}

.contact-top {
	padding-top: 100px;
}

.contact-top1 {
	padding-top: 20px;
}

#map_canvas {
    padding-left:50px;
	padding-right:200px;
	padding-top:40px;
	width: 100%;
	height:520px;
}
#map_canvasleft {

	width:55%;
    float:left;
}
#map_canvasright {
    width:45%;
    float:right;
	height:auto;
}

#map_canvasleft1 {

	width:45%;
    float:left;
	height:auto;
}
#map_canvasright1 {
    width:55%;
    float:right;
	height:auto;
}


.map-details {
	padding: 0 25px 20px 43px;
	margin-top: -10px;
}

	.map-details p {
		margin: 0.4em 0;
	}

	.map-icon {
		padding-left: 35px;
		position: relative;
		line-height: 30px;
		font-size: 18px;
		font-size: 1.125rem;
	}

		.map-icon:before {
			position: absolute;
			content: "";
			width: 30px;
			height: 30px;
			background: url('img/sprite-contact.png') 0 0;
			left: 0;
		}

		.map-phone:before {
			background-position: 0 -40px;
		}

		.map-address:before {
			background-position: 0 -80px;
		}

		.map-address {
			line-height: 1.25;
		}

	.map-details .button-green {
		font-size: 15px;
		font-size: 0.9375rem;
		margin: 5px auto 0 45px;
		padding: 8px 15px;
		transition: background-color 0.25s ease-in-out;
	}

		.map-details .button-green:hover {
			text-decoration: none;
			transition: background-color 0.25s ease-in-out;
		}

.contact-bottom {
	padding-top: 10px;
}

	#request-form {
		width: 900px;
		margin: 0 auto;
	}

		.request-heading {
			text-transform: uppercase;
			color: #5b5b5b;
			font-weight: bold;
			font-size: 17px;
			font-size: 1.0625rem;
			padding-left: 42px;
			position: relative;
			counter-increment: section;
			line-height: 35px;
			margin-bottom: 20px;
		}

			.request-heading:before {
				position: absolute;
				content: counter(section);
				width: 33px;
				height: 33px;
				background: url('img/sprite-contact.png') 0 -120px;
				left: 0;
				color: #fff;
				text-align: center;
				line-height: 33px;
				font-size: 16px;
				font-size: 1rem;
			}

		.request-section {
			margin-bottom: 30px;
			position:relative;
		}

			.request-section-1:after {
				position: absolute;
				content: "";
				width: 274px;
				height: 107px;
				background: url('img/sprite-contact.png') -40px 0;
				top: 0;
				right: 0;
			}

			.request-left {
				width: 270px;
				margin-right: 30px;
				float: left;
			}

			.request-right {
				width: 270px;
				float: left;
			}

			.request-section input {
				text-transform: uppercase;
				font-weight: bold;
				font-size: 13px;
				font-size: 0.8125rem;
				background-color: rgba(255,255,255,0.5);
				margin-bottom: 30px;
				padding: 17px 20px;
				transition: all 0.25s ease-in-out;
			}

			.request-section input.required {
				background: rgba(255,255,255,0.5) url('img/bg-required.png') 240px center no-repeat;
			}

			.request-section input:focus {
				background-color: #fff;
				transition: all 0.25s ease-in-out;
			}

			.request-services-heading {
				color: #8e8e8e;
				font-size: 17px;
				font-size: 1.0625rem;
				padding-right: 20px;
				display: inline-block;
				background: url('img/bg-required.png') right center no-repeat;
				line-height: 14px;
				margin-bottom: 10px;
			}

			.request-services-section {
				float: left;
				width: 225px;
			}

				.request-services-section .icheckbox {
					margin-bottom: 15px;
					vertical-align: top;
				}

				.request-services-section .icheckbox.checked + label {
					color: #76c044;
				}

				.request-services-section label {
					font-size: 18px;
					font-size: 1.125rem;
					line-height: 25px;
					vertical-align: top;
					color: #8e8e8e;
					margin-bottom: 10px;
				}

				.top-service {
					font-weight: 600;
					font-size: 20px;
					font-size: 1.25rem;
					margin-bottom: 10px;
				}

				.request-services-subsection {
					padding-left: 20px;
					display: none;
				}

					.request-services-subsection .icheckbox {
						margin-bottom: 10px;
					}

			.request-project-info {
				position: relative;
			}

				.request-project-info:after {
					position: absolute;
					content: "";
					width: 293px;
					height: 124px;
					background: url('img/sprite-contact.png') -320px 0;
					top: 30px;
					right: 0;
				}

			.request-section textarea {
				font-size: 15px;
				font-size: 0.9375rem;
				width: 530px;
				height: 195px;
				font-weight: 600;
				line-height: 1.5;
				margin-top: 10px;
				background: rgba(255,255,255,0.5) url('img/bg-required.png') 550px 15px no-repeat;
				transition: all 0.25s ease-in-out;
			}

				.request-section textarea:focus {
					background-color: #fff;
					transition: all 0.25s ease-in-out;
				}

				#request-referral {
					opacity: 0;
					transition: opacity 0.5s ease-in-out;
				}

					#request-referral.active {
						opacity: 1;
						transition: opacity 0.5s ease-in-out;
					}

			.request-section-3 {
				position: relative;
			}

				.request-section-3:after {
					position: absolute;
					content: "";
					width: 281px;
					height: 84px;
					background: url('img/sprite-contact.png') -40px -120px;
					right: -310px;
					top: -20px;
					opacity: 0;
					transition: opacity 0.5s ease-in-out;
				}

					.active.request-section-3:after {
						opacity: 1;
						transition: opacity 0.5s ease-in-out
					}

.SI-FILES-STYLIZED label.cabinet {
	position: absolute;
	width: 122px;
	height: 39px;
	right: 2px;
	top: 3px;
	line-height: 39px;
	border: 1px solid #cdcdcd;
	border-radius: 4px;
	box-shadow: inset 0 1px #fff,
	            0 2px 1px rgba(0,0,0,0.25),
	            0 0 15px rgba(0,0,0,0.05);
	background: #dcdcdc url('img/bg-button-texture.png');
	background: url('img/bg-button-texture.png'),
				linear-gradient(bottom, #dcdcdc 0%,#eee 100%);
	background: url('img/bg-button-texture.png'),
				linear-gradient(to top, #dcdcdc 0%,#eee 100%);
	font-size: 13px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #7C7D7D;
	text-transform: uppercase;
	transition: background-color 0.25s ease-in-out;
}

	.SI-FILES-STYLIZED label.cabinet:active {
		box-shadow: 0 1px #fff,
	            inset 0 2px 1px rgba(0,0,0,0.25),
	            0 0 15px rgba(0,0,0,0.05);
	    height: 40px;
	    line-height: 40px;
	    background: #dcdcdc url('img/bg-button-texture.png');
	    background: url('img/bg-button-texture.png'),
					linear-gradient(top, #dcdcdc 0%,#eee 100%);
		background: url('img/bg-button-texture.png'),
					linear-gradient(to bottom, #dcdcdc 0%,#eee 100%);
		transition: background-color 0.25s ease-in-out;
	}

	.upload-label:after {
		position: absolute;
		top: 0;
		left: 0;
		content: 'Choose File';
		height: 48px;
		width: 122px;
		text-align: center;
		pointer-events: none;
	}

.SI-FILES-STYLIZED label.cabinet input.file
{
	cursor: pointer;
	position: relative;
	width: auto;
	opacity: 0;;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	margin:0;
	padding: 0;
	border:0;
}

.file-upload {
	width: 572px;
	margin-top: 30px;
	margin-bottom: 30px;
	outline: 0;
	box-sizing: border-box;
	color: #737373;
	background: rgba(255,255,255,0.5);
	font-weight: 600;
	border-radius: 4px;
	border: 1px solid #d9d9d9;
	box-shadow: inset 1px 2px 6px #ddd,
				0 1px #fff;
	height: 48px;
	overflow: hidden;
	position: relative;
}

#upload-label {
	display: inline-block;
	line-height: 48px;
	vertical-align: top;
	text-transform: uppercase;
	color: #b6b6b6;
	font-size: 13px;
	font-size: 0.8125rem;
	padding-left: 20px;
}

#upload-button {
	width: 100%;
	margin: 20px 0;
}

	#upload-button .green-button {
		text-transform: none;
		letter-spacing: 0;
	}

/*------------
/* CASE STUDIES
/*------------*/

.case-heading {
	text-transform: uppercase;
	font-weight: bold;
	color: #76c044;
	font-size: 26px;
	font-size: 1.625rem;
}

.left-column {
	width: 48%;
	float: left;
}

.right-column {
	width: 50%;
	float: right;
	margin-bottom: -6.2%;
}

.img-zoom {
	position: relative;
}

	.zoom-img {
		position: absolute;
		left: -22.5%;
		bottom: 10%;
		width: 45%;
	}

.screenshot-wrapper {
	background: #fff;
	padding: 3px;
	box-shadow: 0 0 11px rgba(0,0,0,0.2);
	margin-bottom: 6.5%;
}

	.screenshot-wrapper img {
		width: 100%;
		height: auto;
		display: block;
	}

.screenshot-full {
	margin: 3.25% 0;
}

.screenshot-small {
	width: 46%;
	float: left;
}

.screenshot-small.last {
	float: right;
}

.portfolio-content {
	color: #5b5b5b;
	margin-bottom: -20px;
}

	.portfolio-content ul,
	.rollo-bottom ul,
	.blogticks {
		margin: 20px 0 0 0;
		padding: 0;
	}

	.portfolio-content li,
	.rollo-bottom li,
	.blogticks li {
		list-style-type: none;
		padding-left: 32px;
		position: relative;
		margin-bottom: 10px;
		color: #8b8b8b;
		line-height: 23px;
	}

		.portfolio-content li:before,
		.rollo-bottom li:before,
		.blogticks li:before {
			position: absolute;
			content: "";
			width: 22px;
			height: 22px;
			background: url('img/sprite.png') -210px -120px;
			left: 0;
		}
		
		.blogticks li {
			font-size: 16px;
		}

.testimonial {
	line-height: 1.5;
	padding: 35px 75px 0 95px;
	position: relative;
}

	.testimonial:before {
		position: absolute;
		content: "";
		width: 87px;
		height: 70px;
		background: url('img/sprite-portfolio.png') -160px 0;
		left: 0;
		top: 0;
	}

	.testimonial:after {
		position: absolute;
		content: "";
		width: 68px;
		height: 56px;
		background: url('img/sprite-portfolio.png') -260px 0;
		right: 0;
		bottom: 0;
	}

	.testimonial-instruction {
		position: absolute;
		width: 134px;
		height: 182px;
		background: url('img/sprite-portfolio.png');
		top: -130px;
		left: -150px;
	}

	.testimonial-attribution {
		text-align: right;
		margin-top: 20px;
		color: #76c044;
	}

	.secondary-title {
		font-family: '΢ÈíÑźÚ', serif;
		font-size: 60px;
		font-size: 3.75rem;
		text-align: center;
		text-shadow: 4px 4px 0 #cdcdcd;
		color: #656565;
	}

.mac-static {
	float: left;
	margin-top: 20px;
	margin-right: 30px;
}

.mac-slideshow {
	width: 563px;
	height: 438px;
	background: url('img/sprite-portfolio.png') 0 -280px;
	float: left;
	margin-right: 30px;
	position: relative;
	padding: 24px 0 0 29px;
	margin-top: 20px;
}

	.mac-slideshow ul {
		padding: 0;
		margin: 0;
	}

	.mac-slideshow li {
		padding: 0;
		z-index: 100;
		border-radius: 2px;
		display: none;
	}

		.mac-slideshow li:before {
			position: relative;
		}

		.mac-slideshow li img {
			border-radius: 1px;
		}

	.mac-slideshow:before {
		position: absolute;
		content: "";
		z-index: 200;
		width: 259px;
		height: 276px;
		background: url('img/sprite-portfolio.png') -370px 0;
		right: 0;
		top: 0;
	}

	.flex-control-nav {
		margin: 308px 23px 0 0;
		padding: 0;
		text-align: center;
	}

		.flex-control-nav li {
			display: inline-block;
		}

			.flex-control-nav li a {
				display: inline-block;
				text-indent: -9999px;
				width: 12px;
				height: 12px;
				background: url('img/sprite-portfolio.png') -350px 0;
				margin: 0 3px;
				cursor: pointer;
			}

			.flex-control-nav li a:hover {
				background-position: -350px -20px;
			}

			.flex-control-nav li a.flex-active {
				background-position: -330px 1px;
			}

.related-posts-wrapper {
	position: relative;
	margin-top: 90px;
}

	.related-prev,
	.related-next {
		position: absolute;
		width: 65px;
		height: 36px;
		background: url('img/sprite-portfolio.png') -160px -70px;
		text-indent: -9999px;
		top: 60%;
		cursor: pointer;
		left: -65px;
		transition: opacity 0.25s ease-in-out;
	}


		.related-prev:hover {
			background-position: -160px -110px;
		}

		.related-next:hover {
			background-position: -260px -110px;
		}

	.related-next {
		right: -65px;
		left: auto;
		background-position: -260px -70px;
	}

.related-posts {
	text-align: center;
}

.related-posts .item {
	display: inline-block;
}

.img-rollo {
	width: 100%;
	height: 629px;
	background: url('img/img-rollo.jpg') center center;
	background-size: cover;
	margin-top: 18px;
}

.rollo-bottom {
	margin-bottom: 0;
	padding-top: 60px;
}

.thirds {
	float: left;
	width: 28%;
	margin-right: 8%;
}

.thirds.last {
	margin-right: 0;
}

.rollo-polaroids {
	background: url('img/bg-rollo.png') center center no-repeat;
	min-height: 865px;
}

.polaroids {
	position: relative;
	width: 960px;
	margin: 0 auto;
}

.polaroid {
	width: 266px;
	height: 306px;
	position: absolute;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
}

/*------------
/* FOOTER
/*------------*/

#modal {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.67);
	position: fixed;
	z-index: 700;
	opacity: 0;
	top: 0;
	display: none;
}

.logo-carousel img {
	margin: 0 10px;
	vertical-align: middle;
}

.logo-carousel a {
	text-decoration: none;
}

.chameleon {
	position: absolute;
	right: -220px;
	bottom: -6px;
	width: 242px;
	height: 279px;
	background: url('img/sprite.png') 0 -450px;
}

.twitter-feed-wrapper {
	padding-left: 150px;
	height: 105px;
	background: url('img/sprite.png') 0 -195px no-repeat;
	font-family:'ÃÔÄã¼òººÕæ¹ã±ê';
}

	.twitter-feed {
		background: url('img/bg-paper.png');
		box-shadow: 4px 4px #ccc;
		border-radius: 25px;
		width: 80%;
		height: 50px;
		font-family:'ÃÔÄã¼òººÕæ¹ã±ê';
	}

	.twitter-carousel {
		width: 100%;
	}

		.slides {
			list-style-type: none;
			margin: 0;
		}

		.tweet-wrapper {
			background: url('img/bg-paper.png');
			border-radius: 30px;
		}

		.tweet {
			padding: 15px 10px;
			height: 49px;
			display: table-cell;
			vertical-align: middle;
			color: #8a8b8b;
		}

			.tweet a {
				font-weight: 600;
				color: #86cb32;
				text-decoration: none;
			}

#footer {
	background: #48BB87 bottom center repeat-x;
	padding-top: 5px;
}

	.footer-column {
		float: left;
		width: 25%;
		margin: 30px 0;
	}

	.footer-social,
	.footer-contact {
		margin-right: 12.5%;
	}

		.footer-icon {
			position: relative;
			display: block;
			padding-left: 53px;
			line-height: 38px;
			margin-bottom: 7px;
			color: #ffffff;
			text-decoration: none;
			font-size: 10px;
			font-size: 0.8875rem;
			transition: color 1s ease-in-out;
			font-weight: normal;
		}

			a.footer-icon:hover {
				color: #99FE00;
				text-decoration: none;
				transition: color 0s ease-in-out;
			}

			.icon-email {
				
			}

			.footer-icon:before {
				position: absolute;
				content: "";
				left: 0;
				border-radius: 20px;
				width: 38px;
				height: 38px;
				box-shadow: inset 0 1px rgba(0,0,0,0.55);
				background: #7ED0A0 url('img/sprite.png');
				transition: background-color 1s ease-in-out;
			}

				.footer-icon:hover:before {
					transition: all 0s linear;
				}

			.icon-fb:before {
				background-position: 0px -120px;
			}
			
			.icon-fb1:before {
				background-position: 0px -120px;
			}

				.icon-fb:hover:before {
					background-color: #73AE1F;
				}

			.icon-tw:before {
				background-position: -40px -120px;
			}
			.icon-tw1:before {
				background-position: -40px -120px;
			}

				.icon-tw:hover:before {
					background-color: #4BC0A3;
				}

			.icon-in:before {
				background-position: -80px -120px;
			}

				.icon-in:hover:before {
					background-color: #56D009;
				}

			.icon-dribble:before {
				background-position: -120px -120px;
			}

				.icon-dribble:hover:before {
					background-color: #EB182C;
				}

			.icon-skype:before {
				background-position: -160px -120px;
			}


				.icon-skype:hover:before {
					background-color: #1AC7E7;
				}

			.icon-plus:before {
				background-position: 0 -160px;
			}

				.icon-plus:hover:before {
					background-color: #11D01B;
				}

			.icon-pinterest:before {
				background-position: -40px -160px;
			}

				.icon-pinterest:hover:before {
					background-color: #FF3E00;
				}

			.icon-email:before {
				background-position: -80px -160px;
			}

			.icon-phone:before {
				background-position: -120px -160px;
			}

			.icon-address:before {
				background-position: -160px -160px;
			}

			

			.footer-blog-link {
				color: #c1c1c1;
				font-size: 15px;
				font-size: 1.1875rem;
			}

				.footer-blog-link:hover {
					color: #fff;
					text-decoration: none;
				}

			.footer-blog-author {
				color: #c1c1c1;
				font-size: 14px;
				font-size: 0.875rem;
			}

			.footer-img {
				position: relative;
				width: 310px;
				margin: 20px 0;
				display: block;
			}

				.footer-img img {
					border-radius: 5px;
					position: relative;
					z-index: 100;
					display: block;
				}

				.footer-img:before {
					position: absolute;
					content: "";
					width: 100%;
					height: 100%;
					border-radius: 5px;
					box-shadow: inset 0 1px rgba(0,0,0,0.75);
					z-index: 200;
				}

			.footer-blog-excerpt {
				color: #b3b3b3;
				font-size: 14px;
				font-size: 0.875rem;
			}

			.footer-blog-readmore {
				position: relative;
				font-weight: normal;
				margin-top: 10px;
				display: inline-block;
			}

				.footer-blog-readmore:after {
					position: absolute;
					content: "";
					width: 29px;
					height: 14px;
					background: url('img/sprite.png') 0 -310px;
					right: -35px;
					top: 2px;
				}

				.footer-blog-readmore:hover {
					text-decoration: none;
				}



	.footer-meta {
		padding: 20px;
		text-transform: uppercase;
	}

		.copyright {
			width: 95%;
			float: center;
			color: #ffffff;
			font-size: 14px;
			font-size: 0.875rem;
			padding-top: 3px;
		}

			.copyright span {
				color: #86cb32;
			}

		.footer-nav {
			width: 53%;
			float: right;
			text-align: right;
		}

			.footer-nav a {
				color: #c0c0c0;
				text-decoration: none;
				padding: 0 10px;
				font-size: 12px;
				font-size: 0.75rem;
				font-weight: normal;
			}

			.footer-nav .last {
				padding-right: 0;
			}

				.footer-nav a:hover {
					color: #86cb32;
				}





/*---------------------------
/*
/*     ISOTOPE
/*
/*---------------------------*/

.isotope-item {
  z-index: 2;
}

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

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  transition-duration: 0.8s;
}

.isotope {

   transition-property: height, width;
}

.isotope .isotope-item {

		  transition-property: transform, opacity;
}





/*---------------------------
/*
/*     SELECT2
/*
/*---------------------------*/

/*
Version: @@ver@@ Timestamp: @@timestamp@@
*/
.select2-container {
	position: relative;
	display: block;
	/* inline-block for ie7 */
	zoom: 1;
	*display: inline;
	vertical-align: middle;
	width: 270px;
	z-index: 640;
}

.select2-container,
.select2-drop,
.select2-search,
.select2-search input{
	box-sizing: border-box; /* css3 */
}

.select2-container .select2-choice {
	display: block;
	overflow: hidden;
	position: relative;
	white-space: nowrap;
	background-clip: padding-box;
	user-select: none;
	padding: 17px 20px;
	box-sizing: border-box;
	border: 1px solid #cdcdcd;
	border-radius: 4px;
	box-shadow: inset 0 1px #fff,
	            0 2px 1px rgba(0,0,0,0.25),
	            0 0 15px rgba(0,0,0,0.05);
	background: #dcdcdc url('img/bg-button-texture.png');
	background: url('img/bg-button-texture.png'),
				linear-gradient(bottom, #dcdcdc 0%,#eee 100%);
	background: url('img/bg-button-texture.png'),
				linear-gradient(to top, #dcdcdc 0%,#eee 100%);
	font-size: 13px;
	font-size: 0.8125rem;
	font-family: '΢ÈíÑźÚ', sans-serif;
	font-weight: 600;
	color: #7C7D7D;
	text-transform: uppercase;
	margin: 0;
	outline: 0;
}

.select2-container .select2-choice:hover {
	text-decoration: none;
}

.select-2-choice.select-drop-above {
	margin-top: -3px;
}
.select2-container.select2-allowclear .select2-choice span {
	margin-right: 42px;
}

.select2-container .select2-choice span {
	margin-right: 26px;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.select2-drop-mask {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 647;
	background-color: #fff;
	opacity: 0;
	filter: "alpha(opacity=0)"; /* expected to work in IE 8 */
	filter: alpha(opacity=0); /* IE 4-7 */
}

.select2-drop {
	width: 100%;
	position: absolute;
	z-index: 648;
	top: 100%;
	background: #fff;
	border: 1px solid #cdcdcd;
	border-top: 0;
	border-radius: 0 0 3px 3px;
	box-shadow: inset 0 2px 1px rgba(0,0,0,0.25);
}

	.select2-drop-above.select2-drop {
		box-shadow: none;
		border-radius: 3px 3px 0 0;
		border-top: 1px solid #cdcdcd;
		border-bottom: 0;
	}

.select2-container .select2-choice div {
	display: inline-block;
	width: 10px;
	height: 14px;
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -7px;
	background: url('img/sprite-contact.png') 0 -160px;
}

.select2-search {
	display: block;
	height: 1px;
	width: 1px;
	left: -10000px;
	position: absolute;
}

/* results */
.select2-results {
	max-height: 300px;
	padding: 0;
	margin: 0;
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	tap-highlight-color: rgba(0,0,0,0);
	color: #b3b3b3;
}

.select2-results ul.select2-result-sub {
	margin: 0;
}

.select2-results li {
	list-style: none;
	display: list-item;
	background-image: none;
}



.select2-results .select2-result-label {
	padding: 10px 20px;
	margin: 0;
	cursor: pointer;
	min-height: 1em;
	user-select: none;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
}

.select2-results li:first-child .select2-result-label {
	padding-top: 12px;
}

.select2-results .select2-highlighted {
	background: #7fc146;
	background: linear-gradient(to bottom, #7fc146 0%,#62ae36 100%);
	color: #fff!important;
}

.select2-results li:first-child.select2-highlighted {
	box-shadow: inset 0 2px 1px rgba(0,0,0,0.25);
}

.select2-drop-above .select2-results li:first-child.select2-highlighted {
	box-shadow: none;
}

.select2-results li em {
	background: #feffde;
	font-style: normal;
}

.select2-results .select2-highlighted em {
	background: transparent;
}

.select2-results .select2-highlighted ul {
	background: white;
	color: #000;
}


.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-selection-limit {
	background: #f4f4f4;
	display: list-item;
}

/*
disabled look for disabled choices in the results dropdown
*/
.select2-results .select2-disabled.select2-highlighted {
	color: #666;
	background: #f4f4f4;
	display: list-item;
	cursor: default;
}
.select2-results .select2-disabled {
  background: #f4f4f4;
  display: list-item;
  cursor: default;
}

.select2-results .select2-selected {
	display: none;
}

.select2-more-results.select2-active {
	background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%;
}

.select2-more-results {
	background: #f4f4f4;
	display: list-item;
}

/* disabled styles */

.select2-container.select2-container-disabled .select2-choice {
	background-color: #f4f4f4;
	background-image: none;
	border: 1px solid #ddd;
	cursor: default;
}

.select2-container.select2-container-disabled .select2-choice div {
	background-color: #f4f4f4;
	background-image: none;
	border-left: 0;
}

.select2-container.select2-container-disabled .select2-choice abbr {
	display: none;
}


.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
	text-decoration: underline;
}

.select2-offscreen {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.select2-display-none {
	display: none;
}

.select2-measure-scrollbar {
	position: absolute;
	top: -10000px;
	left: -10000px;
	width: 100px;
	height: 100px;
	overflow: scroll;
}







/*---------------------------
/*
/*     MEDIA QUERIES
/*
/*---------------------------*/

@media only screen and (max-width: 1890px) {
	.pencil,
	.ruler {
		display:none;
	}
}

@media only screen and (max-width: 1760px) {
	.paperclip-1,
	.paperclip-2,
	.paperclip-3,
	.paperclip-4,
	.stamp {
		display:none;
	}
}


@media only screen and (max-width: 1490px) {

	.logo-carousel-wrapper {
		margin: 0 250px 0 0;
	}

	.twitter-feed-wrapper {
		padding-right: 220px;
	}

	.chameleon {
		right: 0;
	}

	.blog .twitter-feed-wrapper,
	.single-post .twitter-feed-wrapper,
	.category .twitter-feed-wrapper,
	.author .twitter-feed-wrapper {
		padding-right: 0;
	}

}

@media only screen and (max-width: 1350px) {
	.related-posts-wrapper {
		width: 800px;
		margin: 90px auto 0  auto;
	}
}

@media only screen and (max-width: 1310px){
	#port-items {
		width: 800px;
		margin: 0 auto;
	}

	#port-cats:before {
		left: 30px;
	}

	#port-cats:after {
		right: 34px;
	}

	#port-items:after {
		right: 4px;
	}
}

@media only screen and (max-width: 1200px) {

	.services-wrapper {
		width: 960px;
		margin: 0 auto;
		height:auto;
	}

	.service-row {
		width: 216px;
		margin: 0 12px;
	}

	.service-badge {
		width: 216px;
		height: 216px;
	}

	.service-item {
		font-size: 15px;
	}
	
	.service-item1 {
		font-size: 15px;
	}

	.badge-spikes {
		background-position: -260px -120px;
	}
	
	

	.service-graphic .badge-text {
		background-position: 0 -1430px;
	}

	.service-graphic .badge-stamp {
		background-position: -220px -1430px;
	}

	.service-website .badge-text {
		background-position: 0 -1650px;
	}

	.service-website .badge-stamp {
		background-position: -220px -1650px;
	}

	.service-product .badge-text {
		background-position: 0 -1870px;
	}

	.service-product .badge-stamp {
		background-position: -220px -1870px;
	}

	.service-marketing .badge-text {
		background-position: 0 -2090px;
	}

	.service-marketing .badge-stamp {
		background-position: -220px -2090px;
	}
	
	.badge-spikes,
	.badge-text,
	.badge-stamp {
		width: 216px;
		height: 216px;
	}

	.map {
		width: 288px;
	}

	.team {
		width: 600px;
		margin: 0 auto;
	}

	.post {
		margin-left: 20px;
	}

	.sidebar-section,
	.sidebar-heading {
		padding-right: 20px;
	}

	#newsletter-form:before {
		right: -15px;
	}

	.blog-author {
		text-align: center;
		margin-bottom: 30px;
	}

	.author-meta {
		display: block;
		margin-top: 10px;
	}

	.comment,
	.comment-left,
	#reply-title {
		padding-left: 20px;
	}

	.footer-social .footer-icon,
	.footer-social h4 {
		margin-left: 20px;
	}

	.footer-blog-content {
		margin-right: 20px;
	}

	.footer-img {
		width: auto;
	}

	.footer-img img {
		width: 100%;
		height: auto;
	}

	.footer-contact .footer-icon,
	.footer-contact h4,
	.map {
		margin-left: 10px;
		margin-right: 10px;
	}

	.service-title {
		font-size: 18px;

	}

	.portfolio-content {
		padding: 0 20px;
	}

	.blog .twitter-feed-wrapper,
	.single-post .twitter-feed-wrapper,
	.category .twitter-feed-wrapper,
	.author .twitter-feed-wrapper {
		padding-right: 20px;
	}

	.tagline {
		padding-right: 0;
		margin-bottom: 60px;
	}

	.words {
		display: block;
	}

	.words span {
		left: 0;
		width: 100%;
	}

	.logo-modal-container {
		padding: 0 10px;
	}

	#contact-wrapper.active {
		top: 10px;
	}
}

@media screen and (max-height: 800px){

	.logo-modal-container {
		padding: 0;
		text-align: center;
	}

	.attachment-logo-modal {
		width: 70%;
	}
}


/*---------------------------
/*
/*     CUSTOM PORTFOLIO ZOOM POSITIONS
/*
/*---------------------------*/

.postid-390 .zoom-img {
	bottom: 65%;
}

.postid-381 .zoom-img {
	bottom: 8%;
}

.postid-430 .zoom-img {
	bottom: 60%;
}

/*---------------------------
/*
/*     CUSTOM CSS
/*
/*---------------------------*/

.csswinner{
position:absolute;
top:270px;
left:0px;
z-index:600;
}
.csswinner a{
width:81px;
height:59px;
text-indent:-9000px;
display:block;
background:url(http://www.csswinner.com/images/nominee-graphics/nominee-brown-left.png) no-repeat;
}

/* --- Awwwards Ribbons --- */

/* Base */

#awwwards {
	position:absolute;
	top:60px;
	z-index:600;
}

/* Left */

#awwwards.left {
	left:0;
}

/* Right */

#awwwards.right {
	right:0;
}

/* Link */

#awwwards a {
	display:block;
	width:70px;
	height:105px;
	text-indent:-8000px;
	background-repeat:no-repeat;
	background-position: 0 0;
	overflow:hidden;
}

/* Black */

/*#awwwards.left.black a {
	background-image:url('ribbons/awwwards_nominee_black_left.png');
}
#awwwards.right.black a {
	background-image:url('ribbons/awwwards_nominee_black_right.png');
}

/* White */

/*#awwwards.left.white a {
	background-image:url('ribbons/awwwards_nominee_white_left.png');
}
#awwwards.right.white a {
	background-image:url('ribbons/awwwards_nominee_white_right.png');
}

/* Green */

/*#awwwards.left.green a {
	background-image:url('ribbons/awwwards_nominee_green_left.png');
}
#awwwards.right.green a {
	background-image:url('ribbons/awwwards_nominee_green_right.png');
}*/


/* MEDIA QUERIES */

/* Landscape phone to portrait tablet */

@media (max-width: 767px) {

	/* hidden */
	#awwwards {
		display: none;
	}

}

/* Retina Displays */

/* Target any device with retina display (i.e. iPad 3 and MacBook Pro) */

@media 
only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

	#awwwards a {
		-moz-background-size: 70px 105px;
		-ie-background-size:70px 105px;
		-o-background-size:70px 105px;
		-webkit-background-size:70px 105px;
		background-size:70px 105px;
	}

	/* Gray */

	#awwwards.left.black a {
		background-image:url('ribbons/awwwards_nominee_black_left2x.png');
	}
	#awwwards.right.black a {
		background-image:url('ribbons/awwwards_nominee_black_right2x.png');
	}

	/* White */

	#awwwards.left.white a {
		background-image:url('ribbons/awwwards_nominee_white_left2x.png');
	}
	#awwwards.right.white a {
		background-image:url('ribbons/awwwards_nominee_white_right2x.png');
	}

	/* Green */

	#awwwards.left.green a {
		background-image:url('ribbons/awwwards_nominee_green_left2x.png');
	}
	#awwwards.right.green a {
		background-image:url('ribbons/awwwards_nominee_green_right2x.png');
	}
	
}


/*µÚÒ»¸öÒ³ÃæµÄÑùʽ*/

.mainbanner{width:100%; height:655px;}
.bannerbox{margin:0 auto; width:1435px; height:655px; position:relative; left: -128px;}

#fW_Content {DISPLAY:inline; FLOAT:left; WIDTH:100%; HEIGHT:655px; overflow:hidden;}
#fW_Content IMG {WIDTH:1577px; HEIGHT:655px}
.fW_Controls{z-index:100; top:600px; left:1000px; WIDTH: 210px; HEIGHT:42px; position:absolute;}
.fW_Controls li{float:left; list-style:none;}
.fW_Controls li a {FONT-SIZE:0px; FLOAT:left; background:url(img/cc3.png) no-repeat center; WIDTH:30px; COLOR: white; PADDING-TOP:6px; HEIGHT: 24px;}
.fW_Controls li a.activeSlide{background:url(img/cc1.png) no-repeat center;}
.fW_Controls li a:hover{background:url(img/cc1.png) no-repeat center;}

.mediaslide{display: inline;float: left; height: 295px; overflow: hidden; width: 570px;}
.mediaslide img{width:670px;}

#meida_slide{
	position:relative;
}

#meida_slide .prev{
	position:absolute;left:0;
	top: 130px;
	background-image: url("img/arrows.png");
	opacity: 0.8;
	font-size:0px;
	height: 45px;
	width: 45px;
}

#meida_slide .next{
	position:absolute;right:0;
	top: 130px;
	background-position: 100% 0;
	background-image: url("img/arrows.png");
	width: 45px;
	opacity: 0.8;
	height: 45px;
	font-size:0px;
}

/*ºÏ×÷¼ÓÃËÒ³ÃæµÄÑùʽ*/

.zs_banner{width:100%; height:440px;}
.zs_bannerbox{width:1130px; margin:0 auto; padding:20px;}
.mt20 {margin-top:20px;}
.zs_con{padding:20px 10; width:1170px;}
.zs_title{line-height:60px; font-size:30px; text-align:center; border-top-left-radius:10px; border-top-right-radius:10px; background:#ffffff; color:#656565}
.font25 {font-size:25px;}
.wrap{width:1170px; margin:0 auto;}


/*×¢²áÒ³ÃæÑùʽ*/
.grid_c1 { margin:auto; width:80%; _zoom:1; background-position:center; font-family:'΢ÈíÑźÚ'; }
.header1 {line-height: 42px; height: 42px; vertical-align: baseline; position: relative;}
.title1 {width:200px; font-size: 18px; margin: auto; margin-top: 65px; color:#505a64;}
.title2 {width:550px; font-size: 28px; margin: auto; margin-top: 65px; color:#505a64;}
.bd {padding-top: 20px;}
.detail_con {margin: 30px;}
.f_table .f_item {margin-bottom:30px;}
.f_table .f_item .f_label {font-family:'΢ÈíÑźÚ';padding-top: 3px;width: 280px;float:left;font-size: 16px;text-align: right;padding-right:15px;}
.f_table .f_content {margin-left:280px;}
.f_table .f_content span {vertical-align: middle; display:inline-block;}
.f_table input, select, textarea {padding-left:5px;font-size: 14px; border: 2px solid #dae4eb; width: 380px; height:34px; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-webkit-transition:border linear .2s, box-shadow linear .2s;-moz-transition:border linear .2s, box-shadow linear .2s;-o-transition:border linear .2s, box-shadow linear .2s;transition:border linear .2s, box-shadow linear .2s;}
.f_table textarea {height: 80px;}
.f_table .f_item.error input,.f_item.error select,.f_item.error textarea{border-color:#b94a48;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);}
.f_table .f_item.error input:focus,.f_item.error select:focus,.f_item.error textarea:focus{border-color:#953b39;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #d59392;-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #d59392;box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #d59392;}

.f_table .sub_btn_con {margin: auto; width:130px;margin-top: 40px;}
.f_table .sub_btn{text-align:center;display: inline-block;width: 120px;height: 40px;background-color: #7EA7C5;color: #ffffff; border-radius: 4px;}
.f_table .sub_btn p {font-size: 18px;}
.f_help {font-size: 14px;color:#7f868d;}

.zhu {color:#a4b7c4;text-align: center;}
.support {padding:15px 0;text-align: center;}
.support a{color:#a4b7c4;}
.bottom_line {height:1px; border-top: 1px solid #c1cfd9;}
.clearfix{*zoom:1;}
.clearfix:after{
    display:block;
    clear:both;
    content:"\0020";
    visibility:hidden;
    height:0;
}
.hot {color:#fa8f88;}