/* --------------------------------------------------------------------------
 * jThemes Studio : Epro - Modern Fashion E-Commerce Template
 *
 * file           : main-style.css
 * Desc           : Epro - Stylesheet
 * Version        : 
 * Date           : 
 * Author         : jThemes Studio
 * Author URI     : 
 * Email          : 
 *
 * jThemes Studio. Copyright 2014. All Rights Reserved.
 * -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
 *  Epro 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
    
  2 - Header

  3 - Home   

  4 - Components / Shortcodes / Widget
    4.1 - Breadcrumbs
    4.2 - Pagination 
    4.3 - Blog Post   
    4.4 - Comments  
    4.5 - Widgets
    4.6 - Contacts form     

  5 - Pages   
    5.1 - Error Page  
              
  6 - Footer  

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


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

#testMap {
    width: 100%;
    height: 600px;
}

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

.loader {
  margin: -5em auto;
  font-size: 10px;
  position: relative;
  top: 50%;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(0, 0, 0, 0.2);
  border-right: 1.1em solid rgba(0, 0, 0, 0.2);
  border-bottom: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #232323;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*----------------1.1 Preloader Ends------------------*/

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

body {
    font-family: 'Open Sans', sans-serif; 
    font-weight: normal;
    background: #ffffff;
    color: #666;
    -webkit-font-kerning: auto;
    -moz-font-kerning: auto;
    font-kerning: auto;
    -o-font-kerning: auto;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-backface-visibility: visible !important;  
    -o-backface-visibility: visible !important;  
    -moz-backface-visibility: visible !important;  
    overflow-x: hidden;
    -webkit-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}
.theme-container{
    padding-left: 0;
    padding-right: 0;
}
.boxed .wrapper {
    background-color: #ffffff;
    margin: 0 auto;
    max-width: 1200px;
}
body.off-canvas-body{
    margin-left: 301px;
}
.no-padding{
    padding-left: 0;
    padding-right: 0;
}
.no-margin{
    margin: 0;
}
img{
    max-width: 100%;
    /*max-height: 100%; Map conflict*/
    height: auto;
}
.light-bg{
    background-color: #f2f2f2;
}
.white-bg{
    background-color: #fff;
}
.black-bg{
    background-color: #000;
}
.relative-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;
    text-align: center;
    position: relative;
}
.title-wrap .title-2{
    font-weight: normal;
    font-size: 13px;
}
.section-title, .title-1, .title-2, .title-3, .post-title, .product-title, .widget-title, .widget-title-2{
    color: #000;  
    text-transform: uppercase;  
    letter-spacing: 1px;
}
.section-title { font-size: 24px; }
.title-1{ font-size: 16px; }
.title-2, .title-3, .widget-title-2{ font-size: 14px; }
.post-title, .product-title, .widget-title{font-size: 18px;}
.white-color{
    color: #fff;
}
.white-color .section-title, .white-color p{
    color: #fff;
}
.black-color {
    color: #000000;
}
.light-black {
    color: #333;
}
.gray-color{ color: #999; }
.green-color{ color: #99cc00; }
.red-color{ color: #FF000A;}
.blue-color, a.blue-color{color: #0099cc;}
.main-color{
    color: #7e848e;
}
.block-inline{
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}
.font-18{
    font-size: 18px;
}
.divider-small{
    border-color: #000;  
    border-style: dashed;
    width: 190px;
}
.fullwidth-divider{ border-color: #ccc; }
.list-items li{
    display: inline-block;
    margin: 0 5px;
}
.list-items{ 
    margin-bottom: 0; 
    margin-left: -5px;
}
.black-arrow i,.white-arrow i{   
    padding: 0 15px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;

    -webkit-transition: transform 0.3s ease 0s;
    -moz-transition: transform 0.3s ease 0s;
    -o-transition: transform 0.3s ease 0s;
    transition: transform 0.3s ease 0s;
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}
.black-arrow:hover i, .white-arrow:hover i{
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -o-transform: translateX(10px);
    transform: translateX(10px);
}
.black-arrow,a.black-arrow{
    color: #000 !important;
}
.white-arrow, a.white-arrow{
    color: #fff !important;
}

/*-- Tags --*/
.sale-tag > span, .new-tag > span {
    position: absolute;
    right: -55px;
    top: 13px;
    -webkit-transform: rotate(49deg);
    -moz-transform: rotate(49deg);
    -o-transform: rotate(49deg);
    -ms-transform: rotate(49deg);
    transform: rotate(49deg);
}
.sale-tag, .new-tag{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 60px 60px 0;   
    color: #ffffff;
    font-size: 12px;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    top: 0;
}
.sale-tag{
    border-color: transparent #cc0000  transparent transparent;
}
.new-tag{
    border-color: transparent #000 transparent transparent;
}
.hot-tag, .hot-tag-left, .black-tag, .black-tag-left{    
    border-radius: 2px;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    position: relative;
    z-index: 2;
}
.hot-tag, .hot-tag-left{
    background-color: #cc0000;
}
.black-tag, .black-tag-left {
    background-color: #000;
}
.hot-tag::after, .black-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: 6px solid #cc0000;
}
.black-tag::after, .black-tag::before{
    border-left: 6px solid #000;
}
.bubble {
    display: table;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 6px;
    width: auto;
}
.hot-tag-left:before, .black-tag-left:before{
    border-style: solid;
    border-width: 3px 5px 3px 0;
    content: "";
    height: 0;
    left: -5px;
    position: absolute;
    top: 5px;
    width: 0;  
}
.hot-tag-left:before {
    border-color: transparent #cc0000 transparent transparent; 
}
.black-tag-left:before{
    border-color: transparent #000 transparent transparent; 
}
.hot-tag-left, .black-tag-left {
    margin-left: 8px;
}

.owl-carousel .owl-item img {    
    margin-left: auto;
    margin-right: auto;
    width: auto;
}
/*-------------------1.2 Global properties (body, common classes, structure etc) Ends-----------------*/

/*---------------------- 1.3 Page section block Starts----------------------------*/
.space-10 {
    padding-bottom: 10px;
    padding-top: 10px;
}
.space-bottom-10 {
    padding-bottom: 10px;
}
.space-top-10 {
    padding-top: 10px;
}
.space-15{
    padding-bottom: 15px;
    padding-top: 15px;
}
.space-bottom-15{
    padding-bottom: 15px;
}
.space-top-15{
    padding-top: 15px;
}
.space-20{
    padding-bottom: 20px;
    padding-top: 20px;
}
.space-bottom-20{
    padding-bottom: 20px;
}
.space-top-20{
    padding-top: 20px;
}
.space-30{
    padding-bottom: 30px;
    padding-top: 30px;
}
.space-bottom-30{
    padding-bottom: 30px;
}
.space-top-30{
    padding-top: 30px;
}
.space-40{
    padding-bottom: 40px;
    padding-top: 40px;
}
.space-bottom-40 {
    padding-bottom: 40px;
}
.space-top-40 {
    padding-top: 40px;
}
.space-50{
    padding-bottom: 50px;
    padding-top: 50px;
}
.space-bottom-50{
    padding-bottom: 50px;
}
.space-top-50{
    padding-top: 50px;
}
.space-60 {
    padding-bottom: 60px;
    padding-top: 60px;
}
.space-bottom-60{
    padding-bottom: 60px;
}
.space-top-60{
    padding-top: 60px;
}
.space-70{
    padding-bottom: 70px;
    padding-top: 70px;
}
.space-bottom-70{
    padding-bottom: 70px;
}
.space-top-70{
    padding-top: 70px;
}
.space-80{
    padding-bottom: 80px;
    padding-top: 80px;
}
.space-bottom-80{
    padding-bottom: 80px;
}
.space-top-80{
    padding-top: 80px;
}
.space-100{
    padding-bottom: 100px;
    padding-top: 100px; 
}
.space-bottom-100{
    padding-bottom: 100px;
}
.space-top-100{
    padding-top: 100px;
}
.mb-30{
    margin-bottom: 30px;
}
/*----------------------------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;
}
.btn {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    color: #000;
}
a{
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    color: #999999;
}
a:hover,
a:active,
a:focus {
    text-decoration: none;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-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;
}

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

/*--------------------------- 1.5 Buttons Starts ---------------------- */
.theme-btn-1, .theme-btn, .btn-black {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -o-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-osx-font-smoothing: grayscale;
    -o-osx-font-smoothing: grayscale;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}
.theme-btn-1:before, .theme-btn:before, .btn-black:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: top, right, bottom, left;
    -moz-transition-property: top, right, bottom, left;
    -o-transition-property: top, right, bottom, left;
    transition-property: top, right, bottom, left;
}
.theme-btn-1:before{
    border: #454545 solid 4px;
}
.theme-btn:before {
    border: transparent solid 4px;
}
.btn-black:before{
    border: #000 solid 4px;
}
.theme-btn-1:hover:before, .theme-btn-1:focus:before,
.theme-btn:hover:before, .theme-btn:focus:before,
.btn-black:hover:before, .btn-black:focus:before{
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
}
.theme-btn:hover:before, .theme-btn:focus:before{
    border: #999 solid 4px;  
}
.theme-btn:hover, .theme-btn:focus{
    background-color: #999;
}
.theme-btn:hover, .theme-btn:focus{
    border-color: #999;
}
.btn-black:hover, .btn-black:focus{
    background-color: #000;
}
.btn-black:hover, .btn-black:focus{
    border-color: #000;
}
.theme-btn, .theme-btn-1, .btn-black{
    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 10px;
    text-transform: uppercase;
    position: relative;
}
.theme-btn-1 {    
    background-color: #454545;
    border: 1px solid #454545;
    color: #ffffff;
}
.btn-black {    
    background-color: #000;
    border: 1px solid #000;
    color: #ffffff;
}
.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;
}
label.btn input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    text-transform: uppercase;
}
.login-form label .pw {
    display: inline-block;
    margin-top: 7px;
}
/*------------------------ 1.5 Buttons Ends ---------------------------- */

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

textarea{
    resize: vertical;
}
label{
    font-weight: normal;
    margin: 0;
}
.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: #999;
    font-size: 13px;
    height: 54px;
    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;
    line-height: 1.2;
    vertical-align: -moz-middle-with-baseline;
}
.form-group [type="checkbox"] + span, .form-group [type="radio"] + span {
    cursor: pointer;
    vertical-align: text-top;
}
.form-group [type="checkbox"] + span::before{   
    color: #999999;
    content: "\56";
    font-family: "ElegantIcons";
    font-size: 20px;
    margin-right: 3px;
    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 --*/


/*--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: "3";
    font-family: "ElegantIcons";
    font-size: 20px;
    color: #000;
}
.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: #f9f9f9;
    border-color: #cccccc;
}
.bootstrap-select .dropdown-toggle:focus {
    outline: 0 none !important;
    outline-offset: 0;
}

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

.form-control::-webkit-input-placeholder {
    color: #999;
    opacity: 1;
}
.form-control::-moz-placeholder {
    color: #999;
    opacity: 1;
}
.form-control::-ms-input-placeholder{
    color: #999;
    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;
}


/*----------------------------1.6 Form / Input / Textarea Ends------------------------------ */

/*----------------------------------1.7 Theme Colors Starts-------------------------------- */
a:hover,
a:active,
a:focus {
    color: #000;
}
.theme-color, .hover-color:hover, .hover-color:focus, .footer-stl-2 a:hover, .footer-stl-2 a:focus {
    color: #cc0000; 
}
.theme-color-bg, .theme-tabs ul li.current a,.items-count, .widget-feature li a:hover .feature-icon{
    background-color: #cc0000;
}
/*------------------------1.7 Theme Colors Ends------------------------ */


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

.font-2, .title-2, .title-1, .post-title, .product-title, .widget-title-2, .slider-nav, .sale-tag, .new-tag, .countdown-period,
.theme-btn, .theme-btn-1, .btn-black, .primary-navbar li a {
    font-family: 'Montserrat', sans-serif;
}
.font-3, .title-3, .section-title, .widget-title, .countdown-amount {
    font-family: 'Oswald', sans-serif;
}
.normal-font {
    font-weight: normal;
}
.bold-font, .logo-title, .section-title, .title-2, .widget-title, .sale-tag, .new-tag, .sale-tag, .new-tag,
.newsletter .form-control, .countdown-amount, .countdown-amount {
    font-weight: bold;
}
.italic-font {
    font-style: italic;
}
.extra-bold-font{
    font-weight: 800;
}
.light-font{
    font-weight: 300;
}
.upper-text{
    text-transform: uppercase;
}
.normal-text{
    text-transform: none;
}
.capital-text{
    text-transform: capitalize;
}
.size-8 { font-size: 8px; }
.size-10 { font-size: 10px; }
.size-12 { font-size: 12px; }
.size-13 { font-size: 13px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-20 { font-size: 20px; }
.size-24 { font-size: 24px; }
.size-30 { font-size: 30px; }
.size-32 { font-size: 32px; }
.size-36 { font-size: 36px; }
.size-40 { font-size: 40px; }
.size-48 { font-size: 48px; }
.size-64 { font-size: 64px; }
.size-96 { font-size: 96px; }
/*------------------------- 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";
}
/*.rating span.star.active::before, .rating span.star:hover::before, .rating span.star:hover span.star::before{
    color: #ffd33b;
    content: "\e033";
    font-family: "ElegantIcons";
}*/

/*------------------------- 1.9 - Rating stars Ends --------------------- */

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

/******************************* 
    2 - HEADER CSS STARTS 
********************************/

.boxed .header-wrap{
    max-width: 1200px;
}

/* Header Style 1*/
.header-wrap{     
    display: inline-block;
    background-color: #fff;
    vertical-align: middle;    
    width: 100%;
    border-bottom: 1px solid #ccc;
    z-index: 1001;
    -webkit-transition: all ease-out 0.4s;
    -o-transition: all ease-out 0.4s;
    -moz-transition: all ease-out 0.4s;
    transition: all ease-out 0.4s;
}
.main-header{
    display: inline-block;
    width: 100%;
    vertical-align: middle; 
    z-index: 100;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    -o-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);    
}
.navbar-brand,.primary-navbar > li, .top-right{
    padding-top: 10px;
    padding-bottom: 10px;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
}
.header-wrap.sticky{
    position: fixed;
    top: 0;
    transition: all ease-in-out 0.4s;
    -webkit-transition: all ease-in-out 0.4s;    
    -moz-transition: all ease-in-out 0.4s;    
    -o-transition: all ease-in-out 0.4s;    
}
/*---Header Logo---*/
.logo-title a{
    color: #000000;
    text-transform: uppercase;
}
.logo-title .fa {
    font-size: 24px;
    margin-right: 6px;
}
.logo-title{
    font-size: 22px;   
    margin: 8px 0;
}
.logo-title b {
    vertical-align: middle;
}

/*---Header Navigation---*/
.navbar-brand{  
    height: auto;
    padding-left: 0;
    padding-right: 0
}
#primary-navigation{
    position: relative;
}
.primary-navbar{
    float: right;
}
.primary-navbar > li.dropdown > a.dropdown-toggle::before {
    border: medium none;
    content: "\33";
    font-family: "ElegantIcons";
    font-size: 22px;
    position: absolute;
    right: -25px;
    top: 8px;
}
.primary-navbar > li{
    padding-left: 20px;
    padding-right: 20px;
}
.primary-navbar li > a{
    color: #000;
}
.primary-navbar > li > a{
    font-size: 15px;
    padding: 10px 0px;
    position: relative;
    text-transform: uppercase;
}
.primary-navbar li > a:hover, .primary-navbar li > a:focus, .primary-navbar > li.active > a, 
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus{
    background-color: transparent;  
    color: #999;
}
.navbar-toggle .icon-bar{
    background-color: #000;
}
.navbar-toggle{
    margin-right: 0;
}
.navigation .primary-navbar li .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    color: #ffffff;
    min-width: 210px;
    padding: 20px 25px;
    box-shadow: none;
    border-radius: 0;     
}
.navigation .dropdown-menu li a{  
    font-size: 13px;
    padding: 8px 0;
    text-transform: uppercase;
    white-space: normal;
}
.navigation .dropdown-menu  li{
    position: relative;
}

/*---Header Navigation Megamenu---*/
.primary-navbar .mega-dropdown {
    position: static;
}
.primary-navbar .mega-dropdown-menu {
    width: 100%;
}
.mega-dropdown-menu .menu-block {
    padding: 0 30px;
}
.menu-block + .menu-block {
    border-left: 1px solid #cccccc;
    min-height: 285px;
}
.navigation .primary-navbar li .mega-dropdown-menu {
    padding: 35px 0;
}
.sub-list > ul {
    padding: 0;
}
.sub-list > ul li a{
    display: block;
}
.navigation .mega-dropdown-menu li a{
    color: #999;
    text-transform: capitalize;
    padding: 5px 0;
}
.navigation .mega-dropdown-menu li:last-child a{
    padding-bottom: 0;
}
.menu-block .title-2 {
    margin: 30px 0 15px;
}
.navigation .mega-dropdown-menu li a:hover{
    color: #000;
}
/* Header Style 1 Ends */

/* Header Style 2 Starts */

/*--Header Topbar--*/
.header-topbar {
    background-color: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding: 20px 0
}

.header-topbar.border{
    border-bottom: 1px solid #ccc;
}
.header-topbar .pop-up-box.search-popup {
    right: 15px;
}
.log-sign li {
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    margin: 0 10px;
}
.log-sign li a{
    color: #000000;
}
.top-nav > li {
    margin: 0;
    padding: 10px 20px;
    position: relative;
    vertical-align: middle;
}
.top-nav > li:last-child{
    padding-right: 5px;
}
.top-nav > li + li::before {
    background: #999999 none repeat scroll 0 0;
    content: "";
    height: 10px;
    left: 0;
    position: absolute;
    top: 17px;
    width: 1px;
}
.top-nav a {
    color: #999999;
    text-transform: capitalize;
    vertical-align: middle;
}
.top-nav a i {
    font-size: 12px;
    line-height: 0;
    margin-right: 5px;
}
.top-nav > li img{
    margin-right: 15px;
}
.top-nav form {
    display: inline-block;
}
.top-nav .bootstrap-select .btn .filter-option {
    color: #999;
    line-height: normal;
}
.top-nav .bootstrap-select .btn {
    border: none;
    height: auto;
    line-height: normal;
    padding: 0 10px 0 0;
}
.top-nav .bootstrap-select.btn-group .dropdown-toggle .caret {   
    right: 5px;
    top: 0px;
}
.top-nav .bootstrap-select.btn-group .dropdown-toggle .caret::after {
    color: #999;
}
.top-nav .bs-searchbox .form-control{
    padding: 0 5px;
    height: auto;
    line-height: 30px;
}
/*-- / Header Topbar --*/

/*--Header Main--*/
.hdr-stl-2{     
    background: #ffffff none repeat scroll 0 0;  
    display: inline-block;   
    border-right: 1px solid #cccccc;
    position: fixed;
    height: 100%;
    top: 0;  
    left: 0;
    vertical-align: middle;
    width: 300px;
    z-index: 1001;

    -webkit-transform: translateX(-300px);
    -o-transform: translateX(-300px);
    -moz-transform: translateX(-300px);
    transform: translateX(-300px);
    -webkit-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}
.hdr-stl-2 .top-bar {
    padding: 35px 0;
}
.main-header{
    display: inline-block;
    width: 100%;
    vertical-align: middle; 
    z-index: 1001;    
}
.hdr-stl-2.off-canvas{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -o-transform: translateX(0px);
    -moz-transform: translateX(0px);
}
/*Scoller*/

.hdr-stl-2 .mCSB_inside > .mCSB_container, .hdr-stl-2 .mCustomScrollBox{
    margin-right: 0;
    overflow: visible;
}


/*---Header Logo---*/
.hdr-stl-2 .logo-title a{
    color: #000;
    text-transform: uppercase;
}
.hdr-stl-2 .logo-title .fa {
    font-size: 24px;
    margin-right: 6px;
}

.hdr-stl-2 .logo-title {
    font-size: 22px;
    letter-spacing: 5px;
    margin: 0;
}
.hdr-stl-2 .logo-title b {
    vertical-align: middle;
}
/*--- / Header Logo---*/

/*---Header Navigation---*/
.header-topbar .nav-trigger .toggle-icon{
    color: #000000;
    cursor: pointer;
    display: inline-block;
    height: 50px;
    line-height: 48px;
    margin: 5px 0;
    text-align: center; 
    vertical-align: middle;
    width: 50px;
    z-index: 1;
    font-size: 30px;
    background-color: transparent;
}
.header-topbar .nav-trigger .toggle-icon:before {
    content: "\e6c2";
    font-family: "themify";
}
.hdr-stl-2 .navbar-brand{  
    height: auto;
    padding: 20px 40px;
    float: none;
    font-size: 13px;
}
.hdr-stl-2 #primary-navigation{
    position: relative;
}
.hdr-stl-2 .primary-navbar, .hdr-stl-2 .primary-navbar > li{
    float: none;
    display: block;
    text-align: left;
}
.hdr-stl-2 .primary-navbar > li {
    float: none;
    padding: 0;
    position: relative;
}
.hdr-stl-2 .navigation {
    padding: 0;
}
.hdr-stl-2 .primary-navbar > li.dropdown > a.dropdown-toggle::before {
    border: medium none;
    content: "\35";    
    font-family: "ElegantIcons";
    font-size: 22px;
    position: absolute;
    right: 20px;
}
.hdr-stl-2 .primary-navbar li > a{
    color: #000;
}
.hdr-stl-2 .primary-navbar > li > a{
    font-size: 13px;
    padding: 10px 20px 10px 40px;
    position: relative;
    text-transform: uppercase;
}
.hdr-stl-2 .primary-navbar li > a:hover, .hdr-stl-2 .primary-navbar li > a:focus, .hdr-stl-2 .nav .open > a, .hdr-stl-2 .nav .open > a:hover, 
.hdr-stl-2 .nav .open > a:focus{
    background-color: #f2f2f2;
}
.hdr-stl-2 .navbar-toggle .icon-bar{
    background-color: #fff;
}
.hdr-stl-2 .navbar-toggle{
    margin-right: 0;
}
.hdr-stl-2 .navigation .primary-navbar li .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    color: #ffffff;
    min-width: 210px;
    /*padding: 20px 0;*/
    box-shadow: none;
    border-radius: 0;
    left: 100%;
    top: 0;
    margin-left: 1px;

    -webkit-transition: transform 0.3s ease 0s;
    -o-transition: transform 0.3s ease 0s;
    -moz-transition: transform 0.3s ease 0s;
    transition: transform 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.hdr-stl-2 .navigation .dropdown-menu li a{  
    font-size: 13px;
    background: transparent;
    text-transform: uppercase;
    white-space: normal;
}
.hdr-stl-2 .navigation .dropdown-menu  li{
    position: relative;
}

/*---Header Navigation Megamenu---*/

.hdr-stl-2 .primary-navbar .mega-dropdown-menu {
    width: 900px;
}
.hdr-stl-2 .menu-block + .menu-block {
    border-left: 1px solid #cccccc;
    min-height: 255px;
}
.hdr-stl-2 .navigation .primary-navbar li .mega-dropdown-menu {
    padding: 35px 0;
}
.hdr-stl-2 .sub-list > ul {
    padding: 0;
}
.hdr-stl-2 .sub-list > ul li a{
    display: block;
}
.hdr-stl-2 .navigation .mega-dropdown-menu li a{
    color: #999;
    text-transform: capitalize;
    /*    padding: 5px 30px;*/
}
/*.hdr-stl-2 .menu-block .title-2 {
    margin: 30px 30px 15px;
}*/
.hdr-stl-2 .navigation .mega-dropdown-menu li a:hover{
    color: #000;
}

/*--- Newsletter Sidebar---*/
.hdr-stl-2 .newsletter-wrap {
    border-top: 1px solid #cccccc;
    margin: 20px 40px;
    padding: 30px 0;
}
.hdr-stl-2 .mail-detail .form-control {
    background: #f8f8f8 none repeat scroll 0 0;
    display: inline-block;
    height: 54px;
    margin: 15px 0 30px;
    text-transform: capitalize;
    width: 100%;
}
.hdr-stl-2 .social-wrap .list-items a {
    font-size: 16px;
}
.hdr-stl-2 .copy-rights{  
    margin: 8px 0 0;
    text-transform: capitalize;
}
/*--- ---*/
.hdr-stl-2 .social-wrap{
    margin: 45px 40px 0; 
}
/* Header Style 2 Ends */

/*---Header Navigation Rightside---*/
.hide{
    display: none;
}
.top-right ul{
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}
.top-elements > li {  
    display: inline-block;
    margin-left: 23px;   
}
.top-elements > li:first-child{
    padding-left: 0;
}
.top-elements > li > a{
    color: #000000;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 25px;
    vertical-align: middle;
    position: relative;
}
.items-count {   
    border-radius: 1em;
    bottom: 0;
    color: #ffffff;
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    right: -10px;
    text-align: center;
    width: 20px;
}
.icon-cube {
    position: relative;
    -webkit-perspective: 800px;
    -o-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
    overflow: visible;
}
.icon-cube::before,
.icon-cube::after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  
    content: "";
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.active .icon-cube::before {
    z-index: 2;  
}
.active .icon-cube::after {
    z-index: 1;
    opacity: 0;

    -ms-transform: translateY(48px) rotateX(-90deg);
    -webkit-transform: translateY(48px) rotateX(-90deg);
    -o-transform: translateY(48px) rotateX(-90deg);
    -moz-transform: translateY(48px) rotateX(-90deg);
    transform: translateY(48px) rotateX(-90deg);
}
.active .icon-cube::before {
    opacity: 0;
    -ms-transform: translateY(-48px) rotateX(90deg);
    -moz-transform: translateY(-48px) rotateX(90deg);
    -o-transform: translateY(-48px) rotateX(90deg);
    -webkit-transform: translateY(-48px) rotateX(90deg);
    transform: translateY(-48px) rotateX(90deg);   
}
.active .icon-cube::after {
    opacity: 1;
    -ms-transform: rotateX(0);
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    -o-transform: rotateX(0);
    transform: rotateX(0);
    content: "\f2d7";
    font-family: "Ionicons";
}
.search-icon::after {
    z-index: 1;
    opacity: 1;
    -ms-transform: translateY(48px) rotateX(-90deg);
    -webkit-transform: translateY(48px) rotateX(-90deg);
    -moz-transform: translateY(48px) rotateX(-90deg);
    -o-transform: translateY(48px) rotateX(-90deg);
    transform: translateY(48px) rotateX(-90deg);
}
.search-icon::before {    
    content: "\f2f5";
    font-family: "Ionicons";

    -ms-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;

    -ms-transform: translateY(0px) rotateX(0deg);
    -webkit-transform: translateY(0px) rotateX(0deg);
    -moz-transform: translateY(0px) rotateX(0deg);
    -o-transform: translateY(0px) rotateX(0deg);
    transform: translateY(0px) rotateX(0deg);  
}
.toggle-icon::after {
    z-index: 1;
    opacity: 1;

    -ms-transform: translateY(48px) rotateX(-90deg);
    -webkit-transform: translateY(48px) rotateX(-90deg);
    -moz-transform: translateY(48px) rotateX(-90deg);
    -o-transform: translateY(48px) rotateX(-90deg);
    transform: translateY(48px) rotateX(-90deg);
}
.toggle-icon::before {    
    content: "\f394";
    font-family: "Ionicons";

    -ms-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;

    -ms-transform: translateY(0px) rotateX(0deg);
    -webkit-transform: translateY(0px) rotateX(0deg);
    -moz-transform: translateY(0px) rotateX(0deg);
    -o-transform: translateY(0px) rotateX(0deg);
    transform: translateY(0px) rotateX(0deg);  
}
.cart-icon::after {    
    content: "\f110";
    font-family: "Ionicons";
}


/* popup box */
.top-bar {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 100%;
}
/*.top-right {
    position: static;
}*/
.active .pop-up-box{
    opacity: 1;
    visibility: visible;
    display: block;

    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

.pop-up-box{
    background-color: #ffffff;
    border: 1px solid #cccccc;
    display: inline-block;
    height: auto;
    padding: 10px 20px;
    position: absolute;
    right: 1px;
    text-align: left;
    top: 100%;
    z-index: 1001;
    width: 290px;
    opacity: 0;
    visibility: hidden;

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

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

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.pop-up-box li {
    border-bottom: 1px solid #cccccc;
    display: table;
    margin-bottom: 15px;
    padding-bottom: 22px;
    width: 100%;
}
.pop-up-box li:last-child{
    border: none;
    padding-bottom: 0;
}

/*toggle-popup*/
.country-flag > a, .country-currency a {
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
}
.country-flag > a {
    border: 1px solid rgba(0, 0, 0, 0);
    padding: 1px;
}
.country-flag > a:hover, .country-flag > a.active{
    border-color: #000;
}
.additional-page > a {
    color: #999999;
    display: block;
    padding: 5px 0;
    font-size: 13px;
}
.additional-page span {
    font-size: 18px;
    line-height: 0;
    margin-right: 5px;
    vertical-align: middle;
}
.additional-page > a:hover, .additional-page > a:focus{
    color: #000;
}

/*cart-popup*/
.pop-up-box.cart-popup {
    padding-top: 13px;
}
.cart-list > div {
    display: table-cell;   
    vertical-align: top;
}
.cart-img {
    padding-top: 8px;
}
.cart-title {
    padding: 0 10px;
}
.cart-title a {
    display: inline-block;
    padding-bottom: 5px;
}
.cart-list .del-item {
    cursor: pointer;
}
.cart-list .del-item:hover {
    color: #999999;
}
.sub-total{
    padding-top: 8px;
}
.sub-total > div{
    vertical-align: middle;
}
.cart-list.buttons div {
    padding: 20px 0 10px;
}
.caption-text span{
    margin-right: 5px;
}

/*Search Popup*/
.pop-up-box.search-popup {
    padding: 0;
    right: 100px;
    width: 600px;
}
.search-popup .form-group{
    margin: 0;
}
.search-popup .form-group .form-control, .search-popup .bootstrap-select .dropdown-toggle{
    border: none;
}
.search-popup .search-selectpicker {
    border-right: 1px solid #cccccc;
}
.form-wrap .form-control.submit-btn {
    border: medium none;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    width: auto;
}

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

/*******************************
    7 - Audio Player
********************************/
.theme-slider.owl-theme .owl-pagination{bottom:70px}
.main-player{position:relative}
.main-player-wrap{position:absolute;bottom:0;left:0;width:100%;height:auto; background:rgba(0,0,0,0.2);display:inline-block;width:100%;vertical-align:middle}
.main-player-play-pause,.main-player-volume,.main-player-list-wrapper{float:left;margin:0 10px;position:relative;padding:0;width:40px;cursor:pointer;position: relative;}
.main-player-song{float:left;margin:0 10px;overflow:hidden;padding:0;width:30%}
.main-player-song > *{display:inline-block;margin:10px}
.main-player-wrap i{line-height:20px;cursor:pointer;display:block;padding:10px;height:40px;width:40px;box-sizing:border-box;font-style:normal;float:left;text-align:center;color:rgba(255,255,255,0.7);transition:color .3s;font-size:16px;font-weight:400}
.main-player-wrap i:hover{color:rgba(255,255,255,1)}
.main-player-volume i,.main-player-volume.off i.main-player-volume-high,.main-player-volume.half i.main-player-volume-high,.main-player-play-pause i,.main-player-playing .main-player-play-pause .main-player-play,.main-player-loading .main-player-play-pause .main-player-play,.main-player-error .main-player-play-pause .main-player-play{display:none;float:none}
.main-player-play-pause .main-player-play,.main-player-playing .main-player-pause,.main-player-loading .main-player-loading-icon,.main-player-error .main-player-error-icon,.main-player-volume .main-player-volume-high,.off .main-player-volume-off,.half .main-player-volume-low{display:block}
.main-player-shuffle.off,.main-player-loop.off{color:rgba(255,255,255,0.3)}
.main-player-scrubber{border-bottom:0 none;border-left:0 none;float:left;margin:0 20px;height:40px;position:relative;width:280px;box-sizing:border-box;cursor:pointer}
.main-player-scrubber-back,.main-player-progress,.main-player-loaded{background:rgba(255,255,255,1);height:2px;left:0;position:absolute;top:19px;z-index:0;width:100%}
.main-player-scrubber-back{background:rgba(255,255,255,0.15)}
.main-player-loaded{background:rgba(255,255,255,0.4);z-index:1;width:0}
.main-player-progress{width:0;z-index:2}
.main-player-progress b{position:absolute;top:-7px;right:0;width:0;height:16px;border-right:2px solid #FFF;z-index:4}
.main-player-time{color:#FFF;float:left;height:40px;line-height:40px;margin:0 10px;padding:0;width:80px}
.main-player-time em{font-style:normal}
.main-player-volume{position:relative;overflow:visible}
.main-player-volume:hover,.main-player-volume.hover{background:rgba(0,0,0,.9);border-radius:0 0 3px 3px;transition:background .3s}
.main-player-vslider{background:rgba(0,0,0,.9);position:absolute;bottom:40px;visibility:hidden;opacity:0;transition:opacity .3s;width:100%;height:80px;z-index:10000;border-radius:3px 3px 0 0;box-sizing:border-box;padding:10px 0 0}
.main-player-vslider div{position:relative;height:100%;width:100%}
.main-player-vslider div div{position:absolute;width:0;height:100%;top:0;left:50%;bottom:0;border-left:1px solid #FFF;z-index:1}
.main-player-vslider b{position:absolute;width:50%;left:50%;bottom:0;text-align:center;z-index:2}
.main-player-vslider b span{position:absolute;width:10px;height:10px;border-radius:5px;background:#FFF;top:-5px;left:-5px;z-index:3}
.main-player-volume:hover .main-player-vslider,.main-player-volume.hover .main-player-vslider{visibility:visible;opacity:1}
.main-player-error-message{position:absolute;bottom:3px;color:red;font-size:10px;width:100%;z-index:10;text-align:center}
.main-player-list{position:absolute;bottom:50px;width: 250px;right:0;height:auto;background:rgba(0,0,0,0.9);padding:15px;margin:0;list-style:none;z-index:10000;opacity:0;visibility:hidden;transition:opacity .3s}
.main-player-list.opened{opacity:1;visibility:visible}
.main-player-list li{display:block;cursor:pointer;padding:2px;margin:2px 0}
.main-player-list li.playing{border-left:2px solid rgba(255,255,255,0.5);background:rgba(255,255,255,0.1)}
.main-player-list li *{display:inline-block;margin:0 10px;color:rgba(255,255,255,0.8)}
.main-player-list li:hover{background:rgba(255,255,255,0.2)}
.main-player-list li:hover *{color:rgba(255,255,255,1)}
/*******************************
    7 - Audio Player ENDS
********************************/

/******************************* 
    3 - MAIN CSS STARTS 
********************************/
/*--------------------- Breadcrumbs Starts ------------------------- */
.light-breadcrumb{
    background: #f2f2f2;
    height: 350px;
}
.breadcrumb-bg {
    background-image: url("../img/main/banner/breadcrumb-bg.png");
    background-position: 85% top;
    background-repeat: no-repeat;
    height: 400px;
    padding: 40px 0;
}
.blog-breadcrumb {
    background-image: url("../img/main/banner/blog-breadcrumb-bg.png");
}
.contact-breadcrumb{
    background-color: #ddd8d3;
    background-image: url("../img/main/banner/contact-breadcrumb-bg.png");
    background-position: right top;
}
.about-breadcrumb{
    background-image: url("../img/main/banner/about-breadcrumb-bg.png");
    background-size: cover;
}
.login-breadcrumb {
    background-image: url("../img/main/banner/login-breadcrumb-bg.png");
    background-size: cover;
}
.breadcrumb-menubar{background:transparent none repeat scroll 0 0;margin:0;padding:0}
.breadcrumb-menubar > li{text-transform:capitalize;}
.breadcrumb-menubar > li{color: #000;}
.breadcrumb-menubar > li > a:after{
    content: "/";
    color: #999;
    padding: 0 3px;
}
/*--------------------- Breadcrumbs Ends ------------------------- */

/*--------------------- About Starts -------------------------*/
.about-info b{
    color: #000;
}
.about-info p{
    margin-bottom: 25px;
}
.about-box{
    display: inline-block;
    width: 100%;
}
.about-info li {
    padding-bottom: 10px;   
}
.about-contact li {
    display: inline-block;
    width: 100%;
}
.about-contact li i {
    float: left;     
    width: 6%;
}
.about-contact li .desc{
    float: left;     
    width: 92%;
}
.join-team {
    background-image: url("../img/main/icons/que.png");
    background-position: center center;
    background-repeat: no-repeat;
    bottom: 0;
    height: 85px;
    left: 0;
    line-height: 85px;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 80%;
}
.team-wrap ul {
    margin-top: 15%;
}
.team-detail .list-items > li {
    font-size: 13px;   
}
.team-detail li a {
    color: #000;
}
.team-detail li a:hover, .team-detail li a:focus{
    color: #00ccff;
}
.team-detail li span{
    color: #999;
}
.team-detail .title-1 {
    display: inline-block;  
    width: 85%;
}
.team-detail {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    text-align: center;
    padding-top: 35%;
}
.team-wrap{
    position: relative;
}
.team-wrap img {
    opacity: 0.9;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;

    display: block;
    margin: auto;
}
.team-wrap .team-detail::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale3d(1.4,1.4,1);
    transform: scale3d(1.4,1.4,1);
}
.team-detail ul, .team-detail .title-1, .team-detail h5 {  
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
.team-wrap:hover .team-detail::before,
.team-wrap:hover ul,
.team-wrap:hover .title-1,
.team-wrap:hover h5{
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}
.team-wrap:hover img {
    opacity: 0.4;
}
/*--------------------- About Ends -------------------------*/

/*--------------------- Contact Starts -------------------------*/
.contact-box + .contact-box {
    border-left: 1px solid #e5e5e5;
}
.contact-box .title-1 {
    display: block;
    margin: 20px 0 10px;
}
.contact-box p {
    font-size: 13px;
    margin-bottom: 0;
}
.contact-form .form-group {
    margin-bottom: 25px;
}
.contact-form .form-control {
    background-color: #f6f6f6;
    border: medium none;
}
.contact-form .section-title span {
    display: block;
    line-height: 2;
}
.google-map, .map-canvas, #map-canvas2 {
    max-height: 500px;
    min-height: 500px;
}
#map-canvas{
    min-height: 700px;
    max-height: 700px;
}

.map-location {
    background: #ffffff none repeat scroll 0 0;
    display: inline-block;
    width: 330px;
    position: relative;
}
.loctn-img {
    display: inline-block;
    vertical-align: middle;
}
.loctn-info {
    display: inline-block;
    padding: 0 15px;
    vertical-align: middle;
}
.loctn-info > p {
    margin-bottom: 5px;
}
/*--------------------- Contact Ends -------------------------*/

/*--------------------- Contact Style 2 Starts -------------------------*/
.contact-2 {
    display: inline-block;
    width: 100%;
}
.contact-details .section-title {
    font-weight: normal;
    margin: 30px 0 12px;
}
.contact-details p{
    font-size: 13px;
    margin-bottom: 0;
}
.contact-form-2 .form-control {
    border-width: 0 0 1px;
    padding: 0;
    color: #000;
    font-size: 14px;
}
.contact-form-2 .form-control:focus {
    border-color: #000;
}
.contact-form-2 .submit-btn {
    background: transparent;
    padding: 10px 0;
    border-color: #000;
    margin-top: 30px;
    border-width: 0 0 1px;
}
.map-styl-2 #map {
    /*    height: 600px;
        width: 100%;*/
}

/*--------------------- Contact Style 2 Ends -------------------------*/

/*--------------------- Blog Starts -------------------------*/
.post-header, .post-media, .post-body, .post-footer{
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}
.post-meta {
    margin: 10px 0 25px -5px;
}
.post-meta > li + li::before {
    color: #999999;
    content: "|";
    margin-left: 7px;
    padding-right: 16px;
}
.post-meta > li {
    font-size: 13px;
}
.post-meta > li a:hover, .post-meta > li:focus{
    color: #000;
}
.blog-wrap .post-body p{
    color: #333;
}
.post-footer i{
    padding: 0;
}
.blog-slider .owl-nav .owl-prev, .blog-slider .owl-nav .owl-next{
    background: rgba(51, 51, 51, 0.5) none repeat scroll 0 0;
    bottom: 0;
    color: #ffffff;
    display: inline-block;
    font-size: 18px;
    height: 45px;
    line-height: 47px;
    margin: auto;
    position: absolute;
    text-align: center;
    top: 0;
    width: 45px;
    opacity: 0.5;
}
.blog-slider .owl-nav .owl-prev:hover, .blog-slider .owl-nav .owl-next:hover {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    opacity: 1;
}
.blog-slider .owl-nav .owl-prev{
    left: 25px;
}
.blog-slider .owl-nav .owl-next{
    right: 25px;
}
.owl-theme .owl-controls{
    margin: 0;
}
.post-media blockquote {
    border: 20px solid #ececec;
    padding: 50px 90px;
    position: relative;
}
.post-media blockquote:after{
    bottom: 0;
    color: #f3f3f3;  
    font-size: 100px;
    position: absolute;
    right: 0;
    content: "\7b";
    font-family: "ElegantIcons";
    z-index: -1;
}
.post-media blockquote i{
    color: #666666;
    display: inline-block;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 25px;
    width: 100%;
}
iframe { 
    border: 0;
}
iframe .ytp-large-play-button {
    display: none;
}
.post-media iframe{
    width: 100%;   
    vertical-align: middle;
}

.post-listing .post-media iframe{
    height: 400px;
    border: 0;
}
.video-link {
    background: #fff none repeat scroll 0 0;
    border: medium none;
    border-radius: 50%;
    color: #333;
    display: inline-block;
    font-size: 30px;
    height: 85px;
    text-align: center;
    vertical-align: middle;
    width: 85px;
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

/*-- Post Grid --*/
.post-grid .clear-box:nth-child(2n+1){
    clear: both;
}
.post-grid .post-meta > li{  
    margin-right: 0;
}
.post-grid .post-meta {
    margin: 5px 0 25px -5px;
}
.post-grid .post-meta > li + li::before {  
    margin-left: 5px;
    padding-right: 10px;
}
.post-grid .blog-slider .owl-nav .owl-prev, .post-grid .blog-slider .owl-nav .owl-next{
    font-size: 14px;
    height: 35px;
    line-height: 37px;
    width: 35px;
}
.post-grid .main-player-scrubber {
    width: 90px;
}
.post-grid .post-media iframe{
    height: 192px;
}
.post-grid .video-link{
    font-size: 23px;
    height: 60px;
    width: 60px;
}
.post-grid .post-media blockquote{
    padding: 50px;
}

/*-- Post Thumb --*/
.post-thumb .post-media{
    margin-top: 4px;
}
.post-thumb .post-meta {
    margin: 0 0 15px -5px;
}
.post-thumb .blog-slider .owl-nav .owl-prev, .post-thumb .blog-slider .owl-nav .owl-next {
    font-size: 14px;
    height: 35px;
    line-height: 37px;
    width: 35px;
}
.post-thumb .post-media iframe {
    height: 160px;
}
.post-thumb .video-link {
    font-size: 15px;
    height: 45px;
    width: 45px;
}
.post-thumb .main-player-scrubber{
    margin: 0;
    width: 80px;
}
.post-thumb .main-player-play-pause, .post-thumb .main-player-volume, .post-thumb .main-player-list-wrapper{
    margin: 0;
}
.post-thumb .post-wrap:last-child {
    border: none;
}
.post-thumb .post-wrap {
    border-bottom: 1px solid #e8e8e8;
    display: inline-block;
    margin-bottom: 31px;
    width: 100%;
    clear: both;
}

/*-- post masonery --*/
.post-masonry .post-wrap {
    float: left;       
}
.post-masonry .post-wrap, .post-masonry .grid-sizer {
    width: 33.3333%;
    padding-left: 15px;
    padding-right: 15px;
}
.post-masonry .post-media blockquote {
    padding: 50px;
}
.post-masonry .post-media iframe {
    height: 190px;
}
.post-masonry .video-link {
    font-size: 23px;
    height: 60px;
    width: 60px;
}
.post-masonry .main-player-scrubber {
    width: 90px;
    margin: 0 10px;
}
.post-masonry .post-meta > li + li::before {
    margin-left: 0px;
    padding-right: 5px;
}
.post-masonry .post-meta > li {
    margin-right: 0;
}
.load-more a::before {
    background-color: #ebf0f1;
    content: "";
    height: 60px;
    left: 0;
    position: absolute;
    top: 0;
    width: 60px;
    z-index: -1;
    margin: auto;
    right: 0;
    bottom: 0;
}
.load-more a {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 110px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;   
    text-transform: uppercase;
}
.load-more a:hover {
    color: #000000;
}
/*--------------------- Blog Ends -------------------------*/

/*--------------------- Single Blog Starts -------------------------*/
.single-blog-wrap .post-title{
    margin-top: 0;
}
.single-blog-wrap .post-meta{
    text-transform: uppercase;
    color: #999999;
    margin: 10px 0 45px -5px;
}
.single-blog-wrap .post-body b{
    color: #000;
}
.single-blog-wrap .post-body > p {
    line-height: 2;
    margin-bottom: 25px;
}
.single-blog-wrap .post-body p a{
    color: #0099cc;
}
.single-blog-wrap .post-body > ul {
    padding-left: 25px;
}
.single-blog-wrap .post-body > ul li:before{
    content: "\5e";
    font-family: "ElegantIcons";
    color: #666666;
    padding-right: 5px;
    vertical-align: middle;
}
.single-blog-wrap .post-body > ul li {
    padding: 5px 0;
}
.single-blog-wrap blockquote {
    background-color: #f6f6f6;
    border-left: 5px solid #666666;
    display: inline-block;
    font-size: 18px;
    font-style: italic;
    line-height: 2;
    margin: 10px 0 30px;
    padding: 40px 75px;
    position: relative;
    width: 100%;
}
.single-blog-wrap blockquote:after{
    bottom: -25px;
    color: #cccccc;   
    font-size: 70px;
    position: absolute;
    right: 15px;
    z-index: 0;
    content: "\7b";
    font-family: "ElegantIcons";   
}
.post-footer .social-media ul {
    display: inline-block;
    font-size: 16px;
    margin-left: 10px;
    vertical-align: middle;
}
.post-footer .social-media a:hover, .post-footer .social-media a:focus{
    color: #000;
}
.post-footer .tag-cloud span, .post-footer .social-media span{
    margin-right: 5px;
}
.post-footer .tag-cloud, .post-footer .social-media {
    display: inline-block;
    margin: 7px 0;
    width: 100%;
}
.single-blog-wrap .fullwidth-divider{
    border-color: #e5e5e5;
}
.single-post-img iframe#video{
    height: 400px;
}
.single-post-img .related-post .post-media iframe#video {
    height: 192px;
}
.author-info {
    background-color: #f6f6f6;
    display: inline-block;
    padding: 45px;
    vertical-align: middle;
    width: 100%;
}
.author-info .title-2 {
    margin: 0 0 20px;
}
.author-info > p {
    margin-bottom: 0;
}
.single-blog-wrap .related-post .post-meta{
    margin: 5px 0 25px -5px;
}
.related-post-slider .post-wrap{
    margin: 0 15px;
}
.comment-box .comment-avatar{
    margin-right: 20px;
}
.comment-box .media-body {
    background-color: #f6f6f6;
    padding: 10px 20px 20px;
    position: relative;
    overflow: visible;
}
.comment-box .media-body:before{
    content: "";
    left: -10px;
    position: absolute;
    top: 15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 12px 6px 0;
    border-color: transparent #f6f6f6 transparent transparent;
}
/*--------------------- Single Blog Ends -------------------------*/

/*--------------------- Blog Sidebar Starts -------------------------*/
.sidebar-search .form-control {
    background-color: #f6f6f6;
    border: medium none;
    font-style: italic;
    margin-bottom: 15px;
}
.recent-tweets {
    margin-bottom: 30px;
}
.recent-tweets .title-2 {
    color: #cccccc;
    display: inline-block;
    font-size: 12px;
    margin-top: 13px;
}
.recent-tweets p{
    line-height: 2.2;
    margin: 0;
}
.recent-tweets a{
    color: #666;
}
.recent-tweets a.blue-color{
    color: #0099cc;
}
.tag-cloud > a {
    display: inline-block;
    padding: 0 0 10px;
    text-transform: capitalize;
}
.tag-cloud > a:hover{
    color: #000;
}
/*--------------------- Blog Sidebar Ends -------------------------*/



/*--------------------- Product Sidebar Starts ------------------------- */
.brand-logo {
    padding: 20px;
    text-align: center;
}
.widget-wrap { position: relative; }

.widget-feature li a {
    display: inline-block;
    width: 100%;
}
.widget-feature li a:hover .feature-icon {
    color: #fff;
}
.widget-feature .feature-icon {
    background: #f2f2f2 none repeat scroll 0 0;
    display: inline-block;
    font-size: 18px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    width: 45px;
    color: #666;
    transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
}
.widget-feature .feature-des {
    color: #666666;
    display: inline-block;
    font-size: 13px;
    line-height: 1.8;
    margin-left: 20px;
    margin-top: -5px;
    vertical-align: top;
    width: 73%;
}
.widget-feature > li {
    padding: 8px 0;
}
.recent-nav {
    color: #000000;
    cursor: pointer;
    font-size: 20px;
    line-height: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.recent-nav .slider-btn:hover{ color: #999; }
.recent-wrap{
    display: inline-block; width: 100%;
}
.recent-slide-des,.recent-slide-img{
    padding-left: 0;
}
.recent-slide-img img {
    border: 1px solid transparent;
    margin-top: 5px;
    transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
}
.recent-wrap:hover .recent-slide-img img{ border-color: #000; }
.recent-wrap .caption-text {
    padding-top: 5px;
}
.recent-wrap:hover .caption-title a, .recent-wrap:focus .caption-title a {color: #999;}

/*--------------------- Product Sidebar Ends ------------------------- */

/*---------------- Product Categories Sidebar Starts ------------------------ */
.sidebar .widget-title {    
    margin: 0 0 35px;
    padding-bottom: 20px;
}
.sidebar.with-border .widget-title{
    margin: 0 0 20px;
}
.with-border .widget-title, .with-border .widget-content li, .with-border .widget-content .recent-wrap {
    border-bottom: 1px dashed #cccccc;
}
.with-border .widget-content {
    padding-left: 25px;
}
.widget-content ul{
    margin-bottom: 0;
}
.widget-content li {
    display: inline-block;
    margin-bottom: 6px;
    padding-bottom: 10px;
    vertical-align: middle;
    width: 100%;
}
.widget-content li:last-child, .widget-content .recent-wrap:last-child {
    border-bottom: none;
}
.widget-content li i {
    display: inline-block;
    vertical-align: middle;
    width: 6%;
}
.with-border .widget-content li > a {
    font-size: 13px;
}
.widget-content li > a {
    color: #666;
    display: inline-block;
    font-size: 14px;
    /*    vertical-align: middle;*/
    width: 92%;
}
.widget-content li > a:hover, .widget-content li > a:focus,
.widget-content li > a:hover span,.widget-content li > a:focus span{
    color: #000;
}
.widget-content li > a span {
    color: #999999;
    float: right;
    transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
}
.widget-content .recent-wrap {    
    margin-bottom: 8px;
    padding-bottom: 18px;
}

/*-- Range Css --*/
.slider-range {
    margin: 25px 0 20px;
}
.widget-content #slider-range {
    background-color: #e4e3e3;
    background-image: none;
    border-color: #e4e3e3;
    border-radius: 0;
    height: 4px;
    margin: 25px 0 20px;
}
.widget-content .amount {
    color: #000000;
    font-size: 13px;
    font-weight: normal;
}
.widget-content #amount {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #000000;
    font-size: 13px;
    width: 150px;
}
#slider-range .ui-widget-header{
    background-image: none;
    background-color: #000000;
}
#slider-range .ui-slider-handle{
    background-color: #cccccc;
    background-image: none;
    border: medium none;
    border-radius: 0;
    height: 27px;
    margin-left: 0;
    top: -12px;
    width: 3px;
}
/*-- / Range Css --*/

/*---------------- Product Categories Sidebar Ends ------------------------ */


/*--------------------- Product Layout 01 Starts------------------------- */

/*--- Product Slider Style 1 Starts ---*/
.owl-carousel .item:hover .caption-link, .product-fullwidth .item:hover .caption-link{
    opacity: 1;
    visibility: visible;
}
.sync1 {
    margin-bottom: 16px;
}
.prod-slider-wrap{ 
    margin-left: -8px;
    margin-right: -8px;
}
.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 img, .sync2 .item img:hover{
    border: 1px solid #999;
}
.sync2 .item img,.sync1 .item img {  border: 1px solid transparent; }
.sync2 .item,.sync1 .item {  
    cursor: pointer;
    margin: 0 9px;  
    text-align: center;   
    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: 10px;
}
.sync2 .owl-nav .owl-prev i {
    left: 10px;
}
/*.sync2 .item > img {   
    width: 72px;
}*/
/*--- Product Slider Style 1 Ends ---*/

/*--- Product Content Starts ---*/
.slider-img {padding-right: 20px;}
.modal-content{
    border-radius: 0;
    display: inline-block;
    width: 100%;
    padding: 30px 15px;
}
.sb-close-btn {
    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;
}
.sb-close-btn:hover {
    background: #ececec none repeat scroll 0 0;
    color: #999999;
}
.slider-pagination li {    
    margin-bottom: 19px;    
}
.slider-pagination li.active img, .slider-pagination li img:hover{
    border-color: #000;   
}
.slider-pagination li img{
    border: 1px solid transparent;
    display: block; margin: auto;
    transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
}
.slider-pagination li:last-child{margin-bottom: 0;}
.product-content{
    display: inline-block; width: 100%; vertical-align: middle; position: relative;
}
.prod-lr-btn{ position: absolute; right: 0; }
.prod-lr-btn a {
    background-color: #ececec;
    color: #999999;
    display: inline-block;
    font-size: 16px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    vertical-align: middle;
    width: 25px;
}
.prod-lr-btn a:hover {
    background-color: #000000;
    color: #ffffff;
}
.product-heading .product-title{ margin-top: 0; }
.product-review {
    display: inline-block;
    margin-left: 10px;
}
.product-review li , .stock-detail li { line-height: 1; }
.product-review li + li, .stock-detail li + li { border-left: 1px solid #999; padding-left: 10px; }
.stock-detail li + li{   margin-left: 17px; padding-left: 30px; }
.stock-detail i {
    font-size: 16px;
    margin-right: 5px;
}
.product-review a {
    padding-left: 5px;
}
.product-description p{
    margin-bottom: 0;
}
.product-form label {
    color: #000000;
    display: inline-block;
    font-weight: normal;
    width: 100%;
    margin-bottom: 17px;
}
.product-form label .font-2{ text-transform: uppercase; }
.product-form .bootstrap-select .btn .filter-option {
    color: #999999;
    font-style: italic;
}
.product-form .bootstrap-select .btn{
    height: 40px;
    line-height: 40px;
    padding: 5px 20px;
}
.add-to-cart .cart-btn{
    min-width: 200px;
}
.add-to-cart .cart-btn i {
    line-height: 0;
    margin-right: 7px;
    vertical-align: middle;
}
.prod-btns .form-control.qty {
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    width: 170px;
    line-height: normal;
}
.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;
}
.prod-btns .quantity .minus {
    left: 10px;
}
.prod-btns .quantity .plus{
    right: 10px;
}
.prod-btns .quantity {
    position: relative;
    margin-right: 25px;
}
.prod-btns > div{ display: inline-block; vertical-align: middle; }
.quantity input[type=number]::-webkit-outer-spin-button,
.quantity input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity input[type=number] {
    -moz-appearance:textfield;
}
.prod-social ul{
    display: inline-block;
    vertical-align: middle;
}
.prod-social li a {
    color: #cccccc;
    font-size: 16px;
}
.prod-social li a:hover { color: #000; }
.prod-tabs {
    border-bottom: 1px solid #cccccc;   
}
.prod-tabs li{
    display: inline-block;
    font-weight: bold;
}
.prod-tabs li a{ color: #ccc; padding: 15px; position: relative; }
.prod-tabs li a:hover, .prod-tabs li a:focus, .prod-tabs li.active a{
    background-color: transparent;
    color: #333;
}
.prod-tabs li a::after {
    background: #000;
    content: "";
    height: 2px;
    left: 0;
    margin: auto;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 90%;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
    -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
    width: 100%;    
}
.prod-tabs li a:hover::after, .prod-tabs li a:focus::after, .prod-tabs li.active a::after{
    opacity: 1;
    transform: translateY(4px);
    -webkit-transform: translateY(4px);
}
.prod-tab-content p{
    margin-bottom: 5px;
}
.prod-tab-content ul { margin-bottom: 0; }
.prod-tab-content li {
    display: inline-block;
    font-size: 13px;
    padding: 3px 0;
    vertical-align: middle;
    width: 100%;
}
.prod-tab-content li i {
    font-size: 14px;
    vertical-align: middle;
    float: left;
    margin-top: 3px; 
    width: 3%;
}
.prod-tab-content li .des {
    float: left;  
    width: 94%;
}
.content-style-2 .prod-tab-content li i {
    width: 5%;
}


/*Tabs Style 2*/
.tabs-style-2 .prod-tabs li{ display: block; }
.prod-with-sidebar .tabs-style-2 .prod-tabs li a, .tabs-style-2 .prod-tabs li a{ padding: 6px 0; }
.tabs-style-2 .prod-tabs {border-bottom: 0;}
.tabs-style-2 .content{ border-left: 1px solid #ccc;  padding: 10px 15px 30px 30px;}
.tabs-style-2 .prod-tabs li a:hover:after, 
.tabs-style-2 .prod-tabs li a:focus:after, 
.tabs-style-2 .prod-tabs li.active a:after{
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}
.tabs-style-2 .prod-tabs li a:after{
    height: 40px;
    width: 2px;   
    right: -15px;
    top: 0;
    left: auto;
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
}
.prod-with-sidebar .tabs-style-2 .prod-tabs li:first-child a{
    padding-top: 13px;
}
/*--- Product Content Ends ---*/

/*--------------------- Product Layout 01 Ends ------------------------- */

/*--------------------- Product Layout 02 Starts ------------------------- */
.prod-slider-2 .slider-img{ padding-left: 0; }
.content-style-2 .prod-tabs li + li{ 
    margin-left: 20px;
}
.content-style-2 .prod-tabs li + li a::after, .content-style-2 .prod-tabs li + li a:after{
    left: 13px;
}
.content-style-2 .prod-tabs li + li a::before, .content-style-2 .prod-tabs li + li a:before  {    
    content: " ";
    border-left: 1px solid #cccccc;    
    padding-left: 20px;
}
.content-style-2 .prod-tabs li a {
    padding: 10px 0;
}
/*--------------------- Product Layout 02 Ends ------------------------- */

/*--------------------- Product Layout 03/04 Starts ------------------------- */
.prod-with-sidebar .prod-tabs li:first-child a {
    padding-left: 0;
}
.prod-with-sidebar .prod-tabs li a{ padding: 15px 14px }
/*--------------------- Product Layout 03/04 Ends ------------------------- */

/*--------------------- Product Layout 05 Starts ------------------------- */
.prod-lay-5 .product-form .bootstrap-select .btn, .prod-lay-5 .prod-btns .form-control.qty{
    background-color: #fff;
}
.style-5.sync1 .item{
    overflow: hidden;
}
.style-5.sync2 {
    bottom: 70px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 67%;
}
.prod-slider-style .style-5 .owl-prev, .prod-slider-style .style-5 .owl-next{
    bottom: 0;
    color: #000000;
    font-weight: bold;
    height: 20px;
    left: 15px;
    letter-spacing: 5px;
    margin: auto;
    position: absolute;
    text-transform: uppercase;
    top: 0;    
    transform-origin: left bottom 0;
    width: auto;    
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}
.prod-slider-style .style-5 .owl-next {
    right: -55px;
    left: auto;
}
.style-5.sync1{
    margin-bottom: 0;
}
/*--------------------- Product Layout 05 Ends ------------------------- */

/*--------------------- Product Starts ------------------------- */
.theme-tabs > li {
    display: inline-block;
    vertical-align: middle;
}
.theme-tabs > li + li {
    border-left: 2px solid #000000;
    margin-left: -4px;
    vertical-align: middle;
}
.theme-tabs > li a {
    line-height: 15px;
    padding: 0 35px;
    text-transform: uppercase;
}
.theme-tabs > li a:hover, .theme-tabs > li a:focus, .theme-tabs > li.active a{
    background: transparent;
    color: #999;
}
.thumbnail-wrap{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.thumbnail-wrap .thumbnail{
    border: none;
    padding: 0;  
    margin: 0 15px;
}
.thumbnail .caption{
    padding: 10px 0;
}
.thumbnail-conten{
    text-align: right;
}
.thumbnail-conten li{
    margin: 0;
}
.thumbnail-conten li:first-child{ float: left; }
.thumbnail-conten li a {
    color: #ffffff;
    display: inline-block;
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}
.thumbnail-conten li a:hover,.thumbnail-conten li a:focus{
    background-color: #333333;
}
.thumbnail-conten li span{
    font-size: 12px;
    vertical-align: middle;    
}
.thumbnail-conten li i {
    vertical-align: middle;
}
.thumbnail-wrap:hover .back {
    transform: rotateY(360deg);
    opacity: 1;
    backface-visibility: visible;
}
.thumbnail-wrap:hover .front {
    transform: rotateY(180deg);
    opacity: 0;
    backface-visibility: hidden;
}
.flipper .front, .flipper .back { 
    transition: 0.6s;
    transform-style: preserve-3d;
}
.flipper .front {    
    transform: rotateY(0deg);
    backface-visibility: visible;
}
.flipper .back {
    backface-visibility: hidden;
    height: auto;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: rotateY(160deg);
    width: 100%;
}
.thumbnail-img{
    position: relative;
}
.thumbnail-wrap .thumbnail-img{
    overflow: hidden;
}
.thumbnail-wrap .thumbnail-conten {
    backface-visibility: hidden;
    bottom: 0;
    height: auto;
    position: absolute;
    opacity: 0;
    top: auto;
    transform: translateY(100%);
    transition: transform 0.4s ease 0s, opacity 0.1s ease 0.3s;
    width: 100%;
    margin-left: 0;
}
.thumbnail-wrap:hover .thumbnail-conten{
    opacity: 1;
    transform: translateY(0px);
    transition: transform 0.4s ease 0s, opacity 0.1s ease 0s;
}
.thumbnail-wrap:hover .title-2{
    color: #999;
}
/*--------------------- Product Ends ------------------------- */

/*---------------- Product Categories Style 1 Starts ------------------------ */

/*-- Categories Sorting --*/
.show-result .section-title{
    margin: 15px 0 0;
}
.view-tabs {
    border: none;
    margin: 0;
    float: right;
}
.view-tabs li:first-child {
    margin-right: 20px;
}
.view-tabs li a {
    background: transparent;
    border: 1px solid #e7e8ec;
    border-radius: 0;
    color: #ccc;
    display: inline-block;
    font-size: 24px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 0;
    width: 50px;
}
.view-tabs > li.active > a, .view-tabs > li.active > a:focus, .view-tabs > li.active > a:hover{
    background: #000000 none repeat scroll 0 0;
    border-color: #000;
    color: #ffffff;
}

.prod-categories .thumbnail{
    margin: 0 0 35px;
    display: inline-block;
    width: 100%;
}
.cat-list-view .theme-btn:hover::before, .cat-list-view .theme-btn:focus::before{
    border: none;
}
.cat-list-view .thumbnail-wrap:hover .theme-btn{
    background-color: #000;
    color: #fff;
}
.cat-list-view .thumbnail-conten i{
    margin-right: 5px;
}
.cat-list-view .thumbnail-conten li a:hover, .cat-list-view .thumbnail-conten li a:focus{
    color: #999;
}
.cat-list-view .product-price{
    margin-top: 5px;
}
/*---------------- Product Categories Style 1 Ends ------------------------ */

/*---------------- Product Categories Style 2 Starts ------------------------ */
.cat2-shorting {
    position: relative;
}
.ttl-itm {
    margin: 15px 0;
}
.ttl-itm .title-1 {
    display: inline-block;
    vertical-align: middle;
    width: 85%;
}
.ttl-itm i {
    display: inline-block;
    vertical-align: middle;
    width: 10%;
}
.cat2-sorter .search-selectpicker {
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    width: 17%;
}

.cat2-sorter .bootstrap-select .btn {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    padding: 10px 0;
}
.cat2-sorter .bootstrap-select .btn:hover, .cat2-sorter .bootstrap-select .btn:focus {
    background-color: transparent;
    border-color: transparent;
}
.btn-group.open .dropdown-toggle {
    box-shadow: none;
}
.cat2-sorter .filter-option {
    text-transform: uppercase;
}
.cat2-sorter .bootstrap-select.btn-group .dropdown-toggle .caret::after {
    font-size: 24px;
    vertical-align: top;
}
.show-itm {
    float: left;
}
.show-itm span {
    margin-right: 10px;
    vertical-align: middle;
}
.show-itm ul {
    margin: 15px 0;
    display: inline-block;
    vertical-align: middle;
}
.show-itm li {
    display: inline-block;
    margin: 0 2px;
}
.cate2-box .thumbnail-conten li a {
    padding: 0 10px;
}


/*---------------- Product Categories Style 2 Sidebar ------------------------ */
.wid-panel-con {
    padding: 30px 30px 0;
}
.wid-panel-con li {
    padding-bottom: 10px;
    text-transform: uppercase;
    font-size: 13px;
}
.wid-panel-con li a {
    color: #666;
}
.wid-panel-con li a:hover ,.wid-panel-con li a:focus {
    color: #000;
}
.panel {
    box-shadow: none;
    margin: 0;
}
.wid-panel-con > ul {
    margin: 0;
}

/*---------------- Product Categories Style 2 Ends ------------------------ */

/*---------------- Pagination Starts ------------------------- */
.pagination-list {
    margin: 0;
    text-align: center;
}
.pagination-list > li {
    border: medium none;
    border-bottom: 1px solid transparent;
    color: #000000;
    display: inline-block;
    font-size: 18px;
    line-height: normal;
    margin: 0 8px;
    text-align: center;
    padding-bottom: 5px;

    transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
}
.pagination-list > li:last-child{
    margin-right: 0;
}
.pagination-list > li a{
    color: #999999;
}
.pagination-list > li a:hover{
    color: #000;
}
.pagination-list > li.active, .pagination-list > li:hover {
    border-bottom: 1px solid #000000;
}

/* Post Pagination */
.post-pagination .pagination-list > li{
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 18px 8px;
}
.post-pagination .pagination-list > li.prev{
    float: left;
    margin: 0;
    padding: 0;
    border: none;
}
.post-pagination .pagination-list > li.next {
    float: right;
    margin: 0;
    padding: 0;
    border: none;
}
.post-pagination .pagination-list > li.prev a:before{
    position: absolute;
    height: 60px;
    width: 60px;
    left: 0;
    top: 0;
    background-color: #ebf0f1;
    content: "";
    z-index: -1;
}
.post-pagination .pagination-list > li.next a:after{
    position: absolute;
    height: 60px;
    width: 60px;
    right: 0;
    top: 0;
    background-color: #ebf0f1;
    content: "";
    z-index: -1;
}
.post-pagination .pagination-list > li.prev a, 
.post-pagination .pagination-list > li.next a{
    height: 60px;
    line-height: 60px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 110px;
    display: inline-block;
}

/*---------------- Pagination Ends ------------------------- */

/*---------------- Error Starts ------------------------- */
.error-search {
    display: inline-block;
    position: relative;
    width: 30%;
}
.error-search .submit-btn {
    color: #999999;
    height: 25px;
    padding: 0;
    position: absolute;
    right: 15px;
    text-align: center;
    top: 15px;
    width: 25px;
}
.error-search .form-control {
    background-color: #f6f6f6;
    border: medium none;
}
/*---------------- Error Ends ------------------------- */

/*---------------- Coming Soon Starts ------------------------- */
.coming-soon-bg {
    background-image: url('../img/main/banner/coming-soon-bg.jpg');
    background-size: cover;
    height: 100%;
}
.countdown-section {
    display: inline-block; 
    text-align: center;   
}
.countdown-amount {
    color: #000000;
    font-size: 120px;
    line-height: normal;
    margin: 0;
    text-transform: capitalize;
    height: auto;
    width: auto;
    display: inline-block;   
    text-align: center;  
    width: 200px;
    height: 170px;
}
.countdown-period {
    clear: both;
    color: #999;
    display: block;  
    font-size: 16px;   
    line-height: normal;
    margin: 0;
    overflow: hidden;
    position: relative; 
    text-transform: uppercase;
}
.comingsoon-media .social-icon li + li::before {
    background-color: #cccccc;
    bottom: 0;
    content: "";
    height: 15px;
    left: -5px;
    margin: auto;
    position: absolute;
    top: 0;
    width: 1px;
}
.comingsoon-media .social-icon li {
    padding: 25px;
    line-height: 0;
    position: relative;
}
.comingsoon-media .social-icon li a:hover, .comingsoon-media .social-icon li a:focus {
    color: #0099cc;
}
/*---------------- Coming Soon Ends ------------------------- */

/*---------------- Login/Register Starts -------------------------- */
.login-form .form-group {
    margin-bottom: 25px;
}
.login-form .form-control, .register-form .form-control{ color: #333; }
.login-form .submit-btn{
    min-width: 100px;
    border-color: #e7e8ec;
}
.login-form .forgot-pw {
    float: right;
}
.register-form .form-control{
    border-color: #f6f6f6;
    background-color: #f6f6f6;
}
.register-form .form-control:focus{
    background-color: transparent;
    border-color: #e7e8ec;
}

/*---------------- Login/Register Ends -------------------------- */

/*---------------- Checkout Starts -------------------------- */
.chk-panel {
    border: 1px solid #e5e5e5;
}
.chk-body {   
    padding-left: 25px;
}
.chk-body form .form-group{
    margin-bottom: 15px;
}
.chk-panel .panel {
    border-bottom: 1px solid #e5e5e5;
    border-radius: 0;
    box-shadow: none;
    padding: 30px;
}
.chk-panel .panel + .panel {
    margin-top: 0;
}
.chk-panel .panel:last-child{
    border-bottom: none;
}
.chk-form .radio-inline {
    display: inline-block;
    margin: 15px 0 0;
    width: 100%;
}
.chk-body p, .chk-body ul li{
    color: #999;
}
.chk-body ul li {
    display: inline-block;
    margin: 8px 0 0;
    width: 100%;
}
.chk-body ul li span {
    line-height: normal;
    vertical-align: middle;
}
.chk-body .submit-btn{
    min-width: 145px;
    border-color: #e7e8ec;
}
.registed-form .fpw {
    float: left;
    margin: 15px 0;    
}
.registed-form .form-group label{
    color: #000000;
}
.registed-form label {   
    font-size: 13px;
    margin-bottom: 15px;    
}
/*---------------- Checkout Ends -------------------------- */

/*----------------  Shopping Cart Ends -------------------------- */
.checkout-page .form-control, .checkout-page .bootstrap-select .btn, .checkout-page .theme-btn {
    border-color: #ccc;
}
.checkout-page .form-control, .checkout-page .bootstrap-select .btn {
    height: 55px;
}
.checkout-page .bootstrap-select.btn-group .dropdown-toggle .caret::after,
.checkout-page .bootstrap-select .btn .filter-option{
    color: #999;
}
table {
    height: auto;
    overflow: auto;
    width: 100%;
}
.product-table td {
    padding: 40px 20px;
    vertical-align: top;
    border-top: 1px solid #cccccc;
}
.product-table td.image {
    padding: 30px 0 30px 30px;
}
.product-table th {
    font-weight: normal;
    padding: 13px 20px;
    text-transform: uppercase;
}
.product-table .description li {
    padding: 12px 0 0;
}
.product-table .description li i, .product-table .description li span {
    vertical-align: middle;
}
.product-table .remove-edit a {
    display: block;
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
    text-align: right;
    width: 20px;
}
.product-table .remove-edit a:hover{
    color: #000;
}
.product-table .qty {
    border: 1px solid #cccccc;
    height: 35px;
    line-height: 35px;
    text-align: center;
    width: 60px;
}
.shp-btn .btn{
    float: left;
}
.continue-shp .btn{
    float: right;
}
.continue-shopping {
    display: inline-block;
    padding: 35px 0;
    width: 100%;
}
.product-table {
    border-bottom: 1px solid #cccccc;
}
.continue-shopping .btn {
    min-width: 240px;
    border-color: #e7e8ec;
}
.shp-btn .btn:first-child {
    margin-right: 25px;
}
.heading.chk span {
    float: right;
    line-height: 20px;
}
.coupon-form {
    margin-top: -5px;
}
.chk-sub-total {
    background-color: #efefef;
    padding: 40px;
}
.chk-total {
    background-color: #efefef;
    padding: 40px;
}
.chk-total .submit-btn {
    display: block;
    width: 100%;
}
.chk-total li span {
    margin-left: 20px;
}

/*----------------  Shopping Cart Ends -------------------------- */

/*---------------- Back To Top Starts -------------------------- */
.to-top { 
    -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; 
    background-color: #000000;
    border: 1px solid #999999;
    border-radius: 0;
    bottom: -150px;
    color: #ffffff;
    cursor: pointer;    
    font-size: 26px;
    height: 30px;
    line-height: 30px;
    position: fixed;
    right: 3%;
    text-align: center;
    width: 30px;
    z-index: 999;
}
.to-top:hover {
    opacity: 0.5;
}
/*---------------- Back To Top Ends ------------------------ */


/*---------------- Product Preview Popup Starts ------------------------ */

/*---------------- Product Preview Popup Ends ------------------------ */

/*---------------- Newsletter 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/sunglasses/popup/newsletter.png);
    background-repeat: no-repeat;
    background-position: 85% bottom;
}
.subscribe-me p {
    font-size: 13px;
    margin: auto auto 15px;
    width: 80%;
}
.popup-newsletter {
    border: 1px solid #cccccc;
    display: inline-block;
    width: 100%;    
}
.subscribe-wrap {
    padding: 0 42px;
}
.subscribe-me .form-control.text {
    border: 1px solid #cccccc;
    font-size: 13px;
    height: 37px;
    margin-bottom: 25px;
    padding: 0 15px;
    width: 100%;
}
.subscribe-me .sb-close-btn {
    font-size: 18px;
    background-color: #999999;
    color: #ffffff;
    height: 40px;
    line-height: 40px;
    position: absolute;
    right: 13px;
    text-align: center;
    top: 13px;
    width: 40px;
    z-index: 1;
}
/*---------------- Newsletter Popup Ends ------------------------ */

/******************************* 
        3 - MAIN CSS ENDS 
********************************/

/******************************* 
    6 - FOOTER STARTS 
********************************/
/*---------------- Footer Style 1 ------------------------ */
.footer-bg{
    background-color: #333333;
}
.footer-bg .logo-title{
    margin: 20px 0;
    font-size: 30px;
}
.social-icons a {    
    font-size: 20px;     
}
.footer a{
    color: #fff;
}
.footer-bg li{
    margin: 0 15px;
}
.footer a:hover{
    color: #666666;
}
.copy-rights{  
    margin: 0;
}

/*---------------- Footer Style 2 ------------------------ */
.footer-stl-2 {
    background-color: #ebebeb;
    color: #666666;
}
.footer-stl-2 .title-2 {
    color: #666666;
    font-weight: normal;
    margin-bottom: 20px;
    letter-spacing: 5px;
}
.footer-stl-2 a {
    color: #666666;
}

/******************************* 
    6 - FOOTER ENDS 
********************************/



/***responcive**/
@media (min-width: 1500px) {
    /* Prod Cat 2 */
    .cate2-box {
        width: 20%;
    }
}
@media (max-width:1200px) {
    .theme-container{
        padding-left: 15px;
        padding-right: 15px;
    }  
}
@media (min-width:1200px) {
    .product-modal{
        width: 1090px;
    }  
    .pd-lf .widget-wrap {
        padding-left: 70px;
    }
    .pd-rt .widget-wrap {
        padding-right: 70px;
    }
}
@media (min-width:1024px){
    .title-wrap > p {
        margin: auto auto 15px;
        width: 48%;
    }

}

@media (min-width:992px)and (max-width:1199px) { 

    /*header*/
    .top-elements > li{
        margin-left: 15px;
    }
    .logo-title {
        font-size: 18px;
    }
    .primary-navbar > li > a {
        font-size: 14px;
    }
    .primary-navbar > li {
        padding-left: 14px;
        padding-right: 15px;
    }

    /*home*/
    .prod-tabs li a{
        padding: 15px 10px;
        font-size: 14px;
    }

    /*Cat List View*/
    .widget-content li > a{ width: 91%; }
    .cat-list-view .thumbnail-conten li a{
        padding: 0 12px;
        font-size: 12px;
    }
    .view-wrap {
        padding-left: 0;
    }
    .view-tabs li:first-child {
        margin-right: 6px;
    }
    .cate-box .thumbnail-conten li a{
        padding: 0 12px;
    }

    /*-- Post Grid --*/    
    .post-grid .post-meta > li + li::before {
        margin-left: 0;
        padding-right: 5px;
    }
    .post-grid .post-meta > li {
        font-size: 12px;
    }

    /*-- Audio --*/
    .main-player-play-pause, .main-player-volume, .main-player-list-wrapper{
        margin: 0;
    }

    /*-- Masonery Post --*/
    .post-masonry .post-meta > li{
        font-size: 12px;
    }

    /* Login Register Page */
    .login-form .forgot-pw {
        float: none;
    }

    /*Product Layout*/
    .prod-with-sidebar .prod-btns .quantity, .modal-content .prod-btns .quantity, .prod-lay-5 .prod-btns .quantity {
        margin-bottom: 25px;
    }
    .widget-feature .feature-des{
        width: 65%;
    }

    /* Prod Cat 2 */
    .cate2-box {
        width: 33.333%;
    }
    .cat2-sorter .search-selectpicker {
        width: 25%;
    }

}
@media (min-width:768px) {
    .navigation .primary-navbar li .dropdown-menu {
        opacity: 0;    
        visibility: hidden;
        display: block;

        transform: translateY(50px);
        -webkit-transform: translateY(50px);
        transition: transform 0.3s ease 0s;
        -webkit-transition: transform 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        -webkit-transition: all 0.3s ease 0s;
    }
    .navigation .primary-navbar > li:hover > .dropdown-menu{
        opacity: 1;    
        visibility: visible;
        transform: translateY(0px);   
        -webkit-transform: translateY(0px);
    }
    .navigation .dropdown-menu  li:hover > .dropdown-menu{
        opacity: 1;
        transform: translateX(0px);
        visibility: visible;
    }
    .navigation .dropdown-menu li .dropdown-menu{
        right: 100%;
        left: auto;
        top: 0;  
        margin-right: 25px;
        transform: translateX(-50px);
    }

    /*Main css*/
    .des-2 p{
        width: 70%;
        margin: auto;
    }

    /* Login Register */
    .register-wrap{
        border-left: 1px solid #e5e5e5;
        padding-left: 70px;
    }
    .login-wrap {
        padding-right: 40px;
    }

    .continue-shp btn{
        float: right;
    }
}
@media (max-width:991px){
    /*newsletter popup*/
    .subscribe-me{
        width: auto;
        margin: auto 25px;
        top: 10%;
    }
}
@media (min-width:992px){
    /*    .style-5.sync1 img{
            max-width: none;
        }*/
    .cat-with-sidebar .cate-box:nth-child(3n+1) {
        clear: both;
    }

    /* Error Page */
    .error-search {
        width: 30%;
    }

    /* Product Categories*/
    .cat-fullwidth .cate-box:nth-child(4n+1) {
        clear: both;
    }

}
@media (min-width:768px)and (max-width:991px){

    /*header*/
    .primary-navbar {
        float: none;
        text-align: center;
    }
    .primary-navbar > li {
        display: inline-block;
        float: none;
        padding-left: 15px;
        padding-right: 15px;
    }
    .navigation .dropdown-menu li .dropdown-menu {
        left: 100%;
        margin-left: 25px;
        margin-right: 0;
        right: auto;
    }
    .top-right {
        position: absolute;
        right: 0;
    }
    .hdr-stl-2 .primary-navbar .mega-dropdown-menu {
        width: auto;
    }
    .hdr-stl-2 .menu-block + .menu-block {
        border: medium none;
        margin-top: 30px;
        min-height: auto;
    }


    /*home*/
    .prod-slider-wrap{
        margin-left: 16.6667%;
        margin-bottom: 50px;
    }
    .prod-with-sidebar .prod-slider-wrap, .prod-slider-style.prod-slider-wrap{
        margin-left: auto;
    }
    section.wrapper, section.wrapper  {
        padding-bottom: 0;
    }
    .widget-feature .feature-des{
        width: 68%;
    }
    .prod-with-sidebar .thumbnail-conten li a{  padding: 0 13px; }
    .prod-tab-content li i {
        width: 5%;
    }

    /* cat 2 */
    .shw-res {
        position: absolute;
        right: 0;
    }


    /*cat*/
    .view-tabs li:first-child {
        margin-right: 10px;
    }
    .view-wrap {
        padding-left: 0;
    }
    .cat-with-sidebar .cate-box:nth-child(2n+1) {
        clear: both;
    }
    .cate-box .thumbnail-conten li a{
        padding: 0 13px;
    }
    .widget-content li > a{ width: 91%; }
    .cat-fullwidth .cate-box:nth-child(3n+1) {
        clear: both;
    }

    /*List Cat*/
    .cat-list-view .thumbnail-conten li a{
        padding: 0 14px;
        font-size: 12px;
    }

    /*Audio Player*/
    .main-player-scrubber{
        width: 90px;
        margin: 0;
    }
    .main-player-play-pause, .main-player-volume, .main-player-list-wrapper{
        margin: 0;
    }

    /* Masonery Post */
    .post-masonry .post-wrap, .post-masonry .grid-sizer {
        width: 50%;
    }

    /* Single Post */
    .single-blog-wrap .post-meta > li + li::before {
        margin-left: 5px;
        padding-right: 10px;
    }

    /* Error Page */
    .error-search {
        width: 50%;
    }

    /* Login Register Page */
    .login-form .forgot-pw {
        float: none;
    }

    /* Shopping Cart */
    .continue-shopping .btn{
        min-width: 200px;
    }

    /* Coming Soon*/
    .countdown-amount {
        font-size: 60px;
        height: 100px;
        width: 150px;
    }

}
@media (max-width:767px) {  

    /*Offcanvas*/
    .nav-trigger{
        float: right;
    }
    .nav-trigger .toggle-icon {
        background: #ececec none repeat scroll 0 0;
        color: #000000;
        cursor: pointer;
        display: inline-block;
        height: 50px;
        line-height: 48px;
        margin: 5px 0;
        text-align: center;
        vertical-align: middle;
        width: 50px;
        z-index: 1;
    }
    .header-wrap .navigation  {     
        background: #ffffff none repeat scroll 0 0;  
        display: inline-block;
        max-height: 350px;
        padding: 35px 0;
        position: absolute;
        top: 0;  
        left: 0;
        vertical-align: middle;
        width: 250px;
        z-index: 11;
        border-bottom: 1px solid #cccccc;
        border-right: 1px solid #cccccc;

        transform: translateX(-300px);
        transition: all 0.4s ease-out 0s;
        -webkit-transition: all 0.4s ease-out 0s;
    }
    .navigation.off-canvas{
        transform: translateX(0px);
    }
    .navigation .primary-navbar li.open .dropdown-menu{
        display: block;
        border: none;
        padding: 0;
    }
    .navigation .primary-navbar li.open .dropdown-menu .dropdown-menu{
        padding: 0 0 0 15px;
    }
    .primary-navbar {
        float: none;
        margin: 0;
    }
    .primary-navbar > li > a {
        padding: 10px 20px;
    }
    .primary-navbar > li{
        padding: 0;
    }
    .primary-navbar > li.dropdown > a.dropdown-toggle::before{
        right: 15px;
    }
    .primary-navbar > li > a::after{
        background: transparent;
    }
    .menu-block + .menu-block, .hdr-stl-2 .menu-block + .menu-block {
        border: medium none;
        margin-top: 30px;
        min-height: auto;
    }
    /**/

    /*--Header --*/
    .navbar-brand {
        float: none;
        width: 100%;
        padding: 0;
        display: inline-block;
    }
    .navbar-brand .logo-title{
        float: left;
        margin: 18px 0;
    }
    .navbar-brand, .primary-navbar > li, .top-right{
        padding-top: 0;
    }
    .pop-up-box.search-popup, .header-topbar .pop-up-box.search-popup {
        right: 1px;
        width: 95%;
    }


    /*--Header style-2 --*/

    body.off-canvas-body{
        margin-left: 0;
        border: none;
    }
    .hdr-stl-2 {
        border-bottom: 1px solid #cccccc;
        border-right: 1px solid #cccccc;
    }
    /*    .resp-row{
            margin-left: -15px;
            margin-right: -15px;
        }*/
    .hdr-stl-2 .primary-navbar .mega-dropdown-menu {
        width: auto;
    }

    .header-topbar .resp-logo {float: left; padding: 10px 0; font-size: 13px;}
    .header-topbar .resp-logo p { margin: 0;}
    .header-topbar .nav-trigger{float: right;}
    .header-topbar .nav-trigger .toggle-icon{  margin: 8px 0; }
    .header-topbar .navbar-brand{padding: 20px;}
    .hdr-stl-2 .logo-title {
        font-size: 22px;
        letter-spacing: 5px;
    }    
    .hdr-stl-2 .search-popup .form-group .title-2{ padding: 0; }
    .hdr-stl-2 .primary-navbar{
        margin: 0;
    }
    .hdr-stl-2 .navigation .primary-navbar li.open .dropdown-menu{
        display: block;
        border: none;
    }
    .hdr-stl-2 .menu-block:first-child .sub-list {
        margin-top: 30px;
    }
    .hdr-stl-2 .navigation .primary-navbar li.open .dropdown-menu .dropdown-menu{
        padding: 0 0 0 15px;
    }
    .hdr-stl-2 .primary-navbar > li > a{
        padding: 10px 20px;
    }
    .hdr-stl-2 .newsletter-wrap{
        padding: 30px 0 0;
    }
    .hdr-stl-2 .newsletter-wrap, .hdr-stl-2 .social-wrap {
        margin: 20px;

    }
    .header-topbar .top-right {
        clear: both;
        display: inline-block;
        vertical-align: middle;
        width: 100%;    
    }  
    .header-topbar .search-box {        
        margin-bottom: -1px;
        margin-right: 0;
        width: 65%;
    }
    .breadcrumb-bg{
        height: 300px;
    }

    /*home*/
    section.wrapper, section.wrapper  {
        padding-bottom: 0;
    }
    .style-5.sync2{
        bottom: 30px;
    }
    .slider-img{ padding: 0 ;}
    .product-thumbnails{
        text-align: center;
        margin-bottom: 0;
    }
    .product-thumbnails li:last-child{
        margin-right: 0;
    }
    .product-thumbnails li {
        display: inline-block;
        margin: 30px 15px 0 0;
        vertical-align: middle;
        width: 18%;
    }
    .style-5.sync2{
        width: 80%;
    }
    .tabs-style-2 .content{
        border-left: medium none;
        border-top: 1px solid #cccccc;
        padding: 25px 15px 0;
        margin-top: 15px;
    }
    .tabs-style-2 .prod-tabs li{ text-align: left; }
    .tabs-style-2 .prod-tabs li a::after{
        background: transparent;
    }
    .prod-tab-content li i{
        width: 6%;
    }

    /*Breadcrumb*/
    .site-breadcumb .section-title {
        font-size: 40px;
    }

    /* cat 2 */
    .cat2-sorter .search-selectpicker {
        width: 25%;
    }

    /*cat grid*/
    .cate-box .thumbnail-img{
        display: inline-block;
        margin: auto;
    }

    /*cat list*/
    .show-result .section-title {
        margin: 0 0;
    }
    .cat-list-view .product-content {
        margin-top: 25px;
    }
    .cat-list-view .thumbnail-img {
        display: inline-block;
    }

    /*Cat Sidebar*/
    .recent-slide-img {
        display: inline-block;
    }
    .recent-slide-des {
        display: inline-block;
        vertical-align: top;
    }

    /*Audio Player*/
    .main-player-scrubber{
        margin: 0 10px;  
        width: 150px;
    }
    .main-player-play-pause, .main-player-volume, .main-player-list-wrapper{
        margin: 0;
    }

    /* Masonery Post */
    .post-masonry .post-wrap, .post-masonry .grid-sizer {
        width: 50%;
    }

    /*Single Post*/
    .comment-form .submit-btn {
        height: 45px;
        line-height: 45px;
        min-width: 180px;
    }

    /* Contact */
    #map {       
        height: 250px;       
    }
    .contact-2-map{
        overflow: hidden;
    }
    #map-canvas{
        height: 1000px;
    }
    #gmap_canvas img { 
        max-width:none!important;
        background:none!important
    }

    /* About Us */
    .team-detail {
        padding-top: 25%;
    }

    /* Error Page */
    .error-search {
        width: 90%;
    }

    /* Shopping Cart */
    .product-table {
        display: block;
        overflow-x: auto;       
    }
    .shp-btn .btn {
        margin: 0 0 25px;
    }

    /*Single Post*/
    .single-post-img .related-post .post-media iframe#video {
        height: 280px;
    }

    /* Footer */
    .footer-bg li {
        margin: 5px;
    }

    /* Preview Popup */
    .sb-close-btn {
        right: 15px;
    }

    /*Map*/
    .google-map, .map-canvas, #map-canvas, #map-canvas2 {
        max-height: 400px;
        min-height: 400px;
    }

    .contact-2 {
        text-align: center;
    }

}
@media (min-width:481px) and (max-width:767px){


    /*home*/
    .isotope-item {
        float: left;
        width: 50%;
    }
    .prod-slider-wrap{
        width: 80%;
        margin-left: 10%;
    }  
    .product-fullwidth {
        display: table;
        margin: auto;
        width: auto;
    }

    /*Post Thumb*/
    .post-thumb .post-media iframe {
        height: 350px;
    }

    /* Coming Soon*/
    .countdown-amount {
        font-size: 60px;
        height: 80px;   
        width: 125px
    }
}
@media (max-width:568px){
    .thumbnail-wrap .thumbnail{
        display: table;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width:480px){  

    /*--Product--*/
    .theme-tabs > li a {       
        padding: 0 20px;
    }

    /*-- / Product--*/

    /*newsletter popup*/
    .subscribe-wrap{
        padding: 0;
    }
    .subscribe-me p{ width: 90%; }

    /*Audio Player*/
    .main-player{
        height: 30px;
    }

    /*-- Post List --*/
    .post-media iframe, .post-listing .post-media iframe, .single-post-img iframe#video, .post-thumb .post-media iframe{
        height: 250px;
    }

    /* Masonery Post */
    .post-masonry .post-wrap, .post-masonry .grid-sizer {
        width: 100%;
    }

    /* Post Single */
    .author-info{
        padding: 45px 25px;
    }

    /* Checkout */
    .chk-body {
        padding-left: 0;
    }
    .chk-panel .panel{
        padding: 30px 20px;
    }

    /* About Us */
    .about-contact li i {      
        width: 10%;
    }
    .about-contact li .desc{
        float: left;     
        width: 90%;
    }

    .loctn-img img {
        width: 100px;
    }
}
@media (max-width:479px){  

    /*home*/
    .prod-btns .quantity{
        margin-bottom: 25px;
    }
    .hdr-stl-2 {
        width: 250px;
    }
    /*Breadcrumb*/
    .site-breadcumb {
        padding-top: 40px;
    }    

    /*cat-list*/
    .show-result,.sorter,.view-wrap{
        display: inline-block;
        width: 100%;
    }
    .view-wrap {
        margin-top: 30px;
        width: 47%;
    }
    .sorter {
        margin-top: 30px;
        padding-right: 0;
        width: 53%;
    }

    /*Post Listing*/
    .post-listing .post-title{
        font-size: 18px;
    }
    .post-media blockquote{
        padding: 50px
    }
    .post-pagination .pagination-list > li.prev a, .post-pagination .pagination-list > li.next a{
        width: 70px;
    }
    .post-pagination .pagination-list > li.prev a::before, .post-pagination .pagination-list > li.next a::after{
        width: 40px;
    }
    .post-meta > li + li::before, .post-grid .post-meta > li + li::before, .post-masonry .post-meta > li + li::before {        
        content: "";
        margin-left: 0;
        padding-right: 0;
    }
    .post-meta > li + li {
        display: block;
        padding-top: 5px;
    }
    .post-pagination .pagination-list > li {
        margin: 18px 5px;
    }


    /*about*/
    .team-detail .title-1{
        font-size: 14px;
    }

    /*Single Post*/
    .single-post-img .related-post .post-media iframe#video {
        height: 180px;
    }

    /* Coming Soon */
    .comingsoon-media .social-icon li{
        padding: 25px 10px;
    }
    .countdown-amount{
        width: 135px;
        height: 60px;
        font-size: 50px;
    }

}
@media (max-width:380px){ 
    /*--Product--*/
    .theme-tabs > li {
        border-left: 2px solid #000000;
        border-right: 2px solid #000000;
        margin: 8px 0;
        vertical-align: middle;
        width: 200px;
    }
    /*-- / Product--*/

    /*About Us*/
    .about-img .title-2{
        letter-spacing: 4px;
    }
    .team-detail .title-1 {
        font-size: 12px;
    }
    .stock-detail li + li {
        margin-left: 0;
        padding-left: 15px;
    }

    /* Product Layout */
    .prod-tabs li {
        display: block;
        margin: auto;
        width: 100%;
        text-align: center;
    }
    .content-style-2  .prod-tabs li {
        width: 150px;
    }
    .content-style-2 .prod-tabs li + li {
        margin-left: auto;
    }
    .content-style-2 .prod-tabs li + li a::before {
        border-left: medium none;
        padding-left: 0;
    }
    .content-style-2 .prod-tabs li + li a::after{
        left: 0;
    }

    /* Cat 2 */
    .cat2-sorter .search-selectpicker {
        width: 30%;
        margin: 0;
    }

}
@media (max-width:360px) {
    .product-review{
        margin: 10px 0;   
    }
    .modal-content {
        padding: 30px 0;
    }

    /*Product Layout*/
    .product-review li, .stock-detail li {
        font-size: 13px;
    }

    /*Categories*/
    .view-tabs li:first-child {
        margin-right: 10px;
    }
}