/* --------------------------------------------------------------------------
 * jThemes Studio : Home Twelve - Modern Fashion E-Commerce Template
 *
 * file           : home-twelve.css
 * Desc           : Home Twelve Template - Stylesheet
 * Version        : 
 * Date           : 
 * Author         : jThemes Studio
 * Author URI     : 
 * Email          : 
 *
 * jThemes Studio. Copyright 2017. All Rights Reserved.
 * -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
 *  Home Twelve Template - Table of Content

  1 - General
    1.1 - Preloader
    1.2 - Global properties (body, common classes, structure etc)
    1.3 - Page section block
    1.4 - Typography (section title, links, page dividers)
    1.5 - Buttons 
    1.6 - Form / Input / Textarea  
    1.7 - Theme Colors
    1.8 - Theme Fonts
    1.9 - Rating Stars
    
  2 - Header

  3 - Home 
    3.1 - Main Slider
    3.2 - Promotion
    3.3 - collection   
    3.4 - Our Products  
    3.5 - Home Blog
              
  4 - Footer

  5 - Popups
    5.1 - To Top
    5.2 - Product Preview 
    5.3 - Subscribe

  6 - Responsive

 * -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i|Montserrat:400,500,600,700,800,900');

/******************************* 
    1 - GENERAL CSS STARTS 
********************************/

/*---------------- 1.1 Preloader Starts ------------------*/
#loading {  
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 2000;   
    top: 0px;
    background: #fff; 
}

.loader {
    background-position: center center;
    background-image:url(../img/common/loadding-page.gif);
    background-repeat:no-repeat;
    text-align: center;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
/*---------------- 1.1 Preloader Ends ------------------*/

/*---------------- 1.2 Global properties (body, common classes, structure etc) Starts ----------------------*/

body {
    background-color: #fff ;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #999;   
    overflow-x: hidden; 

    transition: 0.3s ease 0s;
    -webkit-transition: 0.3s ease 0s;
    -ms-transition: 0.3s ease 0s;
}
.boxed .wrapper {
    background-color: #ffffff;
    margin: 0 auto;
    max-width: 1200px;
}

@media (min-width: 1199px) {
    #home-six {padding: 50px 90px;}
}
.no-padding{
    padding-left: 0;
    padding-right: 0;
}
.no-margin{margin: 0;}
.owl-carousel .owl-item img {width: auto;}
img{max-width: 100%; height: auto; transition: all 250ms ease-in-out 0s; -webkit-transition: all 250ms ease-in-out 0s;}
.light-bg {background-color: #f2f2f2;}
.white-bg{ background-color: #fff;}
.black-bg{ background-color: #000;}
.rel-div{position: relative;}
.mask-overlay,.theme-color-mask,.white-mask{    
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}
.mask-overlay{ background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;}
.white-mask{ background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;}
.title-wrap{
    display: inline-block;
    width: 100%;
    vertical-align: middle;   
}
.title-wrap p{font-size: 16px;}
.section-title, .main-title, .title-1,.title-2,.post-title, .product-title, .widget-title {
    color: #000;  
    text-transform: uppercase;  
    letter-spacing: 1px;
    font-weight: 600
}
.main-title {font-size: 36px;;}
.section-title { font-size: 18px; }
.title-1{ font-size: 24px; }
.title-2{ font-size: 14px; }
.post-title{font-size: 15px;}
.product-title { font-size: 14px; }
.widget-title {font-size: 18px;}
.white-color{color: #fff;}
.white-color .section-title, .white-color p{ color: #fff;}
.black-color {color: #000000;}
.gray-color{color: #999;}
.green-color {color: #99cc00;}
.red-color {color: #cc0000;}
.block-inline{
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    position: relative;
}
.list-items li{
    display: inline-block;
    margin: 0 5px;
}
.list-items{ margin-bottom: 0; }


/*-- Tags --*/
.sale-tag, .new-tag {
    background-color: #ffffff;
    color: #cc0000;
    font-size: 14px;
    font-weight: 600;
    height: 30px;
    line-height: 28px;
    position: absolute;
    right: 15px;
    text-align: center;
    text-transform: uppercase;
    top: 15px;
    width: 60px;
}
.new-tag {right: auto; left: 15px; color: #000;}
.bubble {
    bottom: 80%;
    display: table;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: auto;
}
.hot-tag, .green-tag{    
    border-radius: 2px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    position: relative;
    z-index: 2;
}
.hot-tag {background-color: #cc0000;}
.green-tag {background-color: #00b16a;}
.hot-tag::after, .green-tag::before {
    border-bottom: 6px solid rgba(0, 0, 0, 0);   
    bottom: -6px;
    content: "";
    left: 15px;
    position: absolute;
}
.hot-tag::after, .hot-tag::before{border-left: 4px solid #cc0000;}
.green-tag::after, .green-tag::before {border-left: 4px solid #00b16a;}
@media (max-width: 1199px) {
    .bubble {
        bottom: 15px;
        left: auto;
        right: 50px;
    }
}
/*------------------- 1.2 Global properties (body, common classes, structure etc) Ends -----------------*/

/*---------------------- 1.3 Page section block Starts ----------------------------*/
.sec-space {padding-bottom: 100px; padding-top: 100px;}
.sec-space-bottom {padding-bottom: 100px;}
.sec-space-top {padding-top: 100px;}
.ptb-10{
    padding-bottom: 10px;
    padding-top: 10px;
}
.pb-10{padding-bottom: 10px;}
.pt-10{padding-top: 10px;}
.ptb-15 {
    padding-bottom: 15px;
    padding-top: 15px;
}
.pt-25{padding-top: 25px;}
.pb-25{padding-bottom: 25px;}
.pt-30{padding-top: 30px;}
.pb-30{padding-bottom: 30px;}
.ptb-50{
    padding-bottom: 50px;
    padding-top: 50px;
}
.pt-50{padding-top: 50px;}
.pb-50{padding-bottom: 50px;}
.pt-70{padding-top: 70px;}
.pb-70{padding-bottom: 70px;}
.ptb-70{
    padding-bottom: 70px;
    padding-top: 70px;
}
.mb-30 {margin-bottom: 30px;}

@media (max-width: 991px) {
    .sx-mt-50 {margin-top: 50px;}
}
@media (max-width: 767px){
    .sec-space {padding-bottom: 70px; padding-top: 70px;}
    .sec-space-bottom {padding-bottom: 70px;}
    .sec-space-top {padding-top: 70px;}
}
@media (min-width: 1200px){
    .container {padding-left: 0; padding-right: 0;}
}
/*---------------------------- 1.3 Page section block Ends ---------------------------*/

/*--------------------------- 1.4 Typography (section title, links, page dividers) Starts -------------------------- */
a:hover 
a:active,
a:focus,
.btn:hover, .btn:focus,.btn:active{  
    text-decoration: none;
    outline: 0;
}
a:hover,
a:active,
a:focus {
    color: #cccccc;
}
a, .btn {
    -ms-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    color: #000;
}
a:hover,
a:active,
a:focus {
    text-decoration: none;
    -ms-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

p {
    margin-bottom: 15px;
    line-height: 1.7;
}
ul,
ol {
    padding-left: 0;
    list-style: none;
    margin-bottom: 20px;
}
ul ul,
ol ul,
ul ol,
ol ol {
    padding-left: 20px;
}
h2,h3,h4,h5,h6{
    margin-top: 10px;
    margin-bottom: 10px;
}

.divider-1 {display: inline-block; width: 100%;  border-color: rgba(204, 204, 204, 0.5); margin-bottom: 30px;  margin-top: 30px;}

/*------------------------ 1.4 Typography (section title, links, page dividers) Ends ---------------------- */

/*--------------------------- 1.5 Buttons Starts ---------------------- */

.theme-btn-1, .theme-btn-2, .theme-btn, .btn-black, .btn-white {
    display: inline-block;
    vertical-align: middle;    
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);    
    position: relative;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;

    -moz-osx-font-smoothing: grayscale;    

    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
}
.theme-btn-1:before, .theme-btn-2:before, .theme-btn:before, .btn-black:before, .btn-white:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -ms-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -ms-transition-property: top, right, bottom, left;
    -webkit-transition-property: top, right, bottom, left;
    transition-property: top, right, bottom, left;
}
.theme-btn-1:before{border: #454545 solid 4px;}
.theme-btn:before, .theme-btn-2:before {border: transparent solid 4px;}
.btn-black:before{border: #000 solid 4px;}
.btn-white:before{border: #fff solid 4px;}
.theme-btn-1:hover:before, .theme-btn-1:focus:before,
.theme-btn-2:hover:before, .theme-btn-2:focus:before,
.theme-btn:hover:before, .theme-btn:focus:before,
.btn-black:hover:before, .btn-black:focus:before,
.btn-white:hover:before, .btn-white:focus:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
}
.theme-btn:hover:before, .theme-btn:focus:before{
    border: #999 solid 4px;  
}
.theme-btn-2:hover:before, .theme-btn-2:focus:before{
    border: #fff solid 4px;  
}
.theme-btn:hover, .theme-btn:focus{
    background-color: #999;
    border-color: #999;
}
.btn-black:hover, .btn-black:focus{
    background-color: #000;
    border-color: #000;
}
.btn-white:hover, .btn-white:focus {
    background-color: #fff;
    border-color: #fff;
}
.theme-btn-2:hover, .theme-btn-2:focus {
    background-color: #fff;
    border-color: #fff;
}
.theme-btn, .theme-btn-1, .btn-black, .btn-white, .theme-btn-2 {
    text-align: center;
    border: 1px solid #000;
    border-radius: 0;
    color: #000000;
    background-color: transparent;
    display: inline-block;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    min-width: 170px;
    padding: 0 20px;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 1px;
    font-weight: 600;
}
.theme-btn-1 {    
    background-color: #454545;
    border: 1px solid #454545;
    color: #ffffff;
}
.theme-btn-2 {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
}
.btn-black {    
    background-color: #000;
    border: 1px solid #000;
    color: #ffffff;
}
.btn-white {
    background-color: #fff;
    border: 1px solid #fff;
    color: #000;
}
.btn-white:hover, .btn-white:focus{
    color: #000;
}
.theme-btn-1:hover, .theme-btn-1:focus, .theme-btn:hover, .theme-btn:focus, .btn-black:hover, .btn-black:focus{
    color: #fff;
}
.theme-btn i {
    margin-right: 6px;
    vertical-align: middle;
}
.btn.small-btn{
    height: 40px;
    line-height: 40px;
    min-width: 115px;
    font-size: 13px;
}
.btn.larg-btn{
    height: 60px;
    line-height: 60px;
    min-width: 200px;
}
.btn .btn-txt {
    float: left;
    width: 75%;
}
.btn .btn-icon {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    float: right;
    position: relative;
    padding-left: 8px;
    width: 20%;
}
.btn-2 {
    min-width: 225px;
}
label.btn input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    text-transform: uppercase;
}

/*------------------------ 1.5 Buttons Ends ---------------------------- */

/*----------------------- 1.6 Form / Input / Textarea Starts --------------------------- */

.form-group {
    margin-bottom: 20px;
}
.form-control, .input-group-addon, .bootstrap-select .btn {
    background-color: rgba(0, 0, 0, 0);
    border-color: #e7e8ec;
    border-radius: 0;
    box-shadow: none;
    color: #000;
    font-size: 13px;
    height: 52px;
    line-height: 50px;
    padding: 10px 20px;
}
.form-control.submit-btn{
    height: auto;
    line-height: normal;
}
.form-alert{
    margin: 0;
}

/*-- Checkbox/Radiobox Starts --*/
.form-group [type="checkbox"], .form-group [type="radio"]{
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.form-group .checkbox-inline, .form-group .radio-inline {
    margin: 0;
    padding-left: 0;
    vertical-align: middle;
    vertical-align: -moz-middle-with-baseline;
}
.form-group [type="checkbox"] + span, .form-group [type="radio"] + span {
    cursor: pointer;
    vertical-align: middle;
}
.form-group [type="checkbox"] + span::before{   
    color: #000;
    content: "\56";
    font-family: "ElegantIcons";
    font-size: 20px;
    margin-right: 10px;
    vertical-align: middle;
    line-height: 0;
}
.form-group [type="checkbox"]:checked + span:before {  
    content: "\5a";
    font-family: "ElegantIcons";
}
.form-group [type="radio"] + span::before{   
    color: #000;
    content: "\5b";
    font-family: "ElegantIcons";
    font-size: 20px;
    margin-right: 3px;
    vertical-align: middle;
    line-height: 0;
}
.form-group [type="radio"]:checked + span:before {  
    content: "\5c";
    font-family: "ElegantIcons";
}
/*-- Checkbox/Radiobox Ends --*/

::-webkit-input-placeholder {
    color: #000 ;
}
:-moz-placeholder {
    color: #000;
}
::-moz-placeholder {
    color: #000;
}
:-ms-input-placeholder {
    color: #000;
}

.form-control::-webkit-input-placeholder {
    color: #7e848e;
    opacity: 1;
}
.form-control::-moz-placeholder {
    color: #7e848e;
    opacity: 1;
}
.form-control::-ms-input-placeholder{
    color: #7e848e;
    opacity: 1;
}
.form-control:focus {
    background-color: transparent;
    border-color: #e7e8ec;
    box-shadow: none;
    outline: 0 none;
}
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus{
    outline: 0;
}
input:focus::-webkit-input-placeholder {
    color: transparent !important;
}
input:focus:-moz-placeholder {
    color: transparent !important;
}
input:focus::-moz-placeholder {
    color: transparent !important;
}
input:focus:-ms-input-placeholder {
    color: transparent !important;
}
textarea:focus::-webkit-input-placeholder {
    color: transparent !important;
}
textarea:focus:-moz-placeholder {
    color: transparent !important;
}
textarea:focus::-moz-placeholder {
    color: transparent !important;
}
textarea:focus:-ms-input-placeholder {
    color: transparent !important;
}

/*--Bootstrap Select--*/
.bootstrap-select .btn .filter-option{
    color: #000000;
    line-height: 30px;
}
.bootstrap-select.btn-group .dropdown-toggle .caret{
    border: none;
    margin-top: 0; 
    right: 30px;
    top: 0;
}
.bootstrap-select.btn-group .dropdown-toggle .caret:after{
    content: "\f107";
    font-family: fontawesome;
    font-size: 14px;
    color: #fff;
}
.bootstrap-select .btn-default.active.focus, .bootstrap-select .btn-default.active:focus, .bootstrap-select .btn-default.active:hover, 
.bootstrap-select .btn-default.focus:active, .bootstrap-select .btn-default:active:focus, .bootstrap-select .btn-default:active:hover, 
.bootstrap-select > .dropdown-toggle.btn-default.focus, .bootstrap-select > .dropdown-toggle.btn-default:focus, 
.bootstrap-select > .dropdown-toggle.btn-default:hover {
    background-color: transparent;
    border-color: #cccccc;
}
.bootstrap-select .dropdown-toggle:focus {
    outline: 0 none !important;
    outline-offset: 0;
}
/*---------------------------- 1.6 Form / Input / Textarea Ends ------------------------------ */


/*---------------------------------- 1.7 Content Middle Starts -------------------------------- */
.flex-item {position: relative;}
.flex-item.overlay::before {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.flex-wrap {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.flex-caption {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
}
.flex-caption.middle {justify-content: center; text-align: center;}
.flex-caption.top {justify-content: flex-start;}

/*------------------------ 1.7 Content Middle Ends ------------------------ */

/*--------------------------1.8 Theme Fonts Starts------------------- */

.font-2, h1,h2,h3,h4,h5,h6, .owl-nav-1 .owl-prev, .owl-nav-1 .owl-next {font-family: 'Montserrat', sans-serif;}

.fsz-8 { font-size: 8px; }

.fw-900{ font-weight: 900; }
.fw-600{ font-weight: 600; }
.fw-500{ font-weight: 500; }
.fw-300{ font-weight: 300; }

.upper-case {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}
.trans-none {text-transform: none;}

.text-highlights.black {
    background: #313131 none repeat scroll 0 0;
}
.text-highlights.blue {
    background: #31aae2 none repeat scroll 0 0;
}
.text-highlights {
    color: #ffffff;
    padding: 0 5px;
}

@media screen and (max-width:767px) {
    body, p {font-size: 13px;} 
}
/*-------------------------1.8 Theme Fonts Ends--------------------- */

/*-------------------------  1.9 - Rating Stars Starts --------------------- */

/*.rating .star {
    cursor: pointer;     
}*/
.rating span.star::before{
    color: #ffd33b;
    content: "\e033";
    font-family: "ElegantIcons";
}
.rating span.star.half:before{
    color: #ffd33b;
    content: "\e032";
    font-family: "ElegantIcons";
}

/*------------------------- 1.9 - Rating Stars Ends --------------------- */

/******************************* 
    1 - GENERAL CSS ENDS 
********************************/

/******************************* 
    2 - HEADER CSS STARTS 
********************************/
.header-six .main-header {
    background-color: #fff;
    bottom: 0;
    display: inline-block;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 300px;
    z-index: 10;
}
.header-six .header-wrap{   
    display: inline-block;
    vertical-align: middle;    
    width: 100%;
    padding: 70px 50px;
    z-index: 1;
    transition: all ease-out 0.4s;
    -webkit-transition: all ease-out 0.4s;
    z-index: 11;
}
.header-six .header-logo {margin-bottom: 50px;}

/*Scoller*/
.mCSB_inside > .mCSB_container, .mCustomScrollBox{margin-right: 0;  overflow: visible;}


/* TOP ELEMENTS */
.header-six .top-elements {
    position: absolute;
    right: 15px;
    width: 55px;
    z-index: 555;
}
.header-six .top-elements > div {
    display: inline-block;
    margin: 10px 0;
    position: relative;
}


/*--- Header Search ---*/
.header-six .search-form-wrap {display: inline-block; vertical-align: middle; width: 50px; text-align: center;}
.header-six .search-form-wrap .search-icon {
    background-color: rgba(0, 0, 0, 0);
    border: medium none;
    cursor: pointer;
    font-size: 20px;
    color: #000;
}
.header-six .popup-box {
    background: rgba(255, 255, 255, 0.95) none repeat scroll 0 0;
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
}
.header-six .popup-box > div {
    display: table;
    height: 100%;
    table-layout: fixed;
    width: 100%;
}
.header-six .close-popup-box {
    border: 1px solid #000;
    color: #000;
    font-size: 18px;  
    position: absolute;
    right: 25px;
    text-align: center;
    top: 25px;
    width: 30px;
}
.header-six .close-popup-box:hover {background-color: #000; color: #fff;}
.header-six .popup-box-inner {
    display: table-cell;
    vertical-align: middle;
}
.header-six .page-search-box form {
    margin: 0 auto;
    max-width: 70%;
}
.header-six .page-search-box .search-query {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-color: currentcolor currentcolor #ccc;
    border-image: none;
    border-style: none none solid;
    border-width: 0 0 1px;
    color: #000;
    font-size: 18px;
    font-style: italic;
    height: 60px;
    line-height: 5rem;
    width: 100%;
}

.header-six .top-settings {
    display: inline-block;    
    text-align: center;
    vertical-align: middle;
    width: 50px;
}
.header-six .top-settings > .icons {font-size: 24px;}
/*--- Header Search ---*/

/*--- Header Cart ---*/
.header-six .header-cart-wrap {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    width: 50px;
}
.header-six .header-cart {
    display: inline-block;
    position: relative;
}
.header-six .cart-icon {font-size: 25px;}
.header-six .header-cart span.count {
    background: #cc0000 none repeat scroll 0 0;
    border-radius: 50%;
    bottom: 0;
    color: #ffffff;
    display: inline-block;
    font-size: 11px;
    height: 19px;
    line-height: 20px;
    margin: 0;
    position: absolute;
    right: -5px;
    text-align: center;
    text-transform: uppercase;
    width: 19px;
}
.header-six .cart-popup {
    text-align: left;
    background: #ffffff none repeat scroll 0 0;
    box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);    
    padding: 20px;
    position: absolute;
    right: 100%;
    top: 30px;
    visibility: hidden;
    opacity: 0;
    width: 330px;
    z-index: 99;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
}
.header-six .header-cart-wrap:hover .cart-popup {
    opacity: 1;
    top: 0;
    visibility: visible;
}
.header-six .cart-popup .alert {
    border-bottom: 1px solid #eaeaea;
    display: inline-block;
    padding: 0 0 20px;
    width: 100%;
}
.header-six .cart-list .img {float: left;}
.header-six .cart-list .cart-title {
    display: block;
    margin-left: 65px;
}
.header-six .cart-title > a {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.header-six .cart-list .close {
    color: #000000;
    font-size: 24px;
    opacity: 1;
}
.header-six .cart-list .close:hover, .header-six .cart-list .close:focus {color: #ccc;}
.header-six .cart-list .price > b {
    color: #000000;
    font-size: 14px;
    font-weight: 800;
}
.header-six .cart-list .price > del {
    color: #cccccc;
    font-size: 12px;
}
.header-six .cart-list {margin: 0;}
.header-six .cart-box .total > span {
    color: #000000;
    font-weight: 600;
    text-transform: uppercase;
}
.header-six .cart-box .total-price {
    float: right;
    font-size: 17px;
}
.header-six .cart-box .total {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 20px;
}
.header-six .cart-box .buttons {
    display: inline-block;
    margin: 25px auto 10px;
    width: 100%;
}
.header-six .cart-box .buttons .left {float: left;}
.header-six .cart-box .buttons .right {float: right;}
@media (max-width: 991px) {
    .header-six .header-cart .items {display: none;}
}
@media (max-width: 380px) {
    .header-six .cart-popup {width: 280px;}
}
/*--- /Header Cart ---*/

/*--- Header Setting ---*/
.header-six .top-settings:hover .settings-popup{
    opacity: 1;
    top: 0;
    visibility: visible;
}
.header-six .settings-popup {
    background-color: #ffffff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    display: inline-block;
    height: auto;
    padding: 10px 20px;
    position: absolute;
    right: 100%;
    text-align: left;
    top: 30px;
    z-index: 1001;
    width: 290px;
    opacity: 0;
    visibility: hidden;

    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
}
.header-six .settings-popup > li {
    border-bottom: 1px solid #cccccc;
    display: table;
    margin-bottom: 15px;
    padding-bottom: 15px;
    width: 100%;
}
.header-six .settings-popup li:last-child{
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/*toggle-popup*/
.header-six .country-flag > a, .header-six .country-currency a {
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
}
.header-six .country-currency a {
    background-color: #d8d8d8;
    color: #333333;
    font-size: 15px;
    height: 30px;
    margin-bottom: 8px;
    line-height: 30px;
    text-align: center;
    width: 30px;
}
.header-six .country-currency a:hover, .header-six .country-currency a:focus {color: #fff; background-color: #333;}
.header-six .country-flag > a {
    border: 1px solid rgba(0, 0, 0, 0);
    padding: 1px;
}
.header-six .country-flag > a:hover, .header-six .country-flag > a.active{ border-color: #000;}
.header-six .additional-page > a {
    color: #999999;
    display: block;
    padding: 5px 0;
    font-size: 14px;
    text-transform: uppercase;
}
.header-six .additional-page span {
    font-size: 15px;
    line-height: 0;
    margin-right: 5px;
}
.header-six .additional-page > a:hover, .header-six .additional-page > a:focus{ color: #000;}
/*--- /Header Setting ---*/


/*---Header Navigation Megamenu---*/
.header-six .primary-navbar > li {width: 100%; display: inline-block;}
.header-six .primary-navbar {margin: auto auto 50px;}
.header-six .primary-navbar > li > a {
    display: inline-block;
    width: 100%;
    font-weight: 500;
    padding: 10px 0;
    position: relative;
    text-transform: uppercase;
    color: #333;
}
.header-six .primary-navbar > li > a:hover {color: #999;}
.header-six a.dropdown-toggle::before {
    border: medium none;
    content: "5";
    font-family: "ElegantIcons";
    font-size: 17px;
    position: absolute;
    right: 0px;
    top: 8px;
}
.header-six .primary-navbar  .mega-dropdown-menu {width: 100%; margin: 0;}
.header-six .menu-block + .menu-block {
    border-left: 1px solid #f3f3f3;
    min-height: 285px;
}
.header-six .dropdown-menu li a {
    color: #999;
    font-size: 13px;
    text-transform: capitalize;
    padding: 5px 0;
}
.header-six .dropdown-menu li a:hover, .header-six .dropdown-menu li a:focus {color: #000; background-color: transparent;}
.header-six .sub-list > ul {padding: 0;}
.header-six .sub-list > ul li a {display: block;}
.header-six .menu-block {margin: 35px auto; padding: 0 35px;}
.header-six .menu-block .title-2 {margin: 30px 0 15px; font-weight: 600;}
.header-six .mega-dropdown-menu li a:hover{color: #000;}
.header-six .mega-dropdown-menu > .flex-item { 
    background-image: url("../img/common/banner-1.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 250px;
}
.header-six .mega-dropdown-menu .menu-offer {padding: 15px;}
.header-six .mega-dropdown-menu .menu-offer .title,
.header-six .mega-dropdown-menu .menu-offer .title-1 {color: #fff; text-transform: uppercase; font-size: 14px;}
.header-six .mega-dropdown-menu .menu-offer .title-1 {font-size: 24px;}
.header-six .mega-dropdown-menu .menu-offer > .btn {margin-top: 15px;}

.header-six .top-logo {margin-bottom: 30px; z-index: 2;}
.header-six .nav-trigger {
    cursor: pointer;
    display: block;
    font-size: 32px;
}
.header-six .nav-trigger.open {
    color: #000000;
    display: block;
    font-size: 32px;
    line-height: 25px;
    margin-bottom: 20px;
    text-align: center;
    width: 50px;
    z-index: 5;
}
.header-six .nav-trigger.close-icon {
    color: #000;
    font-size: 20px;
    margin: 20px;
    position: absolute;
    right: 0;
    text-align: right;
    z-index: 5;
}
.header-six .nav-trigger.close-icon:hover,  .nav-trigger.close-icon:focus {color: #999;}

.header-six .main-header {
    transform: translateX(-350px);
    -webkit-transform: translateX(-350px);

    transition: all ease-in-out 0.3s ;
    -webkit-transition: all ease-in-out 0.3s ;
}


.off-canvas-body .header-six .main-header {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
}

.header-six .menu-bar {
    transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
}

/* Responsiv */
@media (min-width:1600px) {
    .header-six .top-logo {margin-bottom: -40px;}
}
@media (min-width:1200px) {
    /*-- Header --*/
    body.off-canvas-body {margin-left: 220px;}
    .header-six .primary-navbar li .dropdown-menu {
        opacity: 0;    
        visibility: hidden;
        display: block;
        padding: 5px 15px;     
        border-radius: 0;
        left: 100%;
        top: 0;
        margin-left: 50px;        

        transform: translateY(50px);
        -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);

        transition: transform 0.3s ease 0s;
        -webkit-transition: -webkit-transform 0.3s ease 0s;
        -ms-transition: -ms-transform 0.3s ease 0s;

        transition: all 0.3s ease 0s;
        -webkit-transition: all 0.3s ease 0s;
        -ms-transition: all 0.3s ease 0s;
    }
    .header-six .primary-navbar > li:hover > .dropdown-menu {
        opacity: 1;    
        visibility: visible;

        transform: translateY(0px);   
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
    }
    .header-six .dropdown-menu  li:hover > .dropdown-menu {
        opacity: 1;        
        visibility: visible;

        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
    .header-six .dropdown-menu li .dropdown-menu {
        left: 100%;
        top: 0;  
        margin: 0 0 0 15px;

        transform: translateX(-50px);
        -webkit-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
    }

    .header-six .dropdown-menu a.dropdown-toggle::before {top: 5px; font-size: 14px;}

    .header-six .primary-navbar li .mega-dropdown-menu {width: 1000px; padding: 0;}
}
@media (max-width: 1199px) {

    .header-six .menu-block {margin: auto; padding: 0 15px;}
    .header-six .menu-block + .menu-block {border: none; padding-top: 0; min-height: auto;}
    .header-six .primary-navbar > li {width: 100%;}
    .header-six .primary-navbar li.open .dropdown-menu {
        background-color: #333333;
        border: medium none;
        border-radius: 0;
        box-shadow: none;
        display: block;
        opacity: 1;
        padding: 0 0 0 25px;
        position: static;
        visibility: visible;
        width: 100%;
    }
    .header-six .primary-navbar li.open .mega-dropdown-menu {
        transform: none;
        -webkit-transform: none;
        padding: 0;
    } 

    .header-six  .top-logo {
        padding: 25px 15px;
        position: static;
        margin-bottom: 0;
    }
}

/* Header Newsletter */
.header-six .newsletter {
    display: inline-block;
    margin-bottom: 40px;
    width: 100%;
}
.header-six .newsletter .mail-info {
    margin-top: 15px;
    position: relative;
    width: 100%;
}
.header-six .newsletter .mail-info .btn {
    display: block;
    margin: 35px 0;
}

/******************************* 
    2 - HEADER CSS ENDS 
********************************/

/******************************* 
    3 - HOME CSS STARTS 
********************************/

/*---------------------- 3.1 Main Slider Starts ---------------------------- */

/*-- Slider --*/
.single-slider-1 .slide-info {
    color: #ffffff;
    position: absolute;
    left: 10px;
    bottom: 10%;
    width: 385px;
}
.single-slider-1 .image > img {float: right;}
.single-slider-1 .main-title { 
    margin: 0 0 30px;
    padding: 0 0 30px;
    position: relative;
}
.single-slider-1 .main-title::before {
    background: #000000 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    width: 50px;
}
.single-slider-1 .slide-info p { color: #666666; font-size: 16px;}
.single-slider-1 .slide-info .buttons {margin-top: 25px;}
.animated  {
    -webkit-animation-duration : 1s  ;
    animation-duration : 1s  ;

    -webkit-animation-delay : 100ms  ;
    animation-delay : 100ms  ;
}
.animate-out {
    -webkit-animation-delay : 0ms  ;
    animation-delay : 0ms  ;
}
.owl-dots-2 .owl-dots {
    bottom: 25px;
    display: table;
    margin: auto;
    position: absolute;
    right: -55px;;
    text-align: center;
}
.owl-dots-2 .owl-dot span {
    background-color: #cccccc;    
    border-radius: 50%;
    font-size: 0;
    height: 9px;
    margin: 0;
    width: 9px;
    margin: 0 6px;
    display: inline-block;
}
.owl-dots-2 .owl-dot.active span {background-color: #000;}
.owl-nav-1 .owl-prev:hover,
.owl-nav-1 .owl-next:hover {background-color: rgba(0, 0, 0, 1);}
.owl-nav-1 .owl-prev,
.owl-nav-1 .owl-next {  
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 30px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    text-align: center;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}
.owl-nav-1 .owl-prev i,
.owl-nav-1 .owl-next i {
    color: #ffffff;
    font-size: 30px;
}
.owl-nav-1 .owl-prev {left: 0; }
.owl-nav-1 .owl-next {right: 0; }
.owl-nav-1:hover  .owl-prev {left: 20px; opacity: 1;  visibility: visible;}
.owl-nav-1:hover .owl-next {right: 20px; opacity: 1; visibility: visible;}

@media (min-width: 1024px) and (max-width: 1500px) {
    .single-slider-1 .image > img {max-width: 950px;}
}
@media (max-width: 1199px) {
    .owl-dots-2 .owl-dots {right: 20px;}
}
@media (max-width: 991px) {
    .single-slider-1 .slide-info {width: 80%;}
}

@media (max-width: 767px) {
    .single-slider-1 .main-title {font-size: 20px; margin: 0; padding-bottom: 15px;}  
    .single-slider-1 .main-title::before {background-color: transparent;}
    .single-slider-1 .slide-info p {margin: auto auto 15px;}
}
@media (max-width: 480px) {    
    .single-slider-1 .slide-info p {display: none;}
}
/*-- ./Slider --*/
/*---------------------- 3.1 Main Slider Ends ---------------------------- */

/*---------------------- 3.2 Promotion Starts ---------------------------- */
.promotion {position: relative; margin-top: 80px;}
.promotion-bg {background-color: #f5f5f5; padding-top: 100px; padding-bottom: 350px;}
.promotion .content {width: 80%;}
.promotion .content p {width: 46%;}
.promotion .content .main-title {font-size: 60px; margin-bottom: 35px;}
.promotion .image {margin-top: -450px; text-align: right;}
.promotion .link {text-transform: uppercase; font-size: 18px; font-weight: 600; margin-top: 90px; position: relative;}
.promotion .link span {font-size: 26px; vertical-align: middle;}
@media (max-width: 1500px) {
    .promotion .content {margin-left:10%; }
}
@media (max-width: 991px) {
    .promotion .content .main-title {font-size: 40px;}
}
@media (max-width: 767px) {
    .promotion .content .main-title {font-size: 30px;}
    .promotion .content, .promotion .content p, .collection .about .info p {width: 100%; margin-left:0%; }
    .promotion .link {margin-top: 50px;}
    .promotion .image {margin-top: 0;}
    .promotion-bg {padding-bottom: 50px;}
}
/*---------------------- 3.2 Promotion Ends ---------------------------- */

/*---------------------- 3.3 Collection Ends ---------------------------- */
.collection {position: relative;}
.collection .item-wrap {padding: 0;}
.collection .item-wrap .image img {width: 100%; height: 100%;}
.collection .main-title {font-size: 30px; margin-bottom: 30px;}
.collection p {color: #999999; font-size: 16px; margin-bottom: 20px;}
.collection .about.item-wrap {background-color: #3d3a37;}
.collection .about .info {padding: 25px 40px; color: #fff;}
.collection .about .info p {
    margin: auto auto 20px;
    text-align: center;
    width: 65%;
}
.collection .about .main-title {color: #ffffff; margin-bottom: 80px;}
.collection .about .link {font-size: 24px; text-align: center;}
.collection .about .link a {color: #fff;}
.collection .about .link a:hover {color: #999;}
.collection .promo .main-title {
    left: 40px;
    position: absolute;
    top: 25px;
}
.collection .promo .link {
    bottom: 25px;
    font-weight: 600;
    left: 40px;
    position: absolute;
    text-transform: uppercase;
}
.collection .promo .link span {font-size: 18px; vertical-align: middle;}

.collection .collection-row-2 {margin-top: 100px; margin-bottom: 100px;}
.collection .item-wrap.right {
    float: right;
    text-align: right;
}
.collection .content {
    margin-bottom: 30px;
    margin-top: 30px;
}
.collection .content .link {font-size: 18px; text-transform: uppercase; font-weight: 600; margin-top: 50px;}
.collection .content .link span {font-size: 28px; vertical-align: top;}

.collection .outer-text-1 {display: none;}

@media (min-width: 1500px) {
    .collection::before {
        background-color: #000000;
        content: "";
        height: 60px;
        left: 0;
        position: absolute;
        top: 0;
        width: 2px;
    }
    .collection .outer-text-1 {
        display: block;
        color: #000000;
        font-size: 18px;
        font-weight: 900;
        left: 20px;
        letter-spacing: 2px;
        margin: 0;
        position: absolute;
        text-align: center;
        text-transform: uppercase;
        top: 270px;

        transform-origin: left bottom 0;
        -webkit-transform-origin: left bottom 0;
        -ms-transform-origin: left bottom 0;

        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
    }

}

@media (min-width: 1199px) {    
    .collection .content {
        left: 0;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    .collection .item-wrap {min-height: 390px;}
}
@media (max-width: 991px) {
    .collection .item-wrap.right {float: none;}
    .collection .main-title {font-size: 24px;} 
}
@media (max-width: 767px) {
    .collection .main-title {font-size: 20px;}
    .collection .content .link {font-size: 14px;}
    .collection .content .link span {font-size: 20px;}
}
/*---------------------- 3.3 Collection Ends ---------------------------- */


/*---------------------- 3.4 Our Product Starts ---------------------------- */
.our-product {margin-bottom: 70px; position: relative;}
.our-product .title-wrap {text-align: center;}
.our-product .title-wrap > p {margin: auto;  width: 50%;}
.our-product .title-wrap .title-1 { font-size: 30px; margin-bottom: 20px;}
  .our-product .outer-text-1 {display: none;}
@media (min-width: 1500px) {
    .our-product::before {
        background-color: #000000;
        content: "";
        height: 60px;
        right: 0;
        position: absolute;
        top: 0;
        width: 2px;
    }
    .our-product .outer-text-1 {
        display: block;
        color: #000000;
        font-size: 18px;
        font-weight: 900;
        right: 20px;
        letter-spacing: 2px;
        margin: 0;
        position: absolute;
        text-align: center;
        text-transform: uppercase;
        top: 100px;

        transform-origin: right top 0;
        -webkit-transform-origin: right top 0;
        -ms-transform-origin: right top 0;

        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
    }

}

@media (max-width: 991px) {
    .our-product .title-wrap > p {width: 80%;}
}

/*---------------------- Product CSS Starts ---------------------------- */
.product-item {margin: 30px auto auto; display: table;}
.product-item .product-image {position: relative;}
.product-item:hover .product-image .img::before{ opacity: 1;}
.product-item .product-image .img::before {
    /*background-color: rgba(0, 0, 0, 0.5);*/
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    transition:  all 0.4s ease-in-out 0s;
    -webkit-transition:  all 0.4s ease-in-out 0s;
}
.product-item .product-image .product-hover{
    left: 0;
    opacity: 0;
    perspective: 500px;
    position: absolute!important;
    top: 0;
    transform: rotateY(-90deg);-moz-transform: rotateY(-90deg);-webkit-transform: rotateY(-90deg);-o-transform: rotateY(-90deg);
    transform-style: preserve-3d;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-o-transform-style: preserve-3d;
    transition: all 0.6s ease-in-out 0s;
    visibility: hidden;
    width: 100%;
}
.product-item:hover .product-image .product-hover{
    opacity: 1;
    transform: rotateY(0deg);-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-o-transform: rotateY(0deg);
    transition: all 0.4s ease-in-out 0s;
    visibility: visible;
}
.product-item .product-image > ul {
    background-color: #ffffff;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 3px 5px 5px;
    position: absolute;
    vertical-align: middle;
    z-index: 2;
}
.product-item .color-swatch-item > li {
    display: inline-block;
    height: 15px;
    line-height: 0;
    vertical-align: middle;
    width: 15px;
}
.product-item .color-swatch-item img {
    border-radius: 50%;
    height: 15px;
    width: 15px;
}
.product-item .color-swatch-item a {
    display: inline-block;
    line-height: 0;
}
.product-item .quick-view a {
    background-color: #000000;
    bottom: 0;
    color: #ffffff;
    font-size: 24px;
    height: 40px;
    line-height: 40px;
    opacity: 0;
    position: absolute;
    right: -25px;
    text-align: center;
    visibility: hidden;
    width: 40px;
    z-index: 2;
}
.product-item:hover .quick-view a {visibility: visible; opacity: 1; right: 0;}
.product-item .quick-view a:focus, .product-item .quick-view a:hover {background-color: #fff; color: #000;}
.product-item .product-content {
    padding: 15px 10px;
    text-align: center;
}
.product-item .product-title a:hover, .product-item .product-title a:focus {color: #999;}
.product-item .price > b {
    color: #000000;
    font-size: 18px;
    margin-right: 5px;
}
.product-item .product-links > a {
    border: 1px solid #999999;
    color: #999999;
    display: inline-block;
    font-size: 17px;
    height: 40px;
    line-height: 40px;
    margin: 2px;
    vertical-align: middle;
    width: 40px;
}
.product-item .product-links > a:focus, .product-item .product-links > a:hover {
    color: #fff !important;
    background-color: #333;
    border-color: #333;
}
.product-item .product-content .rating {margin: 10px;}
.product-item .product-links {
    display: inline-block;
    margin-top: 15px;
    text-align: center;
    width: 100%;
}
.product-item .product-links > a.add-to-cart {
    color: #000000;
    font-size: 13px;
    font-weight: 600;
    padding: 0 20px;
    text-transform: uppercase;
    width: auto;
    min-width: 40px;
}
.product-item .product-links > a.add-to-cart i {font-size: 18px; display: none; line-height: 40px; color: #999; transition: all 0.4s ease-in-out 0s; -webkit-transition: all 0.4s ease-in-out 0s; }
.product-item .product-links > a.add-to-cart:hover i {color: #fff;}

.product-item:hover .product-image .grid-image .product-hover {
    opacity: 1;
    transform: rotateY(0deg);-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-o-transform: rotateY(0deg);
    transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
    visibility: visible;
}
.product-item .product-image .grid-image .product-hover {
    left: 0;
    opacity: 0;
    perspective: 500px;
    position: absolute!important;
    top: 0;
    transform: rotateY(-90deg);-moz-transform: rotateY(-90deg);-webkit-transform: rotateY(-90deg);-o-transform: rotateY(-90deg);
    transform-style: preserve-3d;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-o-transform-style: preserve-3d;
    transition: all 0.6s ease-in-out 0s;
    visibility: hidden;
    width: 100%;
}

@media (max-width: 991px) {
    .product-item .product-links > a.add-to-cart {padding: 0;}
    .product-item .product-links > a.add-to-cart i {display: block;}
    .product-item .product-links > a.add-to-cart span {display: none;}
}
/*---------------------- Product CSS Ends ---------------------------- */

/*---------------------- 3.4 Our Product Ends ---------------------------- */

/*---------------------- 3.5 Home Blog Starts ---------------------------- */
.home-blog {margin-bottom: 100px;}
.home-blog .title-wrap .title-1 {font-size: 30px; margin-bottom: 50px;}
.home-blog .date {
    color: #cccccc;
    font-size: 36px;
    line-height: normal;
    margin: 0;
}
.home-blog .date small {font-size: 16px;}
.home-blog .link {font-size: 11px; padding-top: 10px;}
.home-blog .link span {font-size: 14px; vertical-align: middle;}
.home-blog .blog-height {height: 172px; position: relative;}
.home-blog .blog-content {
    left: 15px;
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
/*---------------------- 3.5 Home Blog Starts ---------------------------- */


/******************************* 
        3 - HOME CSS ENDS 
********************************/



/******************************* 
    4 - FOOTER STARTS 
********************************/
.footer-five {font-size: 13px;  padding-top: 80px;}
.footer-five .footer-logo {
    display: block;
    margin: 5px auto 50px;  
}
.footer-five .widget-title { padding-bottom: 35px;}
.footer-five .footer-widget {margin-bottom: 30px;}
.footer-five .footer-widget .categories li {position: relative; padding-bottom: 15px;}
.footer-five .footer-widget .categories li + li {padding-top: 15px; border-top: 1px solid #cccccc;}
.footer-five .footer-widget .categories li a {position: relative; color: #999999; padding-left: 23px;}
.footer-five .footer-widget .categories li a:focus, .footer-five .footer-widget li a:hover {color: #000;}
.footer-five .footer-widget .categories li a::before {
    content: "9";
    font-family: "ElegantIcons";
    font-size: 15px;
    left: 0;
    line-height: normal;
    margin-right: 20px;
    position: absolute;
    top: 0;   
}
.footer-five .address i {
    float: left;
    font-size: 20px;
    width: 45px;
}
.footer-five .address span {
    display: block;
    line-height: 1.7;
    overflow: hidden;
    vertical-align: middle;
}
.footer-five .ft-line {border-top: 1px solid #cccccc; padding: 10px 0;}
.footer-five .address {padding-top: 10px;}
.footer-five .copy-rights {margin: 30px auto; text-align: center;}
.footer-five .tag-cloud > a {
    border: 1px solid #cccccc;
    color: #999999;
    display: inline-block;
    height: 30px;
    margin: 0 7px 10px 0;
    padding: 5px 20px;
}
.footer-five .tag-cloud > a:hover {background-color: #000; color: #fff; border-color: #00;}

.footer-five .newsletter .sub-title {font-size: 14px; margin-bottom: 30px;}
.footer-five .newsletter .form-control.text {
    border-color: #cccccc;
    height: 45px;
}
.footer-five .newsletter .mail-info {
    border-bottom: 1px solid #cccccc;
    display: inline-block;
    padding-bottom: 30px;
    position: relative;
    width: 100%;
}
.footer-five .newsletter .mail-info .submit {
    background-color: #000000;
    border: medium none;
    color: #ffffff;
    font-size: 24px;
    height: 45px;
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
}
.footer-five .newsletter .mail-info .submit:hover {background-color: #fff; color: #000;}
.footer-five .social-link > li {font-size: 15px;}

@media (min-width: 1600px) {
    .footer-five {background-color: #f1f1f1;}
}
@media (min-width: 768px) and (max-width: 1199px) {
    .footer-five .footer-widget:nth-child(2n+1) {clear: both;}
}

/******************************* 
    4 - FOOTER ENDS 
********************************/

/******************************* 
  5 - POPUPS STARTS 
********************************/

/*---------------- 5.1 -  Back To Top Starts -------------------------- */
.to-top { 
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #333333;
    border-radius: 0;
    bottom: -150px;
    cursor: pointer;
    font-size: 26px;
    height: 45px;
    line-height: 45px;
    position: fixed;
    right: 3%;
    text-align: center;
    width: 45px;
    z-index: 999;

    -ms-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out; 
}
.to-top:hover {opacity: 0.5; background-color: #333; color: #fff;}
/*---------------- 5.1 -  Back To Top Ends ------------------------ */

/*---------------------- 5.2 - Quick Preview Starts ---------------------------- */
.product-modal .modal-content {
    border-radius: 0;
    display: inline-block;
    padding: 30px 10px;
    width: 100%;
}
.product-modal .close {
    background: #333333 none repeat scroll 0 0;
    color: #ffffff;
    display: inline-block;
    float: none;
    font-size: 24px;
    font-weight: normal;
    height: 40px;
    line-height: 40px;
    opacity: 1;
    position: absolute;
    right: 30px;
    text-align: center;
    text-shadow: unset;
    width: 40px;
    z-index: 1;
}
.product-modal .close:hover {
    background: #ececec none repeat scroll 0 0;
    color: #999999;
}

/*--- Product Slider Starts ---*/
.owl-carousel .item:hover .caption-link, .product-fullwidth .item:hover .caption-link{
    opacity: 1;
    visibility: visible;
}
.sync1 {margin-bottom: 16px;}
.caption-link {
    background-color: #ffffff;
    text-align: center;
    border-radius: 3px;
    bottom: 0;
    display: inline-block;
    font-size: 16px;
    height: 30px;
    left: 0;
    line-height: 35px;
    margin: auto;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    visibility: hidden;
    width: 30px;
}
.sync2 .synced .item:before, .sync2 .item:hover:before {
    background-color: rgba(255, 255, 255, 0);
}
.sync2 .item:before {  
    background-color: rgba(255, 255, 255, 0.5);
    bottom: 0;
    content: "";
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    transition: all 0.4s ease-in-out 0s;
    -website-transition: all 0.4s ease-in-out 0s;
}


.sync2 .item,.sync1 .item {  
    cursor: pointer;   
    text-align: center;   
    position: relative;
    transition: all 0.4s ease-in-out 0s;
    -website-transition: all 0.4s ease-in-out 0s;
}
.sync2 .owl-nav i {
    background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
    color: #ffffff;
    display: inline-block;
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 30px;   
}
.sync2 .owl-nav i:hover {background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;}
.sync2 .owl-nav .owl-next i {right: 0;}
.sync2 .owl-nav .owl-prev i {left: 0;}

/*--- Product Slider Ends ---*/

/*--- Product Content Starts ---*/
.product-detail {display: inline-block; width: 100%; vertical-align: middle; position: relative;}
.product-detail .section-title {margin: 0 0 10px;}
.product-detail .rating {margin-bottom: 20px;}
.product-detail .price > b {color: #000000; font-size: 24px;}
.product-detail .price > del {margin-left: 5px; font-size: 18px;}
.product-detail .price {margin-bottom: 20px;}
.product-detail .prod-lr-btn{ position: absolute; right: 0; }
.product-detail .prod-lr-btn a {
    display: inline-block;
    line-height: normal;
    position: relative;
    text-align: center;
    vertical-align: middle;
}
.product-detail .prod-lr-btn i {
    font-size: 24px;
    color: #000;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.product-detail .prod-lr-btn a::before {
    background-color: rgba(255, 255, 255, 0.5);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
}
.product-detail .prod-lr-btn a:hover:before, .product-detail .prod-lr-btn a:hover i {opacity: 1;}

.product-detail .product-review {
    display: inline-block;
    margin-left: 10px;
}
.product-detail .product-review li , .product-detail .stock-detail li { line-height: 1; }
.product-detail .product-review li + li,.product-detail .stock-detail li + li { border-left: 1px solid #999; padding-left: 10px; }
.product-detail .stock-detail li + li{   margin-left: 17px; padding-left: 30px; }
.product-detail .stock-detail i {font-size: 18px; vertical-align: sub; margin-right: 5px;}
.product-detail .product-review a {padding-left: 5px;}
.product-detail .product-description p{ color: #666; }
.product-detail .color-optn a {
    border: 1px solid rgba(0, 0, 0, 0);
    display: inline-block;
    line-height: normal;
    padding: 2px;
    vertical-align: middle;
}
.product-detail .color-optn li {display: inline-block;}
.product-detail .color-optn a:focus, .product-detail .color-optn a:hover {border-color: #000;}
.product-detail .size-optn a {
    background-color: #efefef;
    color: #333333;
    display: inline-block;
    font-weight: 600;
    height: 25px;
    min-width: 25px;
    padding: 2px 6px;
    text-align: center;
}
.product-detail .size-optn a:focus, .product-detail .size-optn a:hover {background-color: #333; color: #fff;}
.product-detail .product-options label {
    color: #000000;
    display: inline-block;
    font-weight: 500;
    width: 100%;
    margin-bottom: 17px;
}
.product-detail .product-options .option {text-transform: uppercase;}
.product-detail .product-options .bootstrap-select .btn .filter-option {
    color: #999999;
    font-style: italic;
}
.product-detail .product-options .bootstrap-select .btn{
    height: 40px;
    line-height: 40px;
    padding: 5px 20px;
}

.product-detail .prod-btns {
    display: inline-block;
    margin-bottom: 40px;    
    width: 100%;
}
.product-detail .prod-btns > div {margin-top: 20px;}
.product-detail .add-to-cart .cart-btn{min-width: 200px; font-size: 18px;}
.product-detail .add-to-cart .cart-btn i {
    line-height: 0;
    margin-right: 7px;
    vertical-align: middle;
}
.product-detail .prod-btns .form-control.qty {
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    width: 170px;
    line-height: normal;
}
.product-detail .prod-btns .quantity .btn {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    bottom: 0;
    padding: 0;
    position: absolute;
    top: 0;
    font-size: 22px;
}
.product-detail .prod-btns .quantity .minus {
    left: 10px;
}
.product-detail .prod-btns .quantity .plus{
    right: 10px;
}
.product-detail .prod-btns .quantity {
    position: relative;
    margin-right: 25px;
}
.product-detail .prod-btns > div{ display: inline-block; vertical-align: middle; }
.product-detail .quantity input[type=number]::-webkit-outer-spin-button,
.product-detail .quantity input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.product-detail .quantity input[type=number] {
    -moz-appearance:textfield;
}
.product-detail .prod-social ul{
    display: inline-block;
    vertical-align: middle;
}
.product-detail .prod-social li a {
    color: #cccccc;
    font-size: 16px;
}
.product-detail .prod-social li a:hover { color: #000; }

@media (min-width:1200px) {
    .product-modal{width: 1090px;}  
}
@media (max-width: 767px) {
    .prod-slider-wrap {margin-bottom: 50px;}
    .product-detail .product-review {display: block; margin: 10px 0 0 -5px;}
    .product-detail .stock-detail li + li {margin-left: 0; padding-left: 15px;}
}
/*---------------------- 5.2 - Quick Preview Ends ---------------------------- */


/*---------------- 5.3 - Subscribe Popup Starts ------------------------ */
.subscribe-me{
    background-color: #e9e9e9;
    height: auto;
    left: 0;
    margin: auto;
    padding: 12px;
    right: 0;    
    top: 20%;
    width: 830px;
    background-image: url(../img/common/newsletter-bg.png);
    background-repeat: no-repeat;
    background-position: 85% bottom;
}
.subscribe-me .main-title {font-size: 30px; margin-bottom: 25px;}
.subscribe-me p {
    font-size: 14px;
    margin: auto auto 20px;
    width: 80%;
    color: #666666;
}
.popup-newsletter {
    border: 1px solid #cccccc;
    display: inline-block;
    width: 100%;    
}
.subscribe-wrap {
    padding: 45px 42px 15px;
}
.subscribe-me .form-control.text {
    border: 2px solid #cccccc;
    text-align: center;
    background-color: transparent;
    font-size: 13px;
    height: 40px;
    line-height: 37px;
    margin-bottom: 25px;
    padding: 0 15px;
    width: 100%;
}
.subscribe-me .sb-close-btn {
    font-size: 22px;
    background-color: #999999;
    color: #ffffff;
    height: 40px;
    line-height: 40px;
    position: absolute;
    right: 13px;
    text-align: center;
    top: 13px;
    width: 40px;
    z-index: 1;
}
.subscribe-me .sb-close-btn:hover {
    background-color: #000;
}
@media (max-width:991px){
    /*-- Subscribe Popup --*/
    .subscribe-me{
        width: auto;
        margin: auto 25px;
        top: 10%;
    }
    .popup-newsletter:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: -1;
}
} 
@media (max-width: 767px){
    .subscribe-wrap {
        padding: 45px 0 15px;
    } 
}

/*---------------- 5.3 - Subscribe Popup Ends------------------------ */

/******************************* 
  5 - POPUPS STARTS 
********************************/