/* //// //// Easing general purpose //// --------------------------------------------------------------*/ .easeOut { -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } /* //// //// Default Font //// --------------------------------------------------------------*/ html, body { height: 100%; min-height: 100%; } body { font-family: "DM Sans", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; background: var(--background-color); font-weight: 400; letter-spacing: -0.01em; color: var(--color-body); } strong { font-weight: 700; } .genC1 { color: var(--color-primary)!important; } .genC2 { color: var(--color-secondary); } .genC3 { color: #4db70b!important; } #fullWrp { margin: 0 auto; min-height: 100%; position: relative; background: var(--background-color); overflow-x: hidden; } .mb-6 { margin-bottom: 30px; } .genPad1 { padding-top: 6rem; padding-bottom: 6rem;} @media all and (max-width: 576px) { .genPad1 { padding-top: 4.5rem; padding-bottom: 4.5rem;} } #mainCont { padding-top: 96px; } .introHeader + #mainCont { padding-top: 0!important; } /* //// //// Default Cont //// --------------------------------------------------------------*/ /* Header -----------------------*/ .introHeader { box-shadow: none!important; background: none!important; } .introHeader:before { content: ""; display: block; position: absolute; left: 0; right: 0; height: 102%; bottom: 100px; background: var(--color-header-bg); will-change: transform; transition-property: transform; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } .scrolling .introHeader:before { transform: translate3d(0px, 100px, 0px); } #header .FrmCtr { max-width: 100%; } #header .hdrBtm { display: flex; justify-content: space-between; align-items: center; } #header .navRgt ul { font-size: 26px; display: flex; line-height: 1.1em; } #header .navRgt ul li { position: relative; } #header .navRgt a { color: var(--color-header); margin-left: 20px; text-decoration: none!important; position: relative; z-index: 10; } #header .navRgt .txt { font-size: 0.64em; } #header .navRgt .cartIco { position: relative; } #header .navRgt .cartIco span.cartCount { position: absolute; right: -0.75em; top: -0.4em; background: var(--color-button-bg); color: #fff; width: 1.5em; height: 1.5em; font-size: 0.5em; text-align: center; font-weight: 600; line-height: 1.5em; display: block; } #header .navRgt .memBtn { display: flex; justify-content: center; align-items: center; padding: 0.2em 0.55em; } #header .navRgt .memBtn .glyphicon { top: auto; } #header #mainLogo { display: flex; max-width: 160px ; margin: 0 auto 0 0; font-weight: 600; font-style: normal; font-size: 24px; position: relative; font-family: "Unbounded", Arial, "Nimbus Sans L", FreeSans; text-transform: capitalize; letter-spacing: 0.1em; } #header #mainLogo a { display: flex; color: var(--color-header); text-decoration: none!important; align-items: center; position: relative; top: 0.125em; } #header #mainLogo a img { min-width: 33px; max-width: 33px; height: auto!important; margin-right: 0.4em; margin-top: -0.125em; } #header .dropdown-toggle .sm { display: none; } #header .navRgt .drop { position: absolute; left: 10px; top: 8px; padding-top: 35px; font-size: 16px; white-space: nowrap; display: none; } #header .navRgt .drop ul { display: block; background: #fff; border: solid 1px #d1d1d1; border-radius: 0px; box-shadow: 5px 5px 20px -5px #cdcdcd; font-size: 1em; min-width: 12em; } #header .navRgt .drop ul:after, #header .drop ul:before { top: 18px; left: 15px; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } #header .navRgt .drop ul:after { border-color: rgba(0, 0, 0, 0); border-bottom-color: #fff; border-width: 9px; margin-right: -9px; } #header .navRgt .drop ul:before { border-color: rgba(0, 0, 0, 0); border-bottom-color: #d1d1d1; border-width: 10px; margin-left: -1px; margin-top: -2px; } #header .navRgt .drop li { display: block; } #header .navRgt .drop li:first-child { padding-top: 1em; } #header .navRgt .drop li:last-child { padding-bottom: 1em; } #header .navRgt .drop li h5 { font-size: 18px; padding: 0 20px; font-weight: bold; margin: 0 0 6px 0; } #header .navRgt .drop li a { display: block; color: var(--color-catlist-all); padding: 0.3em 20px; margin: 0; font-size: 1em; } @media all and (max-width: 750px) { #header .navRgt .txt { display: none; } #header .navRgt .memBtn { padding: 0.2em;} #header .navRgt .memBtn .glyphicon { margin-right: 0; } #header .navRgt .drop { left: auto; right: -6px; } #header .navRgt .drop ul:after, #header .drop ul:before { left: auto; right: 10px; } #header .navRgt .drop ul:after { margin-left: -9px; margin-right: auto; } #header .navRgt .drop ul:before { margin-right: -1px; margin-left: auto; } } @media all and (max-width: 476px) { #header .navRgt { order: 5; padding-left: 10px; } #header .navRgt a { margin-left: 10px; } #header .navRgt .dropdown-toggle .lg { display: none; } #header .navRgt .dropdown-toggle .sm { display: inline-block; top: -2px; } } /* Main Header Mobile --------------------------------------------------------------*/ #mainCont { padding-top: 68px; } #header #mainLogo { margin-left: 20px; } #header { padding: 0; } #mainHdr .ctr { margin: 0 2rem; } /*burger icon + animation*/ .nav-hamburger { background: transparent none repeat scroll 0 0; border: 0 none; cursor: pointer; display: block; height: 35px; margin-bottom: auto; margin-top: auto; outline: medium none; padding: 0; position: relative; transition: all 0.3s ease-in-out 0s; width: 30px; } .nav-hamburger::before, .nav-hamburger::after, .nav-hamburger span { background-color: var(--color-header); transition: all 0.3s ease-in-out 0s; } .nav-hamburger::before, .nav-hamburger::after, .nav-hamburger span { background-color: var(--color-header); } .nav-hamburger::before, .nav-hamburger::after { content: ""; height: 2px; left: 0; position: absolute; top: 50%; transform-origin: 50% 50% 0; width: 100%; } .nav-hamburger span { height: 2px; left: 0; overflow: hidden; position: absolute; text-indent: 200%; top: 50%; width: 100%; cursor: pointer; } .nav-hamburger::before { transform: translate3d(0px, -8px, 0px); } .nav-hamburger::after { transform: translate3d(0px, 8px, 0px); } .menuOpen .nav-hamburger span { background-color: var(--color-header); opacity: 0; } .menuOpen .nav-hamburger::before { background-color: var(--color-header); transform: rotate3d(0, 0, 1, 45deg); } .menuOpen .nav-hamburger::after { background-color: var(--color-header); transform: rotate3d(0, 0, 1, -45deg); } .nav-hamburger { position: relative; left: 0; top: 0; z-index: 1001; cursor: pointer; } #mainLogo { margin: 0 0 0 57px; } #mainLogo a { width: 162px; height: 68px; top: 0; } #mainNav .site-nav { display: block; top: 68px; bottom: -100vh ; left: 0; right: 0; overflow-y: auto; position: absolute; padding: 0; box-shadow: 0 -30px 0 0 var(--color-dropdown2-bg); } #mainNav .site-nav ul, #site-menu .site-nav li { margin: 0; padding: 0; } #mainNav .site-nav li { padding: 0; display: block; text-align: left; } #mainNav .site-nav li:first-child { margin-top: 0; } #mainNav .site-nav li a { background: var(--color-dropdown2-bg); display: block; padding: 19px 20px 19px 20px; color: var(--color-nav); font-size: 15.5px; line-height: 16px; -webkit-transition:0ms ease-out all; transition: 0ms ease-out all; text-align: center; border-bottom: solid 1px rgba(255,255,255,0.3); text-align:left; font-weight: 400; letter-spacing: 0; text-transform: capitalize; text-decoration: none; } #mainNav .site-nav li:first-child a { border-top: solid 1px rgba(255,255,255,0.3); } #mainNav .site-nav li a.cur, #mainNav .site-nav li a.cur:active { outline: none; color: var(--color-primary); background:var(--color-dropdown2-bg); } #mainNav .site-nav li a:active { background: var(--color-dropdown1-bg); color: var(--color-nav-cur); } /* open menu -----------------------------*/ #mainNav { background:var(--color-dropdown2-bg); color: #000; display: block!important; max-width: 280px; top: 0; box-shadow: -1000vh 900vh 0 1000vh var(--color-dropdown2-bg), -1000vh 900vh 20px 1000vh rgba(0,0,0, 0.4); position: absolute; left: 0; width: 100%; -webkit-transition: 300ms ease-out all; transition: 300ms ease-out all; z-index: 900; -webkit-transform: translateX(-500px); transform: translateX(-500px); transform: translate3d(-500px, 0, 0); -webkit-transform: translate3d(-500px, 0, 0); pointer-events: none; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; will-change: transform; } .menuOpen #mainNav { -webkit-transform: translateX(0); transform: translateX(0); transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); pointer-events: auto; } /* second stage -----------------------------*/ #mainNav .site-nav li a.hasDrop { background: var(--color-dropdown2-bg); color: var(--color-nav); position: relative; } #mainNav .site-nav li a.hasDrop:before { content: ' '; display: block; position: absolute; right: 20px; top: 50%; width: 1.2em; height: 1.2em; background: url('../images/caret-right.svg') no-repeat center center; background-size: contain; margin-top: -0.6em; transform: rotate(90deg); } #mainNav .site-nav li.dropOpen a.hasDrop { color: var(--color-nav-cur); background: var(--color-dropdown2-bg); } #mainNav .site-nav li.dropOpen a.hasDrop:before { transform: rotate(-90deg); } #mainNav .site-nav li .drop { display: none; will-change: height; background: var(--color-dropdown1-bg); } #mainNav .site-nav li .drop a { padding: 14px 20px 14px 30px ; border-top: 0; background: var(--color-dropdown1-bg);} #mainNav .site-nav li .drop ul ul { display: none; } #mainNav .site-nav li .drop ul ul a { padding-left: 40px; border-top: 0; } #mainNav .site-nav li .drop li:first-child { margin-top: 0; } #mainNav .site-nav li .tab-pane { display: none;} #hdrSideCart { top: 0!important; } /* Sidecart -----------------------*/ #hdrSideCart { position: absolute; right: 0; top: 0; background: #fff; color: #000; width: 360px; max-width: 100vw; font-size: 19px; box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.25); border-bottom-left-radius: 6px; box-shadow: 0 -100px 0 0 #fff; } #hdrSideCart { -webkit-transition: 300ms ease-out all; transition: 300ms ease-out all; z-index: 900; -webkit-transform: translateX(500px); transform: translateX(500px); transform: translate3d(500px, 0, 0); -webkit-transform: translate3d(500px, 0, 0); pointer-events: none; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; will-change: transform; } .openCartTab:after { content: ' '; position: absolute; left: 0; top: 0; width: 100vw; height: 100vw; display: block; z-index: -1; } .openCartTab{ box-shadow: 0 0 0 4000px rgba(0,0,0,0.5); } .openCartTab #hdrSideCart { -webkit-transform: translateX(0); transform: translateX(0); transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); pointer-events: auto; } #header #hdrSideCart a { color: #000; } #hdrSideCart .hdrSideCartTop { border-bottom: solid 1px rgba(0,0,0,0.25); display: flex; justify-content: space-between; padding: 20px; line-height: 1.1em; } #hdrSideCart .hdrSideCartTop .glyphicon-shopping-cart { font-size: 1.2em; top: -0.09em; margin-right: 0.2em; } #hdrSideCart .itm { padding: 20px; border-bottom: solid 1px rgba(0,0,0,0.25); } #hdrSideCart .itm .itmDesc { display: flex; align-items: center; } #hdrSideCart .itm .itmTitle { display: block; font-weight: 600; font-size: 15px; line-height: 1.1em; padding-bottom: 0.6em; } #hdrSideCart .itm .itmTmb { width: 82px; margin-right: 20px; } #hdrSideCart .itm .itmTxt { font-size: 15px; line-height: 1.4em; } #hdrSideCart #hdrSideCartSub { padding: 20px; display: flex; justify-content: space-between; border-bottom: solid 1px rgba(0,0,0,0.25); line-height: 1.1em; font-weight: 500; } #hdrSideCart #hdrSideCartBtns { padding: 20px; } #hdrSideCart #hdrSideCartBtns .btnA { font-size: 19px!important; } /* Footer -----------------------*/ #footer { background: var(--color-footer-bg); color: var(--color-footer-txt); text-align: center; font-size: 16px; padding: 80px 0; box-shadow: 0 4000px 0 4000px #000; } #footer li { display: inline; } #footer li a { color: var(--color-footer-txt); } #footer li a:hover { text-decoration: underline; } @media screen and (max-width: 768px) { #footer { font-size: 13px; } } @media all and (max-width: 576px) { #footer { font-size: 12px; } #footer ul { margin: 0 auto; max-width: 280px; } #footer ul span.sep { display: none; } #footer ul li.copy { display: block; } } /* Intro -----------------------*/ .introBg { background: #e4e7ee url("../images/main_intro_bg_xl.jpg") no-repeat center center; background-size: cover; position: relative; } .mainIntro { display: flex; justify-content: flex-start; flex-direction: column; padding: 180px 2rem; align-items: flex-start; color: #fff; } .mainIntro .colLft { max-width: 852px; width: 57%; } .mainIntro .colRgt { max-width: 580px; width: 39%; padding-left: 30px; } .mainIntro .colRgt .tmb { border-radius: 20px; display: block; background: url("../images/main_side_tmb.jpg") no-repeat center center; background-size: cover; } .mainIntro .colRgt .tmb:after { content: " "; display: block; padding-top: 100%; } .mainIntro .ln0 { font-size: 14px; font-weight: 600; text-transform: uppercase; background: #ffdb80; color: #000000; padding: 0.5em 1.4em; border-radius: 4px; margin-bottom: 1.4em; display: inline-block; } .mainIntro .ln1 { font-size: 55px; line-height: 1.18em; font-weight: 500; text-align: left; max-width: 13em; font-family: "Unbounded", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; text-transform: none; letter-spacing: 0em; margin: 0 0 0.2em; } .mainIntro .ln2 { font-size: 24px; line-height: 1.2em; padding: 1em 0 2em 0; text-align: left; font-weight: 700; } .mainIntro .btm { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.30); text-align: center; font-size: 18px; padding: 1em 2rem; font-weight: 500; border-top: solid 1px rgba(255,255,255,0.2); } .mainIntro .btm strong { font-size: 1.25em; font-weight: 700; } @media all and (max-width: 1500px) { .mainIntro .ln1 { font-size: 50px; } .mainIntro .ln2 { font-size: 20px; } } @media screen and (max-width: 900px) { .mainIntro { flex-direction: column; height: auto; max-height: auto; text-align: center; } .mainIntro .mo-product-search { justify-content: center; } .mainIntro .ln1 { text-align: center; margin: 0 auto 0.35em auto; } .mainIntro .ln2 { text-align: center; margin: 0 auto; } } @media screen and (max-width: 768px) { .mainIntro .ln1 { font-size: 40px; } .mainIntro .ln2 { font-size: 18px; padding: 1em 0 2.2em 0; } .mo-product-search { max-width: 462px; max-width: 90%; margin: 0 auto; } } @media screen and (max-width: 576px) { .mainIntro { min-height: 425px; } .mainIntro .colLft { text-align: center; } .mainIntro .ln1 { font-size: 6.9vw; text-align: center; } .mainIntro .ln2 { font-size: 3.2vw; padding: 1em 0 2.2em 0; } .searchMag { display: none; } .searchGo span input { padding-left: 0.8em; padding-right: 0; } .mainIntro .btm { font-size: 3vw; } .twitter-typeahead{ width: 100%; } } @media screen and (max-width: 400px) { .mainIntro .ln0 { font-size: 3.5vw; } } /* //// //// Search Results //// --------------------------------------------------------------*/ #searchRes .searchResCtr { display: flex; } #searchRes #sideCatsCol { min-width: 244px; max-width: 244px; padding-right: 20px; } #searchRes #sideCatsCol li { font-weight: 700; font-size: 14px; padding: 0 0px; } #searchRes #sideCatsCol a { color: #000; display: block; padding: 2px 0; display: flex; justify-content: space-between; } #searchRes #sideCatsCol p { font-size: 13px; font-weight: 500; line-height: 1.2em; } #searchRes { padding: 4rem 0; } #searchRes h4 { font-size: 20px; font-weight: 700; padding-bottom: 0.8em; padding-top: 0.25em; margin-bottom: 0.5em; display: block; border-bottom: 1px solid #ddd; color: var(--color-primary); } #searchRes ul+h4 { margin-top: 0.8em; } #searchRes h4.resTitleAlt { display: flex; justify-content: space-between; align-items: center; } #searchRes h4.resTitleAlt .dlAmnt { text-decoration: none!important; color: #000; font-size: 0.7em; font-weight: 500; margin-left: 1.2em; } #searchRes h4.resTitleAlt .dlAmnt .glyphicon { vertical-align: top; } #sideResCol { flex-grow: 1; } .sortTopWrp { font-size: 14px; } .sortTopWrp .dlAmnt { display: none; } .sortTopWrp .kuSortingOpt { display: flex; justify-content: space-between; } .sortTopWrp .kuSortingOpt .sortLft, .sortTopWrp .kuSortingOpt .sortRgt, .sortTopWrp .kuSortingOpt .sortBy, .sortTopWrp .kuSortingOpt .kuPerPage { display: flex; align-items: center; } .sortTopWrp select { height: 2.34em; padding-top: 0.4em; padding-bottom: 4em; } .dropdown-toggle:after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; margin-left: 10px; } .sortTopWrp .sortBy label, .sortTopWrp .sortRgt label { padding-right: 0.4em; margin: 0; } .topPagination { padding-left: 0.4em; } #searchResCont ul { margin-top: 20px; } #searchResCont ul li { display: block; width: 100%; padding: 0; vertical-align: top; text-align: center; margin: 0; margin-left: 0 !important; margin-bottom: 20px; font-style: normal; position: relative; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 20px 20px; background: #fff; box-shadow: 0 3.09954px 23.2466px rgb(0 0 0/15%); border-radius: 3.09954px; max-height: 210px; cursor: pointer; border: 1px solid transparent; text-align: left; } #searchResCont ul li:hover { border: 1px solid var(--color-primary); } #searchResCont ul li .name { text-decoration: none; font-weight: 700; word-break: break-word; color: var(--color-body); font-size: 16px; } #searchResCont ul li .kuNameMem { display: flex; justify-content: space-between; align-items: center; } #searchResCont ul li .price { font-size: 18px; margin-top: 0; position: relative; font-weight: 500; color: var(--color-price); display: block; } #searchResCont ul li .kuRgtWrp { display: flex; align-items: center; font-size: 10px; } #searchResCont ul li .kuRgtWrp .rate { margin-left: 15px; margin-right: 15px; font-size: 1.4em; font-weight: 500; } #searchResCont ul li .kuRgtWrp .rateWrp { padding: 0.48em 1px 0.48em 1em!important; } #searchResCont ul li.spotWrp { border: none!important; background: none!important; box-shadow: none!important; height: auto; padding: 0; max-height: none; cursor: default; } #searchResCont ul li .spot { display: flex; justify-content: space-between; } #searchRes h4.spotTitle { margin-bottom: 10px;} #searchResCont ul li .spotItm { width: calc(25% - 7.5px);} #searchResCont ul li .spotItm .tmbWrp { background: #f7f7f7; padding-top: 80%; position: relative; display: block; width: 100%; } #searchResCont ul li .spotItm .tmbWrp .tmb { position: absolute; display: flex; justify-content: center; align-items: center; left: 25%; width: 50%; height: 80%; top: 10%; } #searchResCont ul li .spotItm .tmbWrp img { max-height: 100%; max-width: 100%; } #searchResCont ul li .spotItm .title { margin-bottom: 0;} #searchResCont ul li .spotItm .title a { color: var(--color-body); display: block; } #searchResCont ul li .spotItmFull { display: flex; width: 100%; padding-top: 10px; font-size: 10px; } #searchResCont ul li .spotItmFull .tmbWrp { width: 35%; max-width: 20em; display: block; position: relative; margin-right: 20px; } #searchResCont ul li .spotItmFull .tmbWrp .tmb { display: block; /*padding-top: 151%; */ } #searchResCont ul li .spotItmFull .tmbWrp img { /* position: absolute; left: 0; top: 0; height: 100%!important; */ width: 100%; object-fit: cover; box-shadow: 0 3.09954px 23.2466px rgba(0,0,0,0.15); } #searchResCont ul li .spotItmFull a { color: var(--color-body); } #searchResCont ul li .spotItmFull .title { font-size: 2.5em; font-weight: 700; margin: 0; } #searchResCont ul li .spotItmFull .title a { text-decoration: none!important; } #searchResCont ul li .spotItmFull .auth { font-size: 1.7em; font-weight: 500; padding: 1rem 0 2rem 0;} #searchResCont ul li .spotItmFull .auth a { text-decoration: underline; } #searchResCont ul li .spotItmFull .btm { display: flex; } #searchResCont ul li .spotItmFull .btm .lft { padding-right: 3rem; } #searchResCont ul li .spotItmFull .buy { font-size: 1.4em; padding-bottom: 1rem; letter-spacing: 0.05em; font-weight: 500; } #searchResCont ul li .spotItmFull .buyBtn { padding-bottom: 2rem; } #searchResCont ul li .spotItmFull .buyBtn .btnA { font-size: 1.7em!important; } #searchResCont ul li .spotItmFull .pages, #searchResCont ul li .spotItmFull .rate, #searchResCont ul li .spotItmFull .rateCnt, #searchResCont ul li .spotItmFull .reco, #searchResCont ul li .spotItmFull .recoVal { font-size: 1.4em; font-weight: 500; } #searchResCont ul li .spotItmFull .lft .rate { line-height: 1.4em; padding: 0.2em 0; } #searchResCont ul li .spotItmFull .lft .rate .glyphicon { color: #ffd600; vertical-align: top; font-size: 1.4em; } #searchResCont ul li .spotItmFull .recoVal { padding-top: 0.4em; } #searchResCont ul li .spotItmFull .recoVal label { line-height: 1.4em; } #searchResCont ul li .spotItmFull .recoVal input { width: 1.4em; height: 1.4em; vertical-align: top; margin-top: 0; } #searchResCont ul li .spotItmFull .rgt .rate { padding-top: 2rem; } #searchResCont ul li .rateWrp { font-size: 1.2em; background: #f2f2f2; border: solid 1px #000; border-radius: 8px; padding: 0.4em 1px 0.4em 1em; display: flex; align-items: center; } #searchResCont ul li .rateWrp .txt { white-space: nowrap; } #searchResCont ul li .rateWrp select { border: 0!important; outline: 0!important; box-shadow: none!important; font-size: 1em!important; text-align: center; line-height: 1.5em; height: 1.5em; padding-top: 0.04em!important; padding-bottom: 0!important; font-weight: 500; background-position: calc(100% - 0.9em) center !important; padding-left: 0.2em!important; } #searchResCont ul li .kuNameMem .title { padding-right: 0.6em; } .pagingBtm { display: flex; justify-content: space-between; font-size: 14px; } @media screen and (max-width: 1240px) { #searchResCont ul li .spotItm .title { font-size: 1.1vw; } #searchResCont ul li .spotItmFull .title { font-size: 2.3em; } } @media screen and (max-width: 1080px) { #searchResCont ul li .spotItm { width: calc(33.33% - 6.66px); } #searchResCont ul li .spotItm:nth-child(3) { display: none; } #searchResCont ul li .spotItm .title { font-size: 1.29vw; } #searchResCont ul li .spotItmFull { font-size: 8px; } #searchResCont ul li .kuNameMemRate { flex-direction: column; align-items: flex-start; } #searchResCont ul li .kuRgtWrp { margin: 10px 0 0 0; } #searchResCont ul li .kuRgtWrp .rate { margin: 0 15px 0 0; } } @media screen and (max-width: 920px) { #searchResCont ul li .spot { flex-wrap: wrap; margin-bottom: -20px; } #searchResCont ul li .spotItm { width: calc(50% - 0.5rem); margin-bottom: 2rem; } #searchResCont ul li .spotItm:nth-child(3) { display: block; } #searchResCont ul li .spotItm .title { font-size: 1.52vw; } #searchResCont ul li .spotItmFull { font-size: 0.86vw; margin-bottom: 20px; } } @media screen and (max-width: 768px) { #searchRes .searchResCtr { flex-direction: column; } #searchRes #sideCatsCol { min-width: 100%; max-width: 100%; padding-right: 0; padding-bottom: 20px; } #searchRes #sideCatsCol li { padding: 0 0px; } #searchRes h4.resTitleAlt .dlAmnt { display: none; } .sortTopWrp { display: flex; justify-content: space-between; align-items: center; } .sortTopWrp .dlAmnt { display: block; font-weight: 700; font-size: 1em; } .sortTopWrp .dlAmnt .glyphicon { top: auto; } .sortTopWrp .kuSortingOpt { justify-content: flex-end; } .sortTopWrp .kuSortingOpt .sortRgt { display: none; } .sortTopWrp select { width: 8em; } #searchResCont ul li .spotItm .title { font-size: 14px; } #searchResCont ul li .spotItmFull { font-size: 1.36vw; } #searchResCont ul li .spotItmFull .tmbWrp { width: 33%; max-width: 22em; } } @media screen and (max-width: 540px) { #searchRes h4 { font-size: 18px; } #searchResCont ul li .spotItm .title { font-size: 2.8vw; } } @media screen and (max-width: 520px) { #searchResCont ul li .kuNameMem { align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; padding-right: 0; } #searchResCont ul li .kuNameMem .name { margin-bottom: 0.6em; display: block; width: 100%; } #searchResCont ul li .kuRgtWrp { margin: 0 0 0 0; } } @media screen and (max-width: 389px) { .sortTopWrp .dlAmnt span { display: none; } } @media screen and (max-width: 364px) { #searchResCont ul li .kuRgtWrp { font-size: 9.5px; } } /* //// //// Cart Page //// --------------------------------------------------------------*/ #cartCont { padding: 6rem 0; display: flex; justify-content: space-between; } #cartItmsCol { flex-grow: 1; margin-right: 4rem; } #cartSumCol { width: 320px; } #cartCont .title { font-size: 24px; line-height: 1.1em; margin: 0; padding-bottom: 0.5em; border-bottom: solid 1px rgba(0,0,0,0.25); } #cartCont .itm { padding: 20px 0; border-bottom: solid 1px rgba(0,0,0,0.25); color: #000; } #cartCont .itm .itmTxt { display: flex; justify-content: space-between; flex-grow: 1; } #cartCont .itm .itmDesc { display: flex; align-items: center; } #cartCont .itm .itmTitle, #cartCont .itm .col2 p { display: block; font-weight: 600; font-size: 17px; line-height: 1.1em; padding-bottom: 0.2em; } #cartCont .itm .itmTmb { width: 82px; margin-right: 20px; } #cartCont .itm .itmTxt { font-size: 15px; line-height: 1.4em; } #cartCont .itm .itmTxt .col1 { padding-right: 2rem; } #cartCont .itm .itmTxt .col1 p, #cartCont .itm .itmTxt .col1 p a { color: rgba(0,0,0,0.5); font-weight: 600; line-height: 1.6; } #cartCont .itm .itmTxt .col1 p a .glyphicon { top: -1px; } #cartSumCol .sumRows { padding: 14px 0; color: #000; } #cartSumCol p { display: flex; justify-content: space-between; font-size: 17px; padding: 4px 0; font-weight: 500; } #cartSumCol p.total { border-top: solid 1px rgba(0,0,0,0.25); padding: 18px 0; color: #000; } @media screen and (max-width: 980px) { #cartCont { flex-direction: column; } #cartItmsCol { padding-bottom: 4rem; margin-right: 0; } #cartSumCol { width: 100%; } } @media screen and (max-width: 479px) { #cartCont .title { font-size: 20px; } #cartCont .itm .itmTitle, #cartCont .itm .col2 p, #cartSumCol p { font-size: 14px; } #cartCont .itm .itmTxt { font-size: 13px; } } /* //// //// Cart3 Page (checkout) //// --------------------------------------------------------------*/ #cartContWrp { padding-right: 0; padding-left: 0; } #cartCont3 { padding: 6rem 0; display: flex; justify-content: space-between; } #cartCont3 .title { font-size: 24px; line-height: 1.1em; margin: 0; padding-bottom: 0.5em; } #cartCont3 .titleSm { display: none; } #cartFormCol { padding-right: 6rem; width: 100%; } #cartFormCol .btnWrp, #cartFormCol .cards { display: none; } #cartSumCol3 { min-width: 440px; width: 440px; } #cartSumCol3 p { float: none; } #cartSumCol3 #orderTotals { margin-bottom: 0; } #cartSumCol3 .btnWrp { padding-bottom: 0.8em; } #cartContWrp p.tos { text-align: center; display: block; margin: 0 auto; max-width: 28em; font-size: 13.9px; padding-bottom: 14px; padding-top: 0; float: none; } #cartContWrp p.tos * { padding: 0!important; } #cartContWrp p.tos a { color: #222; } #cartContWrp p.tos a:hover { text-decoration: underline; } #cartContWrp p.tos2 { text-align: left; max-width: 100%; font-size: 12.4px; font-size: 12.6px; letter-spacing: -0.012em; } #cartContWrp #cartFormCol p.tos { display: none; padding-bottom: 12px; } @media screen and (max-width: 1120px) { #cartFormCol { padding-right: 4rem; } } @media screen and (max-width: 1020px) { #cartCont3 { flex-direction: column-reverse; } #cartCont3 .title { text-align: center; } #cartFormCol { padding-right: 0; } #cartFormCol .btnWrp { display: block; } #cartFormCol .cards { display: flex; } #cartSumCol3 { padding-bottom: 12px; width: 100%; min-width: 100%; } #cartCont3 .title, #cartSumCol3 .btnWrp, #cartSumCol3 .cards { display: none; } #cartSumCol3 .titleSm { display: block; } #cartContWrp #cartSumCol3 p.tos { display: none; } #cartContWrp #cartFormCol p.tos { display: block; } } @media screen and (max-width: 479px) { #cartCont .title { font-size: 20px; } } @media screen and (max-width: 420px) { #cartContWrp p.tos { font-size: 3.3vw; } } @media screen and (max-width: 400px) { #cartSumCol3 .titleSm { font-size: 6.1vw; } } /* //// //// Confirmation //// --------------------------------------------------------------*/ #confCont { padding: 16rem 0; font-size: 17px; } #confCont .title { font-size: 42px; font-weight: 700; margin: 0 0 4rem 0; } @media screen and (max-width: 768px) { #confCont .title { font-size: 34px; } } @media screen and (max-width: 576px) { #confCont .title { font-size: 5.9vw; } } @media screen and (max-width: 500px) { #confCont { font-size: 3.4vw; } } /* //// //// Product //// --------------------------------------------------------------*/ #prodCont { display: flex; justify-content: center; padding: 4rem 0; } #prodTmbCol { width: 486px; } #prodDecCol { padding-left: 4rem; } #prodDecCol .prodTitle { font-size: 20px; line-height: 1.1em; margin: 0 0 25px 0; font-weight: 700; } #prodDecCol .ln0 { font-size: 13px; color: var(--color-primary); font-weight: 500; padding-bottom: 0.8em; } #prodDecCol .ln1 { font-size: 15px; text-transform: uppercase; font-weight: 500; letter-spacing: 0.07em; padding-bottom: 0.5em; } #prodDecCol .ln1 .ico { width: 1.4em; } #prodDecCol .prodFeatList { font-size: 14px; font-weight: 400; padding-left: 1.4em; padding-bottom: 25px; } #prodDecCol .prodFeatList li { padding-top: 0.35em; } #prodDecCol .prodFeatList .ico { width: 1.4em; color: var(--color-primary); margin-right: 0.2em; } #prodDecCol .btnPrice { display: flex; justify-content: flex-start; align-items: center; } #prodDecCol .btnWrp { width: 267px; padding-right: 4rem; } #prodDecCol .prodPrice { font-size: 22px; font-weight: 500; color: var(--color-price); } @media screen and (max-width: 640px) { #prodCont { flex-direction: column; margin: 0 auto; max-width: 480px; } #prodTmbCol { width: 100%; max-width: 486px; margin: 0 auto 4rem auto; } #prodDecCol { display: flex; flex-direction: column; padding-left: 0; } #prodDecCol .prodTitle { order: 1; } #prodDecCol .ln0 { order: 3; } #prodDecCol .ln1 { order: 4; } #prodDecCol .prodFeatList { order: 5; } #prodDecCol .btnPrice { order: 2; padding-bottom: 25px; align-items: flex-start; flex-direction: column-reverse; } #prodDecCol .btnWrp { width: 100%; padding-right: 0; } #prodDecCol .prodPrice { padding-bottom: 10px; } } /* //// //// Login //// --------------------------------------------------------------*/ #loginCont { background: rgba(255,255,255,0.68); border-radius: 1.2rem; padding: 3rem 2rem 2rem 2rem; } #loginCont .formSubtitle { color: rgba(0,0,0,0.7); font-size: 15px; font-weight: 400; line-height: 1.43em; margin-bottom: 2rem; text-align: center; } #loginCont .ret { font-size: 13px; line-height: 1.2em; width: 100%; display: block; padding: 15px 0 0 0; text-align: center; clear: both; } #loginCont .ret a { color:var(--color-primary); } #loginCont .ret a:hover { text-decoration: underline;} @media screen and (max-width: 480px) { #loginCont .formSubtitle { font-size: 14px; } } @media screen and (max-width: 370px) { #loginCont .title { font-size: 22px; } #loginCont .formSubtitle { font-size: 12.5px; } } /* //// //// Library //// --------------------------------------------------------------*/ #searchResCont .libRow { display: flex; align-items: center; } #searchResCont a:hover { text-decoration: none!important; } #searchResCont .libRow .btnA { width: 8em; min-width: 8em; margin-right: 2rem; } #searchResCont .libRow .title { color: #000; font-size: 20px; font-weight: 700; line-height: 1.1em; } @media screen and (max-width: 767px) { #searchResCont .libRow .title { font-size: 16px; } } @media (max-width: 572px) { #searchResCont .libRow .btnA { font-size: 16px!important; } #searchResCont .libRow .title { font-size: 13px; } } @media (max-width: 520px) { #searchResCont .libRow { flex-direction: column-reverse; align-items: flex-start; } #searchResCont .libRow .title { font-size: 16px; padding-bottom: 10px; } } @media (max-width: 420px) { #searchResCont .libRow .title { font-size: 3.8vw; } #searchResCont .libRow .btnA { font-size: 3.8vw!important; } } /* //// //// Privacy / Tos //// --------------------------------------------------------------*/ #innerCont { padding: 6rem 0; } /* //// //// Members Product //// --------------------------------------------------------------*/ #prodContWrp .memProdWrp { display: flex; width: 100%; } #prodContWrp .memProdWrp .tmbWrp { width: 33%; max-width: 285px; display: block; position: relative; margin-right: 2rem; flex-grow: 1; } #prodContWrp .memProdWrp .tmbWrp img { width: 100%; box-shadow: 0 3.09954px 23.2466px rgba(0,0,0,0.15); } #prodContWrp .memProdWrp .dtls { flex-shrink: 1; max-width: 67%; } #prodContWrp .memProdWrp .dtls .title { font-size: 22px; font-weight: 700; margin: 0; } #prodContWrp .memProdWrp .dtls .auth { font-size: 14px; font-weight: 500; padding: 0.4rem 0 0.4rem 0; } #prodContWrp .memProdWrp .dtls .auth a { color: #000; } #prodContWrp .memProdWrp .dtls .rate { font-size: 14px; font-weight: 500; line-height: 1.4em; display: flex; padding-bottom: 1rem;} #prodContWrp .memProdWrp .dtls .rateStars { display: flex; padding: 0 0.4em; } #prodContWrp .memProdWrp .dtls .rateStars li { display: inline-block; margin-right: -0.2em } #prodContWrp .memProdWrp .dtls .rateStars li img { width: 1.4em; display: inline-block; vertical-align: top; } #prodContWrp .memProdWrp .dtls .btm { border-top: 1px solid #ddd; padding-top: 2rem; } #prodContWrp .memProdWrp .dtls .desc { font-size: 14px; padding-bottom: 2rem; } #prodContWrp .memProdWrp .descBtm { display: none; } #prodContWrp .memProdWrp .dtls .buyBtn { display: flex; align-items: center; font-size: 17px;} #prodContWrp .memProdWrp .dtls .buyBtn .btnA { margin-right: 0.8em; font-size: 1.2em!important; } #prodContWrp .memProdWrp .dtls .buyBtn .price { font-weight: 500; color: #B12704; } @media screen and (max-width: 767px) { #prodContWrp .memProdWrp { flex-wrap: wrap; align-items: center; } #prodContWrp .memProdWrp .tmbWrp { width: 40%; max-width: 300px; } #prodContWrp .memProdWrp .dtls { max-width: calc(60% - 2rem); } #prodContWrp .memProdWrp .dtls .desc { display: none; } #prodContWrp .memProdWrp .descBtm { display: block; min-width: 100%; width: 100%; font-size: 14px; font-weight: 500; line-height: 1.4em; padding-top: 2rem; } } @media (max-width: 572px) { #prodContWrp .memProdWrp .tmbWrp { width: 30%; } #prodContWrp .memProdWrp .dtls { max-width: calc(70% - 2rem); } #prodContWrp .memProdWrp .dtls .title { font-size: 16px; } #prodContWrp .memProdWrp .dtls .auth { font-size: 12px; } #prodContWrp .memProdWrp .dtls .rate { font-size: 12px; } #prodContWrp .memProdWrp .dtls .buyBtn { font-size: 14px; } #prodContWrp .memProdWrp .descBtm { font-size: 12px; } } @media (max-width: 365px) { #prodContWrp .memProdWrp .dtls .title { font-size: 14.5px; } #prodContWrp .memProdWrp .dtls .buyBtn { font-size: 13px; } }