@import url(http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,700,800,900);
@import url(http://fonts.googleapis.com/css?family=Volkhov:400,400italic);

/* Table of contents

	Basics
	1.1 Basic Styling
	1.2 Typography
	1.3 Links
	1.4 Buttons and Icons
	1.5 Forms
	1.6 Other General Elements

	Main Page
	2.1 Navigation
	2.2 Home
	2.3 Introduction
	2.4 Services
	2.5 Process
	2.6 Portfolio
	2.7 Call to Action
	2.8 About Us
	2.9 About Me
	2.10 Resume
	2.11 Quote
	2.12 Contact

	Portfolio Detail Page
	3.1 Portfolio Header
	3.2 Portfolio Introduction
	3.3 Portfolio Images slider
	3.4 Portfolio Details
	3.5 Portfolio Gallery
	3.6 Portfolio Navigation

	Responsive Settings
	4.1 Tablet Portrait
	4.2 Mobile Landscape
	4.3 Mobile Portrait

	Modal


*/


/* ==================== 1.1 Basic Styling ==================== */

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	height: 100%;
	color: #5c5c5c;
	background: #ffffff;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 15px;
	text-align: center;
}

::selection {
	background: #1a1a1a;
	color: #ffffff;
}

::-moz-selection {
	background: #1a1a1a;
	color: #ffffff;
}


/* ==================== 1.2 Typography ==================== */

p {
	font-size: 15px;
	line-height: 25px;
	margin-bottom: 25px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #1a1a1a;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

h1 {
	font-size: 24px;
	line-height: 30px;
}

h2 {
	font-size: 24px;
	line-height: 30px;
}

h3 {
	font-size: 16px;
	line-height: 25px;
}

h4 {
	font-size: 15px;
	line-height: 25px;
}

h5 {
	font-size: 14px;
	line-height: 25px;
}

h6 {
	font-size: 12px;
	line-height: 25px;
}

h1.color,
h2.color,
h3.color,
h4.color,
h5.color,
h6.color,
p.color,
span.color {
	color: #f85c37;
}

h1.dark,
h2.dark,
h3.dark,
h4.dark,
h5.dark,
h6.dark,
p.dark,
span.dark {
	color: #1a1a1a;
}

h1.grey,
h2.grey,
h3.grey,
h4.grey,
h5.grey,
h6.grey,
p.grey,
span.grey {
	color: #c0c0c0;
}

h1.white,
h2.white,
h3.white,
h4.white,
h5.white,
h6.white,
p.white,
span.white {
	color: #ffffff;
}

a.normal,
span.normal {
	color: #1a1a1a;
}

b,
strong {
	font-weight: 900;
}

em {
	font-style: italic;
}

small {
	font-size: 80%;
}

ol,
ul {
	line-height: 25px;
	margin-bottom: 25px;
}

.script {
	font-family: 'Volkhov', Georgia, Times, serif;
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

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

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

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

h1.fittext {
	margin-bottom: 10px;
	font-size: 100px;
	font-weight: 700;
	line-height: 100%;
}

h1.hugetext {
	margin-bottom: 10px;
	font-size: 180px;
	font-weight: 700;
	line-height: 100%;
}

p.uppercase {
	font-size: 16px;
	margin-bottom: 0;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}


/* ==================== 1.3 Links ==================== */

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

a {
	color: #f85c37;
}

a:hover {
	color: #1a1a1a;
}

a.hovercolor:hover,
span.hovercolor:hover {
	color: #f85c37;
}

a img {
	text-decoration: none;
	vertical-align: bottom;
}

a.inverted {
	color: #1a1a1a;
}

a.inverted:hover {
	color: #f85c37;
}

.redbubble {
	color: #ff0000;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
/* ==================== 1.4 Buttons and Icons ==================== */

.button {
	color: #ffffff;
	background: #f85c37;
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 8px 14px 7px;
	border-radius: 0;
	margin: 25px 5px;
}

/* Need to change color to green */
.button.Green-border {
	color: #ffffff;
	background: #f85c37;
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 8px 14px 7px;
	border-radius: 0;
	margin: 25px 5px;
}


.button-large {
	color: #ffffff;
	background: #f85c37;
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 10px 18px 9px;
	border-radius: 0;
	margin: 25px 5px;
}

.button.border,
.button.white-border,
.button.dark-border {
	padding: 6px 12px 5px;
}

.button-large.border,
.button-large.white-border,
.button-large.dark-border {
	padding: 8px 16px 7px;
}

.button:hover,
.button-large:hover {
	color: #ffffff;
			box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	   -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	-webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
}

.button i.icon-left,
.button-large i.icon-left {
	margin-right: 8px;
}

.button i.icon-right,
.button-large i.icon-right {
	margin-left: 8px;
}

/* Fixing the broken box model for input / buttons */
input[type="button"].button,
input[type="submit"].button,
button.button {
	padding: 13px 14px 13px;
}

input[type="button"].button-large,
input[type="submit"].button-large,
button.button-large {
	padding: 13px 18px 12px;
}

input[type="button"].button.border,
input[type="button"].button.white-border,
input[type="button"].button.dark-border,
input[type="submit"].button.border,
input[type="submit"].button.white-border,
input[type="submit"].button.dark-border,
button.button.border,
button.button.white-border,
button.button.dark-border {
	padding: 11px 12px 11px;
}

input[type="button"].button-large.border,
input[type="button"].button-large.white-border,
input[type="button"].button-large.dark-border,
input[type="submit"].button-large.border,
input[type="submit"].button-large.white-border,
input[type="submit"].button-large.dark-border,
button.button-large.border,
button.button-large.white-border,
button.button-large.dark-border {
	padding: 11px 18px 10px;
}

/* Icons */
i.small-icon {
	color: #ffffff;
	background: #f85c37;
	display: inline-block;
	vertical-align: middle; 
	text-align: center;
	width: 24px;
	height: 24px;
	font-size: 14px;
	line-height: 24px;
	margin: 25px 2px;
	border-radius: 50%;
}

i.medium-icon {
	color: #ffffff;
	background: #f85c37;
	display: inline-block;
	vertical-align: middle; 
	text-align: center;
	width: 40px;
	height: 40px;
	font-size: 18px;
	line-height: 38px;
	margin: 25px 5px;
	border-radius: 50%;
}

i.column-icon {
	color: #ffffff;
	background: #f85c37;
	display: inline-block;
	vertical-align: middle; 
	text-align: center;
	width: 60px;
	height: 60px;
	font-size: 28px;
	line-height: 60px;
	border-radius: 50%;
	margin-bottom: 25px;
}

i.column-icon:hover {
	font-size: 36px;
}

/* Styling for Buttons and Icons */
.white-bg {
	background: #ffffff!important;
	color: #1a1a1a;
}

.white-bg:hover {
	color: #1a1a1a;
			box-shadow: inset 0px 0px 100px rgba(0,0,0,0.2);
	   -moz-box-shadow: inset 0px 0px 100px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0px 0px 100px rgba(0,0,0,0.2);
}

.dark-bg {
	background: #1a1a1a!important;
	color: #ffffff;
}

.dark-bg:hover {
	color: #ffffff;
			box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	   -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	-webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
}

.border {
	background: 0!important;
	color: #f85c37;
	border: 2px solid #f85c37;
}

.border:hover {
	color: #f85c37;
			box-shadow: inset 0px 0px 100px rgba(0,0,0,0.2);
	   -moz-box-shadow: inset 0px 0px 100px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0px 0px 100px rgba(0,0,0,0.2);
}

.white-border {
	background: 0!important;
	color: #ffffff;
	border: 2px solid #ffffff;
	outline: -2px;
}

.white-border:hover {
	color: #ffffff;
			box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	   -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	-webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
}

.dark-border {
	background: 0!important;
	color: #1a1a1a;
	border: 2px solid #1a1a1a;
}

.dark-border:hover {
	color: #1a1a1a;
			box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	   -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	-webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
}


/* ==================== 1.5 Forms ==================== */

form {
	margin: 0;
	padding: 0;
	display: block;
}

input[type=text],
input[type=url],
input[type=tel],
input[type=number],
input[type=email],
textarea {
	width: 100%;
	height: 40px;
	display: block;
	border: 2px solid #ffffff;
	background: #ffffff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	padding-left: 6px;
	border-radius: 0;
	margin: 0 0 10px 0;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

textarea {
	padding-top: 9px;
	overflow: auto;
	vertical-align: top;
	resize: none;
}

.placeholder {
	color: #808080;
}

:-moz-placeholder {
	color: #808080;
}

::-moz-placeholder {
	color: #808080;
}

:-ms-input-placeholder {
	color: #808080;
}

::-webkit-input-placeholder {
	color: #808080;
}

input:focus,
textarea:focus {
	border-color: #c0c0c0;
	outline: 0;
	color: #1a1a1a;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

input.error,
textarea.error {
	border-color: #e53a2e;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}


/* ==================== 1.6 Other General Elements ==================== */

hr {
	border-top: 1px solid #c0c0c0;
	border-right: 0;
	border-bottom: 1px solid #c0c0c0;
	border-left: 0;
	margin: 60px 0;
}

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

.image-center {
	margin: 0 auto;
	text-align: center;
}

.image-circle {
	border-radius: 50%;
}

.column-border {
	border-left: 2px solid #d6d6d6;
	padding-left: 20px;
}

/* More control over margins */
.margin {
	margin-top: 25px!important;
	margin-bottom: 25px!important;
}
.margin-top {
	margin-top: 25px!important;
}

.margin-bottom {
	margin-bottom: 25px!important;
}

.no-margin {
	margin: 0!important;
}

.no-margin-top {
	margin-top: 0!important;
}

.no-margin-bottom {
	margin-bottom: 0!important;
}

/* Title settings */
.title h1 {
	font-size: 14px;
	color: #c0c0c0;
}

.title hr {
	width: 60px;
	margin: 20px auto 30px;
	border: 1px solid #c0c0c0;
}

/* Headers */
.header {
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center bottom;
	width: 100%;
	height: 480px;
}

.header-inherited {
	position: inherited;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	width: 100%;
	height: 480px;
}

.header-center {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	display: inline-block;
	width: 780px;
}

/* Animation of the content inside the header */
.header-center.fade-in {
	zoom: 1;
	animation: fadeit 1s ease-out forwards;
	animation-iteration-count: 1;
	-webkit-animation: fadeit 1s;
	-webkit-animation-iteration-count: 1;
}

@keyframes fadeit {
	from { top:46%; filter: alpha(opacity=0); opacity: 0; }
	to { top:50%; filter: alpha(opacity=100); opacity: 1; }
}

@-webkit-keyframes fadeit
{
	from { top:46%; filter: alpha(opacity=0); opacity: 0; }
	to { top:50%; filter: alpha(opacity=100); opacity: 1; }
}

/* Text ticker */
.text-ticker {
	width: 100%;
	height: 50px;
	margin: 0 auto;
	overflow: hidden;
	position: absolute;
	top: 40%;
}

.text-ticker ul {
	-webkit-animation: ticker 5s cubic-bezier(1, 0, .5, 0) infinite;
	   -moz-animation: ticker 5s cubic-bezier(1, 0, .5, 0) infinite;
		-ms-animation: ticker 5s cubic-bezier(1, 0, .5, 0) infinite;
			animation: ticker 5s cubic-bezier(1, 0, .5, 0) infinite;
}

/* Uncomment this if you want to pause the text on hover 
.text-ticker ul:hover {
	-webkit-animation-play-state: paused;
	   -moz-animation-play-state: paused;
		-ms-animation-play-state: paused;
			animation-play-state: paused;
}*/

.text-ticker li {
	font-weight: 700;
	color: #ffffff;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 50px;
}

@-webkit-keyframes ticker {
	0% {margin-top: 0;}
	20% {margin-top: -50px;}
	40% {margin-top: -100px;}
	60% {margin-top: -150px;}
	80% {margin-top: -200px;}
	100% {margin-top: 0;}
}

@-moz-keyframes ticker {
	0% {margin-top: 0;}
	20% {margin-top: -50px;}
	40% {margin-top: -100px;}
	60% {margin-top: -150px;}
	80% {margin-top: -200px;}
	100% {margin-top: 0;}
}

@-ms-keyframes ticker {
	0% {margin-top: 0;}
	20% {margin-top: -50px;}
	40% {margin-top: -100px;}
	60% {margin-top: -150px;}
	80% {margin-top: -200px;}
	100% {margin-top: 0;}
}

@keyframes ticker {
	0% {margin-top: 0;}
	20% {margin-top: -50px;}
	40% {margin-top: -100px;}
	60% {margin-top: -150px;}
	80% {margin-top: -200px;}
	100% {margin-top: 0;}
}

/* Smooth hovers */
a,
a:hover,
i,
i:hover,
a img,
a img:hover,
input[type="button"],
input[type="submit"],
button {
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

a i,
a i:hover {
	-webkit-transition: none;
	   -moz-transition: none;
		-ms-transition: none;
		 -o-transition: none;
			transition: none;
}

/* Pace loading bar */
.business .pace .pace-progress {
	background: #f85c37;
	position: fixed;
	z-index: 2000;
	top: 0;
	left: 0;
	height: 3px;

	-webkit-transition: width 1s;
	-moz-transition: width 1s;
	-o-transition: width 1s;
	transition: width 1s;
}

.personal .pace .pace-progress {
	background: #3CAEC3;
	position: fixed;
	z-index: 2000;
	top: 0;
	left: 0;
	height: 3px;

	-webkit-transition: width 1s;
	-moz-transition: width 1s;
	-o-transition: width 1s;
	transition: width 1s;
}

.pace-inactive {
	display: none;
}

/* SoundCloud iframe popup */
.soundcloud-popup .mfp-iframe {
	height: 182px;
}


/* ==================== 2.1 Navigation ==================== */

.menu {
	position: fixed;
	right: -200px;
	width: 260px;
	height: 100%;
	top: 0;
	z-index: 10;
	text-align: left;
}

.menu-left {
	position: fixed;
	left: -200px;
	width: 260px;
	height: 100%;
	top: 0;
	z-index: 10;
	text-align: left;
}

.menu.menu-open {
	right: 0px;
}

.menu-left.menu-open {
	left: 0px;
}

.menu-wrap {
	position: absolute;
	top: 0;
	left: 60px;
	background: #1a1a1a;
	width: 200px;
	height: 100%;
}

.menu-left .menu-wrap {
	left: 0!important;
}

.menu h1.logo a,
.menu-left h1.logo a {
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.15em;
	line-height: 40px;
	text-transform: uppercase;
	color: #ffffff;
	margin-top: 20px;
}

.menu h1.logo a:hover,
.menu-left h1.logo a:hover {
	color: #f85c37;
}

.menu img.logo,
.menu-left img.logo {
	margin: 20px 0;
	max-width: 160px;
}

.menu a,
.menu-left a  {
	margin-left: 20px;
	color: #808080;
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.menu a:hover,
.menu-left a:hover {
	color: #ffffff;
}

.menu a:active,
.menu-left a:active {
	color: #ffffff;
}

.menu a > i,
.menu-left a > i  {
	float: left;
	display: inline-block;
	vertical-align: middle; 
	text-align: left;
	width: 25px;
	font-size: 14px;
	line-height: 40px;
	margin: 25px 2px;
}

.menu-left .menu-close {
	display: none;
}

.menu-close,
.menu-close-left {
	cursor: pointer;
	display: block;
	position: absolute;
	font-size: 14px;
	color: #808080;
	width: 40px;
	height: 40px;
	line-height: 40px;
	top: 20px;
	right: 5px;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

.menu-close:hover,
.menu-close-left:hover {
	color: #ffffff;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

/* Push the body after clicking the menu button */
.body-push {
	overflow-x: hidden;
	position: relative;
	left: 0;
}

.body-push-toright {
	left: 200px;
}

.body-push-toleft {
	left: -200px;
}

.menu,
.menu-left,
.body-push {
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
		-ms-transition: all .3s ease;
		 -o-transition: all .3s ease;
			transition: all .3s ease;
}

#menuToggle {
	position: absolute;
	top: 20px;
	left: 0;
	z-index: 11;
	display: block;
	text-align: center;
	font-size: 14px;
	color: #ffffff;
	width: 40px;
	height: 40px;
	line-height: 40px;
	cursor: pointer;
	background: rgba(0,0,0,0.25);
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

#menuToggleLeft {
	position: absolute;
	top: 20px;
	right: 0;
	z-index: 11;
	display: block;
	text-align: center;
	font-size: 14px;
	color: #ffffff;
	width: 40px;
	height: 40px;
	line-height: 40px;
	cursor: pointer;
	background: rgba(0,0,0,0.25);
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

#menuToggle:hover,
#menuToggleLeft:hover {
	color: #ffffff;
	background: rgba(0,0,0,0.2);
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}


/* ==================== 2.2 Home ==================== */

/* Slides css */
#slides {
	position: relative;
}

#slides .slides-container {
	/*display: none;*/
	margin: 0;
}

#slides .scrollable {
	*zoom: 1;
	position: relative;
	top: 0;
	left: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	height: 100%;
}

#slides .scrollable:after {
	content: "";
	display: table;
	clear: both;
}

/* Slides navigation arrows */
.slides-navigation {
	margin: 0 auto;
	position: absolute;
	z-index: 21;
	width: 100%;
}

.slides-navigation a {
	position: absolute;
	font-size: 28px;
	line-height: 28px;
	bottom: 21px;
	color: #ffffff;
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: 0.5;
}

.slides-navigation a.prev {
	left: 20px;
}

.slides-navigation a.next {
	right: 20px;
}

.slides-navigation a.prev:hover,
.slides-navigation a.next:hover {
	filter: alpha(opacity=100);
	opacity: 1;
}

/* Slides pagination indicators */
.slides-pagination {
	position: absolute;
	z-index: 20;
	bottom: 30px;
	text-align: center;
	width: 100%;
}

.slides-pagination a {
	color: #ffffff;
	background: #ffffff;
	filter: alpha(opacity=50);
	opacity: 0.5;
	width: 30px;
	height: 4px;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
	*vertical-align: auto;
	zoom: 1;
	*display: inline;
	margin: 2px;
	overflow: hidden;
	text-indent: -100%;
}

.slides-pagination a:hover,
.slides-pagination a.current {
	filter: alpha(opacity=100);
	opacity: 1;
}

/* Fullscreen fixed background */
.fullscreen-image {
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	width: 100%;
	height: 100%;
}


/* ==================== 2.3 Introduction ==================== */

.introduction {
	background: #ffffff;
	width: 100%;
	padding-top: 60px;
	padding-bottom: 80px;
}


/* ==================== 2.4 Services ==================== */

.services {
	padding-top: 60px;
	padding-bottom: 80px;
	background: #f7f7f7;
}

/* Services slider */
#services-slider .servicesLink {
	zoom: 1;
	visibility: visible!important;
	filter: alpha(opacity=100);
	opacity: 1!important;
}

/* Arrow controls */
.services-arrow-prev,
.services-arrow-next {
	display: block;
	width: 40px;
	height: 40px;
	color: #ffffff;
	background: #f85c37;
	font-size: 28px;
	line-height: 38px;
	position: absolute;
	bottom: 44%;
	z-index: 24;
}

.services-arrow-prev {
	text-indent: -2px;
	left: 0;
}

.services-arrow-next {
	text-indent: 2px;
	right: 0;
}

.services-arrow-prev:hover,
.services-arrow-next:hover {
	color: #ffffff;
	-webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	   -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
			box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
}

/* Circle controls */
.services-buttons {
	margin: 0 auto;
}

.services-buttons a {
	display: inline-block;
	vertical-align: middle; 
	text-align: center;
	width: 140px;
	height: 140px;
	font-size: 56px;
	line-height: 136px;
	margin: 20px 10px;
	color: #c0c0c0;
	border: 2px solid #c0c0c0;
	border-radius: 50%;
}

.services-buttons a i {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	width: 140px;
	height: 140px;
	line-height: 136px;
	margin-bottom: 15px;
}

.services-buttons a:hover {
	font-size: 70px;
}

.services-buttons a.current {
	color: #f85c37;
	border: 2px solid #f85c37;
}


/* ==================== 2.5 Process ==================== */

.process {
	color: #ffffff;
	background: #f85c37;
	width: 100%;
	padding-top: 60px;
	padding-bottom: 105px;
}

.process .title hr {
	border: 1px solid #ffffff;
}

.process h1,
.process h2,
.process h3,
.process h4,
.process h5,
.process h6,
.process p {
	color: #ffffff;
}

.process h3 {
	margin-top: 0;
}

.process p {
	font-size: 13px;
	margin-bottom: 0;
}

i.process-icon {
	display: inline-block;
	vertical-align: middle; 
	text-align: center;
	width: 140px;
	height: 140px;
	font-size: 56px;
	line-height: 136px;
	margin-top: 35px;
	margin-bottom: 15px;
	color: #ffffff;
	border: 2px solid #ffffff;
	border-radius: 50%;
}

i.process-icon:hover {
	font-size: 70px;
}


/* ==================== 2.6 Portfolio ==================== */

.portfolio {
	padding-top: 60px;
	padding-bottom: 80px;
}

/* Styles for the textual navigation */
a.filter {
	cursor: pointer;
	color: #1a1a1a;
}

a.filter.active {
	color: #f85c37;
}

a.filter.light {
	color: #c0c0c0;
}

a.filter.light.active {
	color: #c0c0c0;
}

a.filter:hover,
a.filter.light:hover {
	color: #f85c37;
}

[data-filter="all"],
.filtered [data-filter="all"].active {
	display: none;
}

.filtered [data-filter="all"] {
	display: inline;
}

/* Portfolio items */
#portfolio-grid .mix{
	zoom: 1;
	filter: alpha(opacity=0);
	opacity: 0;
	display: none;
}

.project-item {
	position: relative;
	color: #ffffff;
	line-height: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		 -o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

.project-hover {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: rgba(255,255,255,0.0);
	background: rgba(0,0,0,0.0);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 20px;
	text-transform: uppercase;
	visibility: visible;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		 -o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

.project-item a:hover > .project-hover {
	color: rgba(255,255,255,1);
	background: rgba(0,0,0,0.5);
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		 -o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

.project-hover span {
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
}

.project-hover b {
	color: rgba(255,255,255,0.0);
	font-family: 'Volkhov', Georgia, Times, serif;
	font-size: 14px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0;
	text-transform: none;
	padding-top: 0;
	display: inline-block;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		 -o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

.project-hover span.plus {
	font-size: 120px;
	font-weight: 100;
}

.project-item a:hover > .project-hover b {
	color: rgba(255,255,255,0.5);
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		 -o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

/* ==================== 2.7 Call to Action ==================== */

.call-to-action {
	color: #ffffff;
	background: #f85c37;
	width: 100%;
	padding-top: 60px;
	padding-bottom: 60px;
}

.call-to-action h1,
.call-to-action h2,
.call-to-action h3,
.call-to-action h4,
.call-to-action h5,
.call-to-action h6 {
	color: #ffffff;
}

.call-to-action p,
.call-to-action .button,
.call-to-action .button-large {
	margin-bottom: 0;
}


/* ==================== 2.8 About Us ==================== */

.about-us {
	background: #f7f7f7;
	width: 100%;
	padding-top: 0px;
	padding-bottom: 80px;
}

.about-us .header {
	margin-bottom: 50px;
}

/* Avatars */
.row.avatars {
	margin: 25px auto;
}

.avatars > .columns {
	margin-bottom: 20px;
	background: #ffffff;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

.avatars > .columns:hover {
	margin-top: -25px;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

.avatars img {
	margin-bottom: 10px;
}

.avatars p.script {
	font-size: 14px;
	line-height: 20px;
	color: grey;
	margin: 0 20px;
}

.avatars p {
	font-size: 13px;
	line-height: 20px;
	margin: 0 20px;
}

.avatars i {
	color: #ffffff;
	background: #c0c0c0;
}

.avatars i:hover {
	background: #f85c37;
}


/* ==================== 2.9 About Me ==================== */

.about-me {
	padding-top: 0;
	padding-bottom: 80px;
}

.about-me .header {
	margin-bottom: 50px;
}

.avatar-about-me {
	margin-bottom: 25px;
}


/* ==================== 2.10 Resume ==================== */

.resume {
	background: #f7f7f7;
	width: 100%;
	padding-top: 60px;
	padding-bottom: 80px;
}

.resume h1,
.resume h2,
.resume h3,
.resume h4,
.resume h5,
.resume h6 {
	margin-top: 25px;
}

.resume .title h1,
.resume .title h2 {
	margin-top: 0;
}

h1.years,
h2.years,
h3.years,
h4.years,
h5.years,
h6.years {
	font-size: 24px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 25px;
	color: #c0c0c0;
	margin-top: 22px;
}


/* ==================== 2.11 Quote ==================== */

.quote {
	color: #c0c0c0;
	background: #333333;
	width: 100%;
	padding-top: 40px;
	padding-bottom: 50px;
}

.quote p.quote-symbol {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120px;
	line-height: 120px;
	font-weight: 400;
	color: #595959;
	margin-bottom: -80px!important;
}

.quote h1,
.quote h2,
.quote h3,
.quote h4,
.quote h5,
.quote h6 {
	font-size: 24px;
	font-weight: 700;
	color: #c0c0c0;
	letter-spacing: 0.1em;
	line-height: 30px;
	text-transform: uppercase;
	margin-top: 15px;
}

.quote p {
	color: #808080;
}

i.rating {
	font-size: 14px;
	line-height: 40px;
	color: #f7b736;
}

/* Arrow controls */
.quote-arrow-prev,
.quote-arrow-next {
	display: block;
	width: 40px;
	height: 40px;
	color: #ffffff;
	background: #f85c37;
	font-size: 28px;
	line-height: 38px;
	position: absolute;
	bottom: 46%;
	z-index: 211;
}

.quote-arrow-prev {
	text-indent: -2px;
	left: 0;
}

.quote-arrow-next {
	text-indent: 2px;
	right: 0;
}

.quote-arrow-prev:hover,
.quote-arrow-next:hover {
	color: #ffffff;
			box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	   -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	-webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
}


/* ==================== 2.12 Contact ==================== */

.contact {
	color: #ffffff;
}

.contact .header-inherited {
	padding-top: 80px;
}

.contact h1,
.contact h2,
.contact h3,
.contact h4,
.contact h5,
.contact h6,
.contact p,
.contact a {
	color: #ffffff;
	margin-top: 0;
	margin-bottom: 0;
}

.contact a {
	color: #ffffff;
}

.contact a:hover {
	color: #f85c37;
}

.contact p.script {
	font-size: 14px;
}

a.contactLink {
	cursor: pointer;
	margin: 0;
}

/* Contact form */
.contact-form textarea {
	height: 140px;
	float: none;
}

.contact-form .form-column {
	width: 300px;
	float: left;
}

.contact-form .form-column:first-child {
	margin-right: 20px;
}

/* Credits and back to top button */
.contact-bottom {
	position: relative;
}

.credit {
	color: #ffffff;
	font-size: 11px;
	line-height: 25px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	position: absolute;
	bottom: 25px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

.credit a {
	color: #ffffff;
}

.credit a:hover {
	color: #f85c37;
}

.back-to-top {
	display: block;
	width: 40px;
	height: 40px;
	color: #ffffff;
	background: #f85c37;
	font-size: 28px;
	line-height: 38px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.back-to-top:hover {
	color: #ffffff!important;
			box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	   -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	-webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
}

.modal {
	width: 460px;
	background: #fff;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -230px;
	z-index: 1000;
	-webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2);
	border: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 40px 0 70px 0;
	text-align: center;
	height: 228px;
	margin-top: -114px;
	display: none;
}

.modal h1 {
	margin: 0 0 30px 0;
	color: #333333;
}

.modal p {
	margin-bottom: 8px;
	line-height: 16px;
	font-size: 16px;
}

.modal p.modal-close {
	color: #b2b2b2;
	cursor: pointer;
}

.modal p.modal-close:hover {
	color: #333;
}

.modal-overlay {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999;
	display: none;
}

#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #212121;
	color: #fff;
	z-index: 1999;
}

#loader p {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-align: center;
	text-transform: uppercase;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -11px 0 0 -40px;
}

#loader img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
	zoom: 1;
	animation: loader 2s linear;
	animation-iteration-count: infinite;
	-webkit-animation: loader 2s linear;
	-webkit-animation-iteration-count: infinite;
}

@keyframes loader {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@-webkit-keyframes loader
{
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}


/* ==================== 3.1 Portfolio Header ==================== */

/* Special settings here */


/* ==================== 3.2 Portfolio Introduction ==================== */

.portfolio-introduction {
	padding-top: 60px;
	padding-bottom: 80px;
}

.projectdata-ul {
	display: inline-block;
	color: #c0c0c0;
	text-align: left;
}

.projectdata-ul i {
	margin-left: -0.5em;
}

.projectdata-ul a {
	color: #c0c0c0;
}

.projectdata-ul a:hover {
	color: #1a1a1a;
}


/* ==================== 3.3 Portfolio Images Slider ==================== */

.portfolio-images {
	background: #f7f7f7;
	width: 100%;
	padding-top: 60px;
	padding-bottom: 60px;
}

#portfolio-slider ul li {
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}

/* Arrow controls */
.portfolio-arrow-prev,
.portfolio-arrow-next {
	display: block;
	width: 40px;
	height: 40px;
	color: #ffffff;
	background: #f85c37;
	font-size: 28px;
	line-height: 38px;
	position: absolute;
	bottom: 50%;
	z-index: 33;
}

.portfolio-arrow-prev {
	text-indent: -2px;
	left: 0;
}

.portfolio-arrow-next {
	text-indent: 2px;
	right: 0;
}

.portfolio-arrow-prev:hover,
.portfolio-arrow-next:hover {
	color: #ffffff;
			box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	   -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	-webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
}

/* Indicators below the slider */
ol.controls {
	line-height: 0;
	margin-bottom: 0;
}

ol.controls li {
	text-indent: -9999em;
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 10px 3px 0;
	background: #c0c0c0;
	cursor: pointer;
}

ol.controls li.current {
	background: #f85c37;
}


/* ==================== 3.4 Portfolio Details ==================== */

.portfolio-details {
	padding-top: 60px;
	padding-bottom: 60px;
}


/* ==================== 3.5 Portfolio Gallery ==================== */

.portfolio-gallery {
	padding-top: 60px;
	padding-bottom: 60px;
	background: #f7f7f7;
}


/* ==================== 3.6 Portfolio Navigation ==================== */

.portfolio-navigation {
	position: relative;
	padding-top: 40px;
	padding-bottom: 80px;
	background: #333333;
}

p.back-to-projects,
p.prev-project,
p.next-project {
	position: absolute;
	z-index: 35;
}

p.back-to-projects {
	left: 50%;
	margin-left: -20px;
}

p.prev-project {
	left: 0;
}

p.next-project {
	right: 0;
}

p.prev-project span,
p.next-project span {
	font-size: 16px;
	vertical-align: text-bottom;
	color: #c0c0c0;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

p.prev-project span:hover,
p.next-project span:hover {
	color: #ffffff;
}

.back-to-projects i,
.prev-project i,
.next-project i {
	display: inline-block;
	width: 40px;
	height: 40px;
	color: #c0c0c0;
	background: #444444;
	font-size: 28px;
}

.back-to-projects i {
	font-size: 14px;
	line-height: 40px;
}

.prev-project i {
	text-indent: -2px;
	left: 0;
	margin-right: 10px;
	line-height: 38px;
}

.next-project i {
	text-indent: 2px;
	right: 0;
	margin-left: 10px;
	line-height: 38px;
}

.back-to-projects i:hover,
.prev-project i:hover,
.next-project i:hover {
	color: #ffffff;
			box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	   -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
	-webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2);
}


/* ==================== 4.1 Tablet Portrait ==================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {

	i.column-icon {
		width: 40px;
		height: 40px;
		font-size: 20px;
		line-height: 40px;
	}

	i.column-icon:hover {
		font-size: 24px;
	}

	.header-center {
		width: 580px;
	}

	.avatars > .columns:hover {
		margin-top: 0;
	}

	.contact-form .form-column {
		width: 220px;
	}

}


/* ==================== 4.2 Mobile Landscape ==================== */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	.fullscreen-image,
	.header,
	.header-inherited	{
		background-attachment: scroll;
	}

	.text-left,
	.text-right {
		text-align: center;
	}

	.column-border {
		border-left: 0;
		padding-left: 0;
	}

	.header-center {
		width: 390px;
	}
	
	.services-arrow-prev,
	.services-arrow-next {
		bottom: -80px;
	}

	.services-arrow-prev {
		left: 0;
	}

	.services-arrow-next {
		right: 0;
	}

	.services-buttons a {
		width: 80px;
		height: 80px;
		font-size: 30px;
		line-height: 78px;
		margin: 20px 5px;
	}

	.services-buttons a i {
		width: 80px;
		height: 80px;
		line-height: 80px;
	}

	.services-buttons a:hover {
		font-size: 40px;
	}

	.project-item {
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.avatars > .columns {
		margin-bottom: 10px;
	}

	.avatars > .columns:hover {
		margin-top: 0;
	}

	.quote-arrow-prev,
	.quote-arrow-next {
		bottom: 30px;
	}
	
	.quote-arrow-prev {
		left: 140px;
	}
	
	.quote-arrow-next {
		right: 140px;
	}

	.contact-form .form-column {
		width: 230px;
	}

	.contact-form .form-column:first-child {
		margin-right: 10px;
	}
	
	.portfolio-images {
		padding-top: 60px;
		padding-bottom: 100px;
	}
	
	.portfolio-arrow-prev,
	.portfolio-arrow-next {
		bottom: -42px;
	}

	.portfolio-arrow-prev {
		left: 195px;
	}

	.portfolio-arrow-next {
		right: 195px;
	}

	ol.controls li {
		display: none;
	}
	
	p.back-to-projects span,
	p.prev-project span,
	p.next-project span {
		display: none;
	}
	
	p.prev-project{
		left: 170px;
		margin-right: 0;
	}

	p.next-project {
		right: 170px;
		margin-left: 0;
	}

}


/* ==================== 4.3 Mobile Portrait ==================== */

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

	.fullscreen-image,
	.header,
	.header-inherited	{
		background-attachment: scroll;
	}

	.text-left,
	.text-right {
		text-align: center;
	}

	.column-border {
		border-left: 0;
		padding-left: 0;
	}

	.header-center {
		width: 300px;
	}
	
	.services {
		padding-bottom: 100px;
	}
	
	.services-arrow-prev,
	.services-arrow-next {
		bottom: -40px;
	}

	.services-arrow-prev {
		left: 105px;
	}

	.services-arrow-next {
		right: 105px;
	}

	.services-buttons {
		display: none;
	}

	.project-item {
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.avatars > .columns {
		margin-bottom: 10px;
	}

	.avatars > .columns:hover {
		margin-top: 0;
	}

	.quote-arrow-prev,
	.quote-arrow-next {
		bottom: 30px;
	}
	
	.quote-arrow-prev {
		left: 50px;
	}
	
	.quote-arrow-next {
		right: 50px;
	}

	.contact .header-inherited {
		height: 600px;
	}

	.contact-form .form-column {
		width: 300px;
	}

	.contact-form .form-column:first-child {
		margin-right: 0;
	}
	
	.portfolio-images {
		padding-top: 60px;
		padding-bottom: 100px;
	}
	
	.portfolio-arrow-prev,
	.portfolio-arrow-next {
		bottom: -42px;
	}

	.portfolio-arrow-prev {
		left: 105px;
	}

	.portfolio-arrow-next {
		right: 105px;
	}

	ol.controls li {
		display: none;
	}
	
	p.back-to-projects span,
	p.prev-project span,
	p.next-project span {
		display: none;
	}
	
	p.prev-project{
		left: 80px;
		margin-right: 0;
	}

	p.next-project {
		right: 80px;
		margin-left: 0;
	}

}


/* ==================== 4.4 Modernizr-Assisted Fixes ==================== */

html.touch .fullscreen-image,
html.touch .header,
html.touch .header-inherited {
	background-attachment: scroll;
}