/**
 * Description: Doux Layout Styles.
 * Version: 1.0.0
 * Last update: 01/01/2016
 * Author: Habaza <support@fobles.com>
 *
 ============================================================================
 * Table of Content:
 ============================================================================
 *  0. CSS Reset
 *  1. Main Styles
 *      - 1.1. Loading Animation
 *      - 1.2. Magnific Popup
 *  2. Header
 *      - 2.1. Logo
 *      - 2.2. Main Menu
 *      - 2.3. Navigation
 *      - 2.4. Main Menu (Layout 2)
 *      - 2.5. Social Icons
 *  3.Slider
 *      - 3.1. Revolution Slider Customization
 *  4.About Us Section
 *      - 4.1. About Us Section (Layout 2)
 *  5.Meet Our Team Section
 *      - 5.1. Our Team (Layout 2)
 *  6.Our Services Section
 *      - 6.1. Our Services (Layout 2)
 *  7.Our Portfolio Section
 *      - 7.1. Portfolio (Layout 2)
 *  8.Video Background Section
 *  9.Pricing Tables Section
 *      - 9.1. Pricing (Layout 2)
 *  10.Latest News Section
 *      - 10.1. Latest News (Layout 2)
 *  11.Clients & Testmonials Section
 *  12.Footer Section
 *  13.Blog Style
 *      - 13.1. Blog Single
 *      - 13.2. Sidebar
 *  14.Responsive Styles
 *      - 14.1. Extra small devices (phones, up to 319px)
 *      - 14.2. Extra small devices (phones, from 320px up to 479px)
 *      - 14.3. Small devices (phones, from 480px up to 767px)
 *      - 14.4. Small devices (tablets, from 768px up to 991px)
 *      - 14.5. Medium devices (tablets/desktops, from 992px up to 1199px)
 *      - 14.6. Large devices (tablets/desktops, from 1200px up to 1599px)
 *      - 14.7. Large devices (tablets/desktops, from 1600px and up)

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

/* ==========================================================================
   1. Main Styles
   ========================================================================== */

body {
    color: #6f6f6f;
}

.smoked-bg {
    background: #f5f5f5;
}

a.action-btn {
    border: 1px solid #141414;
    color: #141414;
}

a.action-btn:hover {
    background-color: #141414;
    color: #fff;
}

a.action-btn2 {
    border: 1px solid #141414;
    background-color: #141414;
    color: #fff;
}

a.action-btn2:hover {
    color: #fff;
    background-color: #966a39;
    border: 1px solid #966a39;
}

a.reverse-btn {
    border: 1px solid #966a39;
    color: #fff;
}

a.reverse-btn span {
    background: #966a39;
    color: #fff;
}

a.reverse-btn:hover {
    border: 1px solid #ffffff;
}

a.reverse-btn:hover b {
    background: #ffffff;
    color: #966a39;
}

a.gold-btn, button.gold-btn {
    background: #966a39;
    color: #fff;
}
.contact-form input.gold-btn {
    background: #966a39!important;
    background-image: linear-gradient(#966a39, #966a39 38px, #966a39 38px, #966a39 40px, #966a39 40px);
    padding: 16px 30px;
    line-height: 15px;
    font-size: 11px;
    width: 90%;
    color: #fff;
}

a.gold-btn:hover, button.gold-btn:hover {
    background: #7f5122;
    color: #fff;
}

.overlay-bg {
    background: rgba(0,0,0,0.8);
}

.video-overlay-bg {
    background: rgba(0,0,0,0.3);
}

section .title h1 {
    color: #141414;
}

section .title h4 {
    color: #6f6f6f;
}

section .title.light h1 {
    color: #fff;
}

section .title.light h4 {
    color: #c6c6c6;
}

.page-title.bg-img-1 {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(../images/bg/title-bg-1.jpg);
}

.page-title.bg-img-2 {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(../images/bg/title-bg-2.jpg);
}

.page-title.bg-img-3 {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(../images/bg/title-bg-3.jpg);
}

.page-title.bg-img-4 {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(../images/bg/title-bg-4.jpg);
}

.page-title h1 {
    color: #fff;
}

.page-title .doux-icon-divider {
    color: #ffffff;
}

.page-title h4 {
    color: #c6c6c6;
}

/* - 1.1. Loading Animation
   ========================================================================== */
.loading-container {
    background-color: #141414;
}

.double-bounce1,
.double-bounce2 {
    background-color: #966a39;
}

/* - 1.2. Magnific Popup
   ========================================================================== */

.mfp-bg {
    background: #f1f1f1;
}

.mfp-preloader,
.mfp-preloader a {
    color: #141414;
}

.mfp-preloader a:hover {
    color: #966a39;
}


.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
    color: #141414;
}

.mfp-figure:after {
    -webkit-box-shadow: 0px 5px 5px rgba(23, 22, 16, 0.07);
    -moz-box-shadow: 0px 5px 5px rgba(23, 22, 16, 0.07);
    box-shadow: 0px 5px 5px rgba(23, 22, 16, 0.07);
}

.mfp-figure.hastitle:after {
    -webkit-box-shadow: 0px 5px 5px rgba(23, 22, 16, 0.07);
    -moz-box-shadow: 0px 5px 5px rgba(23, 22, 16, 0.07);
    box-shadow: 0px 5px 5px rgba(23, 22, 16, 0.07);
}

.mfp-figure.hastitle .mfp-title {
    background: #fff;
    -webkit-box-shadow: 0px 5px 5px rgba(23, 22, 16, 0.07);
    -moz-box-shadow: 0px 5px 5px rgba(23, 22, 16, 0.07);
    box-shadow: 0px 5px 5px rgba(23, 22, 16, 0.07);
}

.mfp-title span.p-title {
    color: #fff;
    background-color: #966a39;
}

.mfp-title span.p-category {
    background: #141414;
    color: #fff;
}

.mfp-title p.p-text {
    color: #6f6f6f;
}

.mfp-title a.p-external {
    color: #141414;
}

.mfp-title a.p-external:hover {
    color: #966A39;
}

button.mfp-arrow {
    background: #141414;
}

button.mfp-arrow:after {
    color: #fff;
}

.mfp-counter {
    color: #fff;
}

/* ==========================================================================
   2. Header
   ========================================================================== */

.mainHeader {
    background-color: #fff;
}

.mainHeader.isStuck {
    -webkit-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.97);
}


/* - 2.1. Logo
   ========================================================================== */

.logo {
    background: url(../images/Logo-light.png) no-repeat;
    width: 186px;
    height: 44px;
    padding: 0;
    margin-left: 25px;
    display: block;
}
.mainHeader.transparent .logo{
    background: url(../images/Logo-dark.png) no-repeat;
}
.mainHeader.transparent.isStuck .logo{
    background: url(../images/Logo-light.png) no-repeat;
}

/* - 2.2. Main Menu
   ========================================================================== */



/* - 2.3. Navigation
   ========================================================================== */

.nav > li > a {
    color: #6f6f6f;
}

.nav > li:hover > a,
.nav > li.active > a,
.nav > li.active > a:focus {
    background-color: transparent;
    color: #7f5122;
}

.nav > li > a:focus {
    background: transparent;
    color: auto;
}

.parent .sub-menu {
    background: #FFFFFF;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
}

.parent .sub-menu > li {
    border-bottom: 1px solid #F5F5F5;
}

.parent .sub-menu > li > a {
    color: #707070;
}

.parent .sub-menu > li:hover > a {
    background: rgb(243, 243, 243);
    color: #815426;
}

.transparent .nav > li > a {
    color: #ffffff;
}

.transparent .nav > li:hover > a,
.transparent .nav > li.active > a,
.transparent .nav > li.active > a:focus {
    background-color: transparent;
    color: #c69c6d;
}

.transparent .nav > li > a:focus {
    background: transparent;
    color: auto;
}

.transparent .parent .sub-menu {
    background: rgba(51, 51, 51, 0.9);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.transparent .parent .sub-menu > li {
    border-bottom: 1px solid #212121;
}

.transparent .parent .sub-menu > li > a {
    color: #DADADA;
}

.transparent .parent .sub-menu > li:hover > a {
    background: rgba(84, 84, 84, 0.71);
    color: #c69c6d;
}

/* - 2.4. Main Menu (Layout 2)
   ========================================================================== */

a.menu-collapse {
    color: #141414;
    border-left: 1px solid #cecece;
}

.menu-holder {
    background: #141414;
}
.layout-2 .nav > li > a {
    color: #c6c6c6;
}

.layout-2 .nav > li:hover > a,
.layout-2 .nav > li.active > a,
.layout-2 .nav > li.active > a:focus {
    background-color: transparent;
    color: #cba675;
}

.layout-2 .nav > li > a:focus {
    background: transparent;
    color: auto;
}

.layout-2 .parent .sub-menu {
    background: #141414;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
}

.layout-2 .parent .sub-menu > li {
    border-bottom: 1px solid #3C3C3C;
}

.layout-2 .parent .sub-menu > li > a {
    color: #c6c6c6;
    background: transparent;
}

.layout-2 .parent .sub-menu > li:hover > a {
    background: #191919;
    color: #cba675;
}


/* - 2.5. Social Icons
   ========================================================================== */

.socialIcons li a i {
    color: #141414;
}

.socialIcons li a:hover i {
    color: #966a39;
}

.transparent .socialIcons li a i {
    color: #FFFFFF;
}

.transparent .socialIcons li a:hover i {
    color: #c69c6d;
}


/* ==========================================================================
   3. Slider
   ========================================================================== */
   
.rev_slider .layer-text-big span.revers{
    color: #af8655;
}
.tp-caption {
    color: #ffffff;
}

/* - 3.1. Revolution Slider Customization
   ========================================================================== */

.tp-bgimg:after {
    background-image: linear-gradient(to right, #000, rgba(0, 0, 0, 0));
}

#slider-hero .tp-bgimg:after,#slider-hero-image .tp-bgimg:after, #slider-text-rotator .tp-bgimg:after {
    background-image: none;
}

.tparrows:hover:before {
    color: #966a39;
}

.tp-bullet, .hephaistos .tp-bullet {
    background: #f5f5f5;
}

.tp-bullet:hover,
.tp-bullet.selected,
.hephaistos .tp-bullet:hover,
.hephaistos .tp-bullet.selected {
    background: #966a39;
}

.s-caption h1 {
    color: #fff;
}

.s-caption h1 span {
    color: #af8655;
}

.s-caption .doux-icon-divider {
    color: #fff;
}

.s-caption p {
    color: #fff;
}

.scroll-icon {
    color: #ffffff;
}

.scroll-icon a {
    color: #fff;
}

/* ==========================================================================
   4. About Us Section
   ========================================================================== */

.introduction {
    -webkit-box-shadow: 5px -5px 0px #966a39;
    -moz-box-shadow: 5px -5px 0px #966a39;
    box-shadow: 5px -5px 0px #966a39;
}

.stats {
    border-top: 1px solid #f3f3f3;
}

.state .state-count {
    color: #141414;
}

.state .state-icon {
    color: #141414;
}


/* - 4.1. About Us Section (Layout 2)
   ========================================================================== */

.aboutlayout-2 .stats {
    background: #f5f5f5;
}


/* ==========================================================================
   5. Meet Our Team Section
   ========================================================================== */

.member-photo {
    background: #fff;
}

.member-details {
    background: #fff;
}

.member-title h4 {
    color: #141414;
}

.member-contact ul li {
    border-right: 1px solid #cecece;
}

.member-contact ul li a {
    color: #6f6f6f;
}

.member-contact ul li a:hover {
    color: #966a39;
}

.join-team {
    -webkit-box-shadow: 7px -7px 0px #966a39;
    -moz-box-shadow: 7px -7px 0px #966a39;
    box-shadow: 7px -7px 0px #966a39;
}


/* - 5.1. Our Team (Layout 2)
   ========================================================================== */

.member-details.layout-2 {
    background: #f5f5f5;
}


/* ==========================================================================
   6. Our Services Section
   ========================================================================== */

.service {
    border-bottom: 1px solid #323232;
}

.service .service-icon:after {
    background: #323232;
}

.service .service-icon span i {
    color: #fff;
}

.service h1 {
    color: #fff;
}

.service p {
    color: #c6c6c6;
}

.srv-left {
    border-right: 1px solid #323232;
}


/* - 6.1. Our Services (Layout 2)
   ========================================================================== */

.layout-2 .service .service-icon {
    color: #ffffff;
}


/* ==========================================================================
   7. Our Portfolio Section
   ========================================================================== */

.filters .filters-btn {
    color: #6f6f6f;
}

.filters .filters-btn i {
    color: #966a39;
}

.p-filters {
    background: #f1f1f1;
}

.p-filters ul:after {
    border-left: 10px solid #F1F1F1;
    border-bottom: 5px solid transparent;
}

.p-filters ul li a {
    color: #6f6f6f;
}

.p-filters ul li a:hover,
.p-filters ul li a.current {
    color: #966a39;
}

h4.portfolio-title {
    color: #141414;
}

.project-hover {
    background: rgba(0, 0, 0, 0.95);
}

.project-details h2 {
    color: #fff;
    border-bottom: 1px solid #966a39;
}

.project-details h4 {
    color: #6f6f6f;
}

.project-details a {
    color: #fff;
}

.project-details a:hover {
    color: #966a39;
}


/* - 7.1. Portfolio (Layout 2)
   ========================================================================== */

.layout-2 .p-filters ul li a {
    border: 1px solid rgb(144, 144, 144);
}

.layout-2 .p-filters ul li a:hover,
.layout-2 .p-filters ul li a.current {
    background: #966a39;
    border-color: #966a39;
    color: #ffffff;
}


/* ==========================================================================
   8. Video Background Section
   ========================================================================== */
.video-overlay h1 {
    color: #fff;
}

.video-overlay h4 {
    color: #c6c6c6;
}

.video-controls a.play {
    color: #966a39;
}

.video-controls a.play:hover {
    color: #ffffff;
}


/* ==========================================================================
   9. Pricing Tables Section
   ========================================================================== */

.plan {
    background: #fff;
}

.plan.selected {
    -webkit-box-shadow: -7px -7px 0px #966a39;
    -moz-box-shadow: -7px -7px 0px #966a39;
    box-shadow: -7px -7px 0px #966a39;
}

.plan.selected a.action-btn {
    background: #966a39;
    border-color: #966a39;
    color: #fff;
}

.plan-header {
    border-bottom: 1px solid #f1f1f1;
}

.plan-header h3 {
    color: #141414;
}

.plan-header .hr-line {
    border-bottom: 3px solid #909090;
}

.plan-header h1 {
    color: #141414;
}

.plan-features {
    border-bottom: 1px solid #f1f1f1;
}


/* - 9.1. Pricing (Layout 2)
   ========================================================================== */

.layout-2.plan {
    background: #f1f1f1;
}

.layout-2.selected {
    background: #141414;
    color: #c6c6c6;
}

.layout-2.plan-header,
.layout-2.plan-features {
    border-bottom-color: #cecece;
}

.layout-2.selected .plan-header,
.layout-2.selected .plan-features {
    border-bottom-color: #323232;
}

.layout-2.selected .plan-header h3 {
    color: #ffffff;
}

.layout-2.selected .plan-header .hr-line {
    border-color: #909090;
}

.layout-2.selected .plan-header h1 {
    color: #ffffff;
}

.layout-2.plan-header h1 span {
    color: #6f6f6f;
}

.layout-2.selected .plan-header h1 span {
    color: #ffffff;
}


/* ==========================================================================
   10. Latest News Section
   ========================================================================== */

.n-post-date {
    background: rgba(144, 144, 144, 0.50);
    color: #fff;
}

.n-post-details a h4 {
    color: #fff;
}

.n-post-details a:hover h4 {
    color: #966a39;
}

.n-post-details p {
    color: #c6c6c6;
}

.n-post-details p a.n-more {
    color: #c6c6c6;
}

.n-post-details p a.n-more:hover {
    color: #966a39;
}


/* - 10.1. Latest News (Layout 2)
   ========================================================================== */


/* ==========================================================================
   11. Clients & Testmonials Section
   ========================================================================== */

.testmonials-bg {
    -webkit-box-shadow: inset 7px 7px 0px #966a39;
    -moz-box-shadow: inset 7px 7px 0px #966a39;
    box-shadow: inset 7px 7px 0px #966a39;
    background: #f5f5f5;
}

.testmonial-photo {
    border: 2px solid #cecece;
}

.testmonial-photo img {
    border-color: transparent;
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.50);
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.50);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.50);
}

.testmonial-details h5 {
    color: #141414;
}

.testmonial-details p {
    color: #141414;
}

.testmonial-quote {
    background: #fff;
}

.testmonial-quote:before {
    border-right: 15px solid #fff;
}

.owl-theme .owl-controls .owl-page span {
    background: #c6c6c6;
}

.owl-theme .owl-controls .owl-page.active span {
    background: #966a39;
}


/* ==========================================================================
   12. Footer Section
   ========================================================================== */

.footer {
    background: #141414;
}

.main-footer {
    border-bottom: 1px solid #1e1e1e;
}

ul.contact-details li {
    color: #c6c6c6;
}

ul.contact-details li i {
    color: #966a39;
}

ul.contact-details li a {
    color: #c6c6c6;
}

.folow-us h5 {
    color: #fff;
}

.folow-us ul.footer-social li a {
    color: #6f6f6f;
}

.folow-us ul.footer-social li a:hover {
    color: #966a39;
}

.contact-form input,
.contact-form textarea {
    background-image: -webkit-linear-gradient(#141414, #141414 38px, #1e1e1e 38px, #1e1e1e 40px, #141414 40px);
    background-image: -moz-linear-gradient(#141414, #141414 38px, #1e1e1e 38px, #1e1e1e 40px, #141414 40px);
    background-image: -ms-linear-gradient(#141414, #141414 38px, #1e1e1e 38px, #1e1e1e 40px, #141414 40px);
    background-image: -o-linear-gradient(#141414, #141414 38px, #1e1e1e 38px, #1e1e1e 40px, #141414 40px);
    background-image: linear-gradient(#141414, #141414 38px, #1e1e1e 38px, #1e1e1e 40px, #141414 40px);
    color: #c6c6c6;
}

/* ==========================================================================
   14. Responsive Styles
   ========================================================================== */

.navbar-toggle {
    color: #141414;
}
.transparent .navbar-toggle {
    color: #ffffff;
}

.transparent .navbar-collapse.in {
    background: rgba(0, 0, 0, 0.87);
}


/* - 14.1. Extra small devices (phones, up to 319px)
   ========================================================================== */
@media screen and (max-width: 319px) {
    .menu-holder {
        background: rgb(20, 20, 20);
    }
    .state .state-icon {
        color: #6F6F6F;
    }
    .layout-2 .service.srv-bottom {
        border-bottom: 1px solid #323232;
    }
}

/* - 14.2. Extra small devices (phones, from 320px up to 479px)
   ========================================================================== */
@media screen and (min-width: 320px) and (max-width: 479px) {
    .menu-holder {
        background: rgb(20, 20, 20);
    }
    .state .state-icon {
        color: #6F6F6F;
    }
    .layout-2 .service.srv-bottom {
        border-bottom: 1px solid #323232;
    }
}

/* - 14.3. Small devices (phones, from 480px up to 767px)
   ========================================================================== */
@media screen and (min-width: 480px) and (max-width: 767px) {
    .menu-holder {
        background: rgb(20, 20, 20);
    }
    .state .state-icon {
        color: #6F6F6F;
    }
    .layout-2 .service.srv-bottom {
        border-bottom: 1px solid #323232;
    }
}

/* - 14.4. Small devices (tablets, from 768px up to 991px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .state .state-icon {
        color: #6F6F6F;
    }
    .layout-2 .service.srv-bottom {
        border-bottom: 1px solid #323232;
    }
}