@font-face {
  font-family: 'font-obb';
  src: url('font/font-obb.eot?85716877');
  src: url('font/font-obb.eot?85716877#iefix') format('embedded-opentype'),
       url('font/font-obb.woff?85716877') format('woff'),
       url('font/font-obb.ttf?85716877') format('truetype'),
       url('font/font-obb.svg?85716877#font-obb') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'font-obb';
    src: url('font/font-obb.svg?85716877#font-obb') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "font-obb";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-paper-plane:before { content: '\e800'; } /* '' */
.icon-coffee:before { content: '\e801'; } /* '' */
.icon-desktop:before { content: '\e802'; } /* '' */
.icon-smile:before { content: '\e803'; } /* '' */
.icon-facebook-1:before { content: '\e804'; } /* '' */
.icon-gplus:before { content: '\e805'; } /* '' */
.icon-linkedin-squared:before { content: '\e806'; } /* '' */
.icon-pinterest-circled:before { content: '\e807'; } /* '' */
.icon-up-open:before { content: '\e808'; } /* '' */
.icon-play:before { content: '\e809'; } /* '' */
.icon-twitter-1:before { content: '\e80a'; } /* '' */
.icon-menu:before { content: '\e80b'; } /* '' */
.icon-sort-name-up:before { content: '\e80c'; } /* '' */
.icon-barcode:before { content: '\e80d'; } /* '' */
.icon-newspaper:before { content: '\e80e'; } /* '' */
.icon-list-numbered:before { content: '\e80f'; } /* '' */
.icon-list-alt:before { content: '\e810'; } /* '' */
.icon-upload:before { content: '\e811'; } /* '' */
.icon-upload-1:before { content: '\e812'; } /* '' */
.icon-resize-small:before { content: '\e813'; } /* '' */
.icon-resize-full:before { content: '\e814'; } /* '' */
.icon-left-big:before { content: '\e815'; } /* '' */
.icon-right-hand:before { content: '\e816'; } /* '' */
.icon-up-big:before { content: '\e817'; } /* '' */
.icon-login:before { content: '\e818'; } /* '' */
.icon-clipboard:before { content: '\e819'; } /* '' */
.icon-search:before { content: '\e81a'; } /* '' */
.icon-clock:before { content: '\e81b'; } /* '' *//*

	Base.css
	
	01. Reset
	02. Other basic parts
	03. Forms
	04. Media
	05. Grid
	06. Positioning and spacing

*/


/* === 01. Reset === */
html, body { height: 100%; min-height: 100%; }
body { overflow-x: hidden; padding: 0; }
body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
* { margin: 0; padding: 0; border: 0; -webkit-tap-highlight-color: rgba(255, 255, 255, 0)!important; -webkit-focus-ring-color: rgba(255, 255, 255, 0)!important; outline: none!important; }
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html { font-size: 1em; -webkit-text-size-adjust: 1em; -ms-text-size-adjust: 1em; }
body { vertical-align: baseline; }
html, button, input, select, textarea { font-family: inherit; }

.form textarea,
.form-aligned textarea {
	vertical-align: top;
}
/* === 02. Other basic parts === */
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #999999;
}

address { margin-bottom: 25px }
cite { font-style: italic }
dfn { font-style: italic }
small { font-size: 75% }
sup { top: -0.5em }
sub { bottom: -0.25em }
var { font-style: italic }

mark {
background: yellow;
color: #000000;
}

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

pre,
code,
kbd,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 13px;
line-height: 20px;
}

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

.code {
background: #fafafa;
border: 1px solid #eee;
padding: 0 20px 20px 20px;
margin-top: 25px;
margin-bottom: 25px;
}

.code span {
color: tomato;
}


/* === 03. Forms === */
::-webkit-input-placeholder { color: #888888 }
:-moz-placeholder { color: #888888 }
::-moz-placeholder { color: #888888 }
:-ms-input-placeholder { color: #888888 }

.form input:not([type]),
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="url"],
.form input[type="date"],
.form input[type="month"],
.form input[type="time"],
.form input[type="datetime"],
.form input[type="datetime-local"],
.form input[type="week"],
.form input[type="number"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="color"],
.form select,
.form textarea {
-webkit-appearance: none;
display: inline-block;
width: 100%;
min-height: 50px;
padding: 10px;
border: 2px solid #f4f4f4;
background: #f4f4f4;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
		box-sizing: border-box;
-webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	 -o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
}

.form input:not([type]):focus,
.form input[type="text"]:focus,
.form input[type="password"]:focus,
.form input[type="email"]:focus,
.form input[type="url"]:focus,
.form input[type="date"]:focus,
.form input[type="month"]:focus,
.form input[type="time"]:focus,
.form input[type="datetime"]:focus,
.form input[type="datetime-local"]:focus,
.form input[type="week"]:focus,
.form input[type="number"]:focus,
.form input[type="search"]:focus,
.form input[type="tel"]:focus,
.form input[type="color"]:focus,
.form select:focus,
.form textarea:focus {
outline: 0;
outline: thin dotted \9; /* IE6-9 */
color: #111111;
border: 2px solid #111111;
-webkit-transition: all .2s;
   -moz-transition: all .2s;
	-ms-transition: all .2s;
	 -o-transition: all .2s;
		transition: all .2s;
}

.form input[type="file"]:focus,
.form input[type="radio"]:focus,
.form input[type="checkbox"]:focus {
outline: thin dotted #111111;
outline: 1px auto #111111;
}

.form select {
min-width: 75px;
}

.form .form-checkbox,
.form .form-radio {
margin: 1em 0;
display: block;
}

.form input:not([type])[disabled],
.form input[type="text"][disabled],
.form input[type="password"][disabled],
.form input[type="email"][disabled],
.form input[type="url"][disabled],
.form input[type="date"][disabled],
.form input[type="month"][disabled],
.form input[type="time"][disabled],
.form input[type="datetime"][disabled],
.form input[type="datetime-local"][disabled],
.form input[type="week"][disabled],
.form input[type="number"][disabled],
.form input[type="search"][disabled],
.form input[type="tel"][disabled],
.form input[type="color"][disabled],
.form select[disabled],
.form textarea[disabled] {
cursor: not-allowed;
background-color: #eaeded;
color: #cad2d3;
}

.form input[readonly],
.form select[readonly],
.form textarea[readonly] {
background: #eee;
color: #777;
border-color: #ccc;
}

.form input:focus:invalid,
.form textarea:focus:invalid,
.form select:focus:invalid {
color: #b94a48;
border: 1px solid #ee5f5b;
}

.form input:focus:invalid:focus,
.form textarea:focus:invalid:focus,
.form select:focus:invalid:focus {
border-color: #e9322d;
}

.form input[type="file"]:focus:invalid:focus,
.form input[type="radio"]:focus:invalid:focus,
.form input[type="checkbox"]:focus:invalid:focus {
outline-color: #e9322d;
}

.form textarea {
resize: none;
height: 150px;
font-size: 100%;
}

.form select {
border: 1px solid #ccc;
background-color: white;
}

.form select[multiple] {
height: auto;
}

.form label {
margin: 0.5em 0 0.2em;
font-size: 100%;
}

.form fieldset {
margin: 0;
padding: 0.35em 0 0.75em;
border: 0;
}

.form legend {
display: block;
width: 100%;
padding: 10px 0;
margin-bottom: 10px;
font-size: 125%;
color: #111111;
border-bottom: 1px solid #eeeeee;
}

.form-aligned input,
.form-aligned textarea,
.form-aligned select,
.form-aligned .form-help-inline,
.form-message-inline {
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
}

.form-aligned textarea {
vertical-align: top;
}

.form-aligned .form-control-group {
margin-bottom: 0.5em;
}

.form-aligned .form-control-group label {
text-align: right;
display: inline-block;
vertical-align: middle;
width: 10em;
margin: 0 1em 0 0;
}

.form-aligned .form-controls {
margin: 1.5em 0 0 10em;
}


/* === 04. Media === */
video {
max-width: 100%;
height: auto;
}

iframe,
embed,
object { max-width: 100% }

.vendor {
padding: 0;
background: #fafafa;
margin-bottom: 0;
}

.unsupported { background: #fafafa }

img { vertical-align: bottom }

.responsive-img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}

.circle-img {
-webkit-border-radius: 50%;
	-ms-border-radius: 50%;
		border-radius: 50%;
}


/* === 05. Grid === */
/* Grid parts */
.row { width: 1140px; max-width: 100%; margin: 0 auto; }
.row .row { width: auto; max-width: none; margin: 0 -20px; }
.col { float: left; min-height: 1px; padding: 0 20px; position: relative; }

/* Margin grid */
.grid-m { margin: 20px; }
.grid-ms { margin-left: 20px; margin-right: 20px; }
.grid-mt { margin-top: 40px; }
.grid-mb { margin-bottom: 40px; }

/* Basic grid */
.row .one { width: 8.3333% }
.row .two { width: 16.6666% }
.row .three { width: 25% }
.row .four { width: 33.3333% }
.row .five { width: 41.6666% }
.row .six { width: 50% }
.row .seven { width: 58.3333% }
.row .eight { width: 66.6666% }
.row .nine { width: 75% }
.row .ten { width: 83.3333% }
.row .eleven { width: 91.6666% }
.row .twelve { width: 100% }

/* Offset grid */
.offset-by-one { margin-left: 8.3333% }
.offset-by-two { margin-left: 16.6666% }
.offset-by-three { margin-left: 25% }
.offset-by-four { margin-left: 33.333% }
.offset-by-five { margin-left: 41.6666% }
.offset-by-six { margin-left: 50% }
.offset-by-seven { margin-left: 58.3333% }
.offset-by-eight { margin-left: 66.6666% }
.offset-by-nine { margin-left: 75% }
.offset-by-ten { margin-left: 83.3333% }
.offset-by-eleven { margin-left: 91.6666% }

/* Center grid */
.one.center { margin-left: 45.8333% }
.two.center { margin-left: 41.6667% }
.three.center { margin-left: 37.5% }
.four.center { margin-left: 33.3333% }
.five.center { margin-left: 29.1667% }
.six.center { margin-left: 25% }
.seven.center { margin-left: 20.8333% }
.eight.center { margin-left: 16.6667% }
.nine.center { margin-left: 12.5% }
.ten.center { margin-left: 8.3333% }
.eleven.center { margin-left: 4.1667% }

/* Micro clearfix */
.row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1; }


/* Tablet landscape - Large */
@media only screen and (max-width: 1024px) {

/* Grid parts - 30px gutter */
.row .row { margin: 0 -15px; }
.col { padding: 0 15px; }

/* Margin grid */
.grid-m { margin: 15px; }
.grid-ms { margin-left: 15px; margin-right: 15px; }
.grid-mt { margin-top: 30px; }
.grid-mb { margin-bottom: 30px; }

/* Large grid */
.row .large-one { width: 8.3333% }
.row .large-two { width: 16.6666% }
.row .large-three { width: 25% }
.row .large-four { width: 33.3333% }
.row .large-five { width: 41.6666% }
.row .large-six { width: 50% }
.row .large-seven { width: 58.3333% }
.row .large-eight { width: 66.6666% }
.row .large-nine { width: 75% }
.row .large-ten { width: 83.3333% }
.row .large-eleven { width: 91.6666% }
.row .large-twelve { width: 100% }

}


/* Tablet portrait - Medium */
@media only screen and (max-width: 768px) {

/* Basic grid - Collapsing all to one 100% width column here */
.row .one,
.row .two,
.row .three,
.row .four,
.row .five,
.row .six,
.row .seven,
.row .eight,
.row .nine,
.row .ten,
.row .eleven,
.row .twelve { width: 100% }

/* Offset grid - Since every col is collapsing we don't use the offsets anymore */
.offset-by-one,
.offset-by-two,
.offset-by-three,
.offset-by-four,
.offset-by-five,
.offset-by-six,
.offset-by-seven,
.offset-by-eight,
.offset-by-nine,
.offset-by-ten,
.offset-by-eleven { margin-left: 0 }

/* Center grid - Since every col is collapsing we don't use the offsets anymore */
.one.center,
.two.center,
.three.center,
.four.center,
.five.center,
.six.center,
.seven.center,
.eight.center,
.nine.center,
.ten.center,
.eleven.center { margin-left: 0 }

/* Medium grid */
.row .medium-one { width: 8.3333% }
.row .medium-two { width: 16.6666% }
.row .medium-three { width: 25% }
.row .medium-four { width: 33.3333% }
.row .medium-five { width: 41.6666% }
.row .medium-six { width: 50% }
.row .medium-seven { width: 58.3333% }
.row .medium-eight { width: 66.6666% }
.row .medium-nine { width: 75% }
.row .medium-ten { width: 83.3333% }
.row .medium-eleven { width: 91.6666% }
.row .medium-twelve { width: 100% }

}


/* Smartphone landscape - Small */
@media only screen and (max-width: 480px) {

/* Grid parts - 20px gutter */
.row .row { margin: 0 -10px; }
.col { padding: 0 10px; }

/* Margin grid */
.grid-m { margin: 10px; }
.grid-ms { margin-left: 10px; margin-right: 10px; }
.grid-mt { margin-top: 20px; }
.grid-mb { margin-bottom: 20px; }

/* Small grid */
.row .small-one { width: 8.3333% }
.row .small-two { width: 16.6666% }
.row .small-three { width: 25% }
.row .small-four { width: 33.3333% }
.row .small-five { width: 41.6666% }
.row .small-six { width: 50% }
.row .small-seven { width: 58.3333% }
.row .small-eight { width: 66.6666% }
.row .small-nine { width: 75% }
.row .small-ten { width: 83.3333% }
.row .small-eleven { width: 91.6666% }
.row .small-twelve { width: 100% }

}


/* Smartphone portrait - X-small */
@media only screen and (max-width: 320px) {

/* X-small grid */
.row .x-small-one { width: 8.3333% }
.row .x-small-two { width: 16.6666% }
.row .x-small-three { width: 25% }
.row .x-small-four { width: 33.3333% }
.row .x-small-five { width: 41.6666% }
.row .x-small-six { width: 50% }
.row .x-small-seven { width: 58.3333% }
.row .x-small-eight { width: 66.6666% }
.row .x-small-nine { width: 75% }
.row .x-small-ten { width: 83.3333% }
.row .x-small-eleven { width: 91.6666% }
.row .x-small-twelve { width: 100% }

}


/* Responsive utilities */
@media only screen and (min-width: 1025px) {
.hide-normal { display: none!important }
.hide-large,
.hide-medium,
.hide-small,
.hide-x-small { display: block!important }
}

@media only screen and (max-width: 1024px) {
.hide-large { display: none!important }
.hide-normal,
.hide-medium,
.hide-small,
.hide-x-small { display: block!important }
}

@media only screen and (max-width: 768px) {
.hide-medium { display: none!important }
.hide-normal,
.hide-large,
.hide-small,
.hide-x-small { display: block!important }
}

@media only screen and (max-width: 480px) {
.hide-small { display: none!important }
.hide-normal,
.hide-large,
.hide-medium,
.hide-x-small { display: block!important }
}

@media only screen and (max-width: 320px) {
.hide-x-small { display: none!important }
.hide-normal,
.hide-large,
.hide-medium,
.hide-small { display: block!important }
}


/* === 06. Positioning and spacing === */
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }

.pull-left { float: left }
.pull-right { float: right }

.relative { position: relative }
.absolute { position: absolute }

.m0 { margin: 0 }
.mt0 { margin-top: 0 }
.mb0 { margin-bottom: 0 }
.ms0 { margin-right: 0; margin-left: 0 }

.p0 { padding: 0 }
.pt0 { padding-top: 0 }
.pb0 { padding-bottom: 0 }
.ps0 { padding-right: 0; padding-left: 0 }/*

	Style.css

	01. Basics
	02. Top bar
	03. Home
	04. Intro
	05. Work
	06. Call to action
	07. Services
	08. Process
	09. About
	10. Contact
	11. Footer
	12. 404 Page
	13. Responsive settings

*/


/* ==================== 01. Basics ==================== */
body {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 25px;
	color: #555555;
}

p {
	margin-bottom: 25px;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Raleway', 'Open Sans', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #333333;
}

h1, .h1 {
	font-size: 30px;
	line-height: 1.5em;
	margin-bottom: 25px;
}

h2, .h2 {
	font-size: 24px;
	line-height: 1.5em;
	margin-bottom: 25px;
}

h3, .h3 {
	font-size: 16px;
	line-height: 25px;
	margin-bottom: 0;
}

h4, .h4 {
	font-size: 14px;
	line-height: 25px;
	margin-bottom: 0;
}

h5, .h5 {
	font-size: 13px;
	line-height: 25px;
	margin-bottom: 0;
}

h6, .h6 {
	font-size: 13px;
	line-height: 20px;
	margin-bottom: 0;
}

/* Responsive headings */
.bigtext h1, h1.bigtext,
.bigtext h2, h2.bigtext,
.bigtext h3, h3.bigtext,
.bigtext h4, h4.bigtext,
.bigtext h5, h5.bigtext,
.bigtext h6, h6.bigtext {
	margin-bottom: 10px;
}

.bigtext h1, h1.bigtext {
	font-size: 90px;
	line-height: 1em;
}

.bigtext h2, h2.bigtext {
	font-size: 75px;
	line-height: 1em;
}

.bigtext h3, h3.bigtext {
	font-size: 60px;
	line-height: 1em;
}

.bigtext h4, h4.bigtext {
	font-size: 48px;
	line-height: 1.25em;
}

.bigtext h5, h5.bigtext {
	font-size: 36px;
	line-height: 1.25em;
}

.bigtext h6, h6.bigtext {
	font-size: 24px;
	line-height: 1.5em;
}

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

	/* Responsive headings */
	.bigtext h1, h1.bigtext {
		font-size: 60px;
	}

	.bigtext h2, h2.bigtext {
		font-size: 48px;
	}

	.bigtext h3, h3.bigtext {
		font-size: 36px;
	}

	.bigtext h4, h4.bigtext {
		font-size: 30px;
	}

	.bigtext h5, h5.bigtext {
		font-size: 24px;
	}

	.bigtext h6, h6.bigtext {
		font-size: 18px;
	}

}

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

	/* Responsive headings */
	.bigtext h1, h1.bigtext {
		font-size: 36px;
	}

	.bigtext h2, h2.bigtext {
		font-size: 30px;
	}

	.bigtext h3, h3.bigtext {
		font-size: 24px;
	}

	.bigtext h4, h4.bigtext {
		font-size: 18px;
	}

	.bigtext h5, h5.bigtext {
		font-size: 16px;
	}

	.bigtext h6, h6.bigtext {
		font-size: 14px;
	}

}

/* Links */
a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: #111111;
}

.gallery-link a {
	cursor: pointer;
}

/* Smooth hover effects */
a,
a i,
button,
input[type="submit"] {
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

a:hover,
a i:hover,
button:hover,
input[type="submit"]:hover {
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

/* Cursor styling for icons */
i {
	cursor: default;
}

a i {
	cursor: pointer;
}

/* Lists */
.ol {
	list-style-type: decimal-leading-zero;
	list-style-position: outside;
	margin-left: 2em;
	margin-bottom: 25px;
}

.ol ol,
.ul ol {
	list-style-type: decimal-leading-zero;
	list-style-position: outside;
}

.ul {
	list-style-type: disc;
	list-style-position: outside;
	margin-left: 1em;
	margin-bottom: 25px;
}

.ol ul,
.ul ul {
	list-style-type: disc;
	list-style-position: outside;
}

.ol ol,
.ol ul,
.ul ol,
.ul ul {
	margin-left: 2em;
}

/* Typographic styles */
.italic, em {
	font-style: italic;
}

.bold, b, strong {
	font-weight: 600;
}

.thin {
	font-weight: 300;
}

.x-thin {
	font-weight: 100;
}

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

.uber {
	font-family: 'Raleway', 'Open Sans', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Text colors */
.text-color {
	color: #ff4800;
}

.text-light {
	color: #bbbbbb;
}

.text-dark {
	color: #111111;
}

.text-white {
	color: #ffffff;
}

/* Dropcap */
.dropcap {
	float: left;
	color: #111111;
	font-size: 50px;
	line-height: 50px;
	padding-right: 8px;
	padding-left: 3px;
}

/* Quotes */
blockquote {
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.25em;
	padding: 25px;
	background: #fafafa;
	border-left: 5px solid #eeeeee;
	margin-bottom: 25px;
}

blockquote small {
	display: block;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 0.75em;
	font-weight: 400;
	font-style: normal;
}

blockquote small:before {
	content: '\2014 \00A0';
}

q {
	quotes: "\"" "\"" """ """;
}

q:before {
	content: '\201C';
}

q:after {
	content: '\201D';
}

/* Buttons */
/* Reset */
button,
input[type="submit"] {
	-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	padding: 0;
}

input[type="submit"] {
	border: 0;
	width: auto;
}

/* Fixing the broken lineheight model in FF */
input::-moz-focus-inner { 
	border: 0; 
	padding: 0; 
	margin-top: 5px; 
	margin-bottom: 5px; 
}


/* Buttons styling */
/*
.btn,
button,
input[type="submit"] 
*/
.bigbtn {
	display: inline-block;
	font-family: 'Raleway', 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	/* text-transform: uppercase; */
	line-height: 25px;
	padding: 12px 25px;
	color: #ffffff;
	/* background: #111111; */
	text-decoration: none;
	-webkit-border-radius: 5px;
			border-radius: 5px;
}

.bigbtn:hover {
	color: #ffffff;
	background: #ff4800;
	text-decoration: none;
	cursor: pointer;
}

/* Icon inside a button */
.bigbtn > i {
	font-size: 14px;
	margin-right: 0.5em;
}

/* Button outline style */
.bigbtn.outline {
	color: #111111;
	background: none;
	border: 2px solid #111111;
	padding: 10px 23px;
}

a.btn.outline:hover,
button.outline:hover,
input[type="submit"].outline:hover {
	color: #ffffff;
	background: #ff4800;
	border: 2px solid #ff4800;
	border: 2px solid rgba(255,72,0,1);
}

/* Button colors */
.btn.color {
	background: #ff4800;
}

.btn.outline.color {
	color: #ff4800;
	background: none;
	border: 2px solid #ff4800;
}

.btn.light {
	color: #ffffff;
	background: #cccccc;
	background: rgba(255,255,255,0.3);
}

.btn.outline.light {
	color: #ffffff;
	background: none;
	border: 2px solid #cccccc;
	border: 2px solid rgba(255,255,255,0.3);
}

.btn.dark {
	color: #111111;
	background: #aaaaaa;
	background: rgba(17,17,17,0.3);
}

.btn.outline.dark {
	color: #111111;
	background: none;
	border: 2px solid #aaaaaa;
	border: 2px solid rgba(17,17,17,0.3);
}

.btn.white {
	color: #111111;
	background: #ffffff;
}

.btn.outline.white {
	color: #ffffff;
	background: none;
	border: 2px solid #ffffff;
}
@-moz-document url-prefix() { 
	input[type="submit"] {
		line-height: 15px;
	}
}
/* Headers */
.header {
	position: relative;
	display: block;
	width: 100%;
	height: 640px;
}

.header.large {
	height: 745px;
}

.header.medium {
	height: 480px;
}

.header.small {
	height: 320px;
}

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

	.header,
	.header.large {
		height: 480px;
	}
	
	.header.medium {
		height: 320px;
	}

}

/* Header with centered content */
.header-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		 -o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	width: 100%;
	max-width: 740px;
	min-width: 300px;
	text-align: center;
	z-index: 60; /* Should be 50+ because of the bxSlider */
}

/* Background image */
.bg-img {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

/* Fixed backgrounds only on non-touch devices */
.bg-img.fixed {
	background-attachment: scroll;
}

.no-touch .bg-img.fixed {
	background-attachment: fixed;
}

/* Background images */
.background-one {
	background-image: url('images/bg-1.jpg');
}

.background-two {
	background-image: url('images/bg-2.jpg');
}

.background-three {
	background-image: url('images/bg-3.jpg');
}

.background-four {
	background-image: url('images/bg-4.jpg');
}

.background-five {
	background-image: url('images/bg-5.jpg');
}

/* Title */
.title {
	text-align: center;
}

.title h1,
.title h2 {
	font-size: 16px;
	line-height: 25px;
	margin-bottom: 15px;
}

.title hr {
	display: inline-block;
	width: 40px;
	height: 2px;
	background: #cccccc;
	margin-bottom: 75px;
}

.title.title-light h1,
.title.title-light h2 {
	color: #ffffff;
}

.title.title-light hr {
	background: #555555;
}

/* Title on headers */
.header hr {
	display: inline-block;
	width: 40px;
	height: 2px;
	background: #ffffff;
	filter: alpha(opacity=50);
	opacity: 0.5;
	margin-bottom: 25px;
}

/* Underline link */
a.underline {
	padding-bottom: 1px;
	border-bottom: 1px dotted #cccccc;
}

a.underline:hover {
	border-bottom: 1px dotted #111111;
}

/* Links for dark backgrounds */
a.inverted:hover {
	color: #ffffff;
}

a.inverted.underline {
	padding-bottom: 1px;
	border-bottom: 1px dotted #555555;
}

a.inverted.underline:hover {
	border-bottom: 1px dotted #ffffff;
}

/* Arrow link */
a.arrow-link {
	font-family: 'Raleway', 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #111111;
}

a.arrow-link:before {
	font-family: 'FontAwesome';
	content: '\f054';
	color: #aaaaaa;
	margin-right: 7px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

a.arrow-link:hover,
a.arrow-link:hover:before {
	color: #ff4800;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

/* Positioning for the owlCarousel controls (oc) */
.oc-left,
.oc-right {
	position: absolute;
	top: 50%;
	margin-top: -30px;
}

.oc-left {
	left: 0;
	margin-left: -60px;
}

.oc-right {
	right: 0;
	margin-right: -60px;
}

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

	.oc-left,
	.oc-right {
		top: 100%;
		margin-top: 20px;
	}

	.oc-left {
		left: 50%;
		margin-left: -40px;
	}

	.oc-right {
		right: 50%;
		margin-right: -40px;
	}

}

/* Styling for the owlCarousel icon controls */
.oc-left i,
.oc-right i {
	display: inline-block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	font-size: 42px;
	text-align: center;
	color: #cccccc;
}

.oc-left i:hover,
.oc-right i:hover {
	color: #aaaaaa;
}

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

	.oc-left i,
	.oc-right i {
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 28px;
	}

}

/* Overlay item that is used for portfolio thumbnails and employee images */
.overlay-item {
	position: relative;
	color: #ffffff;
	line-height: 0;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

/* The hover effect */
.o-hover {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: rgba(255,255,255,0.0);
	background: rgba(0,0,0,0.0);
	visibility: visible;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.overlay-item:hover > .o-hover,
.overlay-item a:hover > .o-hover {
	color: rgba(255,255,255,1);
	background: rgba(0,0,0,0.5);
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

/* The information inside the hover */
.o-hover span {
	font-family: 'Raleway', 'Open Sans', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	line-height: 20px;
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
}

.o-hover em {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255,255,255,0);
	display: inline-block;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.overlay-item:hover > .o-hover em,
.overlay-item a:hover > .o-hover em {
	color: rgba(255,255,255,1);
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.o-hover i {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255,255,255,0);
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.overlay-item:hover > .o-hover i,
.overlay-item a:hover > .o-hover i {
	color: rgba(255,255,255,1);
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.overlay-item:hover > .o-hover i:hover,
.overlay-item a:hover > .o-hover i:hover {
	color: #111111;
	background: #ffffff;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.o-hover i.fa-2x {
	font-size: 2em;
}

.overlay-item:hover > .o-hover i.fa-2x:hover,
.overlay-item a:hover > .o-hover i.fa-2x:hover {
	color: #ffffff;
	background: none;
}

/* Extra info below images used for portfolio thumbnails and employee images */
.e-info {
	position: relative;
	display: block;
	background: #ffffff;
	padding: 15px 15px 25px;
	text-align: center;
}

.e-info h3 {
	font-size: 13px;
	line-height: 20px;
	margin-bottom: 0;
}

.e-info p {
	color: #aaaaaa;
	line-height: 20px;
	margin-bottom: 0;
}


/* ==================== 02. Top bar ==================== */
.top-bar {
	position: fixed;
	top: 0;
	display: block;
	width: 100%;
	background: #111111;
	background: rgba(7,7,7,0.9);
	z-index: 99;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

/* Typographic logo for the top bar */
.tb-logo {
	margin-left: 20px;
}

.tb-logo h1 {
	float: left;
	text-align: left;
	font-size: 13px;
	line-height: 25px;
	color: #ffffff;
	margin-top: 15px;
	margin-bottom: 0;
}

.tb-logo h1 a {
	text-decoration: none;
	color: #ffffff;
}

.tb-logo h1 a:hover {
	color: #ffffff;
}

/* Image logo for the top bar */
.tb-logo img {
	float: left;
	text-align: left;
	width: auto;
	max-height: 30px;
	margin: 10px 10px 0 0;
}

/* Hiding the the toggle */ 
#toggle,
.toggle {
	display: none;
}

/* Hiding and showing the submenu items */
.menu ul ul {
	display: none;
}

/*
.menu ul li:hover > ul {
	display: block;
}
*/

/* Styling for the main menu items */
.menu {
	float: right;
	text-align: left;
	font-family: 'Raleway', 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 25px;
}

.menu ul {
	position: relative;
	display: table-cell;
	list-style: none;
}

.menu ul:after {
	content: "";
	clear: both;
	display: block;
}

.menu ul li {
	float: left;
}

/* Hover effect */
.menu ul li:hover a {
	color: #ffffff;
}

.menu ul li a {
	display: block;
	padding: 15px 20px;
	color: #777777;
	text-decoration: none;
}

/* Less padding on smaller screens */
@media only screen and (max-width: 1024px){

	.menu ul li a {
		padding: 15px 10px;
	}

}

/* Styling for the sub menu items */
.menu ul ul {
	position: absolute;
	top: 100%;
	background: #111111;
	background: rgba(7,7,7,0.9);
	padding: 0 0 10px 0;
	min-width: 150px;
}

.menu ul ul li {
	float: none; 
	position: relative;
}

.menu ul ul li a {
	padding: 10px 20px;
	color: #777777!important;
}

.menu ul ul li a:hover {
	color: #ffffff!important;
}

.menu ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}

/* Responsive settings for the menu */
/* Scott was here (set resolution at which top menu gets hidden behind a button */
@media only screen and (max-width: 420px) {

	.top-bar {
		padding-top: 0;
	}

	/* The toggle */
	.toggle {
		display: block;
		position: relative;
		cursor: pointer;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
		color: #777777;
		float: right;
		font-family: 'font-obb';
		text-align: center;
		font-size: 14px;
		width: 50px;
		height: 50px;
		line-height: 50px;
		-webkit-transition: all .2s;
		   -moz-transition: all .2s;
			-ms-transition: all .2s;
			 -o-transition: all .2s;
				transition: all .2s;
	}

	.toggle:hover {
		color: #ffffff;
		-webkit-transition: all .2s;
		   -moz-transition: all .2s;
			-ms-transition: all .2s;
			 -o-transition: all .2s;
				transition: all .2s;
	}

	.toggle:after {
		content: '\e80b';
	}

	#toggle:checked ~ .menu {
		display: block;
		filter: alpha(opacity=100);
		opacity: 1;
	}

	#toggle:checked + .toggle:after {
		content: '\e808';
	}

	/* The menu items */
	.menu {
		display: none;
		filter: alpha(opacity=0);
		opacity: 0;
		margin-top: 50px;
		width: 100%;
		position: absolute;
		right: 0;
		height: auto;
		text-align: left;
		background: #111111;
		background: rgba(7,7,7,0.9);
		padding-bottom: 10px;
		padding-left: 30px;
	}

	.menu ul li {
		display: block;
		width: 100%;
		line-height: 30px;
		margin: 0;
	}

	.menu ul li a {
		display: block;
		width: 100%;
		padding: 0;
	}

	/* Styling for the sub menu items */
	.menu ul ul {
		display: block;
		position: relative;
		top: 0;
		background: none;
		padding: 0;
	}

	.menu ul ul li a {
		padding: 0;
	}

	.menu ul ul ul {
		position: relative;
		top: 0;
		left: 0;
	}

}

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

	.tb-logo {
		margin-left: 5px;
	}

	.toggle {
		margin-right: -10px;
	}

	.menu {
		padding-left: 15px;
	}

}

/* Dynamic height of the menu */
.tb-large {
	padding-top: 25px;
	padding-bottom: 25px;
}

.tb-small {
	padding-top: 0;
	padding-bottom: 0;
}

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

	.tb-large {
		padding-top: 0;
		padding-bottom: 0;
	}

}

/* Transparent top bar */
.top-bar.tb-transp {
	background: #none;
	background: rgba(7,7,7,0.0);
}

.tb-transp .menu ul li a {
	color: #ffffff;
	color: rgba(255,255,255,0.5);
}

.tb-transp .menu ul li:hover a {
	color: #ffffff;
}

.tb-small.tb-transp {
	background: #111111;
	background: rgba(7,7,7,0.9);
}

/* Responsive settings for the transparent top bar */
@media only screen and (max-width: 768px) {

	.top-bar.tb-transp {
		background: #111111;
		background: rgba(7,7,7,0.9);
	}

}


/* ==================== 03. Home ==================== */
.home {
	z-index: 1;
}

.topspace {
	padding-top: 105px;
	background: #111111;
}

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

	.topspace {
		padding-top: 50px;
	}
	
	.home .bx-wrapper .bx-controls-direction a {
		top: 100%;
		margin-top: -53px;
	}

}


/* ==================== 04. Introduction ==================== */
.intro {
	background: #ffffff;
	padding-top: 100px;
	padding-bottom: 100px;
}

/* Icon navigation */
.icon-nav {
	text-align: center;
	margin-bottom: 25px;
}

.icon-nav a {
	display: inline-block;
}

.icon-nav i {
	display: block;
	margin: 0 auto 10px;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	font-size: 36px;
	color: #cccccc;
	background: none;
	-webkit-border-radius: 50px;
	   -moz-border-radius: 50px;
			border-radius: 50px;
}

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

	.icon-nav i {
		width: 80px;
		height: 80px;
		line-height: 80px;
		font-size: 24px;
		-webkit-border-radius: 40px;
		   -moz-border-radius: 40px;
				border-radius: 40px;
	}

}

.icon-nav a:hover > i {
	color: #ffffff;
	background: #ff4800;
}

.icon-nav b {
	font-family: 'Raleway', 'Open Sans', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 20px;
	color: #111111;
	display: block;
}

.icon-nav em {
	font-style: normal;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	color: #aaaaaa;
	display: block;
}


/* ==================== 05. Work ==================== */
.work {
	background: #f4f4f4;
	padding-top: 100px;
	padding-bottom: 100px;
}

/* Positioning for the arrow controls for the work slider */
.work .oc-left,
.work .oc-right {
	margin-top: -65px;
}

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

	.work .oc-left,
	.work .oc-right {
		margin-top: 20px;
	}

}


/* ==================== 06. Call to action ==================== */
.cta {
	padding-top: 100px;
	padding-bottom: 100px;
}


/* ==================== 07. Services ==================== */
.services {
	background: #ffffff;
	padding-top: 100px;
	padding-bottom: 100px;
}

/* Service item */
.service-item {
	position: relative;
	display: block;
	text-align: center;
	background: #ffffff;
	padding-bottom: 35px;
}

.service-item .subline {
	font-style: normal;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	color: #aaaaaa;
}

.service-item .serif {
	color: #aaaaaa;
}

.service-item hr {
	display: inline-block;
	width: 30px;
	height: 2px;
	background: #cccccc;
	margin-bottom: 20px;
}

.service-item ul {
	margin-bottom: 25px;
}

.service-item i {
	display: inline-block;
	width: 80px;
	height: 80px;
	line-height: 80px;
	text-align: center;
	font-size: 48px;
	color: #cccccc;
	-webkit-border-radius: 40px;
	   -moz-border-radius: 40px;
			border-radius: 40px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.service-item:hover > i {
	color: #ff4800;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.service-item:hover > a.arrow-link:before {
	color: #ff4800;
}

/* Positioning for the arrow controls for the services slider */
.services .oc-left,
.services .oc-right {
	top: 70px;
	margin-top: 0;
}

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

	.services .oc-left,
	.services .oc-right {
		top: 100%;
		margin-top: 0;
	}

}


/* ==================== 08. Process ==================== */
.process {
	background: #222222;
	padding-top: 100px;
	padding-bottom: 100px;
}

/* Icon circles */
.icon-circle {
	display: block;
	text-align: center;
	margin-bottom: 50px;
}

.icon-circle i {
	display: block;
	margin: 0 auto 20px;
	width: 80px;
	height: 80px;
	line-height: 80px;
	text-align: center;
	font-size: 36px;
	color: #555555;
	background: none;
	-webkit-border-radius: 40px;
	   -moz-border-radius: 40px;
			border-radius: 40px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.icon-circle:hover > i {
	font-size: 48px;
	color: #ffffff;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.icon-circle p {
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.icon-circle:hover > p {
	color: #aaaaaa;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}


/* ==================== 09. About ==================== */
.about {
	background: #f4f4f4;
	padding-top: 100px;
	padding-bottom: 100px;
}

.bg-white {
	background: #ffffff;
}

.bg-padding {
	padding: 75px 20px;
}

/* Quote slider */
.qs-wrap p {
	color: #aaaaaa;
}

.qs-wrap {
	margin-top: 2px;
}

.qs-wrap .bx-wrapper .bx-pager {
bottom: -25px;
}

/* Styling for the pagination for the quote slider */
.qs-wrap .bx-wrapper .bx-pager.bx-default-pager a {
	border: 1px solid #cccccc;
	filter: alpha(opacity=100);
	opacity: 1;
}

.qs-wrap .bx-wrapper .bx-pager.bx-default-pager a.active,
.qs-wrap .bx-wrapper .bx-pager.bx-default-pager a:hover {
	background: #cccccc;
	filter: alpha(opacity=100);
	opacity: 1;
}

/* Positioning for the arrow controls for the employee slider */
.about .oc-left,
.about .oc-right {
	margin-top: -50px;
}

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

	.about .oc-left,
	.about .oc-right {
		margin-top: 20px;
	}

}


/* ==================== 10. Contact ==================== */
.contact {
	background: #ffffff;
	padding-top: 100px;
	padding-bottom: 100px;
}

/* Contact form */
.c-form {
	margin-top: -15px;
	text-align: left;
}

/* Contact form feedback messages */
.c-message {
	text-align: left;
}

.error_message {
	text-align: left;
	color: tomato;
	margin-bottom: 10px;
}

/* Loader image */
.loader {
	margin-left: 10px;
}

/* Contact details */
.c-details a {
	color: #777777;
	display: inline-block;
}

.c-details a:hover,
.c-details a:hover i {
	color: #ff4800;
}

.c-details i {
	float: left;
	width: 15px;
	line-height: 25px;
	font-size: 14px;
	text-align: center;
	color: #111111;
}

.c-details span {
	display: block;
	width: auto;
	margin-bottom: 25px;
	margin-left: 30px;
}


/* ==================== 11. Footer ==================== */
/* Back to top button */
.back-top-wrap {
	text-align: center;
	height: 0;
}

.back-top {
	position: relative;
	top: -25px;
	display: inline-block;
	width: 50px;
	height: 50px;
	line-height: 48px;
	text-align: center;
	font-size: 14px;
	color: #ffffff;
	background: #ff4800;
	background: rgba(255,72,0,0.9);
	-webkit-border-radius: 25px;
	   -moz-border-radius: 25px;
			border-radius: 25px;
	z-index: 2;
}

.back-top:hover {
	background: rgba(255,72,0,1);
}

/* Social footer */
.social-footer {
	background: #111111;
	padding-top: 75px;
	padding-bottom: 50px;
	text-align: center;
	border-bottom: 1px solid #292929;
}

/* Social icons */
.sf-icons {
	width: 100%;
	position: relative;
	text-align: center;
	margin-bottom: 25px;
}

.sf-icons i {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 28px;
	color: #888888;
	margin: 10px;
}

.sf-icons i:hover {
	color: #ffffff;
}

.sf-icons p {
	margin-top: 15px;
	margin-bottom: 0;
}

/* Footer */
.footer {
	background: #111111;
	padding-top: 60px;
	padding-bottom: 60px;
	text-align: center;
}

/* Footer promo */
.footer-promo {
	display: none;
	background: #111111;
	padding-top: 60px;
	padding-bottom: 60px;
	text-align: center;
}

.promo-control {
	position: relative;
	top: -25px;
	text-align: center;
	height: 0;
}

.promo-control a {
	padding-top: 10px;
	cursor: pointer;
	color: #333333;
}

.promo-control a:hover {
	color: #777777;
}


/* ==================== 12. 404 Page ==================== */
.fourofour {
	height: 100%;
}

.fourofour .header {
	height: 100%;
}

.error-circle {
	display: inline-block;
	margin: 0 auto;
	width: 300px;
	height: 300px;
	border-radius: 150px;
	background: #ffffff;
	padding: 25px;
}

.error-circle h1 {
	font-size: 90px;
	line-height: 1em;
	margin-top: 30px;
	margin-bottom: 15px;
}

.error-circle h5 {
	margin-bottom: 15px;
}

.error-circle hr {
	display: inline-block;
	width: 40px;
	height: 2px;
	background: #cccccc;
	margin-bottom: 10px;
}


/* ==================== 13. Responsive settings ==================== */
/* Tablet portrait - Medium */
@media only screen and (max-width: 768px) {

	.title hr {
		margin-bottom: 50px;
	}

	.bg-padding {
		padding: 50px 15px;
	}

	.intro,
	.work,
	.cta,
	.services,
	.process,
	.about,
	.contact,
	.social-footer {
		padding-top: 75px;
		padding-bottom: 75px;
	}

	.process,
	.social-footer {
		padding-top: 75px;
		padding-bottom: 50px;
	}

	.footer,
	.footer-promo {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.section-slider {
		padding-top: 75px;
		padding-bottom: 100px;
	}

	.c-form {
		margin-bottom: 25px;
	}

}

/* Smartphone landscape - Small */
@media only screen and (max-width: 480px) {

	.title hr {
		margin-bottom: 25px;
	}

	.bg-padding {
		padding: 25px 10px;
	}

	.intro,
	.work,
	.cta,
	.services,
	.process,
	.about,
	.contact {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.social-footer {
		padding-top: 50px;
		padding-bottom: 25px;
	}

	.footer,
	.footer-promo {
		padding-top: 25px;
		padding-bottom: 25px;
	}

	.section-slider {
		padding-top: 50px;
		padding-bottom: 100px;
	}

	.error-circle {
		width: 220px;
		height: 220px;
		border-radius: 110px;
		padding: 15px;
	}

	.error-circle h1 {
		font-size: 60px;
		line-height: 1em;
		margin-top: 25px;
		margin-bottom: 10px;
	}

	.error-circle h5 {
		font-size: 12px;
		margin-bottom: 5px;
	}

	.error-circle hr {
		display: inline-block;
		width: 40px;
		height: 2px;
		background: #cccccc;
		margin-bottom: 5px;
	}

}
/*
.tint {
z-index: 1;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.2);
}	
*/
.txtshadow { text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); }
.ts { text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); }

#signupbtn:hover, #signupbtn2:hover, #videobtn:hover {
	background: purple;
	border: 2px solid purple;
}

#m_login_close, #m_contactus_close, #m_signup_close {
	background: white;
}

/*
body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
*/

/*
a.btn:hover,
button:hover,
input[type="submit"]:hover,
a.icon:hover,
a.btn.outline:hover,
button.outline:hover,
input[type="submit"].outline:hover,
.btn.color,
.icon-nav a:hover > i,
.tags a:hover,
.pagination a:hover {
	background: purple;
}
*/

.back-top       { background: rgba(128,0,128,0.7); }
.back-top:hover { background: rgba(128,0,128,1); }
/*
a.btn.outline:hover,
button.outline:hover,
input[type="submit"].outline:hover {
	border: 2px solid purple;
}
*/
.background-one {
	background-position: right top;
}

#appstore {
	margin-bottom: 30px;
	margin-right: 10px;
}
#playstore {
	margin-bottom: 30px;
	margin-left: 10px;
}

@media only screen and (max-width: 1024px) {
	.btn.outline.light {
		background: purple;
		border: 2px solid purple;
	}
	.background-one {
		background-image: url('img/bg1-tint20-crop.jpg');
	}
	#appstore, #playstore {
		max-height: 75px;
	}
}
@media only screen and (min-width: 1025px) {
	.background-one {
		background-image: url('img/bg1-tint20.jpg');
	}
}
@media only screen and (max-width: 420px) {
	#appstore, #playstore {
		max-height: 50px;
	}
	h2 {
		font-size: 12pt;
	}
}


.tb-logo h1 { font-size: 20px; }

.bg-img.fixed {
	/*
		XXX: This fucks things up on Safari!! (bg img gets zoomed)
		But it makes for a nice scrolling effect on desktop. (eg. Chrome)
		There doesn't appear to be a way to detect Safari-only browsers with CSS, sigh.

	background-attachment: fixed;

	 */
}
.pointer {
	cursor: pointer;
}
.hl {
	font-weight: 	 bold;
	text-decoration: underline;
}

.realul {
	list-style:initial;
}

.realul > li {
	padding-left: 20px;
	list-style-position: inside;
}

.title hr {
	margin-top:    10px;
	margin-bottom: 20px;
}
span.emph {
	font-weight: 700;
}
ul.features > li {
	margin: 0 0 10px 0;
}
footer.footer {
	padding-top: 30px;
	padding-bottom: 30px;
}