/************ CSS Styles ************

    Template Name: Jasmin - Personal Portfolio Template
    Author: kholie-b
    version: 1.0
    Copyright: 2019

************************************/

/*==================================

        Table of Content

        1. Default Settings
        2. Preloader
        3. Navbar
        4. Hero Section
        5. About Section
        6. Services Section
        7. Resume Section
        8. Work Section
        9. Testimonials Section
        10. Blog Section
        11. Contact Section
        12. Footer
        13. Lines
        14. Color Switcher

==================================*/

/*----------------------------------------------------------------
					1. Start Default Settings
----------------------------------------------------------------*/
/*============ Body and Core Css ============*/

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	text-decoration: none !important;
	list-style: none !important;
	outline: none !important;
}

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

a,
a:hover,
a:focus,
a:active,
button:focus {
	text-decoration: none;
	border: none;
	outline: 0;
	color: #FFF;
}

a:hover,
a:focus,
a:active {
	color: #F39C6B;
}

ul ol,
li {
	list-style: none;
	margin: 0;
	padding: 0;
}

body {
	font-family: "Raleway", sans-serif;
	position: relative;
	font-size: 16px;
	line-height: 1.65;
	color: #b9b9b9;
	background: #181718;
	height: 100%
}

span {
	display: inline-block;
}

/*===========Margin And Paddings============*/
.mt-0 {
	margin-top: 0 !important;
}

.mt-5 {
	margin-top: 5px !important;
}

.mt-10 {
	margin-top: 10px !important;
}

.mt-15 {
	margin-top: 15px !important;
}

.mt-20 {
	margin-top: 20px !important;
}

.mt-25 {
	margin-top: 25px !important;
}

.mt-30 {
	margin-top: 30px !important;
}

.mt-35 {
	margin-top: 35px !important;
}

.mt-40 {
	margin-top: 40px !important;
}

.mt-45 {
	margin-top: 45px !important;
}

.mt-50 {
	margin-top: 50px !important;
}

.mt-55 {
	margin-top: 55px !important;
}

.mt-60 {
	margin-top: 60px !important;
}

.mt-62 {
	margin-top: 62px !important;
}

.mt-65 {
	margin-top: 65px !important;
}

.mt-70 {
	margin-top: 70px !important;
}

.mt-75 {
	margin-top: 75px !important;
}

.mt-80 {
	margin-top: 80px !important;
}

.mt-85 {
	margin-top: 85px !important;
}

.mt-90 {
	margin-top: 90px !important;
}

.mt-95 {
	margin-top: 95px !important;
}

.mt-100 {
	margin-top: 100px !important;
}

/* Custom Margin Bottom */
.mb-0 {
	margin-bottom: 0 !important;
}

.mb-5 {
	margin-bottom: 5px !important;
}

.mb-10 {
	margin-bottom: 10px !important;
}

.mb-15 {
	margin-bottom: 15px !important;
}

.mb-20 {
	margin-bottom: 20px !important;
}

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

.mb-30 {
	margin-bottom: 30px !important;
}

.mb-35 {
	margin-bottom: 35px !important;
}

.mb-40 {
	margin-bottom: 40px !important;
}

.mb-45 {
	margin-bottom: 45px !important;
}

.mb-50 {
	margin-bottom: 50px !important;
}

.mb-55 {
	margin-bottom: 55px !important;
}

.mb-60 {
	margin-bottom: 60px !important;
}

.mb-62 {
	margin-bottom: 62px !important;
}

.mb-65 {
	margin-bottom: 65px !important;
}

.mb-70 {
	margin-bottom: 70px !important;
}

.mb-75 {
	margin-bottom: 75px !important;
}

.mb-80 {
	margin-bottom: 80px !important;
}

.mb-85 {
	margin-bottom: 85px !important;
}

.mb-90 {
	margin-bottom: 90px !important;
}

.mb-95 {
	margin-bottom: 95px !important;
}

.mb-100 {
	margin-bottom: 100px !important;
}

.m-0 {
	margin: 0px !important;
}

/* Custom Padding top */
.pt-0 {
	padding-top: 0 !important;
}

.pt-5 {
	padding-top: 5px !important;
}

.pt-10 {
	padding-top: 10px !important;
}

.pt-15 {
	padding-top: 15px !important;
}

.pt-20 {
	padding-top: 20px !important;
}

.pt-25 {
	padding-top: 25px !important;
}

.pt-30 {
	padding-top: 30px !important;
}

.pt-35 {
	padding-top: 35px !important;
}

.pt-40 {
	padding-top: 40px !important;
}

.pt-45 {
	padding-top: 45px !important;
}

.pt-50 {
	padding-top: 50px !important;
}

.pt-55 {
	padding-top: 55px !important;
}

.pt-60 {
	padding-top: 60px !important;
}

.pt-65 {
	padding-top: 65px !important;
}

.pt-70 {
	padding-top: 70px !important;
}

.pt-75 {
	padding-top: 75px !important;
}

.pt-80 {
	padding-top: 80px !important;
}

.pt-85 {
	padding-top: 85px !important;
}

.pt-90 {
	padding-top: 90px !important;
}

.pt-95 {
	padding-top: 95px !important;
}

.pt-100 {
	padding-top: 100px !important;
}

.pt-110 {
	padding-top: 110px !important;
}

.pt-120 {
	padding-top: 120px !important;
}

/* Custom Padding Bottom */
.pb-0 {
	padding-bottom: 0 !important;
}

.pb-1 {
	padding-bottom: 1px !important;
}

.pb-5 {
	padding-bottom: 5px !important;
}

.pb-10 {
	padding-bottom: 10px !important;
}

.pb-15 {
	padding-bottom: 15px !important;
}

.pb-20 {
	padding-bottom: 20px !important;
}

.pb-25 {
	padding-bottom: 25px !important;
}

.pb-30 {
	padding-bottom: 30px !important;
}

.pb-35 {
	padding-bottom: 35px !important;
}

.pb-40 {
	padding-bottom: 40px !important;
}

.pb-45 {
	padding-bottom: 45px !important;
}

.pb-50 {
	padding-bottom: 50px !important;
}

.pb-55 {
	padding-bottom: 55px !important;
}

.pb-60 {
	padding-bottom: 60px !important;
}

.pb-65 {
	padding-bottom: 65px !important;
}

.pb-70 {
	padding-bottom: 70px !important;
}

.pb-75 {
	padding-bottom: 75px !important;
}

.pb-80 {
	padding-bottom: 80px !important;
}

.pb-85 {
	padding-bottom: 85px !important;
}

.pb-90 {
	padding-bottom: 90px !important;
}

.pb-95 {
	padding-bottom: 95px !important;
}

.pb-100 {
	padding-bottom: 100px !important;
}

.pb-120 {
	padding-bottom: 120px !important;
}

/*Custom Padding right*/
.pr-0 {
	padding-right: 0 !important;
}

/*Sections paddings*/
.section-padding {
	padding-top: 100px;
	padding-bottom: 100px;
}

/*===========Typography Settings============*/
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #fff;
	margin: 0;
	padding: 0;
	line-height: 1.2;
	font-family: 'Raleway', sans-serif;
}

h1 {
	font-size: 55px;
	font-weight: 700;
}

h2 {

	font-size: 40px;
	font-weight: 500;
}

h3 {
	font-weight: 500;
	font-size: 23px;
}

h4 {

	font-size: 21px;
	font-weight: 500;
}

h5 {
	font-size: 20px;
	font-weight: 500;
}

p {
	line-height: 28px;
	font-weight: 500;
	font-size: 14px;
	font-family: 'Open Sans', sans-serif;
	color: #969696;
	margin-bottom: 0 !important
}

/*===========Buttons============*/
.main-button {
	color: #fff;
	border: 1px solid #fff;
	overflow: hidden;
	padding: 0;
	max-width: 230px;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	float: left;
	display: block;
	background: none;
	vertical-align: middle;
	position: relative;
}

.main-button.error {
	border: 1px solid red;
}

.main-button.success {
	border: 1px solid #00ff14;
}

.main-button:before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #F39C6B;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

.main-button span.icon {
	display: inline
}

.main-button:before,
.main-button span {
	padding: 1em 3em;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.main-button:hover,
.main-button:active {
	cursor: pointer;
}
.main-button:hover:before {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	color: #0F0F0F;
}

.main-button:hover span {
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}

/*===========Owl Carousel Settings============*/
.owl-theme .owl-nav.disabled + .owl-dots {
	margin-top: 15px;
	padding: 0px 15px;
	background: #111;
	display: inline-block;
	border-radius: 25px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border: 1px solid rgba(243, 156, 107, .2);
}

.owl-theme .owl-dots .owl-dot span {
	background: rgba(243, 156, 107, .2);
	width: 8px;
	height: 8px;
	margin: 0 7px;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
	background: #F39C6B;
}

.owl-theme .owl-dots .owl-dot.active span {
	width: 8px;
	height: 8px;
	position: relative
}

.owl-theme .owl-dots .owl-dot.active span:before {
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid #F39C6B;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

/* .owl-theme .owl-dots.disabled {
	display: none !important;
}
 */

/*===========Section Title============*/
.section-title h2 {
	color: #F39C6B;
	padding: 0 10px;
	display: inline-block;
	letter-spacing: 2px;
	font-size: 30px;
	font-weight: 800;
	position: relative;
	z-index: 1;
}

.section-title .rev-block {
	position: relative
}

.section-title .rev-block span {
	opacity: 0;
	animation: appear-text 0.0001s linear forwards;
	animation-delay: 1.4s
}

.section-title .rev-block:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: #F39C6B;
	animation: rev-block 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
	animation-delay: 1s
}

/*================Sections sub titles(Services, Contact)=============*/
.rev-block {
	position: relative
}

.services-title,
.contact-social h6 {
	display: inline-block
}

.secrvices-title.rev-block span,
.contact-social .rev-block span {
	opacity: 0;
	animation: appear-text 0.0001s linear forwards;
	animation-delay: 1.4s
}

.services-title.rev-block:after,
.contact-social .rev-block:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: #F39C6B;
	animation: rev-block 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
	animation-delay: 1s
}

@keyframes rev-block {
	0% {
		left: 0;
		width: 0%
	}

	50% {
		left: 0;
		width: 100%
	}

	100% {
		left: 100%;
		width: 0%
	}
}

@keyframes appear-text {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

.section-bg {
	font-size: 80px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 4px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgba(255, 255, 255, .05);
}

.section-bg:before {
	content: '';
	width: 100px;
	height: 4px;
	background: #F39C6B;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%)
}

/*----------------------------------------------------------------
					2. Start Preloader
----------------------------------------------------------------*/
.preloader {
	background-color: #181718;
	width: 100%;
	height: 100%;
	position: fixed;
	overflow: hidden;
	top: 0;
	left: 0;
	z-index: 1000000000;
	opacity: 1;
}

.preloader-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
}

.preloader-overlay > div {
	background-color: #F39C6B;
	height: 10px;
	width: 10px;
	border-radius: 50%;
	display: inline-block;
	-webkit-animation: stretchdelay 0.7s infinite ease-in-out;
	animation: stretchdelay 0.7s infinite ease-in-out;
}

.preloader .circ2 {
	-webkit-animation-delay: -0.6s;
	animation-delay: -0.6s;
}

.preloader .circ3 {
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;
}

.preloader .circ4 {
	-webkit-animation-delay: -0.4s;
	animation-delay: -0.4s;
}

@-webkit-keyframes stretchdelay {

	0%,
	40%,
	100% {
		-webkit-transform: translateY(-10px)
	}

	20% {
		-webkit-transform: translateY(-20px)
	}
}

@keyframes stretchdelay {

	0%,
	40%,
	100% {
		transform: translateY(-10px);
		-webkit-transform: translateY(-10px);
	}

	20% {
		transform: translateY(-20px);
		-webkit-transform: translateY(-20px);
	}
}

/*----------------------------------------------------------------
					3. Start Navbar
----------------------------------------------------------------*/
.fixed-top .logo {
	color: #FFF !important;
	position: relative;
	z-index: 999;
	font-weight: 800;
	font-size: 20px;
	margin: 12px 10px;
}

.fixed-top .logo span {
	font-weight: 900;
	color: #F39C6B;
	margin-left: 5px
}

.nav-fixed .logo {
	color: #FFF !important;
	position: relative;
	z-index: 999;
	font-weight: 800;
	font-size: 20px;
	padding: 20px 12px
}

.nav-fixed .logo span {
	font-weight: 900;
	color: #F39C6B;
	margin-left: 5px
}

.navbar-nav .nav-item .nav-link {
	color: #fff;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0;
	font-family: 'open sans', sans-serif;
	margin: 12px 10px;
	position: relative;
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-ms-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
	z-index: 1;
	display: block
}

.navbar-nav .nav-item .nav-link:after {
	position: absolute;
	content: '';
	left: 0;
	top: 60%;
	width: 100%;
	height: 6px;
	z-index: -1;
	background: #F39C6B;
	transform-origin: right center;
	transform: scale(0, 1);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: .7
}

.navbar-nav .nav-item .nav-link:hover:after,
.navbar-nav .nav-item .nav-link:focus:after,
.navbar-nav .nav-item .nav-link.active:after {
	transform-origin: left center;
	transform: scale(1, 1);
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
	color: #F39C6B;
}

.nav-fixed .navbar-nav .active > .nav-link,
.nav-fixed .navbar-nav .nav-link.active,
.nav-fixed .navbar-nav .nav-link.show,
.nav-fixed .navbar-nav .show > .nav-link {
	color: #F39C6B !important;
}

.fixed-top .navbar-nav .active > .nav-link {
	color: #FFF !important;
}

.nav-fixed {
	background: #111;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;
	border-bottom: 1px solid #181718;
	width: 100%;
	padding: 10px 0
}

.fixed-top .navbar-nav .active > .nav-link,
.fixed-top .navbar-nav .nav-link.active,
.fixed-top .navbar-nav .nav-link.show,
.fixed-top .navbar-nav .show > .nav-link {
	color: #F39C6B !important;
}

.nav-fixed .navbar-nav .nav-item .nav-link {
	color: #fcfcfc;
}

.navbar-toggler-icon {
	width: 1em;
	height: 1em;
}

.navbar-light .navbar-toggler {
	background-color: transparent;
	border: none;
	padding-top: 20px;
	padding-bottom: 20px;
}

.navbar-toggler-icon {
	background-image: none !important;
	height: 3px;
	width: 20px;
	margin-bottom: 3px;
	display: block;
	background: #fff;
}

.nav-fixed .navbar-toggler-icon {
	background: #585858 !important;
}

/*----------------------------------------------------------------
					4. Start Hero
----------------------------------------------------------------*/
.hero {
	background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, .4)), url('../img/bg-cover.jpg');
	height: 100vh;
	min-height: 100%;
	width: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	/* background-attachment: fixed; */
	position: relative;
	overflow: hidden;
	z-index: 0;
}

#particles-js {
	position: absolute;
	width: 100%;
	height: 100%;
}

.hero .overlay {
	background-image: url(../img/pattern.png);
	background-repeat: repeat;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
	opacity: .2;
	height: 100vh;
	z-index: -1
}

.hero .banner {
	display: table;
}

.hero .banner-inner {
	display: table-cell;
	vertical-align: middle;
	height: 100vh
}

.banner-inner h1,
.banner-inner h1 .cd-headline {
	font-size: 50px;
	font-weight: 800;
	line-height: 1.2
}

.banner-inner h1 .shadow {
	text-shadow: 2px 2px #F39C6B
}

.banner-inner h1 .hero-bg {
	padding: 10px 20px;
	background: rgba(0, 0, 0, 0.5);
	letter-spacing: 2px;
	color: rgba(243, 156, 107, .8);
	border: 1px solid rgba(243, 156, 107, .2);
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	font-size: 45px
}

/*==================Headline===================*/
.cd-intro {
	width: 100%;
	max-width: none;
	margin: 0 auto;
}

.cd-intro {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%)
}

.cd-headline {
	display: inline-block;
	font-size: 45px
}

.cd-words-wrapper {
	display: inline-block
}

.hero .block {
	display: block;
	margin-bottom: 30px
}

/*----------------------------------------------------------------
					5. Start About
----------------------------------------------------------------*/
.about {
	position: relative;
	z-index: 1;
	background: #111;
}

.about-img {
	margin-right: 60px;
	position: relative
}

.about-img:before {
	content: '';
	position: absolute;
	height: 90%;
	width: 100%;
	border: 5px solid #F39C6B;
	left: 40px;
	top: 20px
}

.about-head {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 2px;
	position: relative;
	padding-bottom: 15px;
	margin-bottom: 30px
}

.about-head:before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	height: 4px;
	width: 80px;
	background: #F39C6B
}

.about-head span {
	color: #F39C6B
}

.about-content {
	padding-top: 60px;
	padding-bottom: 60px
}

.about-content p {
	margin-bottom: 30px !important
}

/*Numbers*/
.numbers {
	padding: 0 20px;
	margin-bottom: 20px
}

.numbers .counter {
	font-size: 25px;
	font-weight: 800;
	font-family: "Open Sans", sans-serif;
	color: #F39C6B;
}
.numbers span {
	color: #F39C6B;
}

.numbers h6 {
	font-size: 15px;
	line-height: 1.6
}

.numbers.border-r {
	border-right: 3px solid #F39C6B
}

.numbers.border-l {
	border-left: 3px solid #F39C6B
}

/*Skills*/
.skills {
	margin-top: 30px;
	margin-bottom: 15px;
	position: relative;
	z-index: 1
}

.skills:first-child {
	margin-top: 25px
}

.skills:last-child {
	margin-bottom: 0
}

.skills .skills-box:last-of-type {
	margin-bottom: 0
}

.skills-box .title h5 {
	line-height: .7;
	margin-bottom: 15px;
	font-size: 16px;
	letter-spacing: 1px
}

.skills .progress-line {
	background: rgba(255, 255, 255, .05);
	height: 5px;
	width: 100%;
	position: relative;
}

.skills .progress-line > span {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background: #F39C6B
}

.skills .progress-line > span > .percent-tooltip {
	margin-bottom: 5px;
	line-height: 12px;
	font-size: 12px;
	font-weight: 700;
	position: absolute;
	right: -15px;
	top: -30px;
	background: #F39C6B;
	padding: 5px;
	color: #0b0b0b;
	border-radius: 5px;

}

.skills .progress-line > span > .percent-tooltip:after {
	content: '';
	position: absolute;
	border-color: #F39C6B transparent transparent;
	border-style: solid;
	border-width: 7px 5px;
	left: 35%;
	bottom: -14px;
}

.about .main-button {
	margin-top: 25px
}

/*----------------------------------------------------------------
					6. Start Services
----------------------------------------------------------------*/
.services {
	background: #111
}

.services.section-padding {
	padding-bottom: 70px
}

.services-content {
	background: #181718;
	padding: 30px;
	text-align: center;
	position: relative;
	margin-bottom: 30px;
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-ms-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
	z-index: 1
}

.services-content:before {
	position: absolute;
	content: '';
	left: 7px;
	right: 7px;
	top: 7px;
	bottom: 7px;
	border: 1px solid rgba(243, 156, 107, .2);
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-ms-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}

.services-content:hover:before {
	border: 1px solid rgba(243, 156, 107, 1);
}

.services-content:hover {
	-webkit-box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
	-o-box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
	position: relative;
	transform: translate(0, -10px);
	cursor: pointer
}

.services-content .icon {
	font-size: 40px;
	color: #F39C6B;
	margin-bottom: 15px;
	display: block
}

.services-content h5 {
	font-size: 18px;
	margin-bottom: 20px;
	letter-spacing: 1px
}

/*----------------------------------------------------------------
					7. Start Resume
----------------------------------------------------------------*/
.resume {
	background: #181718;
}

.timeline {
	position: relative;
	width: 100%;
	z-index: 1
}

.timeline:before {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	width: 4px;
	height: 100%;
	background: #111;
	display: block;
}

.timeline ul li {
	position: relative;
	width: 50%;
	padding: 30px;
	box-sizing: border-box;
}

.timeline ul li:nth-child(odd) {
	float: left;
	text-align: right;
	clear: both;
}

.timeline ul li:nth-child(even) {
	float: right;
	text-align: left;
	clear: both;
}

.timeline-content {
	position: relative;
	background: #111
}

.timeline-content {
	position: relative;
	padding: 30px
}

.timeline-content:before {
	content: '';
	position: absolute;
	left: 7px;
	right: 7px;
	top: 7px;
	bottom: 7px;
	border: 1px solid rgba(243, 156, 107, .2);
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-ms-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}

.timeline-content:hover:before {
	border: 1px solid rgba(243, 156, 107, 1);
}

.timeline ul {
	margin-bottom: 0 !important
}

.timeline ul li h6 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
	margin-top: 15px
}

.timeline ul li:nth-child(odd) .time {
	position: absolute;
	top: 13%;
	padding: 8px 16px;
	background: #111;
	color: #F39C6B;
	font-family: 'open sans', sans-serif
}

.timeline ul li:nth-child(odd) .time:before {
	position: absolute;
	content: '';
	width: 12px;
	height: 12px;
	background: #F39C6B;
	top: 25%;
	border-radius: 50%
}

.timeline ul li:nth-child(odd) .time:after {
	position: absolute;
	content: '';
	border: solid transparent;
	border-right-color: #111;
	border-width: 12px;
	top: 15%;
}

.timeline ul li:nth-child(even) .time {
	position: absolute;
	top: 13%;
	padding: 8px 16px;
	background: #111;
	color: #F39C6B;
	font-family: 'open sans', sans-serif
}


.timeline ul li:nth-child(even) .time:before {
	position: absolute;
	content: '';
	width: 12px;
	height: 12px;
	background: #F39C6B;
	top: 32%;
	border-radius: 50%
}

.timeline ul li:nth-child(even) .time:after {
	position: absolute;
	content: '';
	border: solid transparent;
	border-left-color: #111;
	border-width: 12px;
	top: 20%;
}

.timeline ul li:nth-child(1) .time {
	right: -30%;
}

.timeline ul li:nth-child(1) .time:before {
	left: -24%;
}

.timeline ul li:nth-child(1) .time:after {
	left: -17%;
}

.timeline ul li:nth-child(2) .time {
	left: -26%;
}

.timeline ul li:nth-child(2) .time:before {
	right: -30.5%;
}

.timeline ul li:nth-child(2) .time:after {
	right: -21%;
}


.timeline ul li:nth-child(3) .time {
	right: -29%;
}

.timeline ul li:nth-child(3) .time:before {
	left: -24%;
}

.timeline ul li:nth-child(3) .time:after {
	left: -17%;
}

.timeline ul li:nth-child(4) .time {
	left: -31%;
}

.timeline ul li:nth-child(4) .time:before {
	right: -26.5%;
}

.timeline ul li:nth-child(4) .time:after {
	right: -17%;
}

.timeline ul li:nth-child(5) .time {
	right: -34%;
}

.timeline ul li:nth-child(5) .time:before {
	left: -23%;
}

.timeline ul li:nth-child(5) .time:after {
	left: -15%;
}

.timeline ul li:nth-child(6) .time {
	left: -31%;
}

.timeline ul li:nth-child(6) .time:before {
	right: -30.5%;
}

.timeline ul li:nth-child(6) .time:after {
	right: -17%;
}

.timeline ul li:nth-child(7) .time {
	right: -31%;
}

.timeline ul li:nth-child(7) .time:before {
	left: -25%;
}

.timeline ul li:nth-child(7) .time:after {
	left: -17%;
}

.timeline ul li:nth-child(8) .time {
	left: -29%;
}

.timeline ul li:nth-child(8) .time:before {
	right: -30.5%;
}

.timeline ul li:nth-child(8) .time:after {
	right: -18%;
}

.timeline ul li:nth-child(9) .time {
	right: -24%;
}

.timeline ul li:nth-child(9) .time:before {
	left: -33%;
}

.timeline ul li:nth-child(9) .time:after {
	left: -23%;
}

.no-float {
	float: none !important;
	padding: 0 !important
}

/*----------------------------------------------------------------
					8. Start Work
----------------------------------------------------------------*/
.work {
	background: #111
}

.work.section-padding {
	padding-bottom: 70px
}

.list-filter li {
	margin: 0 10px;
	letter-spacing: 2px;
	cursor: pointer;
	position: relative;
	font-size: 14px;
	font-weight: 500;
	display: inline;
	transition: ease .5s;
	color: #fff;
	border-radius: 40px;
	z-index: 1
}

.list-filter li.selected:before {
	content: '';
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	top: 50%;
	left: -8px;
	background: #F39C6B;
}

.list-filter li.selected:after {
	content: '';
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	top: 50%;
	right: -8px;
	background: #F39C6B;
}

.list-filter li.selected {
	border-radius: 40px;
	color: #F39C6B;
}

#filtr-container {
	position: relative;
	z-index: 1
}

.work-item {
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
	text-align: center
}

.popup-title {
	content: '';
	position: absolute;
	top: 7px;
	left: 7px;
	bottom: 7px;
	right: 7px;
	background: transparent;
}

.popup-title:before {
	content: '';
	position: absolute;
	width: 0;
	height: 100%;
	background: #181718;
	-webkit-transition: all .4s;
	transition: all .4s;
	top: 0;
	left: 0
}

.popup-title:hover:before {
	width: 100%
}

.work-content img {
	position: relative;
	overflow: hidden
}

.work-inner {
	position: absolute;
	opacity: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.popup-title:hover .work-inner {
	opacity: 1;
}

.work-inner h5 {
	font-size: 18px;
	position: relative;
	margin-bottom: 10px
}

.work-inner a {
	font-size: 25px;
	color: #F39C6B;
	left: 50%;
	transform: translateX(-50%);
}

/*----------------------------------------------------------------
					9. Start Testimonials
----------------------------------------------------------------*/
.testimonials.section-padding {
	padding-bottom: 140px
}

.testimonial {
	background-color: #111;
	padding: 30px;
	position: relative
}

.testimonial:before {
	position: absolute;
	content: '';
	left: 7px;
	right: 7px;
	top: 7px;
	bottom: 7px;
	border: 1px solid rgba(243, 156, 107, .2);
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-ms-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out
}

.testimonial:hover:before {
	border: 1px solid rgba(243, 156, 107, 1);
}

.testimonial p {
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
}

.testimonial .fa-quote-left,
.testimonial .fa-quote-right {
	font-size: 20px;
	position: relative;
	color: #F39C6B;
}

.testimonial .author {
	text-align: center
}

.testimonial .author img {
	height: 100px;
	width: 100px;
	border-radius: 50%;
	display: inline-block;
	margin-bottom: 15px;
	margin-top: 30px;
	position: relative;
	border: 1px solid rgba(243, 156, 107, .5);
	padding: 3px
}

.testimonial .author h6 {
	color: #F39C6B;
	letter-spacing: 1px;
	font-weight: 700;
	font-size: 18px
}

.testimonial .author span {
	font-family: "open sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #fcfcfc
}

.testimonial .fa-quote-right {
	left: 96%
}

/*----------------------------------------------------------------
					10. Start Blog
----------------------------------------------------------------*/
.blog {
	background: #111
}

.blog-content {
	background: #181718;
	padding: 30px;
	padding-bottom: 70px;
	position: relative
}

.blog-content:before {
	position: absolute;
	content: '';
	left: 7px;
	right: 7px;
	top: 7px;
	bottom: 7px;
	border: 1px solid rgba(243, 156, 107, .2);
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-ms-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out
}

.blog-content:hover:before {
	border: 1px solid rgba(243, 156, 107, 1);
}

.post-content {
	position: relative
}

.post-content h6 {
	padding: 5px 10px;
	text-align: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: relative;
	/* top: -80%;
	right: 2%; */
	background: #111;
	font-size: 16px
}

.blog .date {
	width: 50px;
	height: 60px;
	text-align: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: absolute;
	bottom: 90%;
	left: 2%;
	background: #111;
}


.blog .date span {
	display: block
}

.blog p {
	margin-bottom: 20px !important;
	margin-top: 30px
}

/*----------------------------------------------------------------
					11. Start contact
----------------------------------------------------------------*/
.contact {
	position: relative;
	z-index: 1
}

/* .contact .overlay {
	background: url('../img/contact.png');
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	opacity: .1;
	width: 100%;
	height: 80%;
	position: absolute;
	top: 20%;
	z-index: -1;
	overflow: hidden
} */

.contact h6 {
	color: #F39C6B;
	letter-spacing: 1px;
	margin-bottom: 20px;
	font-size: 18px
}

.contact .address,
.contact .phone {
	margin-bottom: 20px
}

.contact .address,
.contact .phone,
.contact .email {
	padding: 30px;
	background: #111;
	position: relative;
	text-align: center
}

.contact .address:before,
.contact .phone:before,
.contact .email:before {
	position: absolute;
	content: '';
	left: 7px;
	right: 7px;
	top: 7px;
	bottom: 7px;
	border: 1px solid rgba(243, 156, 107, .2);
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-ms-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out
}

.contact .address:hover:before,
.contact .phone:hover:before,
.contact .email:hover:before {
	border: 1px solid #F39C6B;
}

.contact .fa-map-marker-alt,
.contact .fa-phone,
.contact .fa-paper-plane {
	font-size: 25px;
	color: #F39C6B;
}

.contact .contact-social h6 {
	margin-top: 30px;
}

.contact .contact-infos span {
	font-family: "open sans", sans-serif;
	font-weight: 600;
	color: #F39C6B
}

.contact-social ul {
	margin-bottom: 0 !important
}

.contact-social li {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	text-align: center;
	color: #fcfcfc !important;
	background: #111
}

.contact-social li {
	display: inline-block;
	margin-right: 10px;
	transition: all .3s linear;
	border: 1px solid rgba(243, 156, 107, .2);
}

.contact-social li:last-child {
	margin-right: 0
}

.contact-social li:hover {
	border-radius: 50%;
	border: 1px solid #F39C6B;
}

.contact-social li a {
	transition: all .5s ease;
}

.contact-social li a:hover {
	color: #F39C6B !important
}

.contact-form {
	padding: 30px;
	background: #111;
	position: relative
}

.contact-form:before {
	position: absolute;
	content: '';
	left: 7px;
	right: 7px;
	top: 7px;
	bottom: 7px;
	border: 1px solid rgba(243, 156, 107, .2);
	-webkit-transition: 0.4s ease-in-out;
    -moz-transition: 0.4s ease-in-out;
    -ms-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}

.contact-form:hover:before {
    border: 1px solid #F39C6B;
}

.contact-form input {
	position: relative;
	color: #fff !important;
}

.contact-form p {
	color: #F39C6B;
}

.contact-form textarea {
	height: 150px !important
}

.contact .form-control {
	background: #111;
	padding: 20px;
	/* border: 1px solid rgba(243, 156, 107, .2); */
	border: 1px solid #fff;
	border-radius: 0;
	margin-bottom: 20px;
	-webkit-transition: 0.4s ease-in-out;
    -moz-transition: 0.4s ease-in-out;
    -ms-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}

.contact .form-control:focus, .contact .form-control:hover {
	border: 1px solid #F39C6B;
    outline: 0;
    color: #0F0F0F;
    box-shadow: none;
}

.contact small {
	float: left;
    padding: 10px 0px;
}


/*----------------------------------------------------------------
					12. Start footer
----------------------------------------------------------------*/
footer {
	background: #111;
}

footer .logo {
	font-weight: 800;
	letter-spacing: 2px;
	font-size: 20px;
	color: #fff
}

footer .logo span {
	font-weight: 900;
	color: #F39C6B;
	margin-left: 5px
}

.footer-social ul {
	margin-bottom: 15px !important;
	margin-top: 15px
}

.footer-social li {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	text-align: center;
	color: #fcfcfc !important;
	background: #111
}

.footer-social li {
	display: inline-block;
	margin-right: 10px;
	transition: all .3s linear;
	border: 1px solid rgba(243, 156, 107, .2);
	background: #181718;
	position: relative;
	z-index: 1
}

.footer-social li:last-child {
	margin-right: 0
}

.footer-social li:hover {
	border-radius: 50%;
	border: 1px solid #F39C6B;
	cursor: pointer;
}

.footer-social li a {
	transition: all .5s ease;
}

.footer-social li a:hover {
	color: #F39C6B !important
}

footer p {
	font-size: 16px;
	letter-spacing: 1px;
	color: #fcfcfc;
	font-weight: 500
}

footer p strong {
	color: #F39C6B
}

/*----------------------------------------------------------------
					13. Start lines
----------------------------------------------------------------*/
.lines {
	position: relative
}

.line {
	position: fixed;
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, .02);
	top: 0;
	z-index: 0
}

.line.line1 {
	left: 5%;
}

.line.line2 {
	left: 23%
}

.line.line3 {
	left: 41%
}

.line.line4 {
	left: 59%
}

.line.line5 {
	left: 77%
}

.line.line6 {
	left: 95%
}

/*----------------------------------------------------------------
					14. Start color switcher
----------------------------------------------------------------*/
.demo-style-switch {
	position: fixed;
	z-index: 2;
	right: -220px;
	top: 100px;
}

.demo-style-switch:hover {
	opacity: 1 !important;
}

.demo-style-switch .switched-options {
	position: relative;
	width: 220px;
	text-align: center;
	padding: 5px 14px;
	background: #181718;
	-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}

.demo-style-switch .config-title {
	text-transform: capitalize;
	font-weight: 700;
	font-size: 16px;
	color: #fcfcfc;
	display: inline-block;
	margin-bottom: 5px;
}

.demo-style-switch ul {
	margin-bottom: 4px;
}

.demo-style-switch ul .active {
	color: #F39C6B;
	font-weight: 700;
}

.demo-style-switch ul .active a {
	color: #F39C6B;
	font-weight: 700;
}

.demo-style-switch ul li a {
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	color: #808080;
}

.demo-style-switch ul li a:hover {
	color: #008ed6;
}

.demo-style-switch ul.styles {
	margin-top: 10px;
}

.demo-style-switch ul.styles li {
	display: inline-block;
	margin-right: 5px;
}

.demo-style-switch ul.styles li .green,
.demo-style-switch ul.styles li .silver,
.demo-style-switch ul.styles li .red,
.demo-style-switch ul.styles li .yellow,
.demo-style-switch ul.styles li .aquamarine,
.demo-style-switch ul.styles li .orange,
.demo-style-switch ul.styles li .orangelight,
.demo-style-switch ul.styles li .rose {
	width: 35px;
	height: 35px;
	border-radius: 50%;
}

.demo-style-switch ul.styles li .green {
	background: #679436;
}

.demo-style-switch ul.styles li .silver {
	background: #886F74;
}

.demo-style-switch ul.styles li .red {
	background: #C33232;
}

.demo-style-switch ul.styles li .yellow {
	background: #F9DF74;
}

.demo-style-switch ul.styles li .aquamarine {
	background: #81F4E1;
}

.demo-style-switch ul.styles li .orange {
	background: #E4572E;
}

.demo-style-switch ul.styles li .orangelight {
	background: #C36F09
}

.demo-style-switch ul.styles li .rose {
	background: #D44D5C
}

.demo-style-switch .switch-button {
	opacity: 1 !important;
	background: #181718;
	padding: 10px 20px;
	font-size: 20px;
	color: #fff !important;
	position: absolute;
	overflow: hidden;
	left: -58px;
}

.demo-style-switch .switch-button:before {
	content: '';
	position: absolute;
	left: 7px;
	right: 7px;
	top: 7px;
	bottom: 7px;
	border: 1px solid rgba(255, 255, 255, .05)
}

.modal-body {
    padding: 0px !important;
}