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

Template Name:  Shaun - Personal Portfolio HTML Template
Author: MouriThemes
Version: 1.0
Design and Developed by: MouriThemes

NB: This is the main stylesheet of this theme.

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

/*
Table of content

01. Default css
02. Preloader css
03. Nav area css
04. Banner Area css
05. About Area CSS
06. Resume Area CSS
07. Services area css
08. Portfolio area css
09. Statistic area css
10. Blog area css
11. Testimonial area css
12. Invitation area css
13. Contact area css
14. Footer area css
15. Single Blog css

*/

/*---------------------------------
 01. Default css
-----------------------------------*/

html, body {
	height: 100%;
}
body {
	font-family: 'Poppins', sans-serif;
	width: 100%;
	height: 100%;
	font-size: 15px;
	line-height: 1.5;
	color: #000;
	font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
	color: #000000;
	font-weight: 600;
}
h3 {
	font-size: 20px;
	text-transform: none;
}
p {
	letter-spacing: 0;
	line-height: 1.8;
}
a {
	text-decoration: none;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
a:focus {
	outline: none;
	text-decoration: none;
}
ul, li {
	margin: 0;
	padding: 0;
}
img {
	max-width: 100%;
	height: auto;
}
.section-padding {
	padding: 80px 0;
}
.section-header {
	margin-bottom: 60px;
	text-align: center;
}
.section-header .line1 {
	height: 5px;
	width: 100px;
	background: #9eca45;
	margin: 15px auto 0;
}
section {
	background: #fff;
}
.xs-mb-30 {
	margin-bottom: 30px;
}

/*---------------------------------
 02. Preloader css
-----------------------------------*/

.loader_bg {
	position: fixed;
	z-index: 9999999;
	background: #fff;
	width: 100%;
	height: 100%;
}
.loader {
	border: 0 solid transparent;
	border-radius: 50%;
	width: 150px;
	height: 150px;
	position: absolute;
	top: calc(50vh - 75px);
	left: calc(50vw - 75px);
}
.loader:before, .loader:after {
	content: '';
	border: 1em solid #9eca45;
	border-radius: 50%;
	width: inherit;
	height: inherit;
	position: absolute;
	top: 0;
	left: 0;
	animation: loader 2s linear infinite;
	opacity: 0;
}
.loader:before {
	animation-delay: .5s;
}
@keyframes loader {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 0;
	}
}

/*---------------------------------
 03. Navigation css
-----------------------------------*/

.nav-area {
	height: 65px;
}
.nav-area.sticky_navigation {
	background: #ffffff;
	height: 55px;
}
.sticky_navigation {
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
	-webkit-box-shadow: 0px 3px 4.6px 0.3px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 3px 4.6px 0.3px rgba(0, 0, 0, 0.25);
	box-shadow: 0px 3px 4.6px 0.3px rgba(0, 0, 0, 0.25);
}
.sticky_navigation .main-menu {
	margin-top: 0;
}
.sticky_navigation .navbar-brand, .sticky_navigation .navbar-brand span {
	color: #9eca45;
}
.sticky_navigation .nav li a {
	color: #333333;
}
.sticky_navigation .nav li.active a {
	color: #9eca45;
}
.main-menu {
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
	margin-top: 10px;
}
.navbar {
	border: 0;
	margin-bottom: 0;
}
.navbar-brand {
	padding: 15px 0;
	font-size: 25px;
	display: block;
	color: #000;
	font-weight: 800;
}
.navbar-brand:focus, .navbar-brand:hover {
	text-decoration: none;
	color: #000;
}
.navbar-right li {
	display: inline-block;
	float: none;
}
.navbar-right li a {
	color: #000;
	text-transform: uppercase;
	font-weight: 600;
}
.navbar-right li.active a {
	font-weight: bold;
	color: #9eca45;
}
.nav>li>a:hover, .nav>li>a:active, .nav>li>a:focus {
	background: none;
}
.navbar-toggle .icon-bar {
	background: #777777;
}

/*---------------------------------
 05. Banner Area css
-----------------------------------*/

.home-text {
	margin-top: 250px;
}
.home-img img {
	margin: 70px 0px 0px 30px;
}
.text-affect, .typed-cursor {
	display: inline;
	font-size: 4em;
	font-weight: 700;
	background-clip: border-box;
	color: #9eca45;
}
.banner-btn a {
	background: transparent;
	color: #000;
	padding: 10px 35px;
	display: inline-block;
	margin-top: 30px;
	border-radius: 50px;
	text-decoration: none;
	letter-spacing: 2px;
	border: 2px solid #000;
}
.banner-btn a:hover {
	transition: .6s;
	background: #9eca45;
	border: 0;
	color: #fff;
}

/*---------------------------------
 06. About area css
-----------------------------------*/

.about-area h4 {
	font-size: 30px;
	margin-bottom: 30px;
}
.skills-area {
	margin-top: 30px;
}
.skills-area h6 {
	font-size: 25px;
	margin-bottom: 40px;
}
.skillbar .skillbar-title {
	font-weight: normal;
}
.skillbar {
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 30px;
}
.skillbar-bar:before {
	background: #eee;
	content: "";
	height: 3px;
	position: absolute;
	width: 100%;
	z-index: -1;
}
.skillbar-bar {
	height: 7px;
	width: 0px;
	background: #9eca45;
	transition-property: width, background-color;
	margin-top: 6px;
}
.skillbar-title {
	color: #000;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	display: inline-block;
}
.skill-bar-percent {
	float: right;
	display: inline-block;
	color: #000;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
}

/*---------------------------------
 07. Resume area css
-----------------------------------*/

.resume-area h5 {
	font-size: 20px;
}
#resume h1 {
	padding-left: 15px;
	font-size: 30px;
}
.timeline {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}
.timeline::after {
	content: '';
	position: absolute;
	width: 6px;
	background-color: #9eca45;
	top: 0;
	bottom: 0;
	left: 0;
	margin-left: -3px;
}
.wrapper {
	padding: 10px 40px;
	position: relative;
	background-color: inherit;
	width: 100%;
}
.wrapper::after {
	content: '';
	position: absolute;
	width: 25px;
	height: 25px;
	right: -17px;
	background-color: white;
	border: 4px solid #9eca45;
	top: 20px;
	border-radius: 50%;
	z-index: 1;
}
.right {
	left: 0;
}
.right::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	left: 30px;
	border: medium solid #9eca45;
	border-width: 10px 10px 10px 0;
	border-color: transparent #9eca45 transparent transparent;
}
.right::after {
	left: -12px;
}
.content {
	padding: 20px 30px;
	background-color: white;
	position: relative;
	border-radius: 6px;
	color: #000;
	background: #9eca45;
}
.education-area h6, .experience-area h6 {
	font-size: 20px;
}
#resume h3 {
	font-size: 15px;
	color: #fff;
	margin: 10px auto;
	text-transform: uppercase;
}
#resume h4 {
	font-size: 15px;
	color: #000;
}
#resume h6 {
	color: #fff;
}
#resume h4 span {
	padding-left: 10px;
}
#resume h5 {
	padding-left: 40px;
}
#resume p {
	font-size: 13px;
	color: #fff;
}

/*---------------------------------
 08. Services area css
-----------------------------------*/

.single-service {
	margin-bottom: 30px;
	text-align: center;
}
.single-service i {
	font-size: 50px;
	text-align: center;
	height: 80px;
	padding-top: 10px;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
}
.single-service h2 {
	margin: 20px 0;
	font-size: 18px;
	font-weight: 600;
}
.single-service:hover i {
	color: #9eca45;
	padding: 0;
}
.single-service:hover h2 {
	color: #9eca45;
}

/*---------------------------------
 09. Portfolio area css
-----------------------------------*/

.single-portfolio {
	margin-top: 20px;
}
.single-portfolio .item {
	position: relative;
	overflow: hidden;
	margin-top: 30px;
}
.single-portfolio .item img {
	width: 100%;
	transition: 0.8s ease-out;
}
.portfolio-area .list-inline li.active {
	background: #9eca45;
	color: #ffffff;
}
.portfolio-area ul li:hover {
	cursor: pointer;
}
.single-portfolio .item-overlay {
	position: absolute;
	transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
	-ms-transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
	-moz-transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
	-webkit-transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
	height: 0;
	top: 50%;
	width: 0;
	text-align: center;
	opacity: 0;
	left: 50%;
}
.single-portfolio .item:hover {
	z-index: 100;
	transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}
.single-portfolio .item:hover .item-overlay {
	height: 85%;
	top: 0;
	left: 0;
	opacity: 0.9;
	width: 100%;
}
.portfolio-images .mix {
	display: none;
}
.single-portfolio .item-overlay i {
	position: absolute;
	transform: translate(-50%, -50%);
	font-size: 22px;
	left: 50%;
	color: #fff;
	background: #9eca45;
	padding: 20px;
	top: 50%;
}
.portfolio-area ul.list-inline {
	text-align: center;
}
.portfolio-area ul.list-inline li {
	font-weight: bold;
	background-color: #333333;
	color: #ffffff;
	padding: 15px 30px;
}

/*---------------------------------
 10. Statistics area css
-----------------------------------*/

.statistic-area {
	text-align: center;
	background: #9eca45;
}
.single-count i {
	color: #ffffff;
	font-size: 35px;
	margin-bottom: 30px;
}
.single-count h2 {
	font-size: 50px;
	color: #fff;
}
.single-count p {
	font-size: 18px;
	color: #fff;
}

/*---------------------------------
 11. Blog area css
-----------------------------------*/

.blog-item .post-meta {
	color: #fff;
	font-size: 12px;
	line-height: normal;
	margin-top: 30px;
}
.blog-item {
	margin-bottom: 30px;
}
.cuss-color {
	color: #9eca45;
}
.btn-bar .btn-cus {
	background: #9eca45;
	color: #fff;
	border: none;
	border-radius: 50px;
	padding: 10px 25px;
	margin-top: 20px;
}

/*---------------------------------
 12. Testimonial area css
-----------------------------------*/

.testimonial-content p {
	font-weight: 400;
	font-style: italic;
	font-size: 18px;
	color: #000;
}
.single-testimonial {
	margin: 0 49px 29px;
	border-right: 5px solid #fff;
	border-left: 5px solid #fff;
	padding: 40px 30px 40px;
	position: relative;
	background-color: transparent;
	color: #fff;
	text-align: center;
}
.single-testimonial::before {
	content: "";
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	width: 20%;
	height: 5px;
}
.single-testimonial::after {
	content: "";
	background-color: #fff;
	right: 0;
	width: 20%;
	height: 5px;
	position: absolute;
	bottom: 0;
}
.single-testimonial .testimonial-content {
	margin-bottom: 30px;
	font-size: 15px;
}
.single-testimonial .pic {
	display: inline-block;
	width: 80px;
	height: 80px;
	margin-right: 15px;
	border-radius: 50%;
	overflow: hidden;
}
.single-testimonial .pic img {
	width: 100%;
	height: 100%;
}
.single-testimonial .testimonial-title small {
	font-size: 15px;
	color: #292F36;
}
.owl-theme .owl-controls {
	margin-top: 50px;
	margin-left: 30px;
}
.owl-dots {
	text-align: center;
}
.owl-dot {
	display: inline-block;
	height: 15px !important;
	width: 15px !important;
	background-color: #000 !important;
	opacity: 0.8;
	border-radius: 50%;
	margin: 0 5px;
}
.owl-dot.active {
	background: #9eca45 !important;
}

/*---------------------------------
 13. Invitation area css
-----------------------------------*/

.invitation-area {
	background: #9eca45;
	color: #ffffff;
}
.single-invite h2 {
	font-size: 27px;
	text-transform: uppercase;
	line-height: 37px;
	margin-bottom: 20px;
	padding-top: 10px;
	font-weight: 600;
	color: #ffffff;
}
.single-invite p {
	width: 70%;
	margin: auto;
	color: #ffffff;
}
.single-invite a {
	display: inline-block;
	color: #000;
	padding: 10px 20px;
	text-transform: uppercase;
	background: #fff;
	margin-top: 20px;
	border-radius: 30px;
	margin-left: 5px;
	margin-right: 5px;
	font-size: 14px;
}

/*---------------------------------
 13. Contact area css
-----------------------------------*/

.contact-area .form-control {
	border: none;
	border-bottom: 2px solid #a2a2a2;
	box-shadow: none;
	padding: 6px 0;
	border-radius: 0;
	margin-bottom: 30px;
}
.contact-area textarea.form-control {
	border: 2px solid #a2a2a2;
	padding: 6px;
	height: 250px;
	margin-bottom: 30px;
}
.btn.btn-send {
	background: #9eca45;
	color: #ffffff;
	border-radius: 50px;
	padding: 15px 25px;
	text-transform: uppercase;
	font-weight: 600;
	border: 0px;
}
.form-control {
	background-color: transparent;
}

/*---------------------------------
 14. Footer area css
-----------------------------------*/

.footer-area {
	background: #0a0a0a;
	color: #ffffff;
	padding: 30px 0;
}

/*---------------------------------
 14. Single Blog area css
-----------------------------------*/

.single-post-blog img {
	width: 100%;
}
.blog-img-area {
	padding: 100px 0 80px;
	z-index: 1;
	text-align: center;
	color: #fff;
	background-image: url(../images/blog/p.jpg);
	background-size: cover;
	background-position: center center;
}
.blog-img-area h2 {
	color: #000;
	font-size: 35px;
	font-weight: bold;
}
.blog-img-area h1 {
	font-size: 46px;
	color: #000;
	text-transform: capitalize;
	font-weight: 700;
	margin-top: 0;
}
.breadcrumb {
	background-color: transparent;
	color: #000;
	justify-content: center;
	font-size: 18px;
	font-weight: 900;
}
.breadcrumb a {
	color: #000;
	text-decoration: none;
	padding: 0 8px;
}
.breadcrumb a.thin {
	color: #000;
}
.single-blog-area {
	background: #f6f6f6;
}
.single-post-text {
	padding: 0 20px 20px;
	border: 1px solid #dddddd;
}
.compliment-area .meta {
	margin-bottom: 15px;
}
.single-post-text h2 {
	font-size: 20px;
	font-weight: 600;
	margin: 20px 0;
	text-transform: capitalize;
	color: #333333;
}
.discussion-area {
	margin-top: 30px;
}
blockquote {
	font-size: 17px;
	line-height: 1.8;
}
.compliment-area .meta span {
	margin-right: 25px;
	font-weight: 700;
}
.compliment-area .meta i {
	margin-right: 10px;
	color: #9eca45;
}
.discussion-area .custom-button-4 {
	color: #fff;
}
.dis-form-title {
	margin-bottom: 30px;
}
.widget.tags ul {
	padding: 20px 0;
}
.widget {
	border: 1px solid #ddd;
	padding: 15px 20px;
	margin-bottom: 30px;
}
.widget.search {
	padding: 0;
}
.widget.category li, .widget.recent-post li {
	position: relative;
}
.widget.category li:before, .widget.recent-post li:before {
	position: absolute;
	left: -15px;
	top: 0;
	content: "-";
	color: #222;
	font-size: 18px;
}
.widget.category ul, .widget.recent-post ul {
	list-style: none;
	padding: 15px;
}
.widget.category ul li a, .recent-post ul li a {
	margin-left: 10px;
	color: #333333;
	font-weight: 500;
}
.widget.category ul li a span, .recent-post ul li a span {
	float: right;
}
.widget.category ul li, .recent-post ul li {
	margin-bottom: 10px;
}
.widget.tags a {
	background-color: transparent;
	border: 1px solid #222222;
	display: block;
	font-size: 13px;
	margin-right: 4px;
	padding: 6px 13px;
	transition: 0.3s;
	color: #222222;
	text-decoration: none;
	font-weight: 600;
}
.widget.tags a:hover {
	background: #9eca45;
	border-color: #9eca45;
	color: #ffffff;
}
.widget.tags li {
	display: inline-block;
}
.widget.category ul li, .widget.tags ul li {
	margin-bottom: 8px;
}
.widget ul li {
	line-height: 1.7;
}
h3.widget-title {
	font-size: 18px;
	text-transform: capitalize;
	font-weight: 700;
	letter-spacing: 1px;
}
.widget .widget-current-post li .recent-blog-text {
	font-size: 14px;
}
.widget .widget-current-post li a {
	font-weight: 500;
	text-decoration: none;
	color: #333333;
	margin: 0;
	text-transform: capitalize;
}
.recent-blog-text a p {
	color: #9eca45;
}
.search-area {
	width: 100%;
}
.search-area button[type="submit"] {
	position: absolute;
	right: 15px;
	padding: 11px 15px;
	background: #9eca45;
	color: #fff;
	top: 0px;
	border: 0px solid;
}
.search-area input[type="search"] {
	padding: 10px;
	border: 0px solid;
	background: transparent;
}
.discussion-area #contact-form .btn.btn-send {
	background: #9eca45;
	color: #fff;
}