@charset "UTF-8";

/*------------------------------------------------------------------
[Table of contents]

1. Main Styling
2. Preloader
3. Slide Preloader
4. Start Animations
5. Slides Controls
6. Main Pagination
7. Contact Form
8. Comments Area
9. Header
10. Navigation
11. FP Navigation
12. Scroll Toggle
13. Main Section
14. About Section
15. Portfolio Section
	15.1. Portfolio Container
	15.2. Filter Box
16. Blog Section
	16.1. Blog Item
17. Contact Section
18. Single Project Slide
19. Blogpost Slide
20. Search Form
21. 404 Page
20. Responsive

-------------------------------------------------------------------*/

/* === 1. START MAIN STYLING === */
@import url(http://fonts.googleapis.com/css?family=Roboto:500,900,300,700,400);
* {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
}
body {
	font-family: 'Roboto', sans-serif;
    background: #F3F3F3;
}
input[type="number"],
input[type="search"],
input[type="email"],
input[type="text"],
textarea {
    -webkit-appearance: none;
    border-radius: 0;
}
.section {
	position: relative;
}
.fp-slide {
    float: left;
}
.fp-slide, .fp-slidesContainer {
    height: 100%;
    display: block;
}
.fp-slides {
    z-index:1;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.no-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.row-fit-20 {
	margin: 0 -10px;
}
html .row-fit-20 [class*=col-] {
	padding: 0 10px;
}
.row-fit-2 {
	margin: 0 -1px;
}
html .row-fit-2 [class*=col-] {
	padding: 0 1px;
}
img {
	max-width: 100%;
	height: auto;
}
.section-content {
	height: 100vh;
}
.container {
	padding-top: 125px;
}

/* === 2. START PRELOADER === */
.dom-ready .preloader {
	opacity: 0;
	visibility: hidden;
}
.dom-ready .preloader-wrapper {
	-webkit-transform: scale(2.5) translateY(-50%);
	-moz-transform: scale(2.5) translateY(-50%);
	-ms-transform: scale(2.5) translateY(-50%);
	-o-transform: scale(2.5) translateY(-50%);
	transform: scale(2.5) translateY(-50%);
	top: 50%;
}
.preloader {
	position: fixed;
	z-index: 999;
	opacity: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	text-align: center;

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

	-webkit-transition: .3s all ease-in-out;
	-moz-transition: .3s all ease-in-out;
	-ms-transition: .3s all ease-in-out;
	-o-transition: .3s all ease-in-out;
	transition: .3s all ease-in-out;
}
.preloader-wrapper {
	position: relative;
	display: inline-block;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: .2s all ease-in-out;
	-moz-transition: .2s all ease-in-out;
	-ms-transition: .2s all ease-in-out;
	-o-transition: .2s all ease-in-out;
	transition: .2s all ease-in-out;
}
.preloader img {
	width: auto;
	max-width: 100%;

	-webkit-animation: scaleAnimation 2s infinite;
	-moz-animation: scaleAnimation 2s infinite;
	-ms-animation: scaleAnimation 2s infinite;
	-o-animation: scaleAnimation 2s infinite;
	animation: scaleAnimation 2s infinite;
}
@-webkit-keyframes scaleAnimation {
	0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
	50% {
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-o-transform: scale(1.2);
		transform: scale(1.2);
		opacity: 0.8;
	}
	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}
@-moz-keyframes scaleAnimation {
	0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
	50% {
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-o-transform: scale(1.2);
		transform: scale(1.2);
		opacity: 0.8;
	}
	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}
@-ms-keyframes scaleAnimation {
	0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
	50% {
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-o-transform: scale(1.2);
		transform: scale(1.2);
		opacity: 0.8;
	}
	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}
@-o-keyframes scaleAnimation {
	0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
	50% {
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-o-transform: scale(1.2);
		transform: scale(1.2);
		opacity: 0.8;
	}
	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

.dom-ready .content {
	opacity: 1;
}
.content {
	opacity: 0.1;

	-webkit-transition: .4s all cubic-bezier(.23,1,.32,1);
	-moz-transition: .4s all cubic-bezier(.23,1,.32,1);
	-ms-transition: .4s all cubic-bezier(.23,1,.32,1);
	-o-transition: .4s all cubic-bezier(.23,1,.32,1);
	transition: .4s all cubic-bezier(.23,1,.32,1);

	-webkit-transition-delay: .35s;
	-moz-transition-delay: .35s;
	-ms-transition-delay: .35s;
	-o-transition-delay: .35s;
	transition-delay: .35s;
}

/* === 3. START SLIDE PRELOADER === */
.opening-slide .slide-preloader {
	visibility: visible;
	opacity: 1;
}
.slide-preloader {
	position: fixed;
	opacity: 0;
	visibility: hidden;
	z-index: 99;
	background: #fff;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;

	-webkit-transition: .3s all ease-in-out;
	-moz-transition: .3s all ease-in-out;
	-wp-transition: .3s all ease-in-out;
	-o-transition: .3s all ease-in-out;
	transition: .3s all ease-in-out;
}
.slide-preloader .slide-preloader-wrapper {
	position: relative;
	display: inline-block;
	top: 50%;
	font-size: 0;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.slide-preloader .slide-preloader-wrapper span {
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 7%;
}
.opening-slide .slide-preloader .slide-preloader-wrapper span {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-ms-animation-delay: 1s;
	-o-animation-delay: 1s;
	animation-delay: 1s;

	-webkit-animation: distanceAnimation 2s infinite;
	-moz-animation: distanceAnimation 2s infinite;
	-ms-animation: distanceAnimation 2s infinite;
	-o-animation: distanceAnimation 2s infinite;
	animation: distanceAnimation 2s infinite;
}
.slide-preloader .slide-preloader-wrapper span:nth-of-type(1) {
	background: #3498db;
	margin: -50px -50px -50px 0 ;
}
.slide-preloader .slide-preloader-wrapper span:nth-of-type(2) {
	background: #2ecc71;
	margin: -50px 0 -50px 0;
}
.slide-preloader .slide-preloader-wrapper span:nth-of-type(3) {
	background: #f1c40f;
	margin: -50px -50px 0 0;
}
.slide-preloader .slide-preloader-wrapper span:nth-of-type(4) {
	background: #e74c3c;
	margin: -50px 0 0 0;
}

@-webkit-keyframes distanceAnimation {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	30% {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);

		margin: 25px;
	}

	100% {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}
@-moz-keyframes distanceAnimation {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	30% {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);

		margin: 25px;
	}

	100% {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}
@-ms-keyframes distanceAnimation {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	30% {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);

		margin: 25px;
	}

	100% {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}
@-o-keyframes distanceAnimation {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	30% {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);

		margin: 25px;
	}

	100% {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}

/* === 4. START ANIMATIONS === */
#fp-nav ul li .fp-tooltip,
.scroll-toggle span,
.scroll-up span,
.go-back i,
.go-back span,
.services-carousel .services-carousel-item .link,
.filter-box ul li a,
.share-links ul li a,
.comments-area .ul-comments .comment .comment-body .comment-reply,
.blogpost-header .details ul li a,
.blogpost-body .panel-group .panel-title a,
.similar-posts .similar-post .view-post,
.similar-posts .similar-post .view-post a,
.timeline-box ul li .details-wrapper .timeline-circle,
.timeline-box ul li .details-wrapper h3 a,
.timeline-box ul li .date-wrapper .date,
.blog-item .details-wrapper .details .lower ul li span,
.share-blogpost ul li,
.project-cover .slider-nav i,
.search-form a,
.content-wrapper-404 .content-404 .back-home {
	-webkit-transition: all .3s cubic-bezier(.23,1,.32,1);
	-moz-transition: all .3s cubic-bezier(.23,1,.32,1);
	-ms-transition: all .3s cubic-bezier(.23,1,.32,1);
	-o-transition: all .3s cubic-bezier(.23,1,.32,1);
	transition: all .3s cubic-bezier(.23,1,.32,1);
}
.scroll-up i,
.pagination ul li a,
.contact-form input,
.contact-form label,
.contact-form textarea {
	-webkit-transition: .2s ease;
	-moz-transition: .2s ease;
	-ms-transition: .2s ease;
	-o-transition: .2s ease;
	transition: .2s ease;
}

/* === 5. START SLIDES CONTROLS === */
body.fp-viewing-portfolio .nav-toggle,
body.fp-viewing-blog .nav-toggle {
/*	color: #000;*/
}
body.fp-viewing-portfolio .header .nav-toggle:hover,
body.fp-viewing-blog .header .nav-toggle:hover {
/*	border-color: #000;*/
}
body.fp-viewing-portfolio #fp-nav ul li a span,
body.fp-viewing-blog #fp-nav ul li a span {
	border-color: #000;
}
body.fp-viewing-portfolio #fp-nav ul li.active a span,
body.fp-viewing-blog #fp-nav ul li.active a span {
	background: #000;
}
body.fp-viewing-portfolio #fp-nav ul li .fp-tooltip,
body.fp-viewing-blog #fp-nav ul li .fp-tooltip {
	color: #000;
}
body.fp-viewing-portfolio .scroll-toggle span,
body.fp-viewing-blog .scroll-toggle span {
	color: #767676;
}
body.fp-viewing-portfolio .scroll-toggle i,
body.fp-viewing-blog .scroll-toggle i {
	border-color: rgba(0, 0, 0, 0.2);
	color: rgba(0, 0, 0, 0.2);
}


body.fp-viewing-contact #fp-nav ul li a span {
	border-color: #fff;
}
body.fp-viewing-contact #fp-nav ul li.active a span {
	background: #fff;
}
body.fp-viewing-contact #fp-nav ul li .fp-tooltip {
	color: #fff;
}

/* === 6. START MAIN PAGINATION === */
.pagination {
	padding-top: 35px;
	padding-bottom: 100px;
}
.pagination ul {
	margin: 0;
	padding: 0;
	font-size: 0;
	list-style-type: none;
}
.pagination ul li {
	display: inline-block;
	margin-right: 25px;
}
.pagination ul li:last-of-type {
	margin: 0;
}
.pagination ul li a {
	color: #767676;
	font-size: 17px;
	line-height: 1em;
	text-decoration: none;
}
.pagination ul li span {
	color: #e55b01;
	font-size: 17px;
	line-height: 1em;
}
.pagination ul li a.current,
.pagination ul li a:hover {
	color: #e55b01;
}

/* === 7. START CONTACT FORM === */
@media (min-width: 991px) {
	.contact-bg-wrapper {
		padding-bottom: 100px;
	}	
}

.contact-form .input-group {
	position: relative;
	padding-top: 15px;
	margin-bottom: 40px;
}
.contact-form .input-group .label {
	position: absolute;
	top: 0;
	left: 0;
	color: #b7b7b7;
	font-size: 14px;
	font-weight: 300;
}
.contact-form input:not([type='submit']),
.contact-form textarea {
	width: 100%;
	color: #119a6b;
	font-size: 16px;
	font-weight: 300;
	background: transparent;
	padding: 12px 15px 12px 0;
	border-bottom: 3px solid #efeded;
}
.contact-form input:not([type='submit']):focus,
.contact-form textarea:focus {
	outline: none;
}
.contact-form .input-group input.has-value ~ .label,
.contact-form .input-group textarea.has-value ~ .label,
.contact-form .input-group input:focus ~ .label,
.contact-form .input-group textarea:focus ~ .label {
	color: #119a6b;
}
.contact-form .input-group input.has-value,
.contact-form .input-group textarea.has-value,
.contact-form .input-group input:focus,
.contact-form .input-group textarea:focus {
	border-color: #119a6b;
}
.contact-form input[type='submit'] {
	color: #e7e7e7;
	margin-top: 10px;
	outline: none;
	font-size: 15px;
	font-weight: 900;
	line-height: 1em;
	text-transform: uppercase;
	padding: 16px 18px;
	border: 0;
	background: #1f1e1d;
}
.contact-form input[type='submit']:hover,
.contact-form input[type='submit']:active {
	color: #fff;
	outline: none;
	background: #f26101;
}

.contact-form .input-group label.error {
	color: #fa5353;
	width: 100%;
}

/* === 8. START COMMENTS AREA === */
.comments-area {}
.comments-area .comment-title {
	margin: 0;
	color: #000;
	font-size: 13px;
	font-weight: 300;
	line-height: 1em;
	text-transform: uppercase;
	padding-bottom: 25px;
	border-bottom: 1px solid #e7e7e7;
}
.comments-area .ul-comments {
	margin: 0;
	padding: 50px 0 0 0;
	list-style-type: none;
}
.comments-area .ul-comments .comment {
	position: relative;
	padding-left: 150px;
	margin-bottom: 20px;
}
.comments-area .ul-comments .comment .ul-comments {
	margin-left: -100px;
	padding-top: 20px;
}
.comments-area .ul-comments .comment:last-of-type {
	margin: 0;
}
.comments-area .ul-comments .comment .comment-avatar {
	position: absolute;
	top: 0;
	left: 0;
	width: 105px;
	height: 105px;
}
.comments-area .ul-comments .comment .comment-avatar img {
	border-radius: 50%;
}
.comments-area .ul-comments .comment .comment-body {
	background: #fff;
	padding: 25px 30px 30px 30px;
}
.comments-area .ul-comments .comment .comment-body h3,
.comments-area .ul-comments .comment .comment-body .comment-reply {
	display: inline-block;
}
.comments-area .ul-comments .comment .comment-body h3 {
	margin: 0;
	color: #000;
	font-size: 19px;
	font-weight: 700;
	line-height: 1em;
}
.comments-area .ul-comments .comment .comment-body .comment-reply {
	margin: 5px 0 0 40px;
	color: #dddcdc;
	font-size: 14px;
	font-weight: 900;
	line-height: 1em;
	text-decoration: none;
	text-transform: uppercase;
}
.comments-area .ul-comments .comment .comment-body .comment-reply:hover {
	color: #f26101;
}
.comments-area .ul-comments .comment .comment-body .message {
	margin: 0;
	padding: 30px 0 35px 0;
	border-bottom: 1px solid #ececec;
	color: #9b9a9a;
	font-size: 14px;
	line-height: 18px;
}
.comments-area .ul-comments .comment .comment-body .date {
	margin: 0;
	padding-top: 15px;
	color: #777;
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
}
/* === 9. START HEADER === */
.header {
	position: fixed;
	padding: 45px 75px 0 65px;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 99;
}
.header .brand {
	float: right;
}
.header .nav-toggle {
	margin: 10px 0 0 10px;
	text-align: center;
	cursor: pointer;
	font-size: 22px;
	padding-top: 17px;
	width: 60px;
	height: 60px;
	color: #888;
	border: 3px solid transparent;
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-ms-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
.header .nav-toggle:hover {
	border-color: #fff;
}
.mobile-brand {
	display: none;
}

/* === 10. START NAVIGATION === */
nav {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 99;
	text-align: center;
	background: rgba(0, 0, 0, 0.95);
	visibility: hidden;
	opacity: 0;
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
	-o-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	-moz-transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	-ms-transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	-o-transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
nav.open {
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: transform 0.4s, opacity 0.4s;
	-moz-transition: transform 0.4s, opacity 0.4s;
	-ms-transition: transform 0.4s, opacity 0.4s;
	-o-transition: transform 0.4s, opacity 0.4s;
	transition: transform 0.4s, opacity 0.4s;
}
nav .nav-close {
	font-size: 60px;
	color: #fff;
}
nav ul {
	position: relative;
	list-style-type: none;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
nav ul li:first-child {
	margin-bottom: 100px;
}
nav ul li .nav-close {
	cursor: pointer;
}
nav ul li a {
	position: relative;
	padding: 0 30px;
	color: #fff;
	font-size: 66px;
	font-weight: 900;
	border-bottom: 3px solid transparent;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
nav ul li a:focus {
	text-decoration: none;
	color: #fff;
}
nav ul li a:hover {
	color: #f26101;
	border-color: #f26101;
	text-decoration: none;
}
nav ul li a:hover:before,
nav ul li a:hover:after {
	position: absolute;
	top: 19px;
	font-size: 40px;
}
nav ul li a:hover:before {
	content: "* ";
	left: 0;
}
nav ul li a:hover:after {
	content: " *";
	right: 0;
}

/* === 11. START FP NAVIGATION === */
#fp-nav {
	z-index: 1;
	position: fixed;
	top: 50%;
	margin-top: -110px;
	right: 90px;
}
#fp-nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#fp-nav ul li {
	position: relative;
	margin-bottom: 25px;
}
#fp-nav ul li:last-of-type {
	margin: 0;
}
#fp-nav ul li:hover .fp-tooltip {
	right: 25px;
	opacity: 1;
	visibility: visible;
}
#fp-nav ul li a span {
	display: inline-block;
	height: 11px;
	width: 11px;
	border: 1px solid #000;
	border-radius: 50%;
	background: transparent;
}

#fp-nav ul li.active a span {
	background: #000;
}


#fp-nav ul li .fp-tooltip {
	position: absolute;
	color: #000;
	top: -3px;
	right: 10px;
	opacity: 0;
	white-space: nowrap;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.2em;
    overflow: hidden;
    display: block;
	visibility: hidden;
}

/* === 12. START SCROLL TOGGLE === */
.scroll-toggle {
	position: absolute;
	z-index: 1;
	bottom: 50px;
	left: 50%;
	margin-left: -26px;
}
.scroll-toggle i,
.scroll-toggle span {
	display: block;
}
.scroll-toggle i {
	cursor: pointer;
	font-size: 40px;
	height: 50px;
	width: 50px;
	text-align: center;
	padding-top: 3px;
	color: rgba(66, 66, 66, 0.2);
	border: 3px solid rgba(66, 66, 66, 0.2);
	border-radius: 50%;
}
.scroll-toggle.up i {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
.scroll-toggle i:hover {
	color: rgba(66, 66, 66, 0.6);
	border: 3px solid rgba(66, 66, 66, 0.6);
}
.scroll-toggle i:hover + span {
	margin-top: 13px;
	opacity: 1;
	visibility: visible;
}
.scroll-toggle span {
	text-align: center;
	position: absolute;
	font-size: 14px;
	color: rgba(66, 66, 66, 0.6);
	width: 74px;
	margin-left: -11px;
	margin-top: 5px;
	opacity: 0;
	visibility: hidden;
}
.scroll-toggle.up i {
	color: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.7);
}
.scroll-toggle.up i:hover {
	color: rgba(255, 255, 255, 1);
	border: 1px solid rgba(255, 255, 255, 1);
}
.scroll-toggle.up span {
	color: rgba(255, 255, 255, 1);
	
}

/* === 13. START MAIN SECTION === */
.section-content .container,
.container .main-info,
.container .main-info,
.container .main-info .row,
.container .main-info .row > div {
	min-height: 100%;
}
.main-info {
	margin-top: 200px;
}
.main-info .logo {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.main-info .short-info-wrapper {
	position: relative;
	color: #666;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.main-info .short-info-wrapper .text {
	margin-top: -50px;
}
.main-info .short-info-wrapper h1 {
	font-size: 130px;
	line-height: 130px;
	font-weight: normal;
	margin: 0 0 30px 0;
}
.main-info .short-info-wrapper h2 {
	font-size: 46px;
	font-weight: 300;
	margin: 0 0 20px 0;
}
.main-info .short-info-wrapper h2 span {
	font-weight: 700;
}
.main-info .short-info-wrapper p {
	font-size: 19px;
	font-weight: 300;
	line-height: 32px;
}
.main-info .short-info-wrapper .image {
	position: absolute;
	padding-top: 50px;
	width: 300px;
	left: 30px;
}
.main-info .short-info-wrapper .image img {
	border-radius: 50%;
}

/* === 14. START ABOUT SECTION === */
.title {
	color: #fff;
}
.title h2 {
	font-size: 90px;
	line-height: 1em;
	font-weight: bold;
	margin: 0 0 15px 0;
}
.title p {
	font-size: 19px;
	font-weight: 300;
	line-height: 32px;
	margin: 0;
}

.services-carousel {
	position: relative;
	margin-bottom: 20px;
}
.services-carousel .carousel-controls {
	position: absolute;
	display: block;
	top: 0;
	margin-left: -70px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	z-index: 2;
}
.services-carousel .tesla-carousel-items {
	overflow: hidden;
}
.services-carousel .carousel-controls span .fa {
	color: rgba(255, 255, 255, 0.08);
	padding: 5px 10px;
	font-size: 16px;
	display: inline-block;
	cursor: pointer;
}
.services-carousel .carousel-controls span:last-of-type {
	margin-left: -5px;
}
.services-carousel .carousel-controls span:hover .fa {
	color: #fff;
}
.services-carousel .services-carousel-item {
	position: relative;
	padding: 20px 25px;
	height: 170px;
}
.services-carousel .services-carousel-item .icon {
	display: inline-block;
	font-size: 38px;
	color: #fff;
	margin-bottom: 40px;
}
.services-carousel .services-carousel-item .link {
	position: absolute;
	cursor: pointer;
	right: 0;
	bottom: 40px;
	display: inline-block;
	color: #fff;
	font-size: 12px;
	padding: 10px;
	background: rgba(0, 0, 0, 0.2);
}
.services-carousel .services-carousel-item .link:hover {
	background: rgba(0, 0, 0, 0.4);
}
.services-carousel .services-carousel-item .title {
	font-size: 19px;
	line-height: 21px;
	font-weight: 400;
	margin: 0;
}
.services-carousel .services-carousel-item.logo {
	background: #382652;
}
.services-carousel .services-carousel-item.customers {
	background: #4d6baa;
}
.services-carousel .services-carousel-item.music {
	background: #e55b01;
}
.services-carousel .services-carousel-item.support {
	background: #ea6060;
}

.timeline-box {
	height: 525px;
	padding: 60px 40px 60px 45px;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.timeline-box ul {
	height: 100%;
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: auto;
}
.timeline-box ul li {
	color: #444;
	padding-right: 100px;
}
.timeline-box ul li:hover .date-wrapper .date,
.timeline-box ul li:hover .details-wrapper h3 a {
	color: #5dd33d;
}
.timeline-box ul li:hover .details-wrapper .timeline-circle {
	border-color: #5dd33d;
}
.timeline-box ul li .date-wrapper {
	position: relative;
	padding-top: 55px;
}
.timeline-box ul li .date-wrapper .date {
	position: absolute;
	right: 20px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	margin-top: 6px;
}
.timeline-box ul li .details-wrapper {
	position: relative;
	padding: 55px 0 0 55px;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.timeline-box ul li .details-wrapper .timeline-circle {
	position: absolute;
	left: 0;
	background: #444;
	margin: -15px 0 0 -29px;
	display: inline-block;
	height: 58px;
	width: 58px;
	border-radius: 50%;
	border: 13px solid rgba(255, 255, 255, 0.4);
}
.timeline-box ul li .details-wrapper h3 {
	margin: 0 0 25px 0;
}
.timeline-box ul li .details-wrapper h3 a {
	color: #444;
	font-size: 31px;
	line-height: 1em;
	font-weight: 700;
	text-decoration: none;
}
.timeline-box ul li .details-wrapper p {
	color: #666;
	font-size: 17px;
	line-height: 21px;
	font-weight: 300;
	margin: 0;
}
.timeline-box ul .mCSB_scrollTools {
	width: 24px;
	opacity: 1;
}
.timeline-box ul .mCSB_draggerRail {
	width: 4px;
	border-radius: 0;
}
.timeline-box ul .mCSB_dragger {
	width: 24px !important;
	height: 24px !important;
	border-radius: 50%;
	background: #5dd33d !important;
}
.timeline-box ul .mCSB_dragger_bar {
	height: 450px !important;
	margin-top: -450px !important;
	border-radius: 0 !important;
	background: #444 !important;
}
.awards-box {
	line-height: 1em;
	height: 525px;
	background: #fff;
	padding: 25px;
}
.awards-box .icon {
	display: inline-block;
	padding: 15px;
	color: #eab71c;
	font-size: 32px;
	border: 1px solid #e9e9e9;
}
.awards-box .box-title {
	display: inline-block;
	margin-left: 18px;
	color: #858585;
	font-size: 30px;
	line-height: 32px;
	font-weight: 700;
	max-width: 110px;
}
.awards-box ul {
	padding: 32px 0 0 45px;
}
.awards-box ul li {
	color: #858585;
	margin-bottom: 35px;
}
.awards-box ul li:last-of-type {
	margin: 0;
}
.awards-box ul li h3 {
	font-size: 19px;
	margin: 0 0 20px 0;
	font-weight: 400;
}
.awards-box ul li p {
	color: #bfbfbf;
	font-size: 17px;
	line-height: 21px;
	font-weight: 300;
	margin: 0;
}
.awards-box ul li h3,
.awards-box ul li p {
	padding-left: 5px;
}

/* === 15. START PORTFOLIO SECTION === */
.section-title {
	color: #000;
	font-size: 90px;
	font-weight: 900;
	line-height: 1em;
	margin: 0;
}
@media (max-width: 400px) {
	.section-title {
		font-size: 50px;	
	}
}
	

/* === 15.1. Styling Portfolio Container === */
.portfolio-item {
	position: relative;
	margin-bottom: 20px;
}
.portfolio-item img {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	transition: opacity .4s ease;
	transition: transform .4s ease;
}
.portfolio-item .details  {
	position: absolute;
	cursor: pointer;
	padding: 50px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	background: #fff;
	-webkit-transform: scale(0.95);
	-moz-transform: scale(0.95);
	-ms-transform: scale(0.95);
	-o-transform: scale(0.95);
	transform: scale(0.95);
	transition: all .4s ease;
}
.portfolio-item:hover .details {
	opacity: 1;
	transform: scale(1);
}
.portfolio-item:hover img {
	-webkit-transform: scale(0.95);
	-moz-transform: scale(0.95);
	-ms-transform: scale(0.95);
	-o-transform: scale(0.95);
	transform: scale(0.95);
	opacity: 0;
	visibility: hidden;
}
.portfolio-item h3  {
	margin: 0;
}
.portfolio-item h3 a {
	color: #000;
	font-size: 17px;
	line-height: 1em;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
}
.portfolio-item hr {
	width: 70px;
	border-width: 5px;
	border-color: #e55b01;
	margin-top: 20px;
	margin-bottom: 35px;
}
.portfolio-item p {
	margin: 0;
	color: #c6c6c6;
	font-size: 14px;
	text-transform: uppercase;
}

.fp-controlArrow .fp-next {
	display: inline-block;
	z-index: 999;
	width: 100px;
	background: red;
	height: 90px;
	position: absolute;
	top: 50%;
	left: 10px;
}

/* ===== 15.2. Styling FilterBox ===== */
.filter-box {
	padding: 40px 0;
}
.filter-box ul {
	margin: 0;
	padding: 0;
	font-size: 0;
	list-style-type: none;
}
.filter-box ul li {
	display: inline-block;
	margin-right: 5px;
}
.filter-box ul li:last-of-type {
	margin: 0;
}
.filter-box ul li a {
	display: inline-block;
	color: #a7a6a6;
	background: #fff;
	font-size: 14px;
	line-height: 1em;
	padding: 13px 20px;
	text-decoration: none;
}
.filter-box ul li a.current,
.filter-box ul li a:hover {
	color: #000;
	background: #f7f7f7;
}

/* === 16. START BLOG SECTION === */

.blog {
	background: #f3f3f3;
}
.blog .container {
	padding-top: 125px;
}
.title h2 {
	margin: 0;
	color: #000;
	font-size: 90px;
	font-weight: 900;
	line-height: 1em;
}
.section-sub-title {
	margin: 0;
	color: #000;
	font-size: 19px;
	line-height: 32px;
	font-weight: 300;
}

.blog-posts-container {
	padding-top: 25px;
}
.blog .search-form {
	margin-top: -100px;
	float: right;
}

/* == 16.1. Styling blog item == */
.blog-item {
	position: relative;
	margin-bottom: 2px;
}
.blog-item ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 0;
}
.blog-item:hover .details-wrapper {
	opacity: 1;
	background: rgba(255, 255, 255, 0.7);
}
.blog-item .details-wrapper {
	position: absolute;
	opacity: 0;
	-webkit-transition: .3s opacity ease-in-out, .4s background ease;
	-moz-transition: .3s opacity ease-in-out, .4s background ease;
	-ms-transition: .3s opacity ease-in-out, .4s background ease;
	-o-transition: .3s opacity ease-in-out, .4s background ease;
	transition: .3s opacity ease-in-out, .4s background ease;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
}
.blog-item .details-wrapper .details {
	background: #fff;
}
.blog-item .details-wrapper .details .upper {
	padding: 40px 20px 25px 20px;
	border-bottom: 1px solid #e9e9e9;
}
.blog-item .details-wrapper .details .upper h4 {
	margin: 0;
	color: #000;
	font-size: 26px;
	line-height: 1em;
	font-weight: 400;
}
.blog-item .details-wrapper .details .upper .tags {
	margin-top: 25px;
}
.blog-item .details-wrapper .details .upper .tags li {
	display: inline-block;
	margin-right: 7px;
}
.blog-item .details-wrapper .details .upper .tags li:last-of-type {
	margin: 0;
}
.blog-item .details-wrapper .details .upper .tags li a {
	color: #858585;
	font-size: 15px;
	line-height: 1em;
	text-decoration: none;
}
.blog-item .details-wrapper .details .tags li a:before {
	content: "# ";
}

.blog-item .details-wrapper .details .lower {
	padding: 25px 20px;
}
.blog-item .details-wrapper .details .lower a,
.blog-item .details-wrapper .details .lower ul {
	display: inline-block;
}
.blog-item .details-wrapper .details .lower .view-post {
	color: #42a6df;
	font-size: 14px;
	line-height: 1em;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
}
.blog-item .details-wrapper .details .lower ul {
	float: right;
}
.blog-item .details-wrapper .details .lower ul li {
	display: inline-block;
	margin-right: 20px;
	position: relative;
}
.blog-item .details-wrapper .details .lower ul li:last-of-type {
	margin: 0;
}
.blog-item .details-wrapper .details .lower ul li .icon {
	color: #bcbcbc;
	font-size: 15px;
}
.blog-item .details-wrapper .details .lower ul li a:hover + span {
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1) translateX(-39%);
	-moz-transform: scale(1) translateX(-39%);
	-ms-transform: scale(1) translateX(-39%);
	-o-transform: scale(1) translateX(-39%);
	transform: scale(1) translateX(-39%);
}
.blog-item .details-wrapper .details .lower ul li:nth-child(2) a:hover + span {
	-webkit-transform: scale(1) translateX(-29%);
	-moz-transform: scale(1) translateX(-29%);
	-ms-transform: scale(1) translateX(-29%);
	-o-transform: scale(1) translateX(-29%);
	transform: scale(1) translateX(-29%);
}
.blog-item .details-wrapper .details .lower ul li span {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	z-index: 2;
	left: 0;
	top: -50px;
	border-radius: 2px;
	color: #fff;
	font-size: 12px;
	background: #565656;
	padding: 11px 10px;
	white-space: nowrap;
	-webkit-transform: scale(0.9) translateX(-39%);
	-moz-transform: scale(0.9) translateX(-39%);
	-ms-transform: scale(0.9) translateX(-39%);
	-o-transform: scale(0.9) translateX(-39%);
	transform: scale(0.9) translateX(-39%);
}
.blog-item .details-wrapper .details .lower ul li span i {
	position: absolute;
	color: #565656;
	bottom: 0;
	left: 50%;
	margin: 0 0 -8px -6px;
}

/* === 17. START CONTACT SECTION === */
.contact {
	background: url(../img/contact-bg.jpg) top center;
	background-size: cover;
	min-height: 100vh;
}
.contact-bg-wrapper {
	min-height: 100%;
	background: rgba(34, 34, 34, 0.9);
}
.contact-container {
	padding-top: 55px;
}

/* == Styling Info Box == */
.info-box {
	color: #fff;
}
.info-box .info-box-item {
	position: relative;
	margin-bottom: 20px;
	height: 210px;
	padding: 80px 0 0 20px;
	border: 1px solid rgba(255, 255, 255, 0.14);
}
.info-box .info-box-item .icon {
	position: absolute;
	display: inline-block;
	top: 20px;
	left: 20px;
	font-size: 40px;
}
.info-box .info-box-item h5 {
	margin: 0 0 12px 0;
	padding-bottom: 7px;
	border-bottom: 1px solid #fff;
	font-size: 30px;
	line-height: 1em;
	font-weight: 700;
}
.info-box .info-box-item p,
.info-box .info-box-item a {
	margin: 0;
	font-size: 14px;
	line-height: 21px;
}
.info-box .info-box-item p {
	text-transform: uppercase;
}
.info-box .info-box-item a {
	color: #fff;
	line-height: 1em;
	text-decoration: none;
}
.info-box .testimonials {
	height: 210px;
	padding: 20px;
	background: #1f1e1d;
}
.info-box .testimonials .testimonials-box {
	position: relative;
	height: 100%;
}
.info-box .testimonials .testimonials-box h5 {
	margin: 0 0 18px 0;
	font-size: 22px;
	line-height: 1em;
	font-weight: 700;
}
.info-box .testimonials .testimonials-box ul {
	margin: 0;
	padding: 0 0 40px 0;
	list-style: none;
	height: 100%;
}
.info-box .testimonials .testimonials-box li {
	position: relative;
	height: 100%;
	overflow: auto;
}
.info-box .testimonials .testimonials-box li .testimonial-client {
	position: absolute;
	padding-left: 55px;
	top: 0;
	left: 0;
}
.info-box .testimonials .testimonials-box li .testimonial-client .photo {
	position: absolute;
	width: 45px;
	top: 0;
	left: 0;
}
.info-box .testimonials .testimonials-box li p {
	color: #e3e3e3;
	padding-top: 55px;
	font-size: 17px;
	line-height: 21px;
	font-weight: 300;
}
.info-box .testimonials .testimonials-box li h6 {
	margin: 0;
	font-size: 14px;
	line-height: 17px;
	font-weight: 400;
}
.info-box .testimonials .testimonials-box li span {
	margin: 0;
	color: #555;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
}

.info-box .testimonials .testimonials-box .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	margin: 0 0 0 12px;
	color: #737373;
	background-color: #737373;
	border-radius: 0;
	height: 24px;
	width: 3px;
}
.info-box .testimonials .testimonials-box .mCSB_scrollTools .mCSB_draggerRail {
	margin: 0 0 0 12px;
	color: rgba(0, 0, 0, 0.3);
	background: rgba(0, 0, 0, 0.3);
	width: 4px;
	border-radius: 0;
}

/* Owl Carousel Styling */
.info-box .testimonials .testimonials-box .owl-wrapper-outer,
.info-box .testimonials .testimonials-box .owl-wrapper-outer .owl-wrapper,
.info-box .testimonials .testimonials-box .owl-wrapper-outer .owl-wrapper .owl-item {
	height: 100%;
}

.slider-navigation {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 0;
	padding: 9px 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.slider-navigation i {
	display: inline-block;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.2);
	font-size: 14px;
	line-height: 1em;
}
.slider-navigation i:hover {
	color: rgba(255, 255, 255, 1);
}
.slider-navigation i:first-of-type {
	margin-right: 18px;
}

/* == Styling Social Box == */
.social-box {
	text-align: right;
	margin-top: -100px;
	padding-bottom: 80px;
}
.social-box ul {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 0;
	list-style: none;
}
.social-box ul li {
	margin-right: 10px;
	display: inline-block;
	-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;
}
.social-box ul li:hover {
	-webkit-transform: scale(1.15);
	-moz-transform: scale(1.15);
	-ms-transform: scale(1.15);
	-o-transform: scale(1.15);
	transform: scale(1.15);
}
.social-box ul li:last-of-type {
	margin-right: 0;
}
.social-box ul li a {
	display: inline-block;
}
.social-box ul li i {
	display: inline-block;
	color: #fff;
	font-size: 36px;
	width: 64px;
	height: 64px;
	padding-top: 14px;
	border-radius: 50%;
	text-align: center;
}
.social-box ul li i.fa-pinterest {
	background: #ca3737;
}
.social-box ul li i.fa-facebook {
	background: #4e71a8;
}
.social-box ul li i.fa-twitter {
	background: #1cb7eb;
}
.social-box ul li i.fa-google-plus {
	background: #e3411f;
}
.social-box ul li i.fa-instagram {
	background: #444444;
}
.social-box ul li i.fa-linkedin {
	background: #1686b0;
}
.social-box ul li i.fa-youtube {
	background: #ca3737;
}

/* == Styling Contact Form == */
.contact .contact-box {
	padding-left: 45px;
}

/* === 18. START SINGLE PROJECT SLIDE === */
body.fp-viewing-portfolio-single-project header,
body.fp-viewing-portfolio-single-project #fp-nav {
	display: none;
}
.single-project-slide {
	background: #f3f3f3;
}
.single-project-slide .container {
	padding-top: 90px;
}
.slide {
	position: relative;
}

/* == Styling Go Back Btn == */
.go-back {
	position: absolute;
	top: 65px;
	left: 75px;
}
.go-back i {
	display: inline-block;
	color: #dadada;
	border: 3px solid #dadada;
	cursor: pointer;
	font-size: 40px;
	height: 50px;
	width: 50px;
	text-align: center;
	border-radius: 50%;
	padding: 1px 4px 0 0;
}
.go-back i,
.go-back span {
	display: inline-block;
}
.go-back i:hover + span {
	margin-left: 15px;
	opacity: 1;
	visibility: visible;
}
.go-back span {
	text-align: center;
	position: absolute;
	font-size: 14px;
	color: #767676;
	width: 74px;
	left: 25px;
	top: 0;
	margin-top: 15px;
	margin-left: 5px;
	opacity: 0;
	visibility: hidden;
}

/* == Styling Project Header == */
.project-header {}
.project-header h1 {
	color: #000;
	font-size: 90px;
	font-weight: 900;
	line-height: 1em;
	margin: 0;
}

/* = Styling Project Details = */
.project-cover ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.project-cover .slider-nav {
	position: relative;
	z-index: 1;
	background: rgba(0, 0, 0, 0.8);
	text-align: center;
	padding: 25px 0;
	color: #fff;
	margin: -84px 0 0 0;
}
.project-cover .slider-nav i {
	display: inline-block;
	cursor: pointer;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 14px;
	padding-top: 9px;
	border: 2px solid rgba(255, 255, 255, 0.15);
}
.project-cover .slider-nav i:hover {
	color: #f26101;
	border-color: #f26101;
}
.project-cover .slider-nav span {
	display: inline-block;
	margin: 0 30px;
	padding: 9px 0 0 0;
	font-size: 13px;
	text-transform: uppercase;
}

/* = Styling Project Details = */
.details-and-share {
	position: relative;
	padding: 50px 0 75px 0;
}
.project-details,
.share-links {
	display: inline-block;
}
.project-details {
	margin-top: 6px;
}
.project-details ul {
	margin: 0;
	padding: 0;
	font-size: 0;
	list-style-type: none;
}
.project-details ul li {
	display: inline-block;
	margin-right: 25px;
}
.project-details ul li:last-of-type {
	margin: 0;
}
.project-details ul li a {
	color: #aaa8a8;
	font-size: 14px;
	font-weight: 900;
	line-height: 1em;
	text-decoration: none;
}
.project-details ul li a .icon {
	display: inline-block;
	font-size: 16px;
	margin: -2px 6px 0 0;
}
.project-details ul li .date a {
	text-transform: uppercase;
}
.project-details ul li .tags a,
.project-details ul li .tags ul {
	display: inline-block;
}
.project-details ul li .tags li {
	margin-right: 4px;
}
.project-details ul li .tags li:not(:last-of-type) a:after {
	content: ",";
}
.project-details ul li .tags li:last-of-type {
	margin: 0;
}

/* = Styling Share Links = */
.share-links {
	float: right;
}
.share-links ul {
	margin: 0;
	padding: 0;
	font-size: 0;
	list-style: none;
}
.share-links ul li {
	display: inline-block;
	margin-right: 40px;
}
.share-links ul li:last-of-type {
	margin: 0;
}
.share-links ul li a {
	text-decoration: none;
	color: #000;
	font-size: 32px;
	line-height: 1em;
}
.share-links ul li a:hover {
	color: #dadada;
}

/* == Styling Project Body == */
.project-body {
	background: #fff;
	padding: 100px 200px 105px 200px;
}
.project-body p {
	color: #9b9b9b;
	font-size: 19px;
	font-weight: 300;
	line-height: 42px;
}

/* Styling Contact Form Wrapper */
.contact-group {
	background: #f9f9f9;
	padding: 85px 200px 190px 200px;
}
.contact-group .contact-box {
	margin-top: 65px;
	background: #fff;
	padding: 35px 50px 50px 50px;
}
.contact-group .contact-box span {
	display: inline-block;
	color: #000;
	font-size: 13px;
	font-weight: 300;
	text-transform: uppercase;
	margin: 0 0 40px 15px;
}
.contact-group .contact-form input[type='submit'] {
	float: right;
	color: #c9c8c8;
	background: #f8f8f8;
}
.contact-group .contact-form input[type='submit']:hover {
	background: #119a6b;
	color: #fff;
}

.scroll-up {
	position: relative;
	display: inline-block;
	margin: 55px 0 180px -26px;
	bottom: 0;
	left: 50%;
}
.scroll-up i,
.scroll-up span {
	display: block;
}
.scroll-up i {
	color: #dadada;
	border: 3px solid #dadada;
	cursor: pointer;
	font-size: 40px;
	height: 50px;
	width: 50px;
	text-align: center;
	border-radius: 50%;
}
.scroll-up span {
	color: #767676;
}
.scroll-up i:hover + span {
	margin-top: 13px;
	opacity: 1;
	visibility: visible;
}
.scroll-up span {
	text-align: center;
	position: absolute;
	font-size: 14px;
	width: 74px;
	margin-left: -11px;
	margin-top: 5px;
	opacity: 0;
	visibility: hidden;
}

/* === 19. START BLOGPOST SLIDE === */
body.fp-viewing-blog-1 header,
body.fp-viewing-blog-1 #fp-nav {
	display: none;
}

/* == Blog Header == */
.blog-header {
	color: #000;
	padding-bottom: 45px;
}
.blog-header h1 {
	font-size: 91px;
	font-weight: 800;
	line-height: 1em;
	margin: 0;
}
.blog-header p {
	font-size: 19px;
	font-weight: 300;
	margin: 0;
}

/* == Blogpost Header == */
.blogpost-header {
	padding: 45px 50px 40px 50px;
	background: #fff;
}
.blogpost-header .details ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 0;
}
.blogpost-header .details ul li {
	display: inline-block;
	margin-right: 30px;
}
.blogpost-header .details ul li:last-of-type {
	margin: 0;
}
.blogpost-header .details ul li a {
	font-size: 14px;
	line-height: 1em;
	text-decoration: none;
}
.blogpost-header .details ul li .date {
	color: #7fc3da;
	font-weight: 800;
	text-transform: uppercase;
}
.blogpost-header .details ul li .date:hover {
	color: #178eb5;
}
.blogpost-header .details ul li .author,
.blogpost-header .details ul li .comments {
	color: #5c5c5c;
}
.blogpost-header .details ul li .author:hover,
.blogpost-header .details ul li .comments:hover {
	color: #454444;
}
.blogpost-header .details ul li .tags li {
	margin-right: 10px;
}
.blogpost-header .details ul li .tags li:last-of-type {
	margin: 0;
}
.blogpost-header .details ul li .tags li a {
	color: #9b9b9b;
	font-size: 15px;
}
.blogpost-header .details ul li .tags li a:before {
	content: '#';
	margin-right: 5px;
}
.blogpost-header .details ul li .tags li a:hover {
	color: #b1b1b1;
}
.blogpost-header h1 {
	color: #858585;
	font-size: 26px;
	font-weight: 400;
	line-height: 1em;
	margin: 50px 0 0 0;
}

/* == Blogpost Body == */
.blogpost-body {
	background: #fff;
	padding: 85px 200px 120px 200px;
}
.blogpost-body p {
	color: #9b9b9b;
	font-size: 19px;
	font-weight: 300;
	line-height: 2.211em;
}

.blogpost-body ul {
	padding: 45px 0 45px 80px;
	list-style-type: circle;
	font-size: 18px;
	color: #bebebe;
	font-weight: 800 !important;
}

/* Styling Blockquote */

.blogpost-body blockquote {
	quotes: "\201C""\201D""\2018""\2019";
	background: #119a6b;
	padding: 50px 30px 70px 30px;
}
.blogpost-body blockquote p {
	color: #fff;
	font-size: 17px;
	padding: 40px 7px 0 7px;
	border-top: 1px solid rgba(255, 255, 255, 0.29);
}
.blogpost-body blockquote cite {
	display: block;
	color: #fff;
	font-size: 19px;
	font-weight: 300;
	font-style: normal;
	margin-top: 125px;
}
.blogpost-body blockquote:before {
	font-family: 'Times New Roman', serif;
	content: open-quote;
	position: absolute;
	color: #fff;
	font-size: 32px;
	text-align: center;
	width: 40px;
	height: 40px;
	background: #119a6b;
	left: 50%;
	margin: -17px 0 0 -20px;
}

/* Styling Accordion */
.blogpost-body .panel-group {
	padding-top: 40px;
}
.blogpost-body .panel-group .panel {
	margin-bottom: 32px;
}
.blogpost-body .panel-group .panel:last-of-type {
	margin: 0;
}
.blogpost-body .panel-group .panel .panel-body {
	padding: 45px 0 30px 0;
	border-bottom: 1px solid #ececec;
}
.blogpost-body .panel-group .panel-title a {
	display: inline-block;
	text-decoration: none;
}
.blogpost-body .panel-group .panel-title a:first-of-type {
	color: #404040;
	font-size: 19px;
	font-weight: 400;
	line-height: 1em;
}
.blogpost-body .panel-group .panel-title a:first-of-type:hover {
	color: #119a6b;
}
.blogpost-body .panel-group .panel-title a:last-of-type {
	float: right;
	font-size: 19px;
	line-height: 1em;
	color: #c4c4c4;
	font-weight: 300;
}
.blogpost-body .panel-group .panel-title a:last-of-type:hover {
	color: #b6b6b6;
}

/* == Share Links == */
.share-blogpost {
	padding-top: 80px;
}
.share-blogpost ul {
	margin: 0;
	padding: 0;
	font-size: 0;
	list-style-type: none;
}
.share-blogpost ul li {
	display: inline-block;
	margin-right: 7px;
}
.share-blogpost ul li:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}
.share-blogpost ul li:last-of-type {
	margin: 0;
}
.share-blogpost ul li a i {
	display: inline-block;
	border-radius: 3px;
	width: 22px;
	height: 22px;
	font-size: 14px;
	color: #fff;
	padding-top: 4px;
	text-align: center;
}
.share-blogpost ul li a.facebook i {
	background: #6f87ba;
}
.share-blogpost ul li a.twitter i {
	background: #98ccf4;
}
.share-blogpost ul li a.pinterest i {
	background: #fc4761;
}
.share-blogpost ul li a.dribbble i {
	background: #ef269c;
}
.share-blogpost ul li a.vimeo i {
	color: #63c5e9;
	font-size: 22px;
	padding: 0;
}

/* == Styling similar posts == */
.similar-posts {
	padding-top: 105px;
}
.similar-posts .similar-posts-header {
	padding-bottom: 40px;
}
.similar-posts .similar-posts-header h4 {
	text-transform: uppercase;
	font-size: 35px;
	font-weight: 800;
	line-height: 1em;
	color: #373737;
	margin: 0;
}
.similar-posts .similar-posts-header p {
	margin: 0;
	color: #5c5c5c;
	font-size: 14px;
	font-weight: 400;
}
.similar-posts .similar-post {
	position: relative;
}
.similar-posts .similar-post:hover .view-post {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
.similar-posts .similar-post .view-post {
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.9);
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
	-o-transform: scale(0.9);
	transform: scale(0.9);
}
.similar-posts .similar-post .view-post img {
	border-radius: 4px;
}
.similar-posts .similar-post .view-post a {
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	border-radius: 4px;
	position: relative;
	font-size: 14px;
	line-height: 1em;
	padding: 17px 20px;
	background: #d4d4d4;
	color: #fff;
	top: 50%;
	margin-top: -24px;
}
.similar-posts .similar-post .view-post a:hover {
	background: rgba(17, 154, 107, 0.8);
	color: #eeeeee;
}

/* === 20. START SEARCH FORM === */
.search-form {
	position: relative;
	width: 100%;
	max-width: 330px;
}
.search-form .icon {
	position: absolute;
	top: 17px;
	left: -35px;
	font-size: 16px;
	color: #858585;
}
.search-form .search-input {
	width: 100%;
	background: transparent;
	border: 0;
	font-size: 17px;
	color: #858585;
	line-height: 3em;
	border-bottom: 2px solid #42a6df;
	margin-bottom: 13px;
}
.search-form .search-input:focus {
	outline: none;
}
.search-form .search-input.has-value + a {
	top: 0;
	opacity: 1;
}
.search-form a {
	position: relative;
	top: -5px;
	opacity: 0;
	color: #858585;
	font-size: 13px;
	line-height: 1em;
	text-decoration: none;
}
.search-form a:hover {
	color: #42a6df;
}

/* === 21. START 404 PAGE === */
.content-wrapper-404 {
	height: 100vh;
	text-align: center;
	padding: 0 80px;
}
.content-wrapper-404 .content-404 {
	position: relative;
	display: inline-block;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.content-wrapper-404 .content-404 .brand-404 {
	margin-bottom: 25px;
	display: inline-block;
}
.content-wrapper-404 .content-404 p {
	margin: 0 0 80px;
	color: #767676;
	font-size: 14px;
	line-height: 1em;
	text-transform: uppercase;
}
.content-wrapper-404 .content-404 .search-form {
	text-align: left;
}
.content-wrapper-404 .content-404 .back-home {
	display: inline-block;
	margin: 80px 0 0;
	color: #c9c8c8;
	font-size: 15px;
	line-height: 1em;
	font-weight: 700;
	background: #f8f8f8;
	padding: 18px 12px;
	text-decoration: none;
	text-transform: uppercase;
}
.content-wrapper-404 .content-404 .back-home:hover {
	background: #119a6b;
	color: #fff;
}

/* === 22. START RESPONSIVE === */
@media (min-width: 1200px) {
	/* Firefox Fix */
	.portfolio .col-md-4 {
		width: 33.3%;
	}
}
@media (max-width: 1600px) and (min-width: 1200px) {
	/* === START NAVIGATION === */
	nav ul {
		margin-top: 0;
	}

	/* === START ABOUT SLIDE === */
	.container {
		padding-left: 100px;
		padding-right: 100px;
	}
	.about .container {
		padding-top: 80px;
	}
	.timeline-box,
	.awards-box {
		height: 400px;
	}

	.timeline-box {
		padding: 60px 25px 60px 30px;
	}
	.timeline-box ul li .details-wrapper {
		left: 25px;
	}
	.timeline-box ul li .date-wrapper .date {
		right: 0;
	}

	.awards-box ul li:last-of-type {
		display: none;
	}

	/* === START PORTFOLIO SLIDE === */
	.portfolio .container {
		padding-top: 50px;
	}
	.filter-box {
		padding: 20px 0;
	}

	/* === START BLOG SLIDE === */
	.blog .container {
		padding-top: 50px;
	}
	.blog-posts-container {
		padding-top: 15px;
	}

	/* === START CONTACT SLIDE === */
	.contact .container {
		padding-top: 50px;
	}
	.contact-container {
		padding-top: 30px;
	}
}
@media (max-width: 1200px) {
	#fp-nav {
		right: 35px;
	}

	/* === START HEADER === */
	.header {
		padding: 45px 30px 0 20px;
	}

	/* === START MAIN SECTION === */
	.main-info .short-info-wrapper .text {
		margin: 0;
	}
	.main-info .short-info-wrapper .image {
		width: 250px;
		margin-left: 30px;
	}
	.main-info .short-info-wrapper h1 {
		font-size: 100px;
		line-height: 1em;
	}
	.main-info .short-info-wrapper h2 {
		font-size: 36px;
	}

	/* === START ABOUT SECTION === */
	.timeline-box {
		padding: 40px 25px 40px 25px;
	}
	.timeline-box ul li {
		padding: 0;
	}
	.awards-box {
		padding: 20px;
	}

	/* === START PORTFOLIO SECTION === */
	.portfolio-item .details {
		padding: 30px;
	}

	/* === START CONTACT SECTION === */
	.info-box .info-box-item {
		padding-left: 65px;
	}

	.info-box .testimonials {
		padding: 20px 15px 15px 15px;
	}

	.social-box {
		margin-top: -85px;
	}
	.social-box ul li i {
		width: 54px;
		height: 54px;
		font-size: 28px;
		padding-top: 13px;
	}

	/* === START SINGLE PROJECT SLIDE === */
	.go-back {
		top: 30px;
		left: 30px;
	}

	.project-body {
		padding: 100px 130px 105px 130px;
	}

	.contact-group {
		padding-left: 130px;
		padding-right: 130px;
	}

	/* === START BLOGPOST SLIDE === */
	.blogpost-body {
		padding: 85px 130px 105px 130px;
	}
}
@media (max-width: 991px) {
	/* === START HEADER === */
	.header {
		padding: 20px 20px 20px 15px;
		/*background: rgba(0, 0, 0, 0.5);*/
	}
	.header .nav-toggle {
		margin: 3px 0 0 0;
	}
	.header .brand {
		display: none;
	}

	/* === START MOBILE BRAND === */
	.mobile-brand {
		position: relative;
		display: block;
		width: auto;
		max-width: 100%;
		left: 50%;
		margin: 50px 0 -66px -48px;
	}
	.contact .mobile-brand {
		margin-top: -60px;
		margin-bottom: 60px;
	}

	/* === START MAIN SECTION === */
	.main .container,
	.container .main-info,
	.container .main-info,
	.container .main-info .row,
	.container .main-info .row > div {
		height: auto;
	}
	.main .scroll-toggle {
		position: relative;
		display: block;
		left: 50%;
		padding: 150px 0 75px 0;
	}
	.container .main-info {
		padding-top: 0px;
		margin-top: 0px;
	}
	.main-info .logo,
	.main-info .short-info-wrapper {
		top: 0;
		text-align: center;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	.main-info .short-info-wrapper {
		text-align: left;
		padding-top: 100px;
	}
	.main-info .logo img {
		max-width: 100%;
		width: auto;
	}

	/* === START ABOUT SECTION === */
	body.fp-viewing-about .scroll-toggle {
		position: relative;
		display: block;
		left: 50%;
		padding: 100px 0 75px 0;
	}

	.services-carousel {
		padding-top: 0px;
	}
	.services-carousel .carousel-controls {
		position: relative;
		display: inline-block;
		margin: 0;
		margin-bottom: 25px;
	}

	.awards-box {
		margin-top: 50px;
		padding: 40px 25px;
		height: auto;
	}

	/* === START BLOG SECTION === */
	body.fp-viewing-blog .scroll-toggle {
		position: relative;
		display: block;
		left: 50%;
		padding: 100px 0 75px 0;
	}

	/* === START PORTFOLIO SECTION === */
	body.fp-viewing-portfolio .scroll-toggle {
		position: relative;
		display: block;
		left: 50%;
		padding: 100px 0 75px 0;
	}

	/* === START CONTACT SECTION === */
	.contact .bg-wrapper {
		height: auto;
		padding-bottom: 100px;
	}

	.contact .contact-box {
		padding: 0;
	}

	.social-box {
		margin: 0;
		padding-top: 75px;
	}

	/* === START SCROLL TOGGLE === */
	.contact .scroll-toggle {
		position: relative;
		padding-top: 100px;
	}

	/* === START SINGLE PROJECT SLIDE === */
	.project-body {
		padding: 100px 100px 105px 100px;
	}

	.contact-group {
		padding-left: 100px;
		padding-right: 100px;
	}

	/* === START BLOGPOST SLIDE === */
	.blogpost-body {
		padding: 85px 100px 105px 100px;
	}
	.similar-posts .similar-post {
		margin-bottom: 20px;
	}

	.blogpost-body blockquote {
		margin-bottom: 60px;
	}
}
@media (max-width: 768px) {
	#fp-nav {
		display: none;
	}

	/* === START NAVIGATION === */
	nav ul {
		margin: 0;
	}
	nav ul li:first-child {
		margin-bottom: 30px;
	}
	nav ul li a {
		font-size: 42px;
	}
	nav ul li a:hover:before,
	nav ul li a:hover:after {
		position: absolute;
		top: 10px;
		font-size: 28px;
	}

	/* === START FILTERBOX === */
	.filter-box ul {
		text-align: center;
	}
	.filter-box ul li {
		margin-bottom: 5px;
	}

	/* === START MAIN SECTION === */
	.main-info .short-info-wrapper {
		padding-left: 0;
		padding-top: 0;
	}
	.main-info .short-info-wrapper .image {
		position: relative;
		width: 100%;
		left: 0;
		margin: 0;
		text-align: center;
	}
	.main-info .short-info-wrapper .image img {
		max-width: 100%;
		height: auto;
	}
	.main-info .short-info-wrapper .text {
		padding-top: 30px;
	}
	.main-info .short-info-wrapper h1 {
      font-size: 80px
    }

	/* === START ABOUT SECTION === */
	.timeline-box ul li .details-wrapper {
		padding: 30px 0 0 10px;
	}
	.timeline-box ul li .details-wrapper .timeline-circle {
		display: none;
	}
	.timeline-box ul li .date-wrapper {
		padding-left: 13px;
	}
	.timeline-box ul li .date-wrapper .date {
		position: relative;
		right: auto;
		margin: 0;
	}

	/* === START PORTFOLIO SECTION === */
	.portfolio h2 {
		font-size: 70px;
	}

	/* === START BLOG SECTION === */
	.blog h2 {
		font-size: 70px;
	}

	/* === START CONTACT SECTION === */
	.contact h2 {
		font-size: 70px;
	}

	.info-box .info-box-item {
		padding-left: 50px;
	}

	.social-box ul {
		text-align: center;
	}
	.social-box ul li {
		margin-bottom: 10px;
	}

	/* === START SINGLE PROJECT SLIDE === */
	.project-body {
		padding: 80px 70px 85px 70px;
	}

	.contact-group {
		padding-left: 70px;
		padding-right: 70px;
	}

	.details-and-share .project-details,
	.details-and-share .share-links {
		display: block;
	}
	.details-and-share .share-links {
		float: none;
		padding-top: 50px;
	}

	.comments-area .ul-comments .comment .comment-body h3,
	.comments-area .ul-comments .comment .comment-body .comment-reply {
		display: block;
	}
	.comments-area .ul-comments .comment .comment-body .comment-reply {
		margin: 25px 0 0 0;
	}

	/* === START BLOGPOST SLIDE === */
	.blogpost-body {
		padding: 70px 70px 85px 70px;
	}

}
@media (max-width: 500px) {
  .main-info .short-info-wrapper h1 {
    font-size: 37px;
  }
    /* === START SINGLE PROJECT SLIDE === */
    .project-header h1 {
    	font-size: 56px;
    }
	.contact-group {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* === START BLOGPOST SLIDE === */
	.blog-header h1 {
		font-size: 56px;
		margin-bottom: 15px;
	}
}
/* === END RESPONSIVE === */