/**
*
* ---------------------------------------------------------------------------
*
* Template Name : Morden | personal project-wraper html5 responsive template
* Template URL : http://demo.iamhafiz.me/morden/ 
* Author : home2globe/cmsoft
* Version : 1.0
*
* --------------------------------------------------------------------------- 
*
*/

 /*  ==================================
*       CSS Table Contents
*   ==================================
*	1. Global Area
*	2. Header Area
*	3. Slider Area
*	4. About & Service Area
*	5. Project Area
*   6. Video Area
*	7. Team Area
*	8. Brand Area
*	9. Contact Area
*	10. Blog Area
*	11. Footer Area
*	================================== */

 /*  ================================
    1. Global Area
    ================================ */

 body {
     font-family: "Roboto Slab", 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: 'Times New Roman', 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: "Times New Roman", 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: 'Times New Roman', sans-serif;
     font-weight: 700;
     color: #fff;
     letter-spacing: 10px;
 }

 .heading h2 span {
     color: #2ec8bb;
 }

 /***** 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: 100vh;
     position: relative;
 }

 .pages-title-area::before {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     content: "";
     background-color: rgba(43, 43, 43, 0.85);
 }

 .page-title-content {
     position: relative;
     z-index: 1;
 }

 .page-title-content h2 {
     font-size: 48px;
     color: #fff;
     font-family: 'Times New Roman', sans-serif;
     font-weight: 400;
     letter-spacing: 5px;
 }

 .page-title-content h2 span {
     color: #2ec8bb;
 }

 .breadcrumb {
     background-color: transparent;
     padding: 20px 0 0;
     margin: 0;
 }

 .breadcrumb li a {
     color: #fff;
     font-family: 'Times New Roman', sans-serif;
     font-weight: 400;
     text-transform: uppercase;

 }

 .breadcrumb > .active {
     color: #2ec8bb;
     letter-spacing: 2px;
     text-transform: uppercase;
     font-family: 'Times New Roman', 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: 86px 0 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 9;
 }

 /* logo */

 .logo {
     display: inline-block;
     margin: 10px 0;
 }

 .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: "Times New Roman", sans-serif;
     font-size: 24px;
     font-weight: 700;
     letter-spacing: 2.5px;
     padding: 0 0 10px;
     text-transform: uppercase;
     transition: all 0.5s ease 0s;
     position: relative;
     display: inline-block;
     opacity: 1;
     transform: translate(0px, 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: #2ec8bb;
 }

 .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: #2ec8bb;
     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: #2ec8bb;
 }

 .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;
 }

 .slider-area::before {
     position: absolute;
     top: 0;
     left: 0;
     content: "";
     width: 100%;
     height: 100%;
     background-color: rgba(43, 43, 43, 0.85);
 }

 .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: #757575;
     letter-spacing: 5.7px;
     left: 5%;
     position: absolute;
     bottom: 30%;
     transform: rotate(-90deg);
     z-index: 5;
 }

 .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: 100vh;
 }

 .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: #2ec8bb;
 }

 .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: #2ec8bb;
 }

 .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;
 }

 .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: #2ec8bb;
     border-color: #2ec8bb;
 }

 .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 {
     margin-top: 35px;
     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: #2ec8bb;
     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: "Times New Roman", sans-serif;
     font-weight: 600;
     margin-bottom: 10px;
     text-transform: inherit;
 }

 .about-details h3 span {
     color: #2ec8bb;
 }

 .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 #2ec8bb;
     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: "Times New Roman", sans-serif;
 }

 .short-title > h3 span {
     color: #2ec8bb;
 }

 .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: "Times New Roman", 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: #2ec8bb !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: #2ec8bb;
 }

 .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: #2ec8bb;
     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: #2ec8bb;
 }

 /***** 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: #2ec8bb;
 }

 .progress-project {
     margin-top: 40px;
     overflow: hidden;
 }

 .progress-details {
     width: 150px;
     float: left;
     margin-right: 50px;
 }

 .progress-details h2 {
     font-size: 18px;
     color: #2ec8bb;

     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: #2ec8bb;
 }

 /*  ================================
    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 #2ec8bb;
     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: #2ec8bb;
     font-weight: 700;
     font-family: "Times New Roman", 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: "Times New Roman", 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: #2ec8bb;
 }

 .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: #2ec8bb !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: #2ec8bb;
     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: 43px;
 }

 .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: #2ec8bb;
     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: 125px;
     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: 85px 60px;
 }

 .address .section-title {
     width: 100%;
     left: 0;
     top: 8%;
 }

 .address .section-title h2 {
     font-size: 60px;
     color: #313131;
     font-family: 'Times New Roman', 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: "Times New Roman", sans-serif;
 }

 .post-date {
     width: 40%;
     letter-spacing: 3px;
     padding: 15px 0;
 }

 .single-blog-post p a,
 .post-date a {
     color: #2ec8bb;
 }

 .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: #2ec8bb;
     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: #2ec8bb;
 }

 .single-widget h3::before {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 20%;
     border: 1px solid #2ec8bb;
     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: #2ec8bb;
     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: 60px 0;
     background-color: #282828;
 }

 .bg-trans {
     background-color: transparent !important;
 }

 .copy-right-text {
     color: #fff;
     letter-spacing: 3.5px;
 }