/* * ---------------------------------------------------------------------------------------- 
Template Name: Leaxo- Responsive Parallax Template
Version : 1.0 

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

// Table of contents

01.General style
 -section -preloader
 -scroll up
 02.Homepage Styles
 03.About us Area
 04.Services Area
 05.Facts Area
 06.Portfolio Area
 07.Pricing Area 
 08.Team Area 
 09.Call To Action Area 
 10.Why Choose us Area 
 11.Testimonial Area 
 12.Blog Area 
 -single blog 
 13.Start Project 
 14.Contact Area
 15.Footer Top Area 
 16.Footer Bottom Area
 
 * * ---------------------------------------------------------------------------------------- */
/*----------------------------------------------------*/
/* 01.General Styles 
/*----------------------------------------------------*/


 body {
     height: 100%;
     font-size: 16px;
     font-weight: 400;
     font-family: 'Roboto', sans-serif;
     overflow-x: hidden;
     color: white;
	background-color: black;
}
 html, body {
     height: 100% 
}
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Roboto', sans-serif;

     color:#2a2a2a;
}
 a {
     text-decoration: none;
}
 img {
     width: 100%;
}
 a:hover {
     text-decoration: none;
}
 a:focus {
     outline: none;
     text-decoration: none;
}
 p {
     line-height: 29px;
     margin-bottom:15px;
}
 ul, li {
     margin: 0;
     padding: 0;
}
 fieldset {
     border: 0 none;
     margin: 0 auto;
     padding: 0;
}
/*section style*/
 .section-gray-bg {
     background: #f7f7f7;
}
 .section-title {
     clear: both;
		margin-bottom: 0px;
		text-align: left;
}
.section-title p {
    line-height: 27px;
    padding: 0 290px;
}
.section-title h2 {
	font-family: "Roboto Condensed";
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 35px;
    margin-top: 0;
    position: relative;
    color: white;
}

.section-spaceing{
     padding: 80px 0px;
}

.section-title.sec-st-1 h2{
    color: #fff;
}
.section-title.sec-st-1 p{
    color: #fff;
}
/*scroll up*/
.scroll-up {
    background: #1b9cfc;
    border-radius: 50%;
    bottom: 20px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 20px;
    height: 45px;
    line-height: 40px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 45px;
    z-index: 9;
}
/*preloader css*/
 .preloader-area {
     position: fixed;
     background: #fff;
     z-index: 11000;
     height: 100%;
     width: 100%;
     overflow: hidden;
}
 .spinner {
     margin: auto;
     width: 40px;
     height: 40px;
     position: relative;
     text-align: center;
     position: absolute;
     left: 50%;
     right: 50%;
     margin-left: -20px;
     top: 50%;
     -webkit-animation: sk-rotate 2.0s infinite linear;
     animation: sk-rotate 2.0s infinite linear;
}
 .dot1, .dot2 {
     width: 60%;
     height: 60%;
     display: inline-block;
     position: absolute;
     top: 0;
     background-color: #1B9CFC;
     border-radius: 100%;
     -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
     animation: sk-bounce 2.0s infinite ease-in-out;
}
 .dot1 {
     background-color: #1B9CFC;
}
 .dot2 {
     top: auto;
     background-color: #000;
     bottom: 0;
     -webkit-animation-delay: -1.0s;
     animation-delay: -1.0s;
}
 @-webkit-keyframes sk-rotate {
     100% {
         -webkit-transform: rotate(360deg) 
    }
}
 @keyframes sk-rotate {
     100% {
         transform: rotate(360deg);
         -webkit-transform: rotate(360deg) 
    }
}
 @-webkit-keyframes sk-bounce {
     0%, 100% {
         -webkit-transform: scale(0.0) 
    }
     50% {
         -webkit-transform: scale(1.0) 
    }
}
 @keyframes sk-bounce {
     0%, 100% {
         transform: scale(0.0);
         -webkit-transform: scale(0.0);
    }
     50% {
         transform: scale(1.0);
         -webkit-transform: scale(1.0);
    }
}
/*----------------------------------------------------*/
/* 02.Homepage Styles 
/*----------------------------------------------------*/
 .header-top-area {
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     z-index: 999;
     -webkit-transition: all 0.4s ease-out;
     transition: all 0.4s ease-out;
}
.logo {
    padding-top: 24px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

}.logo a {
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
 .mainmenu .navbar-nav li {
     margin-right: 30px;
}
.mainmenu .navbar-nav li a {
    color: #fff;
    font-size: 15px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 0;
    padding-left: 0;
    transition: .3s;
    font-weight: 500;
}

.menu-strick-bg .mainmenu .navbar-nav li.active a{
	color: #1B9CFC;
	transition:.3s;
}
 .mainmenu .navbar-nav li a:hover {
     background: none;
     color: #1B9CFC;
     -webkit-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
}
 .nav li a:focus, .nav li a:hover {
     background: none;
     -webkit-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
}
.mainmenu .navbar-nav li:last-child {
    margin: 0;
}
 .navbar {
     margin: 0;
}
 .menu-strick-bg {
     -webkit-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
     background: #fff;
     box-shadow: 0 2px 10px -1px rgba(87, 97, 100, 0.35);
     border: none;
}
 .menu-strick-bg .logo {
     padding-top: 16px;
     -webkit-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
}
 .menu-strick-bg .logo a{
     color: #000;
     padding-bottom: 0;
}
 .menu-strick-bg .mainmenu .navbar-nav li a {
     color: #000;
     padding-bottom: 22px;
     padding-top: 22px;
     transition: all 0.3s ease 0s;
}
 .menu-strick-bg .mainmenu .navbar-nav li a:hover {
     color: #1B9CFC;
}

a.home-hero-btn {
    background-color: #252525;
    box-shadow: 0 0 1px transparent;
    color: #fff;
    display: inline-block;
    letter-spacing: 1px;
    margin: 0 10px;
    padding: 14px 25px;
    position: relative;
    text-transform: capitalize;
    transform: perspective(1px) translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
    width: 180px;
    text-align: center;
    border-radius: 30px;
}
 a.home-hero-btn:before {
     background: #1B9CFC none repeat scroll 0 0;
     border-radius: 4px;
     bottom: 0;
     content: "";
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
      border-radius: 30px;
     transform: scaleY(1);
     transform-origin: 50% 50% 0;
     transition-duration: 0.3s;
     transition-property: transform;
     transition-timing-function: ease-out;
     z-index: -1;
}
 a.home-hero-btn:hover, a.home-hero-btn:focus, a.home-hero-btn:active {
     color: white;
}
 a.home-hero-btn:hover:before, a.home-hero-btn:focus:before, a.home-hero-btn:active:before {
     transform: scaleY(0);
}

.mainmenu.home-se .navbar-nav li a {
    color: #ffffff;
}

.menu-strick-bg .mainmenu.home-se .navbar-nav li a {
    color: #333;
}

.menu-strick-bg .logo.home-se a{
    color: #333;
}

.logo.home-se a{
    color: #fff;
}

/*center*/
.hero-fullseen{
    height: 100%;
}
.display-table {
    display: table;
    width: 100%;
    height: 100%;
}
.display-table-cell {
    display: table-cell;
    vertical-align: middle;
}
.h-ce-100{
    height: 100vh;
    width: 100%;
}

/*Start Parallax Area*/
.hero-fullseen-parallax-area {
    background: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1)),url(../images/bg/parallax-bg.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
 .hero-fullseen-parallax-area:after {
     background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
     content: "";
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
.hero-fullseen-homage-text {
     text-align: center;
}

.hero-fullseen-homage-text h4 {
    color: #fff;
    font-size: 48px;
    font-weight: 300;
    margin-bottom: 15px;
    text-transform: capitalize;
}

.hero-fullseen-homage-text h2 {
    color: #f7f7f7;
    font-size: 56px;
    text-transform: capitalize;
    font-weight: 500;
    margin-bottom: 30px;
}



.mainmenu.home-se .navbar-nav li.active a, .menu-strick-bg .navbar-nav li.active a{
    color: #1B9CFC;
}


/*Start Creative Agency Area*/
.logo.s-t-b a, .mainmenu.s-t-b .navbar-nav li a{color: #26313c;}

.creative-agency-homepage {
    background:url(../images/bg/agency-bg.jpg);
    background-position: top right !important;
    background-repeat: no-repeat;
}

.creative-agency-hero-text h4 {
    font-weight: 300;
    font-size: 48px;
    text-transform: capitalize;
    margin: 0;
    margin-bottom: 10px;
    letter-spacing: 1px;
    color: #26313c;
}
.creative-agency-hero-text h2 {
    color: #252525;
    font-size: 56px;
    margin: 0;
    margin: 20px 0;
}

.creative-agency-homepage p {
    width: 550px;
    margin-bottom: 25px;
}

a.btn-home-default {
    background-color: #252525;
    border-radius: 4px;
    box-shadow: 0 0 1px transparent;
    color: #fff;
    display: inline-block;
    letter-spacing: 1px;
    margin: 0 5px;
    padding: 14px 25px;
    position: relative;
    text-transform: capitalize;
    transform: perspective(1px) translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
    width: 175px;
}

a.btn-home-default.c-g-bgn {
    background: #eb4d4b;
    margin-top: 10px;
    transition: .5s;
    border-radius: 30px;
}
a.btn-home-default.c-g-bgn:hover{
    background: #333;
    color: #fff;
}

.st-2 .section-title h2:before, .st-2 .read-more, .st-2 .single-service span, .st-2 .single-fact span, .st-2 .portfolio-filter-list .filter.active, .st-2 .portfolio-filter-list ul li:hover, .st-2 .portfolio-caption a, .st-2 button.view-more, .st-2 .pricing-table-active .pricing-prices, .st-2 .pricing-table-active button.prices-btn, .st-2 .team-social-profiles:before, .st-2 .section-title h2:before, .st-2 .single-testimonial, .start-your-project-area.st-2, .st-2 .address-info-text span, .st-2 .populer-search li:hover{
    background-color: #eb4d4b;
}
.st-2 .client-reting span{
    color: #26313c;
}
.st-2 .ct-btn, .st-2 a.blog_btn, .st-2 button.contact-btn, .st-2 button.prices-btn:before{
    background-color: #eb4d4b;
}
.st-2 .ct-btn:hover{
    border-color:#eb4d4b;
}

.st-2 .team-list.owl-carousel .owl-page.active span, .team-list.owl-controls.clickable .owl-page:hover span, .st-2 .testimonial-list.owl-carousel .owl-page.active span, .testimonial-list.owl-controls.clickable .owl-page:hover span{
    background-color: #eb4d4b;
}

.st-2 .about-text h2 span, .st-2 .blog-meta span i.fa, .st-2 .single-blog:hover .blog-content h2, .st-2 .footer-recent-post a:hover{color:#eb4d4b;}

/*Creative portfolio*/

.creative-portfolio-homepage {
    background-image: url(../img/header_getraenkeria_dunkel.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.logo.st-cp a, .mainmenu .navbar-nav li a {
    color: #26313c;
}


.creative-portfolio-hero-text h4 {
    font-weight: 600;
    font-size: 46px;
    margin: 0;
    margin-bottom: 10px;
    letter-spacing: 0px;
    color: white;
}
.creative-portfolio-hero-text h2 {
    color: white;
    font-size: 56px;
    margin: 20px 0;
    font-weight: 700;
    margin-top: 0;
}

.st-cp .section-title h2:before, .st-cp .read-more, .st-cp .single-service span, .st-cp .single-fact span, .st-cp .portfolio-filter-list .filter.active, .st-cp .portfolio-filter-list ul li:hover, .st-cp .portfolio-caption a, .st-cp button.view-more, .st-cp .pricing-table-active .pricing-prices, .st-cp .pricing-table-active button.prices-btn, .st-cp .team-social-profiles:before, .st-cp .section-title h2:before, .st-cp .single-testimonial, .start-your-project-area.st-cp, .st-cp .address-info-text span, .st-cp .populer-search li:hover{
    background-color: #fcb01e;
}
.st-cp .client-reting span{
    color: #26313c;
}
.st-cp .ct-btn, .st-cp a.blog_btn, .st-cp button.contact-btn, .st-cp button.prices-btn:before{
    background-color: #fcb01e;
}
.st-cp .st-cp:hover{
    border-color:#fcb01e;
}

.st-cp .team-list.owl-carousel .owl-page.active span, .team-list.owl-controls.clickable .owl-page:hover span, .st-cp .testimonial-list.owl-carousel .owl-page.active span, .testimonial-list.owl-controls.clickable .owl-page:hover span{
    background-color: #fcb01e;
}

.st-cp .about-text h2 span, .st-cp .blog-meta span i.fa, .st-cp .single-blog:hover .blog-content h2, .st-cp .footer-recent-post a:hover{color:#fcb01e;}


.st-cp .btn-home-default{
    background-color: #fcb01e;
}

/*Animated Text*/

.creative-animated-homepage{
    background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,0.9)), url(../images/bg/text-ani-bg.jpg);
}

.logo.st-anit a, .mainmenu.st-anit .navbar-nav li a {
    color: #ffffff;
}
.menu-strick-bg .mainmenu.st-anit .navbar-nav li a{
    color:#000;
}

.menu-strick-bg .mainmenu.st-anit .navbar-nav li.active a, .mainmenu.st-anit .navbar-nav li.active a, .menu-strick-bg .mainmenu.st-part .navbar-nav li.active a, .mainmenu.st-part .navbar-nav li.active a{
    color:#1b9cfc;
}
.start-your-project-area.st-cp {
    background: #fcb01e;
}




.menu-strick-bg .logo a{
    color:#000;
}

.creative-animation-hero-text h1 {
    font-weight: 300;
    font-size: 48px;
    text-transform: capitalize;
    margin: 0;
    margin-bottom: 10px;
    letter-spacing: 1px;
    color: #fff;
}
.creative-animation-hero-text h2 {
    color: #fff;
    font-size: 56px;
    margin: 20px 0;
    font-weight: 500;
}

a.home-default-btn {
    background: #1b9cfc;
    color: #fff;
    display: inline-block;
    padding: 14px 15px;
    width: 160px;
    text-transform: capitalize;
    border-radius: 30px;
    transition: .5s;
    margin-top: 20px;
}
.creative-animation-hero-text p {
    text-align: center;
    color: #fff;
    font-size: 18px;
    letter-spacing: 0.50px;
}
/*Creative Slider*/

.logo.st-cre a, .mainmenu .navbar-nav li a {
    color: #252f3a;
}

.swiper-container {
width: 100%;
height: 100vh;
}

.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

}
.swiper-button-prev, .swiper-button-next {
    color: #a3cb38;
    opacity: .6;
    transition: .3s;
}
.swiper-button-prev:hover, .swiper-button-next:hover {
    opacity: 1;
}

.swiper-slide {
    height: 100vh;
}

.slide-info-text h4 {
    font-size: 48px;
    text-transform: capitalize;
    font-weight: 300;
    margin-bottom: 0;
    margin-top: 0;
}

.slide-info-text h2 {
    font-weight: 500;
    font-size: 56px;
    margin-top: 10px;
}

a.slide-btn-se {
    background: #000;
    color: #fff;
    display: inline-block;
    padding: 10px 25px;
    margin: 0 10px;
    margin-top: 30px;
}

.slide_bg_1{
    background: url(../images/slider/slide_image_1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.slide_bg_2{
    background: url(../images/slider/slide_image_2.jpg);
    background-repeat: no-repeat;
    background-position: top center;
}

.slide_bg_3{
    background: url(../images/slider/slide_image_3.jpg);
    background-repeat: no-repeat;
    background-position: top center;
}

a.slide-btn-se {
    background: #A3CB38;
    color: #fff;
    display: inline-block;
    padding: 10px 25px;
    margin: 0 10px;
    margin-top: 30px;
    width: 170px;
    border-radius: 30px;
    transition: .5s;
}
a.slide-btn-se:hover{
    background: #333;
    color: #fff;
}

.st-cre .section-title h2:before, .st-cre .read-more, .st-cre .single-service span, .st-cre .single-fact span, .st-cre .portfolio-filter-list .filter.active, .st-cre .portfolio-filter-list ul li:hover, .st-cre .portfolio-caption a, .st-cre button.view-more, .st-cre .pricing-table-active .pricing-prices, .st-cre .pricing-table-active button.prices-btn, .st-cre .team-social-profiles:before, .st-cre .section-title h2:before, .st-cre .single-testimonial, .st-cre .address-info-text span, .st-cre .populer-search li:hover{
    background-color: #A3CB38;
}
.st-cre .client-reting span{
    color: #26313c;
}
.st-cre .ct-btn, .st-cre a.blog_btn, .st-cre button.contact-btn, .st-cre button.prices-btn:before{
    background-color: #A3CB38;
}
.st-cre .st-cre:hover{
    border-color:#A3CB38;
}

.st-cre .team-list.owl-carousel .owl-page.active span, .team-list.owl-controls.clickable .owl-page:hover span, .st-cre .testimonial-list.owl-carousel .owl-page.active span, .testimonial-list.owl-controls.clickable .owl-page:hover span{
    background-color: #A3CB38;
}

.st-cre .about-text h2 span, .st-cre .blog-meta span i.fa, .st-cre .single-blog:hover .blog-content h2, .st-cre .footer-recent-post a:hover{color:#A3CB38;}


.st-cre .btn-home-default{
    background-color: #A3CB38;
}

/*Creative particles*/
.logo.st-part a{
    color: #fff;
}

.mainmenu.st-part .navbar-nav li a{
    color: #fff
}
.menu-strick-bg .mainmenu.st-part .navbar-nav li a{
    color: #000;
}

.menu-strick-bg .logo.st-part a{
    color: #000;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #010406;
    opacity: .8;
}

.creative-particles-homepage{
    background: url(../images/bg/par-bg.jpg);
}

.creative-particles-hero-text h4{
    font-size: 48px;
    color: #fff;
    font-weight: 300;
    text-transform: capitalize;
}
.creative-particles-hero-text h2 {
    font-size: 56px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}
.bpt{
    margin-top: 30px !important;
}

/*video background*/

.mainmenu.st-vid .navbar-nav li a{
    color: #fff;
}

.menu-strick-bg .mainmenu.st-vid .navbar-nav li a {
    color: #000;
}

.menu-strick-bg .logo.st-vid a{
    color: #000;
}

.menu-strick-bg .mainmenu.st-vid .navbar-nav li.active a{
    color: #1B9CFC;
}

video{
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

video#bgvid {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.creative-video-hero-text h4{
    font-size: 48px;
    font-weight: 300;
     color: #fff;
}
.creative-video-hero-text h2{
    font-size: 58px;
    font-weight: 500;
    color: #fff;
}
.creative-video-homepage{
    position: relative;
    z-index: 1
}
.creative-video-homepage:after {
    background: rgba(0,0,0,.8);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: 3;
    opacity: .8
}
.creative-video-hero-text.text-center {
    z-index: 6;
    position: relative;
}

/*smart background*/

.creative-particles-homepage.home-smart{
    position: relative;
    background:url(../images/bg/bg-effect.jpg);
    z-index: 1;
}

.creative-particles-homepage.home-smart:after{
    background: #000;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: .7;
}

/*----------------------------------------------------*/
/* 03.About Us Area 
/*----------------------------------------------------*/
.about-text h2 {
    font-size: 40px;
    font-weight: 500;
    line-height: 52px;
    margin-bottom: 20px;
    margin-top: 0;
    text-transform: capitalize;
    color: #3e3d3d;
}
 .about-text {
     margin-top: 30px;
}
.about-text h2 span {
    color: #25ccf7;
}
 .about-text p {
     margin-bottom: 20px;
}
 .about-image img {
     border-radius: 5px;
}
 .margin-top-c {
     margin-top: 50px;
}
.read-more {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    padding: 14px 25px;
    text-transform: uppercase;
    background-color: #1B9CFC;
    letter-spacing: 1px;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    font-size: 14px;
    width: 180px;
    text-align: center;
    border-radius: 5px;
}
 .read-more:before {
     content: "";
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #343434;
     -webkit-transform: scaleX(0);
     transform: scaleX(0);
     -webkit-transform-origin: 0 50%;
     transform-origin: 0 50%;
     -webkit-transition-property: transform;
     transition-property: transform;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-timing-function: ease-out;
     transition-timing-function: ease-out;
     border-radius: 5px;
}
 .read-more:hover, .read-more:focus, .read-more:active {
     color: #fff;
}
 .read-more:hover:before, .read-more:focus:before, .read-more:active:before {
     -webkit-transform: scaleX(1);
     transform: scaleX(1);
}
/*----------------------------------------------------*/
/* 04.Services Area 
/*----------------------------------------------------*/
 .services-area{
    padding-top:80px;
    padding-bottom:50px;
    cursor: pointer;
}
 .single-service:hover {
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
     transition:.3s;
}
 .single-service {
     background: #fff none repeat scroll 0 0;
     padding: 30px;
     text-align: center;
     transition:.3s;
     margin-bottom:30px;
}
.single-service span {
    background: #1B9CFC;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 25px;
    height: 80px;
    line-height: 80px;
    width: 80px;
}
 .single-service > h2 {
     font-size: 25px;
     text-transform: capitalize;
}
 .single-service {
     border-radius: 4px;
     margin-bottom: 30px;
}

.single-service {
    position: relative;
}

/*----------------------------------------------------*/
/* 05.Facts Area 
/*----------------------------------------------------*/
 .single-fact {
     margin-bottom: 30px;
}
 .facts-area {
     background: linear-gradient(rgba(0,0,0,0.67),rgba(0,0,0,0.45)),url("../images/bg/fun_facts_bg.jpg");
     background-size: cover;
     background-repeat: no-repeat;
     position: relative;
     z-index: 1;
     background-attachment: fixed;
     padding-bottom: 50px;
     padding-top: 80px;
}

 h2.counter-number {
     color: #fff;
     font-family: 'Roboto', sans-serif;
     font-size: 35px;
     font-weight: 600;
}
 .single-fact span {
     color: #fff;
}
 .single-fact {
     text-align: center;
}
.single-fact span {
    background: #1b9cfc none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    height: 100px;
    line-height: 100px;
    width: 100px;
}
 .single-fact h6 {
     color: #fff;
     font-size: 16px;
     text-transform: capitalize;
}
/*----------------------------------------------------*/
/* 06.Portfolio Area 
/*----------------------------------------------------*/
.no-space{
     padding-left: 0 !important;
     padding-right:0 !important;
}

.portfolio-filter-list {
    text-align: center;
    margin-bottom: 30px;
}
 .portfolio-filter-list ul li {
     background: white none repeat scroll 0 0;
     box-shadow: none;
     color: black;
     cursor: pointer;
     display: inline-block;
     list-style: outside none none;
     margin: 0 2px;
     padding: 12px 20px;
     transition: all 0.3s ease 0s;
}
 .portfolio-filter-list ul li:hover {
     background: #1B9CFC none repeat scroll 0 0;
     color: #fff;
}
 .portfolio-list .mix {
     display: none;
}
 .portfolio-filter-list .filter.active {
     background: #1B9CFC none repeat scroll 0 0;
     color: #fff;
     transition: .3s;
}
.single-portfolio-item {
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
button.view-more {
    box-shadow: 0 0 1px transparent;
    position: relative;
    transform: perspective(1px) translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
    background: #1b9cfc none repeat scroll 0 0;
    border: medium none;
    border-radius: 4px;
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 15px 25px;
    text-align: center;
    text-transform: capitalize;
    width: 220px;
    transition: .3s;
}
 button.view-more:before {
     background: #252525;
     bottom: 0;
     content: "";
     left: 0;
     position: absolute;
     border-radius:4px;
     right: 0;
     top: 0;
     transform: scaleX(0);
     transform-origin: 50% 50% 0;
     transition-duration: 0.3s;
     transition-property: transform;
     transition-timing-function: ease-out;
     z-index: -1;
}
 button.view-more:hover, button.view-more:focus, button.view-more:active {
     color: white;
}
 button.view-more:hover:before, button.view-more:focus:before, button.view-more:active:before {
     transform: scaleX(1);
}

button.view-more {
    margin-top: 30px;
}

/*hover*/
.single-portfolio-item{
     position: relative;
     overflow: hidden;
     cursor: pointer;
     transition: all 0.5s ease;
}
.single-portfolio-item img{
     overflow: hidden;
     transform: scale(1);
     transition: all 0.5s ease;
}

.portfolio-caption {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 100%;
    height: 100%;
    text-align: center;
    transform: translate(-50%);
    transition: all 0.5s ease;
    opacity: 0;
    visibility: hidden;
    margin-top: -50px;
}

.portfolio-caption h4 {
    margin: 0;
}

.portfolio-caption h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0px;
    color: #fff;
    margin-bottom: 20px;
}
.portfolio-caption a {
    background: #1b9cfc;
    color: #fff;
    width: 60px;
    height: 60px;
    display: inline-block;
    line-height: 60px;
    font-size: 25px;
    border-radius: 50%;
}
.portfolio-overlay {
    background: rgba(0,0,0,0.75);
    position: absolute;
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    transition: all 0.5s ease;
    opacity: 0;
    visibility: hidden;
}

.single-portfolio-item:hover .portfolio-overlay{
   opacity: 1;
   visibility: visible;
   top: 0;
}

.single-portfolio-item:hover .portfolio-caption{
   opacity: 1;
   visibility: visible;
   top: 50%;
}

/*---------------------------------------------------*/
/* 07.Prices Area 
/*----------------------------------------------------*/
 .single-prices{
     position:relative;
}
 .prices-area {
     padding-bottom: 50px;
     padding-top: 80px;
}
.pricing-prices > h2 {
    font-size: 40px;
    font-weight: 400;
    margin: 0 0 5px;
    color: #fff;
}
 .prices-details ul li {
     list-style: outside none none;
}
.prices-header {
    background: #f0fbfd;
    padding: 10px 0;
}
.prices-header > h2 {
    font-size: 30px;
    letter-spacing: 0px;
    text-transform: capitalize;
}
 .single-prices {
     background: #fff none repeat scroll 0 0;
     border-left: 1px solid #f1f1f1;
     margin-bottom: 30px;
     text-align: center;
}
 button.prices-btn{
     box-shadow: 0 0 1px transparent;
     display: inline-block;
     position: relative;
     transform: perspective(1px) translateZ(0px);
     transition-duration: 0.3s;
     transition-property: color;
     vertical-align: middle;
     background: #252525 none repeat scroll 0 0;
     border: medium none;
     border-radius: 4px;
     box-shadow: none;
     color: #fff;
     font-size: 15px;
     font-weight: 500;
     padding: 16px 20px;
     transition: all 0.3s ease 0s;
     width: 100%;
}
 button.prices-btn:before {
     background: #1B9CFC;
     bottom: 0;
     content: "";
     left: 0;
     border-radius:4px;
     position: absolute;
     right: 0;
     top: 0;
     transform: scaleX(0);
     transform-origin: 0 50% 0;
     transition-duration: 0.3s;
     transition-property: transform;
     transition-timing-function: ease-out;
     z-index: -1;
}
 button.prices-btn:hover, button.prices-btn:focus, button.prices-btn:active {
     color: white;
}
 button.prices-btn:hover:before, button.prices-btn:focus:before, button.prices-btn:active:before {
     transform: scaleX(1);
}
 .prices-details ul li {
     border-bottom: 1px solid #f0f0f0;
     padding: 15px 0;
}
span.p_date {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 500 !important;
}
 .pricing-prices span {
     font-weight: 400;
}
 div.see-more-items {
     margin-top: 0;
     text-align: center;
}
.pricing-prices {
    background: #252525 none repeat scroll 0 0;
    color: #fff;
    padding: 30px 20px;
    text-align: center;
}
 .pricing-table-active .pricing-prices, .pricing-table-active button.prices-btn{
    background:#1B9CFC;
    color:#fff;
}
/*----------------------------------------------------*/
/* 08.Team Area 
/*----------------------------------------------------*/

.single-team{cursor: pointer;}

.team-member-info h4 {
    font-size: 14px;
    margin-top: 5px;
    letter-spacing: 0.80px;
}


.team-member-info > h2 {
    color: #333;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0px;
    margin: 0;
    text-transform: capitalize;
}

 .team-social-profiles ul li a {
     color: #fff;
     display: inline-block;
     height: 35px;
     line-height: 35px;
     margin: 0 1px;
     text-align: center;
     width: 35px;
}
 .team-social-profiles ul li {
     display: inline-block;
     list-style: outside none none;
}
 .single-team {
     margin: 0 15px;
     text-align: center;
}
.team-member-info {
  background: #f7f7f7 none repeat scroll 0 0;
  padding: 15px;
}
.team-member-info {
    background: #f7f7f7 none repeat scroll 0 0;
    padding: 20px 15px;
}
 .team-social-profiles{
     box-shadow: 0 0 1px transparent;
     display: inline-block;
     position: relative;
     transform: perspective(1px) translateZ(0px);
     transition-duration: 0.3s;
     transition-property: color;
     vertical-align: middle;
     background: #252525;
     padding: 10px 0;
     transition: all 0.3s ease 0s;
     width: 100%;
}
 .team-social-profiles:before {
     background: #1B9CFC;
     bottom: 0;
     content: "";
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
     transform: scaleX(0);
     transform-origin: 0 50% 0;
     transition-duration: 0.3s;
     transition-property: transform;
     transition-timing-function: ease-out;
     z-index: -1;
}
 .team-social-profiles:hover, .team-social-profiles:focus, .team-social-profiles:active {
     color: #fff;
    ;
}
 .single-team:hover .team-social-profiles:before, .team-social-profiles:focus:before, .team-social-profiles:active:before {
     transform: scaleX(1);
}
 .team-list.owl-carousel .owl-controls {
     margin-top: 20px;
     text-align: center;
}
 .team-list.owl-carousel .owl-page span {
     display: block;
     background: #dadada;
     width: 14px;
     height: 14px;
     margin: 0 5px;
     border-radius: 50%;
     color: #dadada;
}
 .team-list.owl-carousel .owl-page.active span, .team-list.owl-controls.clickable .owl-page:hover span {
     background: #1B9CFC;
     filter: Alpha(Opacity=100);
    /*IE7 fix*/
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.team-member-image {
    overflow: hidden;
    transition: all 0.3s ease;
}
.single-team:hover img {
    transform: scale(1.2);
}

.single-team img {
    transition: .5s;
}


/*----------------------------------------------------*/
/* 09.Call Action Area 
/*----------------------------------------------------*/
 .call-ac-text {
     text-align: center;
}
.call-action-area {
    background: linear-gradient(rgb(0,0,0,0.65),rgb(0,0,0,0.85)),url(../images/bg/call_action_bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding: 100px 0;
}
.call-ac-text > h2 {
    color: #fff;
    font-size: 45px;
    line-height: 55px;
    text-transform: capitalize;
    margin-bottom: 20px;
    font-weight: 400;
    letter-spacing: 1px;
}
.call-ac-text p {
    color: #fff;
    letter-spacing: 0.10px;
}
.ct-btn {
    background: #1B9CFC none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    padding: 14px 20px;
    text-transform: capitalize;
    margin-top: 15px;
    border: 1px solid transparent;
    transition: .5s;
    width: 200px;
    border-radius: 30px;
    text-align: center;
}

.ct-btn:hover{
	background: transparent;
	border-color: #1B9CFC;
	color: #fff;
}
/*----------------------------------------------------*/
/* 10.why choose us
/*----------------------------------------------------*/

.why-choose-text h2 {
    font-size: 37px;
    text-transform: capitalize;
    font-weight: 300;
    line-height: 44px;
    color: #000000;
    margin-top: 0;
}

.why-choose-text span {
    font-weight: 500;
}

/*----------------------------------------------------*/
/* 11.Testimonial Area 
/*----------------------------------------------------*/
.testimonial-image img {
    border-radius: 50%;
    display: block;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    background: #fff;
    padding: 4px;
}
 .single-testimonial {
     text-align: center;
}
 .testimonial-client-info > h3 {
     text-transform: capitalize;
     color: #fff;
}
.testimonial-client-info > h4 {
  color: #f8f8f8;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: capitalize;
}
 .client-reting span {
     color: #f2b100;
}
 .testimonial-area {
     background: rgba(0, 0, 0, 0) url("../images/bg/client-say-bg.jpg") repeat scroll 0 0 / cover ;
     position: relative;
     z-index: 1;
}
 .testimonial-area:after {
     background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
     content: "";
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
.single-testimonial {
    background: rgb(2 132 208) none repeat scroll 0 0;
    border-radius: 4px;
    margin: 0 15px;
    padding: 30px;
}
.testimonial-content > p {
  color: #fff;
  margin-bottom: 0;
  text-transform: capitalize;
}
 .client-reting {
     margin-bottom: 10px;
}
 .testimonial-list.owl-carousel .owl-controls {
     margin-top: 20px;
     text-align: center;
}
 .testimonial-list.owl-carousel .owl-page span {
     display: block;
     background: #dadada;
     width: 14px;
     height: 14px;
     margin: 0 5px;
     border-radius: 50%;
     color: #dadada;
}
 .testimonial-list.owl-carousel .owl-page.active span, .testimonial-list.owl-controls.clickable .owl-page:hover span {
     background: #1B9CFC;
     filter: Alpha(Opacity=100);
    /*IE7 fix*/
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.single-testimonial {
    position: relative;
}

.single-testimonial:after {content: "\f10d";color: #fff;font-size: 60px;top: 0;right: 10px;position: absolute;font-family: 'FontAwesome';opacity: .2;}
/*----------------------------------------------------*/
/* 12.Blog Area 
/*----------------------------------------------------*/
.hero-fullseen.single-blog-hero {
    height: auto;
}

.single-blog-hero-area {
    overflow: hidden;
    background: url(../images/bg/blog-sec-bg.jpg);
    padding: 170px 0;
    position: relative;
    z-index: 1;
}

.single-blog-hero-area:after {content: "";background: rgba(0,0,0,0.6);position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: -1;}


.post-comment-area {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
}
.comment-form {
    background: #fff;
    padding: 30px;
}

h2.com-title {padding: 0 15px;font-weight: 500;}


.single-blog-hero-area .single-blog-title-text h2 {
    text-transform: capitalize;
    font-size: 40px;
    font-weight: 300;
    letter-spacing: 1px;
}
.single-blog-hero .mainmenu .navbar-nav li a{color: #fff}
.single-blog-hero .menu-strick-bg .mainmenu .navbar-nav li a{
    
    color: #333;
}
.single-blog-hero .menu-strick-bg .mainmenu .navbar-nav li a:hover{
   color: #1b9cfc;  
}

 .blog-area {
     padding-bottom: 50px;
     padding-top: 80px;
}
 .single-blog{
     transition:.5s;
     margin-bottom: 30px;
     cursor: pointer;
}
 .single-blog:hover{
     box-shadow:0 4px 7px rgba(0, 0, 0, 0.1);
     transition:.5s;
}
 .blog-thumbnial {
     position: relative;
}
.blog-content > h2 {
    cursor: pointer;
    font-size: 20px;
    line-height: 26px;
    color: #131313;
    letter-spacing: 0px;
    text-transform: initial;
    font-weight: 500;
}
 .blog-content {
     padding: 0 15px 20px;
     text-align: left;
}
 .single-blog {
     border: 1px solid #efefef;
     text-align: center;
}
 a.blog_btn {
     background-color: #1B9CFC;
     box-shadow: 0 0 1px transparent;
     color: #fff;
     display: inline-block;
     letter-spacing: 1px;
     padding: 10px 20px;
     position: relative;
     text-align: center;
     text-transform: capitalize;
     transform: perspective(1px) translateZ(0px);
     transition-duration: 0.3s;
     transition-property: color;
     vertical-align: middle;
     width: 130px;
}
 a.blog_btn:before {
     content: "";
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #343434;
     -webkit-transform: scaleX(0);
     transform: scaleX(0);
     -webkit-transform-origin: 0 50%;
     transform-origin: 0 50%;
     -webkit-transition-property: transform;
     transition-property: transform;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-timing-function: ease-out;
     transition-timing-function: ease-out;
}
 .blog_btn:hover, .blog_btn:focus, .blog_btn:active {
     color: #fff;
}
 .blog_btn:hover:before, .blog_btn:focus:before, .blog_btn:active:before {
     -webkit-transform: scaleX(1);
     transform: scaleX(1);
}
 .single-blog:hover .blog-content h2 {
     color: #1B9CFC;
     transition: .3s 
}
 .view-more.blog {
     margin-top: 30px;
}
.blog-meta ul li {
    cursor: pointer;
    display: inline-block;
    list-style: outside none none;
    padding-right: 10px;
    font-size: 15px;
}
 .blog-meta span {
     margin-right: 5px;
}
.blog-meta {
    margin: 15px 0;
}
 .blog-meta span i.fa {
     color: #1B9CFC;
}
/*Single Blog*/
.single-blog-post-area {
    background: #f4f4f4;
}
 header.single-blog-post {
     background: rgba(0, 0, 0, 0) url("../images/bg/single-blog-bg.jpg") repeat scroll 0 0 / cover ;
     height: auto;
     padding: 135px 0;
     position: relative;
     z-index: 1;
}
 .single-blog-title-text h2 {
     color: #fff;
     font-size:25px;
     text-transform:capitalize;
     margin:0;
}
 header.single-blog-post:after {
     background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
     content: "";
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
 .single-sidebar-wedget {
     background: #fff none repeat scroll 0 0;
     margin-bottom: 50px;
}
 .sidebar-title > h2 {
     color: #fff;
     font-size: 18px;
     margin-bottom: 0;
     margin-top: 0;
     text-transform: capitalize;
}
 .sidebar-title {
     background: #333 none repeat scroll 0 0;
     border-left: 4px solid #1B9CFC;
     padding-bottom: 15px;
     padding-left: 10px;
     padding-top: 15px;
}
 .clerfix{
    overflow:hidden
}
 .single-rec-blog-post > h2 {
     cursor: pointer;
     font-size: 16px;
     margin: 0 0 6px;
     transition:.3s;
}
 .single-rec-blog-post h2:hover {
     color:#1B9CFC;
     transition:.3s;
}
 .Sidebar-recent-post-list.clerfix {
     padding: 20px;
}
 .single-rec-blog-post {
     border-bottom: 1px solid #eee;
     margin-bottom: 15px;
     padding-bottom: 10px;
}
div.search-box input {
    border: 1px solid #eee;
    box-shadow: none;
    height: 50px;
    padding-left: 20px;
    padding-right: 40px;
    text-transform: capitalize;
}
 .search-box {
     padding: 20px;
     position: relative;
}
 .search-box > span {
     cursor: pointer;
     padding: 3px;
     position: absolute;
     right: 40px;
     top: 31px;
     transition:.3s;
}
 .search-box span:hover{
     color:#1B9CFC;
     transition:.3s;
}
 .sidebar-cat-list.clerfix {
     padding: 0 30px;
}
 .sidebar-cat-list.clerfix li {
     border-bottom: 1px solid #eee;
     list-style: outside none none;
     margin-bottom: 15px;
     padding-bottom: 8px;
}
 .sidebar-cat-list.clerfix a {
     color: #666;
     font-weight: 500;
     text-transform: capitalize;
     transition:.3s;
}
 .sidebar-cat-list.clerfix a:hover{
     color:#1B9CFC;
     transition:.3s;
}
 .sidebar-cat-list.clerfix {
     margin-top: 25px;
}
 .sidebar-wedget-list li {
     display: inline-block;
     list-style: outside none none;
}
 .sidebar-post-share a {
     border: 1px solid #eee;
     border-radius: 4px;
     display: inline-block;
     height: 45px;
     line-height: 45px;
     margin: 0 5px;
     text-align: center;
     width: 45px;
}
 .sidebar-post-share {
     padding: 20px;
}
 .sidebar-cat-list.clerfix li {
     display: block;
}
 .sidebar-archived-post a {
     color: #666;
     display: block;
     font-weight: 500;
     text-transform: capitalize;
}
 .sidebar-archived-post a:hover{
     color: #1B9CFC;
}
 .sidebar-archived-post .sidebar-archived-post li {
     display: block;
}
 .sidebar-archived-post li {
     border-bottom: 1px solid #eee;
     display: block;
     margin-bottom: 10px;
     padding-bottom: 8px;
}
 .single-sidebar-wedget {
     background: #fff none repeat scroll 0 0;
     box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
     margin-bottom: 50px;
}
 .sidebar-archived-post {
     padding: 20px;
}
 .sidebar-post-tags {
     padding: 0 20px;
}
 .sidebar-post-tags a {
     background: #666 none repeat scroll 0 0;
     border-radius: 4px;
     color: #fff;
     display: inline-block;
     margin-top: 5px;
     padding: 8px 12px;
     text-align: center;
}
 .sidebar-post-tags a:hover{
     background:#1B9CFC;
     color:#fff;
}
 .commenter-image img {
     border-radius: 50%;
     display: block;
     float: left;
     height: 100px;
     width: 100px;
}
 .single-post-comment {
     border-bottom: 1px solid #e0e0e0;
     clear: both;
     margin-bottom: 30px;
     overflow: hidden;
}
 .commenter-info {
     overflow: hidden;
     padding-left: 15px;
}
 .post-comment {
     overflow: hidden;
     padding-left: 15px;
}
 .commenter-info > h2 {
     font-size: 18px;
     text-transform: capitalize;
}
 .commenter-info > h4 {
     color: #666;
     font-size: 14px;
}
 h2.com-title {
     font-size: 25px;
     margin-bottom: 30px;
     margin-top: 0;
     text-transform: capitalize;
}
 .comment-form input {
     box-shadow: none;
     height: 45px;
}
button.comment-btn {
    background: #232323;
    border: medium none;
    border-radius: 4px;
    box-shadow: none;
    color: #fff;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    padding: 15px 20px;
    text-transform: capitalize;
    width: 100%;
    text-align: center;
    border-radius: 30px;
    margin-top: 15px;
}
 a.s-fb{
     background:#3b5999;
     color:#fff;
}
 a.s-tw{
     background:#55acee;
     color:#fff;
}
 a.s-li{
     background:#0077B5;
     color:#fff;
}
 a.s-pi{
     background:#bd081c;
     color:#fff;
}
 a.s-go{
     background:#dd4b39;
     color:#fff;
}
 .sidebar-archived-post li:last-child {
     border-bottom: 0 none;
     margin-bottom: 0;
}
 .sidebar-post-tags {
     padding: 20px;
}
 .mb-50{
     margin-bottom:50px;
}
 div.single-blog.white{
     background: #fff;
}
blockquote {
    border-left: 3px solid #1B9CFC;
    margin: 0 0 20px;
    padding: 5px 10px;
    font-style: italic;
    line-height: 25px;
    letter-spacing: 0px;
    font-weight: 400;
    color: #383636;
    font-size: 17px;
}
 .single-rec-blog-post:last-child {
     margin-bottom: 0;
}

.single-rec-blog-post span {
    text-transform: capitalize;
    font-size: 14px;
    color: #666;
}

/*----------------------------------------------------*/
/* 13.Start Project Area 
/*----------------------------------------------------*/
.start-your-project-area {
    background: #0284d0;
    padding: 100px 0;
}
.start-project-info-text h2 {
    color: #fff;
    letter-spacing: 1px;
    text-transform: capitalize;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 45px;
    font-weight: 500;
}

.start-project-info-text p {
    color: #f1f0f0;
}

button.g-t-project {
    background: #232323 none repeat scroll 0 0;
    border: medium none;
    border-radius: 4px;
    box-shadow: none;
    color: #fff;
    font-weight: 500;
    padding: 14px 25px;
    position: relative;
    text-align: center;
    text-transform: capitalize;
    transform: perspective(1px) translateZ(0px);
    transition-duration: 0.3s;
    transition-property: transform;
    vertical-align: middle;
    width: 170px;
    margin-top: 10px;
}
 button.g-t-project:before {
     background: rgba(0, 0, 0, 0) radial-gradient(ellipse at center center , rgba(0, 0, 0, 0.35) 0%, transparent 80%) repeat scroll 0 0;
     content: "";
     height: 10px;
     left: 5%;
     opacity: 0;
     pointer-events: none;
     position: absolute;
     top: 100%;
     transition-duration: 0.3s;
     transition-property: transform, opacity;
     width: 90%;
     z-index: -1;
}
 button.g-t-project:hover, button.g-t-project:focus, button.g-t-project:active {
     transform: translateY(-5px);
}
 button.g-t-project:hover:before, button.g-t-project:focus:before, button.g-t-project:active:before {
     opacity: 1;
     transform: translateY(5px);
}
/*----------------------------------------------------*/
/* 14.Conatct Area 
/*----------------------------------------------------*/
 .contact-form .form-control {
     border: 1px solid #eae8e8;
     box-shadow: none;
     height: 50px;
     position: relative;
}
 .contact-form .form-control:focus {
     box-shadow: none;
}
.contact-form textarea.form-control {
    height: 220px !important;
    resize: none;
    padding: 20px;
}

form#ajax-contact-form div.form-group {
    margin-bottom: 20px;
}
button.contact-btn {
    box-shadow: 0 0 1px transparent;
    display: inline-block;
    position: relative;
    transform: perspective(1px) translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
    background: #1B9CFC none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    padding: 15px 20px;
    text-align: center;
    text-transform: uppercase;
    width: 80%;
    border-radius: 30px;
    font-size: 15px;
    letter-spacing: 1px;
    margin-top: 10px;
}
 button.contact-btn:before {
     background: #343434 none repeat scroll 0 0;
     bottom: 0;
     content: "";
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
     transform: scaleY(0);
     transform-origin: 50% 50% 0;
     transition-duration: 0.3s;
     transition-property: transform;
     transition-timing-function: ease-out;
     z-index: -1;
     border-radius: 30px;
}
 button.contact-btn:hover, button.contact-btn:focus, button.contact-btn:active {
     color: white;
}
 button.contact-btn:hover:before, button.contact-btn:focus:before, button.contact-btn:active:before {
     transform: scaleY(1);
}
.address-info-text > li {
    display: block;
    font-weight: 500;
    list-style: outside none none;
    margin-bottom: 20px;
}
.address-info-text span {
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 17px;
    height: 45px;
    line-height: 45px;
    margin-right: 10px;
    text-align: center;
    width: 45px;
    background: #1b9cfc;
}
.contact-info > h2 {
    margin-bottom: 15px;
    margin-top: 0;
    text-transform: capitalize;
    font-size: 28px;
}
 .error{
     padding-left:15px;
     padding-right:15px;
     margin-bottom:10px;
     background:red;
     color:#fff;
     text-transform:capitalize;
     text-align:center;
}
 .success{
     padding-left:15px;
     padding-right:15px;
     margin-bottom:10px;
     background:#75a733;
     color:#fff;
     text-transform:capitalize;
     text-align:center;
}

/*----------------------------------------------------*/
/* 15.Footer Top Area 
/*----------------------------------------------------*/
 .footer-top-area {
     background: #343434 none repeat scroll 0 0;
     padding-top:80px;
     padding-bottom:50px;
}
 .single-footer-wedget {
     margin-bottom: 30px;
     overflow: hidden;
}
 .single-footer-wedget h2 {
     border-bottom: 1px solid #3f3f3f;
     color: #fff;
     font-size: 20px;
     margin-bottom: 20px;
     margin-top: 0;
     padding-bottom: 8px;
     text-transform: capitalize;
}
.single-footer-wedget p {
  color: #fff;
  line-height: 25px;
  text-transform: capitalize;
}
 .social-footer-contact ul li {
     display: inline;
     list-style: outside none none;
}
 .social-footer-contact ul li a {
     background: #595959;
     border-radius: 4px;
     display: inline-block;
     height: 40px;
     line-height: 40px;
     margin: 0 3px;
     text-align: center;
     width: 40px;
     color:#ddd;
     overflow:hidden;
}
.footer-recent-post li {
    border-bottom: 1px solid #4f4f4f;
    list-style: outside none none;
    margin-bottom: 10px;
    padding-bottom: 7px;
}
.footer-recent-post a {
  color: #fff;
  display: inline-block;
  text-transform: capitalize;
  transition: all 0.3s ease 0s;
}
.footer-recent-post span {
  color: #f9f9f9;
  padding-right: 8px;
}
 .footer-recent-post a:hover{
     color: #1B9CFC;
     transition:.3s;
}
 .footer-recent-post a:hover .footer-recent-post span{
     color: #9d9d9d;
}
.populer-search li {
    background: #696969 none repeat scroll 0 0;
    color: #f7f7f7;
    cursor: pointer;
    display: inline-block;
    float: left;
    list-style: outside none none;
    margin: 3px;
    padding: 8px 10px;
    transition: all 0.3s ease 0s;
    text-transform: capitalize;
    font-size: 14px;
}
 .populer-search li:hover{
     background: #1B9CFC;
     color: #fff;
     transition: .3s;
}
 .footer-gellary ul li {
     display: inline-block;
     float: left;
     list-style: outside none none;
     margin: 3px;
}

 .footer-gellary ul li {
     display: inline-block;
     float: left;
     list-style: outside none none;
     margin: 3px;
}
.footer-gellary ul li img {
    height: 65px;
    width: 75px;
    padding: 2px;
    background: #dee1ea;
    border-radius: 5px;
}
 .social-footer-contact ul li a.tw-f{
     background: #00ACED;
     text-shadow: 0px 0px #0087ba, 1px 1px #0087ba, 2px 2px #0087ba, 3px 3px #0087ba, 4px 4px #0087ba, 5px 5px #0087ba, 6px 6px #0087ba, 7px 7px #0087ba, 8px 8px #0087ba, 9px 9px #0087ba, 10px 10px #0087ba, 11px 11px #0087ba, 12px 12px #0087ba, 13px 13px #0087ba, 14px 14px #0087ba, 15px 15px #0087ba, 16px 16px #0087ba, 17px 17px #0087ba, 18px 18px #0087ba, 19px 19px #0087ba, 20px 20px #0087ba, 21px 21px #0087ba, 22px 22px #0087ba, 23px 23px #0087ba, 24px 24px #0087ba, 25px 25px #0087ba, 26px 26px #0087ba, 27px 27px #0087ba, 28px 28px #0087ba, 29px 29px #0087ba, 30px 30px #0087ba;
}
 .social-footer-contact ul li a.fb-f {
     background: #3B579D;
     text-shadow: 0px 0px #2d4278, 1px 1px #2d4278, 2px 2px #2d4278, 3px 3px #2d4278, 4px 4px #2d4278, 5px 5px #2d4278, 6px 6px #2d4278, 7px 7px #2d4278, 8px 8px #2d4278, 9px 9px #2d4278, 10px 10px #2d4278, 11px 11px #2d4278, 12px 12px #2d4278, 13px 13px #2d4278, 14px 14px #2d4278, 15px 15px #2d4278, 16px 16px #2d4278, 17px 17px #2d4278, 18px 18px #2d4278, 19px 19px #2d4278, 20px 20px #2d4278, 21px 21px #2d4278, 22px 22px #2d4278, 23px 23px #2d4278, 24px 24px #2d4278, 25px 25px #2d4278, 26px 26px #2d4278, 27px 27px #2d4278, 28px 28px #2d4278, 29px 29px #2d4278, 30px 30px #2d4278;
}
 .social-footer-contact ul li a.go-f{
     background: #DD4A3A;
     text-shadow: 0px 0px #c23122, 1px 1px #c23122, 2px 2px #c23122, 3px 3px #c23122, 4px 4px #c23122, 5px 5px #c23122, 6px 6px #c23122, 7px 7px #c23122, 8px 8px #c23122, 9px 9px #c23122, 10px 10px #c23122, 11px 11px #c23122, 12px 12px #c23122, 13px 13px #c23122, 14px 14px #c23122, 15px 15px #c23122, 16px 16px #c23122, 17px 17px #c23122, 18px 18px #c23122, 19px 19px #c23122, 20px 20px #c23122, 21px 21px #c23122, 22px 22px #c23122, 23px 23px #c23122, 24px 24px #c23122, 25px 25px #c23122, 26px 26px #c23122, 27px 27px #c23122, 28px 28px #c23122, 29px 29px #c23122, 30px 30px #c23122;
}
 .social-footer-contact ul li a.li-f {
     background: #007BB6;
     text-shadow: 0px 0px #005983, 1px 1px #005983, 2px 2px #005983, 3px 3px #005983, 4px 4px #005983, 5px 5px #005983, 6px 6px #005983, 7px 7px #005983, 8px 8px #005983, 9px 9px #005983, 10px 10px #005983, 11px 11px #005983, 12px 12px #005983, 13px 13px #005983, 14px 14px #005983, 15px 15px #005983, 16px 16px #005983, 17px 17px #005983, 18px 18px #005983, 19px 19px #005983, 20px 20px #005983, 21px 21px #005983, 22px 22px #005983, 23px 23px #005983, 24px 24px #005983, 25px 25px #005983, 26px 26px #005983, 27px 27px #005983, 28px 28px #005983, 29px 29px #005983, 30px 30px #005983;
}
 .social-footer-contact ul li a.pi-f {
     background: #CB2026;
     text-shadow: 0px 0px #9f191e, 1px 1px #9f191e, 2px 2px #9f191e, 3px 3px #9f191e, 4px 4px #9f191e, 5px 5px #9f191e, 6px 6px #9f191e, 7px 7px #9f191e, 8px 8px #9f191e, 9px 9px #9f191e, 10px 10px #9f191e, 11px 11px #9f191e, 12px 12px #9f191e, 13px 13px #9f191e, 14px 14px #9f191e, 15px 15px #9f191e, 16px 16px #9f191e, 17px 17px #9f191e, 18px 18px #9f191e, 19px 19px #9f191e, 20px 20px #9f191e, 21px 21px #9f191e, 22px 22px #9f191e, 23px 23px #9f191e, 24px 24px #9f191e, 25px 25px #9f191e, 26px 26px #9f191e, 27px 27px #9f191e, 28px 28px #9f191e, 29px 29px #9f191e, 30px 30px #9f191e;
}
/*----------------------------------------------------*/
/* 16.Footer Bottom Area 
/*----------------------------------------------------*/
 .footer-bottom-area {
     background: #232323 none repeat scroll 0 0;
     padding: 30px 0;
}
 .footer-bottom-menu ul li {
     display: inline-block;
     list-style: outside none none;
}
 .footer-bottom-menu ul li a {
     color: #ddd;
     display: inline-block;
     font-weight: 500;
     padding: 6px 10px;
     text-transform: capitalize;
}
 .footer-bottom-menu {
     text-align: right;
}
 .footer-copy-right p {
     color: #ddd;
     margin-bottom: 0;
}
 .footer-copy-right span {
     font-size: 16px;
     font-weight: 500;
     text-transform: capitalize;
}
 .footer-copy-right p i.fa {
     color: #75a733 ;
     font-size: 16px;
     margin: 2px;
}
 .footer-copy-right a {
     color: #a5a5a5;
     text-transform: capitalize;
}




/*DEMO PREVIEW STYLE*/
.intro-demo-area {
    background: url(../images/demo/de-sec-4.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 170px 0;
    position: relative;
    z-index: 1;
}

.intro-demo-area:after{
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    opacity: .9;
    z-index: -1;
}

.intro-hero {
    text-align: center;
}

.intro-hero h2 {
    font-size: 50px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: 2px;
    margin-top: 0;
}

.intro-hero p {
    color: #fff;
    margin: auto;
    margin-bottom: 20px;
    padding: 0 270px;
}

a.buy-now {
    background: #A3CB38;
    color: #fff;
    display: inline-block;
    padding: 10px 25px;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
    border-radius: 30px;
    width: 170px;
    margin: 0 5px;
    transition: .5s;
    cursor: pointer;
}
a.buy-now:hover{
    background: #fff;
    color: #333;

}



.single-preview a img {
    width: 100%;
    margin: 0;
    height: auto;
}

.intro-demo-text {
    margin-bottom: 50px;
    margin-top: 60px;
}

.intro-demo-text {
    text-align: center;
}

.intro-demo-text h2 {
    font-size: 45px;
    font-weight: 400;
    text-transform: capitalize;
    margin: 0;
    margin-bottom: 15px;
    letter-spacing: 1px;
    color: #454545;
}


.intro-demo-text h4 {
    font-weight: 400;
}

.intro-demo-text {
    margin-bottom: 50px;
}

.intro-demo-text i.fa {
    font-size: 45px;
    color: #4e4e4e;
    margin-top: 10px;
}

.single-preview {
    background: #f5f5f5;
    text-align: center;
    margin-bottom: 30px;
}

.demo-info {
    text-align: center;
}

.demo-info a {
    color: #171717;
    text-transform: capitalize;
    font-size: 16px;
    margin: 0;
    padding: 15px 0;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
}



.respon-intro h2 {
    font-size: 34px;
    text-transform: capitalize;
    font-weight: 400;
}

.intro-demo-text h4 {
    font-size: 22px;
    color: #555;
}

.respon-intro {
    margin-bottom: 50px;
    text-align: left;
}

.respon-intro h2 {
    font-weight: 300;
}
.preview-footer p {
    margin-bottom: 0;
    font-size: 16px;
    text-transform: capitalize;
    color: #fff;
    font-weight: 400;
}
.preview-footer p a{
    color: #f7f7f7;
}
.preview-footer {
    text-align: center;
    padding: 15px 0;
    background: #A3CB38;
}



.respon-intro h2, .respon-intro p {
    color: #fff;
}

 @media only screen and (max-width: 767px) {

    .intro-hero p{
    padding: 0;
    }

    .intro-demo-text h2 {
    font-size: 28px;
}

.intro-demo-text h4 {
    font-size: 16px;
    line-height: 24px;
    padding: 0 10px;
}


 }