Default page

View File Name : _module.scss

/*  +----------------------------------------------------+
        TABLE OF CONTENTS
    +----------------------------------------------------+

    [1]     BLOCK MODULE SLIDER
    [2]     BLOCK MODULE EXTRA SLIDER
    [3]     BLOCK BANNER-1 HOME PAGE
    [4]     BLOCK SHORT CODE SERVICES
    [5]     BLOCK MODULE LASTET BLOG
    [6]     BLOCK DEFFAULT BESTSELLER HOME
    [7]     BLOCK OUR BRAND
    [8]     BLOCK MODULE EXTRA SLIDER2
    [9]     BLOCK MODULE LISTING TAB
    [10]    BLOCK BRAND SLIDER
    [11]    BLOCK MODULE LISTING TAB 2
    [12]    BLOCK BANNER TOP
    [13]    BLOCK BANNER CT
    [14]    BLOCK SERVICES 
    [15]    BLOCK BANNER BT
*/

/*[1]     BLOCK MODULE SLIDER*/
#so-slideshow{
    .owl2-controls .owl2-nav{
        div{ position: absolute; margin: 0; top:50%; @include transform(translateY(-50%)); outline: 0; width: 36px; height: 36px;
            font-size: 0; z-index: 9; transition: all 0.3s ease;
            &.owl2-prev{ left: 0px;background: #444  url("#{$base-url-theme}/icons/arrow-slider-left.png")  no-repeat center; border: none;
                &:hover{ background-color: $background }
                &:before, &:after{ display: none; }
            }
            &.owl2-next{ right: 0px; background: #444 url("#{$base-url-theme}/icons/arrow-slider-right.png") no-repeat center;border: none;
                &:hover{ background-color: $background }
                &:before, &:after{ display: none; }
            }
        }
    }
    .owl2-dots{ position: absolute; bottom:8px; width: 100%; text-align: center;
            .owl2-dot{ display: inline-block;
                span{ width: 10px; height:10px; background-color: #b4b4b4; border:1px solid transparent; margin:0 2px; opacity: 1; 
                    display: block;border-radius: 50%; -webkit-border-radius: 50%
                }
                &.active span, &:hover span{background-color: $background; border:1px solid #fff;}
            }
    }
    .owl2-item{ 
        &.active{
            .sohomeslider-description{ 
                .image{
                    opacity: 1;
                    animation: myeffect-slideshow 2s ease-in-out ;
                    -webkit-animation: myeffect-slideshow 2s ease-in-out; /* Chrome, Safari, Opera */
                    -moz-animation: myeffect-slideshow 2s ease-in-out ;
                    -o-animation: myeffect-slideshow 2s ease-in-out ;
                    -ms-animation: myeffect-slideshow 2s ease-in-out ;
                }
                h3.tilte{
                    opacity: 1;
                    animation: myeffect-slideshow 1.5s ease-in-out ;
                    -webkit-animation: myeffect-slideshow 1.5s ease-in-out; /* Chrome, Safari, Opera */
                    -moz-animation: myeffect-slideshow 1.5s ease-in-out ;
                    -o-animation: myeffect-slideshow 1.5s ease-in-out ;
                    -ms-animation: myeffect-slideshow 1.5s ease-in-out ;
                }
                h4{
                    opacity: 1;
                    animation: myeffect-slideshow 1s ease-in-out ;
                    -webkit-animation: myeffect-slideshow 1s ease-in-out; /* Chrome, Safari, Opera */
                    -moz-animation: myeffect-slideshow 1s ease-in-out ;
                    -o-animation: myeffect-slideshow 1s ease-in-out ;
                }
                .des{
                    opacity: 1;
                    animation: myeffect-slideshow 0.8s ease-in-out ;
                    -webkit-animation: myeffect-slideshow 0.8s ease-in-out; /* Chrome, Safari, Opera */
                    -moz-animation: myeffect-slideshow 0.8s ease-in-out ;
                    -o-animation: myeffect-slideshow 0.8s ease-in-out ;
                }
            }
        }
    }
    .sohomeslider-description{
        position: static;
        padding: 0;
        p{width: 100%;color: #fff;font-size: 14px;padding: 0;padding: 0;margin: 0;}
        .image{
            position: absolute;
            width: auto;
            opacity: 0;
            top: 50px;
            &.pos-right{
                right: 70px;
            }
            &.pos-left{
                left: 70px;
            }
            
            &.image-sl12{
                left: 35px;
            }
        }
        .text{
            position: absolute;
            top: 50%;
            @include transform(translateY(-50%));
            h3.tilte, h4, .des{
                opacity: 0;
            }
            &.pos-right{
                right: 70px;
            }
            &.pos-left{
                left: 70px;
            }
            .modtitle-sl11{
                font-size: 55px;
                font-weight: bold;
                color: #fff;
            }
            &.text-sl11{
                top: 75%;
                text-align: center;
            }
            &.text-sl12{
                text-transform: uppercase;
                h3.tilte{
                    font-size: 30px;
                    color: #444;
                    font-weight: 700;
                    margin: 0;
                }
                h4{
                    font-size: 84px;
                    color: $linkColor;
                    font-weight: 700;
                    margin: 0;
                }
                .des{font-size: 27px;color: #444;}
            }
            &.text-sl13{
                h3.tilte {
                    font-size: 26px;
                    font-weight: 700;
                    color: #fff;
                }
                h4{
                    font-size: 80px;
                    font-weight: 700;
                    color: $linkColor;
                }
            }
        }
    }    
}

/*[2]     BLOCK MODULE EXTRA SLIDER*/
.module.best-seller{
    .so-extraslider .item{ 
        .item-wrap.style1{ border-color: #ddd; }
    }
    .so-extraslider .extraslider-inner{ border-color: #ddd; margin-top: 30px; }
    .so-extraslider .extraslider-inner .item-wrap-inner{ margin: 15px 0 10px; }
    .so-extraslider .owl2-controls{
        margin: 0; top: -63px;
       .owl2-nav div{
            display: inline-block;
            width: 24px;
            height: 24px;
            background-repeat: no-repeat;
            background-position: center center;
            overflow: hidden;
            font-family: FontAwesome;
            font-size: 0;
            color: #c0c0c0;
            z-index: 501;
            cursor: pointer;
            background-color: #fff;
            border: 1px solid #ddd;
            opacity: 1; font-weight: normal;
            text-align: center;
            margin: 0 2px;
            position: static;
            &.owl2-prev{right: 30px;
                    &:before{content: "\f104"; line-height: 22px; font-size: 17px;}
            }
            &.owl2-next{ right: 0;
                    &:before{content: "\f105"; line-height: 22px; font-size: 17px;  }
            }
            &:hover{background-color: $background; border-color: $linkColor; color: #fff;}
        }
    }
}

/*[3]     BLOCK BANNER-1 HOME PAGE*/
.static-home-2{display: inline-block; width: 100%;
     .col-s{float: $left;
        a{display: block; clear: both; position: relative;
            img{width: 100%;}
        }
        &.col-s-1{width: 25.64%;    
        }
        &.col-s-2{width: 34.188%;}
        &.col-s-3{width: 17.09%;}
        &.col-s-4{width: 23.082%;}
        
     }
}

/*[4]     BLOCK SHORT CODE SERVICES*/
.list-services{display: block;overflow: hidden;
    li{
        a{border: 3px solid #ddd; display: block; transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s;
            &:hover{border-color: $linkColor;}
        }   
    } 
}

/*[5]     BLOCK MODULE LASTET BLOG*/
.module.custom-ourblog{
    .so-blog-external{ margin-top: 30px; }
    .blog-externals{
        border: none;
        margin-top: 15px;
        .so-block{
            padding: 0;
        }
        .media-bodys{
            display: table;
            width: 100%;
            padding-top: 20px;
            .media-date-added{                
                display: table-cell;
                color: #222;
                vertical-align: top;
                font-size: 14px;
                background: #eeeeee;
                padding: 13px 20px;
                text-align: center;
                span{
                    text-transform: uppercase;
                    font-weight: bold;
                }    
            }

            .media-content{
                display: table-cell;
                vertical-align: top;
                padding-left: 15px;
                .media-heading a{padding: 0;font-weight: bold; color: #444;&:hover{color: $linkColor;}}
                .description {
                    font-size: 12px;
                    line-height: 20px;
                    color: #777;
                }
            }
        }
    }
}

/*[6]     BLOCK DEFFAULT BESTSELLER HOME*/
.bestseller{clear: inherit;
    h3{ font-size: 18px; font-weight: bold; margin-bottom: 20px; margin-top: 12px;color: #222; text-transform: uppercase;}
    .description, .button-group{display: none;}
    .product-layout {margin-bottom: 15px; display: inline-block; width: 100%;
        &:last-child{ margin-bottom: 0; }
        .image{float: $left;  border: 1px solid #eee; width: 70px; padding: 10px; margin-#{$right}: 20px;
            &:hover{border-color: $linkColor;}
        }
        .caption{float: $left; display: block; margin-top: -5px;
            h4{margin: 0 0 2px;
                a{ font-size: 14px; font-weight: bold; color: #444; &:hover{color: $linkColor;} }
            }
            .ratings{ margin-top: -5px; margin-bottom: 6px; }
            .price{ margin-bottom: 0; }
        }
        .price .price-new, .price span.price{font-size: 16px;}
    }   
}

/*[7]     BLOCK OUR BRAND*/
.module.so-manu-slider{display: inline-block; width: 100%; border: 1px solid #ddd; padding: 0 18px; border-bottom: none;
    h3.modtitle:before{ display: none; }
    h3.modtitle{margin: side-values(-5px -19px 0px -19px);
        a.view-all-brand{display: inline-block; float: $right;margin: side-values(15px 11px 0px 0px); font-size: 12px; text-transform: capitalize; font-weight: normal;
            @include if-ltr {
                &:after{content: "\f0da";font-family: FontAwesome; font-size: 12px; margin-left: 5px;}
            }
            @include if-rtl {
                &:before{content: "\f0d9";font-family: FontAwesome; font-size: 12px; margin-right: 5px;}
            }
        }
    }
    .wrap_manu_slider{padding: 20px 0 0;float: left;}
    .manu-slider-inner{margin: side-values(-20px -19px -21px -18px);
       .item{width: 50%;  float: $left; border-bottom: 1px solid #ddd; border-#{$right}: 1px solid #ddd;
            img:hover{opacity: 0.8;}
       } 
    }       
}
.brand_custom{ overflow: visible; }

/*[8]     BLOCK MODULE EXTRA SLIDER2*/
.module.custom-extra{
    margin-bottom: 10px;
    .so-extraslider .item{ 
        .item-wrap.style1{ border-color: #ddd; }
    }
    .so-extraslider .extraslider-inner{ border-color: #ddd; margin-top: 15px; }
    .so-extraslider .extraslider-inner .item-wrap-inner{ margin: 15px 0 10px; }
    .so-extraslider .owl2-controls{
        margin: 0; top: -45px; position: absolute; #{$right}: 0;  #{$left}: auto;
       .owl2-nav div{
            display: inline-block;
            width: 24px;
            height: 24px;
            background-repeat: no-repeat;
            background-position: center center;
            overflow: hidden;
            font-family: FontAwesome;
            font-size: 0;
            color: #c0c0c0;
            z-index: 501;
            cursor: pointer;
            background-color: #fff;
            border: 1px solid #ddd;
            opacity: 1; font-weight: normal;
            text-align: center;
            margin: 0 2px;
            position: static;
            &.owl2-prev{right: 30px;
                    &:before{content: "\f104"; line-height: 22px; font-size: 17px;}
            }
            &.owl2-next{ right: 0;
                    &:before{content: "\f105"; line-height: 22px; font-size: 17px;  }
            }
            &:hover{background-color: #264868; border-color: #264868; color: #fff;}
        }
    }
}

/*[9]     BLOCK MODULE LISTING TAB*/
.module.custom-listingtab{
    margin-bottom: 3px;
    .so-listing-tabs{
        margin: 0;
        .ltabs-wrap .ltabs-tabs-container{
            margin: 0 0 15px 0;
            border-bottom: 2px solid #ddd;
        }
        .ltabs-items-container .ltabs-items .ltabs-item .item-inner{
            margin: 0
        }
    }
    .so-listing-tabs .ltabs-wrap .ltabs-items-container,
    .so-listing-tabs .ltabs-items-container .ltabs-items-inner{ overflow: visible; }
    .so-listing-tabs .ltabs-tabs-container .ltabs-tabs li.tab-sel,
    .so-listing-tabs .ltabs-tabs-container .ltabs-tabs .ltabs-tab:hover{
        background: transparent;
        span{
            color: #333333;
            font-weight: bold;
            font-size: 16px;
            padding: 0;
        }
        &:after {
            background: #264868;
            width: 100%
        }
    }
    
    .so-listing-tabs .ltabs-tabs-container .ltabs-tabs li{
        padding: 0 20px ;
        margin: 0;
        border: none;
        position: relative;
        &:before {
            content: "";
            position: absolute;
            width: 2px;
            height: 14px;
            background: #c5c5c5;
            top: 50%;
            margin-top: -7px;
            #{$right}: 0;
           
        }
        &:after {
            content: "";
            width: 0;
            height: 2px;
            position: absolute;
            bottom: -2px;
            background: transparent;
            @include transition(all 300ms ease-in-out);
            #{$left}: 0;
        }
        &:first-child{
            padding-#{$left}: 0;
        }
        &:last-child{
            &:before {
                display: none;
            }
        }
        span{
            color: #888888;
            font-weight: bold;
            font-size: 16px;
            padding: 0;
        }
    }
    .products-list.grid .product-layout .product-item-container{
        border-color: #ddd;
        @include transition(all 300ms ease-in-out);
        &:hover{
            border-color: #aaa;
        }
        .right-block{
            padding: 0 5px;
            .caption h4 {
                margin-bottom: 7px;
                margin-top: 3px;
                a{
                    font-size: 14px;
                    font-weight: 600;
                }
            }
            .price{
                margin-bottom: 4px;
            }
        } 
    }
    .so-listing-tabs .owl2-controls{
        position: absolute;
        #{$right}: 0;
        #{$left}: auto;
        top: -45px;
        .owl2-nav .owl2-prev{
            margin-right: 5px;
        }
        .owl2-nav .owl2-prev, 
        .owl2-nav .owl2-next{
            border: 1px solid #dddddd;
            color: #dddddd;
            float: left;
            height: 24px;
            line-height: 20px;
            text-align: center;
            width: 24px;
            background-color: #FFF;
            position: static;
            margin-top: 0;
            top: auto;
            @include transition(all 300ms ease-in-out);
            &:before{
                font-size: 18px;
            }
            &:hover{
                background-color: #264868;
                border-color: #264868;
            }
        }
    }
    .so-listing-tabs .ltabs-wrap{
        position: relative;
    }
}

/*[10]    BLOCK BRAND SLIDER*/
.block-brand{
    width: 100%;
    display: inline-block;
    .item  img:hover{opacity: 0.8;}
    .owl2-carousel .owl2-item img{ width: auto; }
    .owl2-nav div{display: none!important; width: 36px; height: 36px; background-color: #fff; background-position: center center; overflow: hidden; font-family: FontAwesome; font-size: 0; color: #c0c0c0; opacity: 1; text-align: center;
        position: absolute; top: 50%;  margin-top: -18px; z-index: 501;@include transition(.2s); cursor: pointer; background-color: #fff; border: 1px solid #ddd; transition: all 0.3s ease 0s;
        &.owl2-prev{left: -33px;
            &:before{content: "\f104"; line-height: 35px; padding: 10px; font-size: 28px;}
        }
        &.owl2-next{ right: -33px;
            &:before{content: "\f105"; line-height: 35px; padding: 10px; font-size: 28px;  }
        }
        &:hover{background-color: $background; border-color: $linkColor; color: #fff;}
    }            
}
.spotlight7{
    background: url("#{$base-url-theme}icons/bg-brand.png") repeat bottom $left;
    padding: 20px 0;
    @media (min-width: 1200px){
        padding: 45px 0;
    }
}

/*[12]    BLOCK BANNER TOP*/
.module.custom-bannertop{
    padding: 0 15px;
    @media (min-width: 991px){
        margin-bottom: 40px;    
    }
    .sub-cate{
        position: relative;
        .sub-cate-info{
            display: none;
            z-index: 2;
        }
        &:before {
            opacity: 0;
            @include transition(all 300ms ease-in-out);
            left: 15px;
            top: 15px;
            right: 15px;
            bottom: 15px;
            content: "";
            background: rgba(0,0,0,0.4);
            position: absolute;
            z-index: 1;
            -moz-transform: scale(0);
            -webkit-transform: scale(0);
            -o-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
        }
        @media (min-width: 991px){
            .sub-cate-info{
                display: block;
                position: absolute;
                text-align: center;
                top: 48%;
                left: 50%;
                transform: translate(-50%,-50%);
                h2{
                    text-transform: capitalize;
                    color: #fff; 
                    letter-spacing: 1px;
                    position: relative;
                    margin-bottom: 15px;
                   &:before{
                        content: "";
                        width: 55px;
                        height: 1px;
                        position: absolute;
                        background: #fff;
                        bottom: -10px;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                }
                p{color: #fff;}
                a{
                    background: #264868;
                    color: #fff;
                    padding: 1px 13px;
                    text-transform: uppercase;
                    font-size: 9px;
                    margin-top: 13px;
                    display: inline-block;
                    @include transition(all 300ms ease-in-out);
                }
            }
        }
        &:hover{
            a{
                background: #fff;
                color: #264868;
            }
            
            &:before{
                opacity: 1;
                -moz-transform: scale(1);
                -webkit-transform: scale(1);
                -o-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
            }
        }
        img{
            @include transition(all 200ms ease-in-out);
            -webkit-transform: rotate(0);
            -webkit-backface-visibility: hidden;
        }
    }  
} 

/*[14]    BLOCK SERVICES*/
.module.custom-polyci{
    margin-bottom: 38px;
    .banner-info{
        padding: 25px 10px 17px;
        @include transition(all 250ms ease-in-out);
        color: #fff;
        cursor: pointer;
        text-align: center;
        img{
            display: inline-block;
            vertical-align: top;
            margin-#{$right}: 10px;
        }
        .banner-cont{
            display: inline-block;
            text-align: $left;
            a{
                color: #fff;
                font-size: 14px;
                font-weight: bold;
                @include transition(all 250ms ease-in-out);
            }
            p{
                font-size: 12px;
                margin: 0;
                line-height: 100%;
            }
        }
        &.banner-info1{
            background: #ade6cd;
            &:hover{
                background: #76eeb9;
            }
        }
        &.banner-info2{
            background: #9cc1e8;
            &:hover{
                background: #84b4e6;
            }
        }
        &.banner-info3{
            background: #bacf8c;
            &:hover{
                background: #b3cd7a;
            }
        }
        &.banner-info4{
            background: #ecaf6b;
            &:hover{
                background: #e9a354;
            }
        }
    }
}
.module.custom-bannerct{
    margin-bottom: 40px;
    img{
        @include transition(all 200ms ease-in-out);
        -webkit-transform: rotate(0);
        -webkit-backface-visibility: hidden;
        &:hover{
            opacity: 0.7;
        }
    }
    .box-ct1{  
        margin-bottom: 30px;
    }
}

/*[15]    BLOCK BANNER BT*/
.module.custom-bannerbt{
    padding: 0 30px;
    .banner-bt{
        position: relative;
        text-align: center;
        .banner-cont{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            .btn-df{
                font-size: 11px;
                font-weight: 600;
                text-transform: uppercase;
                color: #fff;
                background: #264868;
                height: 40px;
                line-height: 40px;
                display: inline-block;
                padding: 0 25px;
                letter-spacing: 1px;
                margin-top: 10px;
                &:hover{
                    opacity: 0.8;
                }
            }
        }
        &.banner-bt1{
            .banner-cont{
                margin: 0 10%;          
                padding: 20px;
                background: rgba(255, 255, 255, 0.9);
                box-shadow: 0 4px 2px -2px rgba(192, 192, 192, 0.6);
                h3{
                    font-size: 40px;
                    color: #222222;
                    font-weight: 300;
                }
                .des{
                    font-size: 14px;
                    font-weight: 300;
                    color: #777777;
                    margin-top: 10px;
                }
            }
        }
        &.banner-bt2{
            .banner-cont{
                color: #fff;
                padding: 20px;
                width: 100%;
                h1{
                    font-size: 80px;
                    text-transform: uppercase;
                    font-weight: 300;
                }
                p{
                    font-size: 28px;
                }
            }
        }
    }
}