// layout 2
@media(max-width:479px){
    .row.instagram-pics{
        > [class *= 'col-md-cus-5']{
            width: 50%;
        }
        > [class *= 'col-md-1.5']{
            width: 50%;
        }
    }
}
@media(min-width:480px){
    .row.instagram-pics{
        > [class *= 'col-md-cus-5']{
            width: 20%;
        }
        > [class *= 'col-md-1.5']{
            width: 12.5%;
        }
    }
}
.row.instagram-pics{
    > [class *= 'col-md']{
        @include rtl-float-left();
    }
}
/*------------------------------------*\
    Topbar
\*------------------------------------*/
.wrapper-container{
    position: relative;
}
.#{$app-prefix}-topbar{
    padding:$topbar-padding;
    margin: 0 !important;
    background: $topbar-bg;
    color: $topbar-color;
    @include font-size(font-size, $topbar-font-size);
    line-height: 1;
    @include border-radius(0);
    a{
        color: $topbar-link-color;
        &:hover{
            color: $topbar-link-hover-color;
        }
    } 
    // widget info
    .inner-topbar{
        > *{
            display: inline-block;
            vertical-align: middle;
            font-size: 17px;
            float: none;
            margin: 0 10px;
        }
        .close{
            color: #767778;
            &:hover,
            &:active{
                color: #fff;
            }
        }
        .widget-infotopbar{
            .btn{
                @include rtl-margin-left(50px);
            }
        }
    }
    .top-info{
        margin: 8px 0 0;
    }
    // social
    .social{
        margin: 0;
        a{
            @include size(32px,32px);
            @include border-radius(50%);
            border:2px solid rgba(255,255,255,0.2);
            color: #fff;
            line-height: 30px;
            display: inline-block;
            text-align: center;
            font-size: 14px;
            letter-spacing: -2px;
            &:hover,&:active{
                color: #fff;
                background: rgba(255,255,255,0.2);
            }
        }
    }
}
/*------------------------------------*\
    apus-topbar
\*------------------------------------*/
.apus-topbar{
    .widget{
        margin: 0;
    }
}
/*------------------------------------*\
    Header
\*------------------------------------*/
// header mobile
.header-mobile{
    padding: 8px 0;
    background: #fff;
    z-index: 99;
    .btn.dropdown-toggle,
    .btn.offcanvas{
        border:none;
        padding: 8px;
        font-size: 15px;
        color: #000;
        background: transparent;
        &:hover,&:active,&:focus{
            color: #000;
            background: transparent;
        }
    }
    .apus-search-form{
        min-width: 300px;
        .select-category{
          display: none;
        }
    }
    .logo{
        text-align: center;
    }
    .sidebar-mobile{
        margin: 3px 0 0;
    }
}
.sticky-header{
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    @include box-shadow(0 1px 12px 0  #17181a);
    @include translateY(0);
    &.sticky-header-hidden{
        @include translateY(-110%);
    }
}
.header-v4{
    .sticky-header .header-inner{
        background:#fff;
    }
}
.header_transparent{
    #apus-header{
        position: absolute;top: 0;
        left: 0;
        width: 100%;
        z-index: 99;
        background: transparent;
    }
    .header-default{
        .header-inner{
            background:transparent;
        }
    }
}
.apus-header{
    z-index: 99;
    position: relative;
    @include transition(all 0.8s ease 0s);
    .header-inner{
        .logo-in-theme,
        .heading-right{
            position: relative;
            z-index: 9;
        }
    }
    .widget{
        margin: 0;
    }
    // Menu Fixed
    .menu_fixed{
        position: fixed;
        top: 0;
        z-index: 9999;
        background: $white;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: $container-large-desktop;
        padding: 0 ($grid-gutter-width + 10);
        @include transition(all 0.8s ease 0s);
    }
    .apus-megamenu{
        margin-bottom: 0;
    }
    .btn-setting{
        background:transparent !important;
        border:none !important;
        color: #fff !important;
        padding: 11px 20px;
        i{
            font-size: 24px;
        }
    }
    .apus-search-form{
        max-width: 300px;
        .input-group{
            position: relative;
        }
        .apus-search{
            border-width:0 0 1px;
            border-style:solid;
            border-color:#fff;
            position: absolute;
            top: 0;
            width:0;
            visibility: hidden;
            @include rtl-right(0);
            @include box-shadow(none);
            z-index: 1;
            @include transition(all 0.2s ease-in-out 0s);
        }
        .button-search{
            position: relative;
            z-index: 2;
            background:transparent;
            border-color:transparent;
            i{
                font-size: 16px;
                color:#fff;
            }
        }
        &:hover{
            .button-search{
                background:$theme-color;
                border-color:$theme-color;
            }
            .apus-search{
                width: 250px;
                visibility: visible;
            }
        }
    }
}
.header-default{
    .header-inner{
        padding:15px 0;
        @include transition(all 0.2s ease-in-out 0s);
        background:#212121;
    }
    .sticky-header{
        .header-inner{
          background:#212121;  
        }
    }
    @media(min-width:1025px){
        .logo {
            min-width: 160px;
        }
    }
    .apus-search-form{
        margin: 16px 0 0;
        width:0;
    }
    .header-right{
        margin: 11px 0 0;
    }
     // menu
    .navbar-nav.megamenu > li{
        > a{
            color: #fff;
        }
        &:hover,&:active,&.active,&.open{
            > a{
                color: $theme-color;
            }
        }
    }
}
.header_transparent #apus-header.header-v1{
    background: #1a1a1a;
}
.header-v1{
    background: #1a1a1a;
    .sticky-header{
        background: #1a1a1a;
    }
    .header-top{
        padding:15px 0;
    }
    .header-middle {
        border-top:1px solid #222222;
    }
    // menu
    .navbar-nav.megamenu > li{
        > a{
            color: #fff;
            position:relative;
            &:before{
                content: '';
                position: absolute;
                top: -1px;
                left: 0;
                @include size(100%,2px);
                background: transparent;
            }
        }
        &:hover,&:active,&.active,&.open{
            > a{
                color: $theme-color;
                &:before{
                    background: $theme-color;
                }
            }
        }
    }
    // serach
    .apus-search-form{
        margin: 16px 0 0;
        width:0;
        .button-search{
            color: $theme-color;
        }
    }
    //setting
    .header-right{
        margin: 10px 0 0;
    }
    // header top
    .top-header-right{
        margin: 11px 0 0;
        > div + div{
            @include rtl-margin-left(40px);
        }
    }
    .social{
        margin: 7px 0 0;
        li{
            margin: 0 !important;
        }
        a{
            @include size(40px,40px);
            border:2px solid #555555;
            line-height: 36px;
            display: inline-block;
            letter-spacing: -3px;
            text-align: center;
            @include border-radius(50%);
            @include rtl-margin-right(10px);
            @include rtl-float-left();
            color: #555555;
            i{
              font-size: 18px;
            }
            &:hover{
                background:$theme-color;
                color: #fff;
                border-color:$theme-color;
            }
        }
    }
    // contact
    .contact-top .item-icon{
        border-color:$text-color;
    }
    .contact-top{
        .phone{
            color: $theme-color;
            font-weight: 700;
        }
    }
}   
.header-v2{
     // serach
    .apus-search-form{
        margin: 16px 0 0;
        width:0;
        .button-search{
            color: $theme-color;
            i{
                color: $text-color;
            }
        }
    }
    //setting
    .header-right{
        margin: 10px 0 0;
    }
    .header-middle {
        background: #242424;
    }
    .header-top{
        padding:25px 0;
        background: #1e1e1e;
    }
    .sticky-header{
        background: #242424;
    }
    // menu
    .navbar-nav.megamenu > li{
        > a{
            color: $text-color;
        }
        &:hover,&:active,&.active,&.open{
            > a{
                color: #fff;
                background: $theme-color;
            }
        }
    }
}
.header-v3{
    //logo
    .logo-in-theme {
        @include rtl-margin-right(80px);
        background: $theme-color;
        min-height: 156px;
        margin-top: -90px;
        @include rtl-margin-right(80px);
        position: relative;
        line-height: 156px;
        img{
            vertical-align: middle;
        }
        > *{
            position: relative;
            z-index: 2;
        }
        &:after{
            content: '';
            background:$theme-color;
            @include size(1000px,100%);
            position: absolute;
            top: 0;
            z-index: 1;
            @include rtl-right(0);
        }
        &:before{
            content: '';
            background:$theme-color;
            @include size(100%,100%);
            position: absolute;
            top: 0;
            z-index: 1;
            left: 30px;
            -ms-transform: skewX(20deg); /* IE 9 */
            -webkit-transform: skewX(20deg); /* Safari */
            transform: skewX(20deg); /* Standard syntax */
        }
    }
    // serach
    .apus-search-form{
        margin-top: 16px;
        @include rtl-margin-right(25px);
        width:0;
        .button-search{
            color: $theme-color;
        }
    }
    //setting
    .header-right{
    }
    .header-middle {
        background:#181818;
    }
    .header-top{
        background:#232323;
        padding:20px 0;
    }
    // menu
    .navbar-nav.megamenu > li{
        > a{
            color: #fff;
            position:relative;
            font-weight: 400;
            &:before{
                content: '';
                position: absolute;
                bottom: 1px;
                left: 0;
                @include size(100%,2px);
                background: transparent;
            }
        }
        &:hover,&:active,&.active,&.open{
            > a{
                color: $theme-color;
                &:before{
                    background: $theme-color;
                }
            }
        }
    }
}
.header-v4{
    .apus-search-form {
        margin-top: 15px;
        width: 60px;
        .button-search i{
            color: $link-color;
        }
    }
    .site-header-mainmenu {
        padding:0 $theme-margin;
    }
    .navbar-nav.megamenu > li {
        > a{
            font-size: 12px; 
            color: #616161;
        }
        &:hover,&:active,&.active{
            > a{
                color:$theme-color;
            }
        }
    }
    .header-inner{
        padding:13px 0;
    }
    .donate {
        margin-top: 13px;
    }
    .btn-donate{
        background:$theme-color;
        color: #fff !important;
        border-color: $theme-color;
        &:hover,&:active{
            background:darken($theme-color,5%);
            border-color:darken($theme-color,5%);
        }
    }
}
/*------------------------------------*\
    Breadcrumb
\*------------------------------------*/
.#{$app-prefix}-breadcrumb{
    @include box-size($breadcrumb-layout-bg, $breadcrumb-padding-top, $breadcrumb-padding-bottom);
    @include border-radius(0);
    margin: $breadcrumb-margin;
    text-align: $breadcrumb-alignment;
    font-size: $breadcrumb-font-size ;
    .breadcrumb-title{
        color: $breadcrumb-color;
        margin: 0;
        font-weight: $breadcrumb-title-font-weight;
        @include font-size(font-size, $breadcrumb-title-font-size);
    }
    nav{
        @include rtl-text-align-left();
        line-height: $breadcrumb-line-height;
        a{
            color: $breadcrumb-link-color;
        } 
    }
}

/*------------------------------------*\
    Container
\*------------------------------------*/
.#{$app-prefix}-mainbody{
    @include box-size($container-bg, $container-padding-top, $container-padding-bottom);
}
/*------------------------------------*\
    Content
\*------------------------------------*/
.#{$app-prefix}-content{
    background: $content-bg;
    @include clearfix();
}

/*------------------------------------*\
    Pagination
\*------------------------------------*/
.navigation {
    display: block;
    clear: both;
}
.#{$app-prefix}-pagination{
    margin: 10px 0;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    .page-numbers,
    .pagination{
        li{
            display: inline-block;
            > span, > a{
                padding: 9px 10px;
                border:2px solid $border-color;
                line-height: 1;
                background: #fff;
                display: inline-block;
                min-width: 34px;
                margin: 0 2px;
                float: none;
                color: $link-color;
                @include border-radius(50px);
                &:hover,
                &.current{
                    border-color: $theme-color ;
                    background: $theme-color;
                    color: #fff;
                }
            }
        }
    }
    // style for give
    > span, > a{
        padding: 9px 10px;
        border:2px solid $border-color;
        line-height: 1;
        background: #fff;
        display: inline-block;
        min-width: 34px;
        margin: 0 3px;
        float: none;
        color: $link-color;
        @include border-radius(50px);
        &:hover,
        &.current{
            border-color: $theme-color ;
            background: $theme-color;
            color: #fff;
        }
    }
    .prev:before {
        font-family: 'monia';
        content: "\e99d";
        font-size: 10px;
    }
    .next:before {
        font-family: 'monia';
        content: "\e99e";
        font-size: 10px;
    }
    ul.page-numbers{
        margin: 0;
        padding:0;
        list-style: none;
    }
}

/*------------------------------------*\
    Footer
\*------------------------------------*/
.#{$app-prefix}-footer{
    background: $footer-bg;
    padding:$footer-padding;
    position: relative;
    color: $footer-color;
    font-size: $footer-font-size;
    a{
        color: $footer-link-color;
        &:hover,
        &:focus,
        &:active{
            color: $footer-link-hover-color;
        }
    }
} 

/*------------------------------------*\
    Copyright
\*------------------------------------*/
.#{$app-prefix}-copyright{
    color: $copyright-color;
    font-size: $copyright-font-size;
    font-weight: $copyright-font-weight;
    background:$copyright-bg;
    padding:$copyright-padding;
    position: relative;
    a{
        &:hover,
        &:focus,
        &:active{
            color: $copyright-link-hover-color;
        }
        color: $copyright-link-color;
    }
    // social
    .widget-social {
        @include rtl-text-align-right();
        a{
          color: $copyright-color;
          &:hover{
            color: $theme-color;
          }  
        }
    }
    .menu{
        margin:0;
        padding:0;
        font-family: $font-family-second;
        @include rtl-float-right();
        li{
            @include rtl-float-left();
            display: inline-block;
            line-height: 1;
            a{
                color: $copyright-color;
                &:hover,
                &:active{
                    color: #fff;
                }
            }
            + li{
                @include rtl-margin-left(12px);
                @include rtl-padding-left(12px);
                @include rtl-border-left(1px solid $copyright-color);
            }
        }
    }
}
/*------------------------------------*\
    Top bar
\*------------------------------------*/
.apus-offcanvas {
    .apus-offcanvas-body{
        position: relative;
    }
    visibility:hidden;
    @include opacity(0);
    @include translateX(-100%);
    @include transition(all 0.2s  ease-in-out 0s);
    position: fixed;
    top:0;
    left:0;
    z-index:1000;
    min-width:300px;
    width: 70%;
    background: #fff;
    height: 100%;
    overflow-y: scroll;
}
.wrapper-container.active{
    .apus-offcanvas{
        @include translateX(0);
        @include opacity(1);
        visibility:visible;
        @include box-shadow(2px 0 5px 0 rgba(0,0,0,0.15) );
    }
}
@media(max-width:991px){
    .topbar-mobile  {
        padding: 10px;
        .btn{
            @include rtl-margin-right(10px);
            padding:6px 10px;
        }
        .top-cart .dropdown-menu{
            left: 0;
            right: inherit;
            &:after,
            &:before{
                display: none;
            }
        }
    }
}