body {

     font-family: "Open Sans", sans-serif;

     font-size: 14px;

     line-height: 1.7;

     overflow-x: hidden;

     letter-spacing: 1.5px;

 }



 .body-wraper {

     background: #272727 url("../img/body.png") repeat scroll 0 0 / contain;

 }



 h1,

 h2,

 h3,

 h4,

 h5,

 h6 {

     margin: 0;

     padding: 0;

     text-transform: uppercase;

     font-family: 'Oswald', sans-serif;

     font-weight: 700;

     line-height: 1.6;

 }



 img {

     max-width: 100%;

 }



 a,

 a:hover,

 a:focus {

     text-decoration: none;

 }



 ul,

 li,

 a {

     margin: 0;

     padding: 0;

 }



 p {

     letter-spacing: 1px;

 }



 button:focus,

 input:focus {

     outline: none;

 }



 :-webkit-input-placeholder {

     color: inherit;

 }



 .section-padding {

     padding: 80px 0;

 }



 /*-- preloader part --*/



 #preloader {

     height: 100%;

     left: 0;

     position: fixed;

     top: 0;

     width: 100%;

     background-color: #272727;

     z-index: 99999;

 }



 #loader {

     display: block;

     position: relative;

     left: 50%;

     top: 50%;

     width: 150px;

     height: 150px;

     margin: -75px 0 0 -75px;

     border-radius: 50%;

     border: 3px solid transparent;

     border-top-color: #fff;

     -webkit-animation: spin 2s linear infinite;

     animation: spin 2s linear infinite;

 }



 #loader:before {

     content: "";

     position: absolute;

     top: 5px;

     left: 5px;

     right: 5px;

     bottom: 5px;

     border-radius: 50%;

     border: 3px solid transparent;

     border-top-color: #fff;

     -webkit-animation: spin 3s linear infinite;

     animation: spin 3s linear infinite;

 }



 #loader:after {

     content: "";

     position: absolute;

     top: 15px;

     left: 15px;

     right: 15px;

     bottom: 15px;

     border-radius: 50%;

     border: 3px solid transparent;

     border-top-color: #fff;

     -webkit-animation: spin 1.5s linear infinite;

     animation: spin 1.5s linear infinite;

 }



 @-webkit-keyframes spin {

     0% {

         -webkit-transform: rotate(0deg);

         -ms-transform: rotate(0deg);

         transform: rotate(0deg);

     }

     100% {

         -webkit-transform: rotate(360deg);

         -ms-transform: rotate(360deg);

         transform: rotate(360deg);

     }

 }



 @keyframes spin {

     0% {

         -webkit-transform: rotate(0deg);

         -ms-transform: rotate(0deg);

         transform: rotate(0deg);

     }

     100% {

         -webkit-transform: rotate(360deg);

         -ms-transform: rotate(360deg);

         transform: rotate(360deg);

     }

 }



 /***** section title *****/



 .section-title {

     left: 43px;

     position: absolute;

     top: -70px;

     z-index: 1;

 }



 .section-title h2 {

     font-size: 200px;

     font-weight: 800;

     color: #2c2c2c;

     font-family: "Open Sans", sans-serif;

     text-transform: capitalize;

     letter-spacing: 25px;

 }



 /***** section heading *****/



 .heading {

     margin-bottom: 97px;

     position: relative;

     z-index: 2;

 }



 .heading h2 {

     font-size: 36px;

     text-transform: uppercase;

     font-family: 'Oswald', sans-serif;

     font-weight: 700;

     color: #fff;

     letter-spacing: 10px;

 }



 .heading h2 span {

     color: #00a0e6;

 }



 /***** scroll up *****/



 #scrollUp {

     background-color: #4B4B4B;

     border-radius: 3px;

     bottom: 20px;

     font-size: 20px;

     padding: 5px 0;

     right: 20px;

     -webkit-transition: all 0.5s ease 0s;

     -moz-transition: all 0.5s ease 0s;

     transition: all 0.5s ease 0s;

     z-index: 9 !important;

 }



 #scrollUp a.hvr-icon-bob::before {

     animation-delay: 0s, 0.3s;

     animation-direction: normal, alternate;

     animation-duration: 0.3s, 1.5s;

     animation-fill-mode: forwards;

     animation-iteration-count: 1, infinite;

     animation-name: hvr-icon-bob-float, hvr-icon-bob;

     animation-timing-function: ease-out, ease-in-out;

     color: #fff;

     content: "";

     font-size: 22px;

     right: 12px;

     top: -16px;

     -webkit-transition: all 0.5s ease 0s;

     -moz-transition: all 0.5s ease 0s;

     transition: all 0.5s ease 0s;

 }



 /***** pages title *****/



 .pages-title-area {

     height: 45vh;

     position: relative;

 }



 .pages-title-area::before {

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 100%;

     content: "";

     background-color: rgba(43, 43, 43, 0.4);

 }



 .page-title-content {

     position: relative;

     z-index: 1;

 }



 .page-title-content h2 {

     font-size: 48px;

     color: #fff;

     font-family: 'Oswald', sans-serif;

     font-weight: 400;

     letter-spacing: 5px;

 }



 .page-title-content h2 span {

     color: #00a0e6;

 }



 .breadcrumb {

     background-color: transparent;

     padding: 20px 0 0;

     margin: 0;

 }



 .breadcrumb li a {

     color: #fff;

     font-family: 'Oswald', sans-serif;

     font-weight: 400;

     text-transform: uppercase;



 }



 .breadcrumb > .active {

     color: #00a0e6;

     letter-spacing: 2px;

     text-transform: uppercase;

     font-family: 'Oswald', sans-serif;

     font-weight: 400;

 }



 .breadcrumb > li + li::before {

     padding: 0 20px;

     color: #ccc;

     content: "|";

 }



 .page-social-link {

     display: none;

 }



 .page-social-link.link-fixed {

     display: block !important;

 }



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

    2. Header Area

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



 .header-area {

     left: 0;

     padding: 20px 0 10px;

     position: sticky;

     /* top: 0; */

     width: 100%;

     z-index: 1;

     background-color: #05a1e5;

 }



 /* logo */



 .logo {

     display: inline-block;

     margin: -5px 0px 15px;

 }



 .header-area .logo h2 {

     font-size: 24px;

     color: #f7f7f7;

     padding-left: 40px;

     position: relative;

     z-index: 999;

     transition: 0.5s;



 }



 .header-area .logo.logo-fixed h2 {

     position: fixed;

 }



 .header-area .logo h2::before {

     background: rgba(0, 0, 0, 0) url("../img/after-before/logo-before.png") repeat scroll 0 0;

     content: "";

     height: 24px;

     left: 0;

     position: absolute;

     top: 4px;

     width: 22px;

 }



 .header-area .logo h2::after {

     background: rgba(0, 0, 0, 0) url("../img/after-before/logo-after.png") repeat scroll 0 0;

     content: "";

     height: 24px;

     left: 6px;

     position: absolute;

     bottom: 6px;

     width: 22px;

 }



 /* Main Menu */



 .menu-lightbox {

     position: fixed;

     top: 0%;

     right: 0;

     left: 0%;

     bottom: 0;

     width: 100%;

     height: 100%;

     overflow: hidden;

     background-color: rgba(43, 43, 43, 0.90);

     z-index: 99;

     color: #fff;

     display: none;

 }



 .menu-table {

     display: table;

     height: 100vh;

     width: 100%;

 }



 .menu-table-cell {

     display: table-cell;

     vertical-align: middle;

 }





 .menu-table-cell nav {

     left: 40%;

     position: absolute;

     top: 50%;

     transform: translate(-50%, -50%);

 }



 .primary-menu ul li {

     position: relative;

     list-style: none;

 }



 .primary-menu ul li a::before {

     background: rgba(0, 0, 0, 0) url("../img/after-before/logo-before.png") repeat scroll 0 0;

     content: "";

     height: 24px;

     left: -25px;

     position: absolute;

     top: 0;

     width: 22px;

     opacity: 0;

     transition: all 0.5s ease 0s;

 }



 .primary-menu ul li a::after {

     background: rgba(0, 0, 0, 0) url("../img/after-before/menu-after.png") repeat scroll 0 0;

     content: "";

     height: 24px;

     right: -25px;

     position: absolute;

     bottom: 10px;

     width: 22px;

     opacity: 0;

     transition: all 0.5s ease 0s;

 }



 .primary-menu ul li a {

     color: #fff;

     display: block;

     font-family: "Oswald", sans-serif;

     font-size: 24px;

     font-weight: 700;

     letter-spacing: 2.5px;

     padding: 0px 25px 10px;

     text-transform: uppercase;

     transition: all 0.5s ease 0s;

     position: relative;

     display: inline-block;

     opacity: 1;

     transform: translate(-15px, 30px);

 }



 .menu-lightbox.menu-popup .primary-menu li a {

     opacity: 1;

     transform: translate(0px, 0px);

 }



 .primary-menu ul li a:hover,

 .primary-menu ul li.active a {

     color: #363e89;

 }



 .primary-menu ul li.active a::before,

 .primary-menu ul li.active a::after {

     opacity: 1 !important;

 }



 .primary-menu ul li a:hover::before,

 .primary-menu ul li a:hover::after {

     opacity: 1 !important;

 }



 .primary-menu ul li ul.drop-menu {

     position: absolute;

     left: 200px;

     top: 0;

     transition: all 0.5s ease 0s;

     visibility: hidden;

     z-index: 999;

     opacity: 0;

     width: 198px;

 }



 .primary-menu ul li:hover .drop-menu {

     opacity: 1;

     visibility: visible;

 }



 /* Menu button open */



 .menu-toggle {

     display: block;

     float: right;

     position: relative;

     background-color: #272727;

     width: 50px;

     height: 50px;

 }



 .menu-toggle span {

     background-color: #00a0e6;

     display: block;

     height: 3px;

     position: absolute;

     right: 10px;

     transition: all 0.6s ease 0s;

     width: 30px;

     top: 40%;

     transform: translate(0px, -50%);

 }



 .menu-toggle span::before {

     background-color: #272727;

     content: "";

     display: block;

     height: 12px;

     left: -5px;

     position: absolute;

     transform: rotate(44deg);

     width: 9px;

 }



 .menu-toggle span.line2 {

     right: 10px;

     top: 50%;

     transform: translate(0px, -50%);

     width: 20px;

 }



 .menu-toggle span.line3 {

     width: 25px;

     top: 60%;

     transform: translate(0px, -50%);

 }











 /* Menu button close */



 .menu-btn-close {

     position: relative;

     float: right;

     display: block;

     width: 24px;

     height: 24px;

     margin: 1px 0 0 0;

     top: 100px;

     color: #fff;

     right: 10px;

 }



 .menu-btn-close:hover,

 .menu-btn-close:focus {

     color: #00a0e6;

 }



 .menu-btn-close span {

     display: block;

     position: absolute;

     width: 100%;

     height: 0px;

     top: 40%;

     color: inherit;

     border: 1px solid;

     -webkit-transform: translateZ(0);

     -moz-transform: translateZ(0);

     transform: translateZ(0);

     -webkit-transition: all 0.5s;

     -moz-transition: all 0.5s;

     transition: all 0.5s;

 }



 .menu-btn-close .line1 {

     transform: translateY(-6px);

 }



 .menu-btn-close .line2 {

     transform: translateY(6px);

 }



 .menu-btn-close.loaded .line1 {

     -webkit-transform: rotate(45deg);

     -moz-transform: rotate(45deg);

     transform: rotate(45deg);

 }



 .menu-btn-close.loaded .line2 {

     -webkit-transform: rotate(-45deg);

     -moz-transform: rotate(-45deg);

     transform: rotate(-45deg);

 }



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

    3. Slider Area

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



 .slider-area {

     background: rgba(0, 0, 0, 0) url("../img/slider/01.jpg") no-repeat scroll center center / cover;

     height: 100vh;

     position: relative;

     overflow: hidden;
     
     margin-top: 150px;

 }



 .slider-area::before {

     position: absolute;

     top: 0;

     left: 0;

     content: "";

     width: 100%;

     height: 100%;

     background-color: rgb(0 0 0 / 76%);

 }



 .first-letter {

     display: inline-block;

     left: 50%;

     position: absolute;

     top: 50%;

     transform: translate(-50%, -50%);

     font-family: inherit;

     opacity: .1;

     text-align: center;

 }



 .contact {

     font-family: 'Raleway', sans-serif;

     font-size: 18px;

     color: #ffffff;

     letter-spacing: 5.7px;

     left: 80%;

     position: absolute;

     bottom: 20%;

     transform: rotate(-360deg);

    z-index: 5;

    font-weight: 600;

 }



 .contact::after {

     /*border: 1px solid #777;*/

     content: "";

     height: 1px;

     position: absolute;

     right: -40%;

     top: 50%;

     width: 100px;

 }



 /* single slider */



 .slider-table {

     display: table;

     width: 100%;

     height: 45vh;

 }



 .slider-table-cell {

     display: table-cell;

     vertical-align: middle;

 }



 .slider-info h2,

 .slider-info h3 {

     color: #f7f7f7;

     font-size: 50px;

     letter-spacing: 10px;

 }



 .slider-info h2 span,

 .slider-info h3 span {

     color: #00a0e6;

 }



 .slider-wraper .owl-nav div {

     color: #fff;

     font-size: 22px;

     position: absolute;

     top: 50%;

     transform: translateY(0, -50%);

     transition: 0.5s;

 }



 .slider-wraper .owl-nav div:hover {

     color: #00a0e6;

 }



 .slider-wraper div.owl-prev {

     opacity: 0;

     left: -3%;

 }



 .slider-wraper div.owl-next {

     left: auto;

     opacity: 0;

     right: -3%;

 }



 .slider-area:hover .slider-wraper div.owl-prev {

     left: 1%;

     opacity: 1;

 }



 .slider-area:hover .slider-wraper div.owl-next {

     right: 1%;

     opacity: 1;

 }



 /* /.single slider */



 .details {

     position: absolute;

     left: 50%;

     bottom: 30%;

     transform: translate(-50%, -50%);

     color: #fff;

     z-index: 5;

     width: 100%;

     text-align: center;

 }



 .details span {

     font-size: 12px;

     letter-spacing: 3px;

     margin-right: 60px;

     text-transform: uppercase;

 }



 .details span i.fa {

     margin-right: 10px;

 }



 .header-link {

     position: relative;

 }



 .social-link {

     bottom: 45%;

     margin-bottom: 40px;

     position: absolute;

     right: 0;

     transition: all 0.5s ease 0s;

     z-index: 99;
     
     display: none;

 }



 .link-fixed {

     bottom: 5%;

     position: fixed;

     right: 12%;

 }



 .social-link i.fa {

     width: 40px;

     height: 40px;

     line-height: 40px;

     color: #fff;

     border: 1px solid #fff;

     text-align: center;

     margin-right: 5px;

     transition: 0.5s;

     font-size: 16px;

 }



 .social-link i.fa:hover {

     color: #00a0e6;

     border-color: #00a0e6;

 }



 .slider-indicator.hvr-icon-hang {

     padding: 0;

 }



 .slider-indicator {

     border: 1px solid #eee;

     border-radius: 50px;

     bottom: 13%;

     color: #fff;

     cursor: pointer;

     height: 30px;

     left: 0;

     margin: 0 auto;

     position: absolute;

     right: 0;

     width: 20px;

     z-index: 5;

 }



 .slider-line {

     background-color: #fff;

     bottom: 0;

     height: 70px;

     left: 0;

     margin: auto;

     position: absolute;

     right: 0;

     width: 1px;

 }



 .hvr-icon-hang::before {

     animation-delay: 0s, 0.3s;

     animation-direction: normal, alternate;

     animation-duration: 0.3s, 1.5s;

     animation-fill-mode: forwards;

     animation-iteration-count: 1, infinite;

     animation-name: hvr-icon-hang-sink, hvr-icon-hang;

     animation-timing-function: ease-out, ease-in-out;

     content: "|";

     font-size: 10px;

     right: 6px;

 }



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

    4. About & Service Area

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



 .about-area {

     position: relative;

     padding-top: 60px;

 }



 .about-area::before {

     background: rgba(0, 0, 0, 0) url("../img/after-before/about-area-before.png") repeat scroll 0 0;

     content: "";

     height: 86px;

     left: 0;

     position: absolute;

     top: 45%;

     width: 86px;

 }



 .about-area::after {

     background: rgba(0, 0, 0, 0) url("../img/after-before/about-area-after.png") repeat scroll 0 0;

     content: "";

     height: 68px;

     right: 1%;

     position: absolute;

     top: 45%;

     width: 58px;

 }



 .exprience {

     margin-bottom: 93px;

 }



 .about-img {

     box-shadow: 10px 10px 0 #303030;

 }



 .mobile-ver {

     display: none;

 }



 .about-title-wraper {

     

     position: relative;

     /*z-index: 3;*/

 }



 .about-title-wraper h2 {

     color: #ffffff;

     font-size: 30px;

     letter-spacing: 1px;

 }



 .about-title-wraper p {

     color: #ffffff;

     font-weight: 700;

     padding-left: 60px;

     padding-right: 191px;

 }



 .about-title::before {

     background-color: #00a0e6;

     bottom: 0;

     content: "";

     height: 75px;

     left: -18px;

     position: absolute;

     width: 100px;

     z-index: -1;

 }



 .about-page {

     background: rgba(0, 0, 0, 0) url("../img/background/about-title-bg.jpg") no-repeat scroll center center / cover;

 }



 .about-top {

     margin-bottom: 180px;

 }



 .about-info-img {

     padding-left: 95px;

 }



 .about-details {

     width: 470px;

     padding: 80px 45px;

     background-color: #434343;

     position: absolute;

     top: 130px;

     right: 16%;

     z-index: 1;

 }



 .about-details h3 {

     color: #ffffff;

     font-size: 24px;

     font-family: "Open Sans", sans-serif;

     font-weight: 600;

     margin-bottom: 10px;

     text-transform: inherit;

 }



 .about-details h3 span {

     color: #00a0e6;

 }



 .about-details p {

     color: #fff;

 }



 .about-middle {

     overflow: hidden;

     margin-bottom: 110px;

 }



 .single-about {

     position: relative;

 }



 .single-about::before {

     position: relative;

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 100%;

     background-color: rgba(66, 66, 66, 0.9);

     content: "";

     transform: scale(0);

     transition: 0.5s;

 }



 .about-overflow {

     position: absolute;

     text-align: center;

     top: 50%;

     left: 50%;

     width: 70%;

     transform: translate(-50%, -50%);

     opacity: 0;

     transition: 0.5s;

 }



 .about-overflow img {

     margin-bottom: 10px;

 }



 .about-overflow p {

     color: #fff;

 }



 .single-about:hover.single-about::before {

     transform: scale(1);

 }



 .single-about:hover .about-overflow {

     opacity: 1;

 }



 .about-bottom {

     overflow: hidden;

 }



 .about-bottom-left {

     padding: 37px 75px 95px 151px;

     background: url("../img/about/dot-bg.png");

     color: #fff;

     position: relative;

 }



 .about-bottom-left::before {

     position: absolute;

     top: 25px;

     left: 0;

     width: 150px;

     border: 1px solid #00a0e6;

     content: "";

 }



 .about-bottom-right {

     position: relative;

 }



 .about-bottom-right::before {

     position: absolute;

     width: 100%;

     height: 100%;

     top: 0;

     left: 0;

     background-color: rgba(52, 54, 55, 0.8);

     content: "";

 }



 .about-bottom-right img {

     width: 100%;

 }



 /* service */



 .service-dec {

     position: relative;

     margin-top: 60px;

 }



 .service-ovely-img {

     position: absolute;

     right: 0;

 }



 .service-ovely-img::before {

     background-color: rgba(43, 43, 43, 0.8);

     content: "";

     height: 100%;

     position: absolute;

     right: 0;

     top: 0;

     width: 100%;

 }



 .service-img {

     height: 330px;

     width: 330px;

     position: absolute;

     right: 0;

     top: 60px;

 }



 .service-img::before {

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 100%;

     background-color: rgba(43, 43, 43, 0.8);

     content: "";

 }



 .service-img img {

     width: 100%;

     height: 100%;

 }



 .short-dec {

     padding: 140px 0 60px 45px;

     position: relative;

 }



 .short-dec::before {

     background: rgba(0, 0, 0, 0) url("../img/after-before/about-before.png") repeat scroll 0 0;

     content: "";

     height: 116px;

     left: 35%;

     position: absolute;

     top: -15%;

     width: 116px;

 }



 .short-title {

     margin-bottom: 20px;

 }



 .short-title > h3 {

     font-size: 24px;

     color: #fff;

     font-weight: 600;

     font-family: "Open Sans", sans-serif;

 }



 .short-title > h3 span {

     color: #00a0e6;

 }



 .short-dec > p {

     color: #fff;

     padding-right: 80px;

 }



 .service {

     background: rgba(0, 0, 0, 0) url("../img/about/dot-bg.png") repeat scroll 0 0;

     bottom: -170px;

     padding: 60px 0 60px 65px;

     position: absolute;

     width: 100%;

 }



 .single-service {

     padding-top: 20px;

 }



 .single-service-over {

     position: relative;

 }



 .single-service img {

     margin-bottom: 20px;

 }



 .single-service h2 {

     color: #303030;

     font-family: "Open Sans", sans-serif;

     font-size: 72px;

     font-weight: 700;

     left: 25%;

     position: absolute;

     top: -16px;

 }



 .single-service h3 {

     color: #fff;

     font-size: 18px;

     letter-spacing: 2px;

     font-weight: 400;

 }



 .service-middle h3 {

     color: #00a0e6 !important;

 }



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

    5. Project Area

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



 .project-area {

     position: relative;

 }



 .single-project {

     position: relative;

     /*width: 25%;*/

     float: left;

     display: block;

 }



 .single-project img {

     width: 100%;

 }



 .project-wraper {

     position: relative;

     z-index: 5;

 }



 .project-title {

     left: 0;

     top: 40px;

 }



 /*.single-project:first-child,

 .single-project:nth-child(4) {

     width: 50%;

 }*/



 .single-project:hover.single-project img {

     -webkit-filter: blur(5px);

     filter: blur(5px);

 }



 .project-overly {

     height: 100%;

     left: 0;

     padding-left: 30px;

     padding-top: 50px;

     position: absolute;

     top: 0;

     width: 100%;

 }



 .project-overly a h3 {

     color: #fff;

     font-size: 18px;

     font-weight: 400;

     letter-spacing: 5px;

     margin-bottom: 10px;

     padding-bottom: 10px;

     position: relative;

 }



 .project-overly a h3::before {

     position: absolute;

     bottom: 0;

     left: 0;

     width: 4%;

     background-color: #373737;

     content: "";

     height: 2px;

     opacity: 0;

     transition: all 0.5s ease 0s;

 }



 .single-project:hover .project-overly a h3::before {

     opacity: 1;

 }



 .project-overly p {

     color: #fff;

     opacity: 0;

     transition: all 0.5s ease 0s;

     padding-right: 5px;

 }



 .single-project:hover .project-overly p {

     opacity: 1;

 }



 .project-page {

     background: rgba(0, 0, 0, 0) url("../img/background/project-title-bg.jpg") no-repeat scroll center center / cover;

 }



 .project-list-area {

     margin: 40px 0 0;

 }



 /*isotope menu*/



 .iso-nav {

     margin-bottom: 80px;

     background-color: #383838;

     padding: 30px 40px;

     position: relative;

 }



 .iso-nav::before {

     position: absolute;

     top: 0;

     right: -10%;

     width: 10%;

     height: 100%;

     content: "";

     background-color: #383838;

 }



 .iso-nav ul li {

     color: #fff;

     cursor: pointer;

     display: inline-block;

     text-transform: capitalize;

     transition: all 0.5s ease 0s;

 }



 .iso-nav ul li:hover {

     color: #00a0e6;

 }



 .iso-nav ul li img {

     width: 15px;

     margin: 0 10px;

 }



 .single-project-list {

     width: 100% !important;

     margin-bottom: 30px;

 }



 .single-project-list .project-overly a h3 {

     opacity: 0;

     transition: 0.5s;

 }



 .single-project-list:hover.single-project-list .project-overly a h3 {

     opacity: 1;

 }



 .single-project-list .project-overly p {

     padding-right: 45px;

 }



 .load-btn a {

     padding: 15px 25px;

     background-color: #00a0e6;

     color: #fff;

     margin: 30px 0 0;

     display: inline-block;

     text-transform: capitalize;

     transition: 0.5s;

 }



 .load-btn a i.fa {

     margin-right: 10px;

 }



 .load-btn a:hover {

     background-color: #2B2B2B;

 }



 .iso-nav ul li.project-active {

     color: #00a0e6;

 }



 /***** single project *****/



 .single-project-area {

     position: relative;

     padding-top: 80px;

 }



 .single-project-area .project-title {

     top: 0;

 }



 .project-details-page {

     background: rgba(0, 0, 0, 0) url("../img/background/project-details-bg.jpg") no-repeat scroll center center / cover;

 }



 .single-project-slider .owl-nav {

     display: flex;

     position: absolute;

     left: 0;

     bottom: 0;

 }



 .single-project-slider .owl-nav .owl-prev {

     border-right: 1px solid #F1F1F1;

 }



 .single-project-slider .owl-nav div {

     padding: 5px 25px;

     color: #272727;

     font-size: 18px;

     background-color: #fff;

     transition: 0.5s;

 }



 .single-project-slider .owl-nav div:hover {

     color: #00a0e6;

 }



 .progress-project {

     margin-top: 40px;

     overflow: hidden;

 }



 .progress-details {

     width: 150px;

     float: left;

     margin-right: 50px;

 }



 .progress-details h2 {

     font-size: 18px;

     color: #00a0e6;



     margin-bottom: 10px;

 }



 .progress-details h3 {

     font-size: 18px;

     color: #fff;

     font-weight: 300;

     text-transform: inherit;



 }



 .single-project-details p {

     color: #fff;

 }



 .single-project-details h2 {

     margin: 70px 0 30px;

     font-weight: 400;

     font-size: 30px;

     color: #fff;

     letter-spacing: 5px;

 }



 /*gutter*/



.project-wraper.gutter .single-project {

    padding: 10px;

}





/*project-wraper 2 grid*/



.project-wraper.col-2 .single-project {

    width: 49.99%;

}





/*project-wraper 3 grid*/



.project-wraper.col-3 .single-project {

    width: 33.3333333%;

}



/*project-wraper 4 grid*/



.project-wraper.col-4 .single-project {

    width: 24.98%;

}



/*project-wraper 5 grid*/



.project-wraper.col-5 .single-project {

    width: 19.99%;

}



/*project-wraper 6 grid*/



.project-wraper.col-6 .single-project {

    width: 16.666666667%;

}



 .share {

     margin-top: 70px;

 }



 .share span {

     font-size: 18px;

     color: #fff;

     margin-right: 30px;

 }



 .share a i.fa {

     color: #fff;

     margin-right: 20px;

     transition: 0.5s;

     font-size: 18px;

 }



 .share a i.fa:hover {

     color: #00a0e6;

 }



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

    6. Video Area

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



 .video-area {

     text-align: center;

     position: relative;

 }



 .video-title {

     right: 0;

     top: -84px;

     left: auto;

 }



 .overflow-box {

     background-color: #2c2c2c;

     color: #383838;

     height: 150px;

     padding-left: 30px;

     padding-top: 85px;

     position: absolute;

     text-align: left;

     top: 40%;

     width: 50%;

 }



 .overflow-box > h3 {

     font-size: 30px;

     font-weight: 400;

     letter-spacing: 10px;

 }



 .overflow-box::before {

     background: rgba(0, 0, 0, 0) url("../img/after-before/overflow-before.png") repeat scroll 0 0;

     content: "";

     height: 58px;

     left: 30px;

     position: absolute;

     top: -20px;

     width: 58px;

 }



 .video-box {

     width: 660px;

     height: 450px;

     background-color: #fff;

     padding: 24px 45px;

     border-radius: 10px;

     position: relative;

     z-index: 5;

     margin-top: 52px;

     box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);

 }



 .video-box::before {

     position: absolute;

     width: 150px;

     border: 1px solid #00a0e6;

     content: "";

     top: 50%;

     right: -10%;

 }



 .video-box img {

     width: 100%;

     height: 100%;

 }



 .video-btn {

     left: 50%;

     margin: auto;

     position: absolute;

     top: 50%;

     transform: translate(-50%, -50%);

     cursor: pointer;

 }



 .video-btn i.fa {

     background-color: #fff;

     border-radius: 50%;

     height: 70px;

     line-height: 70px;

     width: 70px;

     font-size: 25px;

     color: #272727;

 }



 .video-btn.hvr-ripple-out::before {

     border-color: #fff;

     border-radius: 50%;

 }



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

    7. Team Area

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



 .team-area {

     position: relative;

 }



 .team-title {

     left: 0;

     text-align: center;

     top: 18px;

     width: 100%;

 }



 .single-member {

     background-image: url("../img/member-bg.png");

     background-position: right bottom;

     background-repeat: no-repeat;

     overflow: hidden;

     position: relative;

     z-index: 2;

 }



 .member-img {

     width: 40%;

     float: left;

 }



 .member-img img {

     border-radius: 50%;

 }



 .member-info {

     float: right;

     padding: 10px 0 0 20px;

     width: 60%;

 }



 .member-info h2 {

     color: #00a0e6;

     font-weight: 700;

     font-family: "Open Sans", sans-serif;

     letter-spacing: 3.5px;

     font-size: 30px;

     text-transform: capitalize;

     padding-bottom: 3px;

 }



 .member-info h3 {

     color: #fff;

     font-size: 24px;

     font-family: "Open Sans", sans-serif;

     letter-spacing: 3.5px;

     font-weight: 400;

     text-transform: capitalize;

 }



 .member-info span {

     font-size: 12px;

     font-weight: 500;

     color: #fff;

     padding-bottom: 10px;

     display: block;

 }



 .member-info p {

     color: #fff;

     padding-bottom: 10px;

 }



 .member-social-link a i.fa {

     color: #fff;

     padding-right: 20px;

     transition: 0.5s;

 }



 .member-social-link a i.fa:hover {

     color: #00a0e6;

 }



 .team-wraper .owl-nav {

     display: flex;

     position: absolute;

     right: 11%;

     top: -30%;

     box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);

 }



 .team-wraper .owl-nav div {

     padding: 5px 22px;

     color: #fff;

     font-size: 18px;

     background-color: #272727;

     transition: 0.5s;

 }



 .team-wraper .owl-nav div:hover {

     color: #00a0e6 !important;

 }



 .team-wraper .owl-nav .owl-prev {

     border-right: 1px solid #fff;

 }



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

    8. Brand Area

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



 .brand-area {

     background-color: #282828;

     position: relative;

     margin-top: 260px;

 }



 .brand-area::before {

     top: -233px;

     content: "";

     height: 234px;

     left: 0;

     position: absolute;

     width: 100%;

     background: url("../img/section-before.png");

 }



 .brand-area::after {

     background-color: #00a0e6;

     top: -150%;

     content: "";

     height: 100px;

     right: 50%;

     position: absolute;

     width: 1px;

 }



 .before-none {

     background-color: transparent !important;

     margin-top: 125px;

 }



 .before-none::before,

 .before-none::after {

     display: none;

 }



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

    9. Contact Area

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



 .contact-area {

     background-color: #282828;

     position: relative;

     padding: 80px 0 0;

 }



 .contact-page-area {

     padding-top: 200px;

 }



 .contact-title {

     left: 0;

     top: -13px;

 }



 .contact-title h2 {

     line-height: 1;

 }



 .contact-heading {

     margin-bottom: 40px;

 }



 .contact-form {

     background-color: #2b2b2b;

     padding: 68px 50px;

     position: relative;

     width: 100%;

     z-index: 1;

     overflow: hidden;

 }



 .contact-form input,

 .contact-form textarea {

     border: 1px solid #454545;

     background-color: #323232;

     color: #747474;

     font-size: 12px;

     letter-spacing: 5px;

     margin-bottom: 20px;

 }



 .contact-form textarea {

     height: 145px;

 }



 .form-control:focus {

     border-color: transparent;

     box-shadow: none;

 }



 .contact-form button {

     padding: 10px 40px;

     background-color: #00a0e6;

     letter-spacing: 5px;

     color: #fff;

     border: 0;

     border-radius: 5px;

     font-size: 14px;

     margin-top: 5px;

     transition: 0.5s;

 }



 .contact-form button:hover {

     background-color: #282828;

 }



 .contact-form button.sub-btn {

     width: 100%;

     background-color: #826e58;

 }



 .contact-form button.sub-btn:hover {

     background-color: #323232;

 }



 .map {

     background: rgba(0, 0, 0, 0) url("../img/map.png") no-repeat scroll center center / contain;

     height: 390px;

     margin-top: 70px;

     position: relative;

     z-index: 1;

 }



 .map::before {

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 100%;

     content: "";

     background-color: rgba(41, 41, 41, 0.7);

 }



 .contact-title-page {

     background: rgba(0, 0, 0, 0) url("../img/background/contact-bg.jpg") no-repeat scroll center center / cover;

 }



 .google-map-area {

     position: relative;

     margin-bottom: 65px;

     z-index: 9;

 }



 #map {

     width: 100%;

     height: 100vh;

 }



 .address {

     position: absolute;

     top: 17%;

     right: 8%;

     z-index: 9;

     width: 470px;

     height: 430px;

     background-color: rgba(43, 43, 43, 0.8);

     padding: 45px 60px;

 }



 .address .section-title {

     width: 100%;

     left: 0;

     top: 8%;

 }



 .address .section-title h2 {

     font-size: 60px;

     color: #313131;

     font-family: 'Oswald', sans-serif;

     text-align: center;

     text-transform: uppercase;

 }



 .address .heading {

     margin-bottom: 45px;

 }



 .address .heading h2 {

     font-size: 18px;

     letter-spacing: 1px;

 }



 .address-info ul li {

     color: #fff;

     position: relative;

     padding-left: 40px;

     margin-bottom: 35px;

     list-style: none;

 }



 .address-info ul li i.fa {

     color: #b89977;

     position: absolute;

     left: 0;

     top: 6px;

 }



 .address .share {

     margin-top: 0;

 }



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

    10. Blog Area

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



 .blog-page {

     background: rgba(0, 0, 0, 0) url("../img/background/blog-title-bg.jpg") no-repeat scroll center center / cover;

 }



 .blog-grid-page {

     background: rgba(0, 0, 0, 0) url("../img/background/blog-grid-bg.jpg") no-repeat scroll center center / cover;

 }



 .blog-area {

     position: relative;

 }



 .blog-title {

     top: 0;

     left: 0;

 }



 .blog-list {

     position: relative;

     /* z-index: 1; */

 }



 .single-blog-post {

     margin-top: 70px;

 }



 .single-blog-post a h2 {

     color: #fff;

     font-size: 30px;

     letter-spacing: 5px;

     font-weight: 400;

     padding-right: 200px;

     margin-bottom: 50px;

 }



 .grid-post a h2 {

     padding: 0;

 }



 .post-info {

     display: flex;

     padding: 20px 0;

     border-bottom: 2px solid #383838;

     margin-bottom: 40px;

 }



 .post-video,

 .post-img {

     position: relative;

     display: block;

 }



 .post-video::before,

 .post-img::before {

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 100%;

     content: "";

     background-color: rgba(43, 43, 43, 0.90);

     transform: scaleX(0);

     transition: all 0.5s ease 0s;

 }



 .post-video::after,

 .post-img::after {

     background-color: #C5A57F;

     border-radius: 50%;

     bottom: 0;

     color: #2B1D1C;

     content: "\f04b";

     font-family: fontawesome;

     font-size: 22px;

     height: 60px;

     left: 0;

     line-height: 60px;

     margin: auto;

     position: absolute;

     right: 0;

     text-align: center;

     top: 0;

     transform: scale(3);

     transition: all 0.5s ease 0s;

     width: 60px;

     opacity: 0;

 }



 .post-img::after {

     content: "";

 }



 .single-blog-post:hover .post-img::before,

 .single-blog-post:hover .post-img::after,

 .single-blog-post:hover .post-video::before,

 .single-blog-post:hover .post-video::after {

     transform: scale(1);

     opacity: 1;

 }



 .author-info {

     width: 60%;

 }



 .author-info img {

     border-radius: 50%;

     width: 60px;

     height: 60px;

     border: 2px solid #4f4f4f;

     margin-right: 15px;

 }



 .author-info a h3 {

     color: #fff;

     display: inline-block;

     font-size: 14px;

     font-family: "Open Sans", sans-serif;

 }



 .post-date {

     width: 40%;

     letter-spacing: 3px;

     padding: 15px 0;

 }



 .single-blog-post p a,

 .post-date a {

     color: #00a0e6;

 }



 .single-blog-post p {

     color: #fff;

 }



 .blog-comment-wraper {

     padding: 30px;

     margin-top: 30px;

     float: left;

 }



 .blog-comment-wraper h3 {

     border-bottom: 1px solid #fff;

     color: #fff;

     font-size: 22px;

     font-weight: 600;

     margin-bottom: 40px;

     padding: 0 0 10px;

 }



 .comment-author {

     float: left;

     width: 15%;

 }



 .comment-author img {

     border-radius: 50%;

     height: auto;

     width: 80px;

 }



 .comment-author h4 {

     color: #272727;

     font-size: 14px;

     padding: 10px 0 0;

 }



 .reply-commnet-content .comment-author h4 {

     color: #fff;

 }



 .comment-content {

     float: right;

     margin: 0 0 30px;

     padding: 0 20px;

     width: 85%;

 }



 .comment-content i.fa {

     color: #fff;

 }



 .comment-content p {

     margin: 15px 0;

     color: #fff;

 }



 .comment-content a {

     color: #fff;

     float: right;

     font-weight: 700;

 }



 .comment-content a i.fa {

     margin-left: 5px;

     color: #fff;

 }



 .reply-commnet-content {

     overflow: hidden;

     padding-left: 110px;

     width: 100%;

 }



 .comment-content span {

     font-size: 16px;

     font-weight: 600;

     margin-left: 5px;

     margin-right: 15px;

     text-transform: capitalize;

     color: #fff;

 }



 h3.comment-heading {

     color: #4c4c4c;

     display: inline-block;

     font-size: 30px;

     font-weight: 400;

     margin: 40px 0;

     text-transform: uppercase;

 }



 .comment-form {

     float: left;

 }



 .comment-input-form {

     float: left;

     overflow: hidden;

     padding-right: 20px;

     width: 50%;

 }



 .comment-input-form:nth-child(2) {

     padding-right: 0;

 }



 .comment-input-form input {

     background-color: #323232;

     border: 0 none;

     color: #747474;

     height: 50px;

     padding: 0 20px;

     width: 100%;

     letter-spacing: 5px;

 }



 .comment-textarea {

     float: left;

     width: 100%;

 }



 .comment-textarea textarea {

     background-color: #323232;

     border: 0 none;

     color: #747474;

     font-weight: 400;

     height: 200px;

     letter-spacing: 5px;

     margin: 20px 0 0;

     padding: 20px;

     width: 100%;

 }



 .post-button {

     background-color: #00a0e6;

     border: 0;

     color: #fff;

     float: right;

     margin-top: 30px;

     padding: 10px;

     text-transform: uppercase;

     transition: 0.5s;

 }



 .post-button:hover {

     background-color: #383838;

 }



 /***** sidebar *****/



 .sidebar {

     margin-top: 210px;

     float: left;

 }



 .single-widget {

     margin: 0 0 60px;

 }



 .single-widget:last-child {

     margin: 0;

 }



 .single-widget h3 {

     color: #fff;

     letter-spacing: 3px;

     position: relative;

     padding: 0 0 20px;

     margin: 0 0 30px;

     font-size: 18px;

 }



 .single-widget span {

     padding: 10px 20px;

     color: #fff;

     background-color: #383838;

     display: inline-block;

     margin-bottom: 5px;

     transition: 0.5s;

     text-transform: capitalize;

 }



 .single-widget span:hover {

     background-color: #00a0e6;

 }



 .single-widget h3::before {

     position: absolute;

     bottom: 0;

     left: 0;

     width: 20%;

     border: 1px solid #00a0e6;

     content: "";

 }



 .single-widget img {

     width: 118px;

     height: auto;

     border-radius: 50%;

     margin: 0 0 40px;

 }



 .single-widget p {

     color: #fff;

 }



 .recent-post {

     display: flex;

     margin-bottom: 10px;

 }



 .recent-post-img img {

     border-radius: 0;

     margin: 0;

 }



 .recent-post-info {

     color: #00a0e6;

     letter-spacing: 3px;

     padding-left: 20px;

     padding-top: 10px;

 }



 .recent-post-info h4 {

     color: #fff;

     font-size: 16px;

     font-weight: 400;

     padding-bottom: 15px;

     text-transform: capitalize;

     letter-spacing: normal;

 }



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

    11. Footer Area

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



 .footer-area {

     padding: 25px 0;

     background-color: #282828;

 }



 .bg-trans {

     background-color: transparent !important;

 }



 .copy-right-text {

     color: #fff;

     letter-spacing: 3.5px;

 }


/*<!-- sicky social icon -->*/

.sticky-container{
    padding:0px;
    margin:0px;
    position:fixed;
    right:-170px;
    top:230px;
    width:210px;
    z-index: 1100;
}
.sticky li{
    list-style-type:none;
    background-color:#fff;
    color:#efefef;
    height:43px;
    padding:0px;
    margin:0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor:pointer;
}
.sticky li:hover{
    margin-left:-115px;
}
.sticky li img{
    float:left;
    margin:5px 4px;
    margin-right:5px;
}
.sticky li p{
    padding-top:5px;
    margin:0px;
    line-height:16px;
    font-size:11px;
}
.sticky li p a{
    text-decoration:none;
    color:#2C3539;
}
.sticky li p a:hover{
    text-decoration:underline;
}