@import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');

@font-face {font-family: 'century_gothic'; src: url('gothic-webfont.woff2') format('woff2'), url('gothic-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'century_gothic'; src: url('gothicb-webfont.woff2') format('woff2'), url('gothicb-webfont.woff') format('woff'); font-weight: 700; font-style: normal;}
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');

* {margin: 0; padding: 0; outline: 0; -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none;}
body {font-size: 15px; line-height: normal; color: #101011; font-family:'century_gothic'; background: #fff;}
a {outline: none; text-decoration: none; color: #0071BD; -webkit-transition: ease-in-out .3s; -moz-transition: ease-in-out .3s; -ms-transition: ease-in-out .3s; -o-transition: ease-in-out .3s; transition: ease-in-out .3s;}
a:hover {text-decoration: none;}
input, textarea, select {font-size: 14px; color: #101011; vertical-align: middle; font-family:'century_gothic'; outline: none; resize: none;}
input[type="button"], input[type="submit"], button {-webkit-transition: ease-in-out .3s; -moz-transition: ease-in-out .3s; -ms-transition: ease-in-out .3s; -o-transition: ease-in-out .3s; transition: ease-in-out .3s; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; cursor: pointer;  font-family: 'segoe_ui'; font-family:'century_gothic';}
select {appearance: none; -ms-appearance: none; -webkit-appearance: none;}
select::-ms-expand {display: none;}
.transition {-webkit-transition: ease-in-out .5s; -moz-transition: ease-in-out .5s; -ms-transition: ease-in-out .5s; -o-transition: ease-in-out .5s; transition: ease-in-out .5s;}
img {border: none; vertical-align: top; max-width: 100%;}

.flexBox {display: flex; flex-wrap: wrap;}
.flexBox.nowrap {flex-wrap: nowrap;}
.itemCenter {align-items: center;}
.itemBottom {align-items: flex-end;}
.justifyContentBetween {justify-content: space-between;}
.justifyContentCenter {justify-content: center;}
.justifyContentEnd {justify-content: flex-end;}
.tac {text-align: center !important;}
.tar {text-align: right !important;}
.container {width: 100%; margin: auto; max-width: 1650px; padding: 0 15px;}
.pr {position: relative;}

.topBar {background: #004A69;}
.topBar .container {height: 80px;}
.topBar .link {color: #F4E4D2; font-size: 18px; font-family: "Inter", sans-serif; display: flex; align-items: center;}
.topBar .link img {margin-right: 10px;}
.topBar .link.call {margin-right: 40px;}

.selectLan {display: flex; align-items: center; cursor: pointer;}
.selectLan .arrow {margin-left: 5px; color: #fff; font-size: 32px;}

.header .container {height: 155px;}
a.showMobMenu {display: none;}
.menuLink > li {font-size: 21px; padding: 0 20px; position: relative; z-index: 100;}
.menuLink > li > a {color: #004A69; font-size: 21px; font-weight: 600; font-family: "Inter", sans-serif; display: flex; align-items: center;}
.menuLink > li > a:hover, .menuLink > li > a.active {color: #A86328;}
.menuLink li a .arrow {font-size: 32px;}

.submenu {position: absolute; left: 20px; top: 100%; width: 240px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.1); margin-top: 10px; display: none;}
.submenu li {font-size: 17px; border-bottom: 1px solid #eee;}
.submenu li a {display: block; padding: 12px 15px;}

.distriubutors {border: 1px solid #004A69; border-radius: 60px; height: 68px; display: flex; align-items: center; color: #004A69; font-size: 20px; font-weight: 600; font-family: "Inter", sans-serif; padding: 0 25px;}
.distriubutors img {margin-left: 10px;}
.distriubutors:hover {background: #eee;}
.cart {background: #A86328; border-radius: 60px; height: 68px; display: flex; align-items: center; color: #fff; font-size: 20px; font-weight: 600; font-family: "Inter", sans-serif; padding: 0 25px; margin-left: 10px;}
.cart img {margin-right: 10px;}
.cart:hover {background: #004A69;}

.pt80 {padding-top: 80px;}
.pb80 {padding-bottom: 80px;}


.bradcrum {color: #7E7F7F; font-size: 24px; font-weight: 700; padding-top: 30px;}
.bradcrum a {color: #7E7F7F; margin: 0 10px; display: inline-block;}
.bradcrum a:first-child {margin-left: 0;}
.bradcrum a:hover {color: #004A69;}
.bradcrum span {padding: 0 10px; display: inline-block;}

.detailTop {align-items: flex-start;}
.detailLeft {width: 56%; align-items: flex-start;}
.thumbSlider {width: 188px;}
.thumbSlider .item {margin-bottom: 20px;}
.thumbSlider .slick-current img {border: 1px solid #000;}

.detailSlider {width: calc(100% - 188px); padding: 0 70px;}
.detailSlider .item img {width: 100%;}

.detailSlider .slick-arrow {width:44px; height:44px; position:absolute; top:50%; margin-top: -22px; overflow:hidden; text-indent:0px; font-size:0px; color:#fff; border:none; background: none; z-index: 10;}
.detailSlider .slick-arrow.slick-disabled {opacity: .2; cursor: not-allowed;}
.detailSlider .slick-arrow:before {font-family: 'Material Icons'; color:#000; font-size:26px; position:absolute; left:0; top:0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;}
.detailSlider .slick-prev {left:10px;}
.detailSlider .slick-prev:before {content:'arrow_back_ios';}
.detailSlider .slick-next {right:10px;}
.detailSlider .slick-next:before {content:'arrow_forward_ios';}

.detailRight {width: 44%; color: #535454; padding-left: 30px;}
.detailRight .hd {font-size: 32px; line-height: 40px; font-weight: 700; padding-bottom: 5px;}
.detailRight .subHd {font-size: 24px; line-height: 32px; padding-bottom: 5px;}
.detailRight .desc {font-size: 18px; color: #7E7F7F; padding-bottom: 15px;}
.detailRight .colorBox {font-size: 18px; color: #7E7F7F; padding-bottom: 25px;}
.detailRight .colorBox .color {width: 46px; height: 46px; margin: 5px 0; display: block;}
.detailInfo {padding-bottom: 25px;}
.detailInfo li {display: flex; align-items: center; padding-bottom: 10px;}
.detailInfo li .left {width: 250px; color: #535454; font-size: 24px;}
.detSelect {border: 1px solid #535454; font-size: 24px; width: 300px; height: 44px; color: #535454; padding: 0 15px; background: #fff url(../images/select.png) no-repeat right 10px center;}
.detailInfo li.total {padding-top: 15px;}
.detailInfo li.total .price {font-size: 21px;}
.detailInfo li.total .price span {display: block; font-size: 30px; font-weight: 700;}
.detailBtn {margin-bottom: 10px; border: 1px solid #535454; border-radius: 6px; height: 72px; color: #004A69; font-size: 24px; font-weight: 700; text-align: center; width: 100%; max-width: 550px;}
.detailBtn:hover {background: #A86328; color: #fff; border-color: #A86328;}

.detailtab {margin-bottom: 30px;}
.detailtab li {font-size: 32px; font-weight: 700; margin-right: 40px; position: relative;}
.detailtab li:last-child {margin-right: 0;}
.detailtab li:after {content: ''; background: #535454; width: 2px; height: 70%; position: absolute; right: -22px; top: 15%;}
.detailtab li:last-child:after {display: none;}
.detailtab li a {color: #535454;}
.detailtab li a:hover, .detailtab li.active a {color: #A86328;}
.infoBox {border: #7E7F7F 1px solid; padding: 25px;}
.infoBox .left {width: 400px;}
.infoList li {padding-bottom: 10px; color: #7E7F7F; font-size: 18px; line-height: normal;}
.infoList li:last-child {padding-bottom: 0;}
.infoBox .center {width: calc(100% - 800px); padding: 0 20px; color: #7E7F7F; font-size: 18px; line-height: 26px;}
.infoBox .center .hd {display: block; font-weight: 700; color: #535454; padding-bottom: 10px;}
.infoBox .center p {margin-bottom: 20px;}
.infoBox .right {width: 400px;}
.infoBox .right ul li {padding: 15px; width: 50%; text-align: center; color: #7E7F7F; font-size: 14px; line-height: 18px; font-weight: 700;}
.infoBox .right ul li .icon {display: flex; height: 70px; align-items: center; justify-content: center; margin-bottom: 10px;}
.infoBox .right ul li .break {display: block;}

.mainHd {color: #535454; font-size: 48px; font-weight: 700; padding-bottom: 25px;}
.productList {margin: -10px;}
.productList li {width: 25%; padding: 10px;}
.productList li .img img {width: 100%;}
.productList li .name {padding: 10px 0 5px 0; color: #535454; font-size: 22px; font-weight: 700;}
.productList li .desc {font-size: 20px; color: #7E7F7F;}
.productList li .price {color: #535454; font-size: 30px; font-weight: 700; padding-top: 15px;}
.productList li .time {color: #7E7F7F; font-size: 18px; padding-top: 5px;}
.productList li .time img {vertical-align: middle; margin-right: 5px;}

.footer {background: #EBEBEB; width: 100%; padding: 80px 0;}
.footerLeft {width: 30%; padding-right: 40px; border-right: 1px solid #004A69;}
.footerLogo {width: 250px;}
.address {font-size: 18px; color: #535454; line-height: 30px; padding-top: 25px;}
.supported {padding-top: 100px; color: #004A8F; font-size: 15px;}
.footerLink {width: 20%; padding-left: 40px;}
.footerLink ul li {padding-bottom: 10px;}
.footerLink ul li a {color: #535454; font-size: 18px;}
.footerLink ul li a:hover {color: #004A8F;}
.followUs {width: 20%; padding-left: 40px;}
.followUs .hd {color: #004A8F; font-size: 26px; font-weight: 700; display: block; padding-bottom: 15px;}
.sociaLink {margin: -5px;}
.sociaLink li {padding: 5px;}
.newsletter {width: 30%; padding-left: 40px;}
.newsletterHd {color: #004A69; font-size: 30px; font-weight: 700; padding-bottom: 20px; line-height: 40px;}
.newsletterHd span {display: block; font-size: 35px;}
.newsletterInput {width: 100%; height: 50px; border-radius: 4px; border: 1px solid #C0CCDA; padding: 0 15px; font-weight: 700; font-size: 15px;}
.provide {color: #8390A4; font-size: 15px; padding-top: 15px;}
.iagree {color: #535454; font-size: 16px; line-height: 24px; margin-top: 15px; padding-left: 32px; position: relative;}
.iagree .check {position: absolute; left: 0; top: 2px; width: 20px; height: 20px;}
.unsubscribe {color: #8390A4; font-size: 13px; padding: 15px 0;}
.subscribeBtn {background: #3E4857; height: 52px; border-radius: 4px; padding: 0 35px; color: #fff; font-size: 22px; text-transform: uppercase; font-weight: 700;}
.subscribeBtn:hover {background: #0071BD;}

.printingTextBox {color: #7E7F7F; font-size: 18px; line-height: 26px;}
.printingTextBox span {display: block; color: #535454; font-weight: 700; padding-bottom: 10px;}
.printingImgs {margin: -15px; padding-top: 25px;}
.printingImgs li {width: 50%; padding: 15px; max-width: 492px;}
.printingImgs li .img img {width: 100%;}
a.previewBtn {display: flex; text-align: center; justify-content: center; align-items: center; background: #A86328; height: 70px; border-radius: 6px; font-size: 24px; font-weight: 700; color: #fff; margin: 10px;}
a.previewBtn:hover {background: #000;}

.previewTop .left {width: 50%;}
.previewTab li {margin-right: 10px;}
.previewTab li a {height: 120px; position: relative; width: 260px;  border: 1px solid #EBEBEB; background: #EBEBEB; padding: 10px 30px; display: flex; flex-direction: column; justify-content: center; color: #535454; font-size: 16px;}
.previewTab li a span {display: block; color: #535454; font-size: 26px; font-weight: 700;}
.previewTab li.active a {background: #fff; border: 1px solid #7E7F7F; border-bottom: 1px solid #fff;}
.previewTab li.active a:after {content: ''; width: 100%; height: 5px; background: #fff; position: absolute; left: 0; bottom: -3px;}
.previewBox {border: 1px solid #7E7F7F; padding: 50px;}
.previewTop .right {width: 50%; padding: 120px 0 0 40px; flex-direction: column; justify-content: space-between;}
.previewTop .right a {background: #A86328; height: 62px; border-radius: 6px; display: inline-flex; align-items: center; padding: 0 35px; font-size: 22px; font-weight: 700; color: #fff;}
.previewTop .right a:hover {background: #000;}
.previewTop .right .bot {position: relative;}
.previewTop .right .bot .text {position: absolute; left: 370px; bottom: 65px; width: 260px; color: #7E7F7F; font-size: 18px; opacity: .5;}

.blcClr {color: #000;}
.proofBox .left {width: 50%; padding-top: 30px;}
.form {margin: -15px;}
.form li {width: 100%; padding: 15px;}
.form li.half {width: 50%;}
.form li .field {display: block; color: #000000; font-size: 24px; padding-bottom: 10px;}
.formInput {border: 1px solid #7E7F7F; height: 64px; width: 100%; padding: 0 20px; max-width: 650px;}
textarea.formInput {height: auto; padding: 15px 20px; max-width: 100%;}
.uploadFile {display: flex; align-items: center; justify-content: center; background: #A86328; border-radius: 6px; height: 60px; text-align: center; cursor: pointer; font-size: 22px; font-weight: 700; color: #fff; padding: 0 20px;}
.uploadFile:hover {background: #000;}
.formBtn {background: #A86328; border-radius: 6px; height: 60px; text-align: center; cursor: pointer; font-size: 22px; font-weight: 700; color: #fff; padding: 0 20px; min-width: 300px;}
.formBtn:hover {background: #000;}
.proofBox .right {width: 50%; padding: 30px 0 0 40px;}
.proofBox .right .hd {color: #000; font-size: 24px; padding-bottom: 15px;}
.proofBox .right .hd span {display: block; font-weight: 700;}
.proofBox .right .delivered {font-size: 19px; padding-bottom: 30px;}
.proofBox .right .delivered img {vertical-align: middle; margin: 0 8px 0 0;}

.categoryBanner {background: #A86328; border-radius: 6px;}
.categoryBanner .det {width: 60%; padding: 50px 20px 50px 60px; color: #fff;}
.categoryBanner .det .hd {padding-bottom: 20px; font-size: 48px; font-weight: 700;}
.categoryBanner .det .hd span {display: block; font-size: 30px; font-weight: 400;}
.categoryBanner .det .text {font-size: 18px; line-height: 30px; padding-bottom: 30px;}
a.shopNow {background: #fff; height: 36px; display: inline-flex; align-items: center; border-radius: 14px; font-size: 16px; font-weight: 700; padding: 0 30px; color: #A86328;}
a.shopNow:hover {background: #000; color: #fff;}
.categoryBanner .img {width: 40%; padding: 20px;}
.catrgoryList {margin: -5px;}
.catrgoryList li {width: 25%; padding: 5px;}
.catrgoryList li .inner {position: relative; overflow: hidden;}
.catrgoryList li .inner .img img {transition: ease-in-out .4s; width: 100%;}
.catrgoryList li .inner .over {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 25px 40px 50%; transition: ease-in-out .4s; align-items: flex-start;} 
.catrgoryList li .inner .over .name {font-size: 25px; line-height: 30px; font-weight: 700; font-style: italic; color: #fff;}
.catrgoryList li .inner .over .btn {height: 30px; display: inline-flex; align-items: center; border: 1px solid #FFFFFF; border-radius: 10px; padding: 0 15px; color: #FFFFFF; font-size: 12px; font-weight: 700;}
.catrgoryList li .inner:hover .over .btn {background: #000; color: #fff; border-color: #000;}
.catrgoryList li .inner:hover .img img {transform: scale(1.1);}
.catrgoryList li .inner:hover .over {background: rgba(0,0,0,.2);}
.shopInfo {padding: 40px 0;}
.shopInfo li {width: 33.33%; padding: 20px; font-size: 25px; font-weight: 600; display: flex; align-items: center; justify-content: center;}
.shopInfo li img {margin-right: 25px;}
.mainHd span {display: block; font-size: 26px; font-weight: 400; padding-top: 5px;}

.inStocks {max-width: 1300px; margin: auto;}
.inStocks .productList li {width: 33.33%; padding-top: 40px;}

.collaborationText {color: #7E7F7F; font-size: 24px; line-height: 35px;}
.collaborationList {max-width: 1300px; margin: auto; gap: 20px; padding-top: 30px;}
.collaborationList li {width: calc(25% - 15px);}
.collaborationList li .inner {background: #F2F2F2; padding: 30px 20px; text-align: center; height: 100%;}
.collaborationList li .inner .icon {height: 100px; display: flex; align-items: center; justify-content: center;}
.collaborationList li .inner .det {padding: 20px 0 0 0; color: #7E7F7F; font-size: 21px; line-height: 30px;}
.collaborationList li .inner .det span {color: #3E4857; font-weight: 600; display: block; padding-bottom: 10px;}

.shippingBanner {background: #A86328; border-radius: 12px; padding: 10px;}
.shippingBanner .det {width: 50%; display: flex; flex-direction: column; justify-content: space-between; padding:80px 120px;}
.shippingBanner .img {width: 50%; text-align: right;}
.shippingInfo {gap: 20px; width: 92%; margin: auto;}
.shippingInfo li {width: calc(50% - 10px); position: relative;}
.shippingInfo li .img img {width: 100%; border-radius: 16px;}
.shippingInfo li .over {position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding:70px;}
.shippingInfo li .over .top {background: #fff; height: 76px; color: #3DA1CA; font-size: 42px; border-radius: 12px; display: inline-flex; align-items: center; padding: 0 30px;}
.shippingInfo li .over .top.red {color: #D32127;}
.shippingInfo li .over .bot {font-size: 48px; line-height: 56px; font-weight: 700; color: #fff; padding-top: 60px;}

.printingInfo {gap: 20px;}
.printingInfo li {width: calc(50% - 10px); position: relative; background-size: cover !important; border-radius: 16px; overflow: hidden;}
.printingInfo li .over {position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 50px 40% 50px 50px;}
.printingInfo li img {width: 100%; opacity: 0;}
.printingInfo li .hd {font-size: 47px; line-height: 56px; font-weight: 700; color: #fff; padding-bottom: 15px;}
.printingInfo li .text {color: #004A69; font-size: 23px; font-weight: 700; padding-bottom: 25px;}
.printingInfo li.higDensityPrinting .over {padding:50px 50px 50px 45%;}
.printingInfo li a.btn {box-shadow: 0px 1.97px 11.85px 0px #00000040; background: #fff; height: 46px; border-radius: 20px; padding: 0 30px; display: inline-flex; align-items: center; color: #6499C6; font-size: 22px;}
.printingInfo li a.btn:hover {background: #6499C6; color: #fff;}
.printingInfo li.higDensityPrinting a.btn {color: #D0A2D3;}
.printingInfo li.higDensityPrinting a.btn:hover {background: #D0A2D3; color: #fff;}

.trendingBox {position: relative; background-size: cover !important;}
.trendingBox img {width: 100%; opacity: 0;}
.trendingBox .over  {position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 20px 20px 20px 55%; display: flex; align-items: center; color: #fff; font-size: 35px; line-height: 42px;}
.trendingBox .over .inner {max-width: 500px;}
.trendingBox .over span {font-size: 45px; font-weight: 700; display: block; letter-spacing: 8px; margin-bottom: 30px; position: relative;}
.trendingBox .over span:after {content: ''; background: #fff; width: 170px; height: 1px; position: absolute; bottom: -8px; left: 0;}
.trendingBox .over .link {padding-top: 30px;}
.trendingBox .over .link a {box-shadow: 0px 1.97px 11.85px 0px #00000040; background: #fff; height: 60px; border-radius: 20px; padding: 0 40px; display: inline-flex; align-items: center; color: #6499C6; font-size: 30px;}
.trendingBox .over .link a:hover {box-shadow: 0px 1.97px 15.85px 0px #000000;}

.orderBot {font-size: 36px; font-weight: 700;}
.bestSeller {padding: 0 10px;}
.bestSeller .productList li {width: 33.33%;}
.bestSeller .productList li .inner {padding: 20px; position: relative;}
.bestSeller .productList li .inner:hover {box-shadow: 0px 8px 15px 0px #00000033;}
.productList li .price span {font-weight: 400; margin-right: 10px;}
.productList li .inner .hd {background: #D0A2D3; height: 110px; position: absolute; left: -15px; top: 60px; color: #fff; font-size: 24px; line-height: 30px; font-weight: 700; padding: 5px 40px; display: flex; align-items: center;}
.productList li .inner .hd:before {content: ''; border-bottom: 10px solid transparent; border-top: 10px solid transparent; border-left: 10px solid #6E4672; position: absolute; top: -14px; left: 5px; transform: rotate(45deg);}
.productList li .inner .hd.blue {background: #6499C6;}
.productList li .inner .hd.color {background: linear-gradient(90deg, #A86328 0%, #004A69 100%);}
/* Change order summary box color */
.o_wsale_accordion .accordion-item,
.o_wsale_accordion .accordion-button,
.o_wsale_accordion .accordion-body {
    color:white !important;
}
.o_website_sale_checkout .o_total_card .accordion-item {
    background-color:#004b67 !important;
}