@charset "utf-8";
/* CSS Document */
html {scroll-behavior: smooth;}
body { font-family: 'montserratlight'; font-size: 14px;}
/* MAIN LAYOUT
========================================================================*/
.wrapper {}
/* HEADER
========================================================================*/
header{ padding: 10px 0; position: fixed; width: 100%; top: 0; left: 0; z-index: 9999; transition: 0.5s;}
header .logo{}
header .logo a{}
header .logo a img{}
header .logo a img.blackLogo{ display: inline; transition: 0.5s;}
header .logo a img.whiteLogo{ display: none; transition: 0.5s;}
header.innerHeader .logo a img.blackLogo{ display: none; transition: 0.5s;}
header.innerHeader .logo a img.whiteLogo{ display: inline; transition: 0.5s;}

header.stickyHeader .logo a img.blackLogo{ display: none; transition: 0.5s;}
header.stickyHeader .logo a img.whiteLogo{ display: inline; transition: 0.5s;}
header.stickyHeader{ background:rgba(0,0,0,0.8); transition: 0.5s;}

header .menuBtn {}
header .menuBtn a{ cursor: pointer; text-transform: uppercase; float: right; color: #383938; margin-top: 8px; padding: 5px 0;transition: 0.5s;}
header .menuBtn a:hover{ color: #ba8eaa; transition: 0.5s;}
header.stickyHeader .menuBtn a{color: #ffffff;}
header .menuBtn.whiteMenu a{color: #ffffff;}
@media only screen and (min-width: 960px) {
header.active{ background:none;}
header.active .logo a img.blackLogo{ display: none; transition: 0.5s;}
header.active .logo a img.whiteLogo{ display: inline; transition: 0.5s;}
header.active .menuBtn a{color: #383938;}
}
/* BANNER
========================================================================*/
.banner { background: #f3f3f3; padding: 180px 0 30px 0;}
.banner ul{ width: 84%; margin: 0 auto; max-width: 1242px; }
.banner ul li{}
.banner ul li .productImg{ width: 62%; float: left; margin-right: 8%;}
.banner ul li .productImg img{ width: 100%;}
.banner ul li .prducttag{ width: 30%; float: left;}
.banner ul li .prducttag h2{ color: #383938; font-size: 42px; line-height: 46px;font-family: 'montserratultra_light'; text-transform: uppercase; margin-bottom: 30px;}
.banner ul li .prducttag h3{ color: #999999; font-size: 14px; line-height: 16px; font-family: 'montserratregular'; text-transform: uppercase; margin-bottom: 5px;}

.banner .rslides { position: relative; list-style: none; overflow: hidden;   }
.banner .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; }
.banner .rslides li:first-child { position: relative; display: block; float: left; }


.downArrow{ text-align: center; margin:80px 0  0 0 ;}
.downArrow a{}
.downArrow a img{} 

.innerBanner{ position: relative;}
.innerBanner img{ width: 100%;}
.innerBanner h1.pageHeading{ position: absolute; text-align: center; top: 50%; left: 0; right: 0; color: #ffffff; text-transform: uppercase; font-size: 48px; line-height: 50px; font-family: 'montserratsemi_bold';}
.innerBanner h1.pageHeading img{ width: 232px;}
.innerBanner img.mobileBanner{ display:none}
.innerBanner img.desktopBanner{display:block}
/* NAV
========================================================================*/
.navigation{ }
.navigation.active{}
.navigation .navigationWrap{ }
.navigation .leftMenu { width: 67%; float: left; left:-67%; top: 0; position: fixed; z-index: 9998; transition: 1s;}
.navigation.active .leftMenu{ left: 0; transition: 1s;}
.navigation .leftMenu img{ width: 100%;}

.navigation .rightMenu{ width: 33%; float: right; top: 0; right: -33%; height: 100%; position: fixed;z-index: 9998; background: #ffffff; transition: 1s;}
.navigation.active .rightMenu{right:0; transition: 1s;}
.navigation .rightMenu nav{ padding: 150px 0 0 50px;}
.navigation .rightMenu nav ul.topMenu{}
.navigation .rightMenu nav ul.topMenu li{ margin-bottom: 5px; position: relative;}
.navigation .rightMenu nav ul.topMenu li a{ font-size: 28px; line-height: 42px; padding: 10px; color: #3c3841; text-transform: uppercase; font-family: 'montserratregular'; position: relative;}
.navigation .rightMenu nav ul.topMenu li a:after{ width:0; height: 3px; content: ""; position: absolute; left: 0; top: 50%; background:#3c3841;transition: 1s; margin-top: -2px; }
.navigation .rightMenu nav ul.topMenu > li > a:hover:after,.navigation .rightMenu nav ul.topMenu > li.active > a:after{width:100%; transition: 1s;}
.navigation .rightMenu nav ul.topMenu li a:hover{}

.navigation .rightMenu nav ul.topMenu > li{}
.navigation .rightMenu nav ul.topMenu > li > ul{}
.navigation .rightMenu nav ul.topMenu > li > ul > li{}
.navigation .rightMenu nav ul.topMenu > li > ul > li:last-child{ margin-bottom:15px;}
.navigation .rightMenu nav ul.topMenu > li > ul > li > a{ margin-left: 36px; font-size: 14px; line-height: 16px;}
.navigation .rightMenu nav ul.topMenu > li > ul > li > a:after{width: 0; height: 1px; content: ""; position: absolute; left: 0; top: 50%; background: #3c3841; transition: 1s;margin-top: 0px;}
.navigation .rightMenu nav ul.topMenu > li > ul > li > a:hover:after,.navigation .rightMenu nav ul.topMenu > li > ul > li.active > a:after{width:100%; transition: 1s;}

.navigation .rightMenu nav ul.bottomMenu{ margin-top: 15px;}
.navigation .rightMenu nav ul.bottomMenu li{margin-bottom: 5px; position: relative;}
.navigation .rightMenu nav ul.bottomMenu li a{ font-size: 14px; line-height: 16px; color: #3c3841; padding: 10px; text-transform: uppercase; font-family: 'montserratregular'; position: relative;}
.navigation .rightMenu nav ul.bottomMenu li a:after{ width:0; height: 1px; content: ""; position: absolute; left: 0; top: 50%; background:#3c3841;transition: 1s; }
.navigation .rightMenu nav ul.bottomMenu li a:hover:after, .navigation .rightMenu nav ul.bottomMenu li.active a:after{width:100%; transition: 1s;}
.navigation .rightMenu nav ul.bottomMenu li a:hover{}


nav { margin: 23px 0 0 0; }
nav ul {   }
nav ul li {  }
nav ul li a {  }
nav ul li:last-child {   }
nav ul li a:hover, nav ul li.active a, nav ul li:hover a  {   }

/* HOme tab
========================================================================*/

.brandLogoWrap{}
.brandLogoWrap ul{}
.brandLogoWrap ul li{ width: 22.5%; float: left; margin: 0 1% 20px 1%;border: 1px solid #cccccc;    min-height: 93px; }
.brandLogoWrap ul li a{}
.brandLogoWrap ul li img{ width: 100%; margin: auto 0; height: 90px;}

    .homeTab .heroContent H2{font-size: 20px; text-transform: uppercase; color: #3c3841; font-family: 'montserratregular'; margin-bottom: 30px;}
.homeTab{}
.homeTab .homeTabinner{ width: 80%; margin: 0 auto;}
.homeTab .heroContent{ text-align: center; margin: 60px 0;}
.homeTab #horizontalTab{}
ul.resp-tabs-list{ border-bottom: 1px solid #383938; margin-bottom: 50px;}
ul.resp-tabs-list li{ font-size: 18px; text-transform: uppercase; color: #3c3841; font-family: 'montserratregular'; width: 49.7%; padding: 20px 0; position: relative; text-align:center;}
ul.resp-tabs-list li:nth-child(2n){ text-align:center;}
ul.resp-tabs-list li:last-child{ /*text-align: right;*/}
ul.resp-tabs-list li.resp-tab-active{}
ul.resp-tabs-list li span{ position: relative; display: block;}
ul.resp-tabs-list li.resp-tab-active span{}
ul.resp-tabs-list li.resp-tab-active span:after{ position: absolute; width: 100%; height: 8px; background:#383938; left: 0; bottom: -24px; content: ""; transition: 0.5s;}

.resp-tabs-container{ margin-bottom: 60px;}
.resp-tabs-container .tabContent{}
.resp-tabs-container .tabContent .tabRight{ width: 30%; float: right; text-align: center;}  
.resp-tabs-container .tabContent .tabRight img{}

.resp-tabs-container .tabContent .tabLeft{ width: 70%; float: right;}
.resp-tabs-container .tabContent .tabLeft .viewMore{}
.resp-tabs-container .tabContent .tabLeft .viewMore a{}

/* Comman Style
========================================================================*/
.pagedata{ margin:50px 0;}
.viewMore{ margin-top: 40px;}
.viewMore a{ display: inline-block; padding: 12px 50px; border: 1px solid #ba8eaa; color: #3c3841; border-radius: 40px;  transition: 0.5s;}
.viewMore a:hover{ background: #ba8eaa; color: #ffffff; transition: 0.5s; }
/* FOOTER
========================================================================*/
footer {  background: #1a1a1a; color: #ffffff;}
.bottomWrap{ padding: 50px 0;}
.bottomWrap .bottomLeft{ width: 25%; float: left;}
.bottomWrap .bottomLeft img{}
.bottomWrap .bottomRight{ width: 75%; float: left;}
.bottomWrap .bottomRight .bottomAdd{}
.bottomWrap .bottomRight .bottomAdd ul{}
.bottomWrap .bottomRight .bottomAdd ul li{ color: #ffffff;}
.bottomWrap .bottomRight .bottomAdd ul li a{ color: #ffffff;}

.bottomWrap .bottomRight .bottomLinks{ margin-top: 30px;}
.bottomWrap .bottomRight .bottomLinks .quicklink{ width: 25%; float: left; font-size: 12px;}
.bottomWrap .bottomRight .bottomLinks .quicklink h4{ color: #ffffff; margin-bottom: 10px;}
.bottomWrap .bottomRight .bottomLinks .quicklink ul{}
.bottomWrap .bottomRight .bottomLinks .quicklink ul li{ color: #999999;}
.bottomWrap .bottomRight .bottomLinks .quicklink ul li a{color: #999999;  font-family: 'montserratultra_light';}
.bottomWrap .bottomRight .bottomLinks .quicklink ul li a:hover{color: #ffffff; transition: 0.5s;}

.footerWrap {font-size: 12px;font-family: 'montserratultra_light'; color: #999999; padding-bottom: 30px;}
.copyRight { width: 40%; float: left;}
.footerLink{width: 40%; float: left;}
.footerLink a{color: #999999; }
.footerLink a:hover{color: #ffffff; transition: 0.5s; }
.designBy { width: 20%; float: right; text-align: right;}

/* About Us
========================================================================*/
.aboutWrap{ width: 90%; margin: 0 auto;}
.aboutWrap h2{ font-size: 18px; text-transform: uppercase; color: #3c3841;font-family: 'montserratregular'; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #3c3841;}
.aboutWrap h2.margintop{ margin-top:50px;}
.aboutWrap h4{}
.aboutWrap .aboutGallery{ margin: 40px 0 0 0;}
.aboutWrap .aboutGallery ul{}
.aboutWrap .aboutGallery ul li{ width: 32%; margin: 0 0.5% 10px 0.5%; float: left;}
.aboutWrap .aboutGallery ul li img{ width: 100%;}

/* Product Page
========================================================================*/
.productHerocont{width: 80%; margin: 0 auto; text-align: center; margin-bottom: 50px;}
.productlistWrap{ width: 90%; margin: 0 auto;}
.productlistWrap .productBox{ width: 31%; margin: 0 1% 30px 1%; float: left;-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.1);box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.1); position: relative; overflow: hidden;}
.productlistWrap .productBox .productImg{}
.productlistWrap .productBox .productImg img{ width: 100%;}
.productlistWrap .productBox .productInfo{ text-align: center; padding: 10px;}
.productlistWrap .productBox .productInfo h3{ color: #000000; font-size: 14px;font-family: 'montserratregular';  text-transform: uppercase;}
.productlistWrap .productBox .productInfo .product-brandName{  text-transform: uppercase; color: #020202; font-size: 12px; line-height: 14px; margin: 5px 0 12px 0;}
.productlistWrap .productBox .productInfo .productDesc{ font-size: 12px; color: #999999;min-height: 42px;}

.productlistWrap .productBox .overlay{ position: absolute; width: 100%; height: 100%; z-index: 99; background: rgba(0,0,0,0.80); top: 0; left: -100%; font-size: 10px; line-height: 14px;text-align: left; transition: 0.5s; color: #fdfbfb;}
.productlistWrap .productBox:hover .overlay{ left: 0; transition: 0.5s;}

.productlistWrap .productBox .overlay .overlayInner{ padding: 20px;}
.productlistWrap .productBox .overlay .overlayInner ul{}
.productlistWrap .productBox .overlay .overlayInner ul li{ margin-bottom: 10px; font-size: 10px; line-height: 11px;}
.productlistWrap .productBox .overlay .overlayInner ul li .price{ font-size: 12px; line-height: 12px;font-family: 'montserratsemi_bold'; margin-top: 5px;}
/* Contact Us
========================================================================*/
.contactWrap{ width: 78%; margin: 0 auto;}
.contactWrap h2{ font-size: 18px; text-transform: uppercase; color: #3c3841;font-family: 'montserratregular'; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #3c3841;}
.contactWrap .addWrap{ width: 25%; float: left; margin-bottom: 50px;color: #3c3841;}
.contactWrap .addWrap.firstWrap{ width: 50%;}
.contactWrap .addWrap h2{}
.contactWrap .addWrap p{}
.contactWrap .addWrap a{color: #3c3841;}
.contactWrap .googleMapWrap{}
.contactWrap .googleMapWrap iframe{ width: 100%; height: 400px;}

.getintouchWrap{ margin: 50px 0; }
.getintouchWrap h2{ margin-bottom: 60px;}
.getintouchWrap .inputBox{ position: relative; width: 48%; float: left; margin: 0 1% 30px 1%;}
.getintouchWrap .inputBox input{ width: 93%; padding: 15px 15px; border: none; border-bottom: 1px solid #959595; font-family: 'montserratlight'; }
.getintouchWrap .inputBox textarea{width: 93%; padding: 15px 15px; border: none; border-bottom: 1px solid #959595; font-family: 'montserratlight'; }
.getintouchWrap .inputSubmit{ margin: 30px 1% 0 1%}
.getintouchWrap .inputSubmit input{ display: inline-block; padding: 12px 70px; border: 1px solid #ba8eaa; color: #3c3841; border-radius: 40px;transition: 0.5s;font-family: 'montserratregular';}
.getintouchWrap .inputSubmit input:hover{ background: #ba8eaa; color: #ffffff;transition: 0.5s;}
.getintouchWrap .inputBox .formError { color: #d40000;font-weight: normal; font-size: 13px; position: absolute; left: 15px; bottom: -20px;}

/* testimonials */
.testimonialsWrap{}
.testimonialsWrap .testimonialsBox{ width: 31%; float:left; margin: 0 1% 30px 1%;}
.testimonialsWrap .testimonialsBox img{ width: 100%;}
.testimonialsWrap .testimonialsBox .testimonialsDesc{ margin-top: 5px;line-height: 20px;color: #222;}

/* HEADINGS
========================================================================*/
h1, h2, h3, h4, h5, h6 { }
h1 {}
h2 {}
h3 { }
h4 { }
h5 { }
h6 { }
p { margin-top: 10px; }
p:first-child { margin: 0; }
/* FORM
========================================================================*/
label { }
input, textarea, select { font-family: 'montserratultra_light';  background: none; border: 1px solid #dadada; padding:  15px; margin: 0 0 0 0; }
input:focus, textarea:focus { border-color: #c1c1c1; background: none; }

/* tab */
ul.resp-tabs-list {  padding: 0px; }
.resp-tabs-list li {  display: inline-block; cursor: pointer; }
.resp-tabs-container {  clear: left;}
h2.resp-accordion { cursor: pointer;  display: none; }
.resp-tab-content { display: none;}
.resp-tab-active {}
.resp-tab-active {}
.resp-content-active, .resp-accordion-active { display: block; }
.resp-tab-content {}
h2.resp-accordion { }
h2.resp-tab-active { }
h2.resp-tab-title:last-child { }

/*-----------Accordion styles-----------*/
h2.resp-tab-active {}
.resp-easy-accordion h2.resp-accordion { display: block; }
.resp-easy-accordion .resp-tab-content {}
.resp-easy-accordion .resp-tab-content:last-child {}
.resp-jfit { width: 100%; margin: 0px; }
.resp-tab-content-active { display: block; }
h2.resp-accordion:first-child {  }

/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
@media only screen and (max-width: 200px) {
ul.resp-tabs-list { display: none; }
h2.resp-accordion { display: block; } 
.resp-vtabs .resp-tabs-container {  float: none; width: 100%; min-height: initial; clear: none; }
.resp-accordion-closed { display: none !important; }
.resp-vtabs .resp-tab-content:last-child { }
}

/* Font Family
========================================================================*/

@font-face {
    font-family: 'montserratultra_light';
    src: url('fonts/montserrat-ultralight-webfont.eot');
    src: url('fonts/montserrat-ultralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-ultralight-webfont.woff') format('woff'),
         url('fonts/montserrat-ultralight-webfont.ttf') format('truetype'),
         url('fonts/montserrat-ultralight-webfont.svg#montserratultra_light') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'montserratlight';
    src: url('fonts/montserrat-light-webfont.eot');
    src: url('fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-light-webfont.woff') format('woff'),
         url('fonts/montserrat-light-webfont.ttf') format('truetype'),
         url('fonts/montserrat-light-webfont.svg#montserratlight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'montserratregular';
    src: url('fonts/montserrat-regular-webfont.eot');
    src: url('fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-regular-webfont.woff') format('woff'),
         url('fonts/montserrat-regular-webfont.ttf') format('truetype'),
         url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'montserratsemi_bold';
    src: url('fonts/montserrat-semibold-webfont.eot');
    src: url('fonts/montserrat-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-semibold-webfont.woff') format('woff'),
         url('fonts/montserrat-semibold-webfont.ttf') format('truetype'),
         url('fonts/montserrat-semibold-webfont.svg#montserratsemi_bold') format('svg');
    font-weight: normal;
    font-style: normal;

}