/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Header Section
================================================== */
.header-section{
	width:100%;
	padding-bottom: 60px;
}
.header{text-align: center;}
.header img {padding:40px 0px 20px 0px;}
ul.navigation{margin: auto; width:370px; margin-bottom: 40px;}
ul.navigation li{
	float: left; 
	padding:0px 20px; 
	font-size: 16px;
	color: #181818;
	font-family: "Oswald", sans-serif; 
	font-weight: normal;
	text-transform:uppercase; 
	background:url('../images/bullet.png') no-repeat;
	background-position: 0px 8px;
}
ul.navigation li:first-child{background: none;}
ul.navigation li a{text-decoration: none;}
.subtitle{
	font-family:"Arimo", sans-serif; 
	font-size: 22px;
	font-weight: normal;
}
.section-title{
	background: #a6a39a url('../images/black-star.png') 15px 12px no-repeat;
	display: block;
	height: 31px;
	padding-top: 9px;
	margin-bottom: 20px;
	text-align: center;
	font-size: 14px;
	color: #000;
	font-family: "Oswald", sans-serif; 
	font-weight: normal;
	text-transform:uppercase; 
}

/* Portfolio Section
================================================== */
.portfolio-section{
	width:100%;
	background-color: #242424;
	margin:0px;
	padding:0px;
}
ul.portfolio { margin:0px; padding:0px;}
ul.portfolio li img {
	display:block;
	padding:3px;
	border:1px solid #464646;
}
ul.portfolio li{
	float: left; 
	margin-bottom: 26px;
}
a.portfolio-thumb{
	display:block;
	position: relative;
	width:214px; height:154px;
}
a.portfolio-thumb span.thumb-screen{
	display:none;
	position:absolute; 
	left:4px; top:4px; 
	width: inherit; height: inherit;
	background:url('../images/thumb-screen.png');
}
a.portfolio-thumb span.thumb-zoom{
	display:none;
	position:absolute; 
	left:94px; top:64px;
	width: 34px; height: 34px;
	z-index: 10;
	background:url('../images/thumb-zoom.png');
}
a.portfolio-thumb span.thumb-zoom:hover{
	background-position: 0px -34px;
}

/* News Section
================================================== */
.news-section{
	width:100%;
	background-color: #a6a39a;
	margin:0px;
	padding:0px;
	color:#000;
	font: 14px/21px "Arimo", sans-serif;
}
.news-section h4 { 
	font-size: 21px; 
	line-height: 30px; 
	margin-bottom: 20px; 
	color:#000;
	text-shadow:none;
}
.news-section a{color:#a1a1a1;}
.news-section a:hover{color:#b2b2b2;}

.news-section img{
	display:block;
	padding:3px;
	border:1px solid #464646;
	margin-bottom: 23px;
}

/* About Section
================================================== */
.about-section{
	font: 16px/24px "Arimo", sans-serif;
}
.author-img img{
	display:block;
	padding:3px;
	border:1px solid #464646;
}
.tweet{
	background: #242424;
	padding: 20px 20px 3px 20px;
	color: #dfdfdf;
	margin: 40px 0px;
	position: relative;
	border: 1px solid 242424;
}
.tweet:after, .tweet:before { 
	top: 100%; 
	border: solid transparent; 
	content: " "; 
	height: 0; width: 0; 
	position: absolute; 
	pointer-events: none; 
} 
.tweet:after { 
	border-color: rgba(36, 36, 36, 0); 
	border-top-color: #242424; 
	border-width: 20px; 
	left: 20%; 
	margin-left: -20px; 
} 
.tweet:before { 
	border-color: rgba(66, 66, 4, 0); 
	border-top-color: 242424; 
	border-width: 21px; 
	left: 50%; 
	margin-left: -21px; 
}
.tweet a{color:#a1a1a1;}
.tweet a:hover{color:#b2b2b2;}
.twitter-icon{float:left; margin-right: 5px; padding-top: 12px;}
.twitter-link{ font-style: italic; font-size: 14px;}

/* Contact Section
================================================== */
.contact-section{
	width:100%;
	background-color: #a6a39a;
	padding-bottom:40px;
	color:#000;
	font: 16px/24px "Arimo", sans-serif;
}
.contact-section img {
	display:block;
	padding:3px;
	border:1px solid #464646;
}
.contact-section ul{margin-top:20px; }
.contact-section ul li.title{
	font-family: "Oswald", sans-serif; 
	font-weight: normal;
	text-transform:uppercase;
}
.contact-section ul li{margin: 8px 0px; padding: 0px;}
.contact-section span {
	float: right;
	font-family: "Oswald", sans-serif; 
	font-weight: normal;
	text-transform:uppercase;
	padding-top: 10px;
}
.contact-section span.success {
	color: #fff;
	display: none;
}
.contact-section span.failure {
	color: #f76262;
	display: none;
}

/* Footer Area
================================================== */
.footer-center{text-align:center; font-size: 14px;}
ul.social-icons li {
	float: left;
	font-family: "Oswald", sans-serif; 
	font-weight: normal;
	text-transform:uppercase;
}
ul.social-icons, 
ul.social-icons li {margin: 0px; padding: 0px;}
ul.social-icons li a{
	display: block;
	width:33px; height:33px;
	text-indent: -9999px;
	background: url('../images/social-icons.png');
	margin-right: 10px;
}
ul.social-icons li a.twitter{background-position: 0px 0px;}
ul.social-icons li a.twitter:hover{background-position: 0px -33px;}
ul.social-icons li a.facebook{background-position: -40px 0px;}
ul.social-icons li a.facebook:hover{background-position: -40px -33px;}
ul.social-icons li a.dribbble{background-position: -80px 0px;}
ul.social-icons li a.dribbble:hover{background-position: -80px -33px;}
ul.social-icons li a.forrst{background-position: -120px 0px;}
ul.social-icons li a.forrst:hover{background-position: -120px -33px;}
ul.social-icons li a.behance{background-position: -160px 0px;}
ul.social-icons li a.behance:hover{background-position: -160px -33px;}
ul.social-icons li a.flickr{background-position: -200px 0px;}
ul.social-icons li a.flickr:hover{background-position: -200px -33px;}

/* Misc
================================================== */
.divider-black{
	background: url('../images/divider-black.png') no-repeat center; 
	height: 20px;
	margin:60px 0px;
}
.divider-white{
	background: url('../images/divider-white.png') no-repeat center; 
	height: 20px;
	margin:60px 0px;
}
.divider-tooth-down{
	width:100%;
	height: 5px;
	padding:0px; margin:0px;
	background:url('../images/tooth-divider-down.png') repeat-x;
}
.divider-tooth-up{
	width:100%;
	height: 5px;
	padding:0px; margin:0px;
	background:url('../images/tooth-divider-up.png') repeat-x;
}
#toTop {
	width:50px;
	height:50px;
	background:url('../images/back-top-btn.png') no-repeat;
	text-align:center;
	position:fixed;
	bottom:25px;
	right:20px;
	cursor:pointer;
	display:none;
	text-indent:-9999px;
	z-index:12; 
}

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.contact-section img {
			padding:0px;
			border:none;
		}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.portfolio-section li.four.columns{width:172px;}
		a.portfolio-thumb{width:172px; height:125px;}
		.portfolio-section li.four.columns img{width:166px; height: 119px;}
		.section-title{
			background: none;
			background-color: #242424;
		}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		h1 {font-size: 30px; line-height: 40px;}
		.subtitle {font-size: 18px;}
		h2 {font-size: 45px; line-height: 50px;}
		ul.navigation{width:290px;}
		ul.navigation li{
			background: none;
			padding: 0px 10px;
		}

		.portfolio-section li.four.columns{width:130px; margin-left:10px; margin-right:10px; margin-bottom:10px;}
		a.portfolio-thumb{width:130px; height:94px;}
		.portfolio-section li.four.columns img{width:124px; height: 89px;}

		.footer-right{text-align:left;}

		input[type="text"],
		input[type="password"],
		input[type="email"],
		select {width:290px;}

		.contact-section textarea {width:290px;}

		#toTop {visibility: hidden;}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.portfolio-section li.four.columns{width:190px; margin-left:10px; margin-right:10px; margin-bottom:10px;}
		a.portfolio-thumb{width:190px; height:137px;}
		.portfolio-section li.four.columns img{width:184px; height: 131px;}

		.section-title{
			background: none;
			background-color: #242424;
		}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}