/* 
*---------------------------------------------------------------------------------------- 
Name: RexOne - Responsive HTML5 Business Template 
Version : 1.0 
* ----------------------------------------------------------------------------------------
*/
/*============================================================= 
CSS INDEX 
============================= 
1. General Style, Preloder, Scroll To Top, Section Title
2. Start homepage Design Area 
-Main-Menu 
-Welcome image 
-Welcome Slider 
-Welcome Image 
-Welcome Video 
-Welcome Text Effect 
-Welcome gradien 
-Welcome particles 
-Welcome Youtube 
-Welcome winter 
3. About us Area 
4. counterup Area 
5. services Area 
6. skills area 
7. Team Area 
8. Promo Youtube Area 
9. Portfolio Area 
10. Testimonial Area
11. Prices Area 
12. Call Action Area 
13. Ask Question Area 
14. Blog Area 
-single blog 
- blog details 
15. SubScribe Area 
16. Contact Area 
17. Item Promo Area 
18. Google Map 
19. Footer Top Area 
20. Footer Bottom Area 
=============================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Raleway:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,300&display=swap');

 body {
     font-size: 14px;
     font-weight: 400;
     font-style: normal;
     height: 100%;
     font-family: 'Poppins', sans-serif;
     color: #333;
}
 html, body {
     height: 100%;
}
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Raleway', sans-serif;
     font-weight: 700;
     text-transform: uppercase;
}
 a {
     font-family: 'Poppins', sans-serif;
     text-decoration: none;
     -webkit-transition: all 0.2s;
     transition: all 0.2s;
}
 p{
     line-height: 28px;
}
 a:hover {
     text-decoration: none;
}
 a:focus {
     outline: none;
     text-decoration: none;
}
 ul, li {
     margin: 0;
     padding: 0;
}
 fieldset {
     border: 0 none;
     margin: 0 auto;
     padding: 0;
}
 .no-padding {
     padding: 0;
}
 .p-top-70 {
     padding-top: 70px;
}
 .m-bottom-40 {
     margin-bottom: 40px;
}
 .p-bottom-40 {
     padding-bottom: 40px;
}
 .m-top-30 {
     margin-top: 30px 
}
/*Start Preloder*/
 #preloader-area {
     position: fixed;
     z-index: 1000;
     top: 0;
     left: 0;
     background: #000;
     width: 100%;
     height: 100%;
     text-align: center 
}
 .loader {
     position: relative;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     text-align: center 
}
 .loader div {
     display: inline-block;
     background-color: #fff;
     width: 14px;
     height: 14px;
     margin: 3px;
     border-radius: 50%;
     -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
     animation: bouncedelay 1.2s infinite ease-in-out;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both 
}
 .loaded #loader-wrapper {
     visibility: hidden;
     background: rgba(255, 255, 255, 0);
     -webkit-transition: ease-out .3s;
     transition: ease-out .3s 
}
 .loaded #loader-wrapper, .loaded .loader {
     -webkit-transition: ease-out .3s;
     -moz-transition: ease-out .3s;
     -o-transition: ease-out .3s 
}
 .loaded .loader {
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     -webkit-transition: ease-out .3s;
     transition: ease-out .3s 
}
 .loader .bounce1 {
     -webkit-animation-delay: -.32s;
     animation-delay: -.32s 
}
 .loader .bounce2 {
     -webkit-animation-delay: -.16s;
     animation-delay: -.16s 
}
 @-webkit-keyframes bouncedelay {
     0%, 100%, 80% {
         -webkit-transform: scale(0);
         transform: scale(0) 
    }
     40% {
         -webkit-transform: scale(1);
         transform: scale(1) 
    }
}
 @keyframes bouncedelay {
     0%, 100%, 80% {
         -webkit-transform: scale(0);
         transform: scale(0) 
    }
     40% {
         -webkit-transform: scale(1);
         transform: scale(1) 
    }
}
/*End Preloder*/
/*Start Scroll To Top */
 .scrollup {
     background: #3B53BB; /*color celeste 3B53BB*/
     border-radius: 50%;
     bottom: 30px;
     color: #fff;
     cursor: pointer;
     float: right;
     font-size: 25px;
     height: 45px;
     line-height: 40px;
     position: fixed;
     right: 30px;
     text-align: center;
     width: 45px;
     z-index: 9;
}
/*End Scroll To Top */
/*Start Section Title*/
 .section-title {
     margin-bottom: 50px;
     text-align: center;
}
 .section-title p {
     font-size: 15px;
     font-weight: 400;
     line-height: 26px;
}
 .section-title h2 {
     font-size: 30px;
     font-weight: 700;
     margin-bottom: 20px;
     margin-top: 0;
     padding-bottom: 10px;
     position: relative;
     text-transform: uppercase;
}
 .section-title h2::before {
     background: #3B53BB none repeat scroll 0 0;  /*CELESTE*/
     content: "";
     height: 5px;
     left: 50%;
     margin-left: -35px;
     position: absolute;
     top: 45px;
     width: 70px;
     z-index: 1;
}
 .section-padding {
     padding: 80px 0;
}
 .gray-bg {
     background: #f8f8f8;
}
 .section-title.text-center.white-color h2, .section-title.text-center.white-color p {
     color: #fff;
}
 header.blog-details {
     height: auto;
}
 .section-title.text-center p {
     color: #333;
}
 .white-bg {
     background: #fff;
}
 a:focus, a:hover {
     color: #fff;
}
/*End Section Title*/
/*================================== 
02. Start Homepage Design Area 
==================================*/
/*Start Main Menu*/
 .main-menu .navbar-nav > li > a {
     color: #fff;
     font-size: 13px;
     font-weight: 500;
     letter-spacing: 0;
     padding: 30px 15px;
     text-transform: uppercase;
     transition: all 0.3s ease 0s;
     -webkit-transition: .3s;
}
 .main-menu .navbar-nav > li > a:hover {
     color:#3B53BB; /*CELESTE*/
     transition: .3s;
     -webkit-transition: .3s;
}
 .navbar {
     border: none;
     margin-bottom: 0;
}
 .logo > a {
     color: #fff;
     font-size: 22px;
     font-weight: 600;
     text-transform: uppercase;
     transition: all 0.3s ease 0s;
}
 .logo {
     padding-top: 24px;
}
 .nav li a:hover, .nav li a:focus {
     background: none;
     color #28E0B2;
}
 .fixed-menu-bg .navbar-nav li a:hover, .fixed-menu-bg .navbar-nav li.active a {
     color: #28E0B2;
     -webkit-transition: .3s;
     transition: .3s;
}
 .header-top-area {
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 999;
     position: fixed;
}
 .fixed-menu-bg .logo {
     padding-top: 15px;
     transition: all 0.3s ease 0s;
}
 .fixed-menu-bg .main-menu .navbar-nav li a {
     padding: 20px 15px;
     transition: .3s;
     -webkit-transition: .3s 
}
 .fixed-menu-bg .main-menu .navbar-nav li.active a {
     color: #3B53BB;
     transition: .3s;
     -webkit-transition: .3s;
}
 .fixed-menu-bg {
     background: #fff none repeat scroll 0 0;
     box-shadow: 0 3px 8px -1px rgba(0, 0, 0, 0.3);
}
 .fixed-menu-bg .main-menu .navbar-nav > li > a {
     color: #333;
}
 .fixed-menu-bg .logo > a {
     color: #3B53BB;
}
 .fixed-menu-bg .main-menu .navbar-nav > li > a:hover {
     color: #3B53BB;
     transition: .3s;
     -webkit-transition: .3s;
}
/*Welcome Image area*/
 .welcome-parallax-area {
     background: rgba(0, 0, 0, 0) url("assets/img/bg/parallax-bg.jpg") repeat scroll center center / cover;
     position: relative;
     z-index: 1;
     height: 100%;
}
.welcome-parallax-area::after {
    background: rgb(25 25 25 / 70%) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
 .display-table {
     display: table;
     height: 100%;
     width: 100%;
}
 .display-table-cell {
     display: table-cell;
     vertical-align: middle;
}
/*Welcome Slider area*/
 .welcome-header-area, .welcome-slider-area, .welcome-header-area, .welcome-slider-area div {
     height: 100%;
}
 .welcome-header-area div.single-slide-item-table-cell, .welcome-header-area div.single-slide-item-table-cell div {
     height: auto;
}
 .single-slide-item-table-cell {
     display: table-cell;
     text-align: center;
     vertical-align: middle;
}
 .single-slide-item-table {
     display: table;
     width: 100%;
}
 .single-slide-item {
     position: relative;
     z-index: 1;
}
 .single-slide-item: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;
}
 .welcome-youtube-video-area h2, .home-welcome-text h2, .home-welcome-text h1, .single-slide-item h2 {
     color: #fff;
     font-size: 60px;
     font-weight: 800;
     letter-spacing: 1px;
     line-height: 65px;
     margin-bottom: 30px;
     margin-top: 0;
     text-transform: capitalize;
}
 .welcome-youtube-video-area p, .home-welcome-text p, .single-slide-item p {
     color: #fff;
     font-weight: 400;
     margin-bottom: 20px;
     text-transform: capitalize;
     font-size: 16px;
     letter-spacing: 1px;
     text-transform: uppercase;
}
 a.slide-btn {
     display: inline-block;
     border-radius: 4px;
     vertical-align: middle;
     -webkit-transform: perspective(1px) translateZ(0);
     transform: perspective(1px) translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     position: relative;
     background: #3B53BB;
     color: #fff;
     letter-spacing: 1px;
     margin: 30px 10px 0;
     padding: 15px 25px;
     text-transform: uppercase;
     width: 160px;
     transition: .5s;
     -webkit-transition-property: color;
     transition-property: color;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
}
 a.slide-btn:before {
     content: "";
     position: absolute;
     z-index: -1;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: #1562e0;
     border-radius: 4px;
     -webkit-transform: scaleX(0);
     transform: scaleX(0);
     -webkit-transform-origin: 50%;
     transform-origin: 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;
}
 a.slide-btn:hover, a.slide-btn:focus, a.slide-btn:active {
     color: white;
}
 a.slide-btn:hover:before, a.slide-btn:focus:before, a.slide-btn:active:before {
     -webkit-transform: scaleX(1);
     transform: scaleX(1);
}
 .welcome-control {
     background: #3B53BB none repeat scroll 0 0;
     border-radius: 50%;
     color: #fff;
     font-size: 25px;
     height: 45px;
     left: 30px;
     line-height: 45px;
     margin-top: -50px;
     padding-left: 0;
     position: absolute;
     text-align: center;
     top: 50%;
     transition: all 0.5s ease 0s;
     width: 45px;
     z-index: 2;
}
 .right.welcome-control {
     left: auto;
     right: 30px;
}
 a.left.welcome-control {
     left: -60px;
     transition: .5s;
}
 a.right.welcome-control {
     right: -60px;
     transition: .5s;
}
 .welcome-slider-area:hover a.right.welcome-control{
     right:30px;
     transition: .5s;
}
 .welcome-slider-area:hover a.left.welcome-control{
     left:30px;
     transition: .5s;
}
 .slide-1 {
     background: url(assets/img/slider/1.jpg);
     background-size: cover;
}
 .slide-2 {
     background: url(assets/img/slider/2.jpg);
     background-size: cover;
}
 .slide-3 {
     background: url(assets/img/slider/3.jpg);
     background-size: cover;
}
 .single-slide-item h3, .home-welcome-text.text-center h3 {
     color: #fff;
     font-size: 20px;
     text-transform: capitalize;
     letter-spacing: 1px;
     margin-bottom: 20px;
     margin-top: 0;
}
 .single-slide-item h4, .home-welcome-text.text-center h4 {
     color: #fff;
     font-weight: 400;
     line-height: 30px;
     margin-bottom: 0;
     padding: 0 230px;
     text-transform: capitalize;
}
 .carousel-fade .carousel-inner .item {
     -webkit-transition-property: opacity;
     transition-property: opacity;
}
 .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
 .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right {
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
 .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {
     left: 0;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
}
/*Greadinet Background Area*/
 #gradient {
     margin: 0;
     opacity: 0.8;
     padding: 0;
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: -1;
}
 .welcome-gradient-area{
     background: rgba(0, 0, 0, 0) url("assets/img/bg/gradient-bg.jpg");
     position: relative;
     background-position: center;
     background-size: cover;
     height: 100%;
     z-index: 1;
}
 .welcome-gradient-area:after{
     background: rgba(0, 0, 0, 0.8);
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     content: "";
}
/*Winter Background Area*/
 #xmas {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     z-index:-1;
}
 .welcome-winter-area{
     background: rgba(0, 0, 0, 0) url("assets/img/bg/winter-bg.jpg") repeat scroll 0 0 / cover ;
     position: relative;
     z-index: 1;
     height: 100%;
}
 .welcome-winter-area:after{
     background: rgba(0, 0, 0, 0.3);
     ;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     content: "";
     z-index: -1;
}
/*particles Background Area*/
 #particles-js {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
}
 .welcome-particles-area{
     background: rgba(0, 0, 0, 0) url("assets/img/bg/particles-bg.jpg");
     position: relative;
     background-position: center;
     background-size: cover;
     height: 100%;
     z-index: 1;
}
 .welcome-particles-area:after{
     background: rgba(0, 0, 0, 0.8);
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     content: "";
}
/*Welcome texteffect area*/
 .welcome-texteffect-area{
     background: rgba(0, 0, 0, 0) url("assets/img/bg/texteffect-bg.jpg");
     position: relative;
     background-position: center;
     background-size: cover;
     height: 100%;
     z-index: 1;
}
 .welcome-texteffect-area:after{
     background: rgba(0, 0, 0, 0.8);
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     content: "";
}
/*Welcome Youtube Video area*/
 .welcome-youtube-area{
     background:rgba(0, 0, 0, 0.4);
     position: relative;
     background-position: center;
     background-size: cover;
     height: 100%;
     z-index: 1;
}
 .welcome-youtube-video-area:after {
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     position: absolute;
     background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
     content: "";
     z-index: -1;
}
/*==================================
 03. Start About Us Area 
 ==================================*/
 .about-iamge img {
     border: 10px solid #3B53BB;
     border-radius: 10px;
     box-shadow: 2px 2px 0 2px rgba(0, 0, 0, 0.1);
}
 .about-text > p {
     color: #111;
     font-size: 14px;
     line-height: 28px;
     text-transform: capitalize;
}
 .about-text > h2 {
     color: #444;
     font-size: 30px;
     font-weight: 600;
     letter-spacing: 1px;
     line-height: 30px;
     margin-bottom: 10px;
     margin-top: 0;
     text-align: left;
     text-transform: capitalize;
}
 .about-text p{
    margin-bottom: 0;
}
 ul.about-list-point li {
     list-style: outside none none;
     margin-bottom: 10px;
     position: relative;
     text-transform: capitalize;
     padding-left: 20px;
}
 .about-list-point > li::before {
     background: #1562e0 none repeat scroll 0 0;
     content: "";
     height: 8px;
     left: 0;
     position: absolute;
     top: 5px;
     width: 8px;
}
 .about-list-point {
     margin-top: 15px;
}
 a.read-more {
     background: #3B53BB none repeat scroll 0 0;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     color: #fff;
     border-radius: 4px;
     display: inline-block;
     font-size: 15px;
     font-weight: 500;
     letter-spacing: 1px;
     margin-top: 15px;
     padding: 12px 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: 150px;
}
 a.read-more:before {
     content: "";
     position: absolute;
     z-index: -1;
     border-radius: 4px;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #1562e0;
     -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;
}
 a.read-more:hover, a.read-more:focus, a.read-more:active {
     color: white;
}
 a.read-more:hover:before, a.read-more:focus:before, a.read-more:active:before {
     -webkit-transform: scaleX(1);
     transform: scaleX(1);
}
/*================================== 
04. Countdown Area 
==================================*/
 .our-funfact-area{
     background: url(assets/img/bg/funfact-bg.jpg);
     background-size: cover;
     background-attachment: fixed;
     background-position: center center;
     position:relative;
     z-index:1;
}
 .our-funfact-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-funfact {
     text-align: center;
}
 .single-funfact i.fa {
     background: #fff none repeat scroll 0 0;
     border-radius: 100%;
     box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.16);
     color: #3B53BB;
     display: inline-block;
     font-size: 35px;
     height: 80px;
     line-height: 80px;
     width: 80px;
}
 .single-funfact h2 {
     color: #fff;
     font-family: "Poppins",sans-serif;
     font-size: 40px;
     font-weight: 600;
     line-height: 40px;
     margin-top: 25px;
     margin-bottom: 20px;
}
 .single-funfact h4 {
     color: #ddd;
     font-size: 16px;
     letter-spacing: 1px;
     margin: 0;
}
/*==================================
 05. Start Services Area
  ==================================*/
 .our-services-area {
     padding-bottom: 50px;
     padding-top: 80px;
}
.media.services-info div.media-body h5 {
    font-size: 16px;
}
.media.services-info {
  margin-bottom: 30px !important;
}
 .services-info {
     background: #fff none repeat scroll 0 0;
     border: 1px solid #e7e7e7;
     margin-bottom: 30px;
     padding: 20px;
     cursor: pointer;
     transition: .5s;
     position: relative;
}
 .services-info:hover {
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
     transition: .5s;
}
 .services-info i {
     color: #1562e0;
}
 .services-info i {
     font-size: 40px;
     width: 65px;
     float: left;
}
 [class^="flaticon-"]::before, [class*=" flaticon-"]::before, [class^="flaticon-"]::after, [class*=" flaticon-"]::after {
     display: block;
     font-family: Flaticon;
     font-size: 40px;
     font-style: normal;
     margin-left: 0;
     text-align: center;
}
/*================================== 
06. our skill promo area
 ==================================*/
 .skill-promo-area {
     background-attachment: fixed;
     background-image: url("assets/img/bg/skill-bg.jpg");
     background-position: center center;
     background-size: cover;
     position: relative;
     z-index: 1;
}
 .skill-promo-area::after {
     background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
     content: "";
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
 .progress_bar {
     overflow: hidden;
     padding-top: 35px;
}
 .progress-bar > span {
     background: #3B53BB none repeat scroll 0 0;
     float: right;
     font-size: 11px;
     margin-top: -34px;
     padding: 4px 5px;
     position: relative;
}
 .progress-bar > span::before {
     border: medium solid transparent;
     content: " ";
     height: 0;
     pointer-events: none;
     position: absolute;
     top: 100%;
     width: 0;
}
 .progress-bar > span::before {
     border-top-color: #3B53BB;
     border-width: 5px;
     left: 50%;
     margin-left: -5px;
}
 .progress {
     background-color: #e9e9e9;
     border-radius: 2px;
     box-shadow: none;
     height: 12px;
     margin-bottom: 70px;
     overflow: visible;
     position: relative;
}
 .progress .lead {
     color: #fff;
     font-size: 18px;
     font-weight: 400;
     left: 0;
     position: absolute;
     top: -32px;
     z-index: 99;
}
 .progress-bar {
     background-color: #3B53BB;
     float: left;
     font-size: 12px;
     height: 100%;
     line-height: 20px;
     transition: width 0.6s ease 0s;
     width: 0;
}
 .progress:last-child {
     margin-bottom: 0;
}
 .s-f-p30{
    margin-bottom: 30px
}
.single-featured-promo {
    padding: 25px 10px 22px;
    position: relative;
    text-align: center;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    background: #3B53BB;
    border-radius: 10px;
}
 .single-promo-text {
     overflow: hidden;
     padding-left: 20px;
}
 .single-promo{
    position: relative;
    float: left;
    margin-bottom: 30px;
    cursor: pointer;
}
 .single-promo:hover .single-promo-text > h2{
    color:#3B53BB;
    transition: 0.3s;
}
 .single-promo:hover div.icon i{
    background:#3B53BB;
    color:#fff;
     transition: 0.3s;
}
.single-promo-text > h2 {
    color: #333;
    font-size: 14px;
    margin-bottom: 5px;
    margin-top: 0;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
    letter-spacing: 1px;
}
 .single-promo-text > p {
     color: #444;
     font-size: 14px;
     text-transform: capitalize;
}
 div.icon i {
     background: #3B53BB;
     border-radius: 50%;
     color: #fff;
     display: block;
     float: left;
     font-size: 30px;
     height: 60px;
     line-height: 60px;
     text-align: center;
     width: 60px;
     transition: 0.3s;
}
 .single-promo:last-child {
     margin-bottom: 0;
}
 .skill-promo-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;
}
 .icon {
     display: block;
     padding-right: 10px;
}
 .single-featured-promo:hover::before {
     border-bottom: 2px solid #3fb698;
}
 .single-featured-promo .icon {
     margin: 0 0 11px;
}
 .single-featured-promo .icon span {
     font-size: 52px;
     line-height: 52px;
     transition: all 0.3s ease 0s;
}
 .single-featured-promo:hover .icon span {
     color: #00324c;
}
 .single-featured-promo .name {
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 0;
     text-transform: capitalize;
}
 .icon span {
     color: #fff !important;
}
 h6.name {
     color: #fff !important;
}
/*================================== 
07. Start Team Area 
==================================*/
 .our-team::before {
     background: #2098d1 none repeat scroll 0 0;
     bottom: 0;
     content: "";
     height: 4px;
     left: 0;
     position: absolute;
     right: 100%;
     transition-duration: 0.3s;
     transition-property: right;
     transition-timing-function: ease-out;
     z-index: -1;
}
 .our-team:hover::before, .our-team:focus::before, .our-team:active::before {
     right: 0;
}
 .our-team:hover {
     box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}
 .our-team{
     text-align: center;
     position: relative;
     cursor:pointer;
     transition:all .4s;
}
 .team-img{
     overflow:hidden;
     width: 100%;
}
 .team-img img{
     transition:all .4s;
}
 .our-team:hover .team-img {
     filter: grayscale(100%);
}
 .our-team:hover .team-img img{
     transform:scale(1.1);
     transition:all .4s;
}
 span.post {
     color: #444;
     text-transform: capitalize;
}
 .social-links li {
     display: inline-block;
     list-style: outside none none;
}
 .social-links li a {
     border-radius: 50%;
     color: #fff;
     display: inline-block;
     height: 32px;
     line-height: 32px;
     margin: 0 2px;
     width: 32px;
}
 h3.title {
     font-size: 16px;
     margin-bottom: 12px;
     padding-bottom: 12px;
     position: relative;
}
 h3.title::after {
     background: #1562e0 none repeat scroll 0 0;
     bottom: 0;
     content: "";
     height: 3px;
     left: 0;
     margin: auto;
     position: absolute;
     right: 0;
     width: 30px;
}
 .social-links {
     margin-top: 15px;
}
 .our-team {
     border: 1px solid #ddd;
     padding-bottom: 25px;
}
 .our-team:before {
     content: "";
     position: absolute;
     z-index: -1;
     left: 0;
     right: 100%;
     bottom: 0;
     background: #2098D1;
     height: 4px;
     -webkit-transition-property: right;
     transition-property: right;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-timing-function: ease-out;
     transition-timing-function: ease-out;
}
 .our-team:hover:before, .our-team:focus:before, .our-team:active:before {
     right: 0;
}
 .t-s-fa{
    background: #3b5998;
     color: #fff;
}
 .t-s-go{
    background: #dc4e41;
     color: #fff;
}
 .t-s-tw{
    background: #55acee;
     color: #fff;
}
 .t-s-li{
    background: #0077b5;
     color: #fff;
}
 .t-s-pi{
    background: #bd081c;
     color: #fff;
}
 .t-s-in{
    background: #517fa4;
     color: #fff;
}
 .t-s-wa{
    background: #51ba01;
     color: #fff;
}
/*================================== 
08. Start Promo Video Area
 ==================================*/
 .welcome-video-area {
     background: rgba(0, 0, 0, 0) url("assets/img/bg/video-bg.jpg") repeat scroll center center / cover ;
     padding: 150px 0;
     position: relative;
     z-index: 1;
}
 .welcome-video-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;
}
 .video-area-text h2 {
     color: #fff;
     font-size: 30px;
     font-weight: 600;
     letter-spacing: 1px;
     line-height: 28px;
     text-align: center;
     text-transform: uppercase;
     margin-bottom: 25px;
}
 .video-area-text h4 {
     color: #f9f9f9;
     font-size: 16px;
     letter-spacing: 1px;
     margin-bottom: 30px;
     margin-top:0;
}
 .video-area-text a {
     background: #3B53BB none repeat scroll 0 0;
     border-radius: 50%;
     color: #fff;
     display: inline-block;
     height: 60px;
     line-height: 60px;
     padding-left: 3px;
     text-align: center;
     width: 60px;
     font-size:22px;
}
/*================================== 
09. Start Portfolio Area 
==================================*/
 ul.work li{
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: perspective(1px) translateZ(0);
     transform: perspective(1px) translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     position: relative;
}
 li.filter.active:before {
     border-color: #1562e0 transparent transparent;
     border-style: solid;
     border-width: 10px 10px 0;
     bottom: 0;
     content: "";
     left: calc(50% - 10px);
     pointer-events: none;
     position: absolute;
     top: 36px;
     transition: all 0.4s ease 0s;
     transition-property: transform;
     visibility: visible;
}
 li.filter.active{
     background:#1562e0;
     transition: all 0.4s ease 0s;
}
 ul.work li {
     background: #3B53BB none repeat scroll 0 0;
     border-radius: 4px;
     color: #fff;
     display: inline-block;
     letter-spacing: 0;
     list-style: outside none none;
     margin: 0 5px;
     padding: 8px 20px;
     text-align: center;
     text-transform: uppercase;
     transition: all 0.4s ease 0s;
     width: 120px;
}
 ul.work {
     text-align: center;
     cursor: pointer;
}
 .work-inner {
     margin-top: 50px;
}
 .work-inner .mix{
    display:none;
}
 .box{
     text-align: center;
     overflow: hidden;
     position: relative;
}
 .box img{
     width: 100%;
     height: auto;
}
 .box .box-content{
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
}
 .box .box-content:before, .box .box-content:after{
     content: "";
     width: 100%;
     height: 50%;
     background: #1e1818;
     position: absolute;
     top: -55%;
     left: 0;
     opacity:.8;
     transition: all 0.3s ease 0s;
}
 .box .box-content:after{
     top: auto;
     bottom: -55%;
     opacity:.8;
}
 .box:hover .box-content:before{
     top: 0;
}
 .box:hover .box-content:after{
     bottom: 0;
}
 .box .work-title, .box .post {
     color: #fff;
     font-size: 18px;
     font-weight: 600;
     letter-spacing: 0;
     margin: 0 0 5px;
     opacity: 0;
     position: relative;
     text-transform: uppercase;
     top: 10%;
     transition: all 0.35s ease 0s;
     z-index: 1;
}
 .box .post {
     display: block;
     font-size: 14px;
     font-weight: 500;
     letter-spacing: 1px;
     margin-top: 5px;
     top: 63%;
}
 .box:hover .work-title, .box:hover .post{
     top: 30%;
     opacity: 1;
     transition-delay: 0.35s;
}
 .box:hover .post{
     top: 37%;
}
 .box .icon{
     padding: 0;
     margin: 0;
     list-style: none;
     z-index: 1;
     position: relative;
     top: 33%;
     transform: scale(0);
     transition: all 0.35s ease 0s;
}
 .box:hover .icon{
     transform: scale(1);
     transition-delay: 0.35s;
}
 .box .icon li{
     display: inline-block;
}
 .box .icon li a {
     background: #3B53BB none repeat scroll 0 0;
     border-radius: 50%;
     color: #fff;
     display: block;
     font-size: 14px;
     height: 45px;
     line-height: 45px;
     margin-right: 10px;
     transition: all 0.3s ease 0s;
     width: 45px;
}
 .box .icon li a:hover{
     background: #0baocb;
     color: #fff;
}
/*================================== 
10. Start Testimonial Area 
==================================*/
 .testimonial{
     margin: 0 20px 50px;
}
 div.testimonial {
     margin-top: 30px;
}
 .testimonial .pic {
     height: 130px;
     margin: 0 auto;
     width: 130px;
     margin-bottom: 30px;
}
 .testimonial .pic img {
     border-radius: 50%;
     height: 100%;
     width: 100%;
}
 .testimonial-profile {
     display: block;
     margin-top: 20px;
}
 .testimonial .title {
     color: #2f2f2f;
     display: block;
     font-size: 18px;
     font-weight: 600;
     letter-spacing: 1px;
     margin: 0 0 7px;
     text-transform: capitalize;
}
 .testimonial .post{
     display: block;
     font-size: 14px;
     color: #3B53BB;
}
 .testimonials-inner {
     margin-top: 30px;
}
 .out-client-say {
     background: rgba(0, 0, 0, 0) url("assets/img/bg/testimonial-bg.jpg") repeat scroll center center / cover ;
     position: relative;
     z-index: 1;
}
 .out-client-say div.section-title h2{
    color:#fff;
}
 .out-client-say div.section-title p{
    color:#fff;
}
 .out-client-say div.testimonial-profile h3.title{
    color:#fff;
}
 .out-client-say::after {
     background: rgba(0, 0, 0, 0.9);
     color: #333;
     content: "";
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
 .testimonial .description {
     color: #fff;
     font-size: 16px;
     font-weight: 400;
     line-height: 28px;
     margin: 0;
     padding: 0 150px;
}
 .testimonial {
     margin: 0 20px;
     text-align: center;
}
 .cleint-cp {
     color: #fff;
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 1px;
     margin-bottom:0;
}
 #testimonial-slider.owl-carousel .owl-controls {
     margin-top: 15px;
     text-align: center;
}
 #testimonial-slider.owl-carousel .owl-page span {
     display: block;
     background: #dadada;
     width: 7px;
     height: 7px;
     margin: 0 5px;
     border-radius: 50%;
     color: #dadada;
}
 #testimonial-slider.owl-carousel .owl-page.active span, #testimonial-slider.owl-controls.clickable .owl-page:hover span {
     background: #1562e0;
     filter: Alpha(Opacity=100);
    /*IE7 fix*/
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
/*================================== 
11. Start Pricing Table Area 
==================================*/
 .pricing-header{
     background: #fafafa none repeat scroll 0 0;
}
 .single-pricing-table{
     transition: .5s;
     cursor:pointer;
}
 .single-pricing-table:hover {
     box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);
     transition: .5s;
}
 .pricing-title > h3 {
     color: #333;
     font-size: 28px;
     font-weight: 800;
     letter-spacing: 0;
     margin-bottom: 20px;
     margin-top: 0;
}
 .pricing-price h2 {
     color: #3B53BB;
     font-family: "Poppins",sans-serif;
     font-size: 40px;
     font-weight: 600;
}
 .single-pricing-table.text-center.active-price {
     box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);
}
 .pricing-body ul {
     padding: 12px 0;
}
 .pricing-body li {
     color: #474747;
     display: block;
     font-size: 15px;
     font-weight: 500;
     list-style: outside none none;
     padding: 12px 0;
     text-transform: capitalize;
}
 .pricing-body {
     border-bottom: 1px solid #f5f5f5;
}
 .single-pricing-table {
     background: #fff none repeat scroll 0 0;
     border: 1px solid #f6f6f6;
     padding: 0;
}
 .pricing-price > h6, .pricing-price > h2 {
     margin-top: 0;
}
 .pricing-header {
     padding: 30px 0;
}
 .pricing-body li:last-child {
     border: medium none;
}
 .pricing-header > h2 {
     font-size: 40px;
     margin-bottom: 15px;
     margin-top:0;
}
 .pricing-header > h3 {
     font-size: 22px;
     font-weight: 600;
     margin-top: 0;
     text-transform: uppercase;
}
 .pricing-header h6 {
     color: #555;
     font-size: 14px;
     letter-spacing: 1px;
     margin-bottom: 0;
     margin-top: 15px;
     text-transform: capitalize;
}
 .pricing-footer .p-btn {
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: perspective(1px) translateZ(0);
     transform: perspective(1px) translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     position: relative;
     background: #e1e1e1;
     -webkit-transition-property: color;
     transition-property: color;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
}
 .pricing-footer .p-btn:before {
     content: "";
     position: absolute;
     z-index: -1;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: #1562e0;
     border-radius: 4px;
     -webkit-transform: scaleY(0);
     transform: scaleY(0);
     -webkit-transform-origin: 50%;
     transform-origin: 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;
}
 .pricing-footer .p-btn:hover, .pricing-footer .p-btn:focus, .pricing-footer .p-btn:active {
     color: white;
}
 .pricing-footer .p-btn:hover:before, .pricing-footer .p-btn:focus:before, .pricing-footer .p-btn:active:before {
     -webkit-transform: scaleY(1);
     transform: scaleY(1);
}
 .pricing-footer .p-btn {
     background: #3B53BB none repeat scroll 0 0;
     border-radius: 4px;
     color: #fff;
     display: inline-block;
     letter-spacing: 0;
     padding: 12px 25px;
     text-align: center;
     text-transform: capitalize;
     transition: all 0.5s ease 0s;
     width: 150px;
     font-size:15px;
     font-weight:500;
}
 p.copy-right-text strong {
     padding-right: 3px;
     font-weight: 500;
     font-size: 15px;
     letter-spacing: 1px;
}
 .pricing-footer {
     padding: 20px 0;
}
 .pricing-price.green-bg {
     background: #3B53BB;
}
 .pricing-price.green-bg h2, .pricing-price.green-bg h6 {
     color: #fff;
}
/*================================== 
12. Start Call To Action 
==================================*/
 .coll-to-action-area {
     background: rgba(0, 0, 0, 0) url("assets/img/bg/c-action2.jpg") repeat scroll center center / cover ;
     padding: 130px 0;
     position: relative;
     z-index: 1;
}
 .coll-to-action-area:after{
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background:rgba(0, 0, 0, 0.6);
     content: "";
     z-index: -1;
}
 .colto-wrap h3 i {
     color: #3B53BB;
     margin: 0 12px;
}
.colto-wrap h3 {
    color: #fff;
    font-family: "Poppins",sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 38px;
    margin: 0;
    letter-spacing: 1px;
}
 .colto-wrap.text-center > span {
     color: #3B53BB;
     display: block;
     font-size: 16px;
     margin-top: 15px;
}
 .colto-wrap.text-center {
     padding: 30px 20px;
     position: relative;
     z-index: 1;
}
 .colto-wrap.text-center::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;
}
 .panel-title a:focus{
    color:#333;
}
 .panel-group .panel{
    display: block;
    margin-bottom: 15px
}
/*================================== 
13. Start FAQ Area
 ==================================*/
.panel-default > .panel-heading {
    background: #fffefe none repeat scroll 0 0;
    color: #000;
}
 .panel-heading {
     border: medium none;
     padding-bottom: 11px;
     padding-top: 11px;
}
 .panel-group {
     margin-bottom: 0;
}
 .panel-default > .panel-heading + .panel-collapse > .panel-body {
     border-top: medium none;
     padding-bottom: 22px;
     padding-left: 32px;
     padding-top: 22px;
}
.panel-heading .panel-title a[data-toggle="collapse"] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    height: 100%;
    padding: 5px 15px;
    position: relative;
    text-transform: uppercase;
    width: 100%;
    letter-spacing: 1px;
    color: #444;
}
 .panel-heading .panel-title a[data-toggle="collapse"]:hover {
     color: #000;
}
 .panel-heading .panel-title a[data-toggle="collapse"]::after {
     content: "-";
     display: block;
     font-size: 20px;
     line-height: 1;
     position: absolute;
     right: 1em;
     top: 50%;
     transform: translateY(-50%);
}
 .panel-heading .panel-title a.collapsed[data-toggle="collapse"]::after {
     content: "+";
     font-size: 20px;
}
/*================================== 
14. Start Blog Area 
==================================*/
/*breadcrumb-area*/
 .breadcrumb-area {
     background: rgba(0, 0, 0, 0) url("assets/img/blog/breadcrumb.jpg") no-repeat scroll center center / cover ;
     padding-bottom: 100px;
     padding-top: 150px;
     position: relative;
}
 .breadcrumbs h2 {
     color: #ffffff;
     text-transform: uppercase;
}
 .breadcrumbs.text-center > ul li {
     color: #ffffff;
     display: inline-block;
     text-transform: capitalize;
}
 .breadcrumbs.text-center > ul li a {
     color: #ffffff;
     margin-right: 20px;
     position: relative;
}
 .breadcrumbs.text-center > ul li a::before {
     background: #ffffff none repeat scroll 0 0;
     content: "";
     height: 15px;
     position: absolute;
     right: -13px;
     top: 2px;
     transform: rotate(33deg);
     width: 2px;
}
 header.welcome-header-area.single-blog-area {
     height: auto;
}
 .single-blog {
     background: #fff none repeat scroll 0 0;
     box-shadow: 0 2px 2px rgba(10, 16, 20, 0.2), 0 0 2px rgba(10, 16, 20, 0.12);
}
 .single-blog img {
     width: 100%;
}
 .single-blog-ptb{
    padding-top:80px;
    padding-bottom:50px;
}
 div.breadcrumb-area{
    position: relative;
    z-index:1;
}
 div.breadcrumb-area:after{
     position: absolute;
     background: rgba(0, 0, 0, 0.8);
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     content: "";
     z-index: -1;
}
 .our-blog-area.single-blog-ptb .single-blog{
     margin-bottom: 30px;
}
 .blog-content > h4 {
     margin-top: 15px;
}
 .date > span {
     margin-right: 3px;
}
 .blog-img{
     overflow:hidden;
}
 .blog-img img{
     transition:all .4s;
}
 .single-blog:hover .blog-img {
     filter: grayscale(100%);
}
 .single-blog:hover .blog-img img{
     transform:scale(1.1);
}
 .single-blog:hover{
     box-shadow: 0 8px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12);
}
 .blog-content > p {
     color: #444;
     line-height: 26px;
     text-transform: lowercase;
}
 .single-blog:hover {
     box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
     transition: .5s;
}
 .single-blog a.b-tite {
     color: #4a4a4a;
     cursor: pointer;
     display: inline-block;
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 1px;
     margin-bottom: 10px;
     margin-top: 15px;
     text-transform: uppercase;
}
 .single-blog.text-center > p {
     line-height: 24px;
}
 div.post-meta {
     margin-top: 15px;
     text-transform: capitalize;
}
 ul.post-meta li {
     display: inline-block;
     list-style: outside none none;
}
 ul.post-meta li a {
     color: #333;
     display: block;
     font-size: 13px;
     margin: 0 10px;
     text-transform: uppercase;
}
 .blog-content ul.post-meta {
     border-bottom: 1px dashed #ddd;
     display: block;
     margin-bottom: 5px;
     padding-bottom: 15px;
}
 ul.post-meta li a i.fa {
     font-size: 14px;
     margin-right: 5px;
}
 ul.post-meta {
     text-align: center;
}
 .blog-content {
     padding: 25px 15px;
     text-align: center;
}
.blog-content > h4 a {
    color: #333;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
}
 a.blog-btn {
     background: #3B53BB none repeat scroll 0 0;
     border-radius: 4px;
     color: #fff;
     display: inline-block;
     margin-top: 10px;
     padding: 10px 20px;
     text-transform: capitalize;
     transition: all 3s ease 0s;
}
 a.blog-btn {
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: perspective(1px) translateZ(0);
     transform: perspective(1px) translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     position: relative;
     -webkit-transition-property: color;
     transition-property: color;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
}
 a.blog-btn:before {
     content: "";
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #1562e0;
     border-radius: 4px;
     -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;
}
 a.blog-btn:hover, a.blog-btn:focus, a.blog-btn:active {
     color: white;
}
 a.blog-btn:hover:before, a.blog-btn:focus:before, a.blog-btn:active:before {
     -webkit-transform: scaleX(1);
     transform: scaleX(1);
}
 .blog-content h4 a{
    transition: 0.3s
}
 .blog-content h4:hover a{
    color:#1562e0;
    transition: 0.3s;
}
/*Single Blog*/
 .single-blog-banner {
     background: rgba(0, 0, 0, 0) url("assets/img/bg/single-blog.jpg.") repeat scroll center top / cover;
     padding-bottom: 70px;
     padding-top: 150px;
     position: relative;
     z-index: 1;
}
 .single-blog-banner:after {
     background: #000 none repeat scroll 0 0;
     content: "";
     height: 100%;
     left: 0;
     opacity: 0.6;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
 .single-blog-banner h2 {
     color: #fff;
     font-size: 16px;
     letter-spacing: 2px;
}
 .single-blog-post-area {
     background: #fff none repeat scroll 0 0;
}
 form.search_form_box input {
     border: 1px solid #ddd;
     box-shadow: none;
     font-size: 16px;
     height: 50px;
     letter-spacing: 1px;
     padding: 0 20px;
     position: relative;
     text-transform: capitalize;
}
 .search_form_box > button {
     background: #3B53BB;
     border: 0 none;
     border-radius: 4px;
     box-shadow: none;
     color: #fff;
     font-size: 16px;
     padding: 5px 10px;
     position: absolute;
     right: 25px;
     top: 9px;
}
 blockquote {
     border-left: 4px solid #3B53BB;
     font-size: 16px;
     margin: 0 0 20px;
     padding: 10px 20px;
}
 h2.wedget-title {
     font-size: 16px;
     font-weight: 600;
     margin: 0 0 18px;
     padding-bottom: 10px;
     position: relative;
}
 h2.wedget-title:after {
     background: #ddd none repeat scroll 0 0;
     bottom: 0;
     content: "";
     height: 2px;
     left: 0;
     position: absolute;
     width: 100px;
}
 .single_sidebar_wedget {
     margin-bottom: 50px;
}
 .single_sidebar_wedget .post-cat ul li {
     list-style: outside none none;
}
 .single_sidebar_wedget .post-cat ul li a {
     color: #666;
     display: inline-block;
     font-size: 15px;
     letter-spacing: 0;
     padding-bottom: 5px;
     padding-left: 12px;
     position: relative;
     text-transform: capitalize;
}
 .single_sidebar_wedget .post-cat ul li a::after {
     color: #666;
     content: "";
     font-family: fontawesome;
     height: 100%;
     left: -6px;
     margin-left: 3px;
     position: absolute;
     top: 0;
     width: 100%;
}
 .post-tag-item {
     width: 95%;
}
 ul.social_post_share li {
     display: inline-block;
     list-style: outside none none;
}
 ul.social_post_share li a {
     border-radius: 4px;
     color: #fff;
     display: inline-block;
     height: 40px;
     line-height: 40px;
     margin: 0 3px 6px 0;
     text-align: center;
     width: 40px;
     border-radius: 50%;
}
 ul.social_post_share li a.l-face {
     background: #3b5999 
}
 ul.social_post_share li a.l-twit {
     background: #55acee 
}
 ul.social_post_share li a.l-drib {
     background: #ea4c89 
}
 ul.social_post_share li a.l-pint {
     background: #bd081c 
}
 .single-blog-banner h2 a {
     color: #3B53BB;
}
 ul.post-tag-item li {
     display: inline-block;
     list-style: outside none none;
}
 ul.post-tag-item li a {
     background: transparent none repeat scroll 0 0;
     border: 1px solid #ddd;
     color: #666;
     display: inline-block;
     font-weight: 400;
     margin-bottom: 8px;
     padding: 5px 15px;
     text-transform: capitalize;
     letter-spacing: 0;
     border-radius: 4px;
}
 ul.post-tag-item li a:hover {
     background: #3B53BB;
     color: #fff;
     transition: .3s;
}
 .single_sidebar_wedget:last-child {
     margin-bottom: 0;
}
 .blog-img img {
     width: 100%;
}
 a.b-tite {
     color: #666;
     display: inline-block;
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 5px;
     margin-top: 10px;
     text-transform: uppercase;
}
 div.post-cat ul li a:hover, ul.post-meta li a:hover, a.b-tite:hover {
     color: #3B53BB;
}
/*blog details*/
/*single-blog-details*/
 .single-sidebar-wedget {
     background: #fff none repeat scroll 0 0;
     margin-bottom: 30px;
     overflow: hidden;
     padding: 20px;
}
 .mt_single_rec_post:last-child {
     margin-bottom: 0;
}
 .search-box input.form-control {
     border: 1px solid #bdbdc0;
     padding-right: 65px;
     position: relative;
     text-transform: capitalize;
     transition: all 0.3s ease 0s;
}
 .search-box input.form-control:focus {
     border-color: #3B53BB ;
     transition: all 0.3s ease 0s;
}
 .search-box > span {
     background: #3B53BB none repeat scroll 0 0;
     color: #fff;
     cursor: pointer;
     height: 44px;
     line-height: 40px;
     position: absolute;
     right: 0;
     text-align: center;
     top: 2px;
     transition: all 0.3s ease 0s;
     width: 60px;
}
 .search-box > span:hover {
     background: #069fd7 none repeat scroll 0 0;
     color: #fff;
     transition: all 0.3s ease 0s;
}
 .search-box {
     overflow: hidden;
     position: relative;
}
 .sidebar-title > h2 {
     border-bottom: 1px solid #ddd;
     font-size: 18px;
     margin-bottom: 20px;
     margin-top: 0;
     padding-bottom: 10px;
     text-transform: capitalize;
}
 .sidebar-post-share a {
     background: #3B53BB none repeat scroll 0 0;
     border-radius: 4px;
     color: #fff;
     display: inline-block;
     height: 40px;
     line-height: 40px;
     margin: 0 2px;
     text-align: center;
     transition: all 0.3s ease 0s;
     width: 40px;
}
 .sidebar-post-share a:hover {
     background: #069fd7 none repeat scroll 0 0;
     color: #fff;
     transition: all 0.3s ease 0s;
}
 .sidebar-post-share li {
     display: inline-block;
     list-style: outside none none;
}
 .single-post-content h2 {
     cursor: pointer;
     font-size: 18px;
     font-weight: 500;
     margin-top: 0;
     text-transform: capitalize;
     transition: all 0.3s ease 0s;
}
 .single-post-content h2:hover {
     color: #3B53BB ;
     transition: all 0.3s ease 0s;
}
 .single-post-content {
     background: #fff none repeat scroll 0 0;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
     padding: 20px;
}
 .mt_single_blog_page_area {
     background: #f6f6f6 none repeat scroll 0 0;
     padding: 70px 0;
}
 .mt_right_page_sec_title i.fa {
     margin-left: 10px;
     margin-right: 10px;
}
 .mt_page_section_area {
     background: rgba(0, 0, 0, 0) url("assets/images/blog/blog_sec_title.jpg") repeat scroll 0 0 / cover ;
     padding: 150px 0;
     position: relative;
     z-index: 1;
}
 .mt_page_section_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;
}
 .media-left img {
     border-radius: 50%;
     height: 64px;
     width: 64px;
}
 .mt_single_blog_post > h2 {
     cursor: pointer;
     font-size: 22px;
     font-weight: 600;
     letter-spacing: 1px;
     margin-bottom: 0;
     text-transform: capitalize;
     transition: all 0.5s ease 0s;
}
 .mt_single_blog_post > h2:hover {
     color: #3B53BB ;
     transition: all 0.5s ease 0s;
}
 .mt_single_blog_post div.blog_meta {
     margin-bottom: 15px;
     margin-top: 15px;
}
 .mb-30 {
     margin-bottom: 30px;
}
 .mt_left_page_sec_title > h2 {
     color: #fff;
     font-size: 22px;
     font-weight: 600;
     letter-spacing: 1px;
     margin-bottom: 0;
     margin-top: 0;
     text-transform: capitalize;
}
 .mt_single_blog_post > p {
     margin-top: 10px;
}
 blockquote {
     background: #f9f9f9 none repeat scroll 0 0;
     border-left: 3px solid #3B53BB ;
     font-size: 15px;
     margin: 0 0 15px;
     padding: 12px 20px 12px 15px;
}
 ul.widget-tags li {
     float: left;
     list-style: none;
}
 ul.widget-tags li a {
     border: 1px solid #f1f1f1;
     color: #333;
     display: block;
     font-weight: 500;
     margin-bottom: 15px;
     margin-right: 6px;
     padding: 9px 15px;
     text-transform: capitalize;
}
 .mt_blog_comment_area h2, .comment-form h2 {
     font-size: 26px;
     font-weight: 600;
     margin-bottom: 30px;
     margin-top: 0;
     text-transform: capitalize;
}
 .reply > a {
     background: #3B53BB none repeat scroll 0 0;
     border-radius: 4px;
     color: #fff;
     display: inline-block;
     font-weight: 400;
     padding: 0 10px;
     transition: all 0.3s ease 0s;
}
 .c-title > a {
     color: #3B53BB;
     font-weight: 600;
     letter-spacing: 1px;
}
 .reply > a:hover {
     background: #069fd7 none repeat scroll 0 0;
     color: #fff;
     transition: all 0.3s ease 0s;
}
 .reply > a:hover {
     color: #fff;
}
 .mt_blog_comment_area {
     border-top: 1px solid #ddd;
     padding-top: 50px;
}
 .mt_single_sidebar_widget > h2 {
     border-bottom: 1px solid #ddd;
     font-size: 18px;
     font-weight: 500;
     letter-spacing: 0;
     margin-bottom: 20px;
     padding-bottom: 10px;
     text-transform: capitalize;
}
 .mt_single_sidebar_widget input {
     border: 1px solid #ddd;
     box-shadow: none;
     color: #333 !important;
     font-weight: 400;
     height: 50px;
     padding-left: 10px;
     position: relative;
     text-transform: capitalize;
     transition: all 0.5s ease 0s;
     width: 100%;
}
 .mt_search_icon:hover .mt_search_icon i.fa {
     color: #3B53BB ;
     transition: all 0.5s ease 0s;
}
 .mt_single_sidebar_widget input:focus {
     border-color: #3B53BB ;
     transition: all 0.5s ease 0s;
}
 .mt_search_icon {
     cursor: pointer;
     padding: 5px;
     position: absolute;
     right: 35px;
     top: 80px;
     transition: all 0.5s ease 0s;
}
 .mt_single_blog_cat_list li {
     list-style: outside none none;
}
 .mt_single_blog_cat_list a {
     color: #444;
     display: block;
     font-weight: 400;
     margin-bottom: 12px;
     transition: all 0.3s ease 0s;
}
 .mt_single_blog_cat_list a:hover {
     color: #222;
     transition: all 0.3s ease 0s;
}
 span.cat_number {
     float: right;
}
 .mt_rec_post_title > h2 {
     color: #555;
     cursor: pointer;
     font-size: 15px;
     font-weight: 500;
     line-height: 20px;
     margin-bottom: 5px;
     margin-top: 0;
     text-transform: capitalize;
     transition: all 0.5s ease 0s;
}
 .mt_rec_post_title > h2:hover {
     color: #3B53BB ;
     transition: all 0.5s ease 0s;
}
 span.mt_rec_post_date {
     color: #3B53BB ;
     font-size: 14px;
}
 .mt_rec_post_thumb img {
     border-radius: 4px;
     float: left;
     height: 60px;
     width: 65px;
}
 .mt_rec_post_thumb {
     float: left;
     margin-right: 10px;
}
 .mt_single_rec_post {
     border-bottom: 1px solid #f1f1f1;
     float: left;
     margin-bottom: 20px;
     padding-bottom: 10px;
}
 .adds_info_text > h2 {
     background: #3B53BB none repeat scroll 0 0;
     color: #fff;
     cursor: pointer;
     font-family: "Poppins",sans-serif;
     font-size: 16px;
     font-weight: 500;
     letter-spacing: 0;
     margin: 0;
     opacity: 0.9;
     padding: 20px 0;
     text-align: center;
     text-transform: capitalize;
}
 .mt_search_icon i.fa {
     color: #666;
     font-size: 18px;
}
 .mt_search_icon i *:hover {
     color: #727272;
}
 .mt_right_page_sec_title {
     color: #fff;
     font-size: 16px;
     font-weight: 600;
}
 .mt_right_page_sec_title > a {
     color: #3B53BB ;
     cursor: pointer;
     font-size: 14px;
}
 .mt_left_page_sec_title {
     float: left;
}
 .mt_right_page_sec_title {
     float: right;
}
 .media-left {
     padding-right: 12px;
}
 .time-reply {
     overflow: hidden;
}
 .comment-time {
     float: left;
}
 .reply {
     float: right;
}
 .media-body .c-title {
     color: #303030;
     margin-bottom: 0;
}
 .media-body > p {
     color: #333;
     font-weight: 400;
     margin: 0;
}
 .media {
     background: #fff none repeat scroll 0 0;
     border-bottom: 1px solid #e5e5e5;
     margin-bottom: 15px;
     margin-top: 0;
     padding: 30px 15px;
}
 .comment-time span {
     color: #888;
     font-size: 13px;
     font-weight: 500;
}
 .comment-form {
     margin-top: 50px;
}
 .media.reply {
     margin-left: 30px;
}
 .media {
     clear: both;
}
 button.comment-btn {
     background: #3B53BB none repeat scroll 0 0;
     border: medium none;
     border-radius: 4px;
     box-shadow: none;
     color: #fff;
     display: inline-block;
     font-weight: 400;
     padding: 10px 25px;
     text-transform: capitalize;
}
 .post-meta.text-left {
     border-bottom: 1px dashed #ddd;
     margin-bottom: 15px;
     padding-bottom: 10px;
     text-align: left;
}
 textarea#description {
     height: 170px;
     padding: 15px ;
}
/*================================== 
15. SubScribe Area 
==================================*/
.subcribe-newslettar-area {
    background: #3B53BB;
    padding: 80px 0;
    position: relative;
}
 .subcribe-newslettar-area input{
     color: #333;
     text-transform: capitalize;
}
 .subcribe-newslettar-area h2 {
     color: #fff;
     font-size: 22px;
     letter-spacing: 1px;
     margin-bottom: 20px;
}
.subcribe-newslettar-area p {
    color: #fff;
    margin-bottom: 20px;
    margin-top: 0;
    padding: 0 30px;
    text-transform: capitalize;
    letter-spacing: 1px;
    line-height: 28px;
    font-style: italic;
    margin-bottom: 30px;
    font-size: 15px;
}
 .form-control, textarea.form-control {
     border-radius: 5px;
     box-shadow: none;
     color: #9f9f9f;
     height: 50px;
     padding-left: 22px;
     transition: all 0.15s ease 0s;
}
.input-btn {
    background: #ff6c03 none repeat scroll 0 0;
    border: 2px solid #fff;
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
    height: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease 0s;
}

 .input-btn i {
     color: #fff;
     margin-right: 5px;
}

/*================================== 
16. Start Contact Us Area 
==================================*/
 .contact-us-area {
     position: relative;
}
 .address_info_text > p {
     color: #555;
}
 .success {
     background: #3B53BB;
     border-radius: 4px;
     color: #fff;
     font-size: 16px;
     margin: 0 10px 15px;
     padding: 10px;
     text-align: center;
}
 .contact-form .form-control {
     background-color: #fff;
     background-image: none;
     border: 1px solid #ebebeb;
     border-radius: 0;
     box-shadow: none;
     color: #555;
     display: block;
     font-size: 14px;
     height: 45px;
     line-height: 1.42857;
     margin-bottom: 5px;
     padding-bottom: 6px;
     position: relative;
     text-transform: capitalize;
     transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
     width: 100%;
}
 .contact-form .form-control:focus {
     box-shadow: none;
     border-color: #3B53BB;
     transition: .3s;
}
 .contact-form form textarea.form-control {
     height: 180px;
     padding-top: 15px;
     resize: none;
     width: 100%;
}
 button.contact-btn {
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: perspective(1px) translateZ(0);
     transform: perspective(1px) translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     position: relative;
     -webkit-transition-property: color;
     transition-property: color;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
}
 button.contact-btn:before {
     content: "";
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #1562e0;
     border-radius: 4px;
     -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;
}
 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 {
     -webkit-transform: scaleX(1);
     transform: scaleX(1);
}
 button.contact-btn {
     background: #3B53BB none repeat scroll 0 0;
     border: medium none;
     border-radius: 4px;
     box-shadow: none;
     color: #fff;
     padding: 12px 20px;
     text-align: center;
     text-transform: capitalize;
     width: 185px;
     transition: .5s;
     font-size: 16px;
     font-weight: 400;
}
 button.contact-btn:hover {
     background: #0ba0cb;
     color: #fff;
     transition:.5s;
}
 span.c-icon {
     color: #343434;
     font-size: 14px;
     left: 25px;
     position: absolute;
     top: 15px;
     transition: .5s;
}
 .s-address-icon {
     color: #333;
     display: inline-block;
     float: left;
     font-size: 20px;
     line-height: 50px;
}
 .address_info_text > h2 {
     color: #333;
     font-size: 18px;
     font-weight: 700;
     letter-spacing: 1px;
     margin-bottom: 15px;
     margin-top: 0;
     text-transform: uppercase;
}
 .address_info_text {
     margin-bottom: 15px;
}
 .single-address > p {
     color: #555;
     display: inline-block;
     font-size: 15px;
     line-height: 50px;
     margin-bottom: 0;
     margin-left: 20px;
}
 .single-address {
     background: #f8f8f8 none repeat scroll 0 0;
     margin-bottom: 10px;
     padding: 0 20px;
}
/*================================== 
17. Item Promo Area 
==================================*/
.item-promo-info {
    background: #3B53BB none repeat scroll 0 0;
    color: #fff;
    padding: 50px 0;
}
.item-promo-info h1 {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0px;
    margin-top: 0;
    text-transform: capitalize;
}
.item-promo-info h6 {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: capitalize;
    margin-bottom: 0;
    margin-top: 15px;
}
a.item-get-btn {
    background: #ff6c03;
    border: 2px solid #fff;
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    text-transform: uppercase;
    width: 170px;
}
 .m-top-9 {
     margin-top: 9px;
}
/*================================== 
18. Start Map 
==================================*/

.google-map iframe {
    height: 550px !important;
    width: 100%!important;
    overflow: hidden;
    border: none;
    outline: none;
    margin-bottom: 0;
    border-style: none;
}

/*================================== 
19. footer top area 
==================================*/
 span.f-m-icon {
     margin-right: 5px;
}
 .recent-foot-post .content {
     display: block;
     margin-bottom: 25px;
}
 .footer-wdg-content ul li:hover a{
    padding-left: 10px;
    transition: .5s;
    color: #3B53BB;
}
 .recent-foot-post {
     list-style: outside none none;
     padding: 0;
}
 .recent-foot-post li {
     margin: 0 0 5px;
}
 .recent-foot-postli a {
     background: #3b3b3b none repeat scroll 0 0;
     display: block;
     overflow: hidden;
     transition: .5s;
}
 .recent-foot-post li a .content {
     display: block;
     overflow: hidden;
     padding: 8px 14px;
}
 .recent-foot-post li a .content .title {
     color: #fff;
     display: block;
     font-size: 14px;
     letter-spacing: 0;
     line-height: 20px;
     margin: 0 0 3px;
     transition: all 0.3s ease 0s;
}
 .recent-foot-post li a .content .title:hover {
     color: #3fb698;
}
 .recent-foot-post li a .content .date {
     color: #fff;
     display: block;
     letter-spacing: 0;
     line-height: 16px;
}
 .recent-foot-post li a .content .date span {
     color: #ffffff;
     margin-right: 2px;
}
 a.foo_latest_works_img img {
     display: block;
     float: left;
     height: 65px;
     margin: 0;
     overflow: hidden;
     padding: 4px;
     width: 80px;
}
 .latest_works > a {
     display: inline-block;
     float: left;
     position: relative 
}
 .footer-top-area {
     background: #15151e;
     color: #fff;
}
 .footer-wdg-title {
     font-size: 18px;
     font-weight: 600;
     letter-spacing: 0;
     margin-bottom: 25px;
     margin-top: 0;
     text-transform: capitalize;
}
 .footer-wdg-content ul li {
     list-style: none;
     display: block;
}
 .footer-wdg-content ul li a {
     color: #ddd;
     display: block;
     margin-bottom: 15px;
}
 .recent-foot-post .content a {
     margin-bottom: 5px;
}
 .footer-wdg-title {
     margin-bottom: 20px;
}
 .footer-text.text-center a {
     color: #3B53BB;
}
/*================================== 
20. Footer Bottom Area
 ==================================*/
 #footer-social li {
     list-style: none;
     display: inline-block;
     text-align: center;
}
 .footer-social-area {
     text-align: center;
}
 ul#footer-social li a {
     color: #fff;
     font-size: 14px;
     width: 40px;
     height: 40px;
     display: block;
     line-height: 40px;
     margin: 0 5px;
     border-radius: 50%;
}
.footer-logo.text-left h2 a {
    color: #3B53BB;
}
 #footer-social {
     margin-top: 15px;
}
 .text-center.copy-right-text {
     margin-top: 20px;
}
 .footer-logo.text-center > h2 {
     margin-bottom: 20px;
}
 .footer-bottom-area {
     background: #11111A;
     padding: 30px 0;
}
 .footer-bottom-area p {
     color: #f7f7f7;
     margin-bottom: 0;
}
 span.f-b-c {
     color: #3B53BB;
}

.footer-bottom-area p {
    color: #f7f7f7;
    margin-bottom: 0;
    margin-top: 20px;
}
/*================================== 
Start Preview Demo 
==================================*/
 .demo-preview {
     background: url(assets/img/bg/demo-preview-bg.jpg);
     background-size: cover;
     overflow: hidden;
     background-position: center top;
     position: relative;
     z-index: 1;
}
 .demo-preview:after{
     background: rgba(0, 0, 0, 0.7);
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     content: "";
     z-index:-1 
}
 .demo-preview-area{
    margin-top: 60px;
}
 .demo-preview {
     padding: 120px 0;
}
 .demo-title {
     padding-bottom: 30px;
}
 .demo-title > h2 {
     color: #fff;
     font-size: 65px;
     font-weight: 900;
     letter-spacing: 2px;
     text-transform: capitalize;
}
 .demo-title > p {
     color: #fff;
     font-size: 16px;
     font-weight: 400;
     letter-spacing: 0;
     padding: 0 250px;
     text-transform: capitalize;
}
 .demo-title h4 {
     color: #fff;
     font-size: 30px;
     font-weight: 600;
     margin-bottom: 15px;
     text-transform: capitalize;
}
 a.view-demo-btn {
     background: #3B53BB none repeat scroll 0 0;
     border-radius: 4px;
     color: #fff;
     display: inline-block;
     margin-top: 30px;
     padding: 12px 25px;
     text-transform: capitalize;
}
 .single-demo-preview {
     margin-bottom: 30px;
}
 .demo-preview-area {
     margin-bottom: 120px;
}
 .single-demo-preview.text-center img {
     height: 230px;
     max-width: 100%;
}
 .single-demo-preview:hover a{
    color: inherit;
}
 .single-demo-preview.text-center h2 {
     font-size: 18px;
     padding: 20px 10px;
     text-transform: capitalize;
}
 .single-demo-preview.text-center h2:hover {
     color: #3B53BB 
}
 .single-demo-preview {
     box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.08);
     margin-bottom: 30px;
     cursor: pointer;
     -webkit-transition: 1s;
     transition: 1s;
}
 .single-demo-preview:hover {
     -webkit-transition: 2s;
     transition: 2s;
     box-shadow: 0 12px 20px rgba(0, 0, 0, 0.16);
}
 .single-demo-preview a:focus h2{
    color:#222;
}

/*ADDED*/
<style>
 * {
  padding:0px;
  margin:0px;
  text-decoration:none;
}
.share {
  display:block;
  position:fixed;
  top:30%;
  right:0;
  z-index:10; /*3px*/
}
.share a {
  padding:10px;
  text-align:center;
  color:#fff;
  display:block;
  transition:all 700ms ease;
}
.share a:hover {
  background:rgba(255,255,255,.2);
}
.fa-facebook {
  background:#355088;
  border-top-right-radius:3px;
}
.fa-twitter {
  background:#55acee;
}
.fa-whatsapp2 {
  background:#4dc247;
}
.fa-linkedin {
  background:#0e76a8;
  border-bottom-right-radius:3px;
}
</style>