@import url('../fonts/stylesheet.css');

:root {
  --lightBlack:#333333;
  --gray:#524b4b;
  --orange:#e99281;
  --darkOrange:#925a5a;
  --lightOrange:#fdf5ef;
}

/*
font-family: 'Circular Std Medium';
font-family: 'Circular Std Bold';
font-family: 'Circular Std Book';
font-family: 'Circular Std Black';
*/


*:focus{outline: none !important; box-shadow: none !important;}
body {font-size:14px;color: var(--black);font-family: 'Circular Std Book'; }
h1,h2,h3,h4 {font-family: 'Circular Std Bold';}
img {max-width: 100%;}
.wrapper {position: relative; }
.container {max-width: 1300px;}

.orangeBtn { background:var(--orange); border:none; color:#ffffff; font-size: 16px;font-family: 'Circular Std Medium'; padding:10px 20px; display: inline-block;}
.orangeBtn:hover {text-decoration: none; color:#ffffff;background:var(--darkOrange);}
.borderBtn { background:transparent; border:solid 2px var(--lightBlack); color:var(--lightBlack); font-size: 16px;font-family: 'Circular Std Medium'; padding:8px 18px; display: inline-block;}
.borderBtn:hover {text-decoration: none; color:#ffffff;background:var(--lightBlack);}


.searcInput {width: 100%; padding: 10px 15px; font-size: 18px;}
.searchBlock .select2-container--default .select2-selection--single {border: 1px solid #a4bcf3; height: 50px; box-shadow: 0px 8px 14px 0px rgba(61, 118, 249, 0.10);}
.searchBlock .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px;  padding-left: 18px;padding-right: 40px; }
.searchBlock .select2-container--default .select2-selection--single .select2-selection__placeholder {color: #a4bcf3;}
.searchBlock .select2-container--default .select2-selection--single .select2-selection__arrow {top: 10px; right: 10px;}
.searchBlock .select2-container--default .select2-selection--single .select2-selection__arrow b { border-width: 8px 6px 0 6px;     border-color: #bcc4da transparent transparent transparent;}
.searchBlock .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {border-color: transparent transparent #bcc4da transparent; border-width: 0 6px 8px 6px;}


.owlNav.owl-carousel .owl-dots {position: absolute; bottom: 10px; text-align: center; width: 100%;}
.owlNav.owl-carousel button.owl-dot {width: 8px; height: 8px; background:#ccc; border-radius: 5px; margin: 5px 7px;}
.owlNav.owl-carousel button.owl-dot.active {background:var(--blue);}
.owlNav.owl-carousel .owl-dot:focus {outline: none;}

.owlNav.owl-carousel .owl-nav button {background:#fff url(../images/sprite.png) no-repeat -182px -37px;width: 38px; height: 38px; border-radius: 50%; opacity: 0.8; border:solid 1px #a9a9a9; position: absolute; left: -50px; top: calc(50% - 60px);transform: rotate(0deg);}
.owlNav.owl-carousel .owl-nav button.owl-next {transform: rotate(180deg); left: inherit; right: -50px;}
.owlNav.owl-carousel .owl-nav button span {display: none;}
.owlNav.owl-carousel .owl-nav button:hover {opacity: 1;}
.owlNav.owl-carousel .owl-nav {text-align: center; padding:10px 0px 10px 0px;}
.owlNav.owl-carousel .owl-nav button.disabled {opacity: 0.3;}



.mainNav { text-align: center; }
.mobileNavBtn:focus {outline: none;box-shadow: none;}
.mobileNavBtn {display: none; border: none; cursor: pointer; margin-top: 1px; width: 22px; height: 18px;border-radius: 0px; background: none; position: relative; z-index: 101;transition: right .3s linear;margin:10px 5px; float: right; position: absolute; right: 10px; top: 10px;}
.mobileNavBtn span { width: 100%; left: 0px; top: 7px; height: 2px; background:#000; position: absolute; transition: all 0.3s linear;}
.mobileNavBtn span:nth-child(2) {top: 0px;}
.mobileNavBtn span:nth-child(3) {top: 14px;}
.openNav {overflow: hidden;}
.openNav .mobileNavBtn:before {content: ""; background: #ffffff; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.5); width: 38px; height: 38px; position: absolute; left: -8px; top: -10px;}
.openNav .mobileNavBtn span { background:#000;}
.openNav .mobileNavBtn span:nth-child(2){display: none;}
.openNav .mobileNavBtn span:nth-child(1){transform:rotate(45deg)}
.openNav .mobileNavBtn span:nth-child(3){transform:rotate(-45deg); top: 7px;}

@media (min-width: 1024px) {
  .navigation>ul {padding: 0px; margin:0px; list-style: none;}
  .navigation>ul>li {display: inline-block; vertical-align: middle; margin: 5px 10px;}
  .navigation>ul>li:last-child {margin-right: 0px;}
  .navigation>ul>li>a {color:var(--black); display: inline-block; font-size: 16px; font-family: 'Circular Std Medium';position: relative; padding:15px 15px;text-transform: uppercase;}
  .navigation>ul>li>a:hover {color:var(--orange); text-decoration: none;}
  .navigation>ul>li>a.active:before, .navigation>ul>li>a:hover:before {content: ""; position: absolute; left: 0px; bottom:-5px; width: 100%;height:4px; background:var(--orange); border-radius:5px 5px 0px 0px;}
  .overLay {display: none;}
}
.navigation>ul>li>a.noti {background: url(../images/noti-icon.png) no-repeat top 17px right 10px; padding-right: 40px;}
.noti .count {width: 16px; height: 16px; background: #ff871c; border-radius: 50%; position: absolute; right: 5px; top: 10px; color: #ffffff; line-height: 16px; font-size: 12px;text-align: center;}
.overLay {transition: all 0.3s linear;}
@media (max-width: 1025px) {
  .grayMainBg .logo {position: relative; z-index: 111;}
  .mobileNavBtn {display: inline-block;}
  .navMain {text-align: right; position: relative;margin: 7px 15px 3px 0px;display: inline-block;width: 100%;}
  .navigation {position: fixed;top: 0px;width:100%;bottom: 0px;  z-index: 100; max-height: 100%; overflow-y: auto; left:-101%; transition: all .2s linear; height: 100%;display: flex; background: #ffffff; overflow: hidden;}
  .navigation:before {content: ""; width: 200px; height: 200px; border-radius:50%; right: -100px; top: -80px;position: absolute; background: var(--orange);}
  .openNav .navigation {left: 0px;} 
  .navigation>ul {margin: 100px auto 10px auto;  padding:10px 0px 10px 0px; list-style: none;max-height: calc(100% - 90px); overflow-x: auto; text-align: left; width: 100%;}
  .navigation>ul>li {font-size:16px;  border-bottom: solid 1px #efefef;}
  .navigation>ul>li>a {padding:12px 40px 12px 20px; display:block;position: relative; color:#000; }
  .navigation>ul>li>a:hover {text-decoration: none;}
  .openNav .overLay {display: block; position: fixed; top: 0px; left: 0px;width: 100%;height: 100%;  background: rgba(0, 0, 0, 0.72);z-index: 11;}

  .header {padding: 5px 0px;}
  .logo img {max-width: 100px;}
  .logo a {position: relative;z-index: 101;}
  .headerBg {display: none;}
  .headerLeftCol {flex:0 0 100%;  padding-bottom: 17px;}
  .headerCenterCol {flex:0 0 100%; padding-bottom: 15px; order: 1;}
  .headerRightCol {flex:0 0 100%;text-align: center; padding-bottom: 10px;}
}


.logo {padding: 0px 0px;}
.logo a {display: inline-block;max-width: 100%;}
.header {padding:10px 0px 0px 0px;  }

.headerBg {background:var(--lightBlack); padding: 5px 0px;}
.headerBg .col {text-align: center; position: relative;}
.headerBg .col:before {content: ""; height: 28px; width: 2px; background: #404040; position: absolute; left: 0px; top: 6px;}
.headerBg .col:first-child:before {display: none;}
.pointCol {position: relative; padding:10px 0px 0px 42px; font-size: 16px; color: #979797; height: 38px; display: inline-block; line-height: 1;}
.pointCol:before {content: ""; width: 32px; height: 32px; background:#6c6c6c url(../images/sprite.png) no-repeat -1px -37px; border-radius: 50%; position: absolute; left: 0px; top:3px;}
.pointCol a {color: #ffffff; font-family: 'Circular Std Bold'; text-decoration: none;}
.pointCol a:hover {color: var(--orange);}
.pointCol.dash:before {background-position:-39px -37px;} 
.pointCol.serh:before {background-position:-83px -39px;} 
.pointCol.checkout:before {background-position:-131px -38px;} 

.searchSec {position: relative; max-width: 540px; margin: 0px auto;}
.searchPopUp {background: #ffffff; border-radius:0px 0px 5px 5px; position: absolute; left: 0px; top:100%; width: 100%;z-index: 1; box-shadow: 0px 4px 5px rgb(0 0 0 / 50%); display: none;}
.topSearchBlock {border:solid 1px #d1d1d1;position: relative; padding: 2px 192px 2px 45px; height: 44px;}
.topSearchBlock:before {content: ""; width: 32px; height: 32px;background: url(../images/sprite.png) no-repeat 0px 0px; position: absolute; left: 7px; top: 7px;}
.topSearchBlock .advanceSearch {font-size: 16px; color: #333333; line-height: 1; border-left: solid 1px #d1d1d1; padding: 1px 1px 1px 48px; position: absolute; right: 20px; top: 11px; cursor: pointer;}
.topSearchBlock .advanceSearch:before {content: ""; height: 20px; width: 24px; background: url(../images/sprite.png) no-repeat -43px -3px; position: absolute; left: 15px; top: -1px;}
.searchInput {border:none; background:none; font-size: 16px;width: 100%; height: 40px; line-height: 38px;}
.searchInput::placeholder {color: #999;}

.userDropBlock {position: relative; display: inline-block; vertical-align: top;margin: 3px 0px 0px 0px;}
.userDropBlock .userText {position: relative; padding: 5px 25px 5px 40px; font-size: 16px; cursor: pointer;}
.userDropBlock .userText:before {content: ""; width: 0px; height: 0px; border:5px solid transparent; border-top-color: #6c6c6c; position: absolute; right: 6px; top: 14px;}
.userDropBlock .userText .img {width: 32px; height: 32px; object-fit: cover;background: #333; border-radius: 50%; position: absolute; left: 0px; top: 0px;}
.userDropBlock .userText .text {max-width: 85px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.linkDropDown {position: absolute; top:90%; right:-18px;  width: 245px; z-index: 1000;display: none;}
.linkDropDown ul:before {content: "";position: absolute; right:20px; top: -16px;width: 0px;height: 0px;border:solid 8px transparent; border-bottom-color: #ffffff;}
.linkDropDown ul {list-style: none; margin:9px 0px 0px 0px; text-align: left;box-shadow: 0px 10px 50px rgba(0,0,0,0.1); background-clip: padding-box; background-color: #fff; border-radius: 8px;  padding: 10px 0; position: relative;}
.linkDropDown ul li a {padding:8px 20px 9px 20px; color:#737475;display: block;font-size: 16px;}
.linkDropDown ul li a:hover {background: #efefef;color:#737475;text-decoration: none;}
.linkDropDown ul .saprator {height: 1px; margin: 5px 20px;background: #efefef; display: block;}
.userDropBlock:hover .linkDropDown {display: block;}

.headerRightCol {position: relative;}
.walletBtn, .wishBtn {display: inline-block; vertical-align: top; position: relative; margin:8px 16px 0px 16px; text-decoration: none;}
.linkIcon {display: inline-block; vertical-align: top; width: 28px; height: 28px; background: url(../images/sprite.png) no-repeat -92px -2px;}
.headerRightCol .num {background: #333333; font-size: 12px; color: #ffffff;font-family: 'Circular Std Medium'; padding: 2px 7px; line-height: 1; border-radius: 6px; min-width: 22px; text-align: center; position: absolute; right:-15px; top: -2px;}

.walletBtn .text {font-size: 16px; color:#333;vertical-align:-5px; display: inline-block;}
.walletBtn:hover {text-decoration: none;}
.walletBtn .num {position: relative; top: 4px; right:0px;}
.walletBtn .linkIcon {background: url(../images/offer-icon.png) no-repeat 0px 0px;}

.cartBtn {display: inline-block; vertical-align: top; position: relative; height: 40px; border:solid 1px #333; margin: 0px 16px; padding: 6px 10px 0px 10px;}
.wishBtn .linkIcon {background-position: -138px -2px;}
.cartBtn .linkIcon {background-position: -188px -5px;}
.cartBtn .num { position: relative; right: 0px; top: -1px;}
.cartBtn .text {font-size: 16px; color:#333;}
.cartBtn:hover {text-decoration: none; border-color: var(--orange);}

.form-control {border:solid 1px #e1e1e1; border-radius: 0px; font-size: 16px;}
.form-control:focus {border-color: var(--orange);}
select.form-control {background: url(../images/dropdown-arrow.png) no-repeat top 14px right 14px; padding-right: 40px;appearance: none; -webkit-appearance: none;}



.cartList h1 {font-size: 32px; margin:30px 0px 20px 0px;font-family: 'Circular Std Bold'; font-weight: normal;}

.crPro {position: relative;min-height: 130px; padding: 10px 0px 10px 150px;}
.crPro .proImg {width: 130px; position:absolute; left: 0px; top:-5px;}
.crPro .proImg img {transition: transform 0.3s linear;}
.crRow:hover .proImg img {transform: scale(1.05);}
.crPro .proTitle {display: block;font-family: 'Circular Std Medium'; font-size: 18px; color: var(--lightBlack);}
.crPro .proTitle:hover {color: var(--orange); text-decoration: none;}
.crPro .proCat {color: #666666; font-size: 16px; padding: 5px 0px;}
.crPro .proCat strong {font-family: 'Circular Std Bold'; font-weight: normal;}
.crRowHeading > [class*="col"] {font-size: 16px; padding: 10px 0px; border-bottom: solid 1px #e4e4e4; color: var(--lightBlack);}
.crRow > [class*="col"] {font-size: 16px; padding: 15px 0px; border-bottom: dashed 1px #e4e4e4;}
.crRow .col-auto, .crRowHeading .col-auto {flex:0 0 110px; display: flex; justify-content: center; align-items: center; }
.crRowHeading {margin: 0px;}
.crRow { color: var(--lightBlack);margin: 0px;}
.crRow .pr {font-family: 'Circular Std Medium';}
.deleteIcon {display: inline-block; width: 24px; height: 24px; position: relative;}
.deleteIcon:before, .deleteIcon:after {content: ""; height: 2px; background: #666; width: 100%; position: absolute; left: 0px; top: 12px;transform: rotate(45deg); transition: transform 0.2s linear;}
.deleteIcon:after {transform: rotate(-45deg);}
.deleteIcon:hover:after, .deleteIcon:hover:before {transform: rotate(0deg);}
.crRow .qtyRow {padding: 10px 10px 5px 10px;}

.qtyRow {display: inline-block; padding: 5px 10px;}
.qtyRow .qtCount {display: inline-block; vertical-align: top;font-family: 'Circular Std Bold'; font-weight: normal; font-size: 18px;line-height: 1; margin: 0px 10px;}
.qtyRow .plsBtn, .qtyRow .minBtn {display: inline-block; vertical-align: top; height: 16px; width: 16px; background:#fff url(../images/sprite.png) no-repeat -9px -94px; border:none;}
.qtyRow .minBtn {background-position: -9px -74px;}
.crRowTotal {margin: 0px; font-size: 18px; line-height: 1;}
.crRowTotal > [class*="col"] {background: #fdf5ef;padding: 15px 30px;}
.crRowTotal .totalAmount {font-size: 22px;font-family: 'Circular Std Bold'; }

.countinueSec {padding: 20px 0px 40px 0px;}
.countinueSec h2 {margin: 25px 0px; padding: 0px 0px 0px 30px;font-size: 18px;font-family: 'Circular Std Bold'; position: relative;}
.countinueSec h2 .back {position: absolute; left: 0px; top: 1px; width: 16px; height: 18px; background: url(../images/sprite.png) no-repeat -190px -47px;}
.countinueSec h2 .text {color: var(--black);}
.countinueSec h2 .text:hover {color: var(--orange);text-decoration: none;}
.continueBlock {position: relative; color: var(--lightBlack);background: #f6f6f6; padding:30px;}
.continueBlock .topTitle {font-family: 'Circular Std Bold'; font-size: 18px;text-align: center;}
.continItemList {width: 100%;}
.continItem {border-bottom: dashed 1px #d8d8d8;}
.continItem td {padding:20px 0px;}
.continItem .img {display: inline-block; max-width: 150px;}
.continItem .title {display:block; max-width:280px; font-size: 18px;font-family: 'Circular Std Medium'; color: var(--lightBlack);}
.continItem .orangeBtn {text-transform: uppercase;}
.continItem .title:hover {color: var(--orange);text-decoration: none;}
.continItem td:nth-child(3) {width: 30%; text-align: center;}
.continItem td:nth-child(1) {width:175px;}

.hoverLayer {position: absolute; background:rgba(0,0,0,0.6); width: 100%; height: 100%; left: 0px; top: 0px; text-align:center; z-index: 11;padding: 30px;    display: flex; align-items: center; flex-direction: column; justify-content: center;}
.hoverLayer:before {content: ""; position: absolute; left: 30px; top: 30px; width: calc(100% - 60px); height: calc(100% - 60px); border:dashed 1px #d8d8d8;}
.hoverLayer .textA {width: 80px; height: 80px; background: #ffffff url(../images/sprite.png) no-repeat -162px -65px; border-radius: 50%; display: inline-block; transition: transform 0.3s linear;}
.hoverLayer:hover .textA {transform: rotate(360deg);}
.hoverLayer .textB {font-size: 18px;font-family: 'Circular Std Bold'; color: #ffffff;padding:20px 0px;  transition: all 0.3s linear;}
.hoverLayer:hover .textB {color: var(--orange);}
.cartTextDesc {margin-bottom: 30px;}
.cartTextDesc p {color: #666666;}
.cartTextDesc h3 {font-size: 18px;font-family: 'Circular Std Bold'; margin: 0px 0px 15px 0px;}

.cartRight {background: #fdf5ef; padding: 95px 15px; position: sticky; top: 0px;}
.cartRight h2 {font-size: 24px;font-family: 'Circular Std Bold';margin: 0px 0px 20px 0px;}
.creditCard .textA {font-size: 16px;font-family: 'Circular Std Medium';margin: 0px 0px 10px 0px;}
.creditCard .form-control {background-color: #ffffff; margin-bottom: 20px;}
.addNewCard {color: #0068d3; text-decoration: underline; padding-left:30px;position: relative;}
.addNewCard:before {content: "";width: 20px; height: 20px; background: url(../images/sprite.png) no-repeat -132px -89px; position: absolute; left: 2px; top: -3px;}
.orderDes {padding: 30px 0px;}
.orderDes textarea {font-size: 14px; height: 100px; resize: none;margin-bottom: 18px;}
.orderDes .checkBox label {font-size: 14px; margin:0px 0px 10px 0px; position: relative; padding-left: 26px;}
.orderDes .checkBox input {position: absolute; left: 2px; top: 4px; width: 14px; height: 14px;}
.orderDes .checkBox small {font-size: 12px;}
.orderDes .checkBox small a {color: #0068d3; text-decoration: underline;}

.cartRight .btnRow .orangeBtn {float: right;padding: 10px 18px;}

.popUp .modal-dialog {max-width: 540px;}
.popUp .modal-body {padding:30px;}
.popUp .modal-content {border-radius:5px;}
.popUp .close {right: 10px; top: 6px; position: absolute;z-index: 1;width: 20px; height: 20px;}
.popUp .close:before, .popUp .close:after {content: ""; height: 2px; background: #666; width: 100%; position: absolute; left: 0px; top: 12px;transform: rotate(45deg); transition: transform 0.2s linear;}
.popUp .close:after {transform: rotate(-45deg);}
.popUp .close:hover:after, .popUp .close:hover:before {transform: rotate(0deg);}


.advacneSearcBlock {padding: 20px;}
.advacneSearcBlock .title {font-size: 16px;font-family: 'Circular Std Bold';margin: 0px 0px 15px 0px;}
.checkBoxRow {display: flex; flex-wrap: wrap;}
.checkboxInput {position: relative; padding-left: 26px; flex:0 0 40%;margin-bottom: 12px;}
.checkboxInput input {width: 16px; height: 16px; position: absolute; left: 0px; top: 2px;}
.advanceBtnRow {text-align: right; border-top:solid 1px #e4e4e4; padding: 12px 20px;}
.advanceBtnRow .clearLink {color: var(--lightBlack); display: inline-block;margin: 0px 15px;}
.advanceBtnRow .orangeBtn {padding: 8px 15px; font-size: 14px;}


/*cart box*/
.cartBlock {position: relative;z-index: 111; display: none;}
.cartBlock .bg {background:rgba(0,0,0,0.5);  position: fixed; left: 0px; top:0px; width: 100%; height: 100%; z-index: 0;}
.cartBox {position: fixed; right:-450px; top: 0px; bottom: 0px; height: 100vh; width: 430px; background: #ffffff; transition: right 0.3s linear;}
.sideBarOpen .cartBox {right: 0px;}
.cartBox .cartBoxHead {padding:16px 35px 16px 20px;margin: 0px; background: #474c4f;}
.cartBox .closeBtn {position: absolute; right: 15px; top:14px;height: 16px; width: 16px; cursor: pointer;}
.cartBox .closeBtn:before, .cartBox .closeBtn:after {content: ""; height: 2px; background: #ffffff; width: 100%; position: absolute; left: 0px; top: 10px;transform: rotate(45deg); transition: transform 0.2s linear;}
.cartBox .closeBtn:after {transform: rotate(-45deg);}
.cartBox .closeBtn:hover:after, .cartBox .closeBtn:hover:before {transform: rotate(0deg);}


.cartBoxHead h3 {margin: 0px; font-size: 18px; color: #ffffff;}
.cartBoxHead h3 small {color: var(--orange);}

.cartBoxFooter {padding:3px 10px 10px 10px; background: #f6f6f6; }
.cartBoxFooter .borderBtn {width: 100%; border-width: 1px; margin-bottom: 8px; }
.cartBoxFooter .orangeBtn {width: 100%; }

.cartMiddleBox {overflow-y: auto; height: calc(100vh - 260px);position: relative;}
.cartProList {padding:0px;}

.cartPro {border-bottom: solid 1px #efefef; padding: 10px 5px;}
.cartPro .img {margin: 0px; overflow: hidden; display: inline-block; vertical-align:middle; width: 25%; margin-right: 1%; }
.cartPro .proRight {display: inline-block; vertical-align: middle; width: 69%;}
.cartPro .title {margin:0px 0px 5px 0px; color:#666; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; font-size: 16px;font-family: 'Circular Std Medium';}
.cartPro .proCat {color: #666666; padding:0px 0px 10px 0px;}
.cartPro .proCat strong {font-family: 'Circular Std Bold'; font-weight: normal;}
.cartPro .price { font-size: 16px; font-family: 'Circular Std Bold'; display: inline-block;}
.cartPro .multiply {display: inline-block; margin-right: 25px; color: #666; font-size: 18px;font-family: 'Circular Std Bold'}

.cartTotal {padding:1px 20px 5px 20px; color: #000;}
.cartTotal .row {padding-top: 5px; padding-bottom: 5px;}
.cartTotal .price {color:var(--lightBlack); }
.cartTotal .savingPrice {color:var(--orange);font-family: 'Circular Std Bold'}
.cartTotalSavingRow {border-top: solid 1px #d7cece;}

.mayBeInterstedSec {padding: 10px 10px 10px 10px;}
.mayBeInterstedSec .title {margin: 0px 0px 10px 0px; font-size: 16px; text-transform: uppercase;font-family: 'Circular Std Book';}
.mayProList {display: flex; flex-wrap: nowrap; overflow-x: scroll; padding-bottom: 5px;}
.mayPro {flex:0 0 125px; position: relative; margin-right:10px;background: #ffffff; padding: 2px;}
.mayPro .mayProimg {display:block; background: #ffffff;text-decoration: none;}
.mayPro .mayProTitle {padding: 5px 3px; font-size: 13px; line-height: 1.2;}
.mayPro .mayProTitle a {color:var(--lightBlack);}
.mayPro .mayProTitle a:hover {color:var(--orange);text-decoration: none;}


.loader {position: relative; z-index: 19; display: none;}
.loader .loader_box { z-index: 1; position: fixed; left: 50%; top:calc(50% + 1px); max-width: 180px; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
.loader p { color:#fff; font-size:16px; text-align: center; }
.loader .loadingImg {  animation: loading 2s linear infinite; max-width:100px; margin:0px auto 15px; display:block; }
.loader .bg { background:rgba(0,0,0,0.65);  position: fixed; left: 0px; top:0px; width: 100%; height: 100%; z-index: 0; }
.scrollHidden {overflow: hidden;}
@keyframes loading {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

.relatedSec {background: #f6f6f6;padding: 40px 0px;}
.relatedSec h2 {margin: 0px 0px 15px 0px; font-size: 22px;}
.productBox {position: relative;}
.productBox .proImg {background:#ffffff; border-radius: 5px; padding:15px 20px 45px 20px; position: relative;margin: 0px 0px 12px 0px;}
.productBox .proImg a {display: inline-block; max-width: 100%;}
.productBox .proImg img {transition: transform 0.2s linear;}
.productBox:hover .proImg img {transform: scale(1.05);}
.productBox .proTitle {margin: 0px 0px 12px 0px;font-size: 16px;}
.productBox .proTitle a {color: var(--lightBlack);}
.productBox .proTitle a:hover {color: var(--orange); text-decoration: none;}

.productBox .qtyRow {background-color: #e4e4e4; padding: 2px 2px; display: none;}
.productBox .qtyRow .plsBtn, .productBox .qtyRow .minBtn {background-color: #e4e4e4;padding: 0px; width: 26px; height: 26px;background-position: -4px -90px;}
.productBox .qtyRow .minBtn {background-position: -5px -70px; height: 25px;}
.productBox .qtyRow .qtCount {background-color:#ffffff;margin: 0px;width: 26px; height: 26px; line-height: 25px;text-align: center;}
.addCartRow {position: relative; text-align: center;}
.addCartRow .addToCartBtn {border:none; background: var(--darkOrange); color: #ffffff; font-size: 13px; font-family: 'Circular Std Medium'; padding:7px 12px; border-radius: 0px; width: 100%;}

.productBox .priceRow {position: absolute; left: 0px; width: 100%; bottom: 10px; height: 35px; background: #fdf5ef;}
.productBox .priceRow .prA {background: #e99281;height: 42px; font-size: 20px;font-family: 'Circular Std Bold'; padding: 0px 10px; color: #ffffff; line-height: 41px; position: absolute; left: 15px; top: -4px;}
.productBox .priceRow .prB {font-size: 16px;font-family: 'Circular Std Bold'; position: absolute; right:85px; top:5px;}
.productBox .priceRow .prC {font-size: 16px;font-family: 'Circular Std Bold'; position: absolute; right:15px; top:5px;}


.customeForm h3 {margin: 0px 0px 15px 0px; font-size: 20px;}
.inputfield {position: relative; margin:0px 0px 20px 0px;}
.inputfield label { color:var(--lightBlack); position: absolute;  pointer-events: none;left: 13px; top: 10px; transition: all 0.2s linear; opacity: 0.6; margin: 0px;}
.inputfield .input { background: transparent;border:none; border-bottom:2px solid var(--orange);border-radius:0px;padding:0px 10px 0px 10px;height: 42px;width: 100%;box-shadow: none; transition: all 0.3s linear; color:var(--lightBlack); line-height: 40px;}
.inputfield .input:focus~label {left: 6px; top: -6px; padding: 0 5px;font-size: 12px;}
.inputfield label.active {top: -6px;left: 6px; padding: 0 5px;font-size: 12px;}
.mobileNum .number {z-index: 1;position: absolute; left: 12px;top: 14.5px; color: #212121; font-size: 16px; display: none;}
.inputfield textarea.input {height: auto;line-height: 1.3; padding-top: 15px; resize: none;}






input[type="checkbox"]:before {position: absolute; display: block; width:110%; height:110%; border: 1px solid rgb(225, 225, 225); content: ""; background: #FFF; border-radius: 4px; top: -5%; left: -5%;}
input[type="checkbox"]:checked:before {background: #666666;}
input[type="checkbox"]:checked:after {content: ""; position: absolute; width: 4px; height: 8px;border-bottom:solid 2px #ffffff; border-right:solid 2px #ffffff; left:calc(50% - 2px); top: calc(50% - 5px);transform: rotate(45deg); }





/*footer css*/
.footerLogoRow {border:solid #e4e4e4 1px; border-left: none; border-right: none;}
.footerLogoRow .container {max-width: 1170px;}
.footerLogoRow .col {border-left: solid #e4e4e4 1px; text-align: center; padding:20px 0px;}
.footerLogoRow .col:last-child {border-right: solid #e4e4e4 1px;}
.footerLogoRow .img {margin-bottom: 5px;}
.footerLogoRow .text {color: var(--lightBlack); font-size: 18px;font-family: 'Circular Std Bold';}
.copyRight {padding: 30px 0px; color: var(--lightBlack);text-align: center;}
.copyRight a {color: var(--lightBlack);}




/*product detail popup*/
#productDetail .modal-content {border-radius: 0px; border:none;}
#productDetail .modal-dialog {max-width:900px;}
#productDetail .modal-body {padding: 15px; overflow: hidden;}
.proDetail .textA {font-size:28px; line-height: 1.2; font-family: 'Circular Std Bold'; color: #000; padding: 10px 0px 0px 0px;}
.proDetail .textB {font-size: 16px; color: #a7a7a7; padding: 0px 0px 5px 0px;}
.proDetail .textC {padding: 0px 0px 12px 0px;border-bottom: solid #f5f5f3 1px; margin-bottom: 12px;}
.proDetail .textD {font-size: 14px; color: #000; padding: 0px 0px 5px 0px;}
.proDetail .textE {color: #a7a7a7; padding: 2px 0px 30px 0px;font-family: 'Circular Std Book';font-size: 12px;}
.proDetail .textE strong {font-family: 'Circular Std Medium'; font-weight: normal;}
.grayBtn {background: #f5f5f3; color: #000; display: inline-block; padding: 5px 14px;border:none; border-radius: 3px;}
.grayBtn:hover {background: #ccc; color: #000; text-decoration: none;}

.proAct {padding:0px; position: relative; }
.proAct .orangeBtn { background:var(--orange) url(../images/cart-icon.png) no-repeat top 12px right 15px / 18px auto;    padding: 11px 37px 11px 15px; font-size: 12px;}
.proAct .orangeBtn:hover {background-color: var(--darkOrange);}
.proAct .qtyRow {background-color: #e4e4e4; padding: 6px 2px; display: none; }
.proAct .qtyRow .plsBtn, .proAct .qtyRow .minBtn {background-color: #e4e4e4;padding: 0px; width: 26px; height: 26px;background-position: -4px -90px;}
.proAct .qtyRow .minBtn {background-position: -5px -70px; height: 25px;}
.proAct .qtyRow .qtCount {background-color:#ffffff;margin: 0px;width: 26px; height: 26px; line-height: 25px;text-align: center;}
.proDetail .borderBtn {font-size: 14px; padding: 9px 18px; border-width: 1px; border-color: var(--orange); color: var(--orange);}
.proDetail .borderBtn:hover {background-color: var(--orange); color:#ffffff;}

.proRelatedProductsSec {padding: 0px 10px;}
.proRelatedProductsSec .textA {font-size:24px; line-height: 1.2; font-family: 'Circular Std Bold'; padding:20px 0px 15px 0px;text-align: center;}
.proRelatedProductsSec .textA span {color: var(--orange);}

.relProBox {display: block; padding:5px 10px;border-radius: 10px; position: relative; color: #000; text-decoration: none;}
.relProBox .title {line-height: 1.2; padding:4px 8px; border-radius:0px 0px 10px 10px; z-index: 1; position: absolute; bottom:0px; left: 0px; width: 100%; text-align: center; opacity: 0; transition: all 0.3s linear; background:rgb(0,0,0,0.5); color: #ffffff; font-size: 14px;}
.relProBox .img {margin: 0px auto; max-width: 50%; position: relative;}
.relProBox:before {content: ""; background: #FDF5EF; box-shadow: 3px 3px 4px rgba(255, 214, 206, 0.51); border-radius: 5px;height:60px; width: 100%; position: absolute; left: 0px; bottom: 0px;}
.relProBox:hover {color: #000; text-decoration: none;}
.relProBox:hover .title {opacity: 1;}
.relatedItemRow {display: flex; flex-wrap: wrap; justify-content: space-between;}
.relatedItemRow .item {flex:0 0 calc(20% - 15px);margin-bottom:10px;align-self: end;}






.sliderSection {position: relative; padding-right: 75px; min-height: 350px;}
.sliderNav {position: absolute; right: 0px; width: 85px; top: 5px;height: auto;}
.sliderNav .slideConroll {margin:5px 0px;overflow: auto;max-height: 360px;}
.sliderNav ul {list-style: none;padding: 0px; margin: 0px; transition: transform 0.2s linear; }
.sliderNav li {display: block;height: 68px; width: 68px; padding: 3px; background:#fff; border: solid 2px #fdf5ef;border-radius: 5px;cursor: pointer; margin:7px 0px 18px auto;}
.sliderNav li.active {background-color: #fdf5ef;}  
.sliderNav img {height: 100%;width: 100%;object-fit: cover;border-radius: 5px;}
.sliderController span {height: 50px; width: 27px; transform: rotate(90deg); position: absolute; top: 0px; left:30px;cursor: pointer; background: url(../images/slider-arrow.png) no-repeat 0px 3px;}
.sliderController span.next {top: inherit; bottom: 0px;transform: rotate(-90deg); left: 25px;}
.sliderController span.disable {opacity: 0.2;}
.sliderContainer {position: relative;padding:50px 0px 0px 35px;}
.sliderContainer:before {content: "";box-shadow:3px 3px 10px rgba(233, 146, 129, 0.341); background:#fdf5ef; border-radius: 50%; position: absolute; left:-90px; top:-90px; width: 435px; height: 435px;}
.sliderContainer img {position: relative; max-width: 280px;}
.clearnaceBg {width: 106px; height: 106px; background: url(../images/clearance-bg.png?1.1) no-repeat 0px 0px / 104px auto; position: absolute; left: -18px; top: -16px;}
.clearnaceBg .genterIcon {display: inline-block; cursor: pointer; margin: 11px 0px 0px 13px; max-width: 20px;}
.proPricText {position: absolute; right: -5px; top: 20px;width:108px; height: 76px; background: url(../images/price-bg.png) no-repeat 0px 0px; line-height: 1;font-family: 'Circular Std Bold';}
.proPricText .prA {padding:14px 15px 5px 13px; display: inline-block; font-size: 26px; color: #ffffff;text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25); transform: rotate(-6deg); }
.proPricText .prB {padding:4px 12px 8px 24px; display: inline-block; font-size: 16px;color: #000;transform: rotate(-4.99deg); font-weight: bold;}
@media(min-width: 1200px) {
  .proDetRow .col-md-6 {flex:0 0 53%; max-width: 53%; padding-right: 5px;}
  .proDetRow .col-md-6:nth-child(2) {flex:0 0 47%; max-width: 47%;}
}















.animation {opacity: 0;transform: translate(0px,20px); transition: all 0.5s linear;}
.animation.ani {opacity: 1;transform: translate(0px,0px);}
@media (min-width: 769px) and (max-width: 1024px) {
	.crRow .col-auto, .crRowHeading .col-auto {flex:0 0 25%;}
	.crRowHeading {display: none;}
	.crRow .colA {flex: 0 0 100%; padding: 15px 0px 5px 0px;}
}
@media (max-width: 768px) {
	.walletBtn, .wishBtn {margin: 8px 10px 0px 10px;}
	.walletBtn .text {display: none;}
	.walletBtn .num {position: absolute; right: -18px; top: -3px;}
	.cartBtn {border:none; padding: 0px; margin: 11px 35px 0px 10px; height: 30px;}
	.cartBtn .text {display: none;}
	.cartBtn .num {position: absolute; right: -16px; top: -4px; }
	.userDropBlock .userText {padding: 6px 20px 5px 39px; font-size: 14px;}

	.topSearchBlock {padding: 2px 62px 2px 45px;}
	.topSearchBlock .advanceSearch {font-size: 0px; height: 22px; padding: 1px 1px 1px 33px;}

	.cartList {border-top:solid 3px #333;}
	.cartList h1 {font-size: 22px; margin:10px 0px 10px 0px;}
	.crRow .qtyRow {padding: 7px 5px 5px 5px;}
	.crRow .col-auto, .crRowHeading .col-auto {flex:1 0 auto; padding: 5px;font-size: 14px;}
	.crRowHeading {display: none;}
	.crRow .colA {flex: 0 0 100%; padding: 15px 0px 5px 0px;}
	.crPro .proTitle {font-size: 16px;}
	.crPro .proCat {font-size: 14px;}
	.crRowTotal {font-size: 14px;}
	.crRowTotal > .col {flex:0 0 100%; text-align: center;padding: 10px;}
	.crRowTotal > .col-auto {flex:0 0 50%; text-align: center;padding: 10px;}
	.crRowTotal .totalAmount {font-size: 18px;}
	.countinueSec h2 {margin:15px 0px;}

	.continueBlock {padding: 10px;}
	.continItem .title {font-size: 16px;}
	.hoverLayer {padding: 15px;}
	.continueBlock .topTitle {font-size: 16px;}
	.continItem td:nth-child(1) {width: 40%; }
	.continItem td:nth-child(2) {width: 60%; padding: 10px;}
	.continItem td:nth-child(3) {display: none;}
	.hoverLayer:before {left: 15px; top: 15px; width: calc(100% - 30px); height: calc(100% - 30px);}
	.hoverLayer .textB {font-size: 16px;padding: 10px 0px;}

	.cartRight {padding:15px; margin-bottom: 20px;}
	.cartRight h2 {font-size: 18px;margin: 0px 0px 15px 0px;}
	.creditCard .textA {font-size: 14px;}
	.orderDes {padding: 20px 0px 10px 0px; }


	/*footer css*/
	.footerLogoRow {border-bottom: none;}
	.footerLogoRow .col {padding:10px 0px 15px 0px; flex:0 0 50%; border-bottom: solid #e4e4e4 1px;}
	.footerLogoRow .col:nth-child(1) {border-left: none;}
	.footerLogoRow .col:nth-child(3) {border-left: none;}
	.footerLogoRow .col:nth-child(4) {border-right: none;}
	.footerLogoRow .img {margin-bottom: 3px;}
	.footerLogoRow .text {font-size: 16px;}
	.copyRight {padding: 20px 0px;}

	.cartBox {right:-101%; width: 100%; max-width: 400px;}

	.relatedSec {padding: 30px 0px 45px 0px;}
	.relatedSec h2 {font-size: 20px;}
	.relatedSec .owlNav.owl-carousel .owl-dots {bottom: -25px;}

  .sliderContainer:before {width: 100%; height: 100%; left: -3%; top: -1%;}
  .sliderNav .slideConroll {max-height: 210px;}
  #productDetail .modal-body {padding: 15px;}
  .sliderContainer {padding: 20px;}
  .sliderContainer img {max-width: 100%;}
  .sliderNav {top: 15px;}
  .sliderSection {min-height:calc(108vw - 100px);}
  .proDetail .textA {font-size: 20px;padding:0px 0px 5px 0px;}
  .proDetail .textB {font-size: 16px;}
  .grayBtn {font-size: 14px;}
  .proDetail .textD {font-size: 16px;}
  .proDetail .textE {font-size: 14px;}
  .proAct {}
  .proAct .orangeBtn {font-size: 14px; margin-right: : }
  .proAct .qtyRow {margin: 0px 0px 0px 0px;padding: 10px 20px;}
  .clearnaceBg {width: 100px; height: 100px;left: -17px; top: -16px; background: url(../images/clearance-bg.png) no-repeat 0px 0px / 100px auto;}
  .clearnaceBg .genterIcon {max-width: 22px; margin: 10px 0px 0px 10px;}

  .proRelatedProductsSec {padding: 0px 0px; }
  .proRelatedProductsSec .textA {font-size: 26px; padding: 25px 0px 10px 0px;}
  .relProBox .title {opacity: 1;}
  .relatedItemRow .item {flex:0 0 calc(50% - 7px);}

  .proPricText .prA {font-size: 26px;}
  .proPricText .prB {font-size: 16px;}

}





.scrollEle::-webkit-scrollbar {height: 5px; width: 4px; }
.scrollEle::-webkit-scrollbar-track {background: #f1f1f1; }
.scrollEle::-webkit-scrollbar-thumb {background: #888; }
.modal-dialog {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}
@media(max-width: 768px) {
  .modal-dialog {
    min-height: calc(100vh - 20px);
  }
}