Default page

View File Name : _module.scss

/************************************************************************************************
    MODULE HOME 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;
                }
            }
        }
    }    
}

/************************************************************************************************
    HTML BANNER-1 HOME PAGE
*************************************************************************************************/
.banner-sn-1{display: block; overflow: hidden; width: 100%;
    .img-1{float: $left;
    }
}

/************************************************************************************************
    MODULE DEALS
*************************************************************************************************/
.module.so-deals{clear: both; position: relative; margin: 0;
    @media (min-width: 1200px) {
        min-height: 400px;
    }
    div.products-list .product-layout .product-item-container {margin: 0;
        .button-group button.wishlist{margin: 0;}
        .right-block{width: 100%;margin-top: 5px;
            .caption{margin: 0;
                .rating{display: inline-block; width: 100%; margin: 5px 0 0 ;}
                .price{margin: 0;}
            }
        }
        .button-group{margin: 0;position: relative;z-index: 9;}
        .item-time {position: inherit; float: left; width: 100%; bottom: 0; padding-top: 10px; left:0; right: 0; 
            .item-timer .time-item {padding: 1px 0;background: #999;border: none; width: 23.5%; display: inline-block; text-align: center; margin-right: 2px;
                .num-time {font-size: 14px;color: #fff;margin: 0;border: none;height: 18px;line-height: 20px; font-weight: bold;}
                .name-time {font-size: 10px;color: #fff; margin: 0; height: 20px;line-height: 20px; text-transform: uppercase;}
            }
        }
        &:hover {
            .item-time .item-timer .time-item{background-color: $background;}
        }
    }
    .so-deal{margin: 0;
       .extraslider-inner{border: 0; margin-top: 20px; padding-bottom: 4px; overflow: visible;}
       .owl2-controls{margin: 0;}
       .owl2-nav{
            div{display: inline-block; 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: inherit; bottom: 43%; margin-top: -85px; z-index: 501;@include transition(.2s); cursor: pointer; background-color: #fff; border: 1px solid #ddd; transition: all 0.3s ease 0s; transform: scale(0);
                &.owl2-prev     {left: -17px;
                        &:before{content: "\f104"; line-height: 35px; padding: 10px; font-size: 28px;}
                      }
                &.owl2-next{ right: -17px;
                        &:before{content: "\f105"; line-height: 35px; padding: 10px; font-size: 28px;  }
                }
                &:hover{background-color: $background; border-color: $linkColor; color: #fff;}
            }
        }
        &:hover{
                                        
                .owl2-nav div{transform: scale(1);}
        }
    } 
        
}

/************************************************************************************************
    MODULE SUPER CATEGORIES
*************************************************************************************************/
.module.cus-style-supper-cate{
    position: relative;
    margin-top: -4px;
    margin-bottom: 40px;
    @media (min-width: 1200px) {
        min-height: 615px;
    }
    .spcat-items-container .product-thumb .image{ padding: 0 7px;}
    h3.modtitle{
        background: transparent;
        position: relative;
        border-bottom: none;
        margin: 0 0 30px;
        /*span, &:before{z-index: 2;}*/
        span.icon-color{
            padding: 1px 10px 0;
            i{
                font-size: 22px;
                position: relative;
                top: 2px;
                margin: side-values(0 5px 0 0);
            }
            &:before{  display: none;  }
            .arow-after{
                content: "";
                border-color: transparent transparent $linkColor transparent;
                border-style: solid;
                border-width: side-values(0 20px 40px 0);
                top: 0;
                width: 0;
                height: 0;
                position: absolute;
                display: inline-block;
                #{$right}: -20px;
            }
        }
        .line-color{
            position: absolute;
            height: 3px;
            width: 100%;
            background: $background;
            bottom: -3px;
            #{$left}: 0;
        }
    }
    @media screen and (-webkit-min-device-pixel-ratio:0){
        h3.modtitle{ white-space: nowrap; }
    }
    .so-sp-cat .spcat-tabs-container{
        position: static;
        .spcat-tabs{
            position: absolute;
            top: 5px;
            text-align: $right;
            z-index: 1;
            width: 100%;
            padding: 7px 0;
            border-bottom: none;
            border: none;
            #{$right}: 0;
            li{

                padding: 0 10px;
                float: none;
                display: inline-block;
                line-height: 8px;
                border-#{$right}: 1px solid #e9e9e9;
                border-#{$left}: none;
                span{
                    font-size: 13px;
                    color: #777;
                    text-transform: capitalize;
                    font-weight: normal;
                    line-height: normal;
                    &:before{display: none;}
                }
                @media screen and (-webkit-min-device-pixel-ratio:0){
                    span{ white-space: nowrap; }
                }
                &:last-child{ border: none; }
                &.tab-sel, &:hover{
                    background: none;
                    span{ color: $linkColor; }
                }
            }
        }
    }
    .spcat-wrap { padding: 0; }
    .main-left{
        width: 16.36%;
        float: $left;
        .banner-post-text{
            a{ display: block; clear: both; position: relative; }
        }
        .hot-category{
            .category-wrap-cat{
                padding: 0;
                .title-imageslider{
                    font-size: 16px;
                    color: #222;
                    font-weight: bold;
                    background: #eeeeee;
                    padding: 8px 15px;
                }
                .slider{
                    margin: 0;
                    border: 1px solid #eee;
                    border-top: 0;
                    bottom: 0;
                    padding: 10px 10px 0;
                    min-height: 237px;
                    .cat_slider_inner{
                        border: none;
                        .item{ float: none; display: block; text-align: inherit; margin: 0;
                            .cat_slider_title{
                                margin: 0;
                                a{ color: #444; font-size: 13px; padding: 5px 0;  font-weight: 700;
                                    i{ margin: 0 5px }
                                    &:hover{ color: $linkColor; }   
                                }
                            }
                            &:hover{opacity: 1;}
                        }
                    }
                }
                @media screen and (-webkit-min-device-pixel-ratio:0) {
                    .slider{ min-height: 237px; }
                }
            }
        }
    }
    .main-right{
        width: 83.64%;
        float: $left;
        position: relative;
        .banner-pre-text{
            width: 80.05%;
            position: relative;
            a{ display: block; clear: both; position: relative; }
            .owl2-controls{
                position: absolute;
                bottom: 0;
                padding: 5px;
                width: 100%;
                text-align: center;
                #{$left}: 0;
                .owl2-dots{
                    .owl2-dot{
                        height: 10px;
                        width: 10px;
                        margin: 0 3px;
                        border-radius: 10px;
                        background: #dbd3d1;
                        display: inline-block;
                        &.active{ background: #fff;}
                        &:hover{ background: $background; }
                    }
                }
            }
        }
        .spcat-items-container{
            margin: 0;
            padding: 0; border: none;
            &.show-pre .ltabs-items-inner{
                .ltabs-item{
                    width: 20%;
                    float: left;
                    &:nth-child(1){
                        width: 19.95%;
                        position: absolute;
                        top: 0;
                        #{$right}: 0;
                        .image{ margin: 0 0 10px; }
                        .product-item-container{ border-bottom: none; min-height: 290px }
                    }
                }
            }
            .ltabs-items-inner{ position: static;
                .ltabs-item{ width: 20%; float: $left; }
            }
            &.products-list.grid{  
                .product-layout{
                    .product-item-container{
                        position: relative;
                        min-height: 275px;
                        margin: 0;
                        padding: 0;
                        border-width: side-values(1px 1px 1px 0);
                        overflow: hidden;
                        .right-block{float: $left;margin-top: 0; width: 100%;padding: 0 20px;
                            .caption{padding: 0;
                                h4{ margin-bottom: 10px; } 
                                a{ color: #444; font-weight: normal;}
                                .rating{margin: 0 0 5px 0;}
                            }
                        }
                        &:hover{ box-shadow: none; border-color:  #eee;
                            .right-block{
                                .caption{
                                    h4 a{color: $linkColor; }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/************************************************************************************************
    MODULE LASTET BLOG
*************************************************************************************************/
div.so-latest-blog.module{clear: inherit;
    h3.modtitle{border: 0; margin-bottom: 0; margin-top: 12px;
        &:before{ display: none; }
        span{background: transparent;color: #222; font-size: 18px;text-transform: uppercase; padding: 0; line-height: inherit; font-weight: bold;
            &:before{display: none;}
        }
    }           
    .blog-external-simple{
        margin: 0;
        .media-body{ padding: 0; }
        .head-button{ margin: 0; border: 0; }
        .media{ margin: 0 0 20px;
            .media-date-added{color: #666; width: 70px;height: 70px;float: $left;background-color: #eeeeee;font-size:14px; text-align: center; text-transform: uppercase; padding-top: 12px; margin-#{$right}: 20px;
                span{font-weight: bold;color: #222;}
            }
            .item .media-body {
                .media-heading{
                    a{color: #444; font-size: 14px; font-weight: bold;
                        &:hover{color: $linkColor;}  
                    }                        
                }
                .description{margin-bottom: 0; font-size: 12px; line-height: 19px;overflow: hidden;}
            }
            &:last-child{
                margin: 0;
            }
        }          
    } 
}

/************************************************************************************************
    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;}
    }   
}

/************************************************************************************************
    TESTIMONIAL
*************************************************************************************************/
.testimonial {
    .clients_say{
        position: relative; top:0; padding: 25px 20px 20px; background-color: #eee;
    }
    .owl-carousel{background: none;}
    .block-title{position: relative;
         h3{font-size: 18px; font-weight: bold; margin:0; text-transform: uppercase; margin-bottom: 18px;color: #222;}
    }
    .image{float: $left; width: 65px; background-color: #eee;
        img{width: 65px; height: 65px; border-radius: 4px;
            &:hover{opacity: 0.8;}
        }
    }
    .block_content{background-color: #eee; margin: 0!important; padding: 0!important;}
    .block-info { font-style: italic; position: relative; top: -4px; background-color: #eee; text-align: $left!important; margin-#{$left}: 80px;     
        .author {padding: 17px 0px 0;font-size: 15px; font-weight: 600;margin-top: -3px; font-style: normal; color: #e74c3c; margin-bottom: 0; }
        .text{ color: #444; }
    }
    .extraslider-inner,
    .item-wrap-inner{
        overflow: visible;
    }
    .owl2-controls {position: absolute; top: -40px; #{$right}: -3px;
        .owl2-dots{display: none !important;} 
        .owl2-nav{
            float: $right;
            div{ transform: translateY(0%); width: auto; font-size: 0; font-weight: bold;position: static; padding: 5px;  cursor: pointer; display: inline;background: none;
                &.owl2-prev:before{content: "\f104"; font-family: FontAwesome; font-size: 20px;}
                &.owl2-next:before{content: "\f105"; font-family: FontAwesome; font-size: 20px;}
                &:hover{background-color: transparent !important; color: $linkColor;}
            }
        }     
    }
}

/************************************************************************************************
    BRAND
*************************************************************************************************/
.block-brand{
    border: 1px solid #ddd;
    padding: 15px;
    width: 100%;
    display: inline-block;
    .item  img:hover{opacity: 0.8;}
    .owl2-carousel .owl2-item img{ width: auto; }
    .owl2-nav div{display: inline-block; 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;}
    }            
}