/*

Theme Name: Oslo - A Creative Showcase WordPress Theme
Theme URI: http://themeforest.net/user/ThemeProvince/portfolio
Author: Theme Province
Author URI: http://themeforest.net/user/ThemeProvince
Description: Premium Portfolio WordPress Theme for Creatives
Version: 1.0
License: GPLv3
License URI: http://www.gnu.org/copyleft/gpl.html
Tags: dark, light

Contents

1. Reset CSS
2. WordPress Default Styles
3. HTML Tags
4. Comments
5. Contact Form
6. Widget Styles
7. Header Styles
8. Navigation
9. Sticky Header
10. Portfolio
11. Footer
12. Page
13. Blog
14. Shortcodes
15. 404 Page
16. Mobile Menu
17. HTML5 Player
18. Search Form
19. Pagination          
20. CSS Transitions
21. Media Queries

*/

/*-------------------------------------------------------------
1. Reset CSS
-------------------------------------------------------------*/

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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	outline: none;
}
/* HTML5 display-role reset for older browsers */
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: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
::selection {
  background: #fefe32;
}
::-moz-selection {
  background: #fefe32;
}
#portfolio {
    -webkit-transform: translate3d(0, 0, 0);
}

/*-------------------------------------------------------------
2. WordPress Default Styles
-------------------------------------------------------------*/

.entry-content img {
	margin: 0 0 1.5em 0;
	}
.alignleft, img.alignleft {
	margin-right: 1.5em;
	display: inline;
	float: left;
	}
.alignright, img.alignright {
	margin-left: 1.5em;
	display: inline;
	float: right;
	}
.aligncenter, img.aligncenter {
	margin-right: auto;
	margin-left: auto;
	display: block;
	clear: both;
	}
.alignnone, img.alignnone {
	/* not sure about this one */
	}
.wp-caption {
	margin-bottom: 1.5em;
	text-align: center;
	padding-top: 5px;
	}
.wp-caption img {
	border: 0 none;
	padding: 0;
	margin: 0;
	}
.wp-caption p.wp-caption-text {
	line-height: 1.5;
	font-size: 10px;
	margin: 0;
	}
.wp-smiley {
	margin: 0 !important;
	max-height: 1em;
	}
blockquote.left {
	margin-right: 20px;
	text-align: right;
	margin-left: 0;
	width: 33%;
	float: left;
	}
blockquote.right {
	margin-left: 20px;
	text-align: left;
	margin-right: 0;
	width: 33%;
	float: right;
	}
.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}
.bypostauthor {}
.sticky {}

/*-------------------------------------------------------------
3. HTML Tags
-------------------------------------------------------------*/

html {
	overflow-x: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
}

body {
	color: #afafaf;
	font-size: 16px;
	font-weight: 300;
	background: #1a1b1d;
	-webkit-font-smoothing: antialiased;
}

strong {
	font-weight: bold;
}

a {
	text-decoration: none;
	color: #a1a5ab;
}

h1,h2,h3,h4,h5,h6 {
	padding-bottom: 25px;
	font-weight: bold;
	color: #fff;
}

b {
	font-weight: bold;
}

h1 {
	font-size: 40px;
}

h2 {
	font-size: 30px;
}

h3 {
	font-size: 25px;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 15px;
}

h6 {
	font-size: 10px;
}

pre {
	border: 1px solid #333;
	font-family: "Consolas", monospace;
	padding: 10px 10px 8px 10px;
	font-size: 14px;
	background: #26282b;
	margin-bottom: 40px;
	color: #fff;
}

input {
	padding: 8px 10px;
	background: #1f2022;
	border: 1px solid #3f4144;
	outline: none;
	width: 100%;
	box-sizing: border-box;
	font-size: 13px;
	color: #ccc;
}

#commentform label {
	font-weight: bold;
	font-size: 16px;
	color: #fff;
	margin-bottom: 10px;
	display: block;
}

textarea {
	padding: 8px 10px;
	background: #1f2022;
	border: 1px solid #3f4144;
	width: 100%;
	outline: none;
	box-sizing: border-box;
}

.clear {
	clear: both;
}

/*-------------------------------------------------------------
4. Comments
-------------------------------------------------------------*/

h3.leave-reply, h3.comments_number {
	padding-top: 40px;
	border-top: 1px solid #26292d;
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid #26292d;
		text-transform: uppercase;

}

#comments {

padding-top: 10px;
position: relative;

}

#comments h1 {

padding-bottom: 25px;
border-top: 1px solid #333;

}

#comments h2 {

margin-bottom: 5px;

}

#comments h4 {
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	padding: 20px 0px;
	margin-bottom: 30px;
}

#comments h4.leave_reply {
	border-top: none;
	border-bottom: none;
}

#comments p {

margin-bottom: 15px;

}

#comments .pos {

border-top: 1px solid #eee;
padding: 10px 0px 10px 0px;
position: relative;
font-size: 11px;

}

ul.commentlist li {
	list-style-type: none;
}

#comments ul.commentlist li .comment_left {

float: left;
font-size: 11px;
width: 10%;

}

#comments ul.commentlist li .comment_right {

float: left;
width: 87%;
margin-left: 3%;

}

#comments ul.commentlist ul.children {

padding-left: 13%;

}

#comments ul.commentlist ul.children li .comment_left {

float: left;
font-size: 11px;
width: 10%;

}

#comments ul.commentlist ul.children li .comment_right {

float: left;
width: 87%;
margin-left: 3%;

}

#comments ul.commentlist ul.children ul.children li {

margin-top: 0px;

}

#comments ul.commentlist ul.children ul.children li .comment_left {

float: left;
font-size: 11px;
width: 10%;

}

#comments ul.commentlist ul.children ul.children li .comment_right {

float: left;
width: 87%;
margin-left: 3%;

}

#comments ul.commentlist ul.children ul.children ul.children li .comment_left {

float: left;
font-size: 11px;
width: 10%;

}

#comments ul.commentlist ul.children ul.children ul.children li .comment_right {

float: left;
width: 87%;
margin-left: 3%;

}

#comments ul.commentlist ul.children ul.children ul.children ul.children li .comment_left {

float: left;
font-size: 11px;
width: 10%;

}

#comments ul.commentlist ul.children ul.children ul.children ul.children li .comment_right {

float: left;
width: 87%;
margin-left: 3%;

}

#comments ul.commentlist ul.children ul.children ul.children ul.children ul.children li .comment_left {

float: left;
font-size: 11px;
width: 10%;

}

#comments ul.commentlist ul.children ul.children ul.children ul.children ul.children li .comment_right {

float: left;
width: 87%;
margin-left: 3%;

}

.comment_gravatar {

width: 87%;

}

.comment_gravatar img {
	width: 100%;
	height: 100%;
}

.comment_body {

margin-top: 10px;
padding-bottom: 10px;

}

#page-left ul.commentlist li .comment_body ul, #page-full-width ul.commentlist li .comment_body ul {
	margin-bottom: 30px;
	list-style-type: circle;
	list-style-position: inside;
}

#page-left ul.commentlist li .comment_body ol, #page-full-width ul.commentlist li .comment_body ol {
	margin-bottom: 30px;
	list-style-type: decimal;
	list-style-position: inside;
}

#page-left ul.commentlist li .comment_body ul li, #page-full-width ul.commentlist li .comment_body ul li {
	list-style-type: circle;
	list-style-position: inside;
}

#page-left ul.commentlist li .comment_body ol li, #page-full-width ul.commentlist li .comment_body ol li {
	list-style-type: decimal;
	list-style-position: inside;
}

.comment_body  img, .comment_body div.wp-caption {
	max-width: 100%;
	height: auto;
}

.comment_body  table {
	margin-bottom: 30px;
	box-sizing: border-box;
	width: 95%;
}

.comment_body  table tr, .comment_body  table td, .comment_body table th {
	border: 1px solid #333;
	box-sizing: border-box;
	padding: 3%;
}

.comment_body  dt {
	font-weight: bold;
}

.comment_body  dl {
	margin-bottom: 30px;
}

.comment_body  cite {
	font-weight: bold;
	font-style: italic;
}

.comment_body  code, .comment_body kbd, .comment_body  var {
	font-family: "Consolas", "Courier New", monospace;
}

.comment_body  em {
	font-style: italic;
}

.comment_body  blockquote {
	padding: 20px 20px 0px 20px;
	border: 1px solid #333;
	margin-bottom: 30px;
}

.comment_body  address {
	margin-bottom: 30px;
}

.comment_body  .post-password-form input {
	width: 100%;
}

#page-left ul.commentlist li .comment_body ol li ol, #page-full-width ul.commentlist li .comment_body ol li ol {
	margin-left: 20px;
	margin-bottom: 0px;
}

#page-left ul.commentlist li .comment_body ul li ul, #page-full-width ul.commentlist li .comment_body ul li ul {
	margin-left: 20px;
	margin-bottom: 0px;
}

#page-left ul.commentlist li .comment_body ol li ul, #page-full-width ul.commentlist li .comment_body ol li ul {
	margin-left: 20px;
	margin-bottom: 0px;
}

#page-left ul.commentlist li .comment_body ul li ol, #page-full-width ul.commentlist li .comment_body ul li ol {
	margin-left: 20px;
	margin-bottom: 0px;
}

.comment_body  .post-password-form input[type=submit] {
	margin-top: 20px;
	text-transform: uppercase;
	font-weight: bold;
}

.comment_body  iframe, .comment_body embed {
	width: 100%;
}

#page-content .comment_body h1, #page-content .comment_body h2, #page-content .comment_body h3, #page-content .comment_body h4, #page-content .comment_body h5, #page-content .comment_body h6 {
	text-transform: uppercase;
	padding-bottom: 20px;
}

#page-content .comment_body h2, #page-content .comment_body h4 {
	border: none;
	margin: 0px;
	padding: 0px 0px 20px 0px;
}

#comments ul.children {

padding-left: 17%;

}

.comment_author, .comment_author a {
	font-weight: bold;
	color: #fff;
}

.commentmetadata a {

color: #777;
font-size: 13px;

}

.commentmetadata a:hover {
	color: #ccc;
}

/*-------------------------------------------------------------
5. Contact Form
-------------------------------------------------------------*/

input[type=submit] {
	width: 200px;
	text-align: center;
}

.wpcf7 input, .wpcf7 textarea {
	margin-top: 10px;
}

#commentform input[type=submit], .wpcf7-form-control.wpcf7-submit {
	font-weight: bold;
	color: #fff;
	text-transform: uppercase;
	border-radius: 3px;
	padding: 10px 12px;
	-webkit-font-smoothing: antialiased;
	outline: none;
}

.wpcf7-form-control.wpcf7-submit {
	margin-top: -10px;
}

#commentform input[type=submit]:hover, .wpcf7-form-control.wpcf7-submit:hover {
	background: #111;
}

div.wpcf7-response-output {
	margin-top: 0px;
	margin-left: 0px;
}

#page-content .wpcf7-form p {
	font-weight: bold;
	color: #fff;
	margin-bottom: 25px;
	text-transform: uppercase;
	font-size: 12px;
}

.wpcf7-form input, .wpcf7-form textarea {
	font-weight: normal;
}

/*-------------------------------------------------------------
6. Widget Styles
-------------------------------------------------------------*/

.widget {
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid #26292d;
	list-style-type: none;
}

h2.widgettitle {
	font-size: 16px;
	text-transform: uppercase;
}

.flickr_badge_image {
	float: left;
	margin: 0 9px 6px 0;
}

.flickr_badge_image img {
	background: #444;
	background: rgba(255,255,255,0.1);
	padding: 1px;
	width: 43px;
	height: 40px;
}

iframe#twitter-widget-0 {
		width: 100%;
}

.vimeo_desc, .youtube_desc {
	background: #0a0b0c;
	padding: 6px 14px;
	margin-top: 4px;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
}

.video-wrapper {
	position: relative;
	padding-bottom: 50.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.textwidget img {
	width: 100%;
	height: auto;
}

#page-content .wp-smiley, #page-content a.rsswidget img {
	width: auto;
	height: auto;
}

#page-right {
	
}

#page-right ul {
	list-style-type: circle;
	list-style-position: inside;
}

#page-right ol {
	list-style-type: decimal;
	list-style-position: inside;
}

#page-right img, #page-right div.wp-caption {
	width: 100%;
	height: auto;
}

#page-right table {
	margin-bottom: 30px;
	box-sizing: border-box;
	width: 95%;
}

#page-right table tr, #page-right table td, #page-right table th {
	border: 1px solid #333;
	box-sizing: border-box;
	padding: 3%;
	text-align: center;
}

#page-right .widget_archive select, #page-right .widget_categories select {
	width: 100%;
}

#page-right dt {
	font-weight: bold;
}

#page-right dl {
	margin-bottom: 30px;
}

#page-right cite {
	font-weight: bold;
	font-style: italic;
}

#page-right code, #page-right kbd, #page-right var {
	font-family: "Consolas", "Courier New", monospace;
}

#page-right em {
	font-style: italic;
}

#page-right blockquote {
	padding: 20px 20px 0px 20px;
	border: 1px solid #333;
	margin-bottom: 30px;
}

#page-right address {
	margin-bottom: 30px;
}

#page-right ol li ol {
	margin-left: 20px;
}

#page-right ul li ul {
	margin-left: 20px;
}

#page-right ol li ul {
	margin-left: 20px;
}

#page-right ul li ol {
	margin-left: 20px;
}

#page-right iframe, #page-right embed {
	width: 100%;
}

#page-right select {
	width: 100%;
}

#wp-calendar caption {
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 10px;
	text-align: left;
}

#wp-calendar td a {
	font-weight: bold;
}

/*-------------------------------------------------------------
7. Header Styles
-------------------------------------------------------------*/

header#home {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: #fff;
	text-shadow: 0 0 5px rgba(0,0,0,0.2);
	background: transparent;
	-webkit-backface-visibility: hidden;
}

header#page {
	background: #1A1B1D;	
	position: relative;
	-webkit-backface-visibility: hidden;
}

header#home #header-wrapper, header#page #header-wrapper {
	width: 100%;
	position: relative;
	-webkit-backface-visibility: hidden;
	z-index: 1;
}

header#page {
	box-shadow: inset 5px 5px 15px rgba(0,0,0,0.8);
	-webkit-backface-visibility: hidden;
}

header#home #background, 
header#home #background-container {
	width: 100%;
	height: 100%;	
	background: no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	box-shadow: inset 0px -16px 25px -10px rgba(0,0,0,0.1);
	cursor: url(images/view_cursor.png), auto;
	transition: transform 1s ease-out;
	-webkit-transition: -webkit-transform 1s ease-out;
	transform-origin: center center;
	-webkit-transform-origin: center center;
}

header#home #background.dark, 
header#home #background-container.dark {
	cursor: url("images/view_cursor_black.png"), auto;	
}

header#home #background-container {
	background: no-repeat center center fixed; 	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
}

#page-background {
	width: 100%;
	height: 100%;	
	background: no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	position: relative;
	top: 0;
	left: 0;
	box-shadow: inset 0px -16px 25px -10px rgba(0,0,0,0.1);
}

#slide-title {
	position: absolute;
	bottom: 44px;
	left: 20px;
	z-index: 4;
	font-size: 24px;
	text-shadow: none;
	-webkit-font-smoothing: antialiased;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none; 
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
}

#slide-title.dark {
	color: #000;
}

#slide-info {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 4;
	font-size: 16px;
	text-shadow: none;
	-webkit-font-smoothing: antialiased;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none; 
	font-style: bold;
	color: #fff;
}

#slide-info.dark {
	color: #000;
}

header#home #logo {
	position: relative;
	float: left;
	margin: 20px;
}

header#page #logo {
	position: relative;
	float: left;
	margin: 20px;
}

#works {
	position: absolute;
	bottom: 20px;
	right: 20px;
	text-align: center;
	font-size: 12px;
	-webkit-font-smoothing: antialiased;
	font-weight: 600;
	text-transform: uppercase;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none; 
	color: #fff;
}

#works i {
	display: block;
	margin-top: 6px;
	font-size: 20px;
}

#works.animate i {
	animation: arrowupdown 3s infinite;
	-webkit-animation: arrowupdown 3s infinite;
	transition: all 1.5s ease-out;
	-webkit-transition: all 1.5s ease-out;
}

@keyframes arrowupdown {
	0% {transform: translate3d(0px,0px,0px);}
	30% {transform: translate3d(0px,10px,0px);}
	60% {transform: translate3d(0px,0px,0px);}
}

@-webkit-keyframes arrowupdown {
	0% {transform: translate3d(0px,0px,0px);}
	30% {transform: translate3d(0px,10px,0px);}
	60% {transform: translate3d(0px,0px,0px);}
}

#works.dark {
	color: #000;
}

#slides {
	display: none;
}

/*-------------------------------------------------------------
8. Navigation
-------------------------------------------------------------*/

nav {
	float: right;
	padding: 20px 20px 20px 20px;
	text-align: center;
	text-shadow: none;
}

nav #menu {
	display: none;
	background: rgba(0,0,0,0.7);
	position: relative;
	padding: 20px 20px 20px 26px;
	margin: -10px;
}

nav #menu .menu-main-menu-container {
	float: left;
	margin-right: 30px;
}

#menu-toggle-close {
	float: right;
}

#menu-toggle-close a {
	color: #555;
	font-size: 18px;
}

#menu-toggle-close a:hover {
	color: #fff;
}

nav ul li {
	display: inline;
	float: left;
	margin-right: 20px;
	position: relative;
}

nav ul li i {
	color: #fff;
}

nav ul li:last-child {
	margin-right: 0px;
}

nav ul li a {
	font-weight: bold;
	font-size: 14px;
	padding: 2px 4px;
	-webkit-font-smoothing: antialiased;
	color: #f3f3f3;
	text-shadow: 0 0 3px rgba(0,0,0,0.2);
	text-transform: uppercase;
}

nav ul li ul {
	display: none;
	width: 160px;
	position: absolute;
	right: -5px;
	top:19px;
	padding-top: 20px;
}

nav ul li ul li {
	margin: 0px;
	position: relative;
}

nav ul li ul li a {
	width: 160px;
	display: block;	
	padding: 10px 8px;
	background: rgba(0,0,0,0.8);
	font-size: 13px;
}

nav ul li ul li i.fa {
	position: absolute;
	top: 8px;
	left: 10px;
	display: none;
}

nav ul li ul li a:hover {
	background: #222;
}

nav ul li ul li ul {
	position: absolute;
	left: -176px;
	top: -20px;
}

nav a#menu-toggle {
	font-size: 40px;
	color: #fff;
	border-radius: 5px;
}

nav a#menu-toggle.dark {
	color: #000;
}

/*-------------------------------------------------------------
9. Sticky Header
-------------------------------------------------------------*/

#sticky-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(0,0,0,0.9);
	z-index: 3;
	display: none;
	letter-spacing: 0.06em;
}

#sticky-logo {
	float: left;
	display: block;
	padding: 20px 0px 20px 40px;
}

#sticky-title {
	float: left;
	display: block;
	padding: 28px 0px 20px 20px;
	color: #fff;
	text-transform: uppercase;
}

a#sticky-top {
	float: right;
	display: block;
	padding: 18px 40px 20px 20px;
	margin-top: 5px;
	text-transform: uppercase;
	color: #ddd;
	text-align: center;
	font-size: 12px;
	letter-spacing: normal;
	font-weight: 400;
}

a#sticky-top i {
	margin-bottom: 2px;
}

#sticky-menu {
	float: right;
	padding: 20px 10px 20px 20px;
}

#sticky-menu ul li {
	float: left;
	position: relative;
}

#sticky-menu ul li a {
	padding: 8px 10px;
	text-transform: uppercase;
	color: #eee;
	display: block;
	font-weight: 500;
	font-size: 14px;
}

#sticky-menu ul li ul {
	display: none;
	width: 200px;
	position: absolute;
	right: 0px;
	top:22px;
	padding-top: 28px;
}

#sticky-menu ul li ul li a {
	width: 180px;
	display: block;	
	padding: 10px 8px;
	background: rgba(0,0,0,0.9);
	font-size: 13px;
	text-align: center;
}

#sticky-menu ul li a:hover {
	color: #999;
}

#sticky-menu ul li ul li ul {
	width: 160px;
	position: absolute;
	right: 232px;
	top:-28px;
	padding-top: 28px;
}

#sticky-menu-button, #sticky-top-button {
	display: none;
}

#footer-email:hover {
	color: #ccc;
}

.selected {
	font-weight: 600;
}

/*-------------------------------------------------------------
10. Portfolio
-------------------------------------------------------------*/

.portfolio-item {
	margin: auto;
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

.portfolio-item h2 {
	text-align: center;
	font-weight: bold;
	font-size: 60px;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.4s;  
    transition: transform 0.4s;	
	transform: translate3d(0px, 160px, 0px);
	-webkit-transform: translate3d(0px, 160px, 0px);
	transition-timing-function: ease-out;
	-webkit-transition-timing-function: ease-out;
	padding-bottom: 0px;
	margin-bottom: 0px;
	text-transform: uppercase;
	padding-top: 60px;
	color: #eee;
}

.portfolio-item h3 {
	text-align: center;
	font-size: 18px;
	font-weight: 300;
	color: #eee;
	padding-bottom: 80px;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.4s;  
    transition: transform 0.4s;
	transform: translate3d(0px, 160px, 0px);
	-webkit-transform: translate3d(0px, 160px, 0px);
	transition-timing-function: ease-out;
	-webkit-transition-timing-function: ease-out;
	-webkit-font-smoothing: antialiased;
}

.portfolio-item hr {
	width: 30px;
	height: 5px;
	display: block;
	margin: 20px auto 20px auto;
	background:	#ddd;
	border: none;
	-webkit-transition: -webkit-transform 0.4s;  
    transition: transform 0.4s;
	transform: translate3d(0px, 160px, 0px);
	-webkit-transform: translate3d(0px, 160px, 0px);
	transition-timing-function: ease-out;
	-webkit-transition-timing-function: ease-out;
	opacity: 0;
}

.portfolio-item-content {
	min-height: 800px;
	padding: 125px 0px;
	width: 100%;
	margin: auto;
	background: #1a1b1d;
}

#portfolio article:last-child .portfolio-item-content {
	padding-bottom: 0px;
}

.portfolio-item-content img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0px;
	padding: 0px;
}

#top {
	width: 100%;
	text-align: center;
	padding: 10px 0px;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 13px;
	-webkit-font-smoothing: antialiased;
	font-weight: 600;
}

#top i {
	margin-bottom: 10px;
	display: block;
}

.portfolio-element blockquote {
	padding: 0px;
	margin: 0px;
}

.portfolio-element h4 {
	text-transform: uppercase;
}

.portfolio-element.one {
 opacity: 0;
 position: relative;
	transform: translate3d(0px, 160px, 0px);
	-webkit-transform: translate3d(0px, 160px, 0px);
	-webkit-transition: -webkit-transform 0.6s;  
    transition: transform 0.6s;
	transition-timing-function: ease-out;
	-webkit-transition-timing-function: ease-out;
 }
 
 .portfolio-element.one img {
	 margin-bottom: 0px;
 }

.portfolio-element.two div, .portfolio-element.three div, .portfolio-element.four div {
	opacity: 0;
	position: relative;
	transform: translate3d(0px, 160px, 0px);
	-webkit-transform: translate3d(0px, 160px, 0px);
	-webkit-transition: -webkit-transform 0.6s;  
    transition: transform 0.6s;
	transition-timing-function: ease-out;
	-webkit-transition-timing-function: ease-out;
}

.portfolio-element .quote {
	padding: 40px 40px 40px 40px;
	background: #212224;
	color: #eee;
	font-size: 40px;
	text-align: center;
	text-transform: uppercase;
}

.portfolio-element .info-box {
	padding: 40px;
	background: #252629; 
	color: #eee;
	line-height: 25px;
	overflow: hidden;
	overflow-y: auto;
}

.portfolio-element .info-box h1, .portfolio-element .info-box h2, .portfolio-element .info-box h3, .portfolio-element .info-box h4, .portfolio-element .info-box h5, .portfolio-element .info-box h6 {
	margin-bottom: 0px;
	padding-bottom: 20px;
	line-height: 45px;
	text-transform: uppercase;
}

.portfolio-element .info-box h1 {
	display: none;
}

.portfolio-element .info-box h2 {
	font-weight: bold;
	font-size: 30px;
	line-height: 30px;
}

.portfolio-element .info-box h3 {
	font-weight: bold;
	font-size: 24px;
}

.portfolio-element .info-box h4 {
	font-weight: bold;
	font-size: 20px;
}

.portfolio-element .info-box h5 {
	font-weight: bold;
	font-size: 16px;
}

.portfolio-element .info-box h6 {
	font-weight: bold;
	font-size: 12px;
}

.portfolio-element .info-box.center {
	text-align: center;
}

.portfolio-element .quote h1 {
	line-height: 45px;	
	padding-bottom: 10px;
}

.portfolio-element .quote span {
	font-size: 12px;
	display: block;
	text-align: center;
	color: #555;
	font-weight: bold;
	margin-top: 20px;
}

.portfolio-element .info-box h4 {
	font-weight: bold;
}

.portfolio-element .info-box p {
	color: #eee;
	line-height: 28px;
	font-size: 16px;
	margin-bottom: 20px;
	font-weight: 300;
}

.portfolio-element .portfolio-external-link {
	display: block;
	padding: 40px 30px;
	background: #819190;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	font-size: 40px;
	font-weight: bold;
}

.portfolio-element .info-box ul {
	color: #eee;
	font-size: 16px;
	list-style: disc;
	list-style-position: inside;
	margin-bottom: 25px;
}

.portfolio-element hr {
	background: #47494f;
}

.portfolio-item-end {
	text-align: center;
	font-size: 20px;
	color: #ddd;
	margin-top: 40px;
}

.portfolio-item-end span {
	text-transform: uppercase;
	font-size: 12px;
	display: block;
	margin-top: 10px;
}

#page-loader {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	color: #fff;
	z-index: 99999;
	font-size: 20px;
	background: #1a1b1d;
}

#page-loader-content {
	width: 100px;
	height: 100px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	position: absolute;
	text-align: center;
}

#page-loader-text {
	margin-top: 10px;
}

#view-project-cursor {
	border-radius: 50%;
	border: 2px solid #fff;
	color: #fff;
	padding: 20px 16px;
	z-index: 9999;
	position: absolute;
	top: 60px;
	left: 60px;
	text-transform: uppercase;
	font-weight: bold;
}

.column-1 {
	width: 100%;
	line-height: 25px;
}

.column-1.last {
	margin-right: 0px;
} 

.column-2 {
	width: 48%;
	margin-right: 4%;
	float: left;
}

.column-2.last {
	margin-right: 0px;
} 

.column-3 {
	width: 32%;
	margin-right: 2%;
	float: left;
	line-height: 25px;
	font-size: 20px;
}

.column-3.last {
	margin-right: 0px;
} 

.column-4 {
	width: 25%;
	margin-right: 2%;
	float: left;
	line-height: 25px;
	font-size: 20px;
}

.column-4.last {
	margin-right: 0px;
} 

#portfolio {
	background: #222222;
}

#portfolio .column-1 {
	width: 100%;
}

#portfolio .column-2 {
	width: 50%;
}

#portfolio .column-3 {
	width: 33.3333333333%;
}

#portfolio .column-1, #portfolio .column-2, #portfolio .column-3, #portfolio .column-4 {
	margin-right: 0px;
	overflow: hidden;
}

#project-top {
	position: fixed;
	top: 10px;
	right: 30px;
	z-index: 4;
	text-transform: uppercase;
	display: none;
}

#project-top a {
	text-align: center;
	color: #fff;
}

#project-top a i {
	margin-top: 4px;	
}

#project-top span {
	display: block;
	font-size: 12px;
	font-weight: 600;
}

#project-top i {
	display: block;
	font-size: 20px;
	margin-bottom: 10px;
}

#project-navigation {
	position: fixed;
	top: -10px;
	right: 50%;
	margin-right: -100px;
	z-index: 4;
	display: none;
	transition: width 2s ease-out;
}

#project-navigation ul li ul li:first-child {
	border-bottom: 1px solid #333;
}

#project-navigation ul li {
	float: left;
}

#project-navigation ul li ul li {
	padding: 10px 8px;
	font-size: 20px;
	float: none;
}

#project-navigation ul li ul li a {
	color: #fff;
}

#project-navigation ul li ul li ul li:first-child {
	border-bottom: none;
}

#project-navigation-info {
	margin: 14px 0px 0px 16px;
}

#project-navigation #project-navigation-info-viewing {
	border-bottom: none;
	font-size: 13px;
	font-weight: 600;
	color: #999;
}

#project-navigation #project-navigation-info-project, 
#project-navigation #project-navigation-info-viewing, 
#project-navigation #project-navigation-info-image,
#project-navigation #project-navigation-info-name {
	padding: 0px;
}

#project-navigation #project-navigation-info-viewing {
	margin-bottom: 10px;
	text-transform: uppercase;
	font-size: 12px;
}

#project-navigation #project-navigation-info-image,
#project-navigation #project-navigation-info-name {
	float: left;
}

#project-navigation #project-navigation-info-image {
}

#project-navigation #project-navigation-info-name {
	margin: 10px 0px 0px 10px;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	text-transform: uppercase;
}

#project-navigation-overlay {
	background: rgba(0,0,0,0.9);
	width: 100%;
	height: 106px;
	position: fixed;
	top: -20px;
	left: 0;
	z-index: 3;
	display: none;
	border-bottom: 3px solid rgba(255,255,255,0.14);
}

#project-logo {
	position: fixed;
	top: 15px;
	left: 30px;
	z-index: 4;
	display: none;
	-webkit-font-smoothing: antialiased;	
}

/* Styles for dialog window */
.portfolio-popup {
	background: white;
	padding: 30px 40px;
	text-align: left;
	max-width: 400px;
	margin: 40px auto;
	position: relative;
}

.portfolio-popup p {
	color: #777;
	line-height: 22px;
}

a.popup-info {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	opacity: 0;
}

a.popup-info i {
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -18px;
	font-size: 50px;
	color: #fff;
}

.image-popup-rollover {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.6);
	opacity: 0;	
	box-sizing: border-box;
}

.image-popup-rollover i {
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -18px;
	font-size: 50px;
	color: #fff;
}

/**
 * Fade-zoom animation for first dialog
 */
 
.info-box-popup {
	background: white;
	padding: 20px 30px;
	text-align: left;
	max-width: 400px;
	margin: 40px auto;
	position: relative;
	color: #666;
}

.info-box-popup h2 {
	color: #222;
	padding-bottom: 15px;
}

.info-box-popup p {
	line-height: 25px;
}

/*-------------------------------------------------------------
11. Footer
-------------------------------------------------------------*/

footer {
	padding: 80px 0px 60px 0px;
	background: #111;
	font-size: 13px;
	color: #dcdfe5;
}

footer h4 {
	padding-bottom: 10px;
	font-size: 14px;
	text-transform: uppercase;
}

#footer-left i {
	padding-right: 4px;
}

#footer-left ul li {
	float: left;
	margin-right: 20px;
	color: #6e727a;
}

#footer-left ul li ul li {
	margin-right: 6px;
}

#footer-left p {
	margin-bottom: 10px;
	padding-bottom: 10px;
	margin-top: 7px;
}

#footer-wrapper {
	margin: 0px 40px;
}

#footer-credits {
	color: #6e727a;
}

#footer-credits a {
	color: #a0a4ad;
}

#footer-credits a:hover {
	color: #d5d7dc;
}

#footer-left {
	float: left;
	width: 60%;
}

#footer-right {
	float: left;
	text-align: right;
	margin-top: 8px;
	width: 30%;
	margin-left: 10%;
}

#footer-right p {
	margin-bottom: 10px;
}

/*-------------------------------------------------------------
12. Page
-------------------------------------------------------------*/

#page-content h1, #page-content h2, #page-content h3, #page-content h4, #page-content h5, #page-content h6 {
	padding-bottom: 40px;
}

#page-content.blog {
	margin-bottom: 0px;
}

#page-title {
	margin-bottom: 60px;
	background: #111;
	padding: 60px 0px;
	border-bottom: 3px solid rgba(255,255,255,0.14);
}

#page-title h1 {
	font-size: 50px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	padding-bottom: 0px;
	padding-left: 40px;
	padding-right: 40px;
}

#page-title hr {
	width: 30px;
	height: 5px;
	display: block;
	margin: 20px auto 20px auto;
	background:	#212222;
	border: none;
}

#page-title h2 {
	text-align: center;
	color: #777;
	font-weight: 300;
	font-size: 18px;
	padding-bottom: 0px;
	text-transform: uppercase;
}

#page-wrapper {
	margin: auto;
	padding: 0 40px;
}

#page-content {
	margin: 0px auto 80px auto;
	line-height: 28px;
}

#page-left {
	width: 74%;
	float: left;
	margin-right: 4%;
}

#page-right {
	width: 22%;
	float: left;
	font-size: 14px;
}

#page-right a:hover {
	color: #bfc4cc;
}

#page-content p {
	color: #afafaf;
	margin-bottom: 40px;
	font-size: 16px;
}

#page-content blockquote p {
	margin-bottom: 20px;
}

#page-left ul, #page-full-width ul {
	margin-bottom: 30px;
	list-style-type: circle;
	list-style-position: inside;
}

#page-left ol, #page-full-width ol {
	margin-bottom: 30px;
	list-style-type: decimal;
	list-style-position: inside;
}

#page-left ul li ul, #page-left ol li ol, #page-full-width ul li ul, #page-full-width ol li ol {
	margin-bottom: 0px;
}

#page-left img, #page-left div.wp-caption, #page-full-width img, #page-full-width div.wp-caption {
	max-width: 100%;
	height: auto;
}

#page-left table, #page-full-width table {
	margin-bottom: 30px;
	box-sizing: border-box;
	width: 100%;
}

#page-left table tr, #page-left table td, #page-left table th, #page-full-width table tr, #page-full-width table td, #page-full-width table th {
	border: 1px solid #333;
	box-sizing: border-box;
	padding: 3%;
}

#page-left dt, #page-full-width dt {
	font-weight: bold;
}

#page-left dl, #page-full-width dl {
	margin-bottom: 30px;
}

#page-left cite, #page-full-width cite {
	font-weight: bold;
	font-style: italic;
}

#page-left code, #page-left kbd, #page-left var, #page-full-width code, #page-full-width kbd, #page-full-width var {
	font-family: "Consolas", "Courier New", monospace;
}

#page-left em, #page-full-width em {
	font-style: italic;
}

#page-left blockquote {
	padding: 20px 20px 0px 20px;
	border: 1px solid #333;
	margin-bottom: 30px;
}

#page-left address, #page-full-width address {
	margin-bottom: 30px;
}

#page-left .post-password-form input, #page-full-width .post-password-form input {
	width: 100%;
}

#page-left ol li ol, #page-full-width ol li ol {
	margin-left: 20px;
}

#page-left ul li ul, #page-full-width ul li ul {
	margin-left: 20px;
}

#page-left ol li ul, #page-full-width ol li ul {
	margin-left: 20px;
}

#page-left ul li ol, #page-full-width ul li ol {
	margin-left: 20px;
}

#page-left .post-password-form input[type=submit], #page-full-width .post-password-form input[type=submit] {
	margin-top: 20px;
	text-transform: uppercase;
	font-weight: bold;
}

#page-left iframe, #page-left embed, #page-full-width iframe, #page-full-width embed {
	width: 100%;
}

#social-icons {
	display: block;
	margin-top: 2px;
}

#social-icons li a {
	color: #fff;
	font-size: 20px;
}

/*-------------------------------------------------------------
13. Blog
-------------------------------------------------------------*/

.entry-image img {
	width: 100%;
	height: auto;
	transform-origin: center center;
	transition: transform 0.4s ease-out;
	-webkit-transition: -webkit-transform 0.4s ease-out;
}

#container .post {
	width: 33.333333333%;
	opacity: 0;
	box-sizing: border-box;
}

#page-content .post p {
	margin-bottom: 20px;
}

#page-wrapper.blog {
	padding: 0px;
	width: 100%;
}

#page-content #container .post p {
	text-align: center;
}

#page-title.blog {
	padding-bottom: 60px;
	margin-bottom: 0px;
	border-bottom: none;
}

#page-content h1.entry-title {
	padding-bottom: 10px;
	padding-top: 20px;
}

h1.entry-title a {
	font-size: 20px;
	font-weight:600;
	padding-bottom: 0px;
	color: #fff;
	text-transform: uppercase;
}

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

.post.last {
	margin-right: 0px;
}

a.entry-image {
	margin-bottom: 0px;
	display: block;
}

#page-left .post, #page-left .entry-content {
	width: 100%;
	padding: 0px;
}

#page-left .entry-meta {
	margin-bottom: 30px;
	border-bottom: 1px solid #26292d;
	color: #fff;
	font-weight: bold;
	padding: 0px 0px 30px 0px;
}

#page-left .entry-meta li {
	font-size: 16px;
}

#page-left .entry-meta li a {
	color: #fff;
}

#page-left .entry-meta li a:hover {
	color: #777;
}

#container {
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}

#portfolio article:first-child {
	margin-bottom: 0px;
	background: #333;
}

.entry-meta {
	font-size: 12px;
	text-transform: uppercase;
	margin-bottom: 10px;
	color: #777;
	padding: 0px 20px;
}

.entry-meta i {
	margin-right: 2px;
}

.entry-content {
	text-align: left;
	padding: 10px 40px 20px 40px;
}

.entry-content ul {
	margin-bottom: 30px;
	list-style-type: circle;
	list-style-position: inside;
}

.entry-content ol {
	margin-bottom: 30px;
	list-style-type: decimal;
	list-style-position: inside;
}

.entry-content ul li ul, .entry-content ol li ol {
	margin-bottom: 0px;
}

.entry-content img, .entry-content div.wp-caption {
	max-width: 100%;
	height: auto;
}

.entry-content table {
	margin-bottom: 30px;
	box-sizing: border-box;
	width: 95%;
}

.entry-content table tr, .entry-content table td, .entry-content table th {
	border: 1px solid #333;
	box-sizing: border-box;
	padding: 3%;
}

h1.entry-title, #page-title h1, #page-title h2 {
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}

.entry-content dt {
	font-weight: bold;
}

.entry-content dl {
	margin-bottom: 30px;
}

.entry-content cite {
	font-weight: bold;
	font-style: italic;
}

.entry-content code, .entry-content kbd, .entry-content var {
	font-family: "Consolas", "Courier New", monospace;
}

.entry-content em {
	font-style: italic;
}

.entry-content blockquote {
	padding: 20px 20px 0px 20px;
	border: 1px solid #333;
	margin-bottom: 30px;
}

.entry-content address {
	margin-bottom: 30px;
}

.entry-content .post-password-form input {
	width: 100%;
}

.entry-content ol li ol {
	margin-left: 20px;
	margin-bottom: 0px;
}

.entry-content ul li ul {
	margin-left: 20px;
	margin-bottom: 0px;
}

.entry-content ol li ul {
	margin-left: 20px;
	margin-bottom: 0px;
}

.entry-content ul li ol {
	margin-left: 20px;
	margin-bottom: 0px;
}

.entry-content .post-password-form input[type=submit] {
	margin-top: 20px;
	text-transform: uppercase;
	font-weight: bold;
}

.entry-content iframe, .entry-content embed {
	width: 100%;
}

.sticky {
	background: #000;
	border: 3px solid #333;
}

#page-content .entry-content h1, #page-content .entry-content h2, #page-content .entry-content h3, #page-content .entry-content h4, #page-content .entry-content h5, #page-content .entry-content h6 {
	text-transform: uppercase;
	padding-bottom: 20px;
}

.entry-content h1 {
	font-size: 18px;
}

.entry-content h2 {
	font-size: 16px;
}

.entry-content h3 {
	font-size: 14px;
}

.entry-content h4 {
	font-size: 12px;
}

.entry-content h5 {
	font-size: 10px;
}

.entry-content h6 {
	font-size: 8px;
}

a.more-link {
	width: 100px;
	display: block;
	font-weight: bold;
	margin: 30px auto auto auto;
	border: 1px solid #333;
	padding: 5px 7px;
	text-transform: uppercase;
	text-align: center;
	font-size: 12px;
	color: #eee;
}

a.more-link:hover {
	border-color: #888;
}

.entry-meta li {
	display: inline;
	margin-right: 10px;
}

.entry-meta li:last-child {
	margin-right: 0px;
}

/*-------------------------------------------------------------
14. Shortcodes
-------------------------------------------------------------*/

.column-four {
	width: 22%;
	margin-right: 4%;
	float: left;
	margin-bottom: 40px;
}

.column-four.last {
	margin-right: 0px;
	float: left;
}

.column-three {
	width: 30%;
	margin-right: 5%;
	float: left;
	margin-bottom: 40px;
}

.column-three.last {
	margin-right: 0px;
	float: left;
}

.column-two {
	width: 48%;
	margin-right: 4%;
	float: left;
	margin-bottom: 40px;
}

.column-two.last {
	margin-right: 0px;
	float: left;
}

.column-third-left {
	width: 30%;	
	margin-right: 5%;
	float: left;
	margin-bottom: 40px;
}

.column-third-left.last {
	margin-right: 0px;
	width: 65%;
	float: left;
}

.column-third-right {
	width: 65%;
	margin-right: 5%;
	float: left;
	margin-bottom: 40px;
}

.column-third-right.last {
	margin-right: 0px;	
	width: 30%;
	float: left;
}

.info-box-alt {
	padding: 16px 20px;
	background: #c3edf4;
	color: #0e87ba;
	border: 1px solid #31aadd;
	margin-bottom: 40px;
	font-weight: bold;
}

.alert-box {
	padding: 16px 20px;
	background: #fbf286;
	color: #f5450f;
	border: 1px solid #f49746;
	margin-bottom: 40px;
	font-weight: bold;
}

.error-box {
	padding: 16px 20px;
	background: #ffd5d5;
	color: #ee2828;
	border: 1px solid #f25353;
	margin-bottom: 40px;
	font-weight: bold;
}

.success-box {
	padding: 16px 20px;
	background: #c6f0bc;
	color: #15a21a;
	border: 1px solid #2db828;
	margin-bottom: 40px;
	font-weight: bold;
}

ul.ui-tabs-nav {
	display: block;
	margin-top: 14px;
}

ul.ui-tabs-nav li {
	margin-right: 10px;
	display: inline;
}

ul.ui-tabs-nav li a {
	padding: 16px 20px;
	background: #111;
	font-weight: bold;
	color: #fff;
}

ul.ui-tabs-nav li.ui-tabs-active a {
	background: #26282b;
}

.author-quote {
	margin-bottom: 40px;
	padding: 40px 0px;
	border-top: 1px solid #313131;
	border-bottom: 1px solid #313131;
	font-size: 40px;
	text-align: center;	
}

.author-quote h4 {
	font-size: 40px;
}

.author-quote span {
	font-size: 20px;
	text-transform: uppercase;
}

.video-wrapper.shortcode {
	margin-bottom: 0px;
}

.team {
	margin-bottom: 40px;
}

.team-member {
	width: 33.333333333%;
	float: left;
}

.team-member img {
	width: 100%;
	display: block;
}

.team-member-content {
	padding: 30px;
	background: #111;
	text-align: center;
}

#page-content hr {
	border: none;
	background: #26292d;
	height: 1px;
	padding: 0px;
	margin: 0px;
	margin-top: 50px;
	display: block;
}

#page-content .team-member-content h4 {
	text-align: center;
	padding-bottom: 20px;
}

ul.team-member-social {
	margin-bottom: 10px;
	text-align: center;
}

.team-member-social li {
	display: inline;
	margin-right: 10px;
}

.team-member-social li:last-child {
	margin-right: 0px;
}

ul.team-member-social li a {
	color: #eee;
}

.accordion div {
	padding: 14px;
	background: #26282b;
}

.ui-accordion, .ui-tabs {
	margin-bottom: 40px;
}

#page-content h3.accordion {
	padding-bottom: 0px;
	padding: 8px 16px;
	text-transform: uppercase;
	font-size: 16px;
	background: #111;
	cursor: pointer;
} 

#page-content h3.accordion:hover {
	background:#141414;
}

a.button-shortcode {
	padding: 10px 8px;
}

#map-canvas {
	width: 100%;
	height: 480px;
	margin-bottom: 40px;
}

/*-------------------------------------------------------------
15. 404 Page
-------------------------------------------------------------*/

#page-content p.four-oh-four {
	text-align: center;
	margin-bottom: -20px;
}

/*-------------------------------------------------------------
16. Mobile Menu
-------------------------------------------------------------*/

#mobile {
	position: fixed;
	top: 0px;
	left: 0px;
	background: #1a1b1d;
	background: rgba(0,0,0,0.9);
	z-index: 99999;
	width: 100%;
	height: 100%;
	display: none;
	overflow-y: scroll;
}

a#mobile-close {
	position: fixed;
	top: 22px;
	right: 20px;
	font-size: 24px;
	color: #fff;
	opacity: 0.3;
}

#mobile-logo {
	padding: 20px;
	text-align: center;
	display: block;
}

#mobile-menu ul li a {
	display: block;
	text-align: center;
	padding: 14px 16px;
	border-top: 1px solid #222;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 14px;
	color: #fff;
}

#mobile-menu ul li a:hover {
	background: #1c1c1c;
}

#mobile ul li ul {
	display: none;
}

#mobile ul li ul li a {
	background: #2a2a2a;
	font-size: 12px;
	border-top: 1px solid #474646;
}

#mobile ul li ul li a:hover {
	background: #363636;	
}

#mobile ul li ul li {
	display: block;
}

/*-------------------------------------------------------------
17. HTML5 Player
-------------------------------------------------------------*/

.mejs-video {
	width: 100%;
	height: 100%;
}

.mejs-poster {
	background-size: cover;
}

/*-------------------------------------------------------------
18. Search Form
-------------------------------------------------------------*/

#searchform .screen-reader-text {
	display: none;
}

#searchform #searchsubmit {
	width: 100%;
	margin-top: 5px;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 3px;
}

#searchform #searchsubmit:hover {
	background: #111;
}

/*-------------------------------------------------------------
19. Pagination
-------------------------------------------------------------*/

#post-links {
	padding: 25px 40px 20px 40px;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	background: #232427;
	text-align: center;
	color: #777;
}

#post-links a {
	color: #fff;
	display: block;
}

#post-links i {
	font-size: 30px; 
	display: block;
}

#post-links-left {
	float: left;
}

#post-links-right {
	float: right;
}

/*-------------------------------------------------------------
20. CSS Transitions
-------------------------------------------------------------*/

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
	opacity: 0;

	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out; 



	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
	opacity: 1;

	-webkit-transform: scale(1); 
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	transform: scale(1); 
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 

	opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
	opacity: 0.001; /* Chrome opacity transition bug */
	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
	opacity: 0;
}


/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
	padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
	padding: 0;
}


/* 

for zoom animation 
uncomment this part if you haven't added this code anywhere else

*/
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0.001; /* chrome opacity transition bug */
	-webkit-backface-visibility: hidden;
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out; 
	-o-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}

/*-------------------------------------------------------------
21. Media Queries
-------------------------------------------------------------*/

@media (min-width: 1400px) and (max-width: 99999px) {
	#portfolio {
		margin: auto;
		background: #1a1b1d;
	}
	#page-content {
		width: 1400px;
		margin: 0px auto 80px auto;
	}
	#page-content.blog {
		width: 100%;		
	}
}

@media (min-width: 0px) and (max-width: 800px) {
	#container .post {
		width: 100%;
	}
	#footer-left, #footer-right {
		width: 100%;
		text-align: center;
		margin-left: 0px;
	}
	
	#footer-left ul li {
		float: none;
		margin-bottom: 30px;
	}
	
	#footer-left ul li ul li {
		display: inline;
		margin-bottom: 0px;
		margin-top: 5px;
	}
	
	#footer-left ul li ul li:last-child {
		margin-right:0px; 
	}
	
	#footer-right {
		margin-bottom: 30px;
		border-top: 1px solid #222;
		padding-top: 40px;
	}
	
	footer {
		padding: 40px 0px 10px 0px;
		font-size: 16px;
	}
	
	footer h4 {
		font-size: 16px;
	}	
}

@media (min-width: 0px) and (max-width: 768px) {
	
	body {
		font-size: 18px;
		overflow-x: hidden;
	}
		
	#sticky-header {
		padding: 0px;
	}
	
	#sticky-menu {
		display: none;
	}

	#sticky-title {
		display: none;
	}
		
	#sticky-logo {
		float: left;
		padding: 20px 40px;
	}
	
	#sticky-title {
		padding: 26px 0px 20px 0px;
	}
	
	a#sticky-top {
		display: none;
	}
	
	.column-two, .column-three, .column-four, .column-third-left, .column-third-left.last, .column-third-right, .column-third-right.last {
		width: 100%;
		margin-right: 0px;
	}
	
	.team-member {
		width: 100%;
		margin-right: 0px;
	}
	
	input, input[type=submit] {
		width: 100%;
	}
	
	#page-left, #page-right {
		width: 100%;
		float: none;
		margin-right: 0px;
	}
	
	#sticky-menu-button {
		display: inline;
		float: right;
		opacity: 0.6;
	}
	
	#sticky-menu-button a {
		padding: 25px 40px 22px 22px;
		font-size: 20px;
		display: block;	
		color: #fff;
	}

	#sticky-top-button {
		display: inline;
		float: right;
		opacity: 0.6;
	}
	
	#sticky-top-button a {
		padding: 25px 0px 22px 22px;
		font-size: 20px;
		display: block;	
		color: #fff;
	}
		
	#footer-left ul li:first-child {
		margin-bottom: 36px;
	}
	
	#footer-left ul li ul {
		margin-left: 5px;
	}
	
	#project-logo {
		display: none;
		left: -400px;
	}
	
	#project-navigation {
		left: 20px;
		margin-right: 0px;
		width: 60%;
	}
	
	#portfolio .column-1, #portfolio .column-2, #portfolio .column-3, #portfolio .column-4 {
		width: 100%;
	}
	
	#page-right {
		border-top: 1px solid #333;
		padding-top: 40px;
		margin-top: 45px;
	}
	
	.portfolio-item-title {
		padding-left: 40px;
		padding-right: 40px;
	} 
	
	footer {
		padding-top: 60px;
	}
	
	#slide-title {
		font-size: 16px;
	}
	
}

@media (min-width: 0px) and (max-width: 390px) {
	#project-navigation-info {
		font-size: 10px;
	}	
	#project-navigation #project-navigation-info-viewing {
		font-size: 10px;
	}	
	#project-navigation #project-navigation-info-name {
		font-size: 10px;
		word-wrap: break-word;
	}
	.portfolio-item-title h2 {
		font-size: 40px;
	}
	.portfolio-item-title h3 {
		font-size: 24px;
	}
	#slide-title {
		font-size: 16px;
	}
	#slide-info {
		font-size: 14px;
	}
	#footer-right {
		line-height: 25px;
	}
	a#mobile-close {
		font-size: 30px;
	}
	#mobile-close {
		top: 10px;
	}
	ul.ui-tabs-nav li {
		display: block;
		margin-bottom: 16px;
		float: none;
		width: 100%;
	}
	ul.ui-tabs-nav li a {
		display: block;		
	}
}