/////////// TEMPLATES LAYOUT ///////////

$app-prefix                      : opal !default;
$vc-prefix                       : wpopal_ !default;
/**
Page Style
Topbar layout styles
Header Layout styles
Search block layout and styles
Mass Bottom Header Styles
Main menu styles
Section in Homepage
Breadscrumb content style
Footer layout styles
Copyright
 */
body{
    overflow-x:hidden;
}
#main {
    .container{
        position:relative;
        .container {
            width: 100%;
        }
    }
}
#site-header{
    text-align: center;
}
.home-background{
    .site-main{
        background: $gray-lighter; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient($gray-lighter, $white); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient($gray-lighter, $white); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient($gray-lighter, $white); /* For Firefox 3.6 to 15 */
        background: linear-gradient($gray-lighter, $white); /* Standard syntax (must be last) */
    }
}
/**
 * Page Style
 */
#page{
    position: relative;
    margin-left:auto;
    margin-right: auto;
    &.page-static-left{
        @include transition(all 0.25s ease-out);
        &.active{
            @include transition(all 0.25s ease-out);
            @include rtl-margin-left(250px);
            .sidebar-static-left{
                @include transition(all 0.25s ease-out);
                @include rtl-left( 0 );
            }
        }
    }
    &.active .button-action:before{
        content: "\f060"
    }
}

.sidebar-static-left{
    background:#282828;
    color: #CCC;
    position:fixed;
    @include rtl-left( -290px );
    height: 100%;
    position: fixed;
    width: 300px;
    z-index: 99999;
    @include transition(all 0.25s ease-out);
    .inner{
        padding:30px;
        width: 100%;
        position: absolute;
        height: 100%;

    }

    .button-action{
        background:red;
        position:absolute;
        right: -40px;
        top: 0;
        height: 40px;
        color: #CCC;
        &:before{
            content: "\f061";
            font-size: 12px;
            height: 38px;
            width: 38px;
            font-family: 'FontAwesome';
            text-align: center;
            display: block;
            line-height: 34px;
        }
    }
}
/**
 * Topbar layout styles
 */
##{$app-prefix}-topbar{
    text-transform : $topbar-text-transform;
    font-size      : $topbar-font-size ;
    padding        : $topbar-padding;
    position: relative;
    z-index: 1051;
    background: $topbar-bg;
    .list-inline{
        margin: 0; padding:0;
        li{padding: 0 10px;}
    }
    a{
        color: $topbar-link-color;
        &:hover{
            color: $topbar-link-hover-color;
        }
    }
    &.topbar-v2{
    }
}
.topbar-mobile{
    width: 100%;
    background: $theme-color;
    display: table;
    .btn-offcanvas{
        background-color:transparent;
    }
    .fa{
        color: $white;
        font-size: 20px;
    }
}
.search-category{
    .btn-search{
        input{
            background: transparent;
            border: none;
        }
    }
}
.active-mobile{
    line-height:48px;
    @include size(48px,48px);
    position: relative;
    cursor: pointer;
    @include transition(all 0.3s ease 0s);
    text-align: center;
    &:hover{
        background-color: darken($theme-color, 5%) !important;
        cursor: pointer;
        .active-content{
            display: block;
            opacity: 1;
            visibility: visible;
            @include rtl-left(0);
            @include rtl-right(auto);
        }
    }
    .active-content{
        position: absolute;
        top: 100%;
        z-index: 99999;
        color: $black;
        padding: $theme-margin;
        background-color: #f8f6f0;
        @include rtl-left(-10000px);
        @include opacity(0);
        position: absolute;
        min-width: 270px;
        visibility: hidden;
        @include rtl-right(0);
        @include rtl-text-align-left();
        @include transition(opacity 0.3s ease 0s);
        p.total{
            color: $gray;
        }
    }
    ul{
        padding: 0;
        li{
            display: block;
            margin: 0;
            padding: 5px 0;
            line-height: normal;
        }
    }
    .search-category-container{
        display: none;
    }
    .search-category-input{
        @include font-size(font-size,15px);
        height: 42px;
    }
    .input-group-btn{
        line-height: 32px;
        background:$theme-color;
    }
    .btn-search{
        .fa{
            color: $white;
            border: none;
            font-size: 16px;
            background-color: transparent;
        }
        &:hover{
            .fa{
                color: $theme-color;
            }
        }
    }
    &.setting-popup{
    }
}
##{$app-prefix}-logo{
    &.logo-theme{
    }
    &.logo-image{

    }
}

.box-group{
    span {
        cursor: pointer;
        &:hover{
            color: $theme-color;
            @include transition (all 0.2s ease-in-out 0s);
        }
    }
    .dropdown-menu {
        @include rtl-left(-15px);
        @include rtl-right(auto);
        top: 180%;
        margin: -1px 0 0;
        border-radius: 0;
        @include opacity(0);
        @include transition(all 300ms ease-in-out 0s);
        border: medium none;
        display: block;
        margin-top: 0;
        min-width:150px;
        padding: 10px;
        position: absolute;
        visibility: hidden;
        z-index: 999 ;
        font-size: 10px;
        a{color: #777!important;}
    }
    &:hover {
        .dropdown-menu{
            visibility: visible;
            @include opacity(1);
            top:160% ;
        }
    }
}

// Multi language
.language{
    float: left;
        padding: 0 5px;
    img{margin-right: 5px;}
}

/**
 * Header Layout styles
 */
##{$app-prefix}-masthead{
    position: relative;
    .header-main{
        padding: 35px 0;
        text-align: center;
        @media (min-width: $screen-lg) {
            @include rtl-text-align-left();
        }

    }
    .home &.header-absolute{
        position: absolute;
        width: 100%;
        z-index: 1050;
        @media (min-width: $screen-sm) and (max-width: $screen-sm-max){
            position: relative;
            .header-main{
            }
        }
        @media (max-width: $screen-phone) {
            position: relative;
            .header-main{
            }
        }
    }
    &.header_fixed{
        position: fixed!important;
        top: 0;
        padding: 0;
        color: #000;
        background: #fff;
        z-index: 9999;
        width: 100%;
        left: 0; 
        box-shadow: 0 0 10px;
    }
}
.opal-header-right{
    .cart-icon{
    }
}
/**
 * Search block layout and styles
 */
.search-box-wrapper{
    .search-focus{
        width: 40px;
        height: 40px;
        border-radius: 100%;
        background: #d2d6d8;
        padding: 10px;
    }
}

.search-box{
    .input-group-addon{
        background:#FFFFFF;
        border:none;
        input{ background: transparent; border-color:$theme-color ; color:$black; }
        border-radius:0px $border-radius-base $border-radius-base 0px;
        min-width: auto;
        font-weight: normal;
        position: relative;
        font-size: 12px;
        padding:2px 10px 2px 10px !important;
        &:after{
            content: " ";
            width: 1px;
            height: 100%;
            position:absolute;
            top: 0;
            right: 0;
            background:#CCC;
        }
    }
    input, select{ border:none ; border-radius:$border-radius-base;background:transparent;box-shadow:none;  }
    select{ border-radius:0 0 0!important;  border:none !important; background:transparent!important;  box-shadow:0 0 0!important; font-weight:normal; margin-right:2px;  }
    &.search-box-simple{
        margin-top:15px;
        background: #f7f7f7;
        border: 1px solid $border-color;
        .input-group{

        }
        .input-group-addon{
            background:transparent;
            @include rtl-text-align-right();
            font-size: 14px;
            min-width: 20px;
            &:after{
                content: none;
            }
        }
        input{ color:#000000 }
    }
    &.search-box-light{
        .input-group{
            border-radius:$border-radius-large;
            background: #FFFFFF;
            border:2px solid #ebebeb;
        }
    }
}

.toggle-overlay-container{
    .search-box {
        .input-group{
            border:solid 2px $border-color;
            .form-control{ height: 40px }
        }
    }
    .dropdown-toggle-button{
        width: 86px;
        height: 100%;
        text-align: center;
        float:right;
        background:#F2f2f2;
        cursor: hand;cursor:pointer;
    }
    z-index: 10;
    background:#FFFFFF;
    &.active{
       opacity: 1;
       visibility:visible;
    }
}

/**
 * Mass Bottom Header Styles
 */


/**
 * Main menu styles
 */
##{$app-prefix}-mainmenu{
    background: transparent;
    position: relative;
    .inner{

    }
}

/**
 * Section in Homepage
 */

.section-features {
    .feature-box {
        margin-bottom: 35px;

        h4 {
            font-size: 20px;
            margin: 0 0 10px;
            font-weight: 600;
        }
        .description {
            line-height: 2;
        }
        .fbox-icon {
            i {
                border: 3px solid #d6d9dc;
                width: 70px;
                height: 70px;
                padding: 20px 0;
                border-radius: 100%;
                text-align: center;
            }
        }
    }
}

.section-testimonial{
    .testimonials-quote{padding: 0 70px;line-height: 2;
        @media(max-width: $screen-xs-max){padding: 0;}
    }
    .testimonials-avatar{float: none!important;}
    h4.name{
            color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    }
    .job{
        a{color: #808080;
            font-size: 12px;
    text-transform: uppercase;}
    }
    .owl-item {
        &:first-child{
            .item{
                border-left: none;
            }
        }
        .item{
            border-left: 1px solid #313131;
        }
    }
}
.section-overview{
    .content{
        display: flex;
        align-items: center;
        min-height: 680px;
    }
    .kc_single_image img{ }
    .overview{
        line-height: 2;
        padding: 0 30px;
        font-size: 16px;
    }
}
.section-service {
    .feature-box{border-left: 1px solid #f55771;
        @media(max-width: $screen-xs-max){
            text-align: center;
            .fbox-icon{float: none;    margin-bottom: 9px!important;}
        }
        @media(max-width: 1024px){
            border-left: none!important;
            .fbox-icon{margin-left: 0!important;}
        }
    }
    .kc_column:first-child .feature-box{border-left: none;}
    .fbox-icon {
        margin: 0 15px 0 20%!important;
        i {
            border: 1px solid #f55771;
            width: 50px;
            height: 50px;
            text-align: center;
            padding: 13px 0;
            border-radius: 100%;
        }
    }
    .fbox-body {
        h4 {
            color: #fff;
            margin: 0 0 5px!important;
            font-size: 20px;
            font-weight: 600;
        }
        small {
            color: #8c0c22!important;
            text-transform: uppercase;
            font-size: 14px;
        }
    }
}

.rotate {
    background: url('#{$image-theme-path}bg-rotate.png') no-repeat center bottom transparent;
    background-size: 100% auto;
    padding-bottom: 100px;
    display: inline-block;
        max-width: 100%;
        .spritespin-instance{max-width: 100%;}
}

.item-brand:hover img {
    transform: scale(1.2);
    transition: all ease 0.3s;
}

@media (max-width: 480px) {
    .spritespin-instance,
    .spritespin-canvas{ height: 200px!important; }
}
/**
 * Home2
 */
.header-style-2.header-main{
    padding: 0!important;
    .container{background: #fff;    padding: 30px;}
} 
 .home2{
    h1, h2, h3, h4, h5, h6{text-transform: uppercase;}
    #main-container,
    .container{
        // @media (min-width: 1400px) {width: 1400px;}
        padding-left: 0;
        padding-right: 0;
    }
    #opal-topbar .container{padding-left: 0px; padding-right: 0px;}
    .product-block span.sale-off, .product-block span.onsale{
        background: #f10e34;
    }
    // 360
    @media (min-width: 1124px) {
        .spritespin-instance,
        .spritespin-canvas{ width: 700px!important; height: 450px!important; }
    }

    // category subs
    .section-category-subs {
        text-align: center;
        .opal-category-subs {
            position: relative;
            text-align: center;
            display: inline-block;
            text-transform: uppercase;
            .category-caption {
                visibility: hidden;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
            }
            h4.name{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
                z-index: 2;
                span{
                    @extend .btn;
                    background: #fff;
                    color: #000;
                    padding: 10px 20px;
                    border-radius: 30px;
                    font-weight: 600;
                }
            }
            &:before{content: ""; position: absolute; width: 100%;height: 100%; background: #fff;left: 0; top: 0;visibility: hidden; opacity: 0; transition: all ease 0.3s;}
            &:hover{
                h4.name{display: none;}
                .category-caption {
                    visibility: visible;
                }
                &:before{visibility: visible; transition: all ease 0.3s;opacity: 1;}
            }
        }
        .category-filter-link a{
            @extend .btn-default;
            border-radius: 30px;
            padding: 10px 20px;
            font-size: 12px;
            letter-spacing: 2px;
            font-weight: 600;
                display: inline-block;
    margin-top: 15px;
        }
    }
    // service
    .section-service {
        .feature-box {
            border-left: 1px solid #404040;
        }
        .fbox-icon {
            i {
                border: 2px solid #404040;
            }
        }
        .fbox-body {
            small {
                color: #777 !important;
            }
        }
    }
    // tabs
    .section-tabs{position: relative;}
    // deal
    .section-deal {
        position: relative;

        h3 {
            color: #ffffff;
            font-size: 60px;
            margin-bottom: 0;
            font-weight: 700;
            text-transform: none;
                float: left;
        }
        .kc-countdown-timer{float: right;}
        span.group {
            font-weight: 700;
            margin-left: 15px;
            width: 100px;
            height: 100px;
            border: 5px solid;
            line-height: 1.2;
            padding: 10px 0 0;
            background: none;
            border-radius: 0;

            .timer {
                font-size: 40px;
            }
            .unit {
                text-transform: uppercase;
                font-size: 14px;
                display: block;
                color: #000;
                opacity: 0.5;
            }
        }
        @media (max-width: 1024px) {
            .kc_column{padding: 20px!important;text-align: center;}
            h3{float: none;}
            .kc-countdown-timer{float: none;display: inline-block;}
        }
        @media (max-width: 475px) {
            padding: 0px !important;
            .kc_column {
                margin-top: 0;
            }
            h3{font-size: 50px;margin-bottom: 20px;}
            span.group {
                margin: 0 0 0 5px;
                width: 65px;
                height: 75px;

                .timer {
                    font-size: 25px;
                }
                .unit {
                    font-size: 10px;
                }
            }
        }

    }
    @media (max-width: 475px) {
        .section-tabs{padding: 0 !important;}
        .brands-collection{text-align: center;}
    }
    @media (max-width: 1024px) {
        .section-slider{
            .kc_column{margin-bottom: 0;}
        }
    }

    // blog
    .section-blog{
        .owl-carousel .owl-item{padding: 0;
            @media (min-width: 1025px) {
                &:nth-child(2n){
                    article{
                        display: flex;
                        flex-flow: column;

                    }
                    .post-thumbnail{
                        order: 2;
                    }
                }
                .blog-content{height: 304px;}
            }
        }
        article{
            .blog-content{text-align: center;
                padding: 60px;}
        }
        .owl-controls{display: none!important;}
    }
    //
    .kc_tabs_nav {
        padding-bottom: 10px;
        margin-bottom: 30px;

        &:after {
            content: "";
            position: absolute;
            width: 80px;
            height: 5px;
            background: #fd6327;
            bottom: 0;
            left: 50%;
            margin-left: -40px;
        }
    }

    h2.kc_title{
        font-size: 40px;
        &:after{
            background: #fd6327;
        }
    }
    .amount{color: #fd6327; }
}
/**
 * Breadscrumb content style
 */
.#{$app-prefix}-breadscrumb{
    text-align: center;
    margin-bottom: 30px;
    background: url('#{$image-theme-path}background-1.jpg');
    .breadcrumb{
        padding:50px 0;
        background:transparent;
        margin:0;
        a{
            font-size: 12px;
            color: $breadcrumb-color;
            text-transform: uppercase;
            &:after{
                content: "\f105";
                font-family: "FontAwesome";
                padding: 0 5px;
                color: $breadcrumb-color;
            }
        }
        li:before{
            display: none;
        }
        li:last-child{
            color: $breadcrumb-active-color;
            @include rtl-padding-left(5px);
        }
        li{
            text-transform: uppercase;
            color: $breadcrumb-color;
        }
    }
}
/**
 * Footer layout styles
 */
#main{
    h1{ 
        margin-bottom: 20px;
        margin-top: 5px;
    }
}

.#{$app-prefix}-footer{
    color:$footer-color;
    background: $footer-bg;
    font-size: $footer-font-size  ;
    a{color:$footer-color;}
        .inner{

            padding-top: $footer-padding-top  ;
            padding-bottom: $footer-padding-bottom  ;
        }
    .footer-top{
        margin-top: 30px;
        margin-bottom: 30px;    }
    .textwidget {
        margin-bottom: 15px;
    }
    .kc_single_image{
        margin-bottom: 30px;
    }
    strong{
        font-size: 30px;
        color: $theme-color;
    }
    b{
        color: $theme-color;
    }
    h2,h3,h4{
        font-size: $footer-heading-font-size ;
        text-transform: $footer-heading-transform;
        margin: $footer-heading-margin !important ;
        color:$footer-heading-color;
        display: $footer-heading-display;
        padding: $footer-heading-padding !important ;
        font-weight: $footer-heading-fweight ;
        font-family: $footer-heading-ffamily;
    }
    ul{
        padding: 0;
        li{list-style: none;line-height: 30px;}
    }
    .social{
        img{    margin: 0 5px 0 0;}
        li{float: left; min-width: 50%; margin-bottom: 10px;}

        i{width: 30px; height: 30px; border-radius: 100%; color: #fff;
    text-align: center;padding: 9px;    margin-right: 7px;}

    }
    .payment{
        img{border-radius: 3px; margin: 0 5px 5px 0;}
    }
    .widget_mc4wp_form_widget .input-group .form-control {
        border: none;
        background: #1e222a;
    }
    .widget_mc4wp_form_widget .input-group .btn {
        position: absolute;
        @include rtl-right(0);
        background: transparent;
        border: none;
    }
    .widget_nav_menu ul li{
        border-bottom: none;
        padding: 2px 0px;
        a{
            color: $footer-color;
        } 
    }
}

/*------------------------------------*\
    Copyright
\*------------------------------------*/
.#{$app-prefix}-copyright{
    padding-top: $copyright-padding-top ;
    padding-bottom: $copyright-padding-bottom;
    text-align: center;
    background: $copyright-bg ;
    font-size: $copyright-font-size ;

    .#{$block-selector} {
        .#{$block-heading-selector}{
            color: $footer-heading-color;
            text-transform: $footer-heading-transform;
            margin: $footer-heading-margin;
            @include font-size(font-size,$footer-heading-font-size);
        }
    }
    a{
        color: $white;
        &:hover,
        &:focus,
        &:active{
            color: $theme-color;
        }
        color: $copyright-link-color;
    }
}