@import "bootstrap";
@import "plugin/fontface";
@import "custom/header";
@import "custom/icomoon";
@import "custom/footer";
@import "custom/sprite";
@import "custom/star-rating";
@import "plugin/jquery.fancybox-1.3.4";
@import "product-listing";

@media screen and (min-width: $screen-xs) {
    html{
        font-size: 87.5%;
    }
}
@media screen and (min-width: $screen-sm) {
    html{
        font-size: 100%;
    }
}
html{ 
 font-size: 100%;
}
body{
    padding-bottom: 0px;
}

.rmv-margin{
    margin: 0!important;
}
.rmv-padding {
    padding: 0;
}
.text-ellipsis{
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
}
.border-top{
    border-top: 1px solid $border-color; 
}
.border-bottom{
    border-bottom: 1px solid $border-color;
}
.transition5s{
    @include transition(all 0.5s ease);
    *{
         @include transition(all 0.5s ease);
    }
}
.rmv-padding-top, .rmv-padding-vertical {
    padding-top: 0!important;
}

.rmv-padding-horizontal, .rmv-padding-right {
    padding-right: 0!important;
}

.rmv-padding-bottom, .rmv-padding-vertical {
    padding-bottom: 0!important;
}

.rmv-padding-horizontal, .rmv-padding-left {
    padding-left: 0!important;
}
.margin-top, .margin-vertical {
    margin-top: 10px;
}
.margin-bottom, .margin-vertical {
    margin-bottom: 10px;
}
.margin-left, .margin-horizontal {
    margin-left: 10px;
}
.margin-right, .margin-horizontal {
    margin-right: 10px;
}
.padding{padding: 10px;}
.padding-horizontal, .padding-left{
    padding-left: 10px;
}
.padding-horizontal, .padding-right{
    padding-right: 10px;
}
.padding-vertical, .padding-top{
    padding-top: 10px;
}
.padding-vertical, .padding-bottom{
    padding-bottom: 10px;
}
.dark{
    color:$text-color;
}
.dark-bg{
    background-color:$dark;
}
.light{
    color:$light;
}
.light-bg{
    background-color:$light;
}
.text-color{
    color: $text-color;
}
.bpfc{
    color: $brand-primary !important;
}
a{
    text-decoration: none !important;
    cursor:pointer;
    outline: 0;
}
.head-title{
      font-size: 19px;
        font-weight: $font-weight-light;
        padding: 15px 0;
}
.form-control:focus{
    box-shadow: none !important;
}
ul, ol{
    list-style: none;
    margin: 0;
    padding:0;
    li{
        list-style-type: none;
        margin: 0;
        padding:0;
    }
}
 h1, .h1-style{
   font-size: rem(24);
    font-weight: 600;
}
h2, .h2-style{
    font-size: rem(22);
    font-weight: 600;

}
h3, .h3-style{
    font-size: rem(20);
    font-weight: 600;
}
h4, .h4-style{
    font-size: rem(18);
    font-weight: 400;
}
h5, .h5-style{
    font-size: rem(16);
    font-weight: 400;
}
h6, .h6-style{
    font-size: rem(14);
    font-weight: 600;
}
.text-center{
    text-align: center !important;
}
.text-right{
    text-align: right !important;
}
.text-left{
    text-align: left !important;
}
h1,h2,h3,h4,h5,h6,p{
    margin:0;
    padding: 0 0 8px;
}
.font-light{
   font-weight: $font-weight-light; 
}
 .font-rglr{
   font-weight: $font-weight-rglr; 
}  
.font-semibold{
    font-weight: $font-weight-semibold;
}
.font-bold{
    font-weight: $font-weight-bold;
}
textarea{
    resize: none;
}
.pos-rel{
    position:relative;
}
.right-top{
    right:0;left:auto;top:0;bottom:auto;
}
.left-top{
    left:0;right:auto;top:0;bottom:auto;
}
.right-bottom{
    right:0;left:auto;bottom:0;top:auto;
}
.left-bottom{
    left:0;right:auto;bottom:0;top:auto;
}
input,textarea,select {
    outline: 0 !important;
}

#content-wrapper{
    margin-top: 15px;
}

input[type="checkbox"]:not(:checked),[type="checkbox"]:checked {
    visibility: hidden;
    position: absolute;
}

[type="checkbox"]:not(:checked)+label,[type="checkbox"]:checked+label {
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    font-size: rem(13);
}

[type="checkbox"]:not(:checked)+label:before,[type="checkbox"]:checked+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 15px; 
    height: 15px; 
    border: 1px solid lighten($gray-base, 83.7%);
    background: $light;
    border-radius: 1px;
}
[type="checkbox"]:not(:checked)+label:after,[type="checkbox"]:checked+label:after {
    content: "\2714";
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 12px;
    color: lighten($gray-base, 67.2%);
    transition: all .2s;
}
[type="checkbox"]:not(:checked)+label:after {
    opacity: 0;
}
[type="checkbox"]:checked+label:after{
    opacity:1;
}

input[type="radio"]:not(:checked),
[type="radio"]:checked {
    position: absolute;
    left: -9999px
}

[type="radio"]:not(:checked)+label,
[type="radio"]:checked+label {
    position: relative;
    padding: 0 0 0 30px;
    cursor: pointer;
}

[type="radio"]:not(:checked)+label:before,
[type="radio"]:checked+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    border: 1px solid lighten($gray-base, 72%);
    border-radius: 50%;
}

[type="radio"]:not(:checked)+label:after,
[type="radio"]:checked+label:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 4px;
    font-size: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all .2s;
}

[type="radio"]:checked+label:after {
    background-color: $brand-primary;
}
/*--------------------Radio style end--------------------------*/

.btn:focus {
    outline: 0 !important;
}

.popupShowLogin{
    display: none;
}
.popupsectionlogin{
    &:before{
        content: "";
        background: rgba(230, 230, 230, 0.9);
        position: fixed;
        height: 100%;width:100%;
        top:0;left:0; bottom: 0;right:0;
        z-index: 10000;
    }
    .quickpopup{
        position: absolute;
        z-index: 99999;
        width: 100%;
        height: 100%;
        top:0;
        left:0;
    }
}
.quickpopup{
        display: inline-block;
        vertical-align: middle;
}
.addbanner img {
    max-width: 100%;
    height: auto;
    width: auto;
}
.results-per-page{
    display: none;
}
.featured{
    background: darken($brand-success,20%);
    width: 35px;
    line-height: 18px;font-size: 11px; color: $light;
    display: block;
    position:absolute;
    z-index: 100;
    margin: 1px;
}
.addbanner{
    margin-bottom:10px;
    background: $light;
}
.fade-text{
    color: lighten($text-color,50%);
}
/*--------------------------------------------Common Messages--------------------------------------------------*/
.message_success, .message_info, .message_error, .warning, .message_error_custom{
    padding: 10px 25px 10px 10px;
    margin: 15px;
    position: relative;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 20px;
    &.error-xs{
        font-size: 12px;
        padding: 5px 10px;
    }
}
.message_success, .message_info{
    border: 1px solid #97c455;
    color: #64971a;
    background-color: #f1ffdc;
}
.warning{
    border: 1px solid #ecbf58;
    color: #d3a335;
    background-color: #fff8e7;
}
.message_error, .message_error_custom{
    border: 1px solid #d84a49;
    color: #d84a49;
    background-color: #ffe9e9;
}
.message_validation{
    color: #d9534f;
    font-weight: 600;
    font-size: 13px;
    padding: 5px 0 0 0;
    display: block;
    position:relative;
    white-space: nowrap;
    text-align: left;
    &:before{
        content: "";
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }
    &.hide{
        display: none;
    }
}
.notifyClose {
    position: absolute;
    right: 2px;
    &:before{
      content: "\e905";
        font-family: 'icomoon' !important;
        font-size: 20px;
    } 
}
.input-group{
    .message_validation{
        position: absolute;
        bottom: -36px;
        z-index: 1000;
        padding: 5px 10px;
        background: $light;
        border: darken($gray-lighter,10%) 1px solid;
        border-radius: 3px;
    }
}
.mndty{
    color:#ff0000;
}
/*--------------------Alert css--------------------------*/

#popup_container{
    border-radius: 5px;
    overflow: hidden;
    h4{
        background: $gray-lighter;
        padding: 10px;
    }
    #popup_content{
            padding: 20px;

    }
    #popup_message{
        margin-bottom: 10px;
    }
}
/*--------------------Error page--------------------------*/
.errorpage {
    h3 {
        font-size: 29px;
        padding: 0 0 10px;
        color:lighten($gray-base, 29%);
        margin: 0;
    }
     h2 {
        font-size: 60px;
        padding: 35px 0 20px;
        margin: 0;
    }
     h4 {
        font-size: 15px;
        color:  lighten($gray-base, 39.5%);
        padding: 0 0 20px;
        margin: 0;
    }
}
/*--------------------Tooltip--------------------------*/

.cmn-tooltip{
    .tlptxt{
        background: $dark;
        color: $light;
        padding: 2px 12px;
         display: block;
          left: 0;
          top: 0;
          position: absolute;
          width: 150px;
          font-size: 11px;
        &:before{
            width: 0;height: 0;
            border-left:5px solid $dark;
            border-top:5px solid transparent;
            border-bottom:5px solid transparent;
            content: "";
            display: block;
        }
    }
            
}
 
.buttonDisable{
    color: $light !important;
    background-color: $brand-primary;
    background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
    background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) );
    -webkit-animation: move 2s linear infinite;
    -webkit-background-size: 50px 50px;
    background-size: 50px 50px;
    -moz-animation: move 2s linear infinite;
    background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
}
		
		
		
		@-webkit-keyframes move {
		    0% {
		       background-position: 0 0;
		    }
		    100% {
		       background-position: 50px 50px;
		    }
		}
/*-------------------Banner-------------------------------*/
.main-slider-content{overflow: hidden;text-align: center;
    img{
        display: inline-block;
        width: 100%;
    }
}
/*---------------------category landing page----------------------------*/
.slick-slide {
    float: left;
    margin-right:1px;
 img{
    max-width:100%;
    height:auto;
    }
}
.slick-slider {
    overflow: hidden;
    position: relative;
}
.margin-btm-30{
    margin-bottom: 30px;
}
.subscription-blk{
    display: none;
}
/*---------------------reset password----------------------------*/
.reset-pw{
    padding: 20px;
    margin: 0 auto;
    max-width: 500px;
    ul{
        padding-top: 10px;
    }
}
.help {
    position: absolute;
    right: -15px;
    top: 10px;
    width: 12px;
    .pw-text {
        width: 230px;
        padding: 8px 10px;
        background: $brand-primary;
        color: $light;
        position: absolute;
        right: -100px;
        bottom: 28px;
        border-radius: 5px;
        display: block;
        font-size: rem(11);
        line-height: 14px;
        -webkit-transform: scale(0,0);
        -ms-transform: scale(0,0);
        -o-transform: scale(0,0);
        transform: scale(0,0);
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        &:before{
            position: absolute;
            bottom: -5px;
            left: 115px;
            content: "";
            width: 0;
            height: 0;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            border-top: 5px solid $brand-primary;
        }
    }
    .popover {
        width: 230px;
        padding: 8px;
        background: $brand-primary;
        color: $light;
        border-radius: 5px;
        display: block;
        font-size: rem(11);
        line-height: 14px;
        z-index: 999;
        top: 3px !important;
        &:before{
            position: absolute;
            top: -5px;
            left: 110px;
            content: "";
            width: 0;
            height: 0;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            border-bottom: 5px solid $brand-primary;
        }
    }
    .icon-question{
        color: $brand-primary;
        padding: 0px 0 5px;
    }
    &:hover{
        .pw-text{
            -webkit-transform: scale(1,1);
            -ms-transform: scale(1,1);
            -o-transform: scale(1,1);
            transform: scale(1,1);
        }
    }
}