/* 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

*/


/* ==================== 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: 'Archivo Narrow', sans-serif;
	font-size: 13px;
	text-align: center;
	text-transform: uppercase;
	font-style: italic;
	letter-spacing: 0.05em;

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

::-moz-selection {
 background: #1a1a1a;
 color: #ffffff;
}
/* ==================== 1.2 Typography ==================== */

p {
	font-size: 17px;
	line-height: 25px;
	margin-bottom: 25px;
	color: #1a1a1a;
}
h1, h2, h3, h4, h5, h6 {
	color: #1a1a1a;
	font-weight: 700;
	text-transform: uppercase;
	font-family: 'Archivo Black', sans-serif;
	font-style: italic;
	line-height: 75%;
	letter-spacing: -0.13em;

}
h1 {
	font-size: 30px;
	line-height: 36px;
}
h2 {
	font-size: 24px;
	line-height: 30px;
}
h3 {
	font-size: 16px;
	line-height: 20px;
}
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-style: italic;
	font-weight: 600;
	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: 0px;
	font-family: 'Archivo Black', sans-serif;
	font-style: italic;
	font-size: 200px;
	font-weight: 700;
	line-height: 66%;
	letter-spacing: -0.17em;
	text-shadow: 0px 2px 0px #9a9a9a,  0 1px 1px rgba(0,0,0,.1),  0 5px 5px rgba(0,0,0,.1),  0 3px 3px rgba(0,0,0,.1),  0 6px 6px rgba(0,0,0,.1),  0 10px 10px rgba(0,0,0,.1),  0 20px 20px rgba(0,0,0,.1),  0 80px 80px rgba(0,0,0,.1);
}
h1.hugetext {
	margin-bottom: 10px;
	font-size: 280px;
	font-weight: 700;
	line-height: 100%;
}
p.uppercase {
	font-size: 18px;
	margin-bottom: 0;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	text-shadow: 0 1px 1px rgba(0,0,0,.1),  0 5px 5px rgba(0,0,0,.1),  0 3px 3px rgba(0,0,0,.1),  0 6px 6px rgba(0,0,0,.1),  0 10px 10px rgba(0,0,0,.1),  0 20px 20px rgba(0,0,0,.1),  0 80px 80px rgba(0,0,0,.1);
}
/* ==================== 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;
}
/* ==================== 1.4 Buttons and Icons ==================== */

.button {
	color: #ffffff;
	background: #f85c37;
	display: inline-block;
	font-family: 'Archivo Black', sans-serif;
	font-size: 20px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: -1px;
	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,96,0,1.00);
	-moz-box-shadow: inset 0px 0px 100px rgba(255,208,0,0.8);
	-webkit-box-shadow: inset 0px 0px 100px rgba(255,96,0,1.00);
}
.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-small {
	margin-top: 10px!important;
}
.margin-top {
	margin-top: 25px!important;
}
.margin-bottom {
	margin-bottom: 65px!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: 580px;
}
.header-center {
	position: absolute;
	left: 50%;
	top: 75%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: inline-block;
	width: 90%;
}
/* 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:70%;
filter: alpha(opacity=0);
opacity: 0;
}
 to {
top:75%;
filter: alpha(opacity=100);
opacity: 1;
}
}
 @-webkit-keyframes fadeit {
 from {
top:70%;
filter: alpha(opacity=0);
opacity: 0;
}
 to {
top:75%;
filter: alpha(opacity=100);
opacity: 1;
}
}
/* Text ticker */
.text-ticker {
	width: 100%;
	height: 50px;
	margin: 0 auto;
	overflow: hidden;
	
}
.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;
	text-transform: uppercase;
	line-height: 50px;
	
	font-family: 'Archivo Black', sans-serif;
	font-style: italic;
	letter-spacing: -0.13em;

}
 @-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: 267px;
	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: 67px;
	background: #1a1a1a;
	width: 200px;
	height: 100%;
}
.menu-left .menu-wrap {
	left: 0!important;
}
.menu h1.logo a, .menu-left h1.logo a {
	font-family: 'Archivo Black', sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.12em;
	line-height: 30px;
	font-style: italic;
	text-transform: uppercase;
	color: #ffffff;
	margin-top: 0px;
	margin-bottom: 30px;
}
.menu h1.logo a:hover, .menu-left h1.logo a:hover {
	color: #f85c37;
}
.menu img.logo, .menu-left img.logo {
	margin-top: 30px;
	margin-right: 0;
	margin-left: 0;
	max-width: 160px;
}
.menu a, .menu-left a {
	margin-left: 20px;
	color: #808080;
	display: block;
	font-size: 23px;
	font-weight: 700;
	line-height: 40px;
	
	text-transform: uppercase;
	font-family: 'Archivo Black', sans-serif;
	font-style: italic;
	letter-spacing: -0.13em;

}
.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: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
}

.introduction h1 {
	font-family: 'Archivo Black', sans-serif;
	font-style: italic;
	font-size: 60px;
	font-weight: 700;
	line-height: 75%;
	letter-spacing: -0.13em;
}

/* ==================== 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(244,208,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(255,96,0,0.85);
	-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: 'eurostile', Georgia, Times, serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 15px;
	letter-spacing: 1px;
	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(0,0,0,1);
	-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: #212121;
	width: 100%;
	padding-bottom: 80px;
	padding-top: 80px;
}
.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;
}
.call-to-action h1{
	font-size: 45px;
	line-height: 75%;
}


/* ==================== 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-top: 10px;
	margin-right: 20px;
	margin-left: 20px;
	margin-bottom: 0;
}
.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: 21px;
	line-height: 25px;
	text-transform: uppercase;
	position: absolute;
	bottom: 25px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	
	font-weight: 700;
	font-family: 'Archivo Black', sans-serif;
	font-style: italic;
	letter-spacing: -0.13em;

}
.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 {

}
/* 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 Over Details ==================== */

.over-details {
	color: #ffffff;
	background: #f85c37;
	width: 100%;
	padding-top: 60px;
	padding-bottom: 105px;
}
.over-details .title hr {
	border: 1px solid #1a1a1a;
}
.over-details h2, .over-details h3, .over-details h4, .over-details h5, .over-details h6 {
	color: #ffffff;
}
.over-details h1, .over-details p {
	color: #1a1a1a;
}
.over-details h3 {
	margin-top: 0;
}
/* ==================== 3.5 Portfolio Gallery ==================== */

.portfolio-gallery {
	padding-top: 60px;
	padding-bottom: 60px;
	background: #333333;
}
/* ==================== 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);
}



/*-------- Video Section --------*/
.video-section {
	overflow: hidden;
	position: relative;
	filter: grayscale(100%)
}

.video-section .container {
	z-index: 32;
	position: relative;
    opacity: 1;
    filter: Alpha(Opacity=1);
}

.video-section .fullscreen-video {
	position: absolute;
	top: -50px;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 30;
}

.video-section video {
	min-width: 100% !important;
	height: auto;
	min-height: 100%;
}

.video-section .video-section-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 31;
}

.video-section.dark-section .video-section-mask {
	background: url(../images/overlays/dark.png) repeat rgba(0,0,0,.2);
}

.video-section.light-section .video-section-mask {
	background: url(../images/overlays/light.png) repeat rgba(255,255,255,0.7)
}

.video-section.light-section p {
	color: #444;
}




/* ==================== Slide section ==================== */

.image-slide {
	color: #ffffff;
	background: #212121;
	width: 100%;
}


























/* ==================== 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: 90%;
}
.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: 90%;
}
.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;
}
	
.introduction h1 {
	font-size: 40px;
}

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

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