/*
Theme Name: Portfolio - Creative Personal Portfolio HTML5 Template
Theme URI: http://sumon.forhadart.com/
Author: SS Designstudio
Version: 1.0
Description: This is html5 template for Personal Portfolio.
*/
/* CSS Indexing
	1. THEME DEFAULT CSS
	2. HEADER AREA CSS
	3. SLIDER AREA CSS
	4. ABOUT AREA CSS
	5. SKILLS AREA CSS
	6. SERVICE AREA CSS
	7. PROCESS AREA CSS
	8. PORTFOLIO AREA CSS
	9. COUNTER AREA CSS
	10. BLOG AREA CSS
	11. TESTIMONIAL AREA CSS
	12. CONTACT AREA CSS
	13. FOOTER AREA CSS
	14. BREADCRUMB AREA CSS
	15. BLOG DETAIL AREA CSS
	16. Pre Loader and scrollToTop
*/

/*----------------------------------
--------- THEME DEFAULT CSS --------
----------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900');
body {
    line-height: 25px;
    font-size: 16px;
    color: #404040;
	font-family: 'Raleway', sans-serif;
    font-weight: 300;
}

/*----------------------------
---------- RESET CSS ---------
----------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
}
h1 {
    font-size: 70px;
}
h2 {
    font-size: 46px;
}
h3 {
    font-size: 24px;
}
h4 {
    font-size: 18px;
}
a {
    transition: 0.4s;
}
a,
a:hover {
    color: #404040;
}
img {
    max-width: 100%;
    height: auto;
}
iframe {
    width: 100%;
    border: none;
}
a,
a:hover,
a:focus,
a:active,
button:focus {
    text-decoration: none;
    border: none;
    outline: 0;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
select:focus,
select:active {
    box-shadow: none;
    border: 0;
    outline: 0
}
input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: none;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea {
    background: transparent;
    width: 100%;
    padding: 0 15px;
    border: 1px solid #9ad224;
    height: 40px;
    margin-bottom: 30px;
}
textarea {
    height: 100px;
}
textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}
.ptb-100 {
	padding-top: 115px;
	padding-bottom: 100px;
}
.mt-45 {
	margin-top: 45px;
}
.mt-30 {
	margin-top: 30px;
}
.sec-title {
    text-align: center;
}
.sec-title h2 {
    position: relative;
	font-size: 36px;
	display: inline-block;
	padding-bottom: 15px;
}
.sec-title h2::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 50px;
    height: 8px;
    background: #9ad224;
    transition: all 0.4s;
    margin: auto;
    right: 0;
}
.sec-title h2:hover::before {
    width: 100%;
}
.owl-nav div {
    position: absolute;
    top: 50%;
    left: 0;
    width: 40px;
    background: #9ad224;
	border: 1px solid #9ad224;
    color: #fff;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
	opacity: 0;
    transition: 0.4s;
    margin-top: -40px;
	cursor: pointer;
}
.owl-nav div:hover {
	background: transparent;
}
.owl-nav div.owl-next {
    right: 0;
    left: auto;
}
.owl-dots {
    text-align: center;
    margin-top: 25px;
}
.owl-dot {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 10px;
    display: inline-block;
    margin: 0 4px;
}
.owl-dot.active {
    background: #9ad224;
}
.btn-one {
    background: #9ad224;
    border: 2px solid #9ad224;
    color: #fff;
    padding: 10px 30px;
    display: inline-block;
	transition: all 0.4s;
    text-transform: uppercase;
    font-weight: 500;
	cursor: pointer;
}
.btn-one:hover {
    background: transparent;
    border: 2px solid #9ad224;
    color: #fff;
}

/*--------------------------------------
-------- HEADER AREA CSS START --------
---------------------------------------*/
.header-top {
	background: #000;
	text-align: right;
	font-size: 12px;
	font-weight: 600;
	padding: 5px;
	color: #fff;
}
.header {
    background: rgba(0,0,0,0.65);
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.4s;
    width: 100%;
    z-index: 9;
    max-height: 100px;
}
.header.sticky {
    background: rgba(0,0,0,0.75);
    position: fixed;
    top: 0;
    left: 0;
    transition: all 0.4s;
    width: 100%;
    z-index: 9;
    max-height: 100px;
}
.header a {
    color: #fff;
}
.header-right-menu,
.desktop-menu {
    text-align: right;
}
/*.logo {
    background: #fff;
    text-align: center;
    overflow: hidden;
    padding: 5px 10px;
}*/
.logo a span {
    display: block;
    opacity: 0.8;
}
.logo img {
    max-height: 82px;
    display: block;
    margin: auto;
    height: 100%;
    width: auto;
}
.logo a {
    display: block;
}
.header-right-menu li,
.desktop-menu li {
    display: inline-block;
    text-transform: capitalize;
    font-weight: 300;
    margin: 0 15px;
	position: relative;
}
.desktop-menu li a {
    position: relative;
    padding: 9px 0 12px;
    display: inline-block;
}
.desktop-menu li a::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: #9ad224;
    transition: all 0.4s;
}
.desktop-menu li a:hover::before,
.desktop-menu li a.active::before {
    width: 100%;
}
.slicknav_menu {
    margin: 10px 0 0;
	padding: 0;
    background: transparent;
}
.desktop-menu {
    display: block;
}
.slicknav_menu {
	display: none;
}
.desktop-menu li ul {
    position: absolute;
    top: 100%;
    background: #000;
    left: 0;
    text-align: left;
    opacity: 0;
    min-width: 250px;
    transform: scaleY(0);
    transition: all 0.3s;
}
.desktop-menu li:hover > ul {
    opacity: 1;
    transform: scaleY(1);
}
.desktop-menu ul > li > a {
	padding-right: 15px;
}
.desktop-menu ul > li > a:only-child{
	padding-right: 0;
}
.desktop-menu li > a:only-child:after {
    display: none;
}
.desktop-menu li > a:after {
    content: "";
    border-width: 6px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    right: 0;
    position: absolute;
    width: 0;
    top: 5px;
    bottom: 0;
    height: 0;
    margin: auto;
}
.desktop-menu li ul li {
    border: none;
    display: block;
}
.desktop-menu li ul li a {
    padding: 5px 0 12px;
}
.desktop-menu li ul ul {
    top: 0;
    left: 100%;
    border: 1px solid #fff;
}
.desktop-menu li ul li:hover ul {
    top: 0;
}
.desktop-menu ul li ul a {
    padding-right: 15px;
}
.desktop-menu ul li ul a:only-child {
    padding-right: 0;
}
.header-right-menu
 li a::before {
    display: none;
}
.header-right-menu > li > a, .desktop-menu ul.header-right-menu > li > a:only-child {
    padding: 5px 15px;
}
ul.header-right-menu {
    padding-top: 6px;
}
.header-right-menu li {
    margin: 0;
}
.header-right-menu li i {
    margin-right: 5px;
}
.header .container {
	display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(12, 1fr);
}
.header-logo {
    grid-column: span 3;
    grid-row: span 2;
    padding-right: 25px;
}
.header-right {
    grid-column: span 9;
}
.header-menu {
    grid-column: span 9;
}
/*--------------------------------------
--------- HEADER AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- SLIDER AREA CSS START --------
---------------------------------------*/
.slider {
	background: url('../img/slider.jpg') no-repeat center / cover;
	position: relative;
	z-index: 1;
    padding: 170px 0 50px;
	overflow: hidden;
}
.slider::before {
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    position: absolute;
    opacity: 0;
}
.single-slide h2 {
    color: #9ad224;
}
.single-slide h1 {
    color: #9ad224;
    margin: 15px 0;
}
.single-slide h1 span {
    display: inline-block;
    background: rgba(0,0,0,0.6);
    padding: 2px 20px 5px;
}
.single-slide {
    text-align: center;
}
.single-slide .btn-one {
    margin: 12px;
}
.btn-two {
    color: #9ad224;
    background: transparent;
}
.btn-two:hover {
    background: #9ad224;
    color: #fff;
}
.display-table {
    width: 100%;
    height: 100%;
    display: table;
}
.display-table-cell {
    display: table-cell;
    vertical-align: middle;
}
.slider:hover .owl-nav div.owl-prev {
	opacity: 1;
	left: 0;
}
.slider:hover .owl-nav div.owl-next {
	opacity: 1;
	right: 0;
}
/*--------------------------------------
--------- SLIDER AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- ABOUT AREA CSS START --------
---------------------------------------*/
.blog-area {
	overflow: hidden;
}
.single-about-box {
	margin-top: 50px;
}
.single-about-box ul li span {
    width: 146px;
    display: inline-block;
}
.single-about-box ul {
    font-size: 20px;
    margin-bottom: 50px;
}
.single-about-box ul li {
    line-height: 25px;
    margin-bottom: 10px;
}
.single-about-box p {
    margin-bottom: 20px;
}
.single-about-box .btn-one {
    margin-top: 55px;
}
.single-about-box .btn-one:hover {
    color: #9ad224;
}
/*--------------------------------------
--------- ABOUT AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- OFFICE AREA CSS START --------
---------------------------------------*/
.single-office-box {
	margin-bottom: 40px;
    display: block;
}
.office-area {
    background: #ebebeb;
	margin-top: 80px;
}
.office-area .sec-title {
	margin-bottom: 40px;
}
.office-area a:hover {
    color: #9ad224;
}

/*--------------------------------------
-------- SKILLS AREA CSS START --------
---------------------------------------*/
.skills {
	background: #ebebeb;
}
.single-skill-box {
    margin: 50px 5px 0;
    text-align: center;
    position: relative;
}
.single-skill-box h4 {
	margin: 20px 0 5px;
}
.single-skill-box img {
	border-radius: 100%;
}
.single-skill-box p {
	margin-bottom: 10px;
}
.btn-three:hover {
    color: #9ad224;
}
.single-skill-box>div>div {
    width: 100% !important;
    height: 100% !important;
}
.cir {
    width: 100% !important;
    height: 100% !important;
    top:  0 !important;
    left: 0 !important;
}
.demo-value {
    position: absolute;
    z-index: 9;
    text-align: center;
    top: 0;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
}
/*--------------------------------------
--------- SKILLS AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- SERVICE AREA CSS START --------
---------------------------------------*/
.service-subitem-area {
	margin-left: 25px;
}
.service-box-icon {
    width: 85px;
    height: 85px;
    position: relative;
    margin: auto;
    background: #9ad224;
    border-radius: 100%;
}
.service-box-icon img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 100%;
    top: 0;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
}
.single-service-box {
    margin-top: 35px;
    box-shadow: inset 0 0 10px #ccc;
    padding: 22px 10px;
    text-align: center;
}
.service-subitem-area .service-box-icon {
	margin: auto;
}
.service-subitem-area .single-service-box {
	text-align: center;
	margin-top: 12px;
}
.service-box-icon:hover {
    background: #000;
}
.single-service-box ul {
    margin-left: 15px;
}
.service-box-menu {
    padding: 10px 15px;
    z-index: -1;
    position: absolute;
    left: 15px;
    background-color: #000;
    right: 15px;
    top: 110%;
    opacity: 0;
    color: #fff;
    transition: all 0.4s;
}
.service-box-menu li a {
    color: #fff;
    padding: 3px 0;
    position: relative;
    display: inline-block;
}
.service-box-menu li a::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 0;
    height: 5px;
    background: #9ad224;
    transition: all 0.4s;
}
.service-box-menu li a:hover::before {
    width: 100%;
}
.service-area .col-lg-3:hover .service-box-menu {
    top: 100%;
	opacity: 1;
    z-index: 10;
}
.service-area .col-lg-3 {
    position: relative;
}
.service-box-menu li {
    text-transform: capitalize;
    line-height: 27px;
}
.single-service-box ul li {
    margin-bottom: 5px;
}
.single-service-box ul li a:hover {
    color: #9ad224;
}
.single-service-box h3 {
    margin: 22px 0 0;
    text-transform: uppercase;
    font-size: 14px;
}
.service-area .sec-title {
	margin-bottom: 20px;
}
.single-service-box h4 {
    font-weight: 600;
    line-height: 30px;
    font-size: 22px;
    margin-bottom: 12px;
}
.video-play {
	position: relative;
	text-align: center;
	color: #fff;
	margin-top: 10px;
}
.video-play a:hover {
	color: #9ad224;
}
.video-play a span {
	display: block;
	font-size: 16px;
	margin-top: 5px;
	transition: all 0.4s;
}
.video-play a span:hover {
	color: #9ad224;
}
.circled-icon {
	border: 1px solid transparent;
	border-radius: 50%;
	text-align: center;
	padding: 13px;
	font-size: 32px;
	display: inline-block;
}
.video-play i:hover {
	background: #9ad224;
	border: 1px solid #9ad224;
}
/*--------------------------------------
--------- SERVICE AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- PROCESS AREA CSS START --------
---------------------------------------*/
.process {
	background: #ebebeb;
}
.process .sec-title {
	margin-bottom: 10px;
}
.single-process-box {
    margin-top: 50px;
    text-align: center;
    position: relative;
}
.single-process-box::after {
    position: absolute;
    content: "";
    right: -15px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 1px;
    height: 50px;
    background: #9ad224;
}
.single-process-box h3 {
    font-weight: 400;
    margin-top: 18px;
    font-size: 20px;
}
.process .col-lg-3:last-child .single-process-box::after  {
	display: none;
}
/*--------------------------------------
--------- PROCESS AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- PORTFOLIO AREA CSS START --------
---------------------------------------*/
.portfolio-menu ul li {
    display: inline-block;
    padding: 5px 20px;
    margin: 0 5px;
    border: 1px solid #9ad224;
    cursor: pointer;
    transition: all 0.4s;
}
.portfolio-menu ul li.active, .portfolio-menu ul li:hover {
    background: #9ad224;
    color: #fff;
}
.portfolio-menu {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 15px;
}
.single-portfolio-box {
    background-repeat: no-repeat;
    background-position: center;
    height: 300px;
    text-align: center;
	background-size: cover;
    color: #fff;
    z-index: 0;
    position: relative;
    margin-top: 30px;
    background-color: #EBEBEB;
}
.single-portfolio-box::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    background: #000;
    width: 0%;
    height: 0%;
    z-index: -1;
    opacity: 0;
    transition: all 0.4s;
}
.single-portfolio-box:hover::before {
    opacity: 0.7;
    width: 100%;
    height: 100%;
}
.portfolio-bg-1 {
	background-image:url('../img/portfolio/portfolio1.jpg');
}
.portfolio-bg-2 {
	background-image:url('../img/portfolio/2.jpg');
}
.portfolio-bg-3 {
	background-image:url('../img/portfolio/3.jpg');
}
.portfolio-bg-4 {
	background-image:url('../img/portfolio/4.jpg');
}
.portfolio-bg-5 {
	background-image:url('../img/portfolio/5.jpg');
}
.portfolio-bg-6 {
	background-image:url('../img/portfolio/6.jpg');
}
.portfolio-box-overlay {
	transform: scale(0);
    transition: all 0.4s;
    opacity: 0;
}
.portfolio-box-overlay a {
	color: #fff;
	padding: 10px 15px;
	border: 1px solid transparent;
}
.portfolio-box-overlay a:hover {
	border: 1px solid #fff;
}
.single-portfolio-box:hover .portfolio-box-overlay {
    transform: scale(1);
    opacity: 1;
}
/*--------------------------------------
--------- PORTFOLIO AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- COUNTER AREA CSS START --------
---------------------------------------*/
.counter-area {
	background: #ebebeb;
	padding: 100px 0 45px;
}
.count-box {
    text-align: center;
    font-size: 24px;
	margin: 0 0 75px;
    padding-bottom: 22px;
    border-bottom: 1px solid #9ad224;
}
.count-box h2 {
    font-weight: 500;
    font-size: 50px;
    margin-bottom: 5px;
}
/*--------------------------------------
--------- COUNTER AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- BLOG AREA CSS START --------
---------------------------------------*/
.single-blog-post {
    margin-top: 55px;
}
.single-blog-post h3 {
    text-transform: uppercase;
    margin: 35px 0 12px;
}
.single-blog-post a.btn-one.btn-two {
    color: #404040;
}
.single-blog-post a:hover {
    color: #9ad224;
}
.single-blog-post h4 {
	font-weight: 500;
}
.single-blog-post p {
    margin: 15px 0 18px;
    line-height: 30px;
}
/*--------------------------------------
--------- BLOG AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- TESTIMONIAL AREA CSS START --------
---------------------------------------*/
.testimonial {
	background: #ebebeb;
}
.testimonial-slider {
    z-index: 0;
}
.testimonial .sec-title {
	margin-bottom: 40px;
}
.testimonial-box {
    text-align: center;
	max-width: 920px;
	margin: auto;
}
.testimonial-box a:hover {
	color: #9ad224;
}
.testimonial-box h2 {
    margin-top: 40px;
    font-size: 30px;
    font-weight: 500;
}
.testimonial-box h3 {
    font-weight: 500;
    margin: 7px 0 35px;
}
.testimonial .owl-carousel .owl-item img {
    width: 150px;
    margin: auto;
    background: #fff;
    border-radius: 100%;
}
.review-area {
	padding-top: 40px;
}
.review-box {
    text-align: center;
    margin-top: 40px;
}
.review-box h3 {
    margin-bottom: 15px;
}
.review-box a {
    display: inline-block;
    width: 80px;
    border: 1px solid #000;
    height: 75px;
    line-height: 72px;
    font-size: 38px;
}
.review-box a:hover i {
    transform: rotate(360deg);
}
.review-box a i {
    transition: all 0.4s;
}
.review-box a:hover {
    background: #fff;
    color: #9ad224;
    border-color: #9ad224;
}
/*.review-area .sec-title {
	margin-bottom: 30px;
}
.review-box iframe {
    width: 100%;
    height: 100%;
    min-height: 300px;
}
.review-item {
    background: #fff;
    box-shadow: inset 0 0 20px #aaa;
    padding: 25px;
    color: #404040;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
}*/
/*--------------------------------------
--------- TESTIMONIAL AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- CONTACT AREA CSS START --------
---------------------------------------*/
.single-contact-box {
    margin-top: 40px;
}
.single-contact-box li {
    display: flex;
    margin-bottom: 40px;
    line-height: 30px;
	font-weight: 400;
}
.single-contact-box li:last-child {
	margin-bottom: 0;
}
.single-contact-box li a {
    display: block;
}
.single-contact-box h4 {
	margin-bottom: 20px;
}
.single-contact-box p {
    margin-bottom: 8px;
}
.contact-box-icon {
    width: 80px;
    padding-right: 20px;
    font-size: 40px;
    transition: all 0.4s;
}
.single-contact-box li:hover .contact-box-icon {
    color: #9ad224;
}
form .btn-one {
	width: 100%;
	padding: 8px;
}
.single-contact-box .btn-one:hover {
    color: #9ad224;
}
/*--------------------------------------
--------- CONTACT AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- FOOTER AREA CSS START --------
---------------------------------------*/
.footer-top {
    background: #ebebeb;
    border-bottom: 1px solid #9ad224;
}
.footer-widget li>span {
    color: #9ad224;
    flex-basis: 30%;
	font-weight: 600;
    display: inline-block;
}
.footer-widget .contact-box-icon {
    width: auto;
    flex-basis: 15%;
    font-size: 25px;
}
.footer-widget li {
    display: flex;
    margin-bottom: 15px;
}
.footer-widget li a {
    display: block;
    line-height: 25px;
}
.footer-widget li a:hover {
    color: #9ad224;
}
.footer-top h3 {
	margin-bottom: 35px;
	line-height: 35px;
	border-bottom: 1px solid #9ad224;
	display: inline-block;
}
div#map {
    width: 100%;
    height: 100%;
    min-height: 150px;
}
.footer-widget iframe {
    width: 100%;
    height: 100%;
    min-height: 210px;
}
.footer {
	background: #ebebeb;
	padding: 40px 0;
}
.footer-info {
    font-weight: 400;
}
.footer-info li {
    display: inline-block;
}
.footer-info li a {
    color: #fff;
    background: #404040;
    width: 30px;
    display: inline-block;
    text-align: center;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
}
.footer-info li a:hover {
    background: #9ad224;
}
/*--------------------------------------
--------- FOOTER AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- BREADCRUMB AREA CSS START --------
---------------------------------------*/
.breadcrumb-area {
    background: #e9e9e9;
    padding: 120px 0 30px;
	text-align: right;
}
.breadcrumb-area h3,
.breadcrumb-area h2,
.breadcrumb-area h1 {
	color: #9ad224;
}
.breadcrumb-area li {
    display: inline-block;
    margin: 5px 15px 5px 0;
    padding: 5px 10px 5px 0;
    position: relative;
    z-index: 1;
}
.breadcrumb-area li::before {
    position: absolute;
    top: 6px;
    margin: auto;
    content: "\f105";
    font-family: fontawesome;
    right: -10px;
}
.breadcrumb-area li:last-child::before {
	display: none;
}
.breadcrumb-area a.active,
.breadcrumb-area a:hover {
	color: #9ad224;
}
/*--------------------------------------
--------- BREADCRUMB AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- BLOG DETAIL AREA CSS START --------
---------------------------------------*/
.widget-title {
    font-weight: 400;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 22px;
}
.widget li {
    margin-bottom: 12px;
}
.widget {
    margin-bottom: 65px;
    font-weight: 400;
}
.widget li:last-child {
    margin-bottom: 0;
}
.widget .related-post span {
    font-size: 14px;
}
.related-post {
    margin-bottom: 45px;
}
.related-post img {
    border: 1px solid #eee;
}
.related-post p {
    padding-top: 15px;
    text-transform: uppercase;
}
.widget.widget_tags {
	font-weight: 300;
}
.widget.widget_tags a {
	display: inline-block;
	padding: 5px 10px;
	margin-left: 5px;
	margin-bottom: 8px;
	border: 1px solid #404040;
}
.widget a:hover {
	color: #9ad224;
}
.widget.widget_tags a:hover {
	border: 1px solid #9ad224;
}
.widget form {
    position: relative;
}
.widget form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: transparent;
    border: none;
    color: #404040;
}
.widget form input {
    margin-bottom: 0;
    padding-right: 40px;
    border-color: #aaa;
}
article.post h3 {
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 45px;
}
.comments-title {
    font-weight: 500;
    text-transform: uppercase;
    margin: 35px 0 42px;
}
article.post h4 {
    font-weight: 500;
    line-height: 35px;
}
article.post p {
    margin-top: 25px;
}
.comment-list {
	font-weight: 400;
	margin-bottom: 40px;
}
.author-name h4 {
    font-weight: 500;
}
.comment-top-area {
    display: flex;
    margin-bottom: 12px;
}
.comment-metadata {
    text-align: right;
}
.comment-top-area>div {
    flex: 1;
}
.comment-author {
    width: 70px;
    float: left;
    background: #EBEBEB;
    border-radius: 100%;
    overflow: hidden;
}
.comment-content {
    padding-left: 90px;
    font-size: 14px;
}
.comment-content p {
    margin-bottom: 5px;
}
.children {
    margin: 40px 0 40px 100px;
}
.blog-detail {
	margin-left: 20px;
}
.blog-detail .btn-two {
    color: #404040;
	font-size: 14px;
    text-transform: capitalize;
    border: 1px solid #404040;
}
.blog-detail .btn-two:hover {
    color: #fff;
    border: 1px solid #fff;
}
.comment-reply-title {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 45px;
}
.comment-respond {
    margin-top: 90px;
}
.comment-respond .btn-one:hover {
	color: #000;
}
/*--------------------------------------
--------- BLOG DETAIL AREA CSS END ---------
---------------------------------------*/

/* Pre Loader and scrollToTop Style */
a.scrollToTop {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #404040;
    display: inline-block;
    color: #fff;
}
a.scrollToTop:hover {
	background: #9ad224;
}
.spinner {
	display: inline-block;
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 75px;
	background: #333333;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -75px;
	margin-top: -75px;
}
.pre-loader {
    position: fixed;
    top: 0;
    z-index: 988899;
    left: 0;
    width: 100%;
    height: 100%;
    background: #9ad224;
}
.spinner::before, .spinner::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
}
.spinner::before {
	width: 120px;
	height: 120px;
	border-radius: 60px;
	margin-left: -60px;
	margin-top: -60px;
	background: #eee;
}
.spinner::after {
	width: 0;
	height: 0;
	box-shadow: 45px 0px 1px 5px rgba(130, 130, 130, 0.94444), 41.96125px 16.25587px 1px 5px rgba(130, 130, 130, 0.88889), 33.2554px 30.3163px 1px 5px rgba(130, 130, 130, 0.83333), 20.05823px 40.28235px 1px 5px rgba(130, 130, 130, 0.77778), 4.15208px 44.80804px 1px 5px rgba(130, 130, 130, 0.72222), -12.31483px 43.28215px 1px 5px rgba(130, 130, 130, 0.66667), -27.11856px 35.91078px 1px 5px rgba(130, 130, 130, 0.61111), -38.25977px 23.68945px 1px 5px rgba(130, 130, 130, 0.55556), -44.23379px 8.26873px 1px 5px rgba(130, 130, 130, 0.5), -44.23379px -8.26873px 1px 5px rgba(130, 130, 130, 0.44444), -38.25977px -23.68945px 1px 5px rgba(130, 130, 130, 0.38889), -27.11856px -35.91078px 1px 5px rgba(130, 130, 130, 0.33333), -12.31483px -43.28215px 1px 5px rgba(130, 130, 130, 0.27778), 4.15208px -44.80804px 1px 5px rgba(130, 130, 130, 0.22222), 20.05823px -40.28235px 1px 5px rgba(130, 130, 130, 0.16667), 33.2554px -30.3163px 1px 5px rgba(130, 130, 130, 0.11111), 41.96125px -16.25587px 1px 5px rgba(130, 130, 130, 0.05556);
	border-radius: 50%;
}
.spinner::after {
	animation-name: rotate;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* END of Pre Loader Style */
.scrooltotop {
    position: fixed;
    background: #000;
    display: inline-block;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    color: #fff;
    right: 20px;
    bottom: 20px;
    font-size: 22px;
}
.scrooltotop:hover {
    border-radius: 100%;
	color: #fff;
}
#totopscroller {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 43px;
    height: 43px;
}
#totopscroller a {
    display: none;
    background: #000;
    display: inline-block;
    width: 43px;
    height: 43px;
    text-align: center;
    line-height: 43px;
    color: #fff;
    right: 0;
    bottom: 0;
    font-size: 22px;
    position: absolute;
}
a.totopscroller-top {
    z-index: 9;
}
.totopscroller-top::before,
.totopscroller-bottom::before,
.totopscroller-prev::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
    content: "\f106";
    font-family: fontawesome;
}
#totopscroller a.totopscroller-prev::before,
#totopscroller a.totopscroller-bottom::before {
    content: "\f107";
}

/*------------------------------------
----- APPOINMENT PAGE CSS START ------
--------------------------------------*/
.appoinment-area {
	position: relative;
}
.hidecontactformrow {
	display: none;
}
.back-home {
	padding: 200px 0 100px;
	text-align: center;
	position: relative;
}
.back-home h2 {
	margin-bottom: 15px;
}
.appoinment-form {
	padding: 40px 0;
}
.appoinment-call p {
    margin-top: 10px;
}
.appoinment-call {
	margin-bottom: 20px;
	text-align: center;
}

/*----------------------------------------------
----- LOGIN AND REGISTRATION FORM CSS START -----
-----------------------------------------------*/
.contactmessages {
	color: green;
	display: none;
}
.contactmessages.showmessage {
	display: block;
}
.appoinment-box {
    margin: 15px;
    color: #313131;
    text-align: center;
    font-size: 14px;
    padding: 15px;
}
.appoinment-box textarea {
	height: 150px;
}
.appoinment-box input+p {
    margin-top: -20px;
}
.appoinment-box textarea,
.appoinment-box input {
    margin-bottom: 20px;
    background: #e9e9e9;
    border: none;
}
.login-popup {
    position: relative;
    background: #fff;
    max-width: 520px;
    padding: 25px 30px 30px;
    margin: auto;
    box-shadow: 0 0 15px #aaa;
}
.login-popup select {
    background: #e9e9e9;
    border: none;
    width: 100%;
    color: #000;
    margin-bottom: 20px;
    min-height: 40px;
}
.login-popup .row {
    margin-right: -5px;
    margin-left: -5px;
}
.login-popup [class*="col-sm-"] {
    padding-left: 5px;
    padding-right: 5px;
}
.login-popup form {
	text-align: left;
}
.form-message.success  {
    color: green;
}
.form-message.error  {
    color: red;
}
.form-message {
    margin-bottom: 20px;
}
.btn-one.popup-show:focus {
	border: 2px solid #9ad224;
}
.login-popup h4 {
    margin-bottom: 15px;
}
.popup-close {
    position: absolute;
    top: 10px;
    right: 20px;
    border: 1px solid #ddd;
    border-radius: 100%;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 24px;
    font-weight: 300;
    opacity: 0.6;
    cursor: pointer;
}
.popup-close i {
    margin: 0 !important;
}
/*--------------------------------------------
----- LOGIN AND REGISTRATION FORM CSS END ----
---------------------------------------------*/

/*----------------------------------
----- SERVICEs PAGE CSS START ------
-----------------------------------*/
.our-single-service h4 {
    margin: 0 0 10px;
}
.our-single-service ul {
	padding-left: 10px;
	margin-bottom: 30px;
}
.our-single-service ul li {
    padding-left: 12px;
    position: relative;
    z-index: 1;
}
.our-single-service ul li::before {
    position: absolute;
    top: 0px;
    content: "\f105";
    font-family: fontawesome;
    left: 0;
    max-width: 10px;
}
.our-single-service {
    margin-top: 40px;
}

/*----------------------------------
------- ABOUT PAGE CSS START -------
-----------------------------------*/
.ptb-80 {
	padding-top: 80px;
	padding-bottom: 80px;
}
.our-about .sec-title {
    margin-bottom: 40px;
}
.our-about-info {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
	padding-bottom: 45px;
}
.our-about-info p {
	margin-bottom: 20px;
}