* {
	-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
			box-sizing: border-box;
}

/************** Import CSS Reset *****************/
@import url("./reset.css");
/* ------- General Setting ------- */
html, body {
	margin: 0px;
	padding: 0px;
	min-height: 100%;
	height: 100%;
	width: 100%;
	font-family: "Source Sans Pro", sans-serif;
}

img {
	border-radius: 5px;
}

.right {
	float: right;
}

.left {
	float: left;
}

.small {
	font-size: 16px;
}

a {
	color: #54A4FF;
	transition: color 0.1s linear;
	-moz-transition: color 0.1s linear;
	transition: color 0.1s linear;
	-o-transition: color 0.1s linear;
}

a:hover {
	color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	/*word-spacing: 0.1em;*/
}

h1 {
	font-size: 44px;
	line-height: 54px;
	margin: 0;
	margin-bottom: 15px;
	text-transform: capitalize;
}

h2 {
	font-family: arial;
	font-size: 36px;
	margin: 0;
	margin-bottom: 13px;
	text-transform: capitalize;
}

h3 {
	font-size: 24px;
	margin: 0;
	margin-bottom: 10px;
}

h4 {
	font-size: 16px;
	margin: 0;
	margin-bottom: 7px;
}

h5 {
	font-size: 12px;
	margin: 0;
	margin-bottom: 5px;
}

h6 {
	font-size: 12px;
	margin: 0;
	margin-bottom: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6,
#menu a,
.bt,
.font {
/* 	color: #777; */
}

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

ul {
	list-style-type: square;
}

.left {
	float: left;
}

.right {
	float: right;
}

.last {
	margin-right: 0 !important;
}

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

.imgleft {
	float: left;
	margin-right: 12px;
}

.imgright {
	float: right;
	margin-left: 12px;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

.clearfix {
	padding: 0 10px;
	display: block;
}

.clear {
	clear: both;
}

.divider {
	min-height: 330px;
	padding: 2px;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.02)), to(rgba(0,0,0,0)));
	border-radius: 5px;
	margin-bottom: 50px;
	clear: both;
}

.wrapper {
	max-width: 1024px; 
	padding: 0; 
	margin: auto;
}

.portfolio-wraper {
	padding: 0 30px;
}


.page-white {
	background: #fff;
	color: #000;
	min-height: 100%;
	margin-bottom: -177px; 
}

.page-black {
	background: #000;
	color: #fff;
	min-height: 100%;
	margin-bottom: -177px; 
}

.page-white:after,
.page-black:after {
	content: "";
	display: block;
	height: 177px; 
}

#content_wrapper {
	max-width: 1028px;
	margin: -7px auto;
	padding-bottom: 20px;
	padding: 20px 30px;
}
#content_wrapper img {
	margin: 0 0 40px 40px;
}

#page_content_wrapper {
	max-width: 1024px;
	margin: auto;
}

#page_content_wrapper .inner {
	width: 100%;
	float: left;
	margin: 0 0 0 0;
}

.section-line {
	clear: both;
	line-height: 0;
	font-size: 0;
	width: 100%;
	height: 2px;
	background: transparent url(../media/divider.png) left top repeat-x;
}

.font {
	color: #fff;
	letter-spacing: 0.05em;
}

/* ------- End General Seting ------- */

/* ------- Home Slider ------- */
section#slider {
	margin-bottom: 80px;
	margin-top: 20px;
	-moz-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.05);
	-webkit-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.05);
	box-shadow: 4px 4px rgba(0,0,0,0.05);
	position: relative;
}

section#slider-object-carousel {
	margin: 30px 0 50px 0;
	width: 100%;
	position: relative;
}

#slide-container {
	font-family: 'Oswald', sans-serif;
}

/* ------- End Home Slider ------- */

/* ------- Header ------- */
h1.slogan {
	text-transform: uppercase;
	font-family: arial, sans-serif;
	width: 100%;
	max-width: 950px;
	overflow: hidden;
	font-size: 116px;
	line-height: 1em;
	padding: 0px 0 20px;
	margin: auto;
	margin-top: -60px;
	background: #3C3C3C;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.65)), to(rgba(0,0,0,1)));
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-moz-text-fill-color: transparent;
	-moz-background-clip: text;
	-o-text-fill-color: transparent;
	-o-background-clip: text;
}

h2.slogan {
	font-size: 24px;
	color: #444;
}

h1.sketch a {
	text-decoration: none;
	color: #444;
	font-size: 44px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

#header {
	width: 100%;
	min-height: 100px;
	color: #444;
	font-family: 'Oswald', sans-serif;
	background: rgba(255,255,255,0.95);
	/* Background pattern from subtlepatterns.com */
	background-image: url('../media/bg_skulls.png');
	box-shadow: 0 0 10px -2px black;
	z-index: 1;
	position: relative;
}

#header .wrapper {
	padding: 13px 20px 5px 10px;
	display: flex;
	justify-content: space-between;
}
#header canvas {
	border-bottom: 1px solid rgba(0,0,0,0.25);
}

#header .wrapper .logo-container {
	display: flex;
	max-width: 320px;
	width: 100%;
	/*height: 80px*/
	max-height: 80px;
}

#header .logo-container img.sketch {
	width: 102px;
	margin-top: 6px;
}
#header .logo-container h1.sketch {
	flex: 1;
	font-family: 'Oswald', sans-serif;
	color: #333;
	margin: 14px 0 0 10px;
	font-weight: 500;
}

@media (max-width: 600px) {
	#header .wrapper {
		flex-direction: column;
		align-items: center;
	}
}

@media (max-width: 350px) {
	#header .wrapper .logo-container {
		flex-direction: column;
		align-items: center;
	}
}

/* ------- Menu ------- */

#menu {
	/*float: right;*/
	/*height: 12px;*/
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 900;
	color: #fff;
	padding: 0;
	margin: 24px 0 0;

	flex: 1;
	display: flex;
	justify-content: flex-end;
}

#menu li {
	display: block;
	/*float: left;*/
	margin-right: 15px;
	text-transform: uppercase;
}

#menu > li {
	/*float: left;*/
	color: #fff;
	padding-top: 2px;
}

#menu a {
	color: #444;
	margin: 0px 0 0 10px;
	text-decoration: none;
	font-size: 20px;
}

#menu a:hover, #menu a.current {
	color: #72c34a;
	padding-bottom: 10px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #72c34a;
}

#menu a.nav_sketchpad:hover, #menu a.nav_sketchpad.current {
	color: red;
	border-bottom-color: red;
}

#menu a.nav_business_and_education:hover, #menu a.nav_business_and_education.current {
	color: orange;
	border-bottom-color: orange;
}

#menu a.nav_news:hover, #menu a.nav_news.current {
	color: #EEE400;
	border-bottom-color: #EEE400;
}

#menu a.nav_contact:hover, #menu a.nav_contact.current {
	color: green;
	border-bottom-color: green;
}

#menu a.nav_about:hover, #menu a.nav_about.current {
	color: #3EB4FE;
	border-bottom-color: #3EB4FE;
}

#menu a.nav_software:hover, #menu a.nav_software.current,
#menu a.nav_portfolio:hover, #menu a.nav_portfolio.current {
	color: #EA2FBC;
	border-bottom-color: #EA2FBC;
}

#menu a.nav_signup:hover, #menu a.nav_signup.current {
	color: #F9AB00;
	border-bottom-color: #F9AB00;
}

#menu a.nav_apps:hover, #menu a.nav_apps.current,
#menu a.nav_services:hover, #menu a.nav_services.current {
	color: #EEE400;
	border-bottom-color: #EEE400;
}

/* ------- End Header ------- */


/* ------- Home page ------- */
#home {
	position: relative;
	z-index: 1080;
	margin-top: 105px;
}

#apps {
	max-width: 980px;
	margin-right: auto;
	margin-left: auto;
}

#apps ul li {
	font-size: 24px;
	color: #888;
	letter-spacing: 1px;
	font-family: "oswald", sans-serif;
	line-height: 48px;
	display: inline;
	margin: 0 10px;
}

#apps a img:hover {
	box-shadow: 0 0 1px 2px #ff0;
	border-color: #F9F;
}

#apps strong {
	color: #333;
}

#apps .content a {
	border-radius: 5px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

#apps .content a img {
	border: 0;
	max-width: 475px;
	width: 48.99%;
	height: auto;
	margin-left: 0.499%;
}

p.announce {
	margin: 0 auto;
	font-size: 1.8em;
	padding: 10px 13px 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	color: #aaa;
	border-radius: 5px;
	background: #eee;
}

.section-title {
	text-align: center;
	margin: 0 0 50px 0;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 2px;
	height: 12px;
	line-height: 11px;
	font-weight: bold;
	border: none;
	padding: 0;
}

.section-title span {
	color: #fff;
	padding: 0 15px;
}
	
/* Recent Works Section
---------------------------------------------------------- */
.recent-work-slider-wrap {
	position: relative;
}

.recent-work-slider {
	position: relative;
	margin: 0 auto;
}

.no-js .recent-work-wrap .portfolio-container {
	width: 996px;
}

.recent-work-wrap .portfolio-item {
	margin-top: 5px;
	margin-bottom: 5px;
}

.no-js .recent-work-wrap .portfolio-item {
	margin-bottom: 30px;
}

.recent-work-wrap .portfolio-item .post-image {
	margin: 0;
}

/* CLIENTS SECTION
------------------------------------------------- */
#clients {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	color: #FFF;
}

#clients h2 {
	color: #FFF;
}

.work {
	margin: 10px 0;
	position: relative;
	overflow: hidden;
}

.work img {
	/*-webkit-filter: grayscale(1);*/
	/*transition: all 0.15s linear;*/
	margin: 0;
	padding: 0;
	height: 90px;
}

.work img:hover {
	/*-webkit-filter: grayscale(0);*/;
}

.work img:first {
	margin-left: 50px;
}

.work-desc {
	float: left;
	width: 200px;
	position: absolute;
	z-index: 1020;
}

.work-desc img {
	filter: url(filters.svg#grayscale);
 /* Firefox 3.5+ */
	filter: gray;
 /* IE6-9 */
	-webkit-filter: grayscale(1);
 /* Google Chrome & Safari 6+ */
	transition: 1s -webkit-filter;
}

#clients img {
	border-radius: 5px;
	background: #fff;
}

#clients img:hover {
	filter: none;
	-webkit-filter: grayscale(0);
}

/* ABOUT SECTION
--------------------------------------- */
#about-wrap {
	margin: 0 auto;
	margin-bottom: 100px;
	width: 996px;
	padding-top: 130px !important;
	color: #444;
	text-rendering: optimizeLegibility;
	font-size: inherit;
	z-index: 2;
	position: relative;
}

#about-wrap a {
	color: #fff;
}

#about-wrap div.social {
	/* margin-left: 20px; */
	/* padding: 10px 0 0 0; */;
}

#about-wrap div.social img {
	width: 40px;
}

#about-wrap img {
	vertical-align: bottom;
}

#about-wrap .founder-info {
	width: 46%;
	margin-top: 30px;
	border-radius: 5px;
	color: #FFF;
	background: #666;
	background: url('../media/woodgrain-dark.png');
	padding: 10px 0;
	border-top-left-radius: 24%;
	min-height: 520px;
	border-bottom-right-radius: 24%;
	border: 10px solid rgb(54, 141, 252);
}

#about-wrap .founder-header {
	height: 240px;
	text-align: center;
}

.founder-header img.sketch-sm {
	width: 48px;
}

#about-wrap .founder-header h3 {
	color: #FFFFFF;
	text-shadow: 1px 1px #000;
	margin-top: 12px;
}

#about-wrap .about-company {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 100;
	font-size: 1.2em;
	line-height: 1.6em;
	padding-left: 10px;
	padding: 10px;
	margin-bottom: 100px;
}

.about-company strong {
	color: #0C0;
}

#about-wrap .about-section {
	line-height: 1.6em;
	padding: 15px 20px 10px;
	font-size: 16px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 100;
	letter-spacing: 2px;
	text-shadow: 1px 1px #000;
	margin-left: 2px;
}

#about-wrap .founder-info img {
	margin: 4px 8px;
}

#about-wrap img.profile {
	margin: 20px 72px 0px 0px;
	border-radius: 50%;
	width: 124px;
}
	
/* Related Works Section
---------------------------------------------------------- */
.related-work-wrap .portfolio-container {
	width: 996px;
}

.related-work-wrap .portfolio-item {
	margin-bottom: 0;
}

.related-work-wrap .portfolio-item, .carousel .portfolio-item {
	margin-right: 38px;
	width: 211px;
}

.related-work-wrap .portfolio-item img, .carousel .portfolio-item img {
	width: 211px;
	height: 211px;
	margin-bottom: -15px;
	padding-bottom: 10px;
}

blockquote {
	background: url(../media/quotes.png) no-repeat;
	font-size: 13px;
	font-family: 'Oswald', sans-serif;
	font-style: italic;
	padding-left: 40px;
	margin: 20px 0 20px 20px;
}

.author {
	text-align: right;
	font-size: 12px;
	font-style: normal;
	color: #3bbfc1;
	line-height: 22px;
}

abbr, acronym {
	border-bottom: 1px solid #3bbfc1;
}

del {
	color: #929292;
}

pre,code,tt {
	font-family: 'Oswald', sans-serif;
	color: #929292;
}

.space {
	height: 100px;
}

.space_small {
	height: 50px;
}

.space_two {
	height: 200px;
}
/*Copyright*/
.copyright {
	text-align: center;
	font-size: 10px !important;
	color: #888888;
}
/* ------- End Home Page ------- */

.extra-space-bottom {
	padding-bottom: 50px;
}

#services-graph {
	display: block;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#services-graph li, #services-graph li span {
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}

#services-graph li {
	margin-bottom: 5px;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	position: relative;
	height: 40px;
	background: url(../media/stripes-dark.png) repeat #2c2c2c;
}

#services-graph li p {
	position: absolute;
	left: 10px;
	top: 12px;
}

#services-graph li strong {
	color: #707070;
	margin-left: 5px;
	font-size: 12px;
}

#services-graph li span {
	height: 40px;
	background: url(../media/stripes-white.png) repeat;
	text-align: right;
}

#services-graph li span {
	background: url(../media/stripes-white.png) repeat #72c34a;
}

#services-graph li {
	color: #000;
	text-shadow: 0 0 3px #fff;
}

#services-graph li strong {
	color: #707070;
}

/* ------- Page title ------- */
.pagetitle1 {
	margin-top: -2px;
	margin-bottom: 15px;
	font-size: 26px;
	font-family: 'Oswald', arial, sans-serif;
	color: #cccccc;
	padding: 5px;
	text-shadow: 0 0 0 transparent,#000000 0px 1px 0px;
}

.page_caption.text_page {
	text-align: left;
	padding-bottom: 50px;
}
.page_caption img {
	max-width: 42%;
	height: auto;
}
.page_caption li {
	line-height: 1.5em;
	list-style-type: square;
	margin-left: 20px;
	color: #000;
}
.page_caption li b {
	color: #666;
}
.page_caption .map_frame img {
	max-width: 90%;
}
.page_caption {
	max-width: 1024px;
	margin: auto;
	text-align: center;
	margin-top: 10px;
}

.page_caption h1 {
	font-size: 2.7em;
	font-family: helvetica;
	padding: 10px 0 0;
	margin: 130px 0 20px;
}

.page_caption h1.header,
.page_caption h2.header {
	margin: 40px 0 10px;
}

.page_caption .span {
	max-width: 1024px;
	margin: auto;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 25px;
	text-transform: uppercase;
}

.line-heading {
	padding-bottom: 2px !important;
	margin-bottom: 16px;
	clear: both;
	overflow: hidden;
	background: transparent url(../media/divider.png) left bottom repeat-x;
}
/* ------- End Page title ------- */

/* ------- Services Page ------- */
.services {
	width: 990px;
}

.services_intro {
	width: 800px;
	margin: 0 auto;
	margin-top: -8px;
	margin-bottom: 57px;
}

.services_intro p {
	line-height: 38px;
	font-size: 24px;
	text-align: center;
}

#service_blocks {
	width: 1050px;
	overflow-x: hidden;
	-ms-overflow-x: hidden;
}

.service {
	float: left;
	width: 260px;
	margin-right: 90px;
	margin-bottom: 50px;
}

.service h3 {
	margin-bottom: 15px;
	margin-top: 10px;
	font-size: 20px;
	text-align: center;
	transition-property: color;
	transition-duration: .25s;
}

.service:hover h3 {
	color: #72c34a;
	text-decoration: underline;
}

.service p {
	text-align: center;
	color: #aaa;
	transition-property: color;
	transition-duration: .25s;
}

.service {
	text-decoration: none;
}

.service:hover p {
	color: #ffa;
}

.service img {
	width: 128px;
	padding: 0 0 0 66px;
}

.icon_container {
	width: 258px;
	height: 258px;
	padding-top: 1px;
	margin-bottom: 35px;
	background: url(../media/services/icon_holder.png);
}

.icon {
	width: 250px;
	height: 90px;
	margin: 4px;
	padding-top: 84px;
	padding-bottom: 75px;
	text-align: center;
}

.icon img {
	height: 90px;
}
/* ------- End Services Page ------- */	


/* ------- Portfolio ------- */
.portfolio-container {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 990px;
}

.portfolio-item {
	float: left;
	position: relative;
	margin: 0 30px 30px 0;
}

.item-container {
	position: relative;
	overflow: hidden;
}

.portfolio-item .post-image {
	overflow: hidden;
	margin-bottom: 0;
}

.portfolio-icons {
	display: block;
	position: absolute;
	right: 5px;
	bottom: -1px;
	margin-right: 5px;
	padding-bottom: 15px;
}

.portfolio-icons a {
	background: transparent url(../media/portfolio_icons.png) no-repeat scroll 0 0;
	float: left;
	padding-bottom: -15x;
	margin-left: 2px;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
}

.portfolio-icons a.image-hover {
	background-position: 0 0;
}

.portfolio-icons a.image-hover:hover {
	background-position: 0 -32px;
}

.portfolio-icons a.link-hover {
	background-position: -32px 0;
}

.portfolio-icons a.link-hover:hover {
	background-position: -32px -32px;
}

.portfolio-icons a.video-hover {
	background-position: -64px 0;
}

.portfolio-icons .video-hover:hover {
	background-position: -64px -32px;
}

.portfolio-item .post-info .post-content p {
	margin: 7px 0;
}

.portfolio-item .post-info .post-meta span {
	background: none;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}


/* 	Filter
------------------------------------------------*/
.filter {
	margin-bottom: 40px;
	text-align: center;
	padding: 5px 0 20px 0;
	list-style-type: none;
}

.filter li {
	display: inline;
	margin-right: 25px;
	color: #999;
}

.filter li a {
	box-shadow: #439230 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
	vertical-align: top;
	border-radius: 5px;
	border: none;
	padding: 10px 25px 12px;
	background-color: #3bb3e0;
	text-decoration: none;
	color: #000 !important;
	text-shadow: 0 0 1px #333;
	font-weight: bold;
	letter-spacing: -.5px;
	position: relative;
	background: #82cc5d;
	background: -moz-linear-gradient(top, #82cc5d 0%, #53b73c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82cc5d), color-stop(100%,#53b73c));
	background: -webkit-linear-gradient(top, #82cc5d 0%,#53b73c 100%);
	background: -o-linear-gradient(top, #82cc5d 0%,#53b73c 100%);
	background: -ms-linear-gradient(top, #82cc5d 0%,#53b73c 100%);
	background: linear-gradient(to bottom, #82cc5d 0%,#53b73c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cc5d', endColorstr='#53b73c',GradientType=0 );
	border: 1px solid #429E34;
}

.filter li a:hover, .filter li a.active {
	position: relative;
	box-shadow: #439230 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
	background: #99cc80;
	background: -moz-linear-gradient(top, #99cc80 0%, #53b73c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99cc80), color-stop(100%,#53b73c));
	background: -webkit-linear-gradient(top, #99cc80 0%,#53b73c 100%);
	background: -o-linear-gradient(top, #99cc80 0%,#53b73c 100%);
	background: -ms-linear-gradient(top, #99cc80 0%,#53b73c 100%);
	background: linear-gradient(to bottom, #99cc80 0%,#53b73c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cc80', endColorstr='#53b73c',GradientType=0 );
}

/* ------- Portfolio Four Columns ------- */
.portfolio-four-columns .portfolio-item {
	width: 217px;
}

.portfolio-four-columns .portfolio-item img {
	width: 217px;
	height: 159px;
	margin-bottom: -18px;
	padding-bottom: 10px;
}

.shadow {
	position: relative;
}

.shadow:before, .shadow:after {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 15px;
	left: 10px;
	width: 50%;
	top: 80%;
	max-width: 300px;
	background: #000;
	-webkit-box-shadow: 0 15px 10px #000;
	-moz-box-shadow: 0 15px 10px #000;
	box-shadow: 0 15px 10px #000;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}

.shadow:after {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	right: 10px;
	left: auto;
}
/* ------- Portfolio Style 1 ------- */
.portfolio-style-1 .post-info {
	background: #000;
	background: rgba(0, 0, 0, 0.8);
	position: absolute;
	border-bottom: 1px solid #82cc5d;
	margin: 0;
	padding: 10px 0;
	width: 100%;
	height: auto;
	text-align: center;
}

.no-js .portfolio-style-1 .portfolio-item:hover .post-info {
	top: 0;
	left: 0;
}

.portfolio-style-1 .post-info .post-title {
	margin: 0px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 8px;
	padding-left: 0;
}

.portfolio-style-1 .post-info .post-title a {
	color: #fff;
}

.portfolio-style-1 .post-info .post-title a:hover {
	color: #82cc5d;
}

/* ------- Portfolio Single ------- */
#project-main {
	position: relative;
}

#portfolio-item-wrapper {
	float: left;
	width: 100%;
	margin: 0px 0 0 0;
	padding: 30px 0 0 0;
}

#portfolio-sidebar-details {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#portfolio-sidebar-details li {
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
}

#portfolio-sidebar-details li span {
	display: inline-block;
	width: 20px;
	margin-right: 10px;
	line-height: 12px;
}

#portfolio-sidebar-details li .button {
	margin-bottom: 0;
}

#portfolio-sidebar-previous, #portfolio-sidebar-next, #portfolio-sidebar-back {
	width: 11px;
	height: 19px;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 0;
}

#portfolio-sidebar-previous {
	background-image: url("../media/elements/portfolio-arrow-left.png");
}

#portfolio-sidebar-next {
	background-image: url("../media/elements/portfolio-arrow-right.png");
}

#portfolio-sidebar-back {
	background-image: url("../media/elements/portfolio-back.png");
}
/* ------- CAROUSEL ------ */
.carousel .jcarousel-container-horizontal {
	width: 958px;
	padding: 0;
}

.carousel .jcarousel-clip-horizontal {
	margin: 0;
	padding: 0;
	width: 958px;
	height: auto;
}
	
/* Carousel Navigation */
.jcarousel-clip {
	overflow: hidden;
}

.jcarousel-next-horizontal, .jcarousel-prev-horizontal {
	background: transparent url(../media/nav_arrow_small.png) no-repeat scroll 0 0;
	position: absolute;
	top: 92px;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	cursor: pointer;
	z-index: 999;
}

.jcarousel-next-horizontal {
	background-position: right top;
	right: -20px;
}

.jcarousel-prev-horizontal {
	background-position: left top;
	left: -20px;
}

.jcarousel-next-horizontal span, .jcarousel-prev-horizontal span {
	background: transparent url('../media/nav_arrow_small.png') no-repeat scroll 0 0;
	position: absolute;
	display: block;
	top: 0px;
	width: 32px;
	height: 32px;
	z-index: 1000;
}

.jcarousel-next-horizontal span {
	background-position: right bottom;
}

.jcarousel-prev-horizontal span {
	background-position: left bottom;
}
/* ------- Post Navigation ------- */
.post-nav {
	list-style-type: none;
	overflow: hidden;
	margin: 40px 0;
}

.post-nav .main-grid {
	float: left;
}

.post-nav a.main-grid {
	background: transparent url('../media/main_grid.png') no-repeat scroll 0 0;
	display: block;
	padding-left: 35px;
	line-height: 32px;
	font-weight: bold;
	color: #777;
}

.post-nav a.main-grid:hover {
	background-position: 0 bottom;
	color: #d3654c;
}

.post-nav .nav {
	float: right;
	margin: 0;
}

.post-nav .nav p {
	float: left;
	margin: 0;
	font-weight: bold;
	line-height: 32px;
}

.post-nav .nav a {
	float: left;
	display: block;
	position: relative;
	margin: 0 0 0 5px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-indent: -9999px;
}

a.post-prev, a.post-next {
	background: #fff url('../media/nav_arrow_small.png') no-repeat scroll 0 0;
}

a.post-prev {
	background-position: left top;
}

a.post-next {
	background-position: right top;
}

a.post-prev span, a.post-next span {
	background: #fff url('../media/nav_arrow_small.png') no-repeat scroll 0 0;
	position: absolute;
	display: block;
	top: 0px;
	width: 32px;
	height: 32px;
	z-index: 1000;
}

a.post-prev span {
	background-position: left bottom;
}

a.post-next span {
	background-position: right bottom;
}
	

/* ------- End Portfolio ------- */


/* ------- Contact Form ------- */
#contact {
	position: relative;
	z-index: 9999;
	top: 1px;
	margin: 120px 0 100px;
}

#contact_form {
	max-width: 420px;
	width: 100%;
	margin: 0px;
	float: left;
	border-radius: 5px;
}

#contact_form .success {
	padding: 20px;
	border-radius: 5px;
	background-color: #2c2c2c;
}
#contact_form ul {
	padding: 0;
}
#contact_form li {
	list-style-type: none;
}

#contact_form li.button {
	font-size: 26px;
	float: left;
	margin-bottom: 10px;
	position: relative;
	list-style-type: none;
}

#contact_form input[type="text"], 
#contact_form input[type="phone"], 
#contact_form input[type="email"], 
#contact_form textarea {
	transition-property: background;
	transition-duration: 0.25s;
	box-shadow: 0 0 5px rgba(255,255,255,0.15), 0 0 100px rgba(255,255,255,1) inset;
	font-size: 14px;
	margin-top: 2px;
	width: 100%;
	max-width: 394px;
	margin-bottom: 15px;
	background-color: rgba(255,255,255,0.75);
	color: #666;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0F0F0F;
	border-right-color: #292929;
	border-bottom-color: #292929;
	border-left-color: #0F0F0F;
	padding: 8px 12px;
	border-radius: 5px;
	font-family: Capriola;
}

#contact_form textarea {
	height: 200px;
}

#contact_form input:hover, #contact_form textarea:hover {
	background-color: rgba(255,255,255,0.9);
}

#contact_form input:focus, #contact_form textarea:focus {
	color: #000;
	background-color: #fff;
	border-right-color: #464646;
	border-bottom-color: #464646;
	outline: none;
}

#contact_form input.submit {
	text-transform: uppercase;
	transition-property: background;
	transition-duration: 0.25s;
	background-color: #54A4FF;
	cursor: pointer;
	border-radius: 5px;
	border: 1px solid #000;
	min-width: 200px;
	font-family: Capriola;
	font-weight: 400;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 1px;
	text-align: center;
	z-index: 999;
	left: -2px;
	padding: 3px 12px;
	color: #eee;
	position: relative;
	text-shadow: 0 0 1px #000;
	background-repeat: repeat-x;
	background-size: 30px 30px;
	background-position: -1px -0.5px;
	box-shadow: 0 -3px 1px -2px rgba(0,0,0,0.2) inset, 0 0 5px rgba(255,255,255,0.15);
}

#contact_form input.submit:hover {
	background-color: #FF5488;
	color: #fff;
}

#contact_form .required {
	padding-left: 5px;
	position: absolute;
	top: 18px;
	right: 8px;
	font-size: 16px;
	line-height: 0;
	display: inline-block;
	color: #f99;
}

#contact_form .text {
	position: relative;
	display: block;
	font-weight: normal;
	margin-bottom: 1px;
	padding: 0 25px 0 10px;
}

#content_wrapper .error {
	color: #FF5488;
}


/* ------- End Contact Form ------- */

/* ------- Contact information ------- */
.contact-information {
	margin: 20px 0 0;
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
}

.contact-information h3,
.contact-information a {
	margin-left: 40px;
}

.contact-information strong {
	display: block;
	font-weight: normal;
	text-transform: uppercase;
	width: 100px;
	padding: 0;
	padding-right: 25px;
}

.contact-information ul li {
	margin-bottom: 10px;
	list-style-type: none;
	padding-top: 5px;
	padding-bottom: 5px;
	background-position: 0 6px;
}

.contact-information ul li.address_1 {
	background-image: url(../media/icons/icon-address.png);
	background-repeat: no-repeat;
}

.contact-information ul li.phone_1 {
	background-image: url(../media/icons/icon-phone.png);
	background-repeat: no-repeat;
}

.contact-information ul li.email_1 {
	background-image: url(../media/icons/icon-email.png);
	background-repeat: no-repeat;
}

.company-information h3 {
	margin-left: 40px;
}



/* ------- Footer ------- */
footer {
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
	height: 250px;
	box-shadow: 0 0 10px -2px black;
	z-index: 1;
	position: relative;
}
footer p {
	letter-spacing: 2px;
	font-size: 20px;
	color: black;
	text-align: center;
	font-family: 'Oswald', sans-serif;
	width: 100%;
	line-height: 2.2em;
	float: left;
	position: relative;
	z-index: 1;
	background: rgba(255,255,255,0.5);
	border-radius:7px;
	padding: 0 1em;
	margin: 0;
	text-transform: uppercase;
}
footer a {
	color: black;
}
footer a:hover {
	color: black;
}
footer div {
	color: #666;
}
footer #connect {
	max-width: 1024px;
	margin: 0 auto;
	padding: 15px 0 0;
	text-align: center;
	position: relative;
	z-index: 1;
	color: #fff;
}
footer ul.left {
	color: #000;
	padding: 10px 10px 0 10px;
	border-radius: 10px;
	margin: 0 10px;
}
footer ul.left ul {
	margin-top: 0.75em;
	line-height: 1.5em;
	text-align: left;
	display: inline-block;
}
footer ul.right li {
	display: inline;
}
footer img {
	margin: 0 14px;
	vertical-align: middle;
	width: 40px;
}
footer .social-icons a {
	color: white;
	font-size: 40px;
	margin: 0 10px;
}

#header:after, footer:after {
	content: " ";
	background: url('../media/interlace-diagonal-light.png');
	width: 100%;
	height: inherit;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
#header:after {
	height: 10px;
}


/* ------- Other Seting ------- */
/* Column*/
.one-two,
.one-third,
.one-four {
	float: left;
}

.one-two {
	width: 50%;
}

.one-third {
	width: 33%;
}

.one-four {
	width: 25%;
}

.col-full,
.col-half,
.col-big,
.col-medium,
.col-small,
.col-one-third {
	display: block;
	position: relative;
	float: left;
	width: 450px;
	margin-right: 60px;
	margin-bottom: 40px;
}

.col-one-third {
	width: 280px;
}

.col-big {
	width: 600px;
}

.col-small {
	width: 300px;
}

.col-medium {
	width: 585px;
}

.col-full {
	max-width: 1024px;
	margin-right: 0;
}

.col-last {
	margin-right: 0;
	clear: right;
}

.dark, .brown, .yellow, .red, .blue, .green {
	font-size: 14px;
	line-height: 1.5em;
	padding-left: 15px;
	color: #666666;
	margin-bottom: 18px;
}

.dark {
	border-left-width: 7px;
	border-left-style: solid;
	border-left-color: #333;
}

.brown {
	border-left-width: 7px;
	border-left-style: solid;
	border-left-color: #633;
}

.yellow {
	border-left-width: 7px;
	border-left-style: solid;
	border-left-color: #FF0;
}

.red {
	border-left-width: 7px;
	border-left-style: solid;
	border-left-color: #C03;
}

.blue {
	border-left-width: 7px;
	border-left-style: solid;
	border-left-color: #3bbfc1;
}

.green {
	border-left-width: 7px;
	border-left-style: solid;
	border-left-color: #0C6;
}

/*Grid*/



.one_fourth, .one_third, .one_half, .two_third, .three_fourth {
	float: left;
	margin-bottom: 10px;
	margin-right: 40px;
	position: relative;
}

.one_fourth {
	width: 210px;
}

.one_third {
	width: 293px;
}

.one_half {
	width: 460px;
}

.two_third {
	width: 626px;
}

.three_fourth {
	width: 710px;
}

.last_column {
	clear: right;
	margin-right: 0px !important;
}

.img-align-left {
	margin: 5px 150px 0 0;
	float: left;
}

.img-align-right {
	margin: 5px 0 0 15px;
	float: right;
}

.img-align-center {
	margin: 5px 15px;
	text-align: center;
}

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

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

.text-align-right {
	float: right;
}

/*----------------------------------------------*/
/* 1.3 Columns Styles */
/*----------------------------------------------*/
.one-half, .one-third, .two-third, .one-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth {
	margin-right: 4%;
	display: inline;
	float: left;
	position: relative;
}

.one-half {
	width: 48%;
}

.one-third {
	width: 30.6667%;
}

.two-third {
	width: 65.3332%;
}

.one-fourth {
	width: 22%;
}

.three-fourth {
	width: 74%;
}

.one-fifth {
	width: 16.8%;
}

.two-fifth {
	width: 37.6%;
}

.three-fifth {
	width: 58.4%;
}

.four-fifth {
	width: 79.2%;
}

.last {
	clear: right;
	margin-right: 0 !important;
}
	

/* ------- Buttons ------- */
@font-face {
	font-family: 'Capriola';
	src:url('../media/font/capriola/Capriola.eot');
	src:url('../media/font/capriola/Capriola.eot?#iefix') format('embedded-opentype'),
		url('../media/font/capriola/Capriola.ttf') format('truetype'),
		url('../media/font/capriola/Capriola.woff') format('woff'),
		url('../media/font/capriola/Capriola.svg#logomaker') format('svg');
	font-weight: normal;
	font-style: normal;
}

.button, .button-bevel {
	font-size: 14px;
	font-weight: bold;
	font-family: Capriola;
	color: #fff;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	padding: 7px 20px 9px;
	margin: 2em .5em .5em 0;
	cursor: pointer;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
	transition: 0.1s linear;
	-moz-transition: 0.1s linear;
	-ms-transition: 0.1s linear;
	-o-transition: 0.1s linear;
	transition: 0.1s linear;
}

.button {
	border-radius: 2px;
/* 	box-shadow: inset rgba(255,255,255,0.3) 1px 1px 0; */
}

.button:active {
	box-shadow: inset rgba(0,0,0,0.4) 0px 0px 6px;
}

.rounded {
	border-radius: 20px;
}

.orange {
	background: rgb(255,183,0);
	background: -moz-linear-gradient(top, rgba(255,183,0,1) 0%, rgba(255,140,0,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,183,0,1)), color-stop(100%,rgba(255,140,0,1)));
	background: -webkit-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
	background: -o-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
	background: linear-gradient(to bottom, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );
	border: 1px solid #e59500;
}

.orange:hover {
	background: rgb(255,203,72);
	background: -moz-linear-gradient(top, rgba(255,203,72,1) 0%, rgba(255,156,35,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,203,72,1)), color-stop(100%,rgba(255,156,35,1)));
	background: -webkit-linear-gradient(top, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
	background: -o-linear-gradient(top, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
	background: linear-gradient(to bottom, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb48', endColorstr='#ff9c23',GradientType=0 );
}

.magenta {
	background: rgb(255,130,172);
	background: -moz-linear-gradient(top, rgba(255,130,172,1) 0%, rgba(247,37,129,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,130,172,1)), color-stop(100%,rgba(247,37,129,1)));
	background: -webkit-linear-gradient(top, rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
	background: -o-linear-gradient(top, rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
	background: linear-gradient(to bottom, rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff82ac', endColorstr='#f72581',GradientType=0 );
	border: 1px solid #c60a56;
}

.magenta:hover {
	background: rgb(255,155,189);
	background: -moz-linear-gradient(top, rgba(255,155,189,1) 0%, rgba(248,62,143,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,155,189,1)), color-stop(100%,rgba(248,62,143,1)));
	background: -webkit-linear-gradient(top, rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
	background: -o-linear-gradient(top, rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
	background: linear-gradient(to bottom, rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9bbd', endColorstr='#f83e8f',GradientType=0 );
}

.cyan {
	background: rgb(130,207,241);
	background: -moz-linear-gradient(top, rgba(130,207,241,1) 0%, rgba(56,174,234,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,207,241,1)), color-stop(100%,rgba(56,174,234,1)));
	background: -webkit-linear-gradient(top, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
	background: -o-linear-gradient(top, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
	background: -ms-linear-gradient(top, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
	background: linear-gradient(to bottom, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cff1', endColorstr='#38aeea',GradientType=0 );
	border: 1px solid #3cafcf;
}

.cyan:hover {
	background: rgb(153,216,244);
	background: -moz-linear-gradient(top, rgba(153,216,244,1) 0%, rgba(79,183,236,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,216,244,1)), color-stop(100%,rgba(79,183,236,1)));
	background: -webkit-linear-gradient(top, rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
	background: -o-linear-gradient(top, rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
	background: -ms-linear-gradient(top, rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
	background: linear-gradient(to bottom, rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99d8f4', endColorstr='#4fb7ec',GradientType=0 );
}

.red {
	background: #e25b53;
	background: -moz-linear-gradient(top, #e25b53 0%, #dd2011 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e25b53), color-stop(100%,#dd2011));
	background: -webkit-linear-gradient(top, #e25b53 0%,#dd2011 100%);
	background: -o-linear-gradient(top, #e25b53 0%,#dd2011 100%);
	background: -ms-linear-gradient(top, #e25b53 0%,#dd2011 100%);
	background: linear-gradient(to bottom, #e25b53 0%,#dd2011 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e25b53', endColorstr='#dd2011',GradientType=0 );
	border: 1px solid #c42222;
}

.red:hover {
	background: #dd7671;
	background: -moz-linear-gradient(top, #dd7671 0%, #dd2011 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd7671), color-stop(100%,#dd2011));
	background: -webkit-linear-gradient(top, #dd7671 0%,#dd2011 100%);
	background: -o-linear-gradient(top, #dd7671 0%,#dd2011 100%);
	background: -ms-linear-gradient(top, #dd7671 0%,#dd2011 100%);
	background: linear-gradient(to bottom, #dd7671 0%,#dd2011 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd7671', endColorstr='#dd2011',GradientType=0 );
}

.black {
	background: #444444;
	background: -moz-linear-gradient(top, #444444 0%, #1c1c1c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#1c1c1c));
	background: -webkit-linear-gradient(top, #444444 0%,#1c1c1c 100%);
	background: -o-linear-gradient(top, #444444 0%,#1c1c1c 100%);
	background: -ms-linear-gradient(top, #444444 0%,#1c1c1c 100%);
	background: linear-gradient(to bottom, #444444 0%,#1c1c1c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#1c1c1c',GradientType=0 );
	border: 1px solid #2a2a2a;
}

.black:hover {
	background: #686868;
	background: -moz-linear-gradient(top, #686868 0%, #1c1c1c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#686868), color-stop(100%,#1c1c1c));
	background: -webkit-linear-gradient(top, #686868 0%,#1c1c1c 100%);
	background: -o-linear-gradient(top, #686868 0%,#1c1c1c 100%);
	background: -ms-linear-gradient(top, #686868 0%,#1c1c1c 100%);
	background: linear-gradient(to bottom, #686868 0%,#1c1c1c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686868', endColorstr='#1c1c1c',GradientType=0 );
}

.green {
	background: #82cc5d;
	background: -moz-linear-gradient(top, #82cc5d 0%, #53b73c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82cc5d), color-stop(100%,#53b73c));
	background: -webkit-linear-gradient(top, #82cc5d 0%,#53b73c 100%);
	background: -o-linear-gradient(top, #82cc5d 0%,#53b73c 100%);
	background: -ms-linear-gradient(top, #82cc5d 0%,#53b73c 100%);
	background: linear-gradient(to bottom, #82cc5d 0%,#53b73c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cc5d', endColorstr='#53b73c',GradientType=0 );
	border: 1px solid #429E34;
}

.green:hover {
	background: #99cc80;
	background: -moz-linear-gradient(top, #99cc80 0%, #53b73c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99cc80), color-stop(100%,#53b73c));
	background: -webkit-linear-gradient(top, #99cc80 0%,#53b73c 100%);
	background: -o-linear-gradient(top, #99cc80 0%,#53b73c 100%);
	background: -ms-linear-gradient(top, #99cc80 0%,#53b73c 100%);
	background: linear-gradient(to bottom, #99cc80 0%,#53b73c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cc80', endColorstr='#53b73c',GradientType=0 );
}

.button-bevel {
	transition: color 0.1s linear;
	vertical-align: top;
	border-radius: 4px;
	border: none;
	padding: 10px 25px 12px;
	color: #000;
	font-size: 16px;
}

.button-bevel:hover {
	color: #fff;
}

.button-bevel:active {
	position: relative;
	top: 5px;
}

.button-bevel.orange {
	box-shadow: #c46d00 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.orange:active {
	box-shadow: #c46d00 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
}

.button-bevel.magenta {
	box-shadow: #ca075c 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.magenta:active {
	box-shadow: #ca075c 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
}

.button-bevel.cyan {
	box-shadow: #1994d3 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.cyan:active {
	box-shadow: #1994d3 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
}

.button-bevel.red {
	box-shadow: #88180e 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.red:active {
	box-shadow: #88180e 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
}

.button-bevel.black {
	box-shadow: #000 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;
}

.button-bevel.black:active {
	box-shadow: #000 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;
}

.button-bevel.green {
	box-shadow: #439230 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.green:active {
	box-shadow: #439230 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
}

.button span, .button-bevel span {
	font-size: 20px;
	font-weight: normal;
	vertical-align: middle;
	line-height: 0;
	margin-right: .1em;
}

.refresh:after {
	content: "h";
	font-size: 34px;
}

.shuffle:after {
	content: "f";
	font-size: 34px;
}

.preview:after {
	content: "M";
	font-size: 34px;
}

.tea:after {
	content: "u";
	font-size: 34px;
}

.wifi:after {
	content: "T";
	font-size: 34px;
}

.locator:after {
	content: "0";
	font-size: 34px;
}

.rss:after {
	content: "S";
	font-size: 34px;
}

.cloud:after {
	content: "y";
	font-size: 34px;
}

.download:after {
	content: "w";
	font-size: 34px;
}

.trash:after {
	content: "I";
	font-size: 34px;
}

.rack:after {
	content: "t";
	font-size: 34px;
}

.map:after {
	content: "1";
	font-size: 34px;
}

.setting:after {
	content: "@";
	font-size: 34px;
}

.identity:after {
	content: ".";
	font-size: 34px;
}

.navigation:after {
	content: "2";
	font-size: 34px;
}

.gallery:after {
	content: "p";
	font-size: 34px;
	padding-right: 5px;
}

.email_2:after {
	content: "%";
	font-size: 34px;
}

.users:after {
	content: "+";
	font-size: 34px;
}

.calendar:after {
	content: "P";
	font-size: 34px;
}

.link:after {
	content: ">";
	font-size: 34px;
}

.time:after {
	content: "N";
	font-size: 34px;
}

.folder:after {
	content: "s";
	font-size: 34px;
}

.tag:after {
	content: "C";
	font-size: 34px;
}

.share:after {
	content: "5";
	font-size: 34px;
}

.lock:after {
	content: "U";
	font-size: 34px;
}

.unlock:after {
	content: "V";
	font-size: 34px;
}

.mic:after {
	content: "O";
	font-size: 34px;
}

.love:after {
	content: "6";
	font-size: 34px;
}

.star:after {
	content: "7";
	font-size: 34px;
}

.like:after {
	content: "8";
	font-size: 34px;
}

.phone:after {
	content: "!";
	font-size: 34px;
}

.flag:after {
	content: "?";
	font-size: 34px;
}

.adduser:after {
	content: "-";
	font-size: 34px;
}

.attach:after {
	content: "'";
	font-size: 34px;
}

.comment:after {
	content: ":";
	font-size: 34px;
}

.edit:after {
	content: "&";
	font-size: 34px;
}

.upload:after {
	content: "v";
	font-size: 34px;
}

.storage:after {
	content: "x";
	font-size: 34px;
}

.photo:after {
	content: "D";
	font-size: 34px;
}

.help:after {
	content: "K";
	font-size: 34px;
}

.glass:after {
	content: "R";
	font-size: 34px;
}

.print:after {
	content: "<";
	font-size: 34px;
}

.gadget:after {
	content: '"';
	font-size: 34px;
}