/*
Document info
-------------------------------
Template name: Circular - Personal Portfolio Template
Author: QBKL Studio
Author URLs:
	- http://qbkl.net
	- http://themeforest.net/user/QBKL
	- http://www.facebook.com/QBKLstudio
	- http://twitter.com/QBKL

Accent color: #acacac
Fonts: Source Sans Pro

Table of contents
-------------------------------
1. General
2. Globals
   2.1. BXSlider
3. Header
   3.1. Navigation
4. Sections
   4.1. About
   4.2. Services
   4.3. Work
        4.3.1. Quotes
   4.4. Contact
5. Footer
6. Color Themes
7. Media Queries
*/

/* 1. General */

html, body {
	min-height: 100%;
	height: 100%;
}

body {
	border-top: 5px solid #acacac;
	background: #ffffff url(../img/dot.png) repeat-y top center;
	font-family: 'Source Sans Pro', Arial, Verdana, Tahoma, sans-serif;
	font-size: 14px;
	line-height: 1.4em;
	color: #444444;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	outline: 0;
	color: #000000;
	text-decoration: underline;
}

a:hover {
	color: #888888;
}

a img {
	border: 0;
}

*:focus {
    outline: 0;
}

/* 2. Globals */

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}

.centered {
	margin-left: auto;
	margin-right: auto;
	float: none;
}

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

.column > :first-child { margin-top: 0; }

.bullet, .inner-bullet {
	margin: 0 auto;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: #ffffff;
}

.bullet {
	width: 15px;
	height: 15px;
	border: 1px solid #bbbbbb;
}

.inner-bullet {
	width: 13px;
	height: 13px;
	border: 1px solid #ffffff;
}

.active-bullet .inner-bullet { background-color: #acacac; }

.highlight {
	background-color: #acacac;
	padding-left: 5px;
	padding-right: 5px;
}

/* 2.1. BXSlider */

.bx-wrapper {
	margin: 0 auto 40px;
}
.bx-wrapper .bx-viewport {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 0;
	left: 0;
	background: transparent;
}

.bx-wrapper .bx-pager {
	padding-top: 0;
	bottom: -40px;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background-color: #bbbbbb;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background-color: #acacac;
}

/* 3. Header */

#header {
	position: relative;
	width: 100%;
	height: 70%;
	background-color: #ffffff;
	background-image: url(../img/header.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#header .header-wrap {
	width: 100%;
	height: 100%;
	position: relative;
	margin: 0 auto;
	background: transparent url(../img/white-fade.png) repeat-x bottom center;
}

#site-logo {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 40%;
	text-align: center;
}

/* 3.1. Navigation */

#nav {
	position: absolute;
	left: 0;
	right: 0;
	border-bottom: 1px solid #bbbbbb;
	background-color: #ffffff;
}

#nav-sticky-wrapper.is-sticky #nav {
	bottom: auto;
	background-color: #ffffff;
	background-color: rgba(255, 255, 255, 0.9);
}

#nav ul {
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	text-align: center;
	position: relative;
	bottom: -8px;
	display: table;
}

#nav ul li {
	max-width: 200px;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: table-cell;
	min-width: 120px;
	padding: 5px 5px 0 5px;
}

#nav ul li a {
	display: block;
	text-align: center;
	text-decoration: none;
	line-height: 1em;
}

#nav ul li.current a {
	color: #888888;
}

#nav ul li a:hover .inner-bullet, #nav ul li.current .inner-bullet {
	background-color: #acacac;
}

#nav ul li a span {
	display: block;
	margin-bottom: 10px;
	line-height: 20px;
}

#nav ul li a i {
	display: none;
	margin-bottom: 10px;
	font-size: 1.5em;
	line-height: 20px;
}

/* 4. Sections */

.section {
	width: 100%;
	margin-top: 120px;
	background: #ffffff;
}

.section-content {
	display: block;
}
.section-content:before,
.section-content:after {
	content: " ";
	display: table;
}
.section-content:after {
	clear: both;
}

.section-header {
	margin-bottom: 50px;
}

.section-footer {
	margin-top: 50px;
}

.section-heading {
	margin: 80px 0 0 0;
	padding: 0 10px;
	font-size: 1.714em;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 3px;
	text-align: center;
	line-height: 1em;
	color: #000000;
}

.subheading {
	font-size: 1.143em;
	text-transform: uppercase;
	color: #000000;
}

/* 4.1. About */

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

.skills li {
	float: left;
	width: 100%;
	text-align: center;
	color: #000000;
	display: block;
}

.skill-pie {
	margin: 0 auto;
	font-size: 2.143em;
	font-weight: 300;
	height: 120px;
}

.skill h4 {
	font-size: 1.143em;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* 4.2. Services */

.service {
	display: table;
}

.service-icon {
	width: 65px;
	padding-right: 15px;
	display: table-cell;
	color: #ffffff;
	vertical-align: top;
}

.service-icon span {
	display: block;
	width: 65px;
	height: 65px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	font-size: 2.143em;
	line-height: 65px;
	text-align: center;
	background-color: #acacac;
}

.service-description {
	display: table-cell;
	vertical-align: top;
}

.service-description .subheading {
	margin: 0;
}

/* 4.3. Work */

.filters {
	display: block;
	margin: 0 0 15px 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

.filters li {
	color: #888888;
	display: inline-block;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

.filters li:hover, .filters li.active { color: #000000; }

.filters li:before {
	content: "\2022";
	padding: 0 10px;
	color: #acacac;
}

.filters li:first-child:before {
	content: "";
	padding: 0;
}

.project {
	opacity: 0;
    display: none;
	text-align: center;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.project-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 4px;
}

.project-wrap:hover {
	border-color: #acacac;
}

.project img {
	display: block;
	-webkit-filter: grayscale(100%);
	-moz-filter: 	grayscale(100%);
	-ms-filter: 	grayscale(100%);
	-o-filter: 		grayscale(100%);
	filter: 		none;
	;transition: all 0.3s ease-out;
}

.project img:hover {
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	filter: grayscale(0%);
	filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
	filter: gray; /* IE 6-9 */
	transition: all 0.3s ease-out;
}

.project a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #ffffff;
}

.project-overlay {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	padding-top: 40%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: transparent url(../img/bg-overlay.png);
}

.project a:hover .project-overlay {
	visibility: visible;
	opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.project-overlay span {
	display: inline-block;
	width: 30px;
	height: 30px;
	font-size: 1.286em;
	text-align: center;
	line-height: 30px;
	color: #ffffff;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #acacac;
}

.project-title {
	font-size: 1em;
	font-weight: 400;
	color: #ffffff;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* 4.3.1. Quotes */

.quotes {
	display: block;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

.quote {
	display: block;
	font-family: Georgia, serif;
	font-size: 1.286em;
	font-style: italic;
	line-height: 1.4em;
}

.quote-author {
	display: block;
	line-height: 1em;
	color: #000000;
	vertical-align: top;
}

.quote-author strong {
	text-transform: uppercase;
}

.quote-author i {
	margin-right: 10px;
	color: #acacac;
	vertical-align: middle;
}

/* 4.4 Contact */

form:before,
form:after {
	content: " ";
	display: table;
}

form:after {
	clear: both;
}

#form-contact {
	margin-bottom: -15px;
}

input[type="text"], textarea {
	font-family: inherit;
	font-size: 1em;
	font-style: italic;
	width: 96%;
	padding: 0 2%;
	height: 40px;
	line-height: 40px;
	font-size: 1em;
	background-color: #dddddd;
	border: 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	resize: none;
}

textarea {
	height: auto;
	line-height: 1.4em;
	padding: 2%;
}

label {
	font-size: 1.143em;
	display: block;
	text-transform: uppercase;
	margin: 10px 0;
	text-align: center;
}

label.error {
	margin: 10px 0 0 0;
	font-size: 0.750em;
	color: #e76270;
}

input.error, textarea.error {
	/*-webkit-box-shadow: inset 0px 0px 4px 3px rgba(231, 98, 112, 0.5);
	box-shadow: inset 0px 0px 4px 3px rgba(231, 98, 112, 0.5);*/
	background-color: #ffe0d5!important;
}

input#yenoh {
	width: 76px;
	text-align: center;
}

img#yenoh-pic {
	display: inline-block;
	vertical-align: bottom;
	margin: 0 10px 0 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#form-message {
	border: 1px solid #ccc;
	display: none;
	margin: 20px 0;
	padding: 10px 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.button {
	display: inline-block;
	color: #ffffff;
	background-color: #888888;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: none;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.15em;
	cursor: pointer;
}

.button:hover {
	color: #ffffff;
	background-color: #000000;
	-webkit-transition: background-color 200ms linear;
	-moz-transition: background-color 200ms linear;
	-o-transition: background-color 200ms linear;
	-ms-transition: background-color 200ms linear;
	transition: background-color 200ms linear;
}

.button-small {
	padding: 5px 10px;
	font-size: 0.875em;
}

.button-medium {
	padding: 10px 15px;
	font-size: 1em;
}

.button-large {
	padding: 15px 20px;
	font-size: 1.125em;
}

.submit-wrap { margin-top: 30px; }

#submit-contact, #submit-contact span {
	display: block;
	margin: 0 auto;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#submit-contact {
	width: 65px;
	height: 65px;
	text-align: center;
	color: #ffffff;
	border: 1px solid #bbbbbb;
	background: #ffffff;
}

#submit-contact span {
	width: 63px;
	height: 63px;
	font-size: 2em;
	line-height: 63px;
	text-align: center;
	border: 1px solid #ffffff;
	background-color: #acacac;
}

#submit-contact:hover span {
	background-color: #000000;
}

/* 5. Footer */

#footer {
	position: relative;
	margin-top: 80px;
	text-align: center;
	background-color: #ffffff;
}

.socials {
	margin: -7px 0 0 0;
	padding: 0;
	list-style-type: none;
}

.socials li {
	width: 35px;
	display: inline-block;
}

.socials li span {
	font-size: 1.286em;
	line-height: 50px;
}

.socials a {
	display: block;
}

.socials a:hover .inner-bullet {
	background-color: #acacac;
}

/* 5. Color Themes */

.theme-dark,
.theme-dark #header,
.theme-dark #nav,
.theme-dark .section,
.theme-dark #footer,
.theme-dark .bullet,
.theme-dark .inner-bullet { background-color: #111111; }
.theme-dark { background-image: url(../img/dot-dark.png); }
.theme-dark #submit-contact span,
.theme-dark .inner-bullet { border-color: #111111; }
.theme-dark .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-dark .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-dark .active-bullet .inner-bullet { background-color: #acacac; }
.theme-dark #nav-sticky-wrapper.is-sticky #nav  {
	background-color: #111111;
	background-color: rgba(17, 17, 17, 0.9);
}
.theme-dark { color: #aaaaaa; }
.theme-dark .section-heading,
.theme-dark .subheading,
.theme-dark .skills li,
.theme-dark .filters li:hover,
.theme-dark .filters li.active,
.theme-dark .quote-author,
.theme-dark a { color: #ffffff; }
.theme-dark a:hover, .theme-dark #nav li.current a { color: #888888; }
.theme-dark #header { background-image: url(../img/header-2.jpg); }
.theme-dark #header .header-wrap { background-image: url(../img/gray-fade.png); }
.theme-dark .highlight { color: #000000; }
.theme-dark .bullet,
.theme-dark #nav,
.theme-dark .project-wrap,
.theme-dark #submit-contact,
.theme-dark #footer { border-color: #444444; }
.theme-dark .project-wrap:hover { border-color: #acacac; }
.theme-dark .bx-wrapper .bx-pager.bx-default-pager a { background-color: #444444; }
.theme-dark #submit-contact span:hover,
.theme-dark .button:hover {
	color: #000000;
	background-color: #ffffff;
}

.theme-turquoise,
.theme-turquoise .project-wrap:hover { border-color: #1abc9c; }
.theme-turquoise .highlight { color: #ffffff; }
.theme-turquoise .highlight,
.theme-turquoise .active-bullet .inner-bullet,
.theme-turquoise .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-turquoise .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-turquoise #nav ul li a:hover .inner-bullet,
.theme-turquoise #nav ul li.current .inner-bullet,
.theme-turquoise .service-icon span,
.theme-turquoise .project-overlay span,
.theme-turquoise #submit-contact span,
.theme-turquoise .socials a:hover .inner-bullet { background-color: #1abc9c; }
.theme-turquoise .filters li:before,
.theme-turquoise .quote-author i { color: #1abc9c; }

.theme-emerald,
.theme-emerald .project-wrap:hover { border-color: #2ecc71; }
.theme-emerald .highlight { color: #ffffff; }
.theme-emerald .highlight,
.theme-emerald .active-bullet .inner-bullet,
.theme-emerald .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-emerald .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-emerald #nav ul li a:hover .inner-bullet,
.theme-emerald #nav ul li.current .inner-bullet,
.theme-emerald .service-icon span,
.theme-emerald .project-overlay span,
.theme-emerald #submit-contact span,
.theme-emerald .socials a:hover .inner-bullet { background-color: #2ecc71; }
.theme-emerald .filters li:before,
.theme-emerald .quote-author i { color: #2ecc71; }

.theme-river,
.theme-river .project-wrap:hover { border-color: #3498db; }
.theme-river .highlight { color: #ffffff; }
.theme-river .highlight,
.theme-river .active-bullet .inner-bullet,
.theme-river .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-river .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-river #nav ul li a:hover .inner-bullet,
.theme-river #nav ul li.current .inner-bullet,
.theme-river .service-icon span,
.theme-river .project-overlay span,
.theme-river #submit-contact span,
.theme-river .socials a:hover .inner-bullet { background-color: #3498db; }
.theme-river .filters li:before,
.theme-river .quote-author i { color: #3498db; }

.theme-amethyst,
.theme-amethyst .project-wrap:hover { border-color: #9b59b6; }
.theme-amethyst .highlight { color: #ffffff; }
.theme-amethyst .highlight,
.theme-amethyst .active-bullet .inner-bullet,
.theme-amethyst .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-amethyst .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-amethyst #nav ul li a:hover .inner-bullet,
.theme-amethyst #nav ul li.current .inner-bullet,
.theme-amethyst .service-icon span,
.theme-amethyst .project-overlay span,
.theme-amethyst #submit-contact span,
.theme-amethyst .socials a:hover .inner-bullet { background-color: #9b59b6; }
.theme-amethyst .filters li:before,
.theme-amethyst .quote-author i { color: #9b59b6; }

.theme-carrot,
.theme-carrot .project-wrap:hover { border-color: #e67e22; }
.theme-carrot .highlight { color: #ffffff; }
.theme-carrot .highlight,
.theme-carrot .active-bullet .inner-bullet,
.theme-carrot .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-carrot .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-carrot #nav ul li a:hover .inner-bullet,
.theme-carrot #nav ul li.current .inner-bullet,
.theme-carrot .service-icon span,
.theme-carrot .project-overlay span,
.theme-carrot #submit-contact span,
.theme-carrot .socials a:hover .inner-bullet { background-color: #e67e22; }
.theme-carrot .filters li:before,
.theme-carrot .quote-author i { color: #e67e22; }

.theme-alizarin,
.theme-alizarin .project-wrap:hover { border-color: #e74c3c; }
.theme-alizarin .highlight { color: #ffffff; }
.theme-alizarin .highlight,
.theme-alizarin .active-bullet .inner-bullet,
.theme-alizarin .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-alizarin .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-alizarin #nav ul li a:hover .inner-bullet,
.theme-alizarin #nav ul li.current .inner-bullet,
.theme-alizarin .service-icon span,
.theme-alizarin .project-overlay span,
.theme-alizarin #submit-contact span,
.theme-alizarin .socials a:hover .inner-bullet { background-color: #e74c3c; }
.theme-alizarin .filters li:before,
.theme-alizarin .quote-author i { color: #e74c3c; }

.theme-asphalt,
.theme-asphalt .project-wrap:hover { border-color: #34495e; }
.theme-asphalt .highlight { color: #ffffff; }
.theme-asphalt .highlight,
.theme-asphalt .active-bullet .inner-bullet,
.theme-asphalt .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-asphalt .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-asphalt #nav ul li a:hover .inner-bullet,
.theme-asphalt #nav ul li.current .inner-bullet,
.theme-asphalt .service-icon span,
.theme-asphalt .project-overlay span,
.theme-asphalt #submit-contact span,
.theme-asphalt .socials a:hover .inner-bullet { background-color: #34495e; }
.theme-asphalt .filters li:before,
.theme-asphalt .quote-author i { color: #34495e; }

/* 6. Media Queries */
@media screen and (max-width: 1024px) {
	#nav ul li { min-width: 90px; }
}

@media screen and (max-width: 768px) {
	#nav ul li { min-width: 70px; }
}

@media screen and (max-width: 640px) {
	.section { margin-top: 80px; }
	.section-header { margin-bottom: 30px; }
	.section-footer { margin-top: 30px; }
	.section-heading { font-size: 1.429em; margin-top: 50px; }
	#nav ul li { min-width: 50px; font-size: 0.875em; }
	.project { float: left; width: 50%; }
}

@media screen and (max-width: 480px) {
	#nav ul li { min-width: 44px; font-size: 0.875em; }
	.project-overlay {  }
	#nav ul li a i { display: inline-block; }
	#nav ul li a span { display: none; }
	.project-title { display: none; }
}