.productsNew .wrap .cols:after, .productDetails .wrap .pagination:after, .sidebar nav:after, .sitewrap .signup.templateHome .templateMain .boxes:after, .sitewrap .signup .top .wrap:after, .sitewrap .signup .content .wrap section .cols .terms .checkBox:after, .sitewrap .signup .content .wrap section .cols .col:after, .sitewrap .split-choice .wrap .halves:after, .sitewrap .split-choice .wrap:after, .sitewrap .panels .bottom .controlButtons:after, .sitewrap .panels .bottom .panel-holder .panel .wrap .versions:after, .sitewrap .panels .bottom .panel-holder .panel .wrap .options:after, .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity:after, .sitewrap .panels .bottom .panel-holder .panel .wrap .cols:after, .sitewrap .panels .bottom .panel-holder .panel .wrap .otherOptions:after, .sitewrap .panels .bottom .panel-holder .panel .wrap:after, .sitewrap .panels .review ul:after, .sitewrap .panels .review:after, .sitewrap .cart.orderHistory .items .wrap .pagination:after, .sitewrap .cart .total .wrap .promoCode:after, .sitewrap .cart .total .wrap .col:after, .sitewrap .cart .items .wrap .line-items > div > li:after, .sitewrap .cart .items .wrap:after, .sitewrap .cart .checkout .wrap .hold .process .step.hideInputs .expanding .cols .col:after, .sitewrap .cart .checkout .wrap .hold .process .step .toggle:after, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .deliveryOptions:after, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .cols.onMobile:after, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .wide-small:after, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .expiry:after, .sitewrap .cart .checkout .wrap .hold .overview ul li:after, .sitewrap .cart .quickAddPanel .wrap .steps:after, .sitewrap .cart .quickAddPanel .wrap .buttons:after, .sitewrap .cart .basketOverview .wrap .info h4:after, .sitewrap .progressBar .wrap .half ul:after, .pagination:after { content: ''; display: block; clear: both; } .productDetails .wrap .cols .col .content .startOrder, .backModal .wrap button, .backModal .wrap a, .welcomePopup .wrap button, .welcomePopup .wrap a, .prog, .sidebar nav.updatedSideNav ul li ul, .sidebar nav.updatedSideNav ul li a, .sidebar nav a, .selectEl.uploadEl button span, .buttonEl.uploadEl button span, .selectEl button, .buttonEl button, .selectEl button span:nth-child(2), .buttonEl button span:nth-child(2), .selectEl.outline, .buttonEl.outline, .forgot, .thanks .wrap h3, .sitewrap header[role="banner"] .reveal, .sitewrap .signup.contact.labelsRoll .top .helpfulInfo button, .sitewrap .signup.contact .content .uploadEl, .sitewrap .signup.templateHome .templateMain .boxes .box a, .sitewrap .signup .top .wrap a, .sitewrap .signup .content .wrap section .input input, .sitewrap .signup .content .wrap section .input textarea, .sitewrap .signup .content .wrap section .input select, .sitewrap .signup .content .wrap section .textarea input, .sitewrap .signup .content .wrap section .textarea textarea, .sitewrap .signup .content .wrap section .textarea select, .sitewrap .signup .content .wrap section .select input, .sitewrap .signup .content .wrap section .select textarea, .sitewrap .signup .content .wrap section .select select, .sitewrap .signup .content .wrap section .cols .col .sign-up, .sitewrap .split-choice .wrap .rollsIntro span, .sitewrap .split-choice .wrap .intro > a, .sitewrap .split-choice .wrap .half, .sitewrap .split-choice .wrap .half .text .link, .sitewrap .panels .top, .sitewrap .panels .top .panel-holder .panel .wrap button, .sitewrap .panels .bottom, .sitewrap .panels .bottom .controlButtons .guidelinesDownload, .sitewrap .panels .bottom .panel-holder .panel .wrap .textarea textarea, .sitewrap .panels .bottom .panel-holder .panel .wrap .submitButton, .sitewrap .panels .bottom .panel-holder .panel .wrap .versions p input, .sitewrap .panels .bottom .panel-holder .panel .wrap .options p input, .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity p input, .sitewrap .panels .bottom .panel-holder .panel .wrap .lolaHelp, .sitewrap .panels .bottom .panel-holder .panel .wrap .option, .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall, .sitewrap .panels .bottom .panel-holder .panel .wrap .input input, .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption, .sitewrap .panels .bottom .panel-holder .panel .wrap .addToBag, .sitewrap .panels .bottom .panel-holder .panel .wrap .otherOptions a, .sitewrap .panels .bottom .panel-holder .panel .wrap .textInput, .sitewrap .panels .bottom .panel-holder .panel .wrap .textInput input, .sitewrap .cart.orderHistory form, .sitewrap .cart.orderHistory form .input, .sitewrap .cart.orderHistory form .input input, .sitewrap .cart.orderHistory .total select, .sitewrap .cart .total .wrap .promoCode input, .sitewrap .cart .total .wrap .promoCode button, .sitewrap .cart .total .wrap .col a, .sitewrap .cart .items .wrap .line-items > div > li .info .input, .sitewrap .cart .checkout .wrap .hold .process .step .toggle, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .selectElement, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input input, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input label, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .findMap, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .continue, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .continue span, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .paypal, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .expiry h2, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .info span, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .info input, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .toggleSwitch, .sitewrap .cart .checkout .wrap .hold .overview h2, .sitewrap .cart .checkout .wrap .hold .overview .edit, .sitewrap .cart .quickAddPanel .wrap .input, .sitewrap .cart .quickAddPanel .wrap .input input, .sitewrap .cart .quickAddPanel .wrap .steps .step .selecter button, .sitewrap .cart .basketOverview .wrap .quickAdd .quickAddButton, .sitewrap .cart .basketOverview .wrap .info .checkout, .sitewrap .cart .basketOverview .wrap .info .checkout span:first-of-type, .sitewrap .progressBar, .sitewrap .progressButton, .sitewrap .resetButton, .quickModal .panel, .quickModal .panel button, .searchSection.contentSection .hold article .startOrder, .searchSection .pageContent.supportMain .topics, .pagination nav a, .newsletter.homeNewsletter .wrap form input, .newsletter form, .newsletter form .input, .newsletter form .input input { box-sizing: border-box; -moz-box-sizing: border-box; } .backModal:before, .welcomePopup:before, .sidebar button, .sidebar nav.updatedSideNav ul li ul .close, .sitewrap header[role="banner"] .cart, .sitewrap .signup .content .wrap section .select:after, .sitewrap .signup .content .wrap section .cols .col .sign-up:before, .sitewrap .panels .top .panel-holder .panel .modal .wrapper .logo, .sitewrap .panels .top .panel-holder .panel .modal .modalSlider .swiper-menu button, .sitewrap .panels .bottom .panel-holder .panel.help .wrap:after, .sitewrap .panels .bottom .panel-holder .panel .wrap .textarea:after, .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption:before, .sitewrap .panels .bottom .panel-holder .panel .wrap .lolaHelp:before, .sitewrap .panels .bottom .panel-holder .panel .wrap .option.circle:before, .sitewrap .panels .bottom .panel-holder .panel .wrap .option.rectangle:before, .sitewrap .panels .bottom .panel-holder .panel .wrap .option.custom:before, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .selectElement:after, .mainFoot .wrap .logo, .mainFoot .wrap .social a, .aboutSlider .swiper-menu button, .aboutSlider .swiper-menu .button { background-image: url("../sprites/sprite.svg"); background-size: 700px 700px; font-size: 20px; } .productsNew .wrap h2, .productsNew .wrap .cols .col h3, .productDetails .wrap .cols .col .content h3, .productDetails .wrap .cols .col .content p, .productDetails .wrap .cols .col .content .startOrder, .blogList.blogArticle .wrap .cols .col .back, .blogList .wrap .cols .col .text, .additionalText .wrap p, .backModal .wrap p, .welcomePopup .wrap p, .backModal .wrap button, .backModal .wrap a, .welcomePopup .wrap button, .welcomePopup .wrap a, .msgBox, .prog, .selectEl button, .buttonEl button, .forgot, .sitewrap header[role="banner"] .cart p, .sitewrap header[role="banner"] .reveal, .sitewrap .signup.contact.labelsRoll .top .helpfulInfo button, .sitewrap .signup.templateHome .templateMain h3, .sitewrap .signup.templateHome .templateMain .boxes .box a, .sitewrap .signup.templateHome .templateMain .boxes .box p, .sitewrap .signup.checkoutOption .top .wrap span, .sitewrap .signup .top .wrap a, .sitewrap .signup .content .wrap section h2, .sitewrap .signup .content .wrap section h3, .sitewrap .signup .content .wrap section p, .sitewrap .signup .content .wrap section .input label, .sitewrap .signup .content .wrap section .textarea label, .sitewrap .signup .content .wrap section .select label, .sitewrap .signup .content .wrap section .input input, .sitewrap .signup .content .wrap section .input textarea, .sitewrap .signup .content .wrap section .input select, .sitewrap .signup .content .wrap section .textarea input, .sitewrap .signup .content .wrap section .textarea textarea, .sitewrap .signup .content .wrap section .textarea select, .sitewrap .signup .content .wrap section .select input, .sitewrap .signup .content .wrap section .select textarea, .sitewrap .signup .content .wrap section .select select, .sitewrap .signup .content .wrap section .cols .col .join, .sitewrap .signup .content .wrap section .cols .col .sign-up, .sitewrap .split-choice .wrap .rollsIntro p, .sitewrap .split-choice .wrap .rollsIntro span, .sitewrap .split-choice .wrap .intro p, .sitewrap .split-choice .wrap .intro > a, .sitewrap .split-choice .wrap .half, .sitewrap .panels .top .panel-holder .panel .wrap h3, .sitewrap .panels .top .panel-holder .panel .wrap p, .sitewrap .panels .top .panel-holder .panel .wrap button, .sitewrap .panels .top .panel-holder .panel .modal .wrapper, .sitewrap .panels .top .panel-holder .panel .modal .wrapper a, .sitewrap .panels .bottom .info, .sitewrap .panels .bottom .controlButtons .back, .sitewrap .panels .bottom .controlButtons .guidelinesDownload, .sitewrap .panels .bottom .controlButtons .continue, .sitewrap .panels .bottom .panel-holder .panel .artworkGuide button, .sitewrap .panels .bottom .panel-holder .panel .artworkGuide .artworkDetails .wrapper, .sitewrap .panels .bottom .panel-holder .panel.help .wrap .text h3, .sitewrap .panels .bottom .panel-holder .panel.help .wrap .text p, .sitewrap .panels .bottom .panel-holder .panel.help .helpNote, .sitewrap .panels .bottom .panel-holder .panel .wrap .textarea label, .sitewrap .panels .bottom .panel-holder .panel .wrap .textarea textarea, .sitewrap .panels .bottom .panel-holder .panel .wrap .submitButton, .sitewrap .panels .bottom .panel-holder .panel .wrap .versions p, .sitewrap .panels .bottom .panel-holder .panel .wrap .options p, .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity p label, .sitewrap .panels .bottom .panel-holder .panel .wrap .lolaHelp, .sitewrap .panels .bottom .panel-holder .panel .wrap .option, .sitewrap .panels .bottom .panel-holder .panel .wrap .cols .col, .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall, .sitewrap .panels .bottom .panel-holder .panel .wrap .input, .sitewrap .panels .bottom .panel-holder .panel .wrap .input span.versioncol em, .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption, .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption.open + .toggleOptionDrawer p.message, .sitewrap .panels .bottom .panel-holder .panel .wrap .addToBag p.small, .sitewrap .panels .bottom .panel-holder .panel .wrap .addToBag span, .sitewrap .panels .bottom .panel-holder .panel .wrap .otherOptions p, .sitewrap .panels .bottom .panel-holder .panel .wrap .textInput label, .sitewrap .panels .bottom .panel-holder .panel .wrap .textInput input, .sitewrap .panels .review h2, .sitewrap .panels .review ul li p, .sitewrap .panels .review .back, .sitewrap .panels .review .resetButton, .sitewrap .cart .noItems, .sitewrap .cart.orderHistory form h1, .sitewrap .cart.orderHistory form .input label, .sitewrap .cart.orderHistory form .input input, .sitewrap .cart.orderHistory form button, .sitewrap .cart.orderHistory .total select, .sitewrap .cart.orderHistory .items .wrap .pagination p, .sitewrap .cart.orderHistory .items .wrap .pagination button, .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .overview > li p, .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .info p, .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .info .add, .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .modal .contain .add, .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .modal .contain label, .sitewrap .cart .total .wrap .promoCode label, .sitewrap .cart .total .wrap .promoCode input, .sitewrap .cart .total .wrap .promoCode button, .sitewrap .cart .total .wrap .col a, .sitewrap .cart .total .wrap .col h2 span, .sitewrap .cart .items .wrap .line-items .order, .sitewrap .cart .items .wrap .line-items > div > li .overview > li p, .sitewrap .cart .items .wrap .line-items > div > li .info .input input, .sitewrap .cart .items .wrap .line-items > div > li .info .input label, .sitewrap .cart .items .wrap .line-items > div > li .info p, .sitewrap .cart .items .wrap .line-items > div > li .info .add, .sitewrap .cart .items .wrap .line-items > div > li .delete, .sitewrap .cart .checkout .wrap .hold .process .error, .sitewrap .cart .checkout .wrap .hold .process .step .toggle, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .collectionOption .hold p, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .deliveryOptions .input label, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .selectElement, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .selectElement select, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .title, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input ul li, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input label, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input.small input, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input.small label, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .findMap, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .continue span, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .expiry h2, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .info, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .toggleSwitch, .sitewrap .cart .checkout .wrap .hold .process .step .content, .sitewrap .cart .checkout .wrap .hold .overview h2, .sitewrap .cart .checkout .wrap .hold .overview .edit, .sitewrap .cart .checkout .wrap .hold .overview ul li, .sitewrap .cart .quickAddPanel .wrap .input label, .sitewrap .cart .quickAddPanel .wrap .input input, .sitewrap .cart .quickAddPanel .wrap .steps .step .selecter button, .sitewrap .cart .quickAddPanel .wrap .buttons button, .sitewrap .cart .basketOverview .wrap .quickAdd .quickAddButton, .sitewrap .cart .basketOverview .wrap .info .promo, .sitewrap .cart .basketOverview .wrap .info .promo .input input, .sitewrap .cart .basketOverview .wrap .info .promo button, .sitewrap .cart .basketOverview .wrap .info h4, .sitewrap .cart .basketOverview .wrap .info .checkout span:first-of-type, .sitewrap .progressBar .wrap .half h2, .sitewrap .progressBar .wrap .half ul li p, .sitewrap .progressBar .wrap .half .buttons button, .sitewrap .progressButton, .sitewrap .resetButton, .helpMenu .sitewrap .panels .bottom .back, .quickModal .panel .input label, .quickModal .panel button, .infoModal .wrapper, .infoModal .wrapper a, .infoModal .modalSlider .swiper-menu button, .mainFoot .wrap p, .aboutSlider .swiper-container .swiper-slide button, .aboutSlider .swiper-container .swiper-slide .button, .revealTopics .close, .topics, .searchSection.contentSection .hold .slider .swiper-menu button, .searchSection.contentSection .hold article .startOrder, .searchSection h3, .searchSection time, .searchSection .searchedCategory, .searchSection p, .searchSection li, .searchSection h4, .searchSection .pageContent ul li a, .searchSection .pageContent.pageIndiv .textBox .topic, .pagination, .newsletter.homeNewsletter .wrap h2, .newsletter form .input label, .newsletter form .input input, .newsletter form button, .captcha-error { font-family: "soleil"; } .sidebar nav.updatedSideNav ul li ul h3, .sidebar nav.updatedSideNav ul li a, .sidebar nav a, .thanks .wrap h2, .thanks .wrap h3, .sitewrap .signup.checkoutOption .top .wrap p, .sitewrap .panels .bottom .panel-holder .panel .artworkGuide .artworkDetails .wrapper h4, .sitewrap .panels .bottom .panel-holder .panel .artworkGuide .artworkDetails .wrapper strong, .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity p input, .sitewrap .panels .bottom .panel-holder .panel .wrap .lolaHelp em, .sitewrap .panels .bottom .panel-holder .panel .wrap .input input, .sitewrap .panels .bottom .panel-holder .panel .wrap .addToBag, .sitewrap .panels .bottom .panel-holder .panel .wrap .otherOptions a, .sitewrap .panels .review ul li p em, .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .overview > li p em, .sitewrap .cart .total .wrap .col h2, .sitewrap .cart .items .wrap .message, .sitewrap .cart .items .wrap .line-items .order span, .sitewrap .cart .items .wrap .line-items > div > li h2, .sitewrap .cart .items .wrap .line-items > div > li .overview > li p em, .sitewrap .cart .checkout .wrap .hold .overview h2 span, .sitewrap .cart .quickAddPanel .wrap .steps .step h2, .sitewrap .cart .basketOverview .wrap .info .checkout, .sitewrap .progressBar .wrap .half ul li p em, .sitewrap .progressBar .wrap .half .total h2, .quickModal .panel .input input, .mainFoot .wrap nav a, .searchSection .pageContent.pageIndiv .textBox h4, .searchSection .pageContent.pageIndiv .textBox h5 { font-family: "lexia"; } .productDetails .wrap header h2, .productDetails .wrap .cols .col .content h2, .blogList .wrap header h2, .blogList .wrap .cols .col h3, .blogList .wrap .cols .col .text h3, .backModal .wrap h2, .welcomePopup .wrap h2, .sitewrap .signup.contact .top .wrap h2, .sitewrap .split-choice .wrap .half .text h2, .sitewrap .panels .top .panel-holder .panel .wrap h2, .sitewrap .panels .top .panel-holder .panel .modal .wrapper h2, .sitewrap .panels .bottom .panel-holder .panel .artworkGuide .artworkDetails .wrapper h2, .sitewrap .panels .bottom .panel-holder .panel .wrap .input span.versioncol .versionoutput, .sitewrap .panels .bottom .panel-holder .panel .wrap .input.outline input, .sitewrap .panels .bottom .panel-holder .panel .wrap .addToBag p.total, .sitewrap .cart header h2, .sitewrap .cart .checkout .wrap .hold .process .placeOrder, .quickModal .panel h2, .infoModal .wrapper h2, .searchSection.contentSection .hold article h1, .searchSection.contentSection .hold article h2, .searchSection .pageContent.results h2, .searchSection .pageContent.results h3, .searchSection .pageContent.pageIndiv .textBox h3, .newsletter.searchForm h2, .newsletter.searchForm .searchResult h2 { font-family: "lexia-advertising"; } .placeholder { pointer-events: none; -webkit-transition: 0.3s opacity linear; -ms-transition: 0.3s opacity linear; transition: 0.3s opacity linear; position: absolute; } .placeholder.faded { opacity: 0.5; } .placeholder.hide { display: none; } .video { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; width: 100%; display: block; } .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } input[name="uploadfile"] { z-index: 26777270 !important; height: auto !important; } #tawkchat-container[style] { bottom: 21px !important; } a, button { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; text-decoration: none; } select { font-size: 1rem; } .hide { display: none !important; } .video { width: 90%; margin: 0 auto; } .desktop { display: none; } .newHeader { margin-bottom: 0 !important; } .productsNew { padding: 36px 0; } .productsNew .wrap { margin: 0 30px; } .productsNew .wrap h2 { font-weight: 600; font-size: 1rem; } .productsNew .wrap .cols { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -10px; } .productsNew .wrap .cols .col { width: -moz-calc(50% - 10px); width: -o-calc(50% - 10px); width: -webkit-calc(50% - 10px); width: calc(50% - 10px); float: left; margin-bottom: 20px; margin-right: 10px; } .productsNew .wrap .cols .col h3 { color: #89d3dc; font-weight: 600; font-size: 0.875rem; } .productsNew .wrap .cols .col figure { background-size: cover; background-position: center center; border-radius: 8px; padding-top: 90%; } .productDetails { margin: 30px 0; position: relative; top: -77px; } .productDetails .wrap { margin: 0 26px; } .productDetails .wrap header { position: relative; } .productDetails .wrap header h2 { font-size: 1.75rem; color: white; padding: 0; margin: 0; } .productDetails .wrap header figure { width: 90px; position: absolute; top: -10px; left: 150px; } .productDetails .wrap .pagination a { display: block; width: 58px; padding: 5px 0; border: 1px solid #24525e; font-size: 0.75rem; text-align: center; border-radius: 17px; text-transform: uppercase; color: #24525e; float: left; } .productDetails .wrap .pagination a + a { float: right; } .productDetails .wrap .cols { margin-top: 50px; } .productDetails .wrap .cols .col .content { color: #103342; } .productDetails .wrap .cols .col .content h2 { font-size: 1.75rem; } .productDetails .wrap .cols .col .content figure { margin: 10px 0; } .productDetails .wrap .cols .col .content figure img { border-radius: 6px; } .productDetails .wrap .cols .col .content h3 { font-size: 1.25rem; line-height: 1.3; padding-right: 40px; } .productDetails .wrap .cols .col .content p { font-size: 1rem; line-height: 1.5; padding-right: 40px; } .productDetails .wrap .cols .col .content .startOrder { margin-top: 35px; background-color: #eb666b; width: 132px; height: 34px; display: block; border-radius: 17px; color: white; font-size: 1rem; text-transform: uppercase; text-align: center; text-decoration: none; font-weight: 700; padding-top: 9px; } .blogList { position: relative; top: -60px; } .blogList.blogArticle .wrap .cols .col .back { display: block; width: 58px; padding: 5px 0; border: 1px solid #24525e; font-size: 0.75rem; text-align: center; border-radius: 17px; text-transform: uppercase; color: #24525e; margin-top: 30px; } .blogList.blogArticle .wrap .cols .col figure { margin: 20px 0; } .blogList.blogArticle .wrap .cols .col .text h3 { padding-bottom: 17px; border-bottom: 1px solid #d3d2d2; } .blogList.blogArticle .wrap .cols .col .text h4 { color: #103342; font-size: 1.125rem; font-weight: 600; line-height: 1.3; padding-top: 17px; } .blogList.blogArticle .wrap .cols .col .text p { font-size: 1rem; font-weight: 400; } .blogList .wrap { margin: 0 30px; } .blogList .wrap header { position: relative; } .blogList .wrap header h2 { font-size: 1.75rem; color: white; } .blogList .wrap header figure { width: 90px; position: absolute; top: 4px; left: 250px; } .blogList .wrap .cols { margin-top: 50px; } .blogList .wrap .cols .col article + article { margin-top: 80px; } .blogList .wrap .cols .col h3 { font-size: 1.5rem; color: #103342; padding-bottom: 18px; } .blogList .wrap .cols .col .text h3 { font-size: 1.5rem; color: #103342; } .blogList .wrap .cols .col .text p { color: #4c6671; font-size: 1.125rem; line-height: 1.4; font-weight: 600; } .blogList .wrap .cols .col .text h5 { font-size: 0.75rem; color: #ababab; text-transform: uppercase; } .showBag header[role="banner"] h1, .showBag header[role="banner"] .cart { pointer-events: all; } .showBag header[role="banner"] li a { pointer-events: all; } .additionalText { position: relative; z-index: 100; margin-top: 100px; } .additionalText .wrap { margin: 0 30px; } .additionalText .wrap i { background-image: url("../images/banana.svg"); background-repeat: no-repeat; width: 74px; height: 70px; margin: 0 auto 26px auto; display: block; } .additionalText .wrap p { color: white; font-size: 0.875rem; line-height: 1.4; text-align: center; } .shoutout { margin-left: auto; margin-top: 188px; position: relative; z-index: 10000; overflow: hidden; } .shoutout i { background-image: url("../images/side-monkey.svg"); width: 87px; height: 98px; display: block; background-repeat: no-repeat; position: absolute; top: 0; z-index: 1; right: -35px; } .shoutout .box { margin-top: 50px; } .shoutout a { width: 100%; height: 100%; } .shoutout a figure { margin-left: auto; margin-right: 60px; width: 206px; position: relative; height: 134px; } /* .goBack { position: absolute; top: 0; text-indent: -9999px; left: 0; width: 100%; height: 100px; } */ .show .backModal { display: block; } .backModal, .welcomePopup { background-color: #fcd100; top: 0; left: 0; width: 100%; z-index: 10000000; position: fixed; height: 100%; display: none; } .backModal.welcomePopup, .welcomePopup.welcomePopup { background-color: rgba(0, 0, 0, 0.5); display: block; } .backModal.welcomePopup .wrap, .welcomePopup.welcomePopup .wrap { background-color: #fcd100; padding: 55px 25px 40px 25px; border-radius: 0px 0px 13px 13px; } .backModal:before, .welcomePopup:before { content: ''; background-position: -550px -450px; width: 114px; height: 102px; position: absolute; top: -1px; right: 25px; } .backModal .wrap, .welcomePopup .wrap { text-align: center; margin: 0 25px; padding-top: 90px; } .backModal .wrap h2, .welcomePopup .wrap h2 { font-size: 1.75rem; color: #103342; padding: 0 0 32px 0; } .backModal .wrap p, .welcomePopup .wrap p { font-size: 1rem; color: #103342; line-height: 1.1875; font-weight: 600; padding: 0; padding-bottom: 30px; } .backModal .wrap button, .backModal .wrap a, .welcomePopup .wrap button, .welcomePopup .wrap a { font-size: 1rem; font-weight: 700; width: 198px; height: 34px; display: inline-block; border-radius: 26px; text-transform: uppercase; } .backModal .wrap button, .welcomePopup .wrap button { background-color: #103342; color: white; } .backModal .wrap a, .welcomePopup .wrap a { border: 2px solid #103342; color: #103342; padding-top: 8px; margin-top: 12px; } .uploadArtwork .sitewrap .panels .bottom .controlButtons .continue { display: none; } .uploadArtwork .sitewrap .panels .bottom .controlButtons .guidelinesDownload { display: block !important; } .showBag .sitewrap .panels .bottom { height: auto; } .showBag.uploadArtwork .sitewrap .panels .bottom .controlButtons .guidelinesDownload { display: none !important; } .showBag.hideProgress .sitewrap .panels .review { display: none !important; } .showBag .sitewrap .panels .bottom .panel-holder .panel.artwork .wrap { margin-top: 0; } .showBag .sitewrap .panels .bottom .panel-holder .panel { padding-top: 16px; } .showBag .sitewrap .panels .bottom .panel-holder .panel .wrap .otherOptions { display: block !important; } .showBag .sitewrap .panels .bottom .back { display: none !important; } .showBag .sitewrap .panels .bottom .panel-holder .panel .wrap figure.inBag { display: block !important; } .showBag .emailLater, .showBag .lolaHelp { display: none !important; } .showBag .addToBag.hide { display: block !important; } .lessFooter + footer { margin-top: 0 !important; } .errors .sitewrap .cart .checkout .wrap .hold .process .placeOrder[disabled] { background-color: #89d3dc; } .errors .sitewrap .cart .checkout .wrap .hold .process .step .toggle { background-color: #fcd100; } .errors .sitewrap .cart .checkout .wrap .hold .process .step .toggle em, .errors .sitewrap .cart .checkout .wrap .hold .process .step .toggle span { color: #103342; } .errors .sitewrap .cart .checkout .wrap .hold .process .step .expanding { height: 100%; margin-top: 20px; } .errors .sitewrap .cart .checkout .wrap .hold .process .step .expanding .continue, .errors .sitewrap .cart .checkout .wrap .hold .process .step .expanding .info { display: none; } .pinkHead, .yellowHead { padding-top: 152px; } .pinkHead header[role="banner"], .yellowHead header[role="banner"] { height: 140px; } .pinkHead .newsletter, .yellowHead .newsletter { margin-top: 0; } .pinkHead header[role="banner"] { background-color: #eb666b; } .yellowHead header[role="banner"] { background-color: #fcd100; } .yellowHead .searchSection .pageContent .topics { color: black; } .yellowHead .searchSection .pageContent .revealTopics { background-color: #fcd100; } .yellowHead .searchSection .pageContent .revealTopics .close { color: black; border: 1px solid black; } .yellowHead .searchSection .pageContent .revealTopics ul li a { color: black; } .thanksPage { padding-top: 64px; } .thanksPage header[role="banner"] { height: 64px; } .lessFooter { margin-top: 0; } .greyFooter { /* &.noFootMargin { .mainFoot { margin-top: 3px; } } */ } .greyFooter .mainFoot { margin-top: 20px; padding-top: 48px; background-color: #cfd6d9; } .msgWrap { background-color: white; border-radius: 24px; height: 38px; width: 99%; position: absolute; top: 0; left: 0; display: none; } .msgWrap.load:before { content: ''; position: absolute; top: 0; left: 2px; width: 20px; height: 34px; background-color: #fcd100; border-radius: 28px; display: block; max-width: calc(100% - 4px); -webkit-transition-timing-function: linear; -webkit-transition-duration: 500ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: linear; -moz-transition-duration: 500ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: linear; -o-transition-duration: 500ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: linear; -ms-transition-duration: 500ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: linear; transition-duration: 500ms; transition-property: all; transition-delay: 0; -webkit-animation: 3s ease 0s forwards 1 faderight; animation: 3s ease 0s forwards 1 faderight; } @-webkit-keyframes faderight { from { width: 20px; } to { width: 98%; } } @keyframes faderight { from { width: 20px; } to { width: 98%; } } .msgWrap.added .msgBox { color: #103342; } .msgBox { font-size: 1rem; color: #103342; font-weight: 600; position: relative; padding: 11px 0 0 18px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .prog { width: 100%; font-size: 1rem; font-weight: 600; height: 38px; background-color: white; border-radius: 24px; position: absolute; z-index: 10000; top: 0; left: 0; padding-left: 16px; padding-top: 11px; color: #103342; } .prog:before { content: ''; border-radius: 19px; width: 20px; height: 38px; background-color: #fcd100; position: absolute; z-index: -1; top: 0; left: 0; -webkit-transition-timing-function: linear; -webkit-transition-duration: 500ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: linear; -moz-transition-duration: 500ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: linear; -o-transition-duration: 500ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: linear; -ms-transition-duration: 500ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: linear; transition-duration: 500ms; transition-property: all; transition-delay: 0; -webkit-animation: 3s ease 0s forwards 1 faderight; animation: 3s ease 0s forwards 1 faderight; } @-webkit-keyframes faderight { from { width: 20px; } to { width: 100%; } } @keyframes faderight { from { width: 20px; } to { width: 100%; } } body { /* background-image: url('../images/artwork/homepage-mobile.png'); width: 320px; margin: 0 auto; background-position: top center; background-repeat: no-repeat; position: relative; */ } body.blue { background-color: #89d3dc; } body.red { background-color: #f39c9f; } body.home:before { content: ''; display: block; position: fixed; top: 0; left: 0; width: 50%; height: 100%; z-index: -1; background-color: #eb666b; } body.home:after { content: ''; display: block; position: fixed; top: 0; right: 0; width: 50%; height: 100%; z-index: 1; background-color: #51becc; } body.noTransition .sitewrap .panels .top .panel-holder, body.noTransition .sitewrap .panels .bottom .panel-holder { -webkit-transition-timing-function: ease; -webkit-transition-duration: 0; -webkit-transition-property: none; -webkit-transition-delay: 0; -moz-transition-timing-function: ease; -moz-transition-duration: 0; -moz-transition-property: none; -moz-transition-delay: 0; -o-transition-timing-function: ease; -o-transition-duration: 0; -o-transition-property: none; -o-transition-delay: 0; -ms-transition-timing-function: ease; -ms-transition-duration: 0; -ms-transition-property: none; -ms-transition-delay: 0; transition-timing-function: ease; transition-duration: 0; transition-property: none; transition-delay: 0; } .grecaptcha-badge { right: auto !important; left: 0; } .sidebar { position: fixed; top: 0; left: -100%; width: 100%; height: 100%; z-index: 1000000; background-color: rgba(16, 51, 66, 0.98); color: white; -webkit-transition-timing-function: ease; -webkit-transition-duration: 500ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: ease; -moz-transition-duration: 500ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: ease; -o-transition-duration: 500ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: ease; -ms-transition-duration: 500ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: ease; transition-duration: 500ms; transition-property: all; transition-delay: 0; } .sidebar button { margin: 20px 0 60px 30px; background-position: -20px -560px; width: 19px; height: 19px; } .sidebar .logo { background-image: url("../images/sidebar-logo.png"); width: 68px; background-repeat: no-repeat; height: 40px; text-indent: -9999px; position: absolute; left: 0; right: 0; margin: 0 auto; top: 10px; padding: 0; } .sidebar nav { padding: 0 15px; float: left; } .sidebar nav.updatedSideNav ul li + li { margin-top: 10px; } .sidebar nav.updatedSideNav ul li.opensubmenu ul { right: 0; } .sidebar nav.updatedSideNav ul li ul { position: fixed; top: 70px; right: 100%; background-color: rgba(16, 51, 66, 0.98); height: 100%; width: 100%; padding-left: 22px; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; transition-delay: 0; overflow: auto; padding-bottom: 40px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 40px; overflow: auto; } .sidebar nav.updatedSideNav ul li ul .close { text-indent: -9999px; background-position: -490px -20px; width: 11px; height: 19px; margin: 0 0 20px 10px; } .sidebar nav.updatedSideNav ul li ul h3 { color: #fd5f00; font-weight: 800; padding: 30px 10px; text-transform: uppercase; } .sidebar nav.updatedSideNav ul li ul h3:first-of-type { padding-top: 10px; } .sidebar nav.updatedSideNav ul li a { display: block; height: 22px; border-radius: 11px; border: 1px solid transparent; font-size: 1rem; font-weight: 900; line-height: 1; padding: 4px 10px 0 10px; text-decoration: none; } .sidebar nav.updatedSideNav ul li a.current { border-color: white; } .sidebar nav a { display: block; height: 22px; border-radius: 11px; border: 1px solid transparent; font-size: 1rem; font-weight: 900; line-height: 1; padding: 4px 10px 0 10px; text-decoration: none; } .sidebar nav a + a { margin-top: 14px; } .sidebar nav a.current { border-color: white; } .sidebar nav.profile { margin: 0; padding: 0; } .sidebar nav.profile aside { margin-top: 58px; } .selectEl, .buttonEl { height: 38px; background-color: white; border-radius: 19px; position: relative; } .selectEl.uploadEl button.added, .buttonEl.uploadEl button.added { background-color: #fcd100; border-radius: 19px; border: 2px solid white; } .selectEl.uploadEl button span, .buttonEl.uploadEl button span { display: inline-block; float: right; width: auto; height: 22px; font-size: 0.6875rem; text-transform: uppercase; background-color: #fcd100; color: #103342; font-weight: 700; padding: 2px 10px 2px 10px; border-radius: 11px; text-align: center; } .selectEl select, .selectEl input, .buttonEl select, .buttonEl input { position: absolute; top: 0; left: 0; height: 38px; width: 100%; -webkit-appearance: none; -moz-appearance: none; opacity: 0; } .selectEl button, .buttonEl button { width: 100%; height: 38px; font-size: 1rem; pointer-events: none; text-align: left; padding: 0 10px 0 18px; color: #103342; font-weight: 600; } .selectEl button.navy span, .buttonEl button.navy span { background-color: #103342; color: white; } .selectEl button span:nth-child(2), .buttonEl button span:nth-child(2) { display: inline-block; float: right; width: 74px; height: 22px; font-size: 0.6875rem; text-transform: uppercase; background-color: #103342; color: white; font-weight: 700; padding: 2px 10px 2px 10px; border-radius: 11px; text-align: center; } .selectEl.outline, .buttonEl.outline { border: 2px solid white; background-color: transparent; } .selectEl.outline button, .buttonEl.outline button { padding: 0 8px 0 16px; height: 34px; } .selectEl + .selectEl, .selectEl + .buttonEl, .buttonEl + .selectEl, .buttonEl + .buttonEl { margin: 14px 0 0 0; } .forgot { display: inline-block; width: auto; padding: 4px 6px; font-size: 0.75rem; text-transform: uppercase; font-weight: 500; color: #70858e; text-decoration: none; border: 1px solid rgba(16, 51, 66, 0.25); border-radius: 17px; margin-top: 35px; } .forgotpassword { padding-bottom: 30px; } .thanks { padding-top: 36px; } .thanks .wrap { width: 276px; margin: 0 auto; } .thanks .wrap h2 { color: #103342; font-weight: 900; text-transform: uppercase; text-align: right; font-size: 0.625rem; margin-bottom: 12px; } .thanks .wrap h3 { background-color: #51becc; width: 100%; height: 38px; font-weight: 900; text-transform: uppercase; color: white; border-radius: 28px; text-align: center; line-height: 1.4; position: relative; } .thanks .wrap h3:before { content: ''; background-image: url("../images/monkey-waving.svg"); background-repeat: no-repeat; width: 76px; height: 44px; display: block; position: absolute; top: -44px; left: 10px; } .sitewrap { -webkit-transition-timing-function: ease; -webkit-transition-duration: 500ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: ease; -moz-transition-duration: 500ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: ease; -o-transition-duration: 500ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: ease; -ms-transition-duration: 500ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: ease; transition-duration: 500ms; transition-property: all; transition-delay: 0; } .sitewrap header[role="banner"] { position: absolute; top: 0; left: 0; width: 100%; padding: 12px 0 0 0; } .sitewrap header[role="banner"] button { position: absolute; top: 25px; left: 30px; } .sitewrap header[role="banner"] button span { display: block; width: 24px; height: 2px; background-color: white; pointer-events: none; } .sitewrap header[role="banner"] button span + span { margin: 4px 0 0 0; } .sitewrap header[role="banner"] h1 { display: block; width: 79px; height: 44px; background-image: url("../images/mobile-logo.png"); text-indent: -10000px; overflow: hidden; margin: 0 auto; padding: 0; position: relative; z-index: 100; } .sitewrap header[role="banner"] h1 a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .sitewrap header[role="banner"] .cart { display: block; position: absolute; top: 18px; right: 20px; left: auto; width: 30px; height: 23px; background-position: -1em -7em; z-index: 10000; } .sitewrap header[role="banner"] .cart p { font-size: 0.625rem; color: white; width: 13px; text-align: center; font-weight: 700; line-height: 1; position: absolute; left: 5px; top: 0; pointer-events: none; } .sitewrap header[role="banner"] .cart p.multiple { color: #fcd100; } .sitewrap header[role="banner"] .reveal { background-color: rgba(255, 255, 255, 0.9); color: #103342; font-size: 1rem; width: 118px; height: auto; border-radius: 5px 0 5px 5px; padding: 19px 15px; margin: 50px 36px 0 auto; position: relative; z-index: 1000000; display: none; } .sitewrap header[role="banner"] .reveal.show { display: block; } .sitewrap header[role="banner"] .reveal:after { content: ''; background-image: url("../images/triangle.svg"); background-repeat: no-repeat; width: 24px; height: 18px; display: block; position: absolute; top: -16px; right: -2px; } .sitewrap header[role="banner"] .reveal a { text-decoration: none; display: block; text-align: left; color: #103342; } .sitewrap header[role="banner"] .reveal a + a { margin-top: 12px; } .sitewrap .signup.contact { margin-bottom: 0; } .sitewrap .signup.contact > span { display: none; } .sitewrap .signup.contact.labelsRoll { padding-bottom: 100px; } .sitewrap .signup.contact.labelsRoll .top { position: relative; top: 0; left: 0; margin-top: -47px; } .sitewrap .signup.contact.labelsRoll .top .wrap h2 { margin-bottom: 20px; padding-left: 15px; } .sitewrap .signup.contact.labelsRoll .top .helpfulInfo { padding: 12px 20px; margin-bottom: 36px; background-color: #e7ebec; position: relative; } .sitewrap .signup.contact.labelsRoll .top .helpfulInfo:before { content: ''; background-color: #e7ebec; width: 100vw; left: 50%; top: 0; position: absolute; display: block; height: 100%; margin-left: -50vw; z-index: -1; } .sitewrap .signup.contact.labelsRoll .top .helpfulInfo button { display: inline-block; height: 26px; width: 160px; font-size: 0.75rem; background-color: #fcd100; border: 2px solid white; border-radius: 14px; font-weight: 700; text-transform: uppercase; text-align: center; color: #103342; text-decoration: none; } .sitewrap .signup.contact.labelsRoll .content .wrap section .input.select:after { top: 46px; } .sitewrap .signup.contact.labelsRoll .content .wrap section .input label { position: static; opacity: 1 !important; display: block; margin-bottom: 10px; } .sitewrap .signup.contact.labelsRoll .content .wrap section .input span { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); margin-top: 12px; } .sitewrap .signup.contact .top { background-color: transparent; height: auto; position: absolute; top: 106px; left: 23px; } .sitewrap .signup.contact .top .wrap { padding: 0; } .sitewrap .signup.contact .top .wrap h2 { font-size: 1.75rem; color: #103342; padding: 0; } .sitewrap .signup.contact .top .wrap:after { display: none; } .sitewrap .signup.contact .content { margin-top: 40px; } .sitewrap .signup.contact .content .wrap { position: relative; } .sitewrap .signup.contact .content .wrap section .cols .col { position: relative; } .sitewrap .signup.contact .content .wrap section .cols .col .join { float: left; } .sitewrap .signup.contact .content .wrap section .cols .col .small { float: left; padding: 0; margin: 26px 0 0 20px; } .sitewrap .signup.contact .content form .input input, .sitewrap .signup.contact .content form .input textarea, .sitewrap .signup.contact .content form .input select { font-size: 1rem; color: #103342; font-weight: 600; } .sitewrap .signup.contact .content form .input ul li { list-style: none; position: absolute; top: 10px; right: 10px; } .sitewrap .signup.contact .content .contactUploadSection { position: relative; } .sitewrap .signup.contact .content .contactUploadSection .msgWrap { top: auto; bottom: 1px; left: 1px; } .sitewrap .signup.contact .content .contactUploadSection .msgWrap.load:before { top: 2px; } .sitewrap .signup.contact .content .uploadEl { height: 40px; border: 1px solid rgba(16, 51, 66, 0.25); border-radius: 19px; margin-top: 20px; } .sitewrap .signup.contact .content .uploadEl button { pointer-events: all !important; padding-left: 11px; } .sitewrap .signup.contact .content .uploadEl button span { padding: 2px 10px 2px 10px; } .sitewrap .signup.templateHome .templateMain { margin: 20px 25px 0 25px; } .sitewrap .signup.templateHome .templateMain h3 { font-weight: 500; font-size: 1.5625rem; line-height: 1.2; color: #103342; padding-bottom: 40px; } .sitewrap .signup.templateHome .templateMain .boxes .box { position: relative; } .sitewrap .signup.templateHome .templateMain .boxes .box + .box { margin-top: 40px; } .sitewrap .signup.templateHome .templateMain .boxes .box + .box a { background-color: #fcd100; } .sitewrap .signup.templateHome .templateMain .boxes .box + .box a:after { background-image: url("../images/illustrator-file.svg"); } .sitewrap .signup.templateHome .templateMain .boxes .box a { background-color: #eb666b; color: #103342; font-weight: 600; font-size: 1.375rem; line-height: 1.2; display: block; width: 100%; height: 110px; border-radius: 54px; padding: 32px 150px 0 20px; margin-bottom: 30px; position: relative; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; transition-delay: 0; } .sitewrap .signup.templateHome .templateMain .boxes .box a:after { content: ''; background-image: url("../images/pcl-template.svg"); width: 75px; height: 91px; display: block; position: absolute; bottom: 0; right: 44px; } .sitewrap .signup.templateHome .templateMain .boxes .box p { color: #103342; font-weight: 500; font-size: 1rem; line-height: 1.4; padding: 0 20px; } .sitewrap .signup.checkoutOption > span { display: none; } .sitewrap .signup.checkoutOption .top { height: 96px; } .sitewrap .signup.checkoutOption .top .wrap { margin: 0 30px; } .sitewrap .signup.checkoutOption .top .wrap:after { display: none; } .sitewrap .signup.checkoutOption .top .wrap span { display: block; font-weight: 700; margin: 7px 14px 0 14px; float: left; font-size: 0.75rem; } .sitewrap .signup.checkoutOption .top .wrap a { width: auto !important; padding: 6px 10px; } .sitewrap .signup.checkoutOption .top .wrap p { font-size: 0.8125rem; color: #58707b; font-weight: 900; float: left; width: 100%; padding: 14px 0 0 0; text-transform: uppercase; } .sitewrap .signup > span { display: block; height: 140px; background-color: #fcd100; } .sitewrap .signup .top { height: 60px; background-color: #e7ebec; position: relative; } .sitewrap .signup .top .wrap { margin: 0 10px; padding: 16px 0; position: relative; } .sitewrap .signup .top .wrap:after { content: ''; background-image: url("../images/side-monkey.svg"); background-repeat: no-repeat; width: 87px; height: 98px; display: block; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); position: absolute; top: -58px; left: 0; } .sitewrap .signup .top .wrap.createAccount:after { left: auto; right: 18px; } .sitewrap .signup .top .wrap a { display: block; float: left; padding: 7px 5px; height: 28px; border: 2px solid transparent; border-radius: 14px; text-decoration: none; font-weight: 900; font-size: 0.75rem; text-transform: uppercase; color: #58707b; width: 50%; text-align: center; } .sitewrap .signup .top .wrap a.active { background-color: #fcd100; border-color: white; color: #103342; } .sitewrap .signup .content .wrap { margin: 0 18px; } .sitewrap .signup .content .wrap section h2 { font-weight: 500; font-size: 1.5625rem; line-height: 1.2; color: #103342; padding: 35px 0 20px 13px; } .sitewrap .signup .content .wrap section h3 { font-weight: 500; color: #ef0f0f; padding-bottom: 20px; padding-left: 13px; line-height: 1.2; } .sitewrap .signup .content .wrap section p { font-size: 0.875rem; line-height: 1.3; color: #70858e; padding-bottom: 20px; } .sitewrap .signup .content .wrap section p.message { padding-left: 14px; } .sitewrap .signup .content .wrap section input[type=number]::-webkit-inner-spin-button, .sitewrap .signup .content .wrap section input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .sitewrap .signup .content .wrap section small { font-size: 0.75rem; } .sitewrap .signup .content .wrap section .select span { position: absolute; top: 50%; right: 40px; font-size: 0.75rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #103342; pointer-events: none; } .sitewrap .signup .content .wrap section .select:after { content: ''; display: block; width: 17px; height: 10px; background-position: -23em -11em; margin: 9px 0 0 0; position: absolute; right: 13px; top: 6px; pointer-events: none; } .sitewrap .signup .content .wrap section .input, .sitewrap .signup .content .wrap section .textarea, .sitewrap .signup .content .wrap section .select { position: relative; padding: 0; } .sitewrap .signup .content .wrap section .input ul li, .sitewrap .signup .content .wrap section .textarea ul li, .sitewrap .signup .content .wrap section .select ul li { list-style: none; position: absolute; top: 0; right: 10px; top: 10px; color: #eb666b; } .sitewrap .signup .content .wrap section .input.textarea textarea, .sitewrap .signup .content .wrap section .textarea.textarea textarea, .sitewrap .signup .content .wrap section .select.textarea textarea { padding-top: 7px; height: 215px; min-height: 215px; } .sitewrap .signup .content .wrap section .input label, .sitewrap .signup .content .wrap section .textarea label, .sitewrap .signup .content .wrap section .select label { position: absolute; top: 0; left: 0; font-weight: 600; font-size: 1rem; padding: 9px 0 0 13px; color: #103342; } .sitewrap .signup .content .wrap section .input input, .sitewrap .signup .content .wrap section .input textarea, .sitewrap .signup .content .wrap section .input select, .sitewrap .signup .content .wrap section .textarea input, .sitewrap .signup .content .wrap section .textarea textarea, .sitewrap .signup .content .wrap section .textarea select, .sitewrap .signup .content .wrap section .select input, .sitewrap .signup .content .wrap section .select textarea, .sitewrap .signup .content .wrap section .select select { display: block; width: 100%; height: 38px; border: 1px solid rgba(16, 51, 66, 0.25); border-radius: 19px; padding: 0 0 0 13px; font-size: 1rem; color: #103342; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .sitewrap .signup .content .wrap section .input + .input, .sitewrap .signup .content .wrap section .textarea + .input, .sitewrap .signup .content .wrap section .select + .input { margin: 20px 0 0 0; } .sitewrap .signup .content .wrap section .cols { margin: 0 0 20px 0; } .sitewrap .signup .content .wrap section .cols .terms { margin-top: 42px; margin-left: 14px; } .sitewrap .signup .content .wrap section .cols .terms p { padding-bottom: 0; color: #103342; } .sitewrap .signup .content .wrap section .cols .terms p + p { padding-top: 20px; } .sitewrap .signup .content .wrap section .cols .terms .checkBox { position: relative; width: 280px; color: #103342; } .sitewrap .signup .content .wrap section .cols .terms .checkBox span { width: 19px; border-radius: 50%; height: 19px; position: absolute; top: 3px; right: 26px; pointer-events: none; display: block; background: transparent; border: 2px solid #fcd100; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; transition-delay: 0; } .sitewrap .signup .content .wrap section .cols .terms .checkBox .reg-checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; position: absolute; border: 0; right: 26px; } .sitewrap .signup .content .wrap section .cols .terms .checkBox .reg-checkbox:checked + span:after { content: ''; width: 9px; height: 9px; background-color: #103342; border-radius: 50%; display: block; position: absolute; top: 5px; left: 0; right: 0; margin: 0 auto; } .sitewrap .signup .content .wrap section .cols .col .join { font-size: 1rem; text-align: center; text-transform: uppercase; height: 34px; border-radius: 17px; background-color: #eb666b; color: white; margin: 25px 0 0 0; font-weight: 700; width: 90px; } .sitewrap .signup .content .wrap section .cols .col .sign-up { display: block; width: 198px; height: 56px; border-radius: 28px; background-color: #eb666b; color: white; padding: 19px 0 0 70px; text-decoration: none; text-transform: uppercase; position: relative; } .sitewrap .signup .content .wrap section .cols .col .sign-up:before { content: ''; display: block; width: 22px; height: 22px; position: absolute; top: 50%; left: 30px; margin: -11px 0 0 0; background-position: -30em -6em; } .sitewrap .signup .content .wrap section .cols .col .sign-up.twitter { background-color: #51becc; } .sitewrap .signup .content .wrap section .cols .col .sign-up.twitter:before { width: 25px; height: 21px; background-position: -30em -9em; } .sitewrap .signup .content .wrap section .cols .col + .col { margin: 20px 0 0 0; } .sitewrap .split-choice { margin-top: 56px; } .sitewrap .split-choice .stickEmUp { background-image: url("../images/stick-em-up.svg"); background-repeat: no-repeat; width: 190px; height: 93px; padding: 0; text-indent: -1000px; z-index: 1000000; position: relative; margin: 0 auto; font-size: 0; } .sitewrap .split-choice .wrap .rollsIntro { position: relative; z-index: 10000; margin-top: 95px; text-align: center; } .sitewrap .split-choice .wrap .rollsIntro figure { width: 105px; margin: 0 auto; padding-left: 24px; } .sitewrap .split-choice .wrap .rollsIntro p { padding: 24px 0 0 0; color: white; font-size: 1.125rem; text-align: center; line-height: 1.5; margin: 0 30px; } .sitewrap .split-choice .wrap .rollsIntro span { display: inline-block; height: 22px; width: 220px; margin: 16px auto 0 auto; font-size: 0.625rem; border: 2px solid white; border-radius: 11px; font-weight: 700; text-transform: uppercase; text-align: center; color: white; text-decoration: none; padding: 3px 0 0 0; } .sitewrap .split-choice .wrap .intro { position: relative; z-index: 10000; margin-top: 95px; text-align: center; } .sitewrap .split-choice .wrap .intro figure { width: 105px; margin: 0 auto; padding-left: 24px; } .sitewrap .split-choice .wrap .intro p { padding: 24px 0 0 0; color: white; font-size: 1.125rem; text-align: center; line-height: 1.5; margin: 0 30px; } .sitewrap .split-choice .wrap .intro > a { display: inline-block; height: 22px; width: 220px; margin: 16px auto 0 auto; font-size: 0.625rem; border: 2px solid white; border-radius: 11px; font-weight: 700; text-transform: uppercase; text-align: center; color: white; text-decoration: none; padding: 3px 0 0 0; } .sitewrap .split-choice .wrap .half { width: 50%; float: left; padding: 21px 25px 0 28px; color: #103342; font-size: 0.75rem; line-height: 1.4; position: relative; } .sitewrap .split-choice .wrap .half.blue { z-index: 10; } .sitewrap .split-choice .wrap .half a { display: block; text-decoration: none; outline: none; } .sitewrap .split-choice .wrap .half .text h2 { font-size: 1.5rem; line-height: 1.2; } .sitewrap .split-choice .wrap .half .text p { padding: 0; font-weight: 500; } .sitewrap .split-choice .wrap .half .text p + p { padding-top: 17px; } .sitewrap .split-choice .wrap .half .text .link { display: block; width: 94px; height: 22px; margin: 32px 0 0 0; font-size: 0.625rem; padding-top: 2px; border: 2px solid white; border-radius: 11px; font-weight: 700; text-transform: uppercase; text-align: center; color: white; text-decoration: none; padding: 2px 0 0 0; } .sitewrap .split-choice .wrap .half figure { margin-top: 12px; width: 120px; } .sitewrap .split-choice .wrap .half.red { color: white; } .sitewrap .split-choice .wrap .half + .half { padding: 21px 30px 0 22px; } .sitewrap .split-choice .wrap .half + .half figure { width: 100px; } .sitewrap .panels { z-index: 10000; } .sitewrap .panels.blue .bottom .panel-holder .panel .msgWrap { height: 34px; top: 2px; } .sitewrap .panels.blue .bottom .panel-holder .panel .msgWrap.added { background-color: #89d3dc; width: 99%; left: 0; right: 0; margin: 0 auto; } .sitewrap .panels.blue .bottom .panel-holder .panel .wrap .cols .col p { color: #4c6671; } .sitewrap .panels .top { overflow: hidden; height: 200px; width: 100vw; padding: 73px 0 0 0; } .sitewrap .panels .top .panel-holder { white-space: nowrap; -webkit-transition-timing-function: ease; -webkit-transition-duration: 500ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: ease; -moz-transition-duration: 500ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: ease; -o-transition-duration: 500ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: ease; -ms-transition-duration: 500ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: ease; transition-duration: 500ms; transition-property: all; transition-delay: 0; font-size: 0; } .sitewrap .panels .top .panel-holder .panel { display: inline-block; width: 100vw; vertical-align: top; color: white; white-space: normal; } .sitewrap .panels .top .panel-holder .panel.showModal .modal { opacity: 1; pointer-events: all; } .sitewrap .panels .top .panel-holder .panel .wrap { margin: 0 30px 0 30px; } .sitewrap .panels .top .panel-holder .panel .wrap h3 { font-size: 0.75rem; font-weight: 700; padding: 0; text-transform: uppercase; } .sitewrap .panels .top .panel-holder .panel .wrap h2 { font-size: 1.75rem; padding: 0; line-height: 1; margin: 10px 0 10px 0; } .sitewrap .panels .top .panel-holder .panel .wrap p { font-size: 1rem; padding: 0; line-height: 1.1; margin: 10px 45px 0 0; margin-bottom: 10px; } .sitewrap .panels .top .panel-holder .panel .wrap button { font-size: 0.75rem; display: block; width: 95px; height: 20px; border: 1px solid #24525e; border-radius: 10px; text-transform: uppercase; color: #24525e; margin: 0 0 0 -10px; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; transition-delay: 0; position: relative; top: 9px; right: -4px; } .sitewrap .panels .top .panel-holder .panel .wrap button.fade { opacity: 0.3; } .sitewrap .panels .top .panel-holder .panel .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(16, 51, 66, 0.95); z-index: 1000000; padding: 4px 0; opacity: 0; pointer-events: none; overflow: auto; } .sitewrap .panels .top .panel-holder .panel .modal .wrapper { margin: 0 30px; color: #fee880; line-height: 1.75; margin-bottom: 50px; position: relative; padding-top: 10px; } .sitewrap .panels .top .panel-holder .panel .modal .wrapper .logo { display: block; width: 79px; height: 43px; background-position: -1em -1em; text-indent: -10000px; overflow: hidden; margin: 0 auto; padding: 0; position: relative; z-index: 100; margin-top: -2px; } .sitewrap .panels .top .panel-holder .panel .modal .wrapper .close { display: block; height: 20px; width: 50px; border: 1px solid white; border-radius: 10px; font-size: 0.75rem; text-align: center; text-transform: uppercase; color: white; position: relative; z-index: 10000; margin-left: auto; margin-right: -5px; position: absolute; top: 56px; right: 0; } .sitewrap .panels .top .panel-holder .panel .modal .wrapper p { font-weight: 500; color: #fee880; font-size: 1rem; padding-bottom: 0; margin-right: 20px; } .sitewrap .panels .top .panel-holder .panel .modal .wrapper a { display: block; text-decoration: none; border-radius: 20px; border: 1px solid white; color: white; text-transform: uppercase; font-weight: 500; font-size: 0.75rem; height: 20px; width: 87px; text-align: center; margin-top: 60px; opacity: 0.5; } .sitewrap .panels .top .panel-holder .panel .modal .wrapper h2 { font-weight: 900; font-size: 1.75rem; line-height: 1; color: white; margin: 0; padding-bottom: 10px; padding-top: 16px; } .sitewrap .panels .top .panel-holder .panel .modal .modalSlider .content { margin-top: 48px; } .sitewrap .panels .top .panel-holder .panel .modal .modalSlider .content h2 { margin-bottom: 45px; padding: 0; } .sitewrap .panels .top .panel-holder .panel .modal .modalSlider .content p { line-height: 1.5; } .sitewrap .panels .top .panel-holder .panel .modal .modalSlider .swiper-menu { position: absolute; top: 0; left: 12px; width: 38px; } .sitewrap .panels .top .panel-holder .panel .modal .modalSlider .swiper-menu button { background-position: -590px -20px; background-color: transparent; width: 21px; height: 21px; display: block; border: 0; border-radius: 0; position: absolute; } .sitewrap .panels .top .panel-holder .panel .modal .modalSlider .swiper-menu button.next { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sitewrap .panels .bottom { overflow: hidden; height: 380px; width: 100vw; position: relative; } .sitewrap .panels .bottom .info { display: block; width: 50px; height: 20px; border: 1px solid #24525e; color: #24525e; border-radius: 10px; font-weight: 500; font-size: 0.75rem; text-transform: uppercase; z-index: 1000; margin: 2px 0 0 10px; float: left; } .sitewrap .panels .bottom .controlButtons { margin: 20px 20px 14px 20px; } .sitewrap .panels .bottom .controlButtons .back { display: block; width: 50px; height: 20px; border: 1px solid #24525e; color: #24525e; border-radius: 10px; font-weight: 500; font-size: 0.75rem; text-transform: uppercase; left: 20px; z-index: 1000; float: left; opacity: 0.8; } .sitewrap .panels .bottom .controlButtons .guidelinesDownload { font-size: 0.75rem; font-weight: 500; border: 1px solid #103342; width: 150px; height: 21px; display: block; border-radius: 13px; position: absolute; top: 19px; right: 20px; z-index: 1; text-align: center; text-transform: uppercase; color: #103342; padding-top: 3px; } .sitewrap .panels .bottom .controlButtons .continue { border: 2px solid white; font-size: 0.75rem; font-weight: 500; line-height: 1; font-weight: 700; text-transform: uppercase; color: white; width: 84px; padding: 5px 0; border-radius: 13px; right: 20px; z-index: 1000; float: right; margin-top: -2px; } .sitewrap .panels .bottom .skip { display: none; } .sitewrap .panels .bottom .addCartBtn { display: none; } .sitewrap .panels .bottom .panel-holder { white-space: nowrap; -webkit-transition-timing-function: ease; -webkit-transition-duration: 500ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: ease; -moz-transition-duration: 500ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: ease; -o-transition-duration: 500ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: ease; -ms-transition-duration: 500ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: ease; transition-duration: 500ms; transition-property: all; transition-delay: 0; font-size: 0; } .sitewrap .panels .bottom .panel-holder .panel { display: inline-block; width: 100vw; font-size: 0; vertical-align: top; white-space: normal; position: relative; padding-top: 22px; } .sitewrap .panels .bottom .panel-holder .panel.error .option, .sitewrap .panels .bottom .panel-holder .panel.error .optionSmall { border: 2px solid #eb666b; } .sitewrap .panels .bottom .panel-holder .panel.error .wrap .input input { border: 2px solid #eb666b; } .sitewrap .panels .bottom .panel-holder .panel.error .wrap .selectEl { border: 2px solid #eb666b; } .sitewrap .panels .bottom .panel-holder .panel.lamination .wrap .toggleOption { margin: 0; } .sitewrap .panels .bottom .panel-holder .panel.shapePanel { padding-top: 0; } .sitewrap .panels .bottom .panel-holder .panel.hidePanel { display: none !important; } .sitewrap .panels .bottom .panel-holder .panel.artwork .wrap { margin-top: 20px; } .sitewrap .panels .bottom .panel-holder .panel .artworkGuide { margin-bottom: 20px; } .sitewrap .panels .bottom .panel-holder .panel .artworkGuide.show .artworkDetails { opacity: 1; pointer-events: all; } .sitewrap .panels .bottom .panel-holder .panel .artworkGuide button { font-size: 0.75rem; font-weight: 500; color: #67363c; border: 1px solid #67363c; border-radius: 28px; padding: 0 6px; position: absolute; top: -56px; right: 0; text-transform: uppercase; } .sitewrap .panels .bottom .panel-holder .panel .artworkGuide .artworkDetails { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #103342; z-index: 10000; padding: 20px 0; overflow: auto; opacity: 0; pointer-events: none; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; transition-delay: 0; } .sitewrap .panels .bottom .panel-holder .panel .artworkGuide .artworkDetails .wrapper { margin: 0 30px; line-height: 1.75; padding: 40px 0; } .sitewrap .panels .bottom .panel-holder .panel .artworkGuide .artworkDetails .wrapper button { height: 20px; border: 1px solid white !important; border-radius: 10px; font-size: 0.75rem; text-align: center; text-transform: uppercase; color: white !important; width: 54px !important; position: relative; z-index: 10000; margin-left: auto; top: 0; } .sitewrap .panels .bottom .panel-holder .panel .artworkGuide .artworkDetails .wrapper h4, .sitewrap .panels .bottom .panel-holder .panel .artworkGuide .artworkDetails .wrapper strong { color: white; font-size: 1.25rem; line-height: 1; } .sitewrap .panels .bottom .panel-holder .panel .artworkGuide .artworkDetails .wrapper h2 { font-size: 1.75rem; padding: 0; margin: 10px 0 0 0; line-height: 1.2; /* height: 52px; max-height: 52px; overflow: hidden; */ margin-bottom: 10px; color: white; } .sitewrap .panels .bottom .panel-holder .panel .artworkGuide .artworkDetails .wrapper p { font-size: 1rem; padding: 0; line-height: 1.1; margin: 10px 45px 0 0; margin-bottom: 10px; color: #fee880; } .sitewrap .panels .bottom .panel-holder .panel.help { margin-top: 58px; } .sitewrap .panels .bottom .panel-holder .panel.help .wrap { position: relative; } .sitewrap .panels .bottom .panel-holder .panel.help .wrap:after { content: ''; background-position: -420px -520px; width: 90px; height: 91px; display: block; position: absolute; top: -56px; left: 10px; } .sitewrap .panels .bottom .panel-holder .panel.help .wrap .text { padding: 50px 0 40px 0; float: left; margin-left: 18px; } .sitewrap .panels .bottom .panel-holder .panel.help .wrap .text h3 { font-weight: 700; font-size: 1rem; color: white; text-transform: uppercase; } .sitewrap .panels .bottom .panel-holder .panel.help .wrap .text p { color: #24525e; font-size: 1rem; line-height: 1.375; } .sitewrap .panels .bottom .panel-holder .panel.help .msgWrap { top: auto; bottom: 1px; left: 0; width: 100%; height: 40px; } .sitewrap .panels .bottom .panel-holder .panel.help .msgWrap.load:before { top: 2px; height: 36px; } .sitewrap .panels .bottom .panel-holder .panel.help .msgWrap.added { bottom: 2px; background-color: #89d3dc; width: 96%; left: 0; right: 0; margin: 0 auto; border: 2px solid white; } .sitewrap .panels .bottom .panel-holder .panel.help .buttonEl { background-color: transparent; border: 2px solid white; } .sitewrap .panels .bottom .panel-holder .panel.help .buttonEl span { background-color: #51becc; color: white; } .sitewrap .panels .bottom .panel-holder .panel.help .helpNote { width: 160px; font-size: 0.625rem; font-weight: 500; color: #24525e; text-transform: uppercase; float: left; } .sitewrap .panels .bottom .panel-holder .panel .wrap { max-width: 400px; margin: 0 20px; position: relative; } .sitewrap .panels .bottom .panel-holder .panel .wrap figure.inBag { right: -60px; top: 240px; width: 38%; height: 100%; position: absolute; display: none; } .sitewrap .panels .bottom .panel-holder .panel .wrap .textarea { margin: 0 0 20px 0; position: relative; z-index: 100; } .sitewrap .panels .bottom .panel-holder .panel .wrap .textarea:after { content: ''; background-position: -240px -460px; width: 14px; height: 14px; display: block; position: absolute; bottom: 6px; right: 8px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .textarea label { padding: 18px 0 0 20px; font-size: 1rem; line-height: 1.2; font-weight: 300; color: #103342; } .sitewrap .panels .bottom .panel-holder .panel .wrap .textarea textarea { display: block; width: 100%; color: #103342; font-weight: 300; min-height: 120px; border-radius: 15px; background-color: white; border: 0; font-size: 1rem; padding: 20px 40px 20px 30px; line-height: 1.25; resize: none; } .sitewrap .panels .bottom .panel-holder .panel .wrap .submitButton { width: 72px; height: 28px; border: 2px solid white; background-color: #103342; text-transform: uppercase; text-align: center; color: white; pointer-events: all; font-weight: 700; float: right; font-size: 0.75rem; border-radius: 14px; padding: 0; margin-right: 10px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .versions, .sitewrap .panels .bottom .panel-holder .panel .wrap .options { margin: 20px 0 0 0; } .sitewrap .panels .bottom .panel-holder .panel .wrap .versions p, .sitewrap .panels .bottom .panel-holder .panel .wrap .options p { display: inline-block; float: left; font-size: 0.625rem; line-height: 1.5; font-weight: 500; color: #24525e; } .sitewrap .panels .bottom .panel-holder .panel .wrap .versions p input, .sitewrap .panels .bottom .panel-holder .panel .wrap .options p input { display: inline-block; width: 14px; height: 14px; -webkit-appearance: none; -moz-appearance: none; background-color: transparent; border: 1px solid #24525e; border-radius: 10px; margin: -3px 0 0 0; } .sitewrap .panels .bottom .panel-holder .panel .wrap .versions p input.selected, .sitewrap .panels .bottom .panel-holder .panel .wrap .options p input.selected { background-color: #fcd100; -webkit-box-shadow: inset 0px 0px 0px 2px white; -ms-box-shadow: inset 0px 0px 0px 2px white; box-shadow: inset 0px 0px 0px 2px white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .versions p + p, .sitewrap .panels .bottom .panel-holder .panel .wrap .options p + p { margin: 0 0 0 10px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .versions .info { float: none; display: inline-block; } .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity p { width: 82px; float: left; position: relative; color: #103342; } .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity p:after { content: '='; display: inline-block; position: absolute; top: 18px; right: -17px; font-size: 1rem; font-weight: 600; } .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity p input { width: 82px; height: 38px; border-radius: 26px; border: 2px solid white; background-color: transparent; padding: 0px 10px 0 15px; font-size: 1.625rem; color: #103342; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-weight: 900; } .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity p input[type=number] { -moz-appearance: textfield; } .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity p input::-webkit-outer-spin-button, .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity p input::-webkit-inner-spin-button { -webkit-appearance: none; } .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity p label { display: block; font-weight: 600; padding: 8px 10px 0 18px; font-size: 1rem; } .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity p label span { display: block; font-size: 0.875rem; font-weight: 500; text-transform: uppercase; padding-top: 3px; color: #103342; } .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity p + p { width: 165px; margin: 0 0 0 24px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity p + p:after { display: none; } .sitewrap .panels .bottom .panel-holder .panel .wrap .labelsQuantity p + p input { width: 165px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .buttonEl { margin-bottom: 24px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .buttonEl button { pointer-events: all; } .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption { display: block; width: -moz-calc(50% - 8px); width: -o-calc(50% - 8px); width: -webkit-calc(50% - 8px); width: calc(50% - 8px); margin-bottom: 10px; height: 74px; border-radius: 37px; float: left; position: relative; } .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption:before { content: ''; display: block; position: absolute; top: 50%; left: 50%; } .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption.finalOption { background-color: transparent !important; } .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption.finalOption:hover { background-color: transparent; } .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption.circle:before { width: 54px; height: 54px; background-position: -1em -11em; margin: -27px 0 0 -27px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption.oval:before { width: 58px; height: 39px; background-position: -16em -4em; margin: -19px 0 0 -29px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption.semi-circle:before { width: 58px; height: 32px; background-position: -16em -6.5em; margin: -16px 0 0 -29px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption.rectangle:before { width: 54px; height: 33px; background-position: -20em -4em; margin: -17px 0 0 -27px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption.triangle:before { width: 54px; height: 47px; background-position: -20em -6.5em; margin: -24px 0 0 -27px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption.square:before { width: 48px; height: 48px; background-position: -5em -11em; margin: -24px 0 0 -24px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption:nth-of-type(even) { margin-left: 15px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .lolaHelp { display: block; width: -webkit-calc(100% + 4px); width: calc(100% + 4px); margin: 20px -2px; height: 74px; font-size: 0.9375rem; line-height: 4.6; text-align: left; padding: 0 0 0 100px; font-weight: 600; border: 2px solid white; border-radius: 37px; position: relative; line-height: 1; overflow: hidden; color: #103342; } .sitewrap .panels .bottom .panel-holder .panel .wrap .lolaHelp em { font-style: italic; font-weight: 800; } .sitewrap .panels .bottom .panel-holder .panel .wrap .lolaHelp:before { content: ''; display: block; width: 70px; height: 70px; background-position: -200px -100px; position: absolute; top: 20px; left: 14px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .option { display: block; width: -moz-calc(100vw - 40px); width: -o-calc(100vw - 40px); width: -webkit-calc(100vw - 40px); width: calc(100vw - 40px); max-width: 400px; margin-bottom: 6px; height: 74px; font-size: 1.0625rem; line-height: 2; text-align: left; padding: 0 0 0 100px; font-weight: 600; border-radius: 37px; background-color: #9fdbe3; position: relative; color: #103342; } .sitewrap .panels .bottom .panel-holder .panel .wrap .option.circle:before { content: ''; display: block; width: 54px; height: 54px; background-position: -1em -11em; position: absolute; top: 10px; left: 25px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .option.rectangle:before { content: ''; display: block; width: 48px; height: 48px; background-position: -5em -11em; position: absolute; top: 13px; left: 29px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .option.custom:before { content: ''; display: block; width: 57px; height: 57px; background-position: -1em -15em; position: absolute; top: 8px; left: 25px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .option.selected { background-color: #fcd100; } .sitewrap .panels .bottom .panel-holder .panel .wrap .cols .col { width: -moz-calc(50% - 8px); width: -o-calc(50% - 8px); width: -webkit-calc(50% - 8px); width: calc(50% - 8px); float: left; font-size: 0.75rem; line-height: 1.4; } .sitewrap .panels .bottom .panel-holder .panel .wrap .cols .col .optionSmall { float: none; padding-left: 0; text-align: center; } .sitewrap .panels .bottom .panel-holder .panel .wrap .cols .col .optionSmall + figure { margin-top: 20px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .cols .col p { margin: 0 10px 0 20px; color: #764a4f; font-weight: 500; line-height: 1.5; padding: 0; } .sitewrap .panels .bottom .panel-holder .panel .wrap .cols .col figure { height: 90px; margin: 10px 0 0 10px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .cols .col figure img { height: 100%; width: auto; } .sitewrap .panels .bottom .panel-holder .panel .wrap .cols .col:nth-of-type(even) { margin-left: 15px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .cols .col.full { width: 100% !important; margin-left: 0px !important; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall { display: block; width: -moz-calc(50% - 8px); width: -o-calc(50% - 8px); width: -webkit-calc(50% - 8px); width: calc(50% - 8px); height: 38px; border-radius: 19px; background-color: #9fdbe3; text-align: left; font-size: 0.7rem; font-weight: 600; padding: 0 0 0 20px; float: left; margin-bottom: 7px; color: #103342; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall.colouredOption { /* text-align: center; padding: 0; */ } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall.optionSmaller { width: 100%; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall:nth-child(even) { margin-left: 15px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="Red"] { background-color: #f23241; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="Red"].selected { background-color: #f23241; color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="Magenta"] { background-color: #ff0099; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="Magenta"].selected { background-color: #ff0099; color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="Orange"] { background-color: #fc7700; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="Orange"].selected { background-color: #fc7700; color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="Pink"] { background-color: #fc8bab; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="Pink"].selected { background-color: #fc8bab; color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="Yellow"] { background-color: #fcd100; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="Yellow"].selected { background-color: #fcd100; color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="Blue"] { background-color: #2bb2e4; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="Blue"].selected { background-color: #2bb2e4; color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="Cream"] { background-color: #efe6ce; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="Cream"].selected { background-color: #efe6ce; color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="White"] { background-color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"][data-value="White"].selected { background-color: white; color: white; border: 2px solid #2bb2e4 !important; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"].selected { border: 2px solid white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"].dayGlo[data-property="colour"][data-value="Yellow"] { background-color: #e4fd03; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"].dayGlo[data-property="colour"][data-value="Yellow"].selected { background-color: #e4fd03; color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"].dayGlo[data-property="colour"][data-value="Orange"] { background-color: #fd5f00; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"].dayGlo[data-property="colour"][data-value="Orange"].selected { background-color: #fd5f00; color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"].dayGlo[data-property="colour"][data-value="Green"] { background-color: #19de12; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"].dayGlo[data-property="colour"][data-value="Green"].selected { background-color: #19de12; color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"].dayGlo[data-property="colour"][data-value="Pink"] { background-color: #d526b5; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"].dayGlo[data-property="colour"][data-value="Pink"].selected { background-color: #d526b5; color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"].dayGlo[data-property="colour"][data-value="Satin Silver"] { background-color: #cfced3; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"].dayGlo[data-property="colour"][data-value="Satin Silver"].selected { background-color: #cfced3; color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"].dayGlo[data-property="colour"][data-value="Satin Gold"] { background-color: #fdbd01; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"].dayGlo[data-property="colour"][data-value="Satin Gold"].selected { background-color: #fdbd01; color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall[data-property="colour"].dayGlo[data-property="colour"].selected { border: 2px solid white; color: white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall.selected { background-color: #fcd100; } .sitewrap .panels .bottom .panel-holder .panel .wrap .input { font-size: 1rem; font-weight: 600; position: relative; color: #103342; padding: 0; /* &:before { content: ''; display: block; position: absolute; top: 4px; left: 0; width: 80px; height: 38px; border-radius: 19px; background-color: rgb(255, 255, 255); } */ } .sitewrap .panels .bottom .panel-holder .panel .wrap .input + .input { margin-top: 15px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .input span.versioncol { margin: 0; position: relative; font-size: 1.25rem; pointer-events: all; vertical-align: middle; margin-right: 5px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .input span.versioncol em { position: absolute; left: 14px; font-style: normal; font-size: 0.7rem; pointer-events: none; bottom: 9px; font-weight: 500; } .sitewrap .panels .bottom .panel-holder .panel .wrap .input span.versioncol input { font-size: 1.1rem; padding-bottom: 10px; text-align: left; padding-left: 14px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .input span.versioncol .versionoutput { font-size: 1.1rem; font-weight: 900; display: block; padding-left: 8px; height: 36px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .input span.versioncol .versionoutput + em { left: 8px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .input input { display: inline-block; width: 82px; height: 38px; border: 0; background-color: white; font-weight: 900; text-align: right; font-size: 1.3125rem; border-radius: 19px; -webkit-transform: translateY(-4px); color: #103342; padding-right: 39px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .input input[type=number] { -moz-appearance: textfield; text-align: right; padding-right: 34px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .input input::-webkit-outer-spin-button, .sitewrap .panels .bottom .panel-holder .panel .wrap .input input::-webkit-inner-spin-button { -webkit-appearance: none; } .sitewrap .panels .bottom .panel-holder .panel .wrap .input span { display: inline-block; position: relative; font-size: 0.625rem; pointer-events: none; font-weight: 700; margin: 0 25px 0 -30px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .input.outline { /* &:before { @extend %box-sizing; background-color: transparent; border: 2px solid rgb(255, 255, 255); } */ } .sitewrap .panels .bottom .panel-holder .panel .wrap .input.outline input { background-color: transparent; border: 2px solid white; font-size: 1.5625rem; padding: 0 16px 0 10px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption { position: relative; margin: 10px 0; padding: 3px 0 0 92px; font-size: 1rem; font-weight: 600; height: 38px; color: #103342; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption * { pointer-events: none; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption:before { content: ''; display: block; width: 82px; height: 38px; border-radius: 19px; background-color: #51becc; position: absolute; top: 0; left: 0; -webkit-transition-timing-function: ease; -webkit-transition-duration: 500ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: ease; -moz-transition-duration: 500ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: ease; -o-transition-duration: 500ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: ease; -ms-transition-duration: 500ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: ease; transition-duration: 500ms; transition-property: all; transition-delay: 0; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption span { margin-left: 7px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption span:nth-child(2) { display: none; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption:after { content: ''; display: block; width: 24px; height: 24px; border-radius: 50%; background-color: white; position: absolute; top: 7px; left: 7px; -webkit-transition-timing-function: ease; -webkit-transition-duration: 500ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: ease; -moz-transition-duration: 500ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: ease; -o-transition-duration: 500ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: ease; -ms-transition-duration: 500ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: ease; transition-duration: 500ms; transition-property: all; transition-delay: 0; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption.open:before { background-color: #fcd100; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption.open span { display: none; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption.open span:nth-child(2) { display: block; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption.open:after { left: 50px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption.open + .toggleOptionDrawer { display: block; /* p { font-size: 0.875rem; @extend %sol; font-weight: 500; color: rgb(255, 255, 255); float: left; padding-top: 22px; } */ } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption.open + .toggleOptionDrawer .optionSmall { margin-top: 8px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption.open + .toggleOptionDrawer p.message { color: #4c6671; font-size: 1rem; margin: 10px 12px 0 20px; float: left; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption.open + .toggleOptionDrawer.noInset { padding-top: 12px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption.open + .toggleOptionDrawer.noInset p { margin-left: 0; } .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOptionDrawer { display: none; } .sitewrap .panels .bottom .panel-holder .panel .wrap .addToBag { width: -webkit-calc(100% + 4px); width: calc(100% + 4px); border-radius: 37px; height: 38px; text-align: center; padding: 0 15px; margin: 18px -2px 0 -2px; background-color: #fcd100; position: relative; color: #103342; font-size: 1.125rem; text-transform: uppercase; font-weight: 900; border: 2px solid white; } .sitewrap .panels .bottom .panel-holder .panel .wrap .addToBag.reviewPrice { background-color: white; height: 74px; text-align: left; } .sitewrap .panels .bottom .panel-holder .panel .wrap .addToBag p.total { font-size: 1.5625rem; font-style: italic; color: #103342; padding-bottom: 2px; padding-top: 0; margin-top: 6px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .addToBag p.small { font-size: 0.6875rem; color: #70858e; padding: 0; text-transform: none; } .sitewrap .panels .bottom .panel-holder .panel .wrap .addToBag span { display: block; width: 84px; height: 22px; background-color: #103342; color: white; text-transform: uppercase; font-weight: 700; font-size: 0.6875rem; line-height: 2; border-radius: 11px; text-align: center; position: absolute; top: 20px; right: 20px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .otherOptions { text-align: center; display: none; margin-top: 20px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .otherOptions p { color: #103342; font-weight: 600; font-size: 1rem; } .sitewrap .panels .bottom .panel-holder .panel .wrap .otherOptions a { width: -moz-calc(50% - 8px); width: -o-calc(50% - 8px); width: -webkit-calc(50% - 8px); width: calc(50% - 8px); display: block; float: left; background-color: #103342; color: white; font-weight: 900; font-size: 1rem; text-align: center; height: 38px; border: 2px solid white; border-radius: 24px; padding-top: 10px; text-transform: uppercase; } .sitewrap .panels .bottom .panel-holder .panel .wrap .otherOptions a + a { margin-left: 15px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .outline + .textInput { margin-top: 10px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .textInput { width: -webkit-calc(100% + 4px); width: calc(100% + 4px); border: 2px solid white; height: 38px; border-radius: 19px; position: relative; margin: 20px -2px 0 -2px; } .sitewrap .panels .bottom .panel-holder .panel .wrap .textInput label { position: absolute; top: -1px; left: 0; padding: 0 15px; line-height: 2.25; font-weight: 600; font-size: 1rem; color: #103342; } .sitewrap .panels .bottom .panel-holder .panel .wrap .textInput input { font-weight: 600; width: 100%; height: 34px; padding: 0 15px; font-size: 1rem; background: transparent; border: 0; color: #103342; } .sitewrap .panels .bottom .panel-holder .panel.added .addToBag { display: block !important; opacity: 1; pointer-events: all; } .sitewrap .panels .bottom .panel-holder .panel.added .outline, .sitewrap .panels .bottom .panel-holder .panel.added .lolaHelp { display: none; } .sitewrap .panels .bottom .panel-holder .panel.active .wrap .option { -webkit-transform: translateX(0); } .sitewrap .panels .bottom .panel-holder .panel.active.error .wrap .addToBag span { background-color: #f9d1d3; } .sitewrap .panels .bottom .panel-holder .panel.active.error .wrap .textInput { border-color: #eb666b; background-color: white; } .sitewrap .panels .bottom .panel-holder .panel.active.error .wrap .textInput label { color: #eb666b; } .sitewrap .panels .review { display: none; margin: 0 30px 60px 30px; } .sitewrap .panels .review h2 { text-transform: uppercase; color: white; font-size: 0.75rem; line-height: 1; font-weight: 700; padding-bottom: 12px; } .sitewrap .panels .review ul { list-style: none; font-size: 1rem; line-height: 1.375rem; margin-bottom: 30px; } .sitewrap .panels .review ul li { width: 50%; float: left; color: #24525e; } .sitewrap .panels .review ul li.corners { white-space: nowrap; } .sitewrap .panels .review ul li p { padding: 0; } .sitewrap .panels .review ul li p em { font-weight: 900; display: inline-block; width: 15px; font-style: normal; } .sitewrap .panels .review .back { display: block; width: 50px; height: 20px; border: 1px solid #24525e; color: #24525e; border-radius: 10px; font-size: 0.75rem; text-transform: uppercase; z-index: 1000; float: left; margin: 20px 0 0 0; } .sitewrap .panels .review .resetButton { position: static; float: right; width: 65px; height: 20px; border: 1px solid #24525e; color: #24525e; text-transform: uppercase; font-size: 0.75rem; border-radius: 10px; display: block; margin: 0; } .sitewrap .panels.blue .top { background-color: #51becc; } .sitewrap .panels.blue .bottom { background-color: #89d3dc; } .sitewrap .panels.red .top { background-color: #eb666b; } .sitewrap .panels.red .top .panel-holder .panel .wrap .text p { color: white; } .sitewrap .panels.red .top .panel-holder .panel .wrap button { color: #67363c; border-color: #67363c; } .sitewrap .panels.red .bottom { background-color: #f39c9f; } .sitewrap .panels.red .bottom .panel-holder .panel .wrap .buttonEl.uploadEl button span { background-color: #103342; color: white; } .sitewrap .cart { margin-bottom: 100px; } .sitewrap .cart .noItems { color: #103342; } .sitewrap .cart .noItems p { padding: 46px 0 0 0; } .sitewrap .cart.orderHistory header h2 { color: #103342; } .sitewrap .cart.orderHistory header:before { display: none; } .sitewrap .cart.orderHistory form { background-color: #e7ebec; padding: 14px 0 18px 0; position: relative; } .sitewrap .cart.orderHistory form h1 { padding-left: 14px; font-weight: 600; } .sitewrap .cart.orderHistory form .input { position: relative; width: 100%; padding: 0 14px; } .sitewrap .cart.orderHistory form .input input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; height: 26px; width: 100%; border-radius: 17px; padding-left: 14px; } .sitewrap .cart.orderHistory form .input label, .sitewrap .cart.orderHistory form .input input { font-size: 1rem; font-weight: 500; } .sitewrap .cart.orderHistory form .input label { position: absolute; top: 4px; padding-left: 14px; left: 14px; } .sitewrap .cart.orderHistory form button { width: 50px; height: 20px; background-color: #103342; color: white; font-weight: 700; font-size: 0.625rem; text-transform: uppercase; border-radius: 17px; position: absolute; top: 17px; right: 20px; } .sitewrap .cart.orderHistory .total { margin-top: 2px; } .sitewrap .cart.orderHistory .total select { background: transparent; width: auto; display: inline-block; border: 1px solid #103342; color: #103342; font-size: 1rem; font-weight: 500; border-radius: 20px; width: 190px; height: 26px; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; transition-delay: 0; padding-left: 14px; } .sitewrap .cart.orderHistory .items .wrap .pagination p { color: #70858e; font-size: 0.875rem; display: inline-block; width: 90px; float: left; } .sitewrap .cart.orderHistory .items .wrap .pagination .hold { width: 110px; margin-left: auto; float: right; margin-top: 4px; } .sitewrap .cart.orderHistory .items .wrap .pagination button { font-size: 0.75rem; font-weight: 300; color: #70858e; text-transform: uppercase; border-radius: 10px; border: 1px solid #70858e; padding: 0 9px; display: inline-block; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li { border-bottom: 1px solid #d4eff2; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .overview { list-style: none; color: #70858e; margin-top: 40px; float: none; width: auto; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .overview > li p { padding: 0; line-height: 1.3; text-transform: capitalize; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .overview > li p em { font-weight: 900; display: inline-block; margin: 0 4px 0 0; font-style: normal; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .info { margin-top: 54px; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .info h2 { font-size: 1.5rem; padding: 0; width: auto; margin: 15px 0 25px 0; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .info p { color: #70858e; font-size: 1rem; line-height: 1.3; width: 114px; padding-top: 15px; font-weight: 500; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .info .add { background-color: #70858e; border-radius: 20px; height: 26px; width: 115px; color: white; font-size: 1rem; font-weight: 500; line-height: 1; margin: 25px 0 0 -12px; text-align: left; padding-left: 14px; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .info .add.added { background-color: #2cb372; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #FCD200; z-index: 1000000; overflow: auto; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .modal .contain { width: 278px; position: relative; padding: 40px 0; margin: 0px auto; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .modal .contain h2 { width: auto; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .modal .contain .grid { display: flex; align-items: flex-start; flex-wrap: wrap; margin: 0 -9px; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .modal .contain .version { background: #fff; border-radius: 8px; width: 130px; height: 130px; box-sizing: border-box; padding: 13px; margin-bottom: 18px; position: relative; margin: 0 6px 18px 6px; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .modal .contain .add { border: 2px solid #103342; background-color: #103342; border-radius: 20px; height: 26px; width: 115px; color: white; font-size: 1rem; font-weight: 500; line-height: 1; margin: 25px 0 40px 0px; text-align: left; padding-left: 14px; text-transform: uppercase; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .modal .contain .add.cancel { background-color: #FCD200; color: #103342; position: absolute; left: 150px; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .modal .contain input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; width: 34px; height: 34px; position: absolute; right: 4px; bottom: 4px; background: url("../images/check-off.png") no-repeat; background-size: contain; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .modal .contain input[type="checkbox"]:checked { background-image: url("../images/check-on.png"); } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .modal .contain label { position: absolute; color: #103342; font-size: 1rem; font-weight: 700; margin-left: -5px; margin-top: -5px; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .modal .contain figure { width: 84px; margin-left: 10px; margin-top: 10px; min-height: 84px; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li figure { width: 100%; width: 104px; min-height: 90px; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li figure img { width: 100%; } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li figure.noImage { background-color: rgba(235, 102, 107, 0.1); } .sitewrap .cart.orderHistory .items .wrap .line-items > div > li .info .add { margin-left: 0; margin-top: 18px; } .sitewrap .cart header { height: 140px; background-color: #fcd100; position: relative; z-index: -1; } .sitewrap .cart header:before { content: ''; display: block; width: 76px; height: 80px; background-image: url("../images/monkey-waving.svg"); background-repeat: no-repeat; position: absolute; bottom: -25px; right: 66px; } .sitewrap .cart header h2 { position: absolute; bottom: 20px; left: 30px; font-size: 1.75rem; line-height: 1; color: white; padding: 0; } .sitewrap .cart .total { height: 60px; background-color: #e7ebec; position: relative; margin-top: 2px; } .sitewrap .cart .total .wrap { margin: 0 25px; } .sitewrap .cart .total .wrap .promoCode { position: relative; padding: 20px 0 0 0; } .sitewrap .cart .total .wrap .promoCode label { position: absolute; top: 20px; left: 0; width: 180px; height: 28px; font-weight: 500; font-size: 0.875rem; padding: 8px 10px; } .sitewrap .cart .total .wrap .promoCode input { display: block; width: 180px; height: 28px; border: 0; font-size: 0.875rem; font-weight: 500; padding: 0 10px; border-radius: 14px; float: left; } .sitewrap .cart .total .wrap .promoCode button { display: block; float: right; width: 60px; height: 20px; text-transform: uppercase; font-size: 0.75rem; border: 1px solid #103342; border-radius: 10px; margin: 5px 0 0 0; } .sitewrap .cart .total .wrap .col { padding: 17px 0; } .sitewrap .cart .total .wrap .col a { display: block; width: 85px; height: 26px; border-radius: 13px; background-color: #fcd100; border: 2px solid white; text-align: center; text-decoration: none; font-weight: 700; padding: 5px 0 0 0; font-size: 0.75rem; text-transform: uppercase; float: left; margin-left: -10px; } .sitewrap .cart .total .wrap .col h2 { font-size: 1.5rem; float: right; padding: 0; color: #103342; font-weight: 900; margin-right: 20px; } .sitewrap .cart .total .wrap .col h2 span { padding: 10px 0 0 0; font-weight: 500; color: rgba(16, 51, 66, 0.5); font-size: 0.6875rem; position: absolute; top: 35px; display: block; } .sitewrap .cart .items .wrap { margin: 0 25px; } .sitewrap .cart .items .wrap .message { font-size: 0.875rem; font-weight: 800; color: #103342; padding: 20px 0; } .sitewrap .cart .items .wrap .line-items { list-style: none; } .sitewrap .cart .items .wrap .line-items .order { color: #103342; font-size: 1rem; padding: 0; } .sitewrap .cart .items .wrap .line-items .order span { font-size: 0.75rem; font-weight: 900; width: 80px; display: inline-block; } .sitewrap .cart .items .wrap .line-items .order + .order { margin-top: 4px; } .sitewrap .cart .items .wrap .line-items > div > li { padding: 50px 0 30px 0; position: relative; } .sitewrap .cart .items .wrap .line-items > div > li h2 { font-size: 1.125rem; color: #103342; font-weight: 900; padding-bottom: 20px; } .sitewrap .cart .items .wrap .line-items > div > li .overview { list-style: none; color: #70858e; float: left; width: 130px; } .sitewrap .cart .items .wrap .line-items > div > li .overview > li p { padding: 0; line-height: 1.3; text-transform: capitalize; } .sitewrap .cart .items .wrap .line-items > div > li .overview > li p em { font-weight: 900; display: inline-block; margin: 0 4px 0 0; font-style: normal; } .sitewrap .cart .items .wrap .line-items > div > li .info { margin-top: 54px; float: right; } .sitewrap .cart .items .wrap .line-items > div > li .info h2 { font-size: 1.5rem; padding: 0; width: auto; margin: 25px 0 25px 30px; } .sitewrap .cart .items .wrap .line-items > div > li .info .input { position: relative; border: 1px solid #103342; border-radius: 20px; width: 112px; height: 26px; padding: 0; margin-left: 20px; } .sitewrap .cart .items .wrap .line-items > div > li .info .input input[type=number] { -moz-appearance: textfield; } .sitewrap .cart .items .wrap .line-items > div > li .info .input input[type=number]::-webkit-inner-spin-button, .sitewrap .cart .items .wrap .line-items > div > li .info .input input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .sitewrap .cart .items .wrap .line-items > div > li .info .input input { border: 0; color: #103342; background: transparent; font-size: 1rem; float: left; width: 40px; padding: 0; margin: 0 0 0 25px; } .sitewrap .cart .items .wrap .line-items > div > li .info .input label { float: left; color: #103342; margin-left: 10px; padding-top: 2px; } .sitewrap .cart .items .wrap .line-items > div > li .info .input .versions { text-align: center; margin: 20px 0 0; color: #2CB372; display: block; clear: both; } .sitewrap .cart .items .wrap .line-items > div > li .info p { color: #70858e; font-size: 1rem; line-height: 1.3; width: 200px; padding-top: 15px; font-weight: 500; } .sitewrap .cart .items .wrap .line-items > div > li .info .add { background-color: #70858e; border-radius: 20px; height: 26px; width: 115px; color: white; font-size: 1rem; font-weight: 500; line-height: 1; margin: 25px 0 0 -12px; text-align: left; padding-left: 14px; } .sitewrap .cart .items .wrap .line-items > div > li .info .add.added { background-color: #2cb372; } .sitewrap .cart .items .wrap .line-items > div > li .delete { width: 65px; height: 20px; border: 1px solid #24525e; padding: 0 0 0 0; color: #24525e; text-transform: uppercase; font-size: 0.75rem; border-radius: 10px; margin-left: 20px; } .sitewrap .cart .items .wrap .line-items > div + div > li { border-top: 1px solid #d4eff2; padding-top: 15px; } .sitewrap .cart .checkout { padding-top: 40px; } .sitewrap .cart .checkout .wrap { margin: 0 20px; } .sitewrap .cart .checkout .wrap .hold .process .error { font-weight: 500; color: #eb666b; line-height: 1.1875; padding: 0; margin: 0 15px 20px 15px; } .sitewrap .cart .checkout .wrap .hold .process .step { padding: 0; position: relative; } .sitewrap .cart .checkout .wrap .hold .process .step.billingStep.hideToggle .toggleSwitch { display: none; } .sitewrap .cart .checkout .wrap .hold .process .step.billingStep.hideToggle .expanding { display: block !important; } .sitewrap .cart .checkout .wrap .hold .process .step.hideInputs .expanding .continue { display: none; } .sitewrap .cart .checkout .wrap .hold .process .step.hideInputs .expanding .continue.collectContinue { display: block !important; } .sitewrap .cart .checkout .wrap .hold .process .step.hideInputs .expanding .findMap { display: block; } .sitewrap .cart .checkout .wrap .hold .process .step.hideInputs .expanding .collectionOption { display: block; } .sitewrap .cart .checkout .wrap .hold .process .step.hideInputs .expanding .collectionOption figure { float: right; width: 110px; } .sitewrap .cart .checkout .wrap .hold .process .step.hideInputs .expanding .cols .col { width: 100%; } .sitewrap .cart .checkout .wrap .hold .process .step.hideInputs .expanding .cols .col button { width: 100%; float: left; } .sitewrap .cart .checkout .wrap .hold .process .step.hideInputs .content { display: none; } .sitewrap .cart .checkout .wrap .hold .process .step.hideInputs .deliveryOptions .input { display: block !important; } .sitewrap .cart .checkout .wrap .hold .process .step.hideInputs .input, .sitewrap .cart .checkout .wrap .hold .process .step.hideInputs .selectElement { display: none !important; } .sitewrap .cart .checkout .wrap .hold .process .step.update .expanding .continue { background-color: #89d3dc; } .sitewrap .cart .checkout .wrap .hold .process .step .toggle { width: -webkit-calc(100% + 20px); width: calc(100% + 20px); margin: 0 -10px; height: 56px; border-radius: 28px; background-color: #e7ebec; text-align: left; padding: 0 20px; text-transform: uppercase; color: rgba(16, 51, 66, 0.2); } .sitewrap .cart .checkout .wrap .hold .process .step .toggle em { display: inline-block; font-style: normal; font-weight: 700; margin: 0 8px 0 0; } .sitewrap .cart .checkout .wrap .hold .process .step .toggle span { font-weight: 700; pointer-events: none; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding { height: 0; overflow: hidden; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .collectionOption { margin: 0 25px; display: none; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .collectionOption .hold p { color: #103342; font-size: 1rem; line-height: 1.6; font-weight: 600; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .deliveryOptions { position: absolute; top: 11px; right: 0; display: none; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .deliveryOptions .input { width: 76px; float: left; height: 34px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .deliveryOptions .input + .input { margin-top: 0; margin-left: 10px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .deliveryOptions .input input { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 34px; border: 1px solid #fef1b2; padding: 0; margin: 0; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .deliveryOptions .input input:checked { background-color: #fef1b2; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .deliveryOptions .input label { text-align: center; font-size: 0.875rem; text-transform: uppercase; font-weight: 700; padding: 0; top: 10px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .selectElement { position: relative; display: block; width: 100%; height: 38px; font-size: 1rem; text-align: left; border-radius: 19px; border: 1px solid rgba(16, 51, 66, 0.25); font-weight: 600; color: #103342; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .selectElement:after { content: ''; display: block; width: 17px; height: 10px; background-position: -23em -11em; margin: 9px 0 0 0; position: absolute; right: 8px; top: 6px; pointer-events: none; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .selectElement input:-webkit-autofill, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .selectElement textarea:-webkit-autofill, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .selectElement select:-webkit-autofill { background-color: white !important; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .selectElement select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: 0; top: 0; left: 0; width: 100%; height: 100%; font-weight: 600; color: #103342; text-indent: 14px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .selectElement.error button { border-color: #eb666b; color: #eb666b; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .title { display: block; width: 100%; height: 38px; font-size: 1rem; border-radius: 28px; background-color: #e7ebec; font-weight: 700; color: #103342; padding-left: 12px !important; text-align: left; text-transform: uppercase; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input { position: relative; padding: 0; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input ul li { color: #eb666b; list-style: none; position: absolute; right: 12px; top: 12px; font-size: 0.75rem; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input input { display: block; width: 100%; height: 38px; font-size: 1rem; padding: 0 11px; border-radius: 19px; border: 1px solid rgba(16, 51, 66, 0.25); font-weight: 600; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input input[data-invalid] { border-color: #eb666b; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input label { position: absolute; top: 0; left: 0; width: 100%; height: 38px; font-size: 1rem; padding: 11px 11px; color: #103342; font-weight: 600; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input.small input { font-size: 0.75rem; text-transform: uppercase; font-weight: 600; color: #103342; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input.small label { font-size: 0.75rem; font-weight: 600; padding: 13px 0 0 15px; text-transform: uppercase; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input.error label { color: #eb666b; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input.error input { border-color: #eb666b; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input.title input { pointer-events: none; border-color: transparent; background-color: #e7ebec; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .input + .input { margin: 20px 0 0 0; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .findMap { height: 38px; background-color: #e7ebec; margin: 0 auto 22px auto; width: -moz-calc(100% - 20px); width: -o-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: calc(100% - 20px); display: none; text-align: left; text-transform: uppercase; color: #103342; font-weight: 700; padding-left: 15px; border-radius: 28px; padding-top: 10px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .continue { height: 56px; width: 100%; /* width: -webkit-calc(100% + 20px); width: calc(100% + 20px); */ margin: 0 auto; border-radius: 28px; background-color: #89d3dc; text-align: right; padding: 0 13px 0 0; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .continue[disabled] { background-color: #e7ebec; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .continue[disabled] span { color: rgba(16, 51, 66, 0.25); } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .continue span { display: inline-block; width: 100px; height: 34px; background-color: white; border-radius: 17px; text-align: center; text-transform: uppercase; padding: 5px 0 0 0; color: #103342; font-weight: 700; pointer-events: none; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .paypal { height: 56px; width: -webkit-calc(100% + 20px); width: calc(100% + 20px); margin: 0 -10px; border-radius: 28px; background-color: #e7ebec; text-align: right; padding: 0 13px 0 0; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .cols .col { margin: 18px 0 0 0; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .cols.onMobile { margin: 0 -10px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .cols.onMobile .col { float: left; width: -webkit-calc(50% - 20px); width: calc(50% - 20px); margin: 20px 10px 0 10px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .cols:first-child .col { margin-top: 0; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .cols + .input { margin: 20px 0 0 0; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .wide-small { margin: 20px -5px 0 -5px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .wide-small .input { float: left; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .wide-small .input:first-child { width: -webkit-calc(67% - 10px); margin: 0 5px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .wide-small .input:last-child { width: -webkit-calc(33% - 10px); margin: 0 5px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .expiry { margin: 20px -5px 0 -5px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .expiry h2 { float: left; margin: 0 5px 0 0; font-size: 1rem; line-height: 1; font-weight: 600; color: #103342; padding: 9px 0 0 16px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .expiry .selects { float: right; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .expiry .input, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .expiry .selectElement { width: 98px; float: left; margin: 0 5px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .expiry .input button, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .expiry .selectElement button { font-size: 0.75rem; padding: 0 10px 0 15px; text-transform: uppercase; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .expiry .input button:after, .sitewrap .cart .checkout .wrap .hold .process .step .expanding .expiry .selectElement button:after { margin-top: 6px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .expiry + .input { margin: 20px 0 0 0; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .info { font-size: 1rem; line-height: 1.08; margin: 23px 20px 20px 0px; color: #103342; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .info p { font-weight: 700 !important; padding: 0; font-weight: 500; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .info p + p { margin-top: 10px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .info span { border: 2px solid #fcd100; border-radius: 50%; width: 20px; height: 20px; padding: 2px; margin-right: 10px; display: inline-block; vertical-align: middle; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .info input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; width: 10px; height: 10px; display: inline-block; margin: -4px 0 0 1px; padding: 0; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .info input:checked { background-color: #103342; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .info.inCol { margin: 0 0 14px 10px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .toggleSwitch { display: block; font-size: 1rem; font-weight: 600; color: #103342; width: 100%; text-align: left; padding: 0 0 0 11px; position: relative; margin: 20px 0; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .toggleSwitch:before { content: ''; display: block; position: absolute; top: -2px; right: 0; width: 64px; height: 30px; border-radius: 15px; background-color: #9fdbe3; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .toggleSwitch:after { content: ''; display: block; position: absolute; top: 4px; right: 59px; width: 18px; height: 18px; border-radius: 50%; background-color: white; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .toggleSwitch.active:before { background-color: #fcd100; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .toggleSwitch.active:after { right: 6px; } .sitewrap .cart .checkout .wrap .hold .process .step .expanding .toggleSwitch.active + .expanding { display: none; } .sitewrap .cart .checkout .wrap .hold .process .step .content { font-size: 1rem; line-height: 1.2; height: 0; overflow: hidden; color: #70858e; padding: 0 0 0 10px; } .sitewrap .cart .checkout .wrap .hold .process .step .content p strong { font-weight: 700; } .sitewrap .cart .checkout .wrap .hold .process .step + .step { margin: 20px 0 0 0; } .sitewrap .cart .checkout .wrap .hold .process .step.active { padding: 0 0 43px 0; } .sitewrap .cart .checkout .wrap .hold .process .step.active .toggle { background-color: #fcd100; color: #103342; } .sitewrap .cart .checkout .wrap .hold .process .step.active .expanding { margin: 20px 0 0 0; height: auto; overflow: visible; } .sitewrap .cart .checkout .wrap .hold .process .step.active .expanding .deliveryOptions { display: block; } .sitewrap .cart .checkout .wrap .hold .process .step.active .content { display: none; } .sitewrap .cart .checkout .wrap .hold .process .step.ready .continue { background-color: #51becc; } .sitewrap .cart .checkout .wrap .hold .process .step.ready .continue span { color: #51becc; } .sitewrap .cart .checkout .wrap .hold .process .step.completed .content { margin: 20px 0 0 0; height: auto; } .sitewrap .cart .checkout .wrap .hold .process .placeOrder { width: -webkit-calc(100% + 20px); width: calc(100% + 20px); height: 56px; border-radius: 28px; margin-top: 20px; margin-left: -10px; font-size: 1.625rem; color: white; background-color: #89d3dc; text-align: left; padding-left: 40px; } .sitewrap .cart .checkout .wrap .hold .process .placeOrder[disabled] { background-color: #e7ebec; } .sitewrap .cart .checkout .wrap .hold .process .placeOrder.active { -webkit-transition-timing-function: ease; -webkit-transition-duration: 500ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: ease; -moz-transition-duration: 500ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: ease; -o-transition-duration: 500ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: ease; -ms-transition-duration: 500ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: ease; transition-duration: 500ms; transition-property: all; transition-delay: 0; background-color: #fcd100; } .sitewrap .cart .checkout .wrap .hold .overview { color: #70858e; position: relative; } .sitewrap .cart .checkout .wrap .hold .overview h2 { width: -webkit-calc(100% + 20px); width: calc(100% + 20px); margin: 20px -10px 0 -10px; height: 56px; border-radius: 28px; background-color: #e7ebec; text-align: left; padding: 21px 20px; text-transform: uppercase; color: rgba(16, 51, 66, 0.2); font-size: 1rem; } .sitewrap .cart .checkout .wrap .hold .overview h2.title { font-weight: 900; color: #103342; } .sitewrap .cart .checkout .wrap .hold .overview h2 span { display: block; float: right; font-size: 1.625rem; color: #103342; margin: -8px 0 0 0; } .sitewrap .cart .checkout .wrap .hold .overview .edit { display: block; width: 60px; position: absolute; right: 7px; top: 21px; padding: 2px 0 3px 0; border: 1px solid #103342; border-radius: 10px; color: #103342; text-align: center; text-decoration: none; font-size: 0.75rem; margin: -3px 0 0 0; text-transform: uppercase; } .sitewrap .cart .checkout .wrap .hold .overview ul { list-style: none; margin: 20px 11px 0 10px; } .sitewrap .cart .checkout .wrap .hold .overview ul + ul { margin-top: 32px; } .sitewrap .cart .checkout .wrap .hold .overview ul li { font-weight: 500; color: #70858e; font-size: 0.875rem; } .sitewrap .cart .checkout .wrap .hold .overview ul li + li { margin-top: 8px; } .sitewrap .cart .checkout .wrap .hold .overview ul li h3 { float: right; width: 25%; padding: 0; font-weight: 500; text-align: right; } .sitewrap .cart .checkout .wrap .hold .overview ul li h4 { float: left; width: 60%; padding: 0; font-weight: 500; } .sitewrap .cart .checkout .wrap .hold .overview ul li h5 { float: left; width: 15%; padding: 0; font-weight: 500; } .sitewrap .cart .quickAddPanel { display: none; } .sitewrap .cart .quickAddPanel .wrap { margin: 0 30px; border-top: 1px solid #89d3dc; padding: 30px 0 0 0; } .sitewrap .cart .quickAddPanel .wrap .input { height: 34px; width: 100%; border-radius: 17px; background-color: #fee880; position: relative; padding: 0; margin: 0; } .sitewrap .cart .quickAddPanel .wrap .input label { position: absolute; font-size: 1rem; padding: 10px 10px; } .sitewrap .cart .quickAddPanel .wrap .input input { display: block; width: 100%; height: 34px; background: transparent; border: 0; padding: 0 10px; font-size: 1rem; } .sitewrap .cart .quickAddPanel .wrap .steps .step { width: 120px; float: left; margin: 20px 0 0 0; opacity: 0.5; } .sitewrap .cart .quickAddPanel .wrap .steps .step .selecter { position: relative; } .sitewrap .cart .quickAddPanel .wrap .steps .step .selecter button { display: block; width: 120px; height: 26px; border-radius: 13px; border: 1px solid #70858e; color: #70858e; text-align: left; padding: 0 10px; line-height: 1; } .sitewrap .cart .quickAddPanel .wrap .steps .step .selecter select { -webkit-appearance: none; -moz-appearance: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .sitewrap .cart .quickAddPanel .wrap .steps .step h2 { font-size: 1.5rem; font-weight: 900; line-height: 1; color: #103342; padding: 0 0 0 20px; } .sitewrap .cart .quickAddPanel .wrap .steps .step:nth-child(even) { margin-left: 20px; } .sitewrap .cart .quickAddPanel .wrap .steps .step.active { opacity: 1; pointer-events: all; } .sitewrap .cart .quickAddPanel .wrap .steps .step.inactive { opacity: 0.2; pointer-events: none; } .sitewrap .cart .quickAddPanel .wrap .buttons { margin: 50px 0 0 0; } .sitewrap .cart .quickAddPanel .wrap .buttons button { display: block; width: 120px; height: 34px; border-radius: 17px; background-color: #103342; float: left; text-transform: uppercase; text-align: left; font-size: 1rem; color: white; padding: 0 0 0 15px; font-weight: 700; } .sitewrap .cart .quickAddPanel .wrap .buttons button + button { background-color: transparent; border: 1px solid #24525e; color: #24525e; margin: 0 0 0 20px; } .sitewrap .cart .basketOverview .wrap { margin: 0 22px; } .sitewrap .cart .basketOverview .wrap .quickAdd { padding: 40px 0; border-top: 1px solid #d4eff2; } .sitewrap .cart .basketOverview .wrap .quickAdd .quickAddButton { width: auto; height: 26px; width: 134px; border-radius: 13px; background-color: #eb666b; color: white; font-size: 0.75rem; text-align: center; text-transform: uppercase; font-weight: 700; padding: 0 6px; display: inline-block; } .sitewrap .cart .basketOverview .wrap .quickAdd .quickAddButton + .quickAddButton { background-color: #51becc; } .sitewrap .cart .basketOverview .wrap .info { border-top: 1px solid #d4eff2; padding: 20px 0 0 0; margin-left: 8px; } .sitewrap .cart .basketOverview .wrap .info .promo { font-weight: 500; color: #70858e; padding-top: 40px; margin-left: -10px; } .sitewrap .cart .basketOverview .wrap .info .promo .input { width: 220px; padding: 0; display: inline-block; position: relative; } .sitewrap .cart .basketOverview .wrap .info .promo .input .promo-message { position: absolute; margin: 15px 0 14px 0; font-size: 0.75rem; width: 280px; color: #ef0f0f; } .sitewrap .cart .basketOverview .wrap .info .promo .input input { -webkit-appearance: none; -moz-appearance: none; border: 0; border-radius: 0; background-color: rgba(81, 190, 204, 0.5); padding: 0; font-weight: 500; color: #103342; padding-left: 8px; font-size: 1rem; text-align: center; width: 100%; height: 26px; border-radius: 20px; } .sitewrap .cart .basketOverview .wrap .info .promo .input label { padding-top: 5px; padding-left: 8px; color: #103342; text-align: center; left: 0; right: 0; } .sitewrap .cart .basketOverview .wrap .info .promo .input.error { border: 1px solid #eb666b; } .sitewrap .cart .basketOverview .wrap .info .promo button { border-radius: 20px; text-transform: uppercase; font-weight: 500; color: #24525e; font-size: 0.75rem; border: 1px solid #24525e; padding: 0 8px; display: inline-block; margin-left: 30px; width: 65px; } .sitewrap .cart .basketOverview .wrap .info h4 { font-size: 1rem; line-height: 1.625; padding: 0; color: #103342; } .sitewrap .cart .basketOverview .wrap .info h4 strong { font-weight: 700; } .sitewrap .cart .basketOverview .wrap .info h4 span { display: block; width: 50%; float: left; } .sitewrap .cart .basketOverview .wrap .info h4 span + span { float: right; width: 104px; } .sitewrap .cart .basketOverview .wrap .info h4 em { font-weight: 700; font-style: normal; } .sitewrap .cart .basketOverview .wrap .info .checkout { margin: 40px 0 0 0; text-align: right; font-size: 1.5rem; display: block; text-decoration: none; padding: 13px 0 0 0; position: relative; z-index: 10; } .sitewrap .cart .basketOverview .wrap .info .checkout:before { content: ''; width: -moz-calc(100vw - 10px); width: -o-calc(100vw - 10px); width: -webkit-calc(100vw - 10px); width: calc(100vw - 10px); height: 56px; background-color: #fcd100; display: block; border-radius: 28px; position: absolute; top: 0; left: 0; margin-left: -24px; z-index: -1; } .sitewrap .cart .basketOverview .wrap .info .checkout.paypal { position: relative; } .sitewrap .cart .basketOverview .wrap .info .checkout.paypal:before { background-color: #e7ebec; } .sitewrap .cart .basketOverview .wrap .info .checkout.paypal span:first-of-type { width: auto; color: #70858e; border: 0; padding-top: 8px; margin-left: 10px; } .sitewrap .cart .basketOverview .wrap .info .checkout.paypal:after { content: ''; background-image: url("../images/paypal.png"); background-repeat: no-repeat; width: 94px; height: 25px; display: block; position: absolute; right: 20px; top: 15px; } .sitewrap .cart .basketOverview .wrap .info .checkout span { color: #103342; } .sitewrap .cart .basketOverview .wrap .info .checkout span:first-of-type { display: block; padding: 5px 0 0 0; margin-top: 2px; width: 85px; font-size: 0.75rem; text-transform: uppercase; border: 2px solid white; text-align: center; height: 26px; border-radius: 13px; float: left; font-weight: 700; margin-left: -11px; } .sitewrap .cart .basketOverview .wrap .info .checkout span:nth-of-type(2) { font-weight: 900; display: inline-block; padding: 2px 24px 0 0; } .sitewrap .progressWrap { bottom: 10px; left: 0; width: 100%; padding-bottom: 40px; } .sitewrap .progressBar { background-color: #51becc; border-top: 1px solid white; position: absolute; top: 200px; left: 0; height: 100%; width: 100%; padding: 24px 0 0 0; display: none; z-index: 10000; } .sitewrap .progressBar .wrap { margin: 0 20px; } .sitewrap .progressBar .wrap .progressButton, .sitewrap .progressBar .wrap .resetButton { margin-left: -5px; margin-top: 55px; } .sitewrap .progressBar .wrap .resetButton { margin-right: 0; } .sitewrap .progressBar .wrap .half .desktop { display: none; } .sitewrap .progressBar .wrap .half h2 { color: white; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding-bottom: 30px; padding-top: 0; } .sitewrap .progressBar .wrap .half ul { list-style: none; } .sitewrap .progressBar .wrap .half ul li { width: 50%; float: left; color: #24525e; opacity: 0.5; } .sitewrap .progressBar .wrap .half ul li.fade { opacity: 1; } .sitewrap .progressBar .wrap .half ul li.corners { white-space: nowrap; } .sitewrap .progressBar .wrap .half ul li p { padding-top: 0; } .sitewrap .progressBar .wrap .half ul li p em { display: inline-block; width: 15px; font-style: normal; font-weight: 900; } .sitewrap .progressBar .wrap .half .buttons { padding: 30px 0; } .sitewrap .progressBar .wrap .half .buttons button { display: inline-block; height: 20px; border-radius: 10px; border: 1px solid #24525e; font-size: 0.75rem; text-transform: uppercase; padding: 0 6px; color: #24525e; } .sitewrap .progressBar .wrap .half .buttons .selectElement { position: relative; display: inline-block; margin-left: -6px; } .sitewrap .progressBar .wrap .half .buttons .selectElement + .selectElement { margin-left: 10px; } .sitewrap .progressBar .wrap .half .buttons .selectElement button { pointer-events: none; } .sitewrap .progressBar .wrap .half .buttons .selectElement select { -webkit-appearance: none; -moz-appearance: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .sitewrap .progressBar .wrap .half .buttons .selectElement.error button { border-color: #eb666b; } .sitewrap .progressBar .wrap .half .buttons[data-currency="gbp"] + .total h2[data-currency="gbp"] { display: block; } .sitewrap .progressBar .wrap .half .buttons[data-currency="usd"] + .total h2[data-currency="usd"] { display: block; } .sitewrap .progressBar .wrap .half .buttons[data-currency="eur"] + .total h2[data-currency="eur"] { display: block; } .sitewrap .progressBar .wrap .half .total { margin: 0 0 0 0; } .sitewrap .progressBar .wrap .half .total h2 { color: #24525e; font-size: 2rem; display: none; font-weight: 900; } .sitewrap .progressButton, .sitewrap .resetButton { margin-left: 20px; border: 1px solid #24525e; border-radius: 10px; font-size: 0.75rem; text-transform: uppercase; color: #24525e; display: inline-block; width: auto; height: 20px; padding: 0 5px; /* &.resetButton { display: none; } */ } .sitewrap .progressButton span, .sitewrap .resetButton span { margin-top: -2px; } .sitewrap .progressButton span { pointer-events: none; } .sitewrap .progressButton span:nth-child(2) { display: none; } .sitewrap .resetButton { float: right; margin-left: 0; margin-right: 20px; } .sitewrap .resetButtonMobile { margin-right: 110px !important; } .red .sitewrap .panels .bottom .back { border-color: #67363c; color: #67363c; } .red .sitewrap .panels .bottom .controlButtons .guidelinesDownload { border: 1px solid #67363c; color: #67363c; } .red .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption { background-color: #f5abae; } .red .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption:hover { background-color: #f0878a; } .red .sitewrap .panels .bottom .panel-holder .panel .wrap .halfOption.selected { background-color: #fcd100; } .red .sitewrap .panels .bottom .panel-holder .panel .wrap .option { background-color: #f5abae; } .red .sitewrap .panels .bottom .panel-holder .panel .wrap .option:hover { background-color: #f0878a; } .red .sitewrap .panels .bottom .panel-holder .panel .wrap .option.selected { background-color: #fcd100; } .red .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall { background-color: #f5abae; } .red .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall:hover { background-color: #f0878a; } .red .sitewrap .panels .bottom .panel-holder .panel .wrap .optionSmall.selected { background-color: #fcd100; } .red .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption:before { background-color: #f5abae; } .red .sitewrap .panels .bottom .panel-holder .panel .wrap .toggleOption.open:before { background-color: #fcd100; } .red .sitewrap .panels .review ul li p { color: #67363c; } .red .sitewrap .panels .review .back, .red .sitewrap .panels .review .resetButton { border-color: #67363c; color: #67363c; } .red .sitewrap .progressBar { background-color: #eb666b; } .red .sitewrap .progressBar .wrap .half ul li p { color: #67363c; } .red .sitewrap .progressBar .wrap .half .buttons button { border-color: #67363c; color: #67363c; } .red .sitewrap .progressBar .wrap .half .total h2 { color: #67363c; } .red .sitewrap .progressButton, .red .sitewrap .resetButton { border-color: #67363c; color: #67363c; } .red .sitewrap .resetButton { display: none; } .navOpen .sidebar { left: 0; } .showProgress .sitewrap .progressBar .wrap .half .buttons .resetButton.desktop { display: none; } .showProgress .sitewrap .progressBar .wrap .half .buttons .resetButton { opacity: 0.5; } .showProgress .sitewrap .skip { display: none; } .showProgress .sitewrap .progressWrap, .showProgress .sitewrap .progressBar { display: block; } .showProgress .sitewrap .panels .review { display: none; } .showProgress .sitewrap .top .panel-holder .panel .wrap button { display: none; } .showProgress .sitewrap .progressButton { border-color: white; color: white; margin-left: 0; } .showProgress .sitewrap .progressButton span { display: none; } .showProgress .sitewrap .progressButton span:nth-child(2) { display: block; } .hideAll .sitewrap .panels .bottom .continue, .hideAll .sitewrap .panels .bottom .back { display: none; } .hideAll .sitewrap .progesssBar { display: none; } .hideAll .sitewrap .progressButton { display: none; } .hideAll .sitewrap .resetButton { display: none; } .reviewProgress .sitewrap .panels .review { display: block !important; } .reviewProgress .progressWrap { display: none; } .hideProgress .sitewrap { /* .guidelinesDownload { display: block !important; } */ /* .continue { display: none; } */ } .hideProgress .sitewrap .panels .review { display: block !important; } .hideProgress .sitewrap .panels .bottom { /* .continue, .back { display: none; } */ } .hideProgress .sitewrap .addCartBtn { display: none; } .hideProgress .sitewrap .skip { display: none !important; } .hideProgress .sitewrap .progesssBar { display: none; } .hideProgress .sitewrap .progressButton { display: none; } .hideProgress .sitewrap .resetButton { display: none; } .helpMenu .sitewrap .panels .bottom .panel-holder .panel.help .msgWrap.added { bottom: -1px; width: 99%; } .helpMenu .sitewrap .progressBar { display: none; } .helpMenu .sitewrap .review { display: none !important; } .helpMenu .sitewrap .progressButton, .helpMenu .sitewrap .resetButton { display: none; } .helpMenu .sitewrap .controlButtons { display: none; } .helpMenu .sitewrap .panels .bottom .guidelinesDownload { display: none !important; } .helpMenu .sitewrap .panels .bottom .back { display: block; top: 288px; border: 2px solid white; color: white; font-size: 1rem; width: 105px; height: 34px; border-radius: 20px; font-weight: 700; text-transform: uppercase; float: left; } .helpMenu .sitewrap .panels .bottom .buttonEl button { font-weight: 300; } .valid.red .sitewrap .resetButton { display: block; } .valid .sitewrap .progressButton.resetButton, .valid .sitewrap .resetButton.resetButton { display: block; } .valid .sitewrap .panels .bottom .continue { color: #103342; background-color: #fcd100; pointer-events: all; -webkit-transition-timing-function: ease; -webkit-transition-duration: 500ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: ease; -moz-transition-duration: 500ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: ease; -o-transition-duration: 500ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: ease; -ms-transition-duration: 500ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: ease; transition-duration: 500ms; transition-property: all; transition-delay: 0; } .quickAdd .sitewrap .cart .quickAddPanel { display: block; } .quickAdd .sitewrap .cart .basketOverview { display: none; } .showModal .sitewrap .panels .bottom .controlButtons { opacity: 0; } .showModal .sitewrap .panels .top .panel-holder .panel .modal { opacity: 1; pointer-events: all; } .checkoutReady .sitewrap .cart .checkout .wrap .hold .process .placeOrder { pointer-events: all; background-color: #51becc; } .quickModal { display: none; } .quickModal .panel { display: block; width: 100%; height: 100vh; position: fixed; padding: 84px 24px 135px 24px; border-radius: 26px; background-color: #fcd100; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #103342; z-index: 100000; } .quickModal .panel h2 { font-size: 1.75rem; padding-bottom: 20px; } .quickModal .panel .input label { font-size: 1rem; font-weight: 600; color: #103342; margin-left: 15px; } .quickModal .panel .input input { padding: 0; border: 0; border-radius: 20px; -webkit-appearance: none; -moz-appearance: none; width: 82px; height: 38px; color: #103342; font-size: 1.375rem; font-weight: 900; text-align: center; } .quickModal .panel button { margin-top: 40px; width: 120px; height: 34px; border-radius: 20px; color: white; background-color: #103342; text-transform: uppercase; font-size: 1rem; font-weight: 700; display: inline-block; text-align: left; padding-left: 12px; } .quickModal .panel button + button { background-color: transparent; border: 1px solid #103342; color: #103342; margin-left: 30px; } .showQuickModal .sitewrap:before { content: ''; background-color: rgba(231, 235, 236, 0.6); display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 90000; } .showQuickModal .quickModal { display: block; z-index: 100000001; } .infoModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(16, 51, 66, 0.95); z-index: 1000000; padding: 4px 0; opacity: 0; pointer-events: none; overflow: auto; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; transition-delay: 0; } .infoModal.show { opacity: 1; pointer-events: all; } .infoModal .wrapper { margin: 0 30px; margin-bottom: 50px; position: relative; padding-top: 10px; } .infoModal .wrapper .close { display: block; height: 20px; width: 50px; border: 1px solid white; border-radius: 10px; font-size: 0.75rem; text-align: center; text-transform: uppercase; color: white; position: relative; z-index: 10000; margin-left: auto; margin-right: -5px; position: absolute; top: 56px; right: 0; font-weight: 700; } .infoModal .wrapper p { font-weight: 300; font-size: 1rem; padding-bottom: 0; margin-right: 20px; color: #d4eff2; } .infoModal .wrapper p strong { font-weight: 700; } .infoModal .wrapper a { display: block; text-decoration: none; border-radius: 20px; border: 1px solid white; color: white; text-transform: uppercase; font-weight: 500; font-size: 0.75rem; height: 20px; width: 87px; text-align: center; margin-top: 60px; opacity: 0.5; } .infoModal .wrapper h2 { font-weight: 900; font-size: 1.75rem; line-height: 1; color: white; margin: 0; padding-bottom: 10px; padding-top: 16px; } .infoModal .modalSlider .content { margin-top: 140px; } .infoModal .modalSlider .content h2 { margin-bottom: 25px; padding: 0; } .infoModal .modalSlider .content p { line-height: 1.4; } .infoModal .modalSlider .swiper-menu { position: absolute; top: 48px; left: 0; width: auto; z-index: 10000; } .infoModal .modalSlider .swiper-menu button { display: inline-block; text-decoration: none; border-radius: 20px; border: 1px solid white; color: white; text-transform: uppercase; font-weight: 700; font-size: 0.75rem; height: 20px; width: 48px; padding: 0; text-align: center; background-color: transparent; text-indent: 0; position: static; } .infoModal .modalSlider .swiper-menu button + button { margin-left: 10px; } .mainFoot { margin-top: 369px; position: relative; z-index: 10; } .mainFoot a { text-decoration: none; } .mainFoot .wrap { margin: 0 30px; padding-bottom: 18px; } .mainFoot .wrap .logo { text-indent: -9999px; background-position: -440px -260px; width: 70px; height: 29px; padding: 0; } .mainFoot .wrap .logo a { display: block; height: 100%; width: 100%; } .mainFoot .wrap p { color: white; font-size: 0.6875rem; font-weight: 500; line-height: 1.3; text-transform: uppercase; padding: 12px 0 0 0; } .mainFoot .wrap .social { margin-bottom: 49px; text-align: center; } .mainFoot .wrap .social a { display: inline-block; text-indent: -99999px; margin: 0 auto; background-position: -140px -650px; width: 22px; height: 22px; } .mainFoot .wrap .social a.facebook { background-position: -190px -650px; } .mainFoot .wrap .social a.youtube { background-position: -220px -650px; width: 32px; margin-left: 34px; } .mainFoot .wrap .social a.twitter { background-position: -260px -650px; width: 25px; height: 21px; } .mainFoot .wrap .social a.google { background-position: -300px -650px; width: 31px; height: 21px; } .mainFoot .wrap .social a + a { margin-left: 25px; } .mainFoot .wrap nav { margin-bottom: 59px; } .mainFoot .wrap nav a { font-size: 1rem; color: #103342; font-weight: 900; display: block; } .mainFoot .wrap nav a + a { margin-top: 16px; } .aboutSlider { z-index: 1000; position: relative; padding: 20px 30px; margin-bottom: 36px; background-color: #e7ebec; } .aboutSlider.showArrow .swiper-menu .previous { opacity: 1; height: 30px; pointer-events: all; } .aboutSlider .swiper-container .swiper-slide { width: 110px; list-style: none; } .aboutSlider .swiper-container .swiper-slide button, .aboutSlider .swiper-container .swiper-slide .button { color: #103342; width: -moz-calc(100% - 26px); width: -o-calc(100% - 26px); width: -webkit-calc(100% - 26px); width: calc(100% - 26px); height: 26px; font-size: 0.75rem; border: 2px solid white; text-transform: uppercase; font-weight: 700; border-radius: 13px; margin: 0 auto; } .aboutSlider .swiper-container .swiper-slide button.active, .aboutSlider .swiper-container .swiper-slide .button.active { background-color: #c3ccd0; } .aboutSlider .swiper-menu button, .aboutSlider .swiper-menu .button { background-position: -500px -90px; display: block; width: 14px; height: 18px; background-color: transparent; margin-top: -9px; margin-left: 10px; } .aboutSlider .swiper-menu button.next, .aboutSlider .swiper-menu .button.next { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); margin-right: 10px; } .revealTopics { padding-top: 14px; background-color: #eb666b; height: 100vh; width: 100vw; position: absolute; top: 142px; left: 0; right: 0; overflow: auto; opacity: 0; pointer-events: none; z-index: 10000; -webkit-transition-timing-function: linear; -webkit-transition-duration: 200ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: linear; -moz-transition-duration: 200ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: linear; -o-transition-duration: 200ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: linear; -ms-transition-duration: 200ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: linear; transition-duration: 200ms; transition-property: all; transition-delay: 0; } .revealTopics.show { opacity: 1; pointer-events: all; } .revealTopics .close { color: white; border: 1px solid white; font-size: 0.75rem; text-transform: uppercase; font-weight: 500; border-radius: 17px; padding: 0 6px; margin: 6px 21px 0 auto; } .revealTopics ul { padding-top: 58px; padding-left: 32px; } .revealTopics ul li a { color: white !important; font-size: 1rem !important; } .revealTopics ul li + li { margin-top: 18px; } .topics { width: 58px; height: 20px; color: white; border: 1px solid white; font-size: 0.75rem; text-align: center; border-radius: 17px; position: relative; float: right; text-transform: uppercase; } .searchSection { overflow: hidden; } .searchSection.fullWidthBg { background-size: cover; height: 100%; background-position: center center; position: relative; } .searchSection.fullWidthBg:after { content: ''; height: 100%; width: 100%; position: absolute; left: 0; top: 0; display: block; background: -moz-linear-gradient(-45deg, white 37%, rgba(255, 255, 255, 0.57) 64%, rgba(255, 255, 255, 0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, white 37%, rgba(255, 255, 255, 0.57) 64%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, white 37%, rgba(255, 255, 255, 0.57) 64%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .searchSection.searchQuestion { margin-top: -19px; } .searchSection.searchQuestion .pagination { margin-left: 18px; } .searchSection.searchQuestion .pagination nav { float: left; } .searchSection.searchQuestion .pagination nav a { position: relative; top: -10px; display: block; } .searchSection.searchQuestion .topics { margin-right: 22px; margin-top: -10px; } .searchSection.contentSection { position: relative; } .searchSection.contentSection .hold { padding-top: 0; } .searchSection.contentSection .hold .video { border-radius: 35px; overflow: hidden; } .searchSection.contentSection .hold .video iframe { border-radius: 35px; } .searchSection.contentSection .hold .video + .aboutSlider { margin-top: 42px; } .searchSection.contentSection .hold .aboutSlider { margin-top: 0; } .searchSection.contentSection .hold .slider { padding-bottom: 60px; } .searchSection.contentSection .hold .slider .swiper-menu { width: 110px; position: absolute; left: 0; bottom: 0; height: 20px; } .searchSection.contentSection .hold .slider .swiper-menu button { text-indent: inherit; color: #70858e; background-color: transparent; border: 1px solid #70858e; font-size: 0.75rem; text-transform: uppercase; border-radius: 17px; padding: 2px 6px; height: auto; width: auto; } .searchSection.contentSection .hold article { position: relative; z-index: 100; margin: 0 10px; display: none; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; transition-delay: 0; overflow: hidden; -webkit-animation: 1s ease 0s forwards 1 fadein; animation: 1s ease 0s forwards 1 fadein; } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .searchSection.contentSection .hold article.changeContent { display: block; pointer-events: all; } .searchSection.contentSection .hold article figure { margin-bottom: 30px; } .searchSection.contentSection .hold article h1 { font-size: 1.75rem; color: #103342; padding: 0 0 20px 0; margin-left: 18px; } .searchSection.contentSection .hold article h2 { font-size: 1.25rem; color: #103342; padding: 0 0 20px 0; margin-left: 18px; } .searchSection.contentSection .hold article p { color: #103342; font-size: 1rem; line-height: 1.7; margin-right: 65px; margin-left: 18px; } .searchSection.contentSection .hold article p.small { font-size: 0.75rem !important; } .searchSection.contentSection .hold article p + p { margin-top: 20px; } .searchSection.contentSection .hold article .startOrder { margin-top: 35px; background-color: #eb666b; width: 132px; height: 34px; display: block; border-radius: 17px; color: white; font-size: 1rem; text-transform: uppercase; text-align: center; text-decoration: none; font-weight: 700; padding-top: 9px; margin-left: 8px; } .searchSection.contentSection .hold .cols .col.image { background-position: center; height: 320px; background-size: cover; margin-top: 40px; } .searchSection.contentSection .hold .cols .pagination nav { float: left; margin-left: 30px; } .searchSection.productSection .hold { padding: 0; } .searchSection.productSection .hold .aboutSlider { padding: 20px 10px; background-color: #e7ebec; } .searchSection h3 { font-size: 1.375rem; line-height: 1; font-weight: 600; color: #103342; padding: 58px 0 24px 0; border-bottom: 1px solid #d3d2d2; } .searchSection h3 a { text-decoration: none; } .searchSection time, .searchSection .searchedCategory { color: #585758; font-size: 0.75rem !important; text-transform: uppercase; font-weight: 500; color: #585758; } .searchSection p + h4 { padding-top: 60px; } .searchSection p, .searchSection li, .searchSection h4 { padding: 0; font-size: 0.875rem; color: #7b7879; font-weight: 500; font-size: 0.875rem; line-height: 1.28; list-style: none; } .searchSection h4 { text-transform: uppercase; padding-bottom: 20px; } .searchSection .pagination { margin-top: 0; } .searchSection .pagination h4 { text-transform: none; } .searchSection .pageContent { margin: 0 25px; padding-top: 57px; } .searchSection .pageContent.supportMain { padding-top: 0; } .searchSection .pageContent.supportMain .topics { background-color: #eb666b; width: 100%; height: auto; font-size: 1rem; text-transform: none; text-align: left; margin-top: 18px; padding: 4px 14px; margin-bottom: 50px; } .searchSection .pageContent ul { padding-top: 10px; } .searchSection .pageContent ul li { line-height: 1.1; list-style: none; } .searchSection .pageContent ul li + li { margin-top: 15px; } .searchSection .pageContent ul li a { font-size: 0.875rem; color: #7b7879; font-weight: 500; font-size: 0.875rem; text-decoration: none; -webkit-transition-timing-function: linear; -webkit-transition-duration: 200ms; -webkit-transition-property: all; -webkit-transition-delay: 0; -moz-transition-timing-function: linear; -moz-transition-duration: 200ms; -moz-transition-property: all; -moz-transition-delay: 0; -o-transition-timing-function: linear; -o-transition-duration: 200ms; -o-transition-property: all; -o-transition-delay: 0; -ms-transition-timing-function: linear; -ms-transition-duration: 200ms; -ms-transition-property: all; -ms-transition-delay: 0; transition-timing-function: linear; transition-duration: 200ms; transition-property: all; transition-delay: 0; } .searchSection .pageContent .hold { margin-bottom: 50px; } .searchSection .pageContent.results { margin-top: 30px; margin: 20px 20px 0 25px; } .searchSection .pageContent.results h2 { color: #b7c2c6; font-size: 1.75rem; } .searchSection .pageContent.results .pagination { margin-top: 40px; margin-left: 0; } .searchSection .pageContent.results h3 { padding-top: 11px; line-height: 1.2; padding-bottom: 14px; margin-bottom: 11px; border: 0; font-size: 1.5rem; border-bottom: 1px solid #d3d2d2; } .searchSection .pageContent.results p { color: #70858e; font-size: 1.125rem; line-height: 1.4; } .searchSection .pageContent.results p.searchedCategory { color: #585858; } .searchSection .pageContent.results .textBox { padding: 0 5px; padding-bottom: 15px; border-bottom: 1px solid #d3d2d2; } .searchSection .pageContent.results .textBox + .textBox { margin-top: 80px; } .searchSection .pageContent.pageIndiv { margin-top: 0; } .searchSection .pageContent.pageIndiv .textBox { border-bottom: 0; } .searchSection .pageContent.pageIndiv .textBox h4 { text-transform: none; font-size: 1.1875rem; color: #103342; } .searchSection .pageContent.pageIndiv .textBox h4 strong { font-weight: 900; } .searchSection .pageContent.pageIndiv .textBox h5 { text-transform: none; font-size: 1.1875rem; color: #103342; margin-top: 20px; } .searchSection .pageContent.pageIndiv .textBox h5 strong { font-weight: 900; } .searchSection .pageContent.pageIndiv .textBox .topic { text-transform: uppercase; font-size: 0.75rem; color: #585858; } .searchSection .pageContent.pageIndiv .textBox h3 { font-size: 1.5rem; padding-bottom: 17px; border-bottom: 1px solid #d3d2d2; margin-bottom: 10px; } .searchSection .pageContent.pageIndiv .textBox p + ul { margin-top: 32px; } .searchSection .pageContent.pageIndiv .textBox ul { margin-left: 26px; } .searchSection .pageContent.pageIndiv .textBox ul li { list-style: circle; } .searchSection .pageContent.pageIndiv .textBox figure { margin: 40px 0; } .searchSection .pageContent.pageIndiv .textBox p { color: #4c6671; font-size: 1rem; line-height: 1.4; } .searchSection .pageContent.pageIndiv .textBox p:first-of-type { color: #103342; font-size: 1.125rem; font-weight: 600; } .searchSection .pageContent.pageIndiv .textBox p + p { margin-top: 30px; } .searchSection .pageContent .featuredBox { position: relative; height: 140px; } .searchSection .pageContent .featuredBox:before { content: ''; position: absolute; top: 0; left: 50%; margin-left: -50vw; width: 100vw; height: 140px; display: block; background-color: #fcd100; z-index: -1; } .searchSection .pageContent .featuredBox figure { width: 270px; position: relative; top: 40px; /* margin-left: 16px; */ } .searchSection .pageContent .featuredBox + .featuredBox { margin-top: 3px; } .searchSection .pageContent .featuredBox + .featuredBox:before { background-color: #c3ccd0; } .searchSection .pageContent .featuredBox a { text-decoration: none; } .pagination { color: white; margin-top: 34px; } .pagination.single nav { float: left; } .pagination h4 { font-size: 0.875rem; float: left; padding-bottom: 0; } .pagination nav { float: right; } .pagination nav a { display: inline-block; border: 1px solid white; font-size: 0.75rem; text-transform: uppercase; border-radius: 17px; text-decoration: none; position: relative; width: 50px; height: 20px; text-align: center; padding-top: 3px; } .pagination nav a + a { margin-left: 10px; } .newsletter { position: relative; margin-top: -42px; } .newsletter.homeNewsletter { background-color: #fcd100; border-radius: 24px; margin-top: 0; margin: 0 16px; padding-top: 24px; margin-top: 123px; position: relative; z-index: 1000; } .newsletter.homeNewsletter .wrap h2 { color: #103342; font-weight: 700; text-align: center; padding: 0; padding-bottom: 6px; } .newsletter.homeNewsletter .wrap form { background-color: transparent; } .newsletter.homeNewsletter .wrap form input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; line-height: 1; border: 2px solid white; border-radius: 20px; height: 38px; padding: 0 67px 0 9px; width: 100%; color: white; font-size: 1rem; font-weight: 600; } .newsletter.homeNewsletter .wrap form label { position: absolute; color: white; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 24px; padding-left: 0; } .newsletter.homeNewsletter .wrap form label.faded { opacity: 0.5; } .newsletter.homeNewsletter .wrap form button { background-color: #fee880; color: #fcd100; height: 20px; width: 58px; font-size: 0.75rem; font-weight: 400; border-radius: 10px; top: 23px; } .newsletter.searchForm h2 { font-size: 1.75rem; color: #103342; margin-left: 30px; } .newsletter.searchForm .searchResult { position: absolute; width: -moz-calc(100vw - 40px); width: -o-calc(100vw - 40px); width: -webkit-calc(100vw - 40px); width: calc(100vw - 40px); margin: 40px auto 0 auto; left: 0; right: 0; } .newsletter.searchForm .searchResult h2 { color: #b7c2c6; font-size: 1.75rem; margin-left: 0; padding: 0 0 0 10px; } .newsletter.searchForm .searchResult form button { position: absolute; right: 0; top: 0; font-size: 0.75rem; border: 1px solid #24525e; color: #24525e; background-color: transparent; opacity: 0.5; } .newsletter.searchForm form .input input, .newsletter.searchForm form .input label { color: #103342; } .newsletter form { background-color: #e7ebec; padding: 14px 0 18px 0; position: relative; } .newsletter form .input { position: relative; width: 100%; padding: 0 14px; } .newsletter form .input input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; height: 26px; width: 100%; border-radius: 17px; padding-left: 14px; } .newsletter form .input label, .newsletter form .input input { font-size: 1rem; font-weight: 500; } .newsletter form .input label { position: absolute; top: 4px; padding-left: 14px; left: 14px; } .newsletter form button { width: 50px; height: 20px; background-color: #103342; color: white; font-weight: 700; font-size: 0.625rem; text-transform: uppercase; border-radius: 17px; position: absolute; top: 17px; right: 20px; } .g-recaptcha { margin: 20px auto; width: 80%; } .captcha-error { clear: both; color: #eb666b; display: block; font-size: 1rem; text-align: center; } @media only screen and (max-width: 720px) { .sitewrap .signup.contact { margin-bottom: 0; } .sitewrap .signup.contact > span { display: none; } .sitewrap .signup.contact.labelsRoll { padding-bottom: 100px; } .sitewrap .signup.contact.labelsRoll .content .wrap section .cols .col + .col { margin-top: 6px; } .sitewrap .signup.contact.labelsRoll .content .wrap section .select + .input { margin-top: 6px; } .sitewrap .signup.contact.labelsRoll .content .wrap section .input.select:after { top: 40px; } .sitewrap .signup.contact.labelsRoll .content .wrap section .input label { position: static; opacity: 1 !important; display: block; margin-bottom: 5px; font-size: 0.875rem; } .sitewrap .signup.contact.labelsRoll .content .wrap section .input input, .sitewrap .signup.contact.labelsRoll .content .wrap section .input select { font-size: 0.875rem; } .sitewrap .signup.contact.labelsRoll .content .wrap section .input span { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); margin-top: 10px; } } /*# sourceMappingURL=mobile.css.map */