/* ========= Header Defaults ============= Header Right <- Header Logo <- Top Menu <- Mini Shopping Cart <- HTML CB1 - Account Menu Btn / Main Menu Btn ======================================= Nav Left <- HTML CB2 - Top Trumps Menu Logo / Close Button <- Top Menu <- HTML CB3 - Social Links ======================================= Nav Right: <- HTML CB2 - Top Trumps Menu Logo / Close Button <- Account Links <- HTML CB4 - Additional Account Links ======================================= ========= Footer Defaults ============= Footer cont. <- Footer module <- HTML CB3 - Social Links ========= Homepage ==================== Layout: 1 Column Modules: Header Left <- Flex Slider v2.0 <- Top Menu <- Header Logo <- Mini Shopping Cart <- HTML CB1 - Account Menu Btn / Main Menu Btn <- HTML CB3 - Social Links After Main C. <- HTML CB5 - Call to action banner. ========= Category page ==================== 1 Column A Before Main C. <- HTML CB6 - Page Banner After Main C. <- HTML CB7 - Subscribe ========= Product Landing page ==================== Layout 1 Column C CARDS - Delivery Countdown MERCH - Variants in grid description under title ======== Cart ===================== 1 Column E Before Main C. <- HTML CB6 - Page Banner ========== Account ====================== 1 Column D Before Main C. <- HTML CB6 - Page Banner ========== Login ====================== 1 Column B Before Main C. <- HTML CB8 - Page Banner VIEWPORTS: @media only screen and (max-width: 1500px) { } @media only screen and (max-width: 1200px) { } @media only screen and (max-width: 959px) { } @media only screen and (max-width: 767px) { } @media only screen and (max-width: 479px) { } */ /* FONTS font-family: 'Open Sans', sans-serif; font-family: 'Kanit', sans-serif; */ @font-face { font-family: 'Kanit'; src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-bold-webfont.eot'); src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-bold-webfont.woff2') format('woff2'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-bold-webfont.woff') format('woff'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-bold-webfont.ttf') format('truetype'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-bold-webfont.svg#kanitbold') format('svg'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Kanit'; src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-extrabold-webfont.eot'); src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-extrabold-webfont.eot?#iefix') format('embedded-opentype'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-extrabold-webfont.woff2') format('woff2'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-extrabold-webfont.woff') format('woff'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-extrabold-webfont.ttf') format('truetype'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-extrabold-webfont.svg#kanitextrabold') format('svg'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Kanit'; src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-semibold-webfont.eot'); src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-semibold-webfont.woff2') format('woff2'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-semibold-webfont.woff') format('woff'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-semibold-webfont.ttf') format('truetype'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/kanit-semibold-webfont.svg#kanitsemibold') format('svg'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-bold-webfont.eot'); src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-bold-webfont.woff2') format('woff2'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-bold-webfont.woff') format('woff'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-bold-webfont.ttf') format('truetype'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-bold-webfont.svg#open_sansbold') format('svg'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-bolditalic-webfont.eot'); src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-bolditalic-webfont.woff2') format('woff2'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-bolditalic-webfont.woff') format('woff'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-bolditalic-webfont.ttf') format('truetype'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-bolditalic-webfont.svg#open_sansbold_italic') format('svg'); font-weight: 700; font-style: italic; } @font-face { font-family: 'Open Sans'; src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-italic-webfont.eot'); src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-italic-webfont.eot?#iefix') format('embedded-opentype'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-italic-webfont.woff2') format('woff2'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-italic-webfont.woff') format('woff'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-italic-webfont.ttf') format('truetype'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-italic-webfont.svg#open_sansitalic') format('svg'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Open Sans'; src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-regular-webfont.eot'); src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-regular-webfont.woff2') format('woff2'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-regular-webfont.woff') format('woff'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-regular-webfont.ttf') format('truetype'), url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/opensans-regular-webfont.svg#open_sansregular') format('svg'); font-weight: 400; font-style: normal; } /* General Rules */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { font-size: inherit; } .acentcolour { color: #cb571d; } html, body { font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; overflow-x: hidden; overflow-y: auto; } ol, ul.square, ul.circle, ul.disc { margin-left: 20px; } body strong { font-weight: 700; font-family: inherit; } a:hover { color: #cb571d; text-decoration: none; outline: 0; } /*Alignment Defaults*/ .row { position: relative; float: left; width: 100%; } .grid_12, .grid_9, .grid_8, .grid_6, .grid_4, .grid_3 { position: relative; float: left; margin: 0px; padding: 0px; box-sizing: border-box; } .grid_12 { width: 100%; } .grid_9 { width: 75%; } .grid_8 { width: 66.6%; } .grid_6 { width: 50%; } .grid_4 { width: 33.3%; } .grid_3 { width: 25%; } .row .row__container, .instagram-feed ul, .layout--columnsOneA #contentrow .row__container .category-productingrid, .section.general_cont .row__container, #contentiInnerRow .login__wrapper, .DT_product-details-page.DTV3 .DT_product-collateral-top, div.blogpost { position: relative; float: none; width: 1500px; max-width: 90%; display: block; margin: 0 auto; } .row .row__container_2 { width: 1300px; max-width: 90%; } #AfterMainContainer>.row__container, #BeforeMainContainer>.row__container { width: 100%; max-width: 100%; } /* Buttons defaults */ button, input[type="button"], input[type="submit"], a.btn_site, .homeFeaturedProducts .homepage-large-products .productlistproductdetailbutton, html body .listWrapper .listItem a.homepage-category-details-button, html body .listWrapper .listItem .buttons .productlistproductdetailbutton, .basketEditButton, .editoractionbutton, .saveCommentButton, .downloadPDFProof, .addnewfriendcomment, #create-button, .startYBPreview, .bookoptions button, .saveYearbookSettings, .editBookUnitSave, .saveSelectedTemplateAction, .createBookUnitSave, .addNewQuestion, .createBookUnitAction, .add-contributors-button, .update-button, #newAlbum, #markerControls button, .registerbutton, .file-upload-button, .facebookbutton, .report-action, .loginbutton, .continueshoppingbutton, .addaddressbutton, .saveaddressbutton, .changepasswordbutton, .registernextstepbutton, .productlistproductdetailbutton, .productvariantaddtocartbutton, .editaddressbutton, .orderdetailsbutton, .productwritereviewbutton, .savecustomerinfobutton, .removediscountbuttonm, #check-availability-button, .checkoutbutton, .checkout-data .opc .section .newaddressnextstepbutton, .checkout-data .opc .section .shippingmethodnextstepbutton, .checkout-data .opc .section .paymentmethodnextstepbutton, .checkout-data .opc .section .paymentinfonextstepbutton, .checkout-data .opc .section .confirmordernextstepbutton, .checkout-data .opc .section .back-link a, .orders_v2 .order_search .order_search_button, .orders_v2 .reorderbutton, .orders_v2 .order_container .order_show_details_but, .saved-projects-list table td:first-child a, .saved-projects-list table td button, .t-button, #ImageUploader #AddAlbum__Done button, #ImageUploader .AddAlbum__options button, #order_details_v2 .od_reorder .od_reorder_button, #order_details_v2 .od_print_button { font-size: 15px; font-family: 'Kanit', sans-serif; letter-spacing: 1px; height: 50px; line-height: 28px; padding-left: 16px; padding-right: 16px; padding-top: 10px; padding-bottom: 10px; border: solid 2px #CB571D; color: #000; background: transparent; text-transform: uppercase; box-sizing: border-box; display: inline-block; text-decoration: none; -webkit-transition: ease-in background 0.2s; -moz-transition: ease-in background 0.2s; -o-transition: ease-in background 0.2s; transition: ease-in background 0.2s; border-radius: 0px; } .orders_v2 .default, .orders_v2 .order_All, .orders_v2 .order_toggle_filter, .orders_v2 .order_page_select_container .order_page_but, .orders_v2 .order_page_select_container .order_page_state { font-size: 15px; font-family: 'Kanit', sans-serif; letter-spacing: 1px; height: 50px; line-height: 28px; padding-left: 16px; padding-right: 16px; padding-top: 10px; padding-bottom: 10px; text-transform: uppercase; box-sizing: border-box; display: inline-block; text-decoration: none; -webkit-transition: ease-in background 0.2s; -moz-transition: ease-in background 0.2s; -o-transition: ease-in background 0.2s; transition: ease-in background 0.2s; } button:hover, input[type="button"]:hover, input[type="submit"]:hover, a.btn_site:hover, .homeFeaturedProducts .homepage-large-products .productlistproductdetailbutton:hover, html body .listWrapper .listItem a.homepage-category-details-button:hover, html body .listWrapper .listItem .buttons .productlistproductdetailbutton:hover, .basketEditButton:hover, .editoractionbutton:hover, .saveCommentButton:hover, .downloadPDFProof:hover, .addnewfriendcomment:hover, #create-button:hover, .startYBPreview:hover, .bookoptions button:hover, .saveYearbookSettings:hover, .editBookUnitSave:hover, .saveSelectedTemplateAction:hover, .createBookUnitSave:hover, .addNewQuestion:hover, .createBookUnitAction:hover, .add-contributors-button:hover, .update-button:hover, #newAlbum:hover, #markerControls button:hover, .registerbutton:hover, .file-upload-button:hover, .facebookbutton:hover, .report-action:hover, .loginbutton:hover, .continueshoppingbutton:hover, .saveaddressbutton:hover, .changepasswordbutton:hover, .registernextstepbutton:hover, .productlistproductdetailbutton:hover, .productvariantaddtocartbutton:hover, .editaddressbutton:hover, .orderdetailsbutton:hover, .productwritereviewbutton:hover, .savecustomerinfobutton:hover, .removediscountbuttonm:hover, #check-availability-button:hover, .checkoutbutton:hover, .checkout-data .opc .section .newaddressnextstepbutton:hover, .checkout-data .opc .section .shippingmethodnextstepbutton:hover, .checkout-data .opc .section .paymentmethodnextstepbutton:hover, .checkout-data .opc .section .paymentinfonextstepbutton:hover, .checkout-data .opc .section .confirmordernextstepbutton:hover, .checkout-data .opc .section .back-link a:hover, .orders_v2 .reorderbutton:hover, .orders_v2 .order_container .order_show_details_but:hover, .saved-projects-list table td:first-child a:hover, .saved-projects-list table td button:hover, .t-button:hover, #ImageUploader #AddAlbum__Done button:hover, #ImageUploader .AddAlbum__options button:hover, #order_details_v2 .od_reorder .od_reorder_button:hover, #order_details_v2 .od_print_button:hover { color: #fff; background-color: #CB571D; border: solid 2px #CB571D; } #updatecart.updatecartbutton, #checkout.checkoutbutton, .cart-footer .cart-collaterals input.applycouponcodebutton, .checkoutbutton, .checkout-data .opc .section .newaddressnextstepbutton, .checkout-data .opc .section .shippingmethodnextstepbutton, .checkout-data .opc .section .paymentmethodnextstepbutton, .checkout-data .opc .section .paymentinfonextstepbutton, .checkout-data .opc .section .confirmordernextstepbutton, .loginbutton, .table-container input.registernextstepbutton, .homeFeaturedProducts .homepage-large-products .listItem:hover .productlistproductdetailbutton, html body .listWrapper .listItem:hover a.homepage-category-details-button, html body .listWrapper .listItem:hover .buttons .productlistproductdetailbutton, .homeFeaturedProducts .homepage-large-products .listItem:hover .add-info .productlistproductdetailbutton, body input.saveaddressbutton, .orders_v2 .order_search .order_search_button, .orders_v2 .order_container .order_show_details_but, body .account-page .addaddressbutton, .customer-SavedProjects #searchSavedProjects, #ImageUploader #AddAlbum__Done button, .saved-projects-list table td:first-child a, input.passwordrecoverybutton, .t-button-primary, #order_details_v2 .od_print_button, .signup_for_newsletter .signup_submit { color: #fff !important; background-color: #CB571D !important; border: solid 2px #CB571D; } #updatecart.updatecartbutton:hover, #checkout.checkoutbutton:hover, .cart-footer .cart-collaterals input.applycouponcodebutton:hover, .checkoutbutton:hover, .checkout-data .opc .section .newaddressnextstepbutton:hover, .checkout-data .opc .section .shippingmethodnextstepbutton:hover, .checkout-data .opc .section .paymentmethodnextstepbutton:hover, .checkout-data .opc .section .paymentinfonextstepbutton:hover, .checkout-data .opc .section .confirmordernextstepbutton:hover, .loginbutton:hover, .table-container input.registernextstepbutton:hover, .homeFeaturedProducts .homepage-large-products .listItem:hover .productlistproductdetailbutton:hover, html body .listWrapper .listItem:hover a.homepage-category-details-button:hover, html body .listWrapper .listItem:hover .buttons .productlistproductdetailbutton:hover, .homeFeaturedProducts .homepage-large-products .listItem:hover .add-info .productlistproductdetailbutton:hover, .signup_for_newsletter .signup_submit:hover, .cta-banner .btn_site:hover, body input.saveaddressbutton:hover, .orders_v2 .order_search .order_search_button:hover, .orders_v2 .order_container .order_show_details_but:hover, body .account-page .addaddressbutton:hover, .customer-SavedProjects #searchSavedProjects:hover, #ImageUploader #AddAlbum__Done button:hover, .saved-projects-list table td:first-child a:hover, input.passwordrecoverybutton:hover, .t-button-primary:hover, #order_details_v2 .od_print_button:hover { background-color: #b13b00 !important; } input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea, select, .item-value select, #BillingNewAddress_CountryId, #BillingNewAddress_StateProvinceId, .address-select, #PurchaseOrderNumber, #checkout-emailaddress-load .email-address, .orders_v2 .order_search .order_searchbox, .orders_v2 .order_sort select { letter-spacing: 1px; line-height: 28px; padding-left: 16px; padding-right: 16px; padding-top: 9px; padding-bottom: 9px; display: inline-block; box-sizing: border-box; -webkit-appearance: none; border: solid 2px #eee; outline: none !important; border-radius: 0px !important; height: 50px; } input[type="text"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, textarea:hover, select:hover, .item-value select:hover, .orders_v2 .order_search .order_searchbox:hover, .orders_v2 .order_sort select:hover { border: solid 2px #ccc; } input[type="text"], input[type="email"], input[type="number"] { height: 50px; } textarea {} select, .pika-title select { height: 50px; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/dropdown_arrow.svg'); background-position: right; background-size: contain; background-repeat: no-repeat; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; width: 25px; height: 25px; -webkit-appearance: none; border: solid 2px #000; vertical-align: middle; margin-right: 10px; margin-top: -4px; outline: none; background-color: #fff; } input[type="radio"] { border-radius: 20px; } input[type="checkbox"]:checked { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/checkbox-check.svg'); background-position: center; background-size: contain; background-repeat: no-repeat; } input[type="radio"]:checked { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/radio-dot.svg'); background-position: center; background-size: contain; background-repeat: no-repeat; } /* Table defaults */ .table-container { border: none; background: transparent; margin-bottom: 10px; } .table-container tr { border-top: none; } .item-name { text-align: left; } .table-container input, .table-container select, .item-value .text-box { width: 100%; } .table-container input[type="checkbox"], .table-container input[type="radio"] { width: 25px; } /* Colour default classes */ /* Color primary */ .col_prim, a.col_prim { color: #CB571D; } .bkg_col_prim, a.bkg_col_prim { background-color: #CB571D; } /* Color secondary */ .col_sec, a.col_sec { color: #000; } .bkg_col_sec, a.bkg_col_sec { background-color: #000; } /* Color generic */ .col_gen, a.col_gen { color: #888; } .bkg_col_gen, a.bkg_col_gen { background-color: #888; } /* Color grey */ .col_gry, a.col_gry { color: #EFEFEF; } .bkg_col_gry, a.bkg_col_gry { background-color: #EFEFEF; } .bkg_col_blk, a.bkg_col_vlky { background-color: #000000; } /* Color white */ .col_lgt, a.col_lgt { color: #fff; } .bkg_col_lgt, a.bkg_col_lgt { background-color: #fff; } /* Global float defaults */ .def-padding, .homeFeaturedProductsWrapper, .homeFeaturedCategoriesWrapper, .instagram-feed, footer, .layout--columnsOneD #album { position: relative; float: left; width: 100%; } /* Global padding defaults */ .def-padding, .homeFeaturedProductsWrapper, .homeFeaturedCategoriesWrapper, .instagram-feed, footer, .layout--columnsOneA #contentrow .row__container .category-productingrid, section.general_cont, #contentiInnerRow .login__wrapper, #contentrow .account-page, .layout--columnsOneD #album, div.blogpost { padding-top: 4%; padding-bottom: 4%; } footer { background: #000; } .footercopyrightrow { background: transparent; border-bottom: none; color: #fff; position: relative; width: 100%; float: left; } h1 { font-weight: 800; font-size: 36px; font-family: 'Kanit', sans-serif; letter-spacing: 1.5px; } .bestsellers h3, .featuredproducts h3, .instagram-feed h2, .related-products-grid h3 { font-weight: 800; font-size: 36px; line-height: 50px; font-family: 'Kanit', sans-serif; letter-spacing: 1.5px; color: #000; text-align: center; margin-bottom: 50px; position: relative; float: left; width: 100%; text-transform: uppercase; } .bestsellers h3:before, .featuredproducts h3:before, .instagram-feed h2:before, .related-products-grid h3:before { content: ''; position: absolute; width: 76px; border-bottom: solid 2px #cb571d; left: 50%; margin-left: -38px; top: 65px; } .related-products-grid h3 { color: #fff; } h2, html body .listWrapper .listItem .category-item .product-title, html body .listWrapper .listItem .sub-category-item .category-title, .register-title, .login-title, .section-title, .block-blog-archive .listbox:before, .blog .blogposts .post:first-child .blogtitle, .layout--columnsOneD .page-title-cont h1, .layout--columnsOneVTwo .page-title-cont h1 { font-weight: 800; font-size: 30px; line-height: 40px; font-family: 'Kanit', sans-serif; letter-spacing: 1px; text-transform: uppercase; } h3, .footerinner h3, .blog .blogposts .blogtitle, #mce-responses .response { font-weight: 700; font-size: 24px; line-height: 32px; font-family: 'Kanit', sans-serif; letter-spacing: 0.5px; } /* Promo / Main titles */ #logorow #sliderrow li .copy h1, .promo-h1 { font-size: 90px; line-height: 100px; } #logorow #sliderrow li .copy h2, .promo-h2, .page-title-cont h1, h2.promo, .general_cont h2, .DT_product-collateral .productname, .block-blog-archive .title { font-size: 70px; line-height: 80px; } section.general_cont h2 { font-size: 50px; line-height: 65px; } #logorow #sliderrow li .copy h3, .promo-h3 { font-size: 40px; line-height: 50px; } #logorow #sliderrow li .copy h1, #logorow #sliderrow li .copy h2, #logorow #sliderrow li .copy h3 { margin: 0px; } /* ========= */ h4, .footerinner h3, .modal-header h3 { font-weight: 700; font-size: 20px; line-height: 26px; font-family: 'Open Sans'; letter-spacing: 1px; } h5 { font-weight: 700; font-size: 16px; line-height: 20px; font-family: 'Open Sans' } ul, ol, p { font-size: 18px; font-weight: 400; line-height: 30px; } .footerinner li a { font-size: 16px; font-weight: 400; line-height: 24px; } #contentrow { min-height: 50vh; } /* Header / Menus */ #toprow { position: fixed; width: 100%; left: 0px; top: 0px; background: #000; z-index: 10; box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 300px; -webkit-transition: ease-in top 0.3s; -moz-transition: ease-in top 0.3s; -o-transition: ease-in top 0.3s; transition: ease-in top 0.3s; } @media only screen and (max-width: 959px) { .hide-menu #toprow { top: -90px; } } @media only screen and (max-height: 900px) { .hide-menu #toprow { top: -90px; } } #toprow .row__container { position: relative; float: left; width: 1500px; max-width: 96%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } #toprow .row__container .grid_4, #toprow .row__container .grid_8 { position: relative; float: left; width: 100%; margin: 0px; padding: 0px; text-align: center; } #toprow .row__container .grid_8 { padding-top: 22px; height: 80px; } #toprow .row__container .grid_8 .logo { position: absolute; left: 0px; top: 10px; width: 15%; bottom: 10px; background: transparent; } #toprow .row__container .grid_8 .logo a { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/toptrumps_logomytoptrumps-dot-com-logo-White.png'); background-size: contain; background-repeat: no-repeat; background-position: left; } #toprow .row__container .grid_8 .headermenu, #toprow .row__container .grid_8 .headermenu ul, #toprow .row__container .grid_8 .headermenu ul li { display: inline-block; } #toprow .row__container .grid_8 .headermenu ul li {} #toprow .row__container .grid_8 .headermenu ul li a { color: #fff; font-size: 16px; padding: 9px; display: inline-block; text-decoration: none; } #toprow .row__container .grid_8 .minishoppingcartwrapper { position: absolute; right: 70px; top: 10px; width: 60px; height: 60px; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/Cart.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; } #toprow .row__container .grid_8 .minishoppingcartwrapper *, #logorow .minishoppingcartwrapper * { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none; border: 0px; } #toprow .row__container .grid_8 .minishoppingcartwrapper a, #logorow .minishoppingcartwrapper a { z-index: 2; color: #fff; font-weight: bold; font-size: 10px; } #toprow .row__container .grid_8 .minishoppingcartwrapper img, #logorow .minishoppingcartwrapper img { display: none; } #toprow .row__container .grid_8 .minishoppingcartwrapper .minishoppingcartinner, #logorow .minishoppingcartwrapper .minishoppingcartinner { display: block; position: absolute; background: #cb571d; width: 20px; height: 20px; text-align: center; line-height: 20px; border-radius: 10px; font-size: 12px; color: #fff; left: auto; bottom: auto; top: 5px; right: 5px; overflow: hidden; } #toprow .row__container .grid_8 .minishoppingcartwrapper .minishoppingcartinner { overflow: hidden; } #toprow .row__container .grid_8 .account-menu-button { position: absolute; top: 10px; width: 60px; height: 60px; right: 0px; border: 0px; background: transparent; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/Account.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; } #logorow { margin-top: 0px; margin-bottom: 0px; z-index: 20; overflow: hidden; } /*Homepage Slider*/ #logorow #sliderrow { position: relative; float: left; width: 100vw; height: 100vh; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); margin: 0px; padding: 0px; -webkit-transition: ease-in height 0.5s; -moz-transition: ease-in height 0.5s; -o-transition: ease-in height 0.5s; transition: ease-in height 0.5s; } #logorow .grid_12 {} #logorow #sliderrow .grid_12, #logorow #sliderrow .grid_12 #mainslider, #logorow #sliderrow .grid_12 #mainslider ul.slides, #logorow #sliderrow .grid_12 #mainslider ul.slides li { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: #000000; overflow: hidden; } #logorow #sliderrow li { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-repeat: no-repeat; background-size: cover; background-position: bottom; } #logorow #sliderrow li .overlay { position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-repeat: no-repeat; background-size: cover; background-position: bottom; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } /*#logorow #sliderrow li:nth-child(2).flex-active-slide .overlay, #logorow #sliderrow li:nth-child(1) .overlay { background-position:bottom; -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); width: 100%; } #logorow #sliderrow li:nth-child(1).flex-active-slide .overlay, #logorow #sliderrow li:nth-child(2) .overlay { background-position: center 10%; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); width: 85%; } */ #logorow #sliderrow li .copy h { display: none; } #logorow #sliderrow li .copy, .page-title-cont h1, .DT_product-collateral .productname { position: absolute; left: 7%; top: 50%; font-weight: bold; color: #fff; text-shadow: rgba(0, 0, 0, .5) 0px 0px 20px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-family: 'Kanit', sans-serif; letter-spacing: 2px; padding: 30px; padding-left: 40px; } #logorow #sliderrow li .copy.right-side { left: auto; right: 7%; text-align: right; } #logorow #sliderrow li .copy:before, .page-title-cont h1:before, h2.promo:before, .DT_product-collateral .productname:before, .block-blog-archive .title:before { content: ''; position: absolute; width: 50%; top: 0px; left: 0px; bottom: 0px; border: solid 2px #CB571D; border-right: none; } #logorow #sliderrow li .copy.right-side:before { left: auto; right: 0px; border: solid 2px #CB571D; border-left: none; } #logorow #sliderrow li .copy strong { font-size: 120%; color: #fff; } #logorow .logo { position: absolute; top: 60px; left: 60px; width: 134px; height: 112px; } #logorow .logo a { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/toptrumps_logomytoptrumps-dot-com-logo-White.png'); background-size: contain; background-position: center; background-repeat: no-repeat; } #logorow #sliderrow .grid_12 #mainslider:before { content: ''; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/Dark-Overlay-500.png'); background-size: cover; background-position: bottom; background-repeat: no-repeat; position: absolute; top: 0px; left: 0px; width: 100%; height: 34vh; z-index: 9; pointer-events: none; } #logorow #sliderrow .grid_12 #mainslider:after, #logorow #sliderrow .grid_12 #mainslider ul.slides li:after { content: ''; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/Dark-Overlay-200.png'); background-size: cover; background-position: top; background-repeat: no-repeat; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 20vh; z-index: 9; pointer-events: none; } #logorow #sliderrow .grid_12 #mainslider ul.slides li:after { display: none; } #logorow .row__container { width: 100%; max-width: 100%; } #logorow .headermenu { position: absolute; top: 90px; z-index: 9; left: 200px; right: 200px; text-align: center; } #logorow .headermenu nav li { display: inline-block; margin-left: 1%; margin-right: 1%; } #logorow .headermenu nav li, #logorow .headermenu nav li a { color: #fff; font-size: 20px; font-weight: 700; text-shadow: rgba(0, 0, 0, .5) 1px 1px 6px; text-decoration: none; } #logorow .headermenu nav li a { padding: 10px; border: solid 2px transparent; } #logorow .headermenu nav li a:hover { border-color: #CB571D; } #logorow .social-icons, #menurow .social-icons { position: absolute; bottom: 60px; left: 50px; z-index: 9; color: #fff; } #menurow .social-icons { color: #000; position: relative; float: left; top: 0px; left: 0px; bottom: 0px; right: 0px; margin-top: 60px; padding-top: 30px; border-top: solid 2px #000; } #logorow .social-icons a .fa, #menurow .social-icons a .fa { display: inline-block; margin: 0px; } #logorow .social-icons a, #menurow .social-icons a { display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 32px; border: solid 2px #fff; border-radius: 100%; font-size: 14px; color: #fff; margin-right: 12px; } #menurow .social-icons a { border-color: #000; color: #000; } #logorow .social-icons a:hover, #menurow .social-icons a:hover { border-color: #b13b00; color: #b13b00; } #logorow .social-icons a .fa.fa-instagram, #menurow .social-icons a .fa.fa-instagram { margin-left: -1px; display: inline-block; width: 18px; height: 18px; vertical-align: -10%; } a.create-your-own { position: absolute; bottom: 0px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; color: #fff; padding: 20px; padding-bottom: 45px; background: #cb571d; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; -webkit-transition: ease-in background 0.2s; -moz-transition: ease-in background 0.2s; -o-transition: ease-in background 0.2s; transition: ease-in background 0.2s; } a.create-your-own:hover { background: #b13b00; text-decoration: none; } a.create-your-own:after { content: ''; display: block; width: 25px; height: 25px; border-left: solid 3px #fff; border-bottom: solid 3px #fff; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; bottom: 15px; left: 50%; margin-left: -14px; } #logorow .flex-control-thumbs { margin: 0; position: absolute; overflow: hidden; z-index: 9; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); bottom: auto; left: auto; right: 40px; width: 40px; min-height: 40px; } #logorow .flex-control-thumbs li { position: relative; float: left; width: 20px; border: solid 2px #fff; height: 20px; margin: 10px; padding: 2px; box-sizing: border-box; border-radius: 10px; } #logorow .flex-control-thumbs img { display: block; opacity: 0; cursor: pointer; width: 12px; height: 12px; background: #CB571D; border-radius: 10px; } #logorow .flex-control-thumbs .flex-active { opacity: 1; } #logorow .minishoppingcartwrapper { position: absolute; right: 130px; top: 80px; width: 60px; height: 60px; z-index: 10; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/Cart.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; } #logorow .account-menu-button { position: absolute; top: 80px; width: 60px; height: 60px; right: 60px; border: 0px; background: transparent; z-index: 10; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/Account.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; } #logorow .minishoppingcartwrapper, #logorow .account-menu-button, #toprow .row__container .grid_8 .account-menu-button, #toprow .row__container .grid_8 .minishoppingcartwrapper { border: solid 2px transparent; box-sizing: border-box; } #logorow .minishoppingcartwrapper:hover, #logorow .account-menu-button:hover, #toprow .row__container .grid_8 .account-menu-button:hover, #toprow .row__container .grid_8 .minishoppingcartwrapper:hover { border: solid 2px #CB571D; box-sizing: border-box; } /* MENUS */ #menurow .search.grid_4_inner, #menurow .menu.grid_8_inner { position: fixed; top: 0px; bottom: 0px; background: #fff; width: 360px; z-index: 10000; padding: 50px; box-sizing: border-box; box-shadow: rgba(0, 0, 0, 1) 0px 0px 20px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; overflow-y: auto; } #menurow .search.grid_4_inner { right: -400px; } #menurow .menu.grid_8_inner { left: -400px; } #menurow.account-menu-open .search.grid_4_inner { right: 0px; } #menurow.mobile-menu-open .menu.grid_8_inner { left: 0px; } #menurow .close-menu-btn { width: 40px; height: 40px; border: none; position: absolute; top: 48px; right: 40px; background: transparent; z-index: 3; } #menurow .close-menu-btn span { position: absolute; top: 19px; left: 5px; width: 30px; height: 2px; background: #000; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #menurow .close-menu-btn span+span { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #menurow .adminlinks, #menurow .adminlinks { padding: 0px; border-top: none; background: transparent; } #menurow .header-links-wrapper, #menurow .adminlinks, #menurow .adminlinks * { position: initial; display: inline; } #menurow .adminmenu li, #menurow .my-account-links a { position: relative; float: left; width: 100%; display: block; padding: 0px; margin: 0; text-align: left; padding-left: 40px; height: 40px; line-height: 40px; vertical-align: 40px; } #menurow .adminmenu li:before, #menurow .my-account-links a:before { content: ''; position: absolute; top: 0px; left: 0px; width: 40px; height: 40px; } #menurow .adminmenu li a, #menurow .my-account-links a { text-decoration: none; color: #000; } #menurow .adminmenu li.cf_headerlinks_myaccount:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/account_menu_account.svg'); } #menurow .adminmenu li.cf_headerlinks_myaccount { margin-bottom: 100px; } #menurow .adminmenu li.cf_headerlinks_logout:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/account_menu_logout.svg'); } #menurow .adminmenu li.cf_headerlinks_login:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/account_menu_logout.svg'); } #menurow .adminmenu li.cf_headerlinks_shoppngcart:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/account_menu_cart.svg'); } #menurow .adminmenu li.cf_headerlinks_admin:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/account_menu_resetpassword.svg'); } #menurow .adminmenu li.cf_headerlinks_workinprogress:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/account_menu_resetpassword.svg'); } #menurow .adminmenu li.cf_headerlinks_approval:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/account_menu_resetpassword.svg'); } #menurow .my-account-links { display: none; } #menurow .my-account-links a.media_library:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/account_menu_media_album.svg'); } #menurow .my-account-links a.saved_projects:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/account_menu_savedprojects.svg'); } #menurow .my-account-links a.my_orders:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/account_menu_orders.svg'); } #menurow .my-account-links a.addresses:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/account_menu_addresses.svg'); } #menurow .my-account-links a.reset_password:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/account_menu_resetpassword.svg'); } #menurow .my-account-links a.log_out:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/account_menu_logout.svg'); } #menurow .my-account-links a.header_search:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/search.svg'); background-repeat: no-repeat; background-position: center; background-size: 60%; } #menurow .my-account-links a.log_out { margin-top: 100px; } #menurow .adminmenu li .fa, #menurow .adminmenu li.cf_headerlinks_privatemessages, #menurow .adminmenu li.cf_headerlinks_logout { display: none; } .row2 .left .bigblock.jobInfo, .row2 .left .smallblock.customerInfo, #WorkInProgressGrid .t-last input:nth-child(2) { display: none !important; } #WorkInProgressGrid .t-last input { min-width: 100%; } .menuwrapper { border-width: 0px; } #workflow--approval:before { content: 'Approve orders'; } #WorkInProgressGrid:before { content: 'Orders processing'; } #WorkInProgressGrid:before, #workflow--approval:before { font-weight: 800; font-size: 30px; font-family: 'Kanit', sans-serif; letter-spacing: 1.5px; display: block; border-bottom: solid 1px #000; padding: 7px; padding-left: 14px; color: #cb571d; } #menurow { margin-bottom: 0px; } #navlower { margin-bottom: 80px; } body.mobile-menu-open #menurow .menu.grid_8_inner .menu-logo { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/toptrumps_logomytoptrumps-dot-com-logo-black.png'); width: 100%; height: 100px; background-size: contain; background-repeat: no-repeat; margin-bottom: 40px; } #menurow .menu.grid_8_inner .headermenu li { position: relative; float: left; width: 100%; display: block; padding: 0px; margin: 0; text-align: left; height: 40px; line-height: 40px; vertical-align: 40px; font-size: 20px; } /* new mega menu */ ul.megaMenu { position: relative; display: inline-block; width: 100%; } ul.secondMenu { visibility: hidden; display: block; position: absolute; width: auto; margin: 0px 0px 0px 25px; background-color: transparent; float: left; transition-timing-function: cubic-bezier(.33, 0, .86, .73); transition-duration: 0.3s; top: 25px; opacity: 0; padding-top: 30px; } ul.secondMenu:before { content: ''; width: 20px; height: 20px; background-color: black; position: absolute; top: 20px; left: 4px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } ul.thirdMenu { visibility: hidden; background-color: black; position: absolute; width: max-content; display: inline-block; margin: 0px 0px 0px 100%; top: 20px; left: -10px; opacity: 0; } ul.thirdMenu:before { content: ''; width: 20px; height: 20px; background-color: black; position: absolute; top: 4px; left: 2px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } li.thirdMenuParent:hover ul.thirdMenu { visibility: visible; margin: 0px 0px 0px 100%; padding-left: 10%; transition-timing-function: cubic-bezier(.33, 0, .86, .73); transition-duration: 0.3s; opacity: 1; left: 0px; top: 20px; background-color: transparent; } li.secondMenuParent:hover ul.secondMenu { visibility: visible; opacity: 1; margin-top: 10px; } ul.secondMenu li { display: block !important; margin: 0px !important; width: 100%; position: relative; background-color: black; padding: 10px; } ul.secondMenu li a, ul.thirdMenu li a { display: block; position: relative; margin: 0px; background-color: black; box-sizing: border-box; } @media only screen and (max-width: 1500px) { ul, ol, p, .footerinner li a { font-size: 16px; font-weight: 400; line-height: 24px; } #logorow .logo { top: 40px; left: 40px; width: 120px; height: 100px; } #logorow .headermenu { top: 65px; left: 160px; right: 160px; } #logorow .minishoppingcartwrapper { right: 110px; top: 50px; } #logorow .account-menu-button { top: 50px; right: 40px; } #logorow .social-icons { bottom: 40px; left: 40px; } #logorow #sliderrow li .copy h1, .promo-h1 { font-size: 80px; line-height: 90px; } #logorow #sliderrow li .copy h2, .promo-h2 { font-size: 64px; line-height: 70px; } } @media only screen and (max-height: 900px) { #logorow .logo { top: 40px; left: 40px; width: 120px; height: 100px; } #logorow .headermenu { top: 65px; left: 160px; right: 160px; } #logorow .minishoppingcartwrapper { right: 110px; top: 50px; } #logorow .account-menu-button { top: 50px; right: 40px; } #logorow .social-icons { bottom: 40px; left: 40px; } #logorow #sliderrow li .copy h1, .promo-h1 { font-size: 80px; line-height: 90px; } #logorow #sliderrow li .copy h2, .promo-h2 { font-size: 64px; line-height: 70px; } } /* @media only screen and (min-width: 1201px) { .headermenu ul.showOnMobile { display: none; } } */ @media only screen and (max-width: 1200px) { #logorow .headermenu { display: none; } /* .headermenu ul.showOnMobile { display: block; } ul.megaMenu.hideOnMobile { display: none; } */ #logorow .logo { position: absolute; top: 30px; left: 50%; margin-left: -48px; width: 96px; height: 79px; } #logorow .mobile-menu-button, #toprow .row__container .grid_8 .mobile-menu-button { position: absolute; top: 30px; width: 60px; height: 60px; left: 30px; border: 0px; display: block !important; background: transparent; z-index: 10; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/mobile_menu_button.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; } #logorow #sliderrow li .copy { position: absolute; left: 5%; padding: 20px; padding-left: 30px; } #toprow .row__container .grid_8 .mobile-menu-button { left: 0px; top: 10px; } #logorow .minishoppingcartwrapper { right: 90px; top: 30px; } #logorow .account-menu-button { top: 30px; right: 30px; } #logorow .social-icons { bottom: 30px; left: 30px; } #logorow .flex-control-thumbs { right: 15px; } #logorow #sliderrow li .copy h3, .promo-h3 { font-size: 36px; line-height: 40px; } .homeFeaturedProducts .homepage-large-products .add-info .productlistproductdetailbutton, html body .listWrapper .listItem a.homepage-category-details-button { width: 210px; margin-left: -105px; } #toprow .row__container .grid_8 .headermenu { display: none; } #toprow .row__container .grid_8 .logo a { background-position: center; } #toprow .row__container .grid_8 .logo { left: 50%; width: 100px; margin-left: -50px; } } @media only screen and (max-width: 1200px) and (min-height: 1200px) { #logorow #sliderrow li .overlay { right: -10%; width: 140%; } } @media only screen and (max-width: 959px) { #logorow .mobile-menu-button { top: 30px; left: 30px; } } @media only screen and (max-width: 959px) and (min-height: 959px) { #logorow #sliderrow li .overlay { right: -10%; width: 140%; } } @media only screen and (max-width: 767px) { #toprow .row__container .grid_8 { padding-top: 0px; height: 50px; } #toprow .row__container .grid_8 .mobile-menu-button { left: 0px; top: 0px; height: 50px; width: 50px; } #toprow .row__container .grid_8 .account-menu-button { right: 0px; top: 0px; height: 50px; width: 50px; } nav .selectnavwrapper { display: none; } nav ul { display: block; } } @media only screen and (max-width: 479px) {} /* Products, categories thumb defaults */ html body .listWrapper { position: relative; float: left; width: 100%; text-align: center; display: block; } html body .listWrapper .listItem, .product-grid .listItem.grid_3, .sub-category-grid .listItem.grid_3 { display: inline-block; width: 31.33%; float: none; vertical-align: top; margin: 1%; padding-top: 25%; padding-bottom: 170px; background: transparent; border: none; } html body .listWrapper .listItem * { padding: 0px !important; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; border: none; background: transparent; margin: 0px; } html body .listWrapper .listItem .product-item--image, html body .listWrapper .listItem .product-item--info { display: inline; position: initial; } .product-grid .product-title a { color: #000000; } html body .listWrapper .listItem .add-info * { position: initial; display: inline; } html body .listWrapper .listItem .picture { bottom: 150px; height: auto; } html body .listWrapper .listItem .picture img { width: auto; height: auto; max-width: 100%; max-height: 100%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } html body .listWrapper .listItem .product-title, html body .listWrapper .listItem .sub-category-item .category-title { position: relative; float: left; height: auto; width: 100%; display: block; margin-top: 76% !important; padding-bottom: 18px !important; margin-bottom: 0px; text-transform: uppercase; z-index: 2; } html body .listWrapper .listItem .product-title:after, html body .listWrapper .listItem .sub-category-item .category-title:after { content: ''; position: absolute; width: 76px; border-bottom: solid 2px #cb571d; left: 50%; margin-left: -38px; bottom: 12px; } html body .listWrapper .listItem .product-title *, html body .listWrapper .listItem .category-title * { position: relative; font-size: 22px; } html body .listWrapper .listItem .description, html body .listWrapper .listItem .category-short-description, html body .listWrapper .listItem .short-description { position: relative; float: left; height: auto; width: 320px; display: block !important; font-size: 14px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); max-width: 100%; } html body .listWrapper .listItem .add-info { height: auto; bottom: 0px; top: auto; margin: 0px; display: block; left: 0px; } html body .listWrapper .listItem .add-info .prices, html body .listWrapper .listItem .add-info .addtocart { display: none; } html body .listWrapper .listItem a:hover { color: #000; text-decoration: none; } /* HOMEPAGE */ .homebanners .banner { margin-bottom: 0px; } .homeFeaturedProductsWrapper { position: relative; float: left; width: 100%; } #contentrow { margin-bottom: 0px; } /* Newsletter Signup */ .signup_for_newsletter { text-align: center; padding-left: 5%; padding-right: 5%; box-sizing: border-box; } .signup_for_newsletter h2 { margin-bottom: 30px; } .signup_for_newsletter .signup-email { border: none; width: 74%; float: left; } .signup_for_newsletter .signup_submit { width: 25%; float: left; } .signup_for_newsletter .signup_success { color: #CB571D; } .signup_for_newsletter .signup_error { color: red; } .signup_for_newsletter .signup_success, .signup_for_newsletter .signup_error { font-size: 29px; } .signup_for_newsletter .signup_success a, .signup_for_newsletter .signup_error a { color: #cb571d; } .signup_for_newsletter .newsletter-subscribe-form { display: inline-block; width: 900px; max-width: 90%; } /* Instagram Feed*/ .instagram-feed { display: none; } .instagram-feed { text-align: center; background: #efefef; position: relative; float: left; width: 100%; } .instagram-feed li h2 { color: #fff; margin-bottom: 40px; } .instagram-feed ul { background: transparent; } .instagram-feed li { position: relative; float: left; width: 25%; height: 0px; padding: 0px; padding-bottom: 25%; overflow: hidden; } .instafeed:hover li { opacity: 0.7; } .instafeed:hover li:hover { opacity: 1; } .instagram-feed li:nth-child(1) {} .instagram-feed li:nth-child(2) { float: right; width: 50%; padding-bottom: 50%; } .instagram-feed li a, .instagram-feed li img { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: 0px; padding: 0px; width: 100%; height: auto; } .instagram-feed li div.center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; width: 220px; font-size: 24px; } /* CTA Banner*/ .cta-banner { background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 2; } .cta-banner .row__container { position: static; } .cta-banner .copy { color: #fff; } .cta-banner .copy h5 { font-size: 24px; margin-bottom: 40px; } .cta-banner .copy h2 { font-size: 40px; position: relative; float: left; width: 100%; margin-bottom: 40px; padding: 25px; line-height: 50px; } .cta-banner .copy h2:before { content: ''; position: absolute; top: 0px; left: 0px; bottom: 0px; border: solid 2px #CB571D; border-right: none; width: 50%; max-width: 300px; } .cta-banner .copy h5 { font-size: 24px; } .cta-banner .btn_site { padding: 18px; height: auto; padding-left: 40px; padding-right: 40px; font-size: 20px; } .cta-banner .btn_site:hover { padding: 18px; padding-left: 40px; padding-right: 40px; } .cta-banner .copy p { position: relative; float: left; width: 100%; font-size: 20px; line-height: 30px; margin-bottom: 40px; } .cta-banner .focus-img { position: absolute; top: -70px; bottom: -70px; } .cta-banner .focus-img img { max-width: 100%; max-height: 100%; } .cta-banner .center-copy { text-align: center; } .cta-banner .center-copy.copy h2:before { border-top: none; border-left: none; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } /**/ /* BUTTONS */ .homeFeaturedProducts .homepage-large-products .productlistproductdetailbutton, html body .listWrapper .listItem a.homepage-category-details-button, html body .listWrapper .listItem .buttons .productlistproductdetailbutton, .homeFeaturedProducts .homepage-large-products .add-info .productlistproductdetailbutton { width: 250px; display: inline-block; position: relative; float: left; left: 50%; margin-left: -125px; } .clickout-overlay { position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); z-index: 9000; } html body .listWrapper .listItem a.homepage-category-details-button { display: block !important; padding-top: 10px !important; position: absolute; bottom: 0px !important; top: auto; } /* Footer */ #footerrow { background: #000; color: #fff; margin-top: 0px; position: relative; float: left; width: 100%; } .footerinner { background: transparent; } .footerinner li { border-bottom: none; } .footerinner ul { border-top: none; } .footerinner .grid_3 { width: 30%; } .footerinner .grid_3:nth-child(4) { width: 10%; } .footer_logo img { width: 170px; max-width: 100%; } .footerinner .social-icons { position: relative; float: right; width: 40px; } .footerinner .social-icons a { position: relative; float: left; width: 40px; height: 40px; border-radius: 50%; border: solid 2px #fff; text-align: center; box-sizing: border-box; margin-bottom: 21px; line-height: 36px; color: #fff; } .footerinner .social-icons a:hover { border-color: #CB571D; color: #CB571D } .footerinner .social-icons a .fa { display: inline-block; margin: 0px; } .footercopyrightinner .grid_8 { border-top: solid 2px #fff; margin-top: -40px; } .footercopyright { float: left; padding: 5px; line-height: 20px; padding-top: 25px; font-size: 13px; } .footerinner li a:hover { background: transparent; text-decoration: none; color: #CB571D; } /* Cantegory Page*/ .page-title-cont { position: relative; float: left; width: 100%; background: #1f1f1f; padding-top: 50px; padding-bottom: 50px; background-size: cover; background-position: center; } .page-title-cont h1, h2.promo, .block-blog-archive .title { position: relative; float: left; left: 0px; top: 0px; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; padding: 20px; padding-left: 40px; text-transform: uppercase; } h2.promo, .general_cont h2, .CardDesign.attribute input[type="radio"]+label .card_details h2 { text-transform: initial; margin-bottom: 40px; position: relative; } .general_cont h2:after, .CardDesign.attribute input[type="radio"]+label .card_details h2:after { content: ''; position: absolute; bottom: -18px; width: 76px; border-top: solid 2px #cb571d; left: 0px; } .general_cont h2.promo:after { display: none; } .allProductsCategoriesWrapper { background: transparent; border: none; } .sub-category-grid .listWrapper .item-box { padding: 0px; height: auto; } .sub-category-grid .listWrapper .picture { bottom: 150px; height: auto; width: 100%; display: block; } .FiltersWrapper { padding: 0; background: transparent; } .category-description { font-size: inherit; color: #000000; font-weight: normal; } .layout--columnsOneA #contentrow>.row__container { width: 100%; max-width: 100%; } .sub-category-grid { position: relative; float: left; width: 100%; padding-bottom: 80px; } .category-description p { max-width: 100%; text-align: center; margin: 0 auto; position: relative; float: left; width: 100%; margin-top: -15px; } /* Description / Info Styling Bits */ section.general_cont { position: relative; float: left; width: 100%; } section.general_cont img { max-width: 100%; } section.general_cont .img_box { position: absolute; top: 0px; bottom: 0px; background-size: cover; background-position: top; } section.general_cont .img_box.left { left: 0px; } section.general_cont .img_box.right { right: 0px; } section.general_cont .grid_6 { padding-left: 5%; padding-right: 0px; } section.general_cont .grid_6.left { padding-left: 0px; padding-right: 5%; } section.general_cont .grid_6.no-padding { padding-left: 0px; padding-right: 0px; } section.general_cont .grid_6.v-cent { top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; } section.general_cont .grid_6.v-cent.right { right: 0px; } section.general_cont .grid_6.v-cent.left { left: 0px; } section.general_cont .left { float: left; } section.general_cont .right { float: right; } section.general_cont .content.row__container, #contentiInnerRow .login__wrapper { position: relative; float: left; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } section.general_cont p { margin-bottom: 20px; } section.general_cont p, section.general_cont ul, section.general_cont li, section.general_cont table { float: left; position: relative; width: 100%; } section.general_cont li h5 { margin-bottom: 5px; } section.general_cont li { margin-bottom: 20px; } .DT_product-details-page .related-products-grid { background: #000; padding-top: 4%; padding-bottom: 4%; } /* .related-products-grid .product-item--image { position: relative; float: left; width: 100%; display: inline-block; height: 0px; margin-top: 70%; } .related-products-grid .product-item--info { position: relative; float: left; width: 100%; display: inline-block; } */ .layout--columnsOneC .related_products_slider .picture { position: relative; } /* .layout--columnsOneC .related_products_slider .picture div { background-size: inherit !important; background-repeat: no-repeat; } */ .layout--columnsOneC .add-info.product-item--actions, .layout--columnsOneC .related_products_slider .product-item--info .description { display: none; } .layout--columnsOneC .related_products_slider .item-box { padding-bottom: 100%; } .related_products_slider .picture, .DT_product-details-page .related-products-grid .grid_12 { background: transparent; } .related_products_slider .product-title a { font-size: 20px; color: #fff; } .related-products-grid h3 { text-align: center; } /* CART */ .layout--columnsOneE .page-title-cont { background: #efefef; } .layout--columnsOneE .page-title-cont h1 { color: #000; text-shadow: none; } #BeforeMainContainer .minishoppingcartwrapper { position: absolute; left: 50%; width: 750px; max-width: 50%; } #BeforeMainContainer .minishoppingcarticon { display: none; } #BeforeMainContainer .minishoppingcart:before { content: ''; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/Cart_Orange.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; width: 90px; height: 90px; top: 5px; left: -102px; } #BeforeMainContainer .minishoppingcartinner .items:before { content: 'You have '; } #BeforeMainContainer .minishoppingcartinner .items:after { content: ' item(s) in your basket'; } #BeforeMainContainer .minishoppingcart { border: none; padding: 0px; margin: 0px; width: 300px; float: right; pointer-events: none; height: 100px; margin-top: 60px; background: transparent; border-left: solid 2px #cb571d; padding-left: 38px; box-sizing: border-box; position: relative; font-size: 17px; font-weight: bold; padding-top: 25px; } .order-progress ul { display: none; } .layout--columnsOneE #contentiInnerRow { padding-top: 4%; padding-bottom: 7%; } .cart--actions .basketEditButton+.basketEditButton, .cart--actions .basketSaveForLaterButton { display: none; } .cart--actions input.basketEditButton, input.editaddressbutton, input.deleteaddressbutton, .cart--actions input#deleteCartItem { padding-left: 56px !important; width: 130px; text-align: left; margin: 0px; margin-bottom: 20px; background-size: contain !important; background-position: left !important; background-repeat: no-repeat !important; } .cart--actions input.basketEditButton, input.editaddressbutton { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/edit_icon.svg') !important; } .cart--actions input#deleteCartItem, input.deleteaddressbutton { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/delete_icon.svg') !important; } .cartTableWrapper {} .cart-item-row .productpicture img { max-width: 125px; border-radius: 10px; margin-left: 30px; height: auto; } .cartTableWrapper .cart-header-row { background: #fff; border-bottom: solid 2px #000; } .cartTableWrapper tr td, .cartTableWrapper tr th { text-align: center; padding-top: 30px; padding-bottom: 30px; font-size: 20px; padding-right: 30px; background: #fff; vertical-align: middle; } .cartTableWrapper tr th.picture+th, .cartTableWrapper tr td.product { text-align: left; padding-left: 50px; max-width: 200px; } .cartTableWrapper .product__quantity input { width: 70px !important; height: 50px !important; } .grid_12.checkoutAttributesWrapper { position: relative; float: left; width: 50%; } .cart-footer { position: relative; float: right; width: 50%; } .cart-footer .cart-collaterals, .cart-footer #cartTotals { position: relative; float: left; width: 100%; overflow: visible; padding-top: 2%; padding-bottom: 3%; } .cart-footer .cart-collaterals .coupon-box--tooltip, .cart-footer .cart-collaterals br { display: none; } .cart-footer .cart-collaterals .coupon-box--title, .cart-footer .cart-collaterals input, .cart-footer .cart-collaterals input.applycouponcodebutton { position: relative; float: left; } .cart-footer .cart-collaterals .coupon-box--title { width: 40%; font-size: 17px; font-weight: bold; text-transform: uppercase; line-height: 50px; text-align: right; box-sizing: border-box; padding-right: 28px; } .cart-footer .cart-collaterals input { width: calc(60% - 100px) !important; border: solid 2px #CB571D; } .cart-footer .cart-collaterals input.applycouponcodebutton { width: 100px !important; } .cartTableWrapper { position: relative; } .shoppingcart__wrapper .warning-box, .shoppingcart__wrapper .cart-item-label-missingJob { width: 100%; box-sizing: border-box; text-align: center; } .loading-box { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background: #fff; z-index: 9; } .loading-box span { position: absolute; top: 50%; left: 10%; width: 80%; text-align: center; font-size: 17px; font-weight: bold; text-transform: uppercase; } #cartTotals .total-info { position: relative; float: right; width: 60%; margin-top: 3%; margin-bottom: 3%; } #cartTotals table.cart-total { background: transparent; border: none; margin-bottom: 6%; } #cartTotals table.cart-total td { padding: 0px; padding-bottom: 15px; padding-top: 15px; border-bottom: solid 2px #ccc; text-align: left; } #cartTotals table.cart-total td.cart_total_right { text-align: right; } #cartTotals table.cart-total tr:last-child td { border-bottom: 0px; font-size: 20px; } #cartTotals table.cart-total tr:last-child td.cart_total_right { font-weight: bold; color: #cb571d; } .cart-item-row .end .productPrice { color: #cb571d; } .cart-footer #cartTotals:before { content: 'TOTALS'; position: relative; float: left; width: 39%; margin-top: 3%; text-align: right; padding-right: 20px; box-sizing: border-box; font-weight: bold; font-size: 20px; letter-spacing: 1px; padding-top: 15px; } /* Checkout */ #checkoutSteps .section { display: none; line-height: 40px; } #checkoutSteps .section.active { display: block; border: none; } .checkout-data .opc .section .sectionheader { text-align: center; background: transparent; padding-bottom: 3%; position: relative; float: left; width: 100%; margin-bottom: 3%; } .checkout-data .opc .section .sectionheader:after { content: ''; width: 100px; position: absolute; left: 50%; margin-left: -50px; border-bottom: solid 2px #cb571d; visibility: visible; bottom: 25%; } .checkout-data .opc .section .sectionheader .number { display: inline-block; float: none; font-size: 24px; font-weight: bold; padding: 0px; width: 35px; background: #fff; color: #cb571d; border: solid 2px #ccc; } .checkout-data .opc .section .step-title { display: inline-block; float: none; padding: 0px; } .checkout-data .opc .section .step-title h2 { font-size: 24px; padding-left: 20px; } .checkout-data .opc .section .step .buttons { padding: 10px; position: relative; float: left; width: 100%; text-align: center; border-top: solid 2px #ccc; padding-top: 4%; } .checkout-data .opc .section #co-billing-form, .checkout-data .opc .section #co-shipping-form, .checkout-data .opc .section #co-emailaddress-form { padding: 0px; padding-bottom: 3%; } .checkout-data .opc .section .shipping-options, .checkout-data .opc .section .step { position: relative; float: left; width: 100%; text-align: center; } .checkout-data .opc .section .shipping-options { text-align: center; } .checkout-data .opc .section .newaddressnextstepbutton, .checkout-data .opc .section .shippingmethodnextstepbutton, .checkout-data .opc .section .paymentmethodnextstepbutton, .checkout-data .opc .section .paymentinfonextstepbutton, .checkout-data .opc .section .confirmordernextstepbutton, .checkout-data .opc .section .back-link { float: none; display: inline-block; } .checkout-data .opc .section .newaddressnextstepbutton, .checkout-data .opc .section .shippingmethodnextstepbutton, .checkout-data .opc .section .paymentmethodnextstepbutton, .checkout-data .opc .section .paymentinfonextstepbutton, .checkout-data .opc .section .confirmordernextstepbutton, .checkout-data .opc .section .back-link a { width: 150px; margin: 5px; } .checkout-data .opc .section .shipping-option-item { width: 20%; height: 0px; padding-bottom: 20%; margin-left: 2.5%; margin-right: 2.5%; margin-bottom: 2.5%; position: relative; } .checkout-data .opc .section .shipping-option-item input, .checkout-data .opc .section .shipping-option-item input+label { position: absolute !important; top: 0px; left: 0px; width: 100%; height: 100%; margin: 0px; } .checkout-data .opc .section .shipping-option-item input+label { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/DeliveryIcon.png') !important; background-position: top !important; background-size: cover !important; background-repeat: no-repeat !important; } .checkout-data .opc .section .shipping-option-item input:checked+label, .checkout-data .opc .section .shipping-option-item label.ui-state-active { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/DeliveryIcon.png') !important; background-position: bottom !important; background-size: cover !important; background-repeat: no-repeat !important; } .checkout-data .opc .section .shipping-option-item input+label span { margin: 0px; width: 100%; position: absolute; bottom: 10%; font-size: 16px; padding: 0px; } /* Checkout confirm */ .checkout_data_integrated .orderSummaryTitle { font-weight: bold; font-size: 20px; } .checkout_data_integrated .orderSummaryTitle, .checkout_data_integrated .total-info .cart_total_left.SubTotal, .checkout_data_integrated .total-info .OrderTotal, .checkout_data_integrated .total-info .OrderTotalValue, .checkout_data_integrated .order-details-box thead b, .order-details-box b { color: #cb571d; } .checkout_data_integrated table td, .checkout_data_integrated .products-box th, .checkout_data_integrated .order-overview table+div { padding: 2% !important; } .checkout_data_integrated .order-overview div { text-align: center; } .checkout_data_integrated .order-overview tr { position: relative; float: left; width: 20%; padding: 2% !important; box-sizing: border-box; text-align: center; border: solid 2px #ccc; line-height: 20px; } .checkout_data_integrated .order-overview tr td { display: block; } .checkout_data_integrated .order-details-box tbody .midColumn { border-left: 1px #333 solid; border-right: 1px #333 solid; } .checkout_data_integrated .products-box thead { background: #fff; border-bottom: solid 2px #000; } /* BLOG */ .blogpost .blogcomments { display: none; } .blog { padding: 0px; background: transparent; } .blog .page-title { display: none; } .row.layout--twocolumn.category-twocolumn { padding-top: 4%; padding-bottom: 7%; } .block-blog-archive { padding: 0px; background: transparent; } .block-blog-archive .title { font-family: 'Kanit', sans-serif; font-weight: bold; margin-top: 0px; margin-bottom: 20px; } .blogsearch { display: none; } .block-blog-archive .listbox { border: none; padding: 0px; box-sizing: border-box; background: transparent; margin-top: 25px; } .block-blog-archive .listbox:before { content: 'Archive'; margin-bottom: 20px; display: block; } .block-blog-archive .listbox>ul { width: 90%; float: right; padding-left: 10%; border-left: solid 2px #ccc; line-height: 35px; } .block-blog-archive .listbox ul li { font-size: 16px; } .block-blog-archive .listbox ul li ul li:hover { background: transparent; text-decoration: none; } .blog .blogposts .post { padding: 0px; position: relative; float: left; width: 31.3%; margin: 1%; margin-bottom: 2%; margin-top: 0px; height: 0px; padding-bottom: calc(31% + 220px); } .blog .blogposts .post:first-child { width: 98%; padding-bottom: 31%; } .blogposts .blogimage { display: block; position: initial; width: 100%; float: left; height: 0px; padding-bottom: 100%; } .blog .blogposts .post:first-child .blogimage { width: 33%; height: 0px; padding-bottom: 33%; } .blog .blogposts .post .blogimage:after { content: 'Read article >'; position: absolute; right: 3%; bottom: 20px; font-size: 16px; font-family: 'Kanit', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #cb571d; } .blog .blogposts .post:first-child .blogimage:after { content: 'Read article >'; } .blog .blogposts .post .blogdetails { display: none; } .blog .blogposts .post:first-child .blogdetails { display: block; float: right; padding-left: 3% !important; padding-right: 3% !important; box-sizing: border-box; width: 66%; } .blog .blogposts .blogtitle { color: #000; padding: 6%; width: 100%; box-sizing: border-box; margin: 0px; text-transform: initial; margin-bottom: 40px; float: right; position: relative; } .blog .blogposts .post:first-child a.blogdetails { display: none; } .blog .blogposts .post:first-child .blogtitle { width: 67%; padding: 3%; text-transform: initial; padding-bottom: 0px; margin-bottom: 40px; position: relative; letter-spacing: 1px; padding-bottom: 0px; } .blogpost .postbody section.general_cont .img_box { background-position: center; } .blogpost .tags { text-align: center; padding-top: 4%; } .blogpost .postbody { position: relative; float: left; width: 100%; letter-spacing: .5px; padding-left: 5%; padding-right: 5%; box-sizing: border-box; } .blogpost .postbody section { position: relative; float: left; width: 100vw; letter-spacing: .5px; padding-left: 0px; padding-right: 0px; box-sizing: border-box; left: 50%; margin-left: -50vw; } .blogpost .postbody section a { color: #cb571d !important; } .blog .blogposts .post .blogtitle:after { content: ''; position: absolute; bottom: -20px; width: 20%; border-bottom: solid 2px #cb571d; display: block; } .blogpost .blogpost__featureimage { display: none; } .blogpost h2, .blogpost h3 { position: reletive; float: left; width: 100%; } .blogpost .postbody img { position: relative; width: 96%; max-width: 96%; display: block; box-sizing: border-box; padding: 10px; background: #eee; border: none; float: left; margin: 2% !important; } .blogpost .blogcomments { margin-bottom: 5%; } .blog .blogposts .blogdate { position: relative; float: right; color: #B9B9B9; padding-right: 5%; margin-top: -32px; } .blogpost .blogpost__featureimage img, .blogposts .blogimage img { max-width: 100%; width: 100%; } @media only screen and (max-width: 1500px) {} @media only screen and (max-width: 1200px) { .blog .blogposts .post:first-child { width: 98%; padding-bottom: 60px; height: auto; } .blog .blogposts .post:first-child .blogdetails { width: 100%; margin-top: 20px !important; } .blog .blogposts .post { padding: 0px; position: relative; float: left; width: 48%; margin-top: 0px; height: 0px; padding-bottom: calc(48% + 200px); } } @media only screen and (max-width: 959px) { .block-blog-archive .listbox { display: none; } .layout--twocolumn.category-twocolumn #contentiInnerRow>.grid_3, .layout--twocolumn.category-twocolumn #contentiInnerRow>.grid_9 { width: 100%; } } @media only screen and (max-width: 767px) { .blog .blogposts .post, .blog .blogposts .post:first-child { padding: 0px; position: relative; float: left; width: 98%; margin-top: 0px; height: auto; padding-bottom: calc(40px); } .blog .blogposts .post:first-child .blogimage { width: 100%; height: 0px; padding-bottom: 100%; } .blog .blogposts .post:first-child .blogtitle { width: 100%; } .blog .blogposts .post .blogimage:after { bottom: 10px; } } @media only screen and (max-width: 479px) {} /*My Account*/ .customer-SavedProjects .t-grid-header .t-header, .customer-SavedProjects .t-grid-header .t-last-header { padding: 10px; } .customer-SavedProjects .t-toolbar, .customer-SavedProjects .t-grouping-header, .customer-SavedProjects .t-grid-pager, .customer-SavedProjects .t-widget .t-status, .customer-SavedProjects .t-grid-header .t-header, .customer-SavedProjects .t-grid-header .t-last-header, .customer-SavedProjects .t-header, .customer-SavedProjects .t-grid-header { border-color: #ccc; background-color: #ffffff; } .customer-SavedProjects .search { background: #ffffff; padding: 0px; } .customer-SavedProjects #searchValue { font-size: 16px; float: left; width: 250px; } .customer-SavedProjects #searchSavedProjects { float: left; } .customer-SavedProjects .section-title { padding: 0px; margin-top: -4%; position: relative; float: right; top: -88px; } .customer-SavedProjects .t-widget { border-color: #ccc; background-color: #ffffff; } .customer-addresses .address-list .address-item { border: none; height: auto; margin-bottom: 5px; text-align: left; background-color: #fff; padding: 0px; } .customer-addresses { background-color: #fff; padding: 0px; height: auto; overflow: auto; } .designStyleTemplateInfo table td, .yb-filter-pane table td, .content table td { padding: 0px; text-align: left; } .account-page .address-list table tr { border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; } .account-page .address-list table tr tr { border: none; } .address-item, .order-item, .addAddressTable, .editAddressTable { background: transparent; border: none; margin-bottom: 10px; } .account-page table tr td, .account-page table tr th { vertical-align: middle; padding: 1%; box-sizing: border-box; } .account-page .address-list table tr td:last-child { padding-right: 0px; text-align: right; } .account-page table tr tr td { vertical-align: top; } .account-page table tr tr td:last-child { text-align: left; } .saveaddressbutton, .canceladdressbutton { float: right; } #AlbumManagement .albumManagementTwo { position: relative; background-color: White; min-height: 627px; border: 1px solid #ccc; box-shadow: none; } .layout--columnsOneD #AlbumManagement { padding-top: 50px; margin-top: -2%; } .layout--columnsOneD #album { margin-top: -2%; } .layout--columnsOneD .page-title-cont { padding-top: 30px; padding-bottom: 20px; } .layout--columnsOneD .page-title-cont h1 { padding: 10px; padding-left: 20px; } .customer-SavedProjects .section-title h2 { display: none; } .orders_v2 .order_info_total { height: 47px; background-color: #000; font-size: 17px; line-height: 43px; } .orders_v2 .order_q_info .order_title { color: #cb571d; font-size: 16px; margin-bottom: 5px; font-weight: bold; } .orders_v2 .order_q_info .order_info .o_data { color: #000000; font-weight: bold; } .orders_v2 .order_f_info .order_title { color: #cb571d; font-weight: bold; } .orders_v2 .order_search .order_search_button { width: 60px; } .orders_v2 .order_products_list .order_prod_total { background-color: #cb571d; } .orders_v2 .order_products_list .order_prod_name { color: #cb571d; } .orders_v2 .order_page_select_container .order_page_state { width: 100px; } .orders_v2 .order_container ul li { margin-bottom: 5px; line-height: 23px; } .orders_v2 .order_status_container { width: 67%; height: 30px; line-height: 29px; } .orders_v2 .order_search { width: 100%; background-color: #ffffff; padding: 0px; } .orders_v2 .order_search .order_searchbox { width: calc(100% - 60px); } .orders_v2 .order_show .order_txt { display: none; } .orders_v2 .order_txt { height: 50px; line-height: 50px; } .orders_v2 .order_toggle_filter { position: relative; float: right; width: 15.83%; margin-left: 1%; line-height: 25px; vertical-align: middle; } .orders_v2 .order_toggle_filter:last-child { margin-left: 0px; } .orders_v2 .order_container .short_view_order_details { max-height: 47px; } .orders_v2 .order_search { width: 50%; background-color: #ffffff; padding: 0px; float: right; position: absolute; right: 0px; margin-top: -4%; top: -85px; } .account-page .addAddressButtonWrapper, #order_details_v2 .od_print_button { position: absolute; right: 0px; margin-top: -4%; top: -29px; } .account-page .address-item thead tr { border-top: 0px; } /* LOGIN PAGE */ .register-title, .login-title, .section-title { color: #000000; } .checkout_data_integrated .order-details-box tbody { background: #fff; border: 1px #000 solid; } .requiredMarker { color: Red; font-size: 10px; } .item-name span.requiredMarker {} .login__wrapper .table-container, .login__wrapper .table-container tr, .login__wrapper .table-container tr td { position: relative; float: left; width: 100%; display: block; padding: 0px; } .login__wrapper .table-container tr td { padding-top: 10px; } .externalauthentication { position: relative; float: left; width: 100%; } #PurchaseOrderNumber { width: 100% !important; } /* PRODUCT LANDING PAGE */ /* CARDS LANDING PAGE */ .layout--columnsOneC #contentrow>.row__container, .DT_product-details-page.DTV3>.row__container { width: 100%; max-width: 100%; } .DT_product-details-page.DTV3 .shortdescription { display: none; } .DT_breadcrumbs { display: none; } .DT_product-details-page.DTV3 .DT_product-essential { position: absolute; top: 0px; width: 100%; padding: 0px; height: 810px; overflow: hidden; z-index: 0; border-bottom: solid 400px #EFEFEF; } .DT_product-details-page.DTV3 .DT_product-collateral { z-index: 1; } .DTV3 .DT_thumbs { display: none !important; } .DTV3 .DT_bigpicture, .DTV3 .DT_product-details-info, .DTV3 .DT_picture { width: 100%; float: left; margin: 0; border: 0; position: absolute; top: 0px; left: 0px; right: 0px; height: 100% !important; } .DTV3 .DT_product-details-page-main { padding: 0px; } .DTV3 .DT_bigpicture a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: top; background-size: cover; pointer-events: none; } .DTV3 .DT_product-collateral .productname { text-transform: uppercase; letter-spacing: 5px; left: 0px; } .DTV3 .DT_product-collateral-top { height: 200px; } .DTV3 .DT_product-collateral-bottom { width: 100%; overflow: hidden; position: relative; float: left; margin-top: -50px; } .DTV3 .overview-intro { position: relative; float: left; width: 100%; height: 200px; } .DTV3 .fulldescription { display: none; } .DTV3 .attributes { position: relative; float: left; width: 100%; } .CardDesign.attribute { background: transparent; border: none; margin-top: 0px; padding: 0px; white-space: nowrap; position: relative; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; left: 150%; } .CardDesign.attribute input[type="radio"] { display: none; } .CardDesign.attribute .attributeHeader { display: none; } .CardDesign.attribute input[type="radio"]+label { width: 210px; height: auto; float: left; position: relative; text-align: center; padding: 20px; margin-top: 60px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; box-sizing: border-box; } .CardDesign.attribute input[type="radio"]:checked+label { margin-top: 0px; width: 320px; } .CardDesign.attribute input[type="radio"]+label .the_card { position: relative; float: left; width: 100%; height: 0px; padding-bottom: 161%; background-size: 200%; background-position: left; background-repeat: no-repeat; border-radius: 20px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; box-sizing: border-box; } .CardDesign.attribute input[type="radio"]:checked+label .the_card { border-radius: 30px; } .CardDesign.attribute.card_back input[type="radio"]+label .the_card { background-position: right; -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg); } .CardDesign.attribute input[type="radio"]+label .the_card {} .CardDesign.attribute input[type="radio"]+label .front_back_toggle { color: #000; position: absolute; width: 100%; text-align: center; left: 0px; bottom: -26px; display: none; text-decoration: none; } .CardDesign.attribute input[type="radio"]:checked+label .front_back_toggle { display: block; } .CardDesign.attribute input[type="radio"]:checked+label .front_back_toggle span { margin: 7px; font-weight: bold; } .CardDesign.attribute input[type="radio"]+label .front_back_toggle .front:before { content: 'Front'; } .CardDesign.attribute input[type="radio"]+label .front_back_toggle .back:before { content: 'Back'; } .CardDesign.attribute input[type="radio"]+label .front_back_toggle .front { color: #cb571d; } .CardDesign.attribute.card_back input[type="radio"]+label .front_back_toggle .front { color: #000000; } .CardDesign.attribute.card_back input[type="radio"]+label .front_back_toggle .back { color: #cb571d; } .CardDesign.attribute input[type="radio"]+label .front_back_toggle .back:before { content: 'Back'; } .CardDesign.attribute input[type="radio"]+label+.attributeValueInfo { display: none; } .CardDesign.attribute input[type="radio"]+label .card_details { position: fixed; white-space: normal; text-align: left; width: 500px; -webkit-transition: opacity .25s linear; -moz-transition: opacity .25s linear; -o-transition: opacity .25s linear; transition: opacity .25s linear; pointer-events: none; display: none; top: 610px; left: 50%; margin-left: -700px; pointer-events: all; display: block; height: 200px; opacity: 0; text-transform: none; pointer-events: none; } .CardDesign.attribute input[type="radio"]:checked+label .card_details { opacity: 1; pointer-events: all; } .CardDesign.attribute input[type="radio"]+label .card_details p { line-height: 25px; } .DTV3 .DT_product-collateral .overview .price { position: absolute; } .DTV3 .DT_product-collateral .overview .add-info { left: 50%; width: 50%; background: #000; padding: 40px; margin-left: 183px; margin-top: -60px; height: 190px; } .DTV3 .DT_product-collateral .overview .add-info .productvariantaddtocartbutton { position: absolute; bottom: 40px; left: 40px; width: 210px; height: 50px; background: #cb571d; color: #fff; } .DTV3 .DT_product-collateral .add-info label { color: #ffffff; margin-left: 0px; border: solid 2px #fff; line-height: 30px; height: 50px; } .DTV3 .DT_product-collateral .overview .add-info .quantityBox { width: 160px !important; height: 50px; } .DTV3 .DT_product-collateral .add-info label:after { border-left: none; } .DTV3 .DT_product-collateral .overview .price { position: absolute; left: 50%; margin-left: 221px; z-index: 2; color: #fff; margin-top: 35px; font-size: 32px; width: 210px; text-align: right; } .DTV3 .DT_product-collateral .overview .price .productPrice { display: block !important; font-size: 28px; white-space: nowrap; } .DTV3 .DT_product-collateral .overview .price .productPrice:before { content: 'Price: '; float: left; } .DTV3 .DT_product-collateral .overview .add-info {} .DTV3 .DT_product-collateral .overview .add-info {} .DTV3 .shareWrapper { margin-bottom: 0px; border-bottom: none; padding-bottom: 0px; } .DTV3 section#prices { padding-top: 0px; } .DTV3 section#prices .price-table, .DTV3 section#prices .price-table ul { position: relative; float: left; width: 100%; margin: 0px; } .DTV3 section#prices .price-table ul li { position: relative; float: left; width: 12.50%; text-align: center; box-sizing: border-box; border: solid 1px #ccc; margin-top: -1px; padding-top: 20px; padding-bottom: 20px; margin-right: -1px; } .DTV3 section#prices .price-table ul li:first-child { color: #fff; background: #cb571d; font-weight: bold; } .DTV3 .aditional_text { position: relative; float: left; width: 100%; margin: 0px !important; } .DTV3 section#prices .price-table ul li:last-child { font-weight: bold; color: #cb571d; } .product-reviews-overview, .product-no-reviews { margin-bottom: 10px; display: none; } /* Core Tweaks */ #AlbumManagement .album__item__image { background-color: #000000 !important; } .albumManagementTwo__albumPaging li, .albumManagementTwo__albumPaging li.active { opacity: 1; } .albumManagementTwo__albumPaging li.active { background: #000000; } .albumManagementTwo__albumPaging li.active:hover { background: #cb571d; } #ImageUploader #AlbumName { border-bottom: 5px solid #cb571d; } .albumManagementTwo__albumPaging { margin-top: 20px; margin-bottom: 40px; } .address-item address { text-align: left; } #ImageUploader .AddAlbum__options button#UploadImage { font-size: 0px; } #ImageUploader .AddAlbum__options button#UploadImage:before { content: 'UPLOAD IMAGES'; font-size: 15px; display: block; } #ImageUploader .AddAlbum__options .row:first-child { width: 60% !important; } #ImageUploader .AddAlbum__options .row:last-child { width: 40% !important; overflow: visible; } #ImageUploader #AddAlbum__FileLimit { display: block; float: right; line-height: 54px; height: 37px; margin-right: 10px; width: 200%; text-align: right; margin-right: 5px; } .attribute-datepicker__container { position: relative; } .attribute-datepickerbutton { position: absolute; width: 100%; left: 0px; height: 100%; border: none; text-align: right; padding-top: 7px; padding-right: 7px; box-sizing: border-box; } .pika-button { padding: 5px !important; text-align: center; border-radius: 0px !important; } .pika-button:hover { background: #f5f5f5; color: #000; } .pika-prev, .pika-next { padding: 0px !important; } .pika-title select { height: 23px !important; box-sizing: border-box; padding: 0px !important; } .pika-title>.pika-label { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/dropdown_arrow.svg'); background-position: right; background-size: contain; background-repeat: no-repeat; padding-right: 26px; margin-left: 10px; } #SavedProjects table td:nth-child(3), #SavedProjects table th:nth-child(3), #SavedProjects table td:nth-child(4), #SavedProjects table th:nth-child(4), #SavedProjects table td:nth-child(5), #SavedProjects table th:nth-child(5) { display: none; } #SavedProjects table td:nth-child(2) p:last-child { display: none; } #SavedProjects table td, #SavedProjects table th { text-align: center; } #SavedProjects .t-grid-header .t-header .t-link { padding: .3em 0.6em .3em 0.6em; } .saved-projects-list table td:first-child a, .saved-projects-list table td button, .t-button { float: none; } .customer-SavedProjects #searchSavedProjects { width: 100px; } .customer-SavedProjects #searchValue { font-size: 16px; float: left; width: calc(100% - 100px); } .orderprocessedcontinuebutton:hover, #AddressSearch .searchButton { padding-left: 14px; padding-right: 14px; padding-top: 10px; padding-bottom: 10px; } .orderprocessedcontinuebutton { margin-top: 20px !important; } .orders_v2 .order_products_list .order_prod_price, .orders_v2 .order_products_list .order_prod_total { height: auto; } /* Site Responsive */ @media only screen and (max-width: 1500px) { .customer-SavedProjects .section-title { padding: 0px; margin-top: -40px; position: relative; float: right; top: -88px; } .account-page .addAddressButtonWrapper, #order_details_v2 .od_print_button { margin-top: -50px; } .def-padding, .homeFeaturedProductsWrapper, .homeFeaturedCategoriesWrapper, .instagram-feed, footer, .layout--columnsOneA #contentrow .row__container .category-productingrid, section.general_cont, #contentiInnerRow .login__wrapper, #contentrow .account-page, .layout--columnsOneD #album, div.blogpost { padding-top: 50px; padding-bottom: 60px; } input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea, select, .item-value select, #BillingNewAddress_CountryId, #BillingNewAddress_StateProvinceId, .address-select, #PurchaseOrderNumber, #checkout-emailaddress-load .email-address, .orders_v2 .order_search .order_searchbox, .orders_v2 .order_sort select { height: 44px; line-height: 22px } #logorow .headermenu nav li a { padding: 7px; } html body .listWrapper .listItem, .product-grid .listItem.grid_3, .sub-category-grid .listItem.grid_3 { padding-top: 25%; padding-bottom: 210px; } html body .listWrapper .listItem .description, html body .listWrapper .listItem .category-short-description, html body .listWrapper .listItem .short-description { width: 250px; } html body .listWrapper .listItem .picture { bottom: 200px; } button, input[type="button"], input[type="submit"], a.btn_site, .homeFeaturedProducts .homepage-large-products .productlistproductdetailbutton, html body .listWrapper .listItem a.homepage-category-details-button, html body .listWrapper .listItem .buttons .productlistproductdetailbutton, .basketEditButton, .editoractionbutton, .saveCommentButton, .downloadPDFProof, .addnewfriendcomment, #create-button, .startYBPreview, .bookoptions button, .saveYearbookSettings, .editBookUnitSave, .saveSelectedTemplateAction, .createBookUnitSave, .addNewQuestion, .createBookUnitAction, .add-contributors-button, .update-button, #newAlbum, #markerControls button, .registerbutton, .file-upload-button, .facebookbutton, .report-action, .loginbutton, .continueshoppingbutton, .addaddressbutton, .saveaddressbutton, .changepasswordbutton, .registernextstepbutton, .productlistproductdetailbutton, .productvariantaddtocartbutton, .editaddressbutton, .orderdetailsbutton, .productwritereviewbutton, .savecustomerinfobutton, .removediscountbuttonm, #check-availability-button, .checkoutbutton, .checkout-data .opc .section .newaddressnextstepbutton, .checkout-data .opc .section .shippingmethodnextstepbutton, .checkout-data .opc .section .paymentmethodnextstepbutton, .checkout-data .opc .section .paymentinfonextstepbutton, .checkout-data .opc .section .confirmordernextstepbutton, .checkout-data .opc .section .back-link a, .orders_v2 .order_search .order_search_button, .orders_v2 .reorderbutton, .orders_v2 .order_container .order_show_details_but, .saved-projects-list table td:first-child a, .saved-projects-list table td button, .t-button, #ImageUploader #AddAlbum__Done button, #ImageUploader .AddAlbum__options button { font-size: 14px; height: 44px; line-height: 20px; padding-left: 14px; padding-right: 14px; padding-top: 10px; padding-bottom: 10px; } .homeFeaturedProducts .homepage-large-products .productlistproductdetailbutton, html body .listWrapper .listItem a.homepage-category-details-button, html body .listWrapper .listItem .buttons .productlistproductdetailbutton, .homeFeaturedProducts .homepage-large-products .add-info .productlistproductdetailbutton { width: 200px; margin-left: -100px; } h1 { font-size: 32px; } .bestsellers h3, .featuredproducts h3, .instagram-feed h2, .related-products-grid h3 { font-size: 32px; line-height: 44px; } h2, html body .listWrapper .listItem .category-item .product-title, html body .listWrapper .listItem .sub-category-item .category-title, .register-title, .login-title, .section-title, .block-blog-archive .listbox:before, .blog .blogposts .post:first-child .blogtitle, .layout--columnsOneD .page-title-cont h1, .layout--columnsOneVTwo .page-title-cont h1 { font-size: 27px; line-height: 35px; } h3, .footerinner h3, .blog .blogposts .blogtitle { font-size: 20px; line-height: 20px; } /* Promo / Main titles */ #logorow #sliderrow li .copy h1, .promo-h1 { font-size: 60px; line-height: 78px; } #logorow #sliderrow li .copy h2, .promo-h2, .page-title-cont h1, h2.promo, .general_cont h2, .DT_product-collateral .productname, .block-blog-archive .title { font-size: 50px; line-height: 65px; } section.general_cont h2 { font-size: 40px; line-height: 55px; } #logorow #sliderrow li .copy h3, .promo-h3 { font-size: 34px; line-height: 40px; } /* ========= */ h4, .footerinner h3, .modal-header h3 { font-size: 18px; } h5 { font-size: 15px; } p, .footerinner li a { font-size: 15px; line-height: 22px; } .bestsellers h3:before, .featuredproducts h3:before, .instagram-feed h2:before, .related-products-grid h3:before { width: 70px; margin-left: -35px; top: 60px; } .cta-banner .btn_site, .cta-banner .btn_site:hover { padding: 15px; height: auto; padding-left: 30px; padding-right: 30px; font-size: 16px; } .cta-banner .copy p { font-size: 16px; line-height: 28px; margin-bottom: 30px; } .cta-banner .focus-img { position: absolute; top: -40px; bottom: -40px; } /* PRODUCT LANDING PAGE */ .CardDesign.attribute input[type="radio"]+label .card_details { width: calc(45% - 140px); top: 560px; left: 5%; margin-left: 0px; display: block; height: 200px; opacity: 0; } .CardDesign.attribute input[type="radio"]+label .card_details p { line-height: 22px; } .CardDesign.attribute input[type="radio"]+label { width: 180px; } .CardDesign.attribute input[type="radio"]:checked+label { width: 260px; } .DT_product-collateral .productname { padding: 20px; padding-left: 30px; } .CardDesign.attribute input[type="radio"]+label .the_card { border-radius: 12px; } .CardDesign.attribute input[type="radio"]:checked+label .the_card { border-radius: 21px; } .DT_product-details-page.DTV3 .DT_product-essential { height: 730px; border-bottom: solid 400px #EFEFEF; } .DTV3 .DT_product-collateral .overview .add-info { padding: 30px; margin-left: 140px; margin-top: -60px; height: 186px; margin-bottom: 30px; } .DTV3 .DT_product-collateral .overview .price { margin-left: 169px; z-index: 2; color: #fff; margin-top: 26px; font-size: 26px; width: 210px; } .DTV3 .DT_product-collateral .overview .add-info .quantityBox { width: 160px !important; height: 44px; } .DTV3 .DT_product-collateral .add-info label { line-height: 20px; height: 44px; } .DTV3 .DT_product-collateral .overview .add-info .productvariantaddtocartbutton { bottom: 30px; left: 30px; height: 44px; } section.general_cont .left.grid_6 { padding-left: 0px; } section.general_cont .right.grid_6 { padding-right: 0px; } section.general_cont .left.grid_6.v-cent { padding-left: 5%; } section.general_cont .right.grid_6.v-cent { padding-right: 5%; } section.general_cont h2 { font-size: 30px; line-height: 37px; } section.general_cont h2.promo { padding: 20px; padding-left: 30px; } .orders_v2 .order_info_total { height: 41px; line-height: 41px; } } @media only screen and (max-width: 1200px) { #logorow #sliderrow li .copy h1 { font-size: 50px; line-height: 60px; } #logorow #sliderrow li .copy h2, .promo-h2, .page-title-cont h1, h2.promo, .general_cont h2, .DT_product-collateral .productname, .block-blog-archive .title { font-size: 40px; line-height: 50px; } /* PRODUCT LANDING PAGE */ .CardDesign.attribute input[type="radio"]+label .card_details { width: calc(50% + 70px); top: 670px; height: 130px; } .CardDesign.attribute input[type="radio"]+label .card_details h2 { position: absolute; bottom: 100%; width: calc(100% - 230px); } .DTV3 .DT_product-collateral .overview .add-info .quantityBox { width: 130px !important; } .DTV3 .DT_product-collateral .overview .price { width: 182px; } .DTV3 .DT_product-collateral .overview .add-info .productvariantaddtocartbutton { width: 180px; } .DTV3 section#prices .price-table ul li { width: 11.5%; } .DTV3 section#prices .price-table ul li:first-child { width: 20%; } .account-page .addAddressButtonWrapper, #order_details_v2 .od_print_button { margin-top: -50px; } .orders_v2 .order_search { margin-top: -40px; } .checkout-data .opc .section .shipping-option-item { width: 28.3%; height: 0px; padding-bottom: 28.3%; } } @media only screen and (max-width: 1200px) and (min-height: 1200px) { #logorow #sliderrow li .copy h1 { font-size: 70px; line-height: 85px; } #logorow #sliderrow li .copy h2 { font-size: 55px; line-height: 70px; } #logorow #sliderrow .grid_12 #mainslider ul.slides li { border-bottom: solid 200px #000; border-top: solid 50px #000; box-sizing: border-box; } #logorow #sliderrow .grid_12 #mainslider ul.slides li:after { display: block; } #logorow #sliderrow li .copy h { display: inline; } #logorow #sliderrow li .copy, #logorow #sliderrow li .copy.left-side, #logorow #sliderrow li .copy.right-side { position: absolute; left: 10%; padding: 20px; right: 10%; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; bottom: 30px; top: auto; text-align: center; z-index: 33; } #logorow #sliderrow li .copy.left-side { margin-bottom: 140px; } #logorow #sliderrow li .copy:before, #logorow #sliderrow li .copy.right-side:before { content: ''; position: absolute; width: 20%; top: 0px; left: 0px; bottom: 0px; border: solid 2px #CB571D; border-right: none; } #logorow #sliderrow li .copy:after { content: ''; position: absolute; width: 20%; top: 0px; right: 0px; bottom: 0px; border: solid 2px #CB571D; border-left: none; } #logorow #sliderrow li .copy.left-side:before, #logorow #sliderrow li .copy.left-side:after { border-bottom: none; } #logorow #sliderrow li .copy.right-side:before, #logorow #sliderrow li .copy.right-side:after { border-top: none; } #logorow .flex-control-thumbs { right: 5%; left: 5%; bottom: 110px; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; top: auto; width: 90%; text-align: center; z-index: 999; } #logorow .flex-control-thumbs li { float: none; } #logorow #sliderrow .grid_12 #mainslider:before { top: 48px; width: 100%; height: 30vh; } #logorow #sliderrow .grid_12 #mainslider:after { background-size: 100% 100%; bottom: 198px; height: 44px; } } @media only screen and (max-width: 959px) { .DTV3 .DT_product-collateral-bottom { margin-top: 0px; } .grid_4, .grid_3 { width: 50%; } .grid_6 { width: 100%; } h1, #logorow #sliderrow li .copy h1, .promo-h1 { font-size: 30px; line-height: 40px; font-family: 'Kanit', sans-serif; letter-spacing: 1px; } .bestsellers h3, .featuredproducts h3, .instagram-feed h2, .related-products-grid h3 { font-size: 24px; line-height: 32px; letter-spacing: 1px; } .bestsellers h3:before, .featuredproducts h3:before, .instagram-feed h2:before, .related-products-grid h3:before { width: 50px; margin-left: -25px; top: 50px; } h2, html body .listWrapper .listItem .category-item .product-title, html body .listWrapper .listItem .sub-category-item .category-title, .register-title, .login-title, .section-title, .block-blog-archive .listbox:before, .blog .blogposts .post:first-child .blogtitle, .layout--columnsOneD .page-title-cont h1, .layout--columnsOneVTwo .page-title-cont h1, #logorow #sliderrow li .copy h2, .promo-h2, .page-title-cont h1, h2.promo, .general_cont h2, .DT_product-collateral .productname, .block-blog-archive .title, section.general_cont h2 { font-size: 24px; line-height: 32px; } h3, .footerinner h3, .blog .blogposts .blogtitle, #logorow #sliderrow li .copy h3, .promo-h3 { font-weight: 800; font-size: 20px; line-height: 30px; } /* ========= */ h4, .footerinner h3, .modal-header h3 { font-size: 16px; line-height: 20px; } h5 { font-size: 14px; line-height: 18px; } p, .footerinner li a { font-size: 14px; line-height: 20px; } html body .listWrapper .listItem, .product-grid .listItem.grid_3, .sub-category-grid .listItem.grid_3 { padding-top: 35%; padding-bottom: 210px; width: 48%; } .instagram-feed li { position: relative; float: left; width: 50%; height: 0px; padding: 0px; padding-bottom: 50%; overflow: hidden; } .instagram-feed li:nth-child(5) { display: none; } #logorow #sliderrow li .copy h3, .promo-h3 { font-size: 27px; line-height: 33px; } #logorow #sliderrow li .copy { padding: 10px; padding-left: 15px; } .DTV3 .overview-intro { height: 160px; } .DT_product-details-page.DTV3 .DT_product-essential { height: 700px; border-bottom: solid 400px #EFEFEF; } .DTV3 .DT_product-collateral .productname { font-size: 40px; line-height: 50px; } .DT_product-details-page.DTV3 .DT_product-collateral-top { margin-bottom: -100px; } .CardDesign.attribute input[type="radio"]+label .card_details { top: 635px; } section.general_cont { padding-top: 0px; padding-bottom: 0px; } section.general_cont .grid_6.left, section.general_cont .grid_6.right, section.general_cont .grid_6.left.v-cent, section.general_cont .grid_6.right.v-cent { padding-top: 40px; padding-right: 0px; padding-left: 0px; padding-bottom: 15px; position: relative; float: left; width: 100%; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } section.general_cont .grid_6.img_box, section.general_cont .grid_6.img_box.v-cent { position: relative; padding-bottom: 50%; height: 0px; } section.general_cont .grid_6.left.no-padding, section.general_cont .grid_6.right.no-padding, section.general_cont .grid_6.left.v-cent.no-padding, section.general_cont .grid_6.right.v-cent.no-padding, section.general_cont .grid_6.img_box.no-padding, section.general_cont .grid_6.img_box.v-cent.no-padding { padding: 0px; } section.general_cont img { max-width: 100%; max-height: 68vw; float: none; margin: 0 auto; display: block; } .related-products-grid .row__container { max-width: 100%; } .DT_product-details-page .related-products-grid, .DT_product-details-page .also-purchased-products-grid { padding-left: 0px; padding-right: 0px; } #mainslider.related_products_slider { width: 600px; margin: 0 auto; } .account-page .address-item>.content>table>tbody>tr>td:nth-child(1):after { content: 'Shipping'; } .account-page .address-item>.content>table>tbody>tr>td:nth-child(2):after { content: 'Billing'; } .account-page .address-item>.content>table>tbody>tr>td:nth-child(1):after, .account-page .address-item>.content>table>tbody>tr>td:nth-child(2):after { width: 62px; display: inline-block; } .account-page .address-item>.content>table, .account-page .address-item>.content>table>tbody, .account-page .address-item>.content>table>tbody>tr, .account-page .address-item>.content>table>tbody>tr>td { display: block; position: relative; float: left; width: 100%; box-sizing: border-box; border: none; } .account-page .address-item>.content>table>tbody>tr>td:nth-child(1), .account-page .address-item>.content>table>tbody>tr>td:nth-child(2) { width: 150px; } .account-page .address-item>.content>table>tbody>tr>td:nth-child(3) { width: auto; float: right; } .account-page .address-item>.content>table table>tbody>tr>td:nth-child(1) { width: 30%; box-sizing: border-box; padding-left: 0px; } .account-page .address-item>.content>table table>tbody>tr>td:nth-child(2) { width: 70%; box-sizing: border-box; } .account-page .customer-addresses thead { display: none; } .customer-addresses .address-list .address-item { padding-top: 20px; padding-bottom: 20px; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; margin-bottom: 30px; } .account-page .address-item>.content>table>tbody>tr>td .editaddressbutton, .account-page .address-item>.content>table>tbody>tr>td .deleteaddressbutton { margin-bottom: 0px } .customer-addresses table tbody { width: 100%; } .customer-addresses table td, .customer-addresses table th { font-size: 14px; line-height: 22px; } #contentrow { overflow: visible; } .orders_v2 .order_toggle_filter { font-size: 12px; height: 44px; } .orders_v2 .order_container .short_view_status_details { height: 58px; } .orders_v2 .order_container .order_details { width: 95%; } .cartTableWrapper tr td, .cartTableWrapper tr th { font-size: 14px; } .cartTableWrapper tr th.picture+th, .cartTableWrapper tr td.product { padding-left: 10px; } .cart-footer .cart-collaterals .coupon-box--title { font-size: 14px; line-height: 41px; padding-right: 16px; } .cartTableWrapper tr td, .cartTableWrapper tr th { padding-right: 10px; } } @media only screen and (max-width: 959px) and (min-height: 958px) { #logorow #sliderrow li .copy h1 { font-size: 50px; line-height: 60px; } #logorow #sliderrow li .copy h2 { font-size: 40px; line-height: 50px; } #logorow #sliderrow .grid_12 #mainslider ul.slides li { border-bottom: solid 20vh #000; border-top: solid 50px #000; box-sizing: border-box; } #logorow #sliderrow .grid_12 #mainslider ul.slides li:after { display: block; } #logorow #sliderrow li .copy h { display: inline; } #logorow #sliderrow li .copy, #logorow #sliderrow li .copy.left-side, #logorow #sliderrow li .copy.right-side { position: absolute; left: 10%; padding: 20px; right: 10%; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; bottom: 0px; top: auto; text-align: center; z-index: 33; } #logorow #sliderrow li .copy.left-side { margin-bottom: 100px; } #logorow #sliderrow li .copy:before, #logorow #sliderrow li .copy.right-side:before { content: ''; position: absolute; width: 20%; top: 0px; left: 0px; bottom: 0px; border: solid 2px #CB571D; border-right: none; } #logorow #sliderrow li .copy:after { content: ''; position: absolute; width: 20%; top: 0px; right: 0px; bottom: 0px; border: solid 2px #CB571D; border-left: none; } #logorow #sliderrow li .copy.left-side:before, #logorow #sliderrow li .copy.left-side:after { border-bottom: none; } #logorow #sliderrow li .copy.right-side:before, #logorow #sliderrow li .copy.right-side:after { border-top: none; } #logorow .flex-control-thumbs { right: 5%; left: 5%; bottom: 110px; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; top: auto; width: 90%; text-align: center; z-index: 999; } #logorow .flex-control-thumbs li { float: none; } #logorow #sliderrow .grid_12 #mainslider:before { top: 48px; width: 100%; height: 30vh; } #logorow #sliderrow .grid_12 #mainslider:after { background-size: 100% 100%; bottom: 128px; height: 44px; } #BeforeMainContainer .minishoppingcart { margin-top: 40px; } } @media only screen and (max-width: 767px) { .CardDesign.attribute input[type="radio"]+label .card_details p { line-height: 17px; font-size: 12px; } .grid_9, .grid_8, .grid_6, .grid_4, .grid_3 { width: 100%; } #navlower { margin-bottom: 50px; } .CardDesign.attribute input[type="radio"]+label { width: 147px; } .CardDesign.attribute input[type="radio"]:checked+label { width: 220px; } .DTV3 .overview-intro { height: 135px; } .CardDesign.attribute input[type="radio"]+label .card_details { top: 520px; width: calc(55% - 10px); } .DTV3 .DT_product-collateral .overview .add-info { padding: 20px; margin-left: 10%; margin-top: 40px; height: 222px; margin-bottom: 40px; width: 40%; box-sizing: border-box; } .DTV3 .DT_product-collateral .add-info label { padding-left: 0px; width: 34px; padding-right: 0px; border: none; text-align: left; min-width: 34px; } .DTV3 .DT_product-collateral .overview .add-info .quantityBox { width: calc(100% - 36px) !important; margin: 0px; float: right; } .DTV3 .DT_product-collateral .overview .price { width: calc(40% - 40px); font-size: 20px; margin-top: 115px; margin-left: 20px; left: 60%; } .DTV3 .DT_product-collateral .overview .add-info .productvariantaddtocartbutton { width: calc(100% - 40px); box-sizing: border-box; bottom: 20px; left: 20px; } .CardDesign.attribute input[type="radio"]+label .card_details h2 { position: relative; bottom: 0px; width: 100%; margin-bottom: 32px; font-size: 19px; line-height: 23px; } .CardDesign.attribute input[type="radio"]+label .front_back_toggle { bottom: -10px; } .CardDesign.attribute input[type="radio"]+label .card_details { overflow: visible; height: auto; } #billing-new-address-form table.table-container, #billing-new-address-form table.table-container tbody, #billing-new-address-form table.table-container tr, #billing-new-address-form table.table-container td, .account-page .customer-pass-recovery table, .account-page .customer-pass-recovery table tbody, .account-page .customer-pass-recovery table tr, .account-page .customer-pass-recovery table td, .account-page .customer-info-box table, .account-page .customer-info-box table tbody, .account-page .customer-info-box table tr, .account-page .customer-info-box table td, .account-page .addAddressTable table, .account-page .addAddressTable table tbody, .account-page .addAddressTable table tr, .account-page .addAddressTable table td, #SavedProjects table, #SavedProjects table tbody, #SavedProjects table tr, #SavedProjects table td { position: relative; float: left; width: 100%; box-sizing: border-box; display: block; padding-left: 0px; padding-right: 0px; line-height: 18px; } .enter-address-body>div:first-child>label { display: block; line-height: 20px; margin-bottom: 20px; } .layout--columnsOneE .page-title-cont { padding-top: 20px; padding-bottom: 20px; } #SavedProjects th { display: none; } .customer-SavedProjects .section-title { padding: 0px; margin-top: 0px; position: relative; float: right; top: 0px; margin-bottom: 10px; width: 100%; } .footercopyrightinner .grid_8 { margin-top: 10px; } #SavedProjects table tbody tr { padding-top: 30px; padding-bottom: 30px; } .orders_v2 .order_toggle_filter { width: 15.83%; margin-left: 0px; margin-top: 0px; font-size: 12px; height: 44px; } .orders_v2 .order_toggle_filter.order_All { margin-right: 0px; } .orders_v2 .order_toggle_filter { width: 32.66%; margin: 0.5% !important; } .orders_v2 .order_toggle_filter.order_All, .orders_v2 .order_toggle_filter.order_Processing { margin-right: 0px !important } .orders_v2 .order_toggle_filter.order_Complete, .orders_v2 .order_toggle_filter.order_Pending { margin-left: 0px !important } .orders_v2 .order_status_container { position: absolute; width: 100%; } .orders_v2 .order_container .order_details { padding-top: 50px; } .orders_v2 .order_container .order_details.short_view_order_details { padding: 2.5%; } .orders_v2 .order_products_list .order_prod_price { left: 10px; width: 30%; } html, body { font-size: 14px; } .orders_v2 .order_info_total { background-color: #e5e5e5; color: #000; } .orders_v2 .order_sort select { width: 100%; height: 40px; margin-bottom: 10px; margin-left: 0px; } .orders_v2 .order_page_select_container .order_page_but, .orders_v2 .order_page_select_container .order_page_state { height: 40px; line-height: 19px; } .orders_v2 .order_page_select_container button.order_page_but { width: 14%; margin: 0.5% } .orders_v2 .order_page_select_container div.order_page_state { width: 40%; margin: 0.5% } .orders_v2 .order_page_select_container button.order_page_but#first_page_button, .orders_v2 .order_page_select_container button.order_page_but#first_page_button2 { margin-left: 0px; } .orders_v2 .order_page_select_container button.order_page_but#last_page_button, .orders_v2 .order_page_select_container button.order_page_but#last_page_button2 { margin-right: 0px; } .orders_v2 .order_container .order_details { border-bottom: solid 1px #e5e5e5; } .cartTableWrapper .cart--actions div { display: inline-block; } .cart--actions input.basketEditButton, input.editaddressbutton, input.deleteaddressbutton, .cart--actions input#deleteCartItem { margin-bottom: 0px; } .cartTableWrapper tr td.product { padding-left: 10px; max-width: none; text-align: center; } .cartTableWrapper tr td:nth-child(4), .cartTableWrapper tr td:nth-child(5), .cartTableWrapper tr td:nth-child(6) { width: 33.3%; padding: 0px; } #checkout-confirm-order-load .cartTableWrapper tr td:nth-child(3) { width: 33.3%; padding: 0px; } #checkout-confirm-order-load .cartTableWrapper tr td:nth-child(3), #checkout-confirm-order-load .cartTableWrapper tr td:nth-child(4), #checkout-confirm-order-load .cartTableWrapper tr td:nth-child(5) { font-size: 18px; } #checkout-confirm-order-load .cartTableWrapper tr td:nth-child(4), #checkout-confirm-order-load .cartTableWrapper tr td:nth-child(6) { padding-top: 0px; } #checkout-confirm-order-load .cartTableWrapper tr td:nth-child(4):before { content: 'Qty: ' } .cartTableWrapper tr td:nth-child(4), .cartTableWrapper tr td:nth-child(6) { padding-top: 0px; font-size: 20px; font-weight: bold; } .cart-item-row .end .productPrice { font-size: 20px; } .cartTableWrapper tr td.product { line-height: 18px; } .cart-item-row .productpicture img { margin-left: 0px; } .common-buttons { float: left; margin-top: 10px; width: 100%; } .grid_12.checkoutAttributesWrapper { position: relative; float: left; width: 100%; text-align: center; } .cart-footer { position: relative; float: right; width: 100%; } .cart-footer .cart-collaterals input { width: calc(100% - 100px) !important; } .cart-footer .cart-collaterals .coupon-box--title { font-size: 14px; line-height: 41px; padding-right: 0px; text-align: center; width: 100%; } .cart-footer #cartTotals:before { content: 'TOTALS'; width: 100%; margin-top: 0px; text-align: center; padding-right: 0px; font-size: 20px; padding-top: 0px; } #cartTotals .total-info { width: 100%; } .cart-footer #cartTotals:before, #cartTotals .total-info { position: relative; float: left; width: 116%; overflow: visible; margin: 0px; margin-left: -8%; padding: 9%; padding-top: 30px; padding-bottom: 0px; background: #eee; box-sizing: border-box; font-size: 18px; } #cartTotals .total-info { margin-bottom: 40px; padding-bottom: 40px; } #cartTotals table.cart-total { margin-bottom: 0px; } .cart-footer #cartTotals:before { margin-top: 40px; } .checkout-buttons input[type="submit"], .checkout-buttons button { width: 100%; margin: 0px; margin-bottom: 10px; } .checkout-data .opc .section .step-title h2 { font-size: 18px; padding-left: 10px; } .checkout-data .opc .section .sectionheader { background: transparent; padding-bottom: 43px; margin-bottom: 10px; } .checkout-data .opc .section .sectionheader .number { font-size: 18px; width: 30px; } .layout--columnsOneE #contentiInnerRow { padding-top: 40px; padding-bottom: 40px; min-height: 0px; } .checkout-data .opc .section .back-link a { margin: 0px; width: 100%; } .checkout-data .opc .section .newaddressnextstepbutton, .checkout-data .opc .section .shippingmethodnextstepbutton, .checkout-data .opc .section .paymentmethodnextstepbutton, .checkout-data .opc .section .paymentinfonextstepbutton, .checkout-data .opc .section .confirmordernextstepbutton, .checkout-data .opc .section .back-link { float: none; display: inline-block; width: 49% !important; margin: 0px !important; box-sizing: border-box; } .checkout-data .opc .section .step .buttons { box-sizing: border-box; padding-left: 0px; padding-right: 0px; } .checkout-data .opc .section .shipping-option-item { width: 45%; height: 0px; padding-bottom: 45%; } .checkout_data_integrated .order-overview tr { position: relative; float: left; width: 100%; padding: 1% !important; box-sizing: border-box; text-align: center; border: solid 2px #ccc; line-height: 16px; } .checkout-data-info .order-details-box thead { display: none; } .checkout-data-info .order-details-box tbody td:before { content: ''; display: block; font-size: 20px; font-weight: bold; } .checkout-data-info .order-details-box tbody td:nth-child(1):before { content: 'Delivery Options'; } .checkout-data-info .order-details-box tbody td:nth-child(2):before { content: 'Delivery Address'; } .checkout-data-info .order-details-box tbody td:nth-child(3):before { content: 'Billing Address'; } .checkout-data-info .order-details-box table tbody tr td, .checkout-data-info .order-details-box table tbody tr, .checkout-data-info .order-details-box table tbody, .checkout-data-info .order-details-box table tbody, .checkout-data-info .order-details-box table { position: relative; float: left; width: 100%; display: block; box-sizing: border-box; } .checkout_data_integrated .order-details-box tbody .midColumn { border-left: none; border-right: none; } } @media only screen and (max-width: 959px) and (max-height: 958px) { a.create-your-own { padding: 12px; padding-bottom: 23px; font-size: 13px; } a.create-your-own:after { width: 12px; height: 12px; margin-left: -9px; } #logorow .social-icons a, #menurow .social-icons a { width: 30px; height: 30px; line-height: 29px; font-size: 12px; margin-right: 7px; } #logorow .mobile-menu-button { top: 15px; left: 15px; } #logorow .account-menu-button { top: 15px; right: 15px; } #logorow .social-icons { bottom: 15px; left: 15px; } #logorow .minishoppingcartwrapper { right: 69px; top: 15px; } #logorow .social-icons { display: none; } } @media only screen and (max-width: 490px) { .page-title-cont:before { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); } .layout--columnsOneE .page-title-cont:before { display: none; } .page-title-cont h1, h2.promo, .block-blog-archive .title, .layout--columnsOneD .page-title-cont h1, .layout--columnsOneE .page-title-cont h1 { width: 100%; box-sizing: border-box; text-align: center; padding: 20px; } .DTV3 .DT_product-collateral .productname { font-size: 26px; line-height: 36px; width: 100%; box-sizing: border-box; text-align: center; padding: 15px; } .DTV3 .overview-intro { height: 110px; } .def-padding, .homeFeaturedProductsWrapper, .homeFeaturedCategoriesWrapper, .instagram-feed, footer, .layout--columnsOneA #contentrow .row__container .category-productingrid, #contentiInnerRow .login__wrapper, #contentrow .account-page, .layout--columnsOneD #album, div.blogpost { padding-top: 40px; padding-bottom: 50px; } .cta-banner.def-padding { padding-top: 15%; padding-bottom: 15%; } #logorow #sliderrow li .overlay { position: absolute; top: auto; bottom: 0px; right: 0px; width: 200%; height: 112%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } #logorow #sliderrow li .copy h1 { font-size: 28px; line-height: 35px; } #logorow #sliderrow li .copy h2 { font-size: 24px; line-height: 30px; } #logorow #sliderrow .grid_12 #mainslider ul.slides li { border-bottom: solid 20vh #000; border-top: solid 50px #000; box-sizing: border-box; } #logorow #sliderrow .grid_12 #mainslider ul.slides li:after { display: block; } #logorow #sliderrow li .copy h { display: inline; } #logorow #sliderrow li .copy, #logorow #sliderrow li .copy.left-side, #logorow #sliderrow li .copy.right-side { position: absolute; left: 10%; padding: 20px; right: 10%; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; bottom: 0px; top: auto; text-align: center; z-index: 33; } #logorow #sliderrow li .copy.left-side { margin-bottom: 65px; } #logorow #sliderrow li .copy:before, #logorow #sliderrow li .copy.right-side:before, #logorow #sliderrow li .copy:before, .page-title-cont h1:before, h2.promo:before, .DT_product-collateral .productname:before, .block-blog-archive .title:before, .cta-banner .copy h2:before { content: ''; position: absolute; width: 20%; top: 0px; left: 0px; bottom: 0px; border: solid 2px #CB571D; border-right: none; } #logorow #sliderrow li .copy:after, #logorow #sliderrow li .copy:after, .page-title-cont h1:after, h2.promo:after, .DT_product-collateral .productname:after, .block-blog-archive .title:after, .cta-banner .copy h2:after { content: ''; position: absolute; width: 20%; top: 0px; right: 0px; bottom: 0px; border: solid 2px #CB571D; border-left: none; } #logorow #sliderrow li .copy.left-side:before, #logorow #sliderrow li .copy.left-side:after { border-bottom: none; } #logorow #sliderrow li .copy.right-side:before, #logorow #sliderrow li .copy.right-side:after { border-top: none; } #logorow .flex-control-thumbs { right: 5%; left: 5%; bottom: 80px; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; top: auto; width: 90%; text-align: center; z-index: 999; display: block; } #logorow .flex-control-thumbs li { float: none; } #logorow #sliderrow .grid_12 #mainslider:before { top: 48px; width: 100%; height: 30vh; } #logorow #sliderrow .grid_12 #mainslider:after { background-size: 100% 100%; bottom: 128px; height: 44px; } html body .listWrapper .listItem, .product-grid .listItem.grid_3, .sub-category-grid .listItem.grid_3 { padding-top: 82%; padding-bottom: 180px; width: 100%; margin-bottom: 15%; } html body .listWrapper .listItem:last-child, .product-grid .listItem.grid_3:last-child, .sub-category-grid .listItem.grid_3:last-child { margin-bottom: 5%; } #logorow, #logorow>.row__container>.grid_12 { overflow: visible; } #logorow #sliderrow { margin-bottom: -50px; overflow: hidden; } #logorow #sliderrow li .copy, #logorow #sliderrow li .copy.left-side, #logorow #sliderrow li .copy.right-side { bottom: 40px; } a.create-your-own { padding: 12px; padding-bottom: 28px; font-size: 12px; } #logorow #sliderrow li .copy h3, .promo-h3, .bestsellers h3, .featuredproducts h3, .instagram-feed h2, .related-products-grid h3 { font-size: 21px; line-height: 32px; } .cta-banner .copy h5 { font-size: 18px; margin-bottom: 20px; text-align: center; } .cta-banner .btn_site, .cta-banner .btn_site:hover { text-align: center; } .cta-banner .copy p { font-size: 15px; line-height: 24px; margin-bottom: 30px; text-align: center; } .cta-banner .copy h2 { font-size: 30px; margin-bottom: 20px; padding: 20px; line-height: 36px; text-align: center; box-sizing: border-box; } .row .row__container, .layout--columnsOneA #contentrow .row__container .category-productingrid, .section.general_cont .row__container, #contentiInnerRow .login__wrapper, .DT_product-details-page.DTV3 .DT_product-collateral-top, div.blogpost, .row .row__container_2 { max-width: 86%; } .instagram-feed ul { max-width: 100%; } .instagram-feed li div.center { width: 100%; font-size: 16px; } .instagram-feed li:nth-child(5) { display: block; width: 100%; padding-bottom: 100%; } .instagram-feed { padding-bottom: 0px; } .footerinner .grid_3 { width: calc(100% - 50px); } .footerinner .grid_3:nth-child(4) { width: 40px; position: absolute; top: 0px; right: 0px; } .footercopyrightinner .grid_8 { border-top: solid 2px #fff; margin-top: 42px; } .footer_logo img { width: 130px; max-width: 100%; } .signup_for_newsletter .signup_submit { width: 40%; } .signup_for_newsletter .signup-email { border: none; width: 60%; } .signup_for_newsletter h2 { margin-bottom: 15px; } @media only screen and (max-width: 350px) { .CardDesign.attribute input[type="radio"]+label .card_details p { line-height: 15px; font-size: 11px; } } .DT_product-details-page.DTV3 .DT_product-essential { height: 320px; border-bottom: solid 450px #EFEFEF; } .DTV3 .DT_product-collateral .overview .add-info { padding: 15px; margin-bottom: 100px; } .DTV3 .DT_product-collateral .add-info label { padding-left: 0px; width: 32px; padding-right: 0px; border: none; min-width: 0px; } .DTV3 .DT_product-collateral .overview .price .productPrice:before { display: none; } .DTV3 .DT_product-collateral .overview .add-info .productvariantaddtocartbutton { width: calc(100% - 30px); box-sizing: border-box; bottom: 20px; left: 15px; } .DTV3 section#prices .price-table ul { width: 50%; } .DTV3 section#prices .price-table ul li:first-child, .DTV3 section#prices .price-table ul li { width: 100%; padding-top: 10px; padding-bottom: 10px; } #mainslider.related_products_slider { width: 300px; } .account-page .addAddressButtonWrapper, #order_details_v2 .od_print_button { margin-top: 0px; position: relative; float: right; } .account-page .address-item>.content>table table>tbody>tr>td:nth-child(1), .account-page .address-item>.content>table table>tbody>tr>td:nth-child(2) { width: 100%; } .account-page .address-item>.content>table>tbody>tr>td:nth-child(3) { width: 100%; float: left; margin-top: 10px; } .orders_v2 .order_toggle_filter, .orders_v2 .order_toggle_filter.order_All, .orders_v2 .order_toggle_filter.order_Processing { width: 49.5%; margin-right: 1% !important; margin-left: 0px !important; } .orders_v2 .order_toggle_filter.order_All, .orders_v2 .order_toggle_filter.order_Complete, .orders_v2 .order_toggle_filter.order_Unpaid { margin-right: 0px !important; } .orders_v2 .order_container .short_view_status_details { width: 90%; right: 5%; box-sizing: border-box; height: 32px; } .orders_v2 .order_search { margin-top: 0px; position: relative; width: 100%; top: 0px; } .cartTableWrapper tr, .cartTableWrapper tr td, .cartTableWrapper tr th { padding-right: 0px !important; padding-left: 0px !important; } .cartTableWrapper tr td.product { padding-left: 10px !important; padding-right: 10px !important; } .checkout-data .opc .section .shipping-option-item { width: 95%; height: 0px; padding-bottom: 95%; } } @media only screen and (max-width: 490px) and (max-height: 767px) { #logorow #sliderrow li .copy, #logorow #sliderrow li .copy.left-side, #logorow #sliderrow li .copy.right-side { left: 7%; padding: 15px; right: 7%; } } @media only screen and (max-width: 490px) { .staticProduct select { width: 60% !important; } } /* MEGA EDIT DEFAULTS */ #fontPreloadDiv { height: 0px !important; } .modal-body .meuiTextArea, .modal-body .meuiTextBox, .modal-body .meuiSelect { line-height: 28px; padding-left: 16px; padding-right: 16px; padding-top: 6px; padding-bottom: 6px; } /*MEGA EDIT CARD PRODUCT*/ .loadingArea, .loadingScreen, .addtoBasketScreen { z-index: 1060; } body.CardProduct { z-index: 9999999 } body.CardProduct:before, body.CardProduct.megaEditMobileMode .MegaEditHomeOverlay { content: ''; position: fixed; top: 2%; left: 2%; width: 120px; height: 110px; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/toptrumps_logomytoptrumps-dot-com-logo-White.png'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 1060; } body.CardProduct .modal-body .meuiLabel { color: #ffffff; width: 100%; text-align: center; } body.CardProduct, body.CardProduct .modal.EditorIntro, body.CardProduct .modal.EditorCategories, body.CardProduct .modal.EditorIndividualCategories, body.CardProduct.megaEditMobileMode .modal.EditorDesigns, .loadingArea, .loadingScreen, .addtoBasketScreen, body.CardProduct.megaEditMobileMode .modal.EditorTutorial, body.CardProduct.megaEditMobileMode .modal.EditorLoadSaved, div.image_preload, .megaEditMobileMode #previewView, body.CardProduct .ui-widget-overlay { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/MECardBACKGROUND.jpg') !important; background-size: cover !important; background-position: center !important; } body.CardProduct .ui-widget-overlay { opacity: 1 !important; } div.image_preload { position: fixed; left: -1px; width: 1px; height: 1px; bottom: 0px; } .loadingArea .loadingLogo, .loadingScreen .loadingLogo { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/toptrumps_logomytoptrumps-dot-com-logo-White.png'); background-size: 189px; } .loadingArea .loadingLogo .loadingSpinner, .loadingScreen .loadingLogo .loadingSpinner { margin-top: 46px; padding-right: 63px; } .ME_loading_hints ul li { border: solid 2px #ffffff; } body.CardProduct .modal.EditorIntro .modal-header, body.CardProduct .modal.EditorIntro .modal-footer { display: none !important; } body.CardProduct.megaEditMobileMode .ui-layout-southh_inner .buttonContainer.rightSide .nextStepButton, body.CardProduct.megaEditMobileMode .undoRedoContainer, body.CardProduct.megaEditMobileMode .snapControlButton, body.CardProduct.megaEditMobileMode .autofillButton, body.CardProduct.megaEditMobileMode .addImageFieldButton, body.CardProduct.megaEditMobileMode .addTextFieldButton, body.CardProduct.megaEditMobileMode .editorLeft, body.CardProduct.megaEditMobileMode .clearPagesButton { display: none !important; } .cc_rotate, .cc_prev, .cc_next { background-color: transparent !important; border: none !important; } .cc_next_overlay, .cc_prev_overlay { bottom: 15% !important; } body.CardProduct .modal-dialog .modal-content { max-width: 100%; padding: 30px; background: #000; border: solid 2px #232323; min-width: 350px; } body.CardProduct .modal.EditorIntro .modal-content { background: transparent; border: none; box-shadow: none; } body.CardProduct .modal-dialog { position: absolute !important; left: 50% !important; top: 50% !important; -webkit-transform: translate(-50%, -50%) !important; -moz-transform: translate(-50%, -50%) !important; -o-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; margin: 0px; } body.CardProduct .modal-header { background-color: transparent; border-bottom: solid 2px #fff; margin: 0px; padding: 0px; padding-bottom: 20px; } body.CardProduct .modal-footer { background-color: transparent; border-top: solid 2px #fff; margin: 0px; padding: 0px; padding-top: 30px; margin-top: 15px; text-align: center; } body.CardProduct .modal-body { padding-left: 10px; padding-right: 10px; padding-top: 30px; padding-bottom: 30px; color: #fff; text-align: center; max-height: calc(100vh - 250px); overflow: hidden; /*overflow-y: auto;*/ position: relative; padding-right: 0px; } body.CardProduct .modal-body>div { position: relative; float: left; width: 100%; margin-bottom: 10px; } body.CardProduct .modal.EditorGalleryDisclaimer .modal-dialog .modal-body { max-width: 400px; } body.CardProduct .modal.EditorIntro .modal-dialog .modal-body { width: 90vw; max-width: 900px; padding: 0px; } body.CardProduct .modal.EditorIntro .modal-dialog button { width: 33.3%; height: 0px; padding: 0px; padding-top: 25%; padding-bottom: 5%; background: transparent !important; border: none; float: left; margin: 1.16%; font-size: 20px; position: relative; } body.CardProduct .modal.EditorIntro .modal-dialog button.LoadSaved { margin-left: 16.5% !important; } body.CardProduct .modal.EditorIntro .modal-dialog button span { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 25%; display: block; width: 100%; height: 75%; background-size: contain; background-position: center; background-repeat: no-repeat; } body.CardProduct .modal.EditorIntro .modal-dialog button.Tutorial span { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/Tutorial.png'); } body.CardProduct .modal.EditorIntro .modal-dialog button.LoadSaved span { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/SavedData.png'); } body.CardProduct .modal.EditorIntro .modal-dialog button.StartNew span { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/Newcard.png'); } /* body.CardProduct .modal.EditorIntro .modal-dialog .modal-content { background: transparent; box-shadow: none; } */ body.CardProduct .modal .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { padding-right: 15px; } body.CardProduct .modal.EditorCategories .modal-content, body.CardProduct .EditorIndividualCategories .modal-content { width: 390px; } body.CardProduct .modal.EditorCategories .CatInputDropdown, body.CardProduct .modal.EditorIndividualCategories .categoriesDropdown { width: 100%; background-color: #fff !important; color: #000 !important; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/dropdown_arrow.svg'); background-position: right; background-repeat: no-repeat; background-size: contain; text-transform: unset; font-family: 'Open Sans', sans-serif; font-weight: bold; font-size: 14px; padding-right: 40px; letter-spacing: 0.5px; margin-bottom: 10px !important; position: relative !important; height: 45px; line-height: 20px !important; } body.CardProduct .modal.EditorCategories .CatInputDropdown span { display: block; font-size: 10px; font-weight: normal; font-family: 'Open Sans', sans-serif; margin-top: 3px; letter-spacing: 0.5px; } body.CardProduct .modal.EditorIndividualCategories .categoryInput { width: 100%; background-color: #fff !important; color: #000 !important; } body.CardProduct .modal.EditorIndividualCategories .rangeLabel, body.CardProduct .modal.EditorIndividualCategories .rangeValue { float: left; width: 31%; margin: 0px; box-sizing: border-box; min-width: 0px; margin-right: 3.5%; } body.CardProduct .modal.EditorIndividualCategories .rangeValue { background-color: #fff; } body.CardProduct .modal.EditorIndividualCategories .rangeLabel.lastInRow, body.CardProduct .modal.EditorIndividualCategories .rangeValue.lastInRow { margin-right: 0px; } body.CardProduct .modal.EditorIndividualCategories .rng_checkbox { float: left; width: 100%; margin-top: 26px; margin-bottom: 0px; } body.CardProduct .modal.EditorIndividualCategories .meuiLabel.label4 { padding: 9px; font-size: 12px; } body.CardProduct .modal.EditorIndividualCategories .rng_checkbox input { display: none; } body.CardProduct .modal.EditorIndividualCategories .rng_checkbox input+span.check { line-height: 43px; padding-left: 50px; position: relative; top: -8px; } .rng_checkbox .ShowOnChecked { display: none; font-size: 12px; line-height: 16px; padding-left: 77px; text-align: left; width: 100%; } .rng_checkbox.is-active .ShowOnChecked { display: block; } body.CardProduct .modal.EditorIndividualCategories .rng_checkbox input+span.check:before { content: ''; position: absolute; left: 5px; top: 5px; box-sizing: border-box; width: 30px; height: 30px; border: solid 2px #fff; } body.CardProduct .modal.EditorIndividualCategories .rng_checkbox input:checked+span.check:after { content: ''; position: absolute; left: 12px; top: 12px; box-sizing: border-box; width: 16px; height: 16px; background: #fff; } body.CardProduct .modal-footer button { width: 40%; float: none; margin: 0px !important; margin-right: 5% !important; background: transparent !important; border: solid 2px #fff !important; } body.CardProduct .modal-footer button:last-child { margin-right: 0px !important; width: 55%; border: solid 2px #CB571D !important; background: #CB571D !important; } body.CardProduct .modal.EditorIndividualCategories .label3 h4 { border-bottom: solid 2px #fff; padding-bottom: 10px; margin-bottom: 0px; } body.CardProduct .modal .errorMSG { width: 100%; margin-bottom: 13px; border: none; color: #cb571d; background: #000000; font-size: 14px; font-weight: bold; } body.CardProduct.megaEditMobileMode .editorMain, body.CardProduct .TouchActionCanvasOverlay { display: block !important; position: fixed !important; width: 600px !important; height: auto !important; left: auto !important; bottom: auto !important; right: 50% !important; top: 50% !important; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 2 !important; } body.CardProduct.megaEditMobileMode .freeTargetContainer { display: block; width: 1400px; left: 50% !important; top: 50% !important; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: solid 2px #CB571D; bottom: auto; background: rgba(0, 0, 0, .3); z-index: 1 !important; height: auto; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .ImageButton { position: relative; float: left; width: 96%; margin: 2% !important; height: 0px; padding-bottom: 30%; text-align: center; border: solid 2px #fff !important; background: transparent !important; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .ImageButton span.thumb { left: 5px; position: absolute; top: 5px; right: 5px; bottom: 5px; background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 2; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .ImageButton span.add_image { position: absolute; width: 100px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .ImageButton span.add_image i { width: 100%; height: 50px; display: block; position: relative; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .ImageButton span.add_image i:before { content: ''; position: absolute; width: 30px; height: 2px; top: 50%; left: 50%; margin-left: -15px; margin-top: -1px; background: #fff; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .ImageButton span.add_image i:after { content: ''; position: absolute; width: 2px; height: 30px; top: 50%; left: 50%; margin-left: -1px; margin-top: -15px; background: #fff; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .TextField { position: relative; float: left; width: 96%; margin: 2% !important; text-align: center; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .TextArea { position: relative; float: left; width: 96% !important; margin: 2% !important; text-align: center; line-height: 22px; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .CatValue { position: relative; float: left; width: 46%; margin: 2% !important; margin-top: 0px !important; text-align: center; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .CatValue.LastItem { margin-left: 26% !important; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .HeaderLabel { position: relative; float: left; width: 100%; text-align: center; color: #fff; font-weight: bold; padding-bottom: 3%; padding-top: 3%; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .ValueNrInput { position: relative; float: left; width: 100%; text-align: center; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget>div { display: block; width: 130%; max-width: 480px; position: relative; float: left; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.6); -moz-transform: translate(-50%, -50%) scale(0.6); -o-transform: translate(-50%, -50%) scale(0.6); transform: translate(-50%, -50%) scale(0.6); } .megaEditMobileMode .editorTop, .megaEditMobileMode .editorBottom { background: transparent; overflow: visible !important; } body.CardProduct .modal.EditorGalleryDisclaimer .modal-dialog .modal-content { width: 460px; } body.CardProduct .modal.EditorGalleryDisclaimer .warning-triangle { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/ic_warning_24px.svg'); position: relative; float: left; width: 100%; height: 120px; background-repeat: no-repeat; margin-bottom: 40px; margin-top: 20px; background-size: contain; background-position: center; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions { width: 300px; position: relative; display: block; margin: 0 auto; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .imagePositionOptions { position: relative; float: left; width: 100%; margin-bottom: 10px; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton { width: 69px; height: 69px; position: relative; float: left; box-sizing: border-box; background: rgba(0, 0, 0, 0) !important; margin: 2px !important; color: #fff !important; outline: none !important; touch-action: manipulation; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton .fa { font-size: 30px; color: #cb571d; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveUpButton, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveDownButton { width: 150px; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveLeftButton, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveRightButton { height: 150px; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.ResetButton { width: 150px; height: 150px; border: solid 1px #cb571d !important; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions h3 { text-align: center; color: #fff; text-transform: uppercase; letter-spacing: 1px; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p { color: #fff; text-align: center; font-size: 14px; letter-spacing: 1px; position: relative; float: left; width: 86%; margin-bottom: 20px; border: solid 1px #000; padding: 18px; margin-left: 7%; line-height: 24px; background: rgba(0, 0, 0, .3); } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p .fa { color: #cb571d; font-size: 20px; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p .fa.fa-caret-up, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p .fa.fa-caret-down, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p .fa.fa-caret-left, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p .fa.fa-caret-right, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p .fa.fa-picture-o { color: #fff; font-size: 24px; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveUpButton .fa, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveDownButton .fa, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveLeftButton .fa, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveRightButton .fa, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.ResetButton .fa { font-size: 60px; color: #fff; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .BackButton { position: relative; float: left; width: 86%; height: 50px; box-sizing: border-box; background: #cb571d !important; left: 7%; } body.CardProduct .modal p { padding-bottom: 0px; } body.CardProduct .modal p:last-child { margin-bottom: 0px; } body.CardProduct .memobilePageClass button { background-color: transparent !important; background-repeat: no-repeat; background-size: contain; background-position: center; position: fixed; top: 50%; height: 100px; width: 100px; margin-top: -50px !important; outline: none !important; } body.CardProduct .memobilePageClass button .fa { display: none; } body.CardProduct .memobilePageClass button:before { content: ''; position: absolute; width: 100px; height: 100px; box-sizing: border-box; border-top: solid 10px #fff; border-left: solid 10px #fff; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(-45deg); -moz-transform: translate(-50%, -50%) rotate(-45deg); -o-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } body.CardProduct .memobilePageClass button:last-child:before { -webkit-transform: translate(-50%, -50%) rotate(135deg); -moz-transform: translate(-50%, -50%) rotate(135deg); -o-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg); } body.CardProduct .memobilePageClass button:first-child { right: 50%; margin-right: 730px !important; } body.CardProduct .memobilePageClass button:last-child { left: 50%; margin-left: 730px !important; } body.CardProduct .memobilePageClass button:disabled { display: none !important; } body.CardProduct button, body.CardProduct button.btn { border: none; padding: 0px; padding-left: 10px; padding-right: 10px; line-height: 20px; font-size: 18px; height: 40px; margin-top: 0px !important; } body.CardProduct .memobilePageClass button { margin-top: -40px !important; } body.CardProduct.megaEditMobileMode .memobilePageClass span, body.CardProduct.megaEditMobileMode .btn.backButton, body.CardProduct.megaEditMobileMode .viewControlButton.previewButton, body.CardProduct.megaEditMobileMode .clearPagesButton.resetPagesbtn, body.CardProduct.megaEditMobileMode .CategoryConfigureButton, body.CardProduct.megaEditMobileMode .SelectDesignButton, body.CardProduct.megaEditMobileMode .TutorialButton, body.CardProduct.megaEditMobileMode .MegaEditHomeButton, body.CardProduct.megaEditMobileMode .saveProjectButton, body.CardProduct .EditorLoadSaved .LoadDataButton, body.CardProduct .EditorLoadSaved .DeleteDataButton, body.CardProduct .SaveDataButton, .preview_close_button, body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close, body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-buttonpane button { max-width: none; background-color: transparent !important; height: 50px; line-height: 50px; border: solid 2px #fff; font-size: 20px; font-weight: 600; text-transform: uppercase; font-family: 'Kanit', sans-serif; letter-spacing: 1px; outline: none; } body.CardProduct.megaEditMobileMode .MegaEditHomeOverlay { display: block !important; } body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-buttonpane button { min-width: 150px; margin-left: 5px; margin-right: 5px; } .add_to_basket_from_preview { max-width: none !important; background-color: #CB571D !important; height: 50px !important; line-height: 50px !important; border: solid 2px #CB571D !important; font-size: 20px !important; font-weight: 600 !important; text-transform: uppercase !important; font-family: 'Kanit', sans-serif !important; letter-spacing: 1px !important; outline: none !important; padding: 0px !important; border-radius: 0px !important; right: 3% !important; bottom: 3% !important; top: auto !important; color: #fff !important; padding-left: 20px !important; padding-right: 20px !important; z-index: 9999 !important; width: 240px !important; } body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close { width: 30px; height: 30px; background-size: contain; } body.CardProduct.megaEditMobileMode .memobilePageClass span:hover, body.CardProduct.megaEditMobileMode .btn.backButton:hover, body.CardProduct.megaEditMobileMode .viewControlButton.previewButton:hover, body.CardProduct.megaEditMobileMode .clearPagesButton.resetPagesbtn:hover, body.CardProduct.megaEditMobileMode .CategoryConfigureButton:hover, body.CardProduct.megaEditMobileMode .SelectDesignButton:hover, body.CardProduct.megaEditMobileMode .TutorialButton:hover, body.CardProduct.megaEditMobileMode .MegaEditHomeButton:hover, body.CardProduct.megaEditMobileMode .saveProjectButton:hover, body.CardProduct .EditorLoadSaved .LoadDataButton:hover, body.CardProduct .EditorLoadSaved .DeleteDataButton:hover, body.CardProduct button:hover, .add_to_basket_from_preview:hover, .preview_close_button:hover, body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-buttonpane button:hover { opacity: .7 !important; text-decoration: none !important; } .preview_close_button { position: absolute !important; bottom: 3% !important; top: auto !important; left: 3% !important; z-index: 9999 !important; color: #fff !important; border: solid 2px #fff !important; height: 50px !important; line-height: 50px !important; width: 240px !important; } .preview_close_button .fa { display: none !important; } .preview_close_button:after { content: '< Back'; } body.CardProduct .EditorLoadSaved .LoadDataButton, body.CardProduct .SaveDataButton { width: calc(100% - 50px); border: solid 2px #fff !important; padding-left: 20px; box-sizing: border-box; line-height: 18px; margin-bottom: 15px; } body.CardProduct .SaveDataButton { width: 100%; } body.CardProduct .EditorLoadSaved .LoadDataButton span { font-size: 12px; display: block; } body.CardProduct .EditorLoadSaved .DeleteDataButton { border: solid 2px #fff !important; width: 50px; position: relative; margin-bottom: 15px; } body.CardProduct .EditorLoadSaved .DeleteDataButton .icon { background-image: url(/1231660890/Handler/Static/Catfish.Web/Scripts/ME2k/img/appbar.delete.png); background-position: center; background-repeat: no-repeat; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-size: 45px; } body.CardProduct.megaEditMobileMode .clearPagesButton.resetPagesbtn, body.CardProduct.megaEditMobileMode .btn.backButton, body.CardProduct.megaEditMobileMode .CategoryConfigureButton, body.CardProduct.megaEditMobileMode .SelectDesignButton, body.CardProduct.megaEditMobileMode .TutorialButton, body.CardProduct.megaEditMobileMode .MegaEditHomeButton { border: none; width: auto !important; padding: 0px; } body.CardProduct.megaEditMobileMode .memobilePageClass span { border: none; } body.CardProduct.megaEditMobileMode .clearPagesButton.resetPagesbtn, body.CardProduct.megaEditMobileMode .MegaEditHomeButton { position: fixed; top: 3%; left: 3%; margin-left: 300px !important; display: block !important; text-transform: none; color: #fff; } body.CardProduct.megaEditMobileMode .MegaEditHomeButton { margin-left: 200px !important; } body.CardProduct.megaEditMobileMode .clearPagesButton.resetPagesbtn .fa { display: none; } body.CardProduct.megaEditMobileMode .TutorialButton { position: fixed; top: 3%; right: 3%; text-transform: none; } body.CardProduct.megaEditMobileMode .CategoryConfigureButton, body.CardProduct .btn.backButton { position: fixed; bottom: 3%; left: 3%; } body.CardProduct.megaEditMobileMode .CategoryConfigureButton { margin-left: 250px !important; } body.CardProduct .btn.backButton { margin-bottom: 10px !important; border-bottom: solid 2px #fff !important; height: 40px !important; } body.CardProduct .viewControlButton.previewButton, body.CardProduct.megaEditMobileMode .SelectDesignButton, body.CardProduct.megaEditMobileMode .saveProjectButton { position: fixed; bottom: 3%; right: 3%; } body.CardProduct.megaEditMobileMode .confirmextratxt { display: inline-block; } body.CardProduct.megaEditMobileMode .viewControlButton.previewButton, body.CardProduct.megaEditMobileMode .saveProjectButton { width: 260px; font-size: 18px; } body.CardProduct.megaEditMobileMode .buttonContainer.rightSide .buttonsContainer .saveProjectButton { height: 50px !important; margin-bottom: 65px !important; font-size: 18px; } body.CardProduct.megaEditMobileMode .SelectDesignButton { margin-right: 320px !important; } body.CardProduct .memobilePageClass span { position: fixed; bottom: 3%; left: 50%; margin-left: -100px !important; text-transform: none; width: 200px !important; font-size: 18px; } body.CardProduct .memobilePageClass span:before { content: 'Card: '; } body.CardProduct .memobilePageClass span:after { content: '/31'; } body.CardProduct .AdminOnly { display: none; } body.CardProduct.megaEditBodyClass-Admin .AdminOnly { display: block; } body.CardProduct.megaEditBodyClass-Admin .modal.EditorIntro .AdminOnly { padding-top: 20px; border: solid 2px #fff !important; padding-bottom: 20px; height: auto; margin-top: 30px !important; left: 33.3%; } body.CardProduct .alltxt { display: inline-block !important; } body.CardProduct .ProgressBar { position: fixed !important; top: 3% !important; left: 600px !important; right: 600px !important; height: auto !important; width: calc(100vw - 1200px); max-width: unset; min-width: unset; display: block; background: transparent !important; outline: none !important; } body.CardProduct .ProgressBar .pb-top { color: #fff; text-align: center; position: relative; float: left; width: 100%; height: auto; margin-bottom: 7px !important; } body.CardProduct .ProgressBar .pb-top span { position: absolute; right: 0px; } body.CardProduct .ProgressBar .pb-bar { position: relative; float: left; width: 100%; height: 10px; background: #fff; } body.CardProduct .ProgressBar .pb-bar span { position: absolute; top: 0px; left: 0px; bottom: 0px; background: #CB571D; } body.CardProduct.megaEditMobileMode .modal.EditorDesigns {} body.CardProduct.megaEditMobileMode .modal.EditorDesigns .modal-content { width: 880px; } body.CardProduct.megaEditMobileMode .modal.EditorDesigns .DesignSelector { position: relative; display: inline-block; width: 25%; margin: 3% !important; height: 0px; border-radius: 20px; float: none; padding: 0px !important; padding-bottom: 45% !important; background: transparent !important; vertical-align: middle; } body.CardProduct.megaEditMobileMode .modal.EditorDesigns .DesignSelector.Active { background: #cb571d !important; border-radius: 10px; } body.CardProduct.megaEditMobileMode .modal.EditorDesigns .DesignSelector .card_thumb { left: 0px; position: absolute; top: 0px; width: 100%; height: 0px; padding-bottom: 161%; margin: 0px !important; } body.CardProduct.megaEditMobileMode .modal.EditorDesigns .DesignSelector .card_thumb .the_card { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-size: 200%; background-repeat: no-repeat; border-radius: 20px; margin: 0px !important; } body.CardProduct.megaEditMobileMode .modal.EditorDesigns .DesignSelector .card_details { position: absolute; bottom: 0px; width: 100%; overflow: hidden; } body.CardProduct.megaEditMobileMode .modal.EditorDesigns .DesignSelector .card_details h2 { margin: 0px; font-size: 16px; } body.CardProduct.megaEditMobileMode .modal.EditorDesigns .DesignSelector .card_details p { display: none; } body.CardProduct.megaEditMobileMode .modal.EditorDesigns .meuiStacklayoutVertical { display: inline; } body.CardProduct .modal.EditorDesigns .modal-body { width: 800px; max-height: calc(80vh - 200px); position: relative; float: left; text-align: center; overflow-x: hidden; overflow-y: auto; padding-top: 20px; padding-bottom: 10px; } body.CardProduct .modal.EditorGalleryDisclaimer p { font-size: 16px; font-weight: 400; line-height: 22px; } body.CardProduct .modal.EditorGallery {} body.CardProduct .modal.EditorGallery .Gallery { min-height: 200px; } body.CardProduct .modal.EditorGallery .Gallery:after { content: 'Loading Library. Please wait...'; font-size: 20px; font-weight: bold; margin-top: 50px; margin-bottom: 50px; display: block; animation: colorchange 1s; /* animation-name followed by duration in seconds*/ /* you could also use milliseconds (ms) or something like 2.5s */ -webkit-animation: colorchange 1s; /* Chrome and Safari */ animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; position: relative; float: left; width: 100%; padding: 10px; } @keyframes colorchange { 0% { background: linear-gradient(to right, black, orange 0%, black); } 10% { background: linear-gradient(to right, black, orange 10%, black); } 20% { background: linear-gradient(to right, black, orange 20%, black); } 30% { background: linear-gradient(to right, black, orange 30%, black); } 40% { background: linear-gradient(to right, black, orange 40%, black); } 50% { background: linear-gradient(to right, black, orange 50%, black); } 60% { background: linear-gradient(to right, black, orange 60%, black); } 70% { background: linear-gradient(to right, black, orange 70%, black); } 80% { background: linear-gradient(to right, black, orange 80%, black); } 90% { background: linear-gradient(to right, black, orange 90%, black); } 100% { background: linear-gradient(to right, black, orange 100%, black); } } body.CardProduct .modal.EditorGallery .Gallery.AllLoaded:after { content: ''; background: none !important; padding: 0px; animation: none; -webkit-animation: none; } body.CardProduct .modal.EditorGallery .modal-content { width: 469px; } body.CardProduct .modal.EditorGallery .modal-content .modal-body { width: 398px; } body.CardProduct .modal.EditorGallery .TriggerUpload, body.CardProduct .modal.EditorGallery .ShowCliparts { width: 49%; margin-bottom: 10px !important; height: auto !important; background: transparent !important; float: left; } body.CardProduct .modal.EditorGallery .ShowCliparts { border-left: solid 2px #fff !important; } body.CardProduct .modal.EditorGallery .TriggerUpload span.icon, body.CardProduct .modal.EditorGallery .ShowCliparts span.icon { display: block; width: 100%; height: 80px; margin: 0px; } body.CardProduct .modal.EditorGallery .TriggerUpload span.icon { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/UploadTHumb.svg'); } body.CardProduct .modal.EditorGallery .ShowCliparts span.icon { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/ic_face_24px.svg'); } body.CardProduct .modal.EditorGallery button span.icon { background-size: contain; background-repeat: no-repeat; background-position: center; height: 60px !important; margin-bottom: 20px !important; } body.CardProduct .modal.EditorGallery div.Gallery { position: relative; float: left; width: 100%; margin-top: 10px; border-top: solid 2px #fff; padding-top: 10px; } body.CardProduct .modal.EditorGallery .ImageButton { position: relative; float: left; width: 32.3%; height: 98px; margin: 0.5% !important; background: transparent !important; } body.CardProduct .modal.EditorGallery .ImageButton span { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } body.CardProduct .modal.EditorGallery .ImageButton:hover span { background-size: contain; } body.CardProduct button.missingFieldButton { width: 100%; float: none; margin: 0px !important; background: transparent !important; border: solid 2px #fff !important; margin-bottom: 10px !important; } body.CardProduct .modal.AddToBasketDialog {} body.CardProduct .modal .modal-content h2 { margin-top: 0px; } body.CardProduct .modal.AddToBasketDialog .modal-content { width: 400px; } body.CardProduct .modal.AddToBasketDialog .modal-content .showMissedFields { display: inline-block; float: none; margin-bottom: 30px !important; background: #cb571d !important; } body.CardProduct .ClipartCategorySelect { width: 100%; margin: 0px; } /*Paging*/ body.CardProduct.megaEditMobileMode .ui-dialog { height: 99vh !important; width: 99vw !important; background: transparent !important; max-width: none; max-height: none; box-shadow: none; z-index: 1070; } body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-titlebar { position: absolute; top: 15px; left: 20px; right: 20px; height: 50px; width: auto; overflow: hidden; } body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-titlebar .ui-dialog-title { font-weight: 800; font-size: 36px; font-family: 'Kanit', sans-serif; letter-spacing: 1.5px; color: #fff; text-align: center; text-transform: uppercase; line-height: 40px; } body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-buttonpane { position: absolute; top: auto; bottom: 45px; left: 20px; right: 20px; height: 50px; width: auto; overflow: hidden; background: transparent; } body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-content { position: absolute; top: 50%; left: 50%; bottom: initial; max-width: calc(100% - 0px) !important; max-height: calc(100% - 240px) !important; height: auto !important; min-height: 0px !important; width: 100% !important; overflow: hidden; background: transparent; text-align: center; color: #fff; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-content.pageListContainer { height: 100% !important; } body.CardProduct .pageSelectorItem .pageLabel { position: absolute; width: 100%; bottom: -20px; text-align: center; font-size: 12px; color: #fff; } body.CardProduct.megaEditMobileMode .ui-dialog .pageSelectorContainerScroller { height: 94%; position: absolute; top: 3%; left: 0px; width: 100%; padding: 0px; background: transparent; border-top: solid 2px #fff; border-bottom: solid 2px #fff; } body.CardProduct.megaEditMobileMode .ui-dialog .pageSelectorContainerScroller .mCustomScrollBox { overflow-y: auto; } body.CardProduct.megaEditMobileMode .pageListContainer .addPageButton, body.CardProduct.megaEditMobileMode .pagelist_title { display: none; } body.CardProduct.megaEditMobileMode .ui-dialog .pageSelectorContainerScroller .mCSB_inside>.mCSB_container { padding-right: 0px; } body.CardProduct .ui-draggable .ui-dialog-titlebar { background-color: transparent !important; } body.CardProduct .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: left; width: 100%; text-align: center; } body.CardProduct.megaEditMobileMode .ui-dialog .pageSelectorItem img { max-width: 100%; max-height: 240px; } body.CardProduct.megaEditMobileMode .pageSelectorItem { display: inline-block; position: relative; margin: 2%; } body.CardProduct.megaEditMobileMode .ui-dialog { height: 100% !important; width: 100vw !important; } body.CardProduct.megaEditMobileMode .freeTargetContainer .customScriptUi-freeTarget { position: absolute; height: 88%; left: 53%; top: 6%; width: 43%; } body.CardProduct.megaEditMobileMode .freeTargetContainer .customScriptUi-freeTarget .FirstPageIntro { color: #fff; position: relative; float: left; width: 100%; padding-left: 10px; padding-right: 10px; text-align: center; } body.CardProduct.megaEditMobileMode .freeTargetContainer:before { content: '' !important; width: 100% !important; height: 0px !important; padding-bottom: 60% !important; padding-left: 51% !important; position: relative !important; float: left !important; display: block !important; } body.CardProduct.megaEditMobileMode .megaEditMainContainer:not(.Loaded) .freeTargetContainer:before { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/loader.gif'); background-size: 80px; background-repeat: no-repeat; background-position: center; } body.CardProduct.megaEditMobileMode .megaEditMainContainer:not(.Loaded) .PageHandlingUIContainer .AddNewPageButton { display: none!important; } @media only screen and (min-width: 600px) and (min-height: 500px) { /*body.CardProduct.megaEditMobileMode .editorMain { width: 236px !important; border-radius: 20px; }*/ } @media only screen and (min-width: 700px) and (min-height: 600px) { /*body.CardProduct.megaEditMobileMode .editorMain { width: 298px !important; border-radius: 23px; }*/ body.CardProduct.megaEditMobileMode .freeTargetContainer { width: 690px !important; } body.CardProduct .memobilePageClass button { width: calc(100% - 50% - 345px); } body.CardProduct .memobilePageClass button:first-child { margin-right: 345px !important; } body.CardProduct .memobilePageClass button:last-child { margin-left: 345px !important; } } @media only screen and (min-width: 800px) and (min-height: 700px) { /* body.CardProduct.megaEditMobileMode .editorMain { width: 347px !important; border-radius: 28px; }*/ body.CardProduct.megaEditMobileMode .freeTargetContainer { width: 780px !important; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget>div { -webkit-transform: translate(-50%, -50%) scale(0.7); -moz-transform: translate(-50%, -50%) scale(0.7); -o-transform: translate(-50%, -50%) scale(0.7); transform: translate(-50%, -50%) scale(0.7); width: 100%; } body.CardProduct .memobilePageClass button { width: calc(100% - 50% - 390px); } body.CardProduct .memobilePageClass button:first-child { margin-right: 390px !important; } body.CardProduct .memobilePageClass button:last-child { margin-left: 390px !important; } } @media only screen and (min-width: 900px) and (min-height: 800px) { /*body.CardProduct.megaEditMobileMode .editorMain { width: 409px !important; border-radius: 34px; }*/ body.CardProduct.megaEditMobileMode .freeTargetContainer { width: 960px !important; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget>div { -webkit-transform: translate(-50%, -50%) scale(0.8); -moz-transform: translate(-50%, -50%) scale(0.8); -o-transform: translate(-50%, -50%) scale(0.8); transform: translate(-50%, -50%) scale(0.8); width: 100%; } body.CardProduct .memobilePageClass button { width: calc(100% - 50% - 480px); } body.CardProduct .memobilePageClass button:first-child { margin-right: 480px !important; } body.CardProduct .memobilePageClass button:last-child { margin-left: 480px !important; } } @media only screen and (min-width: 1230px) and (min-height: 1000px) { /*body.CardProduct.megaEditMobileMode .editorMain { width: 507px !important; border-radius: 40px; }*/ body.CardProduct.megaEditMobileMode .freeTargetContainer { width: 1050px !important; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget>div { -webkit-transform: translate(-50%, -50%) scale(0.85); -moz-transform: translate(-50%, -50%) scale(0.85); -o-transform: translate(-50%, -50%) scale(0.85); transform: translate(-50%, -50%) scale(0.85); width: 100%; } body.CardProduct .memobilePageClass button { width: calc(100% - 50% - 525px); } body.CardProduct .memobilePageClass button:first-child { margin-right: 525px !important; } body.CardProduct .memobilePageClass button:last-child { margin-left: 525px !important; } } @media only screen and (min-width: 1400px) and (min-height: 1200px) { /*body.CardProduct.megaEditMobileMode .editorMain { width: 600px !important; border-radius: 45px; }*/ body.CardProduct.megaEditMobileMode .freeTargetContainer:before { padding-bottom: 62% !important; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget>div { -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); width: 100%; } body.CardProduct.megaEditMobileMode .freeTargetContainer { width: 1240px !important; } body.CardProduct .memobilePageClass button { width: calc(100% - 50% - 620px); } body.CardProduct .memobilePageClass button:first-child { margin-right: 620px !important; } body.CardProduct .memobilePageClass button:last-child { margin-left: 620px !important; } } @media only screen and (min-width: 1720px) and (min-height: 1200px) { /*body.CardProduct .memobilePageClass button { width: calc(100% - 50% - 650px); }*/ body.CardProduct .memobilePageClass button:first-child { margin-right: 650px !important; } body.CardProduct .memobilePageClass button:last-child { margin-left: 650px !important; } body.CardProduct.megaEditMobileMode .freeTargetContainer { width: 1300px !important; } } @media only screen and (max-width: 480px) { body.CardProduct.megaEditMobileMode .editorMain, body.CardProduct .TouchActionCanvasOverlay { position: fixed !important; width: calc(100% - 120px) !important; height: auto !important; left: 50% !important; bottom: auto !important; right: auto !important; top: 50% !important; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2 !important; border-radius: 20px; margin-top: -30px; } body.CardProduct .TouchActionCanvasOverlay { display: block !important; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/loader.gif'); background-size: 50px; background-position: center; background-repeat: no-repeat; } body.CardProduct .Loaded .TouchActionCanvasOverlay { background-image: none; } body.CardProduct.megaEditMobileMode .freeTargetContainer { width: 80% !important; left: 10% !important; top: 60px !important; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; border: none; bottom: auto; background: rgba(0, 0, 0, .3); z-index: 1 !important; box-sizing: border-box; opacity: 0; -webkit-transition: ease-in opacity 0.2s; -moz-transition: ease-in opacity 0.2s; -o-transition: ease-in opacity 0.2s; transition: ease-in opacity 0.2s; background: rgba(0, 0, 0, .8); max-height: calc(100% - 130px); overflow-y: auto; height: auto !important; } body.CardProduct.megaEditMobileMode.MeMobileRightPanel_scripting .freeTargetContainer { z-index: 3 !important; opacity: 1; max-height: calc(100% - 130px); overflow-y: auto; height: auto !important; } body.CardProduct.megaEditMobileMode.MeMobileRightPanel_scripting .megaEditMainContainer .TouchActionCanvasOverlay { width: 100% !important; height: calc(100% - 50px) !important; margin-top: 25px !important; } body.CardProduct.megaEditMobileMode .freeTargetContainer .customScriptUi-freeTarget { position: relative; height: auto; left: 0px; top: 0px; width: 100%; padding: 10px; float: left; } body.CardProduct.megaEditMobileMode.imageTweaks .freeTargetContainer { width: 100% !important; left: 0% !important; top: auto !important; bottom: 0px !important; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .BackButton { height: 40px; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.ResetButton, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveLeftButton, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveRightButton { height: 50px; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveUpButton .fa, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveDownButton .fa, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveLeftButton .fa, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveRightButton .fa, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.ResetButton .fa { font-size: 30px; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton .fa { font-size: 20px; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .imagePositionOptions { margin-bottom: 10px; } body.CardProduct.megaEditMobileMode .freeTargetContainer:before { display: none !important; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget>div { display: block; width: 100%; max-width: 480px; position: relative; float: left; top: 0px; left: 0px; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } body.CardProduct .memobilePageClass span { bottom: 70px; } body.CardProduct .viewControlButton.previewButton, body.CardProduct.megaEditMobileMode .SelectDesignButton, body.CardProduct.megaEditMobileMode .saveProjectButton { position: fixed; bottom: 10px; right: 34.3%; width: 31.3% !important; } body.CardProduct .megaEditMobileMode .editorBottom { height: 0px; } body.CardProduct.megaEditMobileMode .SelectDesignButton {} body.CardProduct.megaEditMobileMode .CategoryConfigureButton {} body.CardProduct .memobilePageClass button:last-child { left: auto; margin-left: 0px !important; right: 0px; width: 70px; } body.CardProduct .memobilePageClass button:first-child { right: auto; margin-right: 0px !important; left: 0px; width: 70px; } body.CardProduct .memobilePageClass button:before { width: 40px; height: 40px; border-top: solid 5px #fff; border-left: solid 5px #fff; top: 50%; left: 50%; } /*Menu Buttons */ body.CardProduct.megaEditMobileMode .btn.backButton, body.CardProduct.megaEditMobileMode .buttonContainer.rightSide .buttonsContainer .saveProjectButton, body.CardProduct.megaEditMobileMode .TutorialButton, body.CardProduct.megaEditMobileMode .MegaEditHomeButton, body.CardProduct.megaEditMobileMode .clearPagesButton.resetPagesbtn { display: none !important; } /*Page select*/ body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-buttonpane { bottom: 10px; height: 40px; left: 10px; right: 10px; } body.CardProduct.megaEditMobileMode .ui-dialog .pageSelectorContainerScroller { height: 100%; top: 0px; } body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-titlebar { position: absolute; top: 0px; left: 60px; right: 3px; height: 50px; } body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close { width: 27px; height: 27px; } body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-content { position: absolute; top: 50px; left: 0px; bottom: initial; max-height: calc(100% - 110px) !important; min-height: 0px !important; width: 100% !important; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } body.CardProduct.megaEditMobileMode .pageSelectorItem { margin-bottom: 4%; } } @media only screen and (max-width: 415px) and (max-height: 600px) { body.CardProduct.megaEditMobileMode .editorMain, .TouchActionCanvasOverlay { position: fixed !important; width: calc(100% - 140px) !important; } } .meuiStackLayout div.progress-circle, .meuiStackLayout div.progress-circle * { margin: 0px; } /* Progress Circle */ .fullyCompletedlabel .progress-circle { font-size: 30px; margin: 0 auto !important; margin-bottom: 20px !important; background: #fff; } .progress-circle { font-size: 20px; margin: 20px; position: relative; padding: 0; width: 5em; height: 5em; background-color: #F2E9E1; border-radius: 50%; line-height: 5em; } .progress-circle:after { border: none; position: absolute; top: 0.35em; left: 0.35em; text-align: center; display: block; border-radius: 50%; width: 4.3em; height: 4.3em; background-color: #000; content: " "; } .progress-circle span { position: absolute; line-height: 5em; width: 5em; text-align: center; display: block; color: #fff; z-index: 2; font-size: 30px; font-weight: bold; } .left-half-clipper { border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0, 5em, 5em, 2.5em); } .progress-circle.over50 .left-half-clipper { clip: rect(auto, auto, auto, auto); } .value-bar { position: absolute; clip: rect(0, 2.5em, 5em, 0); width: 5em; height: 5em; border-radius: 50%; border: 0.45em solid #cb571d; box-sizing: border-box; } .progress-circle.over50 .first50-bar { position: absolute; clip: rect(0, 5em, 5em, 2.5em); background-color: #cb571d; border-radius: 50%; width: 5em; height: 5em; } .progress-circle:not(.over50) .first50-bar { display: none; } .progress-circle.p0 .value-bar { display: none; } .progress-circle.p1 .value-bar { -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); transform: rotate(4deg); } .progress-circle.p2 .value-bar { -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); transform: rotate(7deg); } .progress-circle.p3 .value-bar { -webkit-transform: rotate(11deg); -moz-transform: rotate(11deg); -o-transform: rotate(11deg); transform: rotate(11deg); } .progress-circle.p4 .value-bar { -webkit-transform: rotate(14deg); -moz-transform: rotate(14deg); -o-transform: rotate(14deg); transform: rotate(14deg); } .progress-circle.p5 .value-bar { -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); -o-transform: rotate(18deg); transform: rotate(18deg); } .progress-circle.p6 .value-bar { -webkit-transform: rotate(22deg); -moz-transform: rotate(22deg); -o-transform: rotate(22deg); transform: rotate(22deg); } .progress-circle.p7 .value-bar { -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -o-transform: rotate(25deg); transform: rotate(25deg); } .progress-circle.p8 .value-bar { -webkit-transform: rotate(29deg); -moz-transform: rotate(29deg); -o-transform: rotate(29deg); transform: rotate(29deg); } .progress-circle.p9 .value-bar { -webkit-transform: rotate(32deg); -moz-transform: rotate(32deg); -o-transform: rotate(32deg); transform: rotate(32deg); } .progress-circle.p10 .value-bar { -webkit-transform: rotate(36deg); -moz-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg); } .progress-circle.p11 .value-bar { -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg); } .progress-circle.p12 .value-bar { -webkit-transform: rotate(43deg); -moz-transform: rotate(43deg); -o-transform: rotate(43deg); transform: rotate(43deg); } .progress-circle.p13 .value-bar { -webkit-transform: rotate(47deg); -moz-transform: rotate(47deg); -o-transform: rotate(47deg); transform: rotate(47deg); } .progress-circle.p14 .value-bar { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } .progress-circle.p15 .value-bar { -webkit-transform: rotate(54deg); -moz-transform: rotate(54deg); -o-transform: rotate(54deg); transform: rotate(54deg); } .progress-circle.p16 .value-bar { -webkit-transform: rotate(58deg); -moz-transform: rotate(58deg); -o-transform: rotate(58deg); transform: rotate(58deg); } .progress-circle.p17 .value-bar { -webkit-transform: rotate(61deg); -moz-transform: rotate(61deg); -o-transform: rotate(61deg); transform: rotate(61deg); } .progress-circle.p18 .value-bar { -webkit-transform: rotate(65deg); -moz-transform: rotate(65deg); -o-transform: rotate(65deg); transform: rotate(65deg); } .progress-circle.p19 .value-bar { -webkit-transform: rotate(68deg); -moz-transform: rotate(68deg); -o-transform: rotate(68deg); transform: rotate(68deg); } .progress-circle.p20 .value-bar { -webkit-transform: rotate(72deg); -moz-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); } .progress-circle.p21 .value-bar { -webkit-transform: rotate(76deg); -moz-transform: rotate(76deg); -o-transform: rotate(76deg); transform: rotate(76deg); } .progress-circle.p22 .value-bar { -webkit-transform: rotate(79deg); -moz-transform: rotate(79deg); -o-transform: rotate(79deg); transform: rotate(79deg); } .progress-circle.p23 .value-bar { -webkit-transform: rotate(83deg); -moz-transform: rotate(83deg); -o-transform: rotate(83deg); transform: rotate(83deg); } .progress-circle.p24 .value-bar { -webkit-transform: rotate(86deg); -moz-transform: rotate(86deg); -o-transform: rotate(86deg); transform: rotate(86deg); } .progress-circle.p25 .value-bar { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .progress-circle.p26 .value-bar { -webkit-transform: rotate(94deg); -moz-transform: rotate(94deg); -o-transform: rotate(94deg); transform: rotate(94deg); } .progress-circle.p27 .value-bar { -webkit-transform: rotate(97deg); -moz-transform: rotate(97deg); -o-transform: rotate(97deg); transform: rotate(97deg); } .progress-circle.p28 .value-bar { -webkit-transform: rotate(101deg); -moz-transform: rotate(101deg); -o-transform: rotate(101deg); transform: rotate(101deg); } .progress-circle.p29 .value-bar { -webkit-transform: rotate(104deg); -moz-transform: rotate(104deg); -o-transform: rotate(104deg); transform: rotate(104deg); } .progress-circle.p30 .value-bar { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg); } .progress-circle.p31 .value-bar { -webkit-transform: rotate(112deg); -moz-transform: rotate(112deg); -o-transform: rotate(112deg); transform: rotate(112deg); } .progress-circle.p32 .value-bar { -webkit-transform: rotate(115deg); -moz-transform: rotate(115deg); -o-transform: rotate(115deg); transform: rotate(115deg); } .progress-circle.p33 .value-bar { -webkit-transform: rotate(119deg); -moz-transform: rotate(119deg); -o-transform: rotate(119deg); transform: rotate(119deg); } .progress-circle.p34 .value-bar { -webkit-transform: rotate(122deg); -moz-transform: rotate(122deg); -o-transform: rotate(122deg); transform: rotate(122deg); } .progress-circle.p35 .value-bar { -webkit-transform: rotate(126deg); -moz-transform: rotate(126deg); -o-transform: rotate(126deg); transform: rotate(126deg); } .progress-circle.p36 .value-bar { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } .progress-circle.p37 .value-bar { -webkit-transform: rotate(133deg); -moz-transform: rotate(133deg); -o-transform: rotate(133deg); transform: rotate(133deg); } .progress-circle.p38 .value-bar { -webkit-transform: rotate(137deg); -moz-transform: rotate(137deg); -o-transform: rotate(137deg); transform: rotate(137deg); } .progress-circle.p39 .value-bar { -webkit-transform: rotate(140deg); -moz-transform: rotate(140deg); -o-transform: rotate(140deg); transform: rotate(140deg); } .progress-circle.p40 .value-bar { -webkit-transform: rotate(144deg); -moz-transform: rotate(144deg); -o-transform: rotate(144deg); transform: rotate(144deg); } .progress-circle.p41 .value-bar { -webkit-transform: rotate(148deg); -moz-transform: rotate(148deg); -o-transform: rotate(148deg); transform: rotate(148deg); } .progress-circle.p42 .value-bar { -webkit-transform: rotate(151deg); -moz-transform: rotate(151deg); -o-transform: rotate(151deg); transform: rotate(151deg); } .progress-circle.p43 .value-bar { -webkit-transform: rotate(155deg); -moz-transform: rotate(155deg); -o-transform: rotate(155deg); transform: rotate(155deg); } .progress-circle.p44 .value-bar { -webkit-transform: rotate(158deg); -moz-transform: rotate(158deg); -o-transform: rotate(158deg); transform: rotate(158deg); } .progress-circle.p45 .value-bar { -webkit-transform: rotate(162deg); -moz-transform: rotate(162deg); -o-transform: rotate(162deg); transform: rotate(162deg); } .progress-circle.p46 .value-bar { -webkit-transform: rotate(166deg); -moz-transform: rotate(166deg); -o-transform: rotate(166deg); transform: rotate(166deg); } .progress-circle.p47 .value-bar { -webkit-transform: rotate(169deg); -moz-transform: rotate(169deg); -o-transform: rotate(169deg); transform: rotate(169deg); } .progress-circle.p48 .value-bar { -webkit-transform: rotate(173deg); -moz-transform: rotate(173deg); -o-transform: rotate(173deg); transform: rotate(173deg); } .progress-circle.p49 .value-bar { -webkit-transform: rotate(176deg); -moz-transform: rotate(176deg); -o-transform: rotate(176deg); transform: rotate(176deg); } .progress-circle.p50 .value-bar { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .progress-circle.p51 .value-bar { -webkit-transform: rotate(184deg); -moz-transform: rotate(184deg); -o-transform: rotate(184deg); transform: rotate(184deg); } .progress-circle.p52 .value-bar { -webkit-transform: rotate(187deg); -moz-transform: rotate(187deg); -o-transform: rotate(187deg); transform: rotate(187deg); } .progress-circle.p53 .value-bar { -webkit-transform: rotate(191deg); -moz-transform: rotate(191deg); -o-transform: rotate(191deg); transform: rotate(191deg); } .progress-circle.p54 .value-bar { -webkit-transform: rotate(194deg); -moz-transform: rotate(194deg); -o-transform: rotate(194deg); transform: rotate(194deg); } .progress-circle.p55 .value-bar { -webkit-transform: rotate(198deg); -moz-transform: rotate(198deg); -o-transform: rotate(198deg); transform: rotate(198deg); } .progress-circle.p56 .value-bar { -webkit-transform: rotate(202deg); -moz-transform: rotate(202deg); -o-transform: rotate(202deg); transform: rotate(202deg); } .progress-circle.p57 .value-bar { -webkit-transform: rotate(205deg); -moz-transform: rotate(205deg); -o-transform: rotate(205deg); transform: rotate(205deg); } .progress-circle.p58 .value-bar { -webkit-transform: rotate(209deg); -moz-transform: rotate(209deg); -o-transform: rotate(209deg); transform: rotate(209deg); } .progress-circle.p59 .value-bar { -webkit-transform: rotate(212deg); -moz-transform: rotate(212deg); -o-transform: rotate(212deg); transform: rotate(212deg); } .progress-circle.p60 .value-bar { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } .progress-circle.p61 .value-bar { -webkit-transform: rotate(220deg); -moz-transform: rotate(220deg); -o-transform: rotate(220deg); transform: rotate(220deg); } .progress-circle.p62 .value-bar { -webkit-transform: rotate(223deg); -moz-transform: rotate(223deg); -o-transform: rotate(223deg); transform: rotate(223deg); } .progress-circle.p63 .value-bar { -webkit-transform: rotate(227deg); -moz-transform: rotate(227deg); -o-transform: rotate(227deg); transform: rotate(227deg); } .progress-circle.p64 .value-bar { -webkit-transform: rotate(230deg); -moz-transform: rotate(230deg); -o-transform: rotate(230deg); transform: rotate(230deg); } .progress-circle.p65 .value-bar { -webkit-transform: rotate(234deg); -moz-transform: rotate(234deg); -o-transform: rotate(234deg); transform: rotate(234deg); } .progress-circle.p66 .value-bar { -webkit-transform: rotate(238deg); -moz-transform: rotate(238deg); -o-transform: rotate(238deg); transform: rotate(238deg); } .progress-circle.p67 .value-bar { -webkit-transform: rotate(241deg); -moz-transform: rotate(241deg); -o-transform: rotate(241deg); transform: rotate(241deg); } .progress-circle.p68 .value-bar { -webkit-transform: rotate(245deg); -moz-transform: rotate(245deg); -o-transform: rotate(245deg); transform: rotate(245deg); } .progress-circle.p69 .value-bar { -webkit-transform: rotate(248deg); -moz-transform: rotate(248deg); transform: rotate(248deg); transform: rotate(248deg); } .progress-circle.p70 .value-bar { -webkit-transform: rotate(252deg); -moz-transform: rotate(252deg); -o-transform: rotate(252deg); transform: rotate(252deg); } .progress-circle.p71 .value-bar { -webkit-transform: rotate(256deg); -moz-transform: rotate(256deg); -o-transform: rotate(256deg); transform: rotate(256deg); } .progress-circle.p72 .value-bar { -webkit-transform: rotate(259deg); -moz-transform: rotate(259deg); -o-transform: rotate(259deg); transform: rotate(259deg); } .progress-circle.p73 .value-bar { -webkit-transform: rotate(263deg); -moz-transform: rotate(263deg); -o-transform: rotate(263deg); transform: rotate(263deg); } .progress-circle.p74 .value-bar { -webkit-transform: rotate(266deg); -moz-transform: rotate(266deg); -o-transform: rotate(266deg); transform: rotate(266deg); } .progress-circle.p75 .value-bar { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .progress-circle.p76 .value-bar { -webkit-transform: rotate(274deg); -moz-transform: rotate(274deg); -o-transform: rotate(274deg); transform: rotate(274deg); } .progress-circle.p77 .value-bar { -webkit-transform: rotate(277deg); -moz-transform: rotate(277deg); -o-transform: rotate(277deg); transform: rotate(277deg); } .progress-circle.p78 .value-bar { -webkit-transform: rotate(281deg); -moz-transform: rotate(281deg); -o-transform: rotate(281deg); transform: rotate(281deg); } .progress-circle.p79 .value-bar { -webkit-transform: rotate(284deg); -moz-transform: rotate(284deg); -o-transform: rotate(284deg); transform: rotate(284deg); } .progress-circle.p80 .value-bar { -webkit-transform: rotate(288deg); -moz-transform: rotate(288deg); -o-transform: rotate(288deg); transform: rotate(288deg); } .progress-circle.p81 .value-bar { -webkit-transform: rotate(292deg); -moz-transform: rotate(292deg); -o-transform: rotate(292deg); transform: rotate(292deg); } .progress-circle.p82 .value-bar { -webkit-transform: rotate(295deg); -moz-transform: rotate(295deg); -o-transform: rotate(295deg); transform: rotate(295deg); } .progress-circle.p83 .value-bar { -webkit-transform: rotate(299deg); -moz-transform: rotate(299deg); -o-transform: rotate(299deg); transform: rotate(299deg); } .progress-circle.p84 .value-bar { -webkit-transform: rotate(302deg); -moz-transform: rotate(302deg); -o-transform: rotate(302deg); transform: rotate(302deg); } .progress-circle.p85 .value-bar { -webkit-transform: rotate(306deg); -moz-transform: rotate(306deg); transform: rotate(306deg); transform: rotate(306deg); } .progress-circle.p86 .value-bar { -webkit-transform: rotate(310deg); -moz-transform: rotate(310deg); -o-transform: rotate(310deg); transform: rotate(310deg); } .progress-circle.p87 .value-bar { -webkit-transform: rotate(313deg); -moz-transform: rotate(313deg); -o-transform: rotate(313deg); transform: rotate(313deg); } .progress-circle.p88 .value-bar { -webkit-transform: rotate(317deg); -moz-transform: rotate(317deg); -o-transform: rotate(317deg); transform: rotate(317deg); } .progress-circle.p89 .value-bar { -webkit-transform: rotate(320deg); -moz-transform: rotate(320deg); -o-transform: rotate(320deg); transform: rotate(320deg); } .progress-circle.p90 .value-bar { -webkit-transform: rotate(324deg); -moz-transform: rotate(324deg); -o-transform: rotate(324deg); transform: rotate(324deg); } .progress-circle.p91 .value-bar { -webkit-transform: rotate(328deg); -moz-transform: rotate(328deg); -o-transform: rotate(328deg); transform: rotate(328deg); } .progress-circle.p92 .value-bar { -webkit-transform: rotate(331deg); -moz-transform: rotate(331deg); -o-transform: rotate(331deg); transform: rotate(331deg); } .progress-circle.p93 .value-bar { -webkit-transform: rotate(335deg); -moz-transform: rotate(335deg); -o-transform: rotate(335deg); transform: rotate(335deg); } .progress-circle.p94 .value-bar { -webkit-transform: rotate(338deg); -moz-transform: rotate(338deg); -o-transform: rotate(338deg); transform: rotate(338deg); } .progress-circle.p95 .value-bar { -webkit-transform: rotate(342deg); -moz-transform: rotate(342deg); transform: rotate(342deg); transform: rotate(342deg); } .progress-circle.p96 .value-bar { -webkit-transform: rotate(346deg); -moz-transform: rotate(346deg); -o-transform: rotate(346deg); transform: rotate(346deg); } .progress-circle.p97 .value-bar { -webkit-transform: rotate(349deg); -moz-transform: rotate(349deg); -o-transform: rotate(349deg); transform: rotate(349deg); } .progress-circle.p98 .value-bar { -webkit-transform: rotate(353deg); -moz-transform: rotate(353deg); -o-transform: rotate(353deg); transform: rotate(353deg); } .progress-circle.p99 .value-bar { -webkit-transform: rotate(356deg); -moz-transform: rotate(356deg); -o-transform: rotate(356deg); transform: rotate(356deg); } .progress-circle.p100 .value-bar { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } body.CardProduct .meuiTextBox.TextField.SaveData { width: 100%; margin: 0px; } body.CardProduct.megaEditMobileMode .editorMain:before, .TouchActionCanvasOverlay:before { content: '' !important; width: 100% !important; height: 0px !important; padding-bottom: 161.2% !important; position: relative !important; float: left !important; display: block !important; } body.CardProduct.megaEditMobileMode .editorMain .canvas-container { position: absolute !important; top: 0px; left: 0px; } body.CardProduct.megaEditMobileMode .editorMain .zoom_options, body.CardProduct.megaEditMobileMode .editorMain .toggleCollapseTab { display: none !important; } body.CardProduct.megaEditMobileMode .megaEditMainContainer { background-color: transparent; } body.CardProduct .btn.backButton .fa { display: none; } .ValidateBeforeAddingToBasket { opacity: 0; position: fixed; left: -300px; } .customScriptUi-freeTarget .meuiStackLayout div { margin: 0px; } /* Smooth Load In */ body.CardProduct .modal { opacity: 1 !important; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } body.CardProduct .modal .modal-dialog { -webkit-transition: opacity 0.6s ease !important; -moz-transition: opacity 0.6s ease !important; -o-transition: opacity 0.6s ease !important; transition: opacity 0.6s ease !important; opacity: 0 !important; max-height: 100%; } body.CardProduct .modal *, body.CardProduct .customScriptUi-freeTarget * { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } body.CardProduct.modal-open .modal.fade.in .modal-dialog { opacity: 1 !important; } /* Admin Card Setup Script */ .LockFields { position: fixed; top: 60px; right: 50px; width: 250px; } .setBackgroundButton { position: fixed; bottom: 60px; right: 50px; width: 121px; } .setZoomButton { position: fixed; bottom: 60px; right: 179px; width: 121px; } .megaEditMobileMode .customScriptUi-batchArea div.StatusBlock .InfoField { font-size: 14px; line-height: 18px; } .megaEditMobileMode .customScriptUi-batchArea div.StatusBlock .InfoField hr { margin-top: 5px; margin-bottom: 5px; } .MeMobileRightPanel .LockFields { position: fixed; top: 60px; right: 350px; } .megaEditMobileMode .customScriptUi-batchArea div.StatusBlock { position: fixed; top: 110px !important; right: 50px; width: 250px; height: auto; display: block; bottom: 50%; background: #fff; padding: 10px; overflow-x: hidden; overflow-y: auto; border: solid 1px #ccc; } .megaEditMobileMode .customScriptUi-batchArea div.FieldsBlock { position: fixed; top: 51% !important; right: 50px; width: 250px; height: auto; display: block; bottom: 110px; background: #fff; padding: 10px; overflow-x: hidden; overflow-y: auto; border: solid 1px #ccc; } .megaEditMobileMode .customScriptUi-batchArea div.StatusBlock div, .megaEditMobileMode .customScriptUi-batchArea div.FieldsBlock div { display: block; height: auto; margin: 0px; width: 100%; } .megaEditMobileMode .customScriptUi-batchArea div.StatusBlock .tagRow, .megaEditMobileMode .customScriptUi-batchArea div.FieldsBlock .fieldRow { position: relative; float: left; width: 100%; margin: 0px !important; padding: 2px !important; border-bottom: solid 1px #ccc; } .megaEditMobileMode .customScriptUi-batchArea div.FieldsBlock .fieldRow .showButton { width: 100%; height: auto; line-height: 20px; text-align: left; padding: 5px; padding-left: 10px; background: #eee !important; color: #000 !important; } .megaEditMobileMode .customScriptUi-batchArea div.FieldsBlock .fieldRow .showButton.locked { border-left: solid 4px #000 !important; } .megaEditMobileMode .customScriptUi-batchArea div.FieldsBlock .fieldRow .showButton span { display: block; font-size: 12px; text-transform: none; font-family: arial; width: 80%; } .megaEditMobileMode .customScriptUi-batchArea div.FieldsBlock .fieldRow .showButton2 { position: absolute; top: -45px; right: 0px; } .megaEditMobileMode .customScriptUi-batchArea div.FieldsBlock .fieldRow.selected { background: #ccc; } .megaEditMobileMode .customScriptUi-batchArea div.StatusBlock .tagRow .tagLabel { position: relative; float: left; width: 80%; line-height: 40px; } .megaEditMobileMode .customScriptUi-batchArea div.StatusBlock .tagRow .tagLabel span { position: absolute; top: 0px; right: 0px; width: 40px; text-align: center; background: #ccc; font-size: 12px; font-weight: bold; } .megaEditMobileMode .customScriptUi-batchArea div.StatusBlock .tagRow .tagLabel span.not-used { background: #0098e7; color: #fff; } .megaEditMobileMode .customScriptUi-batchArea div.StatusBlock .tagRow .tagLabel span.used { background: #09bc4c; color: #fff; } .megaEditMobileMode .customScriptUi-batchArea div.StatusBlock .tagRow .tagLabel span.invalid { background: #bc0909; color: #fff; } .megaEditMobileMode .customScriptUi-batchArea div.StatusBlock .tagRow .statusAddButton { right: 0px; position: absolute; top: -40px; } .MeMobileRightPanel.megaEditMobileMode .customScriptUi-batchArea div.StatusBlock { position: fixed; top: 110px; right: 350px; } .MeMobileRightPanel.megaEditMobileMode .customScriptUi-batchArea div.FieldsBlock { position: fixed; top: 50%; right: 350px; } .megaEditMobileMode .editorFieldOption .FieldOptionRight { width: 300px; } .megaEditMobileMode.MeMobileLandscape.MeMobileRightPanel .editorTop, .megaEditMobileMode.MeMobileLandscape.MeMobileRightPanel .editorBottom, .megaEditMobileMode.MeMobileLandscape.MeMobileRightPanel .FieldOptionTop, .megaEditMobileMode.MeMobileLandscape.MeMobileRightPanel .FieldOptionBottom, .megaEditMobileMode.MeMobileLandscape.MeMobileRightPanel .editorMain { right: 300px !important; width: auto !important; } .CardProduct .megaEditMainContainer .editorMain, .CardProduct .megaEditMainContainer .customScriptUi-freeTarget { opacity: 0; } .CardProduct .megaEditMainContainer.Loaded .editorMain, .CardProduct .megaEditMainContainer.Loaded .customScriptUi-freeTarget { opacity: 1; -webkit-transition: ease-in opacity 0.2s; -moz-transition: ease-in opacity 0.2s; -o-transition: ease-in opacity 0.2s; transition: ease-in opacity 0.2s; } .CardProduct .megaEditMainContainer .memobilePageClass button { pointer-events: none; } .CardProduct .megaEditMainContainer.Loaded .memobilePageClass button { pointer-events: all; } .megaEditMobileMode.MeMobileLandscape.MeMobileRightPanel .editorTop .megaEditMobileMode.MeMobileLandscape.MeMobileRightPanel .editorBottom { overflow: visible; } body.CardProduct button, body.CardProduct button.btn { -webkit-transition: opacity .15s linear; -moz-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; } body.CardProduct.megaEditMobileMode .memobilePageClass span, body.CardProduct.megaEditMobileMode .buttonContainer.rightSide .buttonsContainer .saveProjectButton { border: none; } body.CardProduct.megaEditMobileMode .editorLeft { overflow: visible !important; display: block !important; width: 0px !important; left: -100% !important; } body { overflow: hidden !important; } @media only screen and (max-width: 1500px) { body.CardProduct .modal-body { max-height: calc(80vh - 100px); } body.CardProduct:before, body.CardProduct.megaEditMobileMode .MegaEditHomeOverlay { width: 100px; height: 85px; } body.CardProduct .modal-dialog { max-width: 100%; max-height: 100%; } body.CardProduct.megaEditMobileMode .editorBottom { height: 0px !important; } body.CardProduct.megaEditMobileMode .MegaEditHomeButton { display: none !important; } body.CardProduct.megaEditMobileMode .clearPagesButton.resetPagesbtn { margin-left: 130px !important; } body.CardProduct .ProgressBar { left: 350px !important; right: 250px !important; width: calc(100vw - 600px); } body.CardProduct button.ProgressBar, body.CardProduct button.btn.ProgressBar { line-height: 10px; font-size: 15px; height: 40px; } body.CardProduct.megaEditMobileMode .memobilePageClass span, body.CardProduct.megaEditMobileMode .btn.backButton, body.CardProduct.megaEditMobileMode .viewControlButton.previewButton, body.CardProduct.megaEditMobileMode .clearPagesButton.resetPagesbtn, body.CardProduct.megaEditMobileMode .CategoryConfigureButton, body.CardProduct.megaEditMobileMode .SelectDesignButton, body.CardProduct.megaEditMobileMode .TutorialButton, body.CardProduct.megaEditMobileMode .MegaEditHomeButton, body.CardProduct.megaEditMobileMode .saveProjectButton, body.CardProduct .EditorLoadSaved .LoadDataButton, body.CardProduct .EditorLoadSaved .DeleteDataButton, body.CardProduct .SaveDataButton, .preview_close_button, body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close, body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-buttonpane button { height: 40px; line-height: 36px; font-size: 18px; } .extratxt { display: inline-block; } body.CardProduct.megaEditMobileMode .buttonContainer.rightSide .buttonsContainer .saveProjectButton { height: 40px !important; margin-bottom: 50px !important; font-size: 18px; } body.CardProduct .memobilePageClass button:last-child { margin-left: 0px !important; left: auto; right: 5%; } body.CardProduct .memobilePageClass button:first-child { margin-right: 0px !important; right: auto; left: 5%; } body.CardProduct .btn.backButton { margin-bottom: 2px !important; } } @media only screen and (max-width: 1200px) { body.CardProduct.megaEditBodyClass-Admin .modal.EditorIntro .AdminOnly { display: none; } body.CardProduct button, body.CardProduct button.btn { font-size: 14px; } body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-buttonpane button { min-width: 100px; margin-left: 5px; margin-right: 5px; height: 40px; line-height: 30px; font-size: 14px; } body.CardProduct.megaEditMobileMode .memobilePageClass span, body.CardProduct.megaEditMobileMode .btn.backButton, body.CardProduct.megaEditMobileMode .viewControlButton.previewButton, body.CardProduct.megaEditMobileMode .clearPagesButton.resetPagesbtn, body.CardProduct.megaEditMobileMode .CategoryConfigureButton, body.CardProduct.megaEditMobileMode .SelectDesignButton, body.CardProduct.megaEditMobileMode .TutorialButton, body.CardProduct.megaEditMobileMode .MegaEditHomeButton, body.CardProduct.megaEditMobileMode .saveProjectButton, body.CardProduct .EditorLoadSaved .LoadDataButton, body.CardProduct .EditorLoadSaved .DeleteDataButton, body.CardProduct .SaveDataButton, .preview_close_button, body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close, body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-buttonpane button { height: 40px; line-height: 36px; font-size: 14px; } body.CardProduct.megaEditMobileMode .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close { width: 27px; height: 27px; } body.CardProduct.megaEditMobileMode .buttonContainer.rightSide .buttonsContainer .saveProjectButton { font-size: 14px; } body.CardProduct.megaEditMobileMode .viewControlButton.previewButton, body.CardProduct.megaEditMobileMode .saveProjectButton { width: 190px; } body.CardProduct .memobilePageClass span { margin-left: -75px !important; width: 150px !important; } body.CardProduct.megaEditMobileMode .SelectDesignButton { margin-right: 245px !important; } body.CardProduct.megaEditMobileMode .CategoryConfigureButton { margin-left: 210px !important; } body.CardProduct .memobilePageClass button:before { width: 60px; height: 60px; border-top: solid 7px #fff; border-left: solid 7px #fff; } } @media only screen and (max-width: 1200px) and (min-height: 1200px) {} @media only screen and (max-width: 959px) { body.CardProduct .modal.EditorIntro .modal-body div { display: inline-block; } body.CardProduct .modal.EditorIntro .modal-dialog button { font-size: 16px; width: 200px; height: 180px; float: none; padding-top: 132px; } body.CardProduct:before, body.CardProduct.megaEditMobileMode .MegaEditHomeOverlay { width: 70px; height: 60px; } body.CardProduct.megaEditMobileMode .btn.backButton { display: none; } body.CardProduct.megaEditMobileMode .CategoryConfigureButton { margin-left: 0px !important; } body.CardProduct.megaEditMobileMode .SelectDesignButton { margin-right: 0px !important; right: auto; left: 3%; margin-left: 130px !important; } body.CardProduct.megaEditMobileMode .clearPagesButton.resetPagesbtn { margin-left: 99px !important; } body.CardProduct .ProgressBar { left: 240px !important; right: 160px !important; width: calc(100vw - 410px); } body.CardProduct .memobilePageClass button:before { width: 40px; height: 40px; border-top: solid 6px #fff; border-left: solid 6px #fff; } } @media only screen and (max-width: 959px) and (min-height: 959px) {} @media only screen and (max-width: 767px) { body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions h3, body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p { display: none; } body.CardProduct.megaEditMobileMode .modal.EditorDesigns .DesignSelector { width: 43%; padding-bottom: 83% !important; } body.CardProduct.megaEditMobileMode .modal.EditorDesigns .DesignSelector .card_thumb .the_card { border-radius: 10px; } body.CardProduct.megaEditMobileMode .modal.EditorDesigns .DesignSelector .card_details h2 { margin: 0px; font-size: 10px; text-overflow: ellipsis; white-space: normal; color: #fff; width: 100%; position: relative; float: left; line-height: 10px; height: 26px; } body.CardProduct .modal.EditorGalleryDisclaimer p { font-size: 13px; font-weight: 400; line-height: 20px; } body.CardProduct .modal.EditorGalleryDisclaimer .warning-triangle { height: 66px; background-repeat: no-repeat; margin-bottom: 20px; margin-top: 0px; background-size: contain; background-position: center; } } @media only screen and (max-width: 490px) and (max-height: 767px) {} @media only screen and (max-width: 900px) and (max-height: 500px) { .please-rotate-device { display: block !important; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 9999999999999999999999999999999; padding: 10%; background-color: #000; color: transparent; text-align: center; font-size: 18px; font-weight: bold; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/PortraitMode.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; } } .megaEditMobileMode .fileUploadWrapper { left: -100%; } body.CardProduct.megaEditMobileMode .fileupload-buttonbar .uploadProgressWrapper { margin-bottom: 0; position: fixed; top: 50%; left: 50%; width: 300px; height: auto; z-index: 10; margin-left: -150px; margin-top: -50px; padding: 20px; background-color: #000; } body.CardProduct.megaEditMobileMode .fileupload-buttonbar .uploadProgressWrapper:before { content: "Uploading"; display: block; font-weight: bold; font-size: 20px; text-transform: uppercase; color: #fff; position: absolute; width: 100%; text-align: center; top: 24px; left: 0px; } body.CardProduct.megaEditMobileMode .fileupload-buttonbar .uploadProgressWrapper .progress-bar-success { background-color: #cb571d; } body.CardProduct.megaEditMobileMode .editorLeft { z-index: 99 !important; } .alert { margin-top: 10px; position: fixed; top: 0px; left: 5%; width: 90%; box-sizing: border-box; } body.CardProduct .LoginButton { float: none; width: 200px; background: #cb571d !important; margin-top: 30px !important; } @media only screen and (max-width: 490px) { body.CardProduct.megaEditMobileMode .ui-front { z-index: 99998; } body.CardProduct.megaEditMobileMode .ui-dialog { z-index: 99999; } #cc_controls { display: none; } .megaEditMobileMode #previewView { z-index: 9999999; } .add_to_basket_from_preview { height: 40px !important; line-height: 40px !important; font-size: 14px !important; right: 1% !important; bottom: 1% !important; padding-left: 0px !important; padding-right: 0px !important; width: 60% !important; } .preview_close_button { position: absolute !important; bottom: 1% !important; left: 1% !important; height: 40px !important; line-height: 40px !important; width: 37% !important; } body.CardProduct.megaEditMobileMode .fileupload-buttonbar .uploadProgressWrapper:before { top: 4px; } .please-rotate-device { display: none !important; } body.CardProduct .modal, body.CardProduct .modal-backdrop { top: 50px !important; } body.CardProduct .modal .modal-dialog, body.CardProduct .modal .modal-dialog .modal-content { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; margin: 0px; padding: 0px; min-width: 320px; } body.CardProduct .modal .modal-dialog .modal-content .modal-body { position: absolute; top: 60px; left: 0px; height: calc(100% - 120px); width: 100%; max-height: none; padding: 10px !important; } body.CardProduct .modal .modal-dialog .modal-content .modal-header { position: absolute; top: 0px; left: 0px; height: 60px; width: 100%; padding: 10px !important; padding-top: 20px !important; } body.CardProduct .modal .modal-dialog .modal-content .modal-footer { position: absolute; top: calc(100% - 60px); left: 0px; height: 60px; width: 100%; padding: 10px !important; margin: 0px !important; } body.CardProduct:before, body.CardProduct.megaEditMobileMode .MegaEditHomeOverlay { display: none !important; } body.CardProduct .modal-body>div.mCustomScrollBox { padding-left: 15px; padding-top: 15px; } body.CardProduct .modal.EditorIntro { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/MECardBACKGROUND.jpg') !important; background-size: cover !important; background-position: center !important; } body.CardProduct .modal-dialog .modal-content { background: rgba(0, 0, 0, .5); } .megaEditMobileMode .mobile-menu-button { display: block !important; position: absolute; top: 0px; left: 0px; width: 50px; height: 50px; z-index: 9999; background: transparent; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/mobile_menu_button.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 1 !important; } body.CardProduct.megaEditMobileMode .mobile-menu-button:hover { opacity: 1 !important; } body.CardProduct .ProgressBar { position: fixed !important; top: 0px !important; left: 60px !important; right: 0px !important; height: 50px !important; width: calc(100% - 60px); max-width: unset; min-width: unset; display: block; background: transparent !important; outline: none !important; z-index: 9999; padding-bottom: 5px !important; } body.CardProduct .ProgressBar .pb-top { text-align: left; margin-bottom: 5px !important; } body.CardProduct .ProgressBar .pb-bar { height: 5px; } body.CardProduct.megaEditMobileMode .editorTop { background: rgba(0, 0, 0, 0.8); height: 50px; } .loadingArea, .loadingScreen, .addtoBasketScreen { z-index: 99999; } /*Intro*/ body.CardProduct .modal.EditorIntro .modal-dialog .modal-content .modal-body { top: 0px; height: calc(100% - 60px); } body.CardProduct .modal.EditorIntro .modal-dialog button { position: absolute; width: 100%; height: 33.3%; left: 0px; padding: 0px; } body.CardProduct .modal.EditorIntro .modal-dialog button.IntroStep.Tutorial { top: 0px; } body.CardProduct .modal.EditorIntro .modal-dialog button.LoadSaved { margin-left: 0px !important; } body.CardProduct .modal.EditorIntro .modal-dialog button.IntroStep.LoadSaved { top: 33.3%; } /*REMOVE*/ body.CardProduct .modal.EditorIntro .modal-dialog button.IntroStep.LoadSaved { top: 13.3%; } /**/ body.CardProduct .modal.EditorIntro .modal-dialog button.IntroStep.StartNew { top: 66.6%; } /*REMOVE*/ body.CardProduct .modal.EditorIntro .modal-dialog button.IntroStep.StartNew { top: 50%; } /**/ body.CardProduct .modal.EditorIntro .modal-body div { display: inline; float: none; position: initial; } body.CardProduct .modal.EditorIntro .modal-dialog button span { position: relative; } body.CardProduct .modal.EditorIntro .modal-dialog .modal-content .mCustomScrollBox, body.CardProduct .modal.EditorIntro .modal-dialog .modal-content .mCustomScrollBox .mCSB_container { position: absolute !important; top: 0px !important; left: 0px !important; width: 100% !important; height: 100% !important; } body.CardProduct.megaEditMobileMode .viewControlButton.previewButton .extratxt { display: block; text-indent: -85px; overflow: hidden; width: 55px; margin: 0 auto !important; } body.CardProduct.megaEditMobileMode .viewControlButton.previewButton { float: left; margin-top: 8px; } body.CardProduct.megaEditMobileMode .SelectDesignButton { margin-right: 0px !important; right: 0px; left: auto; margin-left: 0px !important; width: 33.3% !important; } body.CardProduct.megaEditMobileMode .CategoryConfigureButton { margin-left: 0px !important; bottom: 10px; left: 0px !important; width: 33.3% !important; } body.CardProduct.MobileMenuActive:after { content: ''; display: block; position: absolute; width: 300px; height: 100%; top: 0px; left: 0px; background: #000; z-index: 1; } body.CardProduct.megaEditMobileMode.MobileMenuActive .btn.backButton, body.CardProduct.megaEditMobileMode.MobileMenuActive .buttonContainer.rightSide .buttonsContainer .saveProjectButton, body.CardProduct.megaEditMobileMode.MobileMenuActive .TutorialButton, body.CardProduct.megaEditMobileMode.MobileMenuActive .MegaEditHomeButton, body.CardProduct.megaEditMobileMode.MobileMenuActive .clearPagesButton.resetPagesbtn { display: block !important; position: fixed !important; z-index: 999; top: 120px; left: 30px; width: 240px !important; margin: 0px !important; text-align: center; border: solid 1px #fff !important; text-transform: uppercase; } body.CardProduct.megaEditMobileMode.MobileMenuActive .btn.backButton { margin-top: 50px !important; } body.CardProduct.megaEditMobileMode.MobileMenuActive .buttonContainer.rightSide .buttonsContainer .saveProjectButton { margin-top: 200px !important; } body.CardProduct.megaEditMobileMode.MobileMenuActive .TutorialButton { margin-top: 150px !important; } body.CardProduct.megaEditMobileMode.MobileMenuActive .MegaEditHomeButton { margin-top: 0px !important; } body.CardProduct.megaEditMobileMode.MobileMenuActive .clearPagesButton.resetPagesbtn { margin-top: 100px !important; } body.CardProduct.megaEditMobileMode.MobileMenuActive .mobile-menu-button { left: 245px; z-index: 11; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/mobile_menu_close.svg'); } body.CardProduct.MobileMenuActive .TouchActionCanvasOverlay, body.CardProduct.megaEditMobileMode.MobileMenuActive #parentContainer .editorMain, body.CardProduct.MobileMenuActive button.ProgressBar, body.CardProduct.MobileMenuActive button.btn.ProgressBar, .megaEditMobileMode.MobileMenuActive .memobilePageClass, body.CardProduct.megaEditMobileMode.MobileMenuActive .SelectDesignButton, body.CardProduct.megaEditMobileMode.MobileMenuActive .CategoryConfigureButton, body.CardProduct.megaEditMobileMode.MobileMenuActive .viewControlButton.previewButton { opacity: 0 !important; pointer-events: none !important; } body.CardProduct.megaEditMobileMode.megaEditMobileMode .editorTop { background: transparent; } body.CardProduct.MobileMenuActive:before, body.CardProduct.megaEditMobileMode.MobileMenuActive .MegaEditHomeOverlay { display: block !important; } body.CardProduct .memobilePageClass button:last-child { right: 0%; } body.CardProduct .memobilePageClass button:first-child { left: 0%; } body.CardProduct.megaEditMobileMode .customScriptUi-freeTarget .HeaderLabel { white-space: nowrap; overflow: hidden; } body.CardProduct.megaEditMobileMode .fileupload-buttonbar .uploadProgressWrapper { margin-bottom: 0; position: fixed; top: 50px; left: 0px; width: 100%; height: auto; z-index: 10; margin-left: 0px; margin-top: 0px; padding: 0px; background-color: #000; } body.CardProduct.megaEditMobileMode .fileupload-buttonbar .uploadProgressWrapper.fade { overflow: hidden; height: 0px; } body.CardProduct.megaEditMobileMode .fileupload-buttonbar .uploadProgressWrapper.fade.in { overflow: hidden; height: 34px; } body.CardProduct.megaEditMobileMode .fileupload-buttonbar .uploadProgressWrapper .progress { background: #000; } /* CATEGORIES */ } /* LOGIN PAGE*/ .login__wrapper .page-title, .login__wrapper .login-title { display: none; } .login__wrapper .register-customer-wrapper { display: none; } .registering .login__wrapper .register-customer-wrapper { display: block; margin-bottom: 50px; } .registering .login__wrapper .returning-wrapper { display: none; } .sign_in_head, .returning-wrapper, .register-customer-wrapper, .new-wrapper.grid_6 { width: 526px; padding: 70px; background: none; margin-left: 50%; position: relative; float: left; box-sizing: border-box; left: -263px; color: #ffffff; background: #000; text-align: center; } .new-wrapper.grid_6 { padding-top: 10px; padding-bottom: 20px; } .new-wrapper.grid_6 .register-title { display: none; } .checkout-as-guest-or-register-block .row__container { width: 100%; } .checkout-as-guest-or-register-block .htmlcontent { display: none; } .checkout-as-guest-or-register-block:after { content: "OR"; display: block; text-align: center; font-size: 14px; margin-top: 15px; margin-bottom: 15px; } /* .layout--columnsOneVTwo .new-wrapper:after { content: "LOG IN"; } */ .sign_in_head { padding-bottom: 0px; margin-top: 50px; } .returning-wrapper, .register-customer-wrapper { padding-top: 0px; } .returning-wrapper { margin-bottom: 50px; } .sign_in_head button { height: 52px; width: 50%; position: relative; float: left; border: none; color: #040404; background: #fff; font-size: 18px; margin-top: 10px; margin-bottom: 20px; font-weight: 500; outline: none; } #contentiInnerRow .login__wrapper { padding-top: 0px; padding-bottom: 0px; } .sign_in_head button.register-button { border-top-left-radius: 50px; border-bottom-left-radius: 50px; } .sign_in_head button.login-button { border-top-right-radius: 50px; border-bottom-right-radius: 50px; background: #cb571d; color: #fff; } .registering .sign_in_head button.register-button { background: #cb571d; color: #fff; } .registering .sign_in_head button.login-button { color: #455A64; background: #fff; } .sign_in_head p { font-size: 10px; text-align: center; } .sign_in_head p span { color: #cb581e; } .login__wrapper .table-container {} .login__wrapper .table-container tr { position: relative; float: left; width: 100%; display: block; } .login__wrapper .table-container tr td { position: relative; float: left; width: 100%; box-sizing: border-box; padding: 0px; text-align: left; font-size: 14px; display: block; margin-bottom: 20px; color: #fff; } .login__wrapper .table-container tr td.item-name { font-weight: 600; } .login__wrapper .item-value .text-box { width: 100%; } .login__wrapper #RememberMe { float: right; margin-top: 0px; width: 30px; height: 30px; } .login__wrapper #RememberMe+input+label { display: block; position: relative; float: left; margin-top: 10px; } .login__wrapper .returning-wrapper #Password { margin-bottom: 30px; } .login__wrapper .table-container tr td.forgot-password { text-align: center; } .login__wrapper .table-container tr td.forgot-password { text-align: center; margin-top: 15px; margin-bottom: 25px; } .login__wrapper .table-container tr td.forgot-password a { text-decoration: underline; color: #cb581e; } .checkout-as-guest-or-register-block table tr td { padding: 0px; } .login__wrapper .loginbutton, .new-wrapper.grid_6 .checkoutasguestbutton, .new-wrapper.grid_6 .registerbutton { height: 52px; line-height: 35px; width: 100%; background-color: #cb581e; text-transform: uppercase; color: #ffffff; font-weight: 700; border: none; } .login__wrapper a { color: #CB571D; } .new-wrapper.grid_6 .checkoutasguestbutton { background-color: #CB571D; color: #ffffff; margin-bottom: 20px; } .new-wrapper.grid_6 .registerbutton { background-color: #37474f; color: #ffffff; } .externalauthentication .oauth-login-facebook legend { display: none; } /* .externalauthentication:before { content: 'OR'; visibility: visible; width: 100%; display: block; height: auto; text-align: center; font-size: 14px; margin-bottom: 20px; } */ .externalauthentication .oauth-login-facebook a img { display: none; } .login__wrapper .table-container input, .login__wrapper .table-container select { border: none !important; } .externalauthentication .oauth-login-facebook { display: block; float: left; width: 100%; } .externalauthentication .oauth-login-facebook a { height: 52px; line-height: 52px; width: 100%; background: #1C73DA; display: block; text-align: center; color: #fff; font-size: 16px; text-decoration: none; } .externalauthentication .oauth-login-facebook a:before { content: "\f09a"; font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: 24px; display: inline-block; vertical-align: middle; margin-right: 30px; } .externalauthentication .oauth-login-facebook a:after { content: 'Sign in with Facebook'; } .requiredMarker { color: #cb571d !important; } .attribute-datepicker__container { display: block; } .attribute-datepickerbutton { height: 52px; border: none; display: inline-block; vertical-align: top; float: left; border-radius: 0 5px 5px 0; border-width: 1px 1px 1px 0; width: 100%; position: absolute; top: 0px; right: 0px; } .attribute-datepickerbutton .fa { display: inline-block; padding: 0 10px; line-height: 32px; margin: 0; text-align: center; font-size: 20px; border-left: solid 1px #eee; color: #cb581e; width: 50px; } .login__wrapper .registernextstepbutton { text-transform: uppercase; background: #2fbad7; } .login__wrapper #TermsAndConditions { float: right; margin-top: -5px; } .login__wrapper .register-customer-wrapper .table-container { margin-bottom: 30px; } .sign_in_head h2:before { content: 'Sign in'; } .registering .sign_in_head h2:before { content: 'Create account'; } .generalPageWrapper.layout--columnsOneVTwo { padding-bottom: 0px; position: relative; overflow: hidden; } .registration-page .page-title h1 { color: #2fbad7; margin-bottom: 10px; font-size: 40px; padding-left: 30%; } .registration-page { padding-top: 60px; padding-bottom: 100px; } .registration-page .login-title { display: none; } .registration-page .attribute-datepickerbutton { top: 20px; right: 10px; } .registration-page .table-container, .registration-page .table-container tr, .registration-page .table-container tr td { position: relative; font-size: 14px; } .login__wrapper .table-container input[type="checkbox"] { margin-right: 0px; float: right; } body input:-webkit-autofill, body textarea:-webkit-autofill, body select:-webkit-autofill { background-color: #ccc !important; background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/dropdown_arrow.svg'); } .layout--columnsOneVTwo #contentrow { margin-bottom: 40px; } #unpaidOrdersBanner { position: fixed !important; bottom: -4px; background-color: #cb571d; border: none; } #unpaidOrdersBanner p { font-size: 14px; } #unpaidOrdersBanner .close_popup_link_container a { position: absolute; padding: 10px; line-height: 11px; font-size: 20px; color: #fff; background-color: transparent; } #unpaidOrdersBanner .fa { vertical-align: middle; } .attribute-datepicker__container .attribute-datepicker { opacity: 1; } @media only screen and (max-width: 490px) { .sign_in_head, .returning-wrapper, .register-customer-wrapper, .new-wrapper.grid_6 { width: 100vw; left: -50vw; } .sign_in_head { padding-bottom: 0px; margin-top: 0px; } #contentrow { min-height: 0px; } .generalPageWrapper.layout--columnsOneVTwo { padding-bottom: 0px; position: relative; margin-bottom: 1px; overflow: hidden; } .sign_in_head, .returning-wrapper, .register-customer-wrapper, .new-wrapper.grid_6 { padding: 15%; } .sign_in_head { padding-bottom: 0px; } .returning-wrapper, .register-customer-wrapper, .new-wrapper.grid_6 { padding-top: 0px; } #menurow .search.grid_4_inner, #menurow .menu.grid_8_inner { width: 320px; } .viewControlButton.previewButton .fa { float: left; margin-top: 9px; } } body.CardProduct.megaEditMobileMode .fileupload-buttonbar .uploadProgressWrapper { pointer-events: none; } body.CardProduct.megaEditMobileMode .buttonContainer.rightSide .buttonsContainer .saveProjectButton[ng-confirmed-click="AddToBasket()"] { display: none !important; } /* Cookie banner */ .shared__cookie-banner { background: #000; background: rgba(0, 0, 0, 0.7); position: fixed; bottom: 0px; z-index: 99999; width: 320px !important; right: 0px; padding: 20px; box-sizing: border-box'' } .cookiebanner__message { margin: 0px; float: left; width: 90%; color: white; font-size: 15px; font-family: arial; } .cookiebanner__accept { background: white; border: 0; padding: .6rem 1.2rem; text-transform: uppercase; position: relative; top: 0px; margin-top: 10px; transform: none; } .grid_9.password-recovery-container { position: relative; float: left; width: 100%; padding-top: 10%; padding-bottom: 10%; text-align: center; } .password-recovery-page-form { display: inline-block; padding: 35px; width: 500px; max-width: 100%; box-sizing: border-box; text-align: center; background: #000; color: #fff; } .password-recovery-page-form table, .password-recovery-page-form table tr, .password-recovery-page-form table tr td { display: block; padding: 0px; color: #fff; width: 100%; position: relative; float: left; } .password-recovery-page-form table tr:first-child td:first-child { padding-bottom: 20px; } .password-recovery-page-form table input[type="text"] { width: 100% !important; } #order_details_v2 .od_info_box .od_info_title, #order_details_v2 .od_products_title, #order_details_v2 .od_notes_title, #order_details_v2 .od_product_box .od_field_title, #order_details_v2 .od_products_container .od_product_box .od_product_name { color: #cb571d !important; } #order_details_v2 .od_products_container .od_product_box .od_product_total, #order_details_v2 .od_order_total { background: #cb571d !important; } .product-variant-line .tier-prices { display: none !important; } .DTV3 .DT_product-collateral .overview .price .priceperpack { text-align: right; font-size: 20px; color: #ccc; margin-top: 6px; width: 100%; position: relative; float: left; } .DTV3 .DT_product-collateral .overview .price .priceperpack span { float: left; } @media only screen and (max-width: 490px) { .DTV3 .DT_product-collateral .overview .price .priceperpack { text-align: right; font-size: 15px; color: #ccc; margin-top: 0px; } .DTV3 .DT_product-collateral .overview .price .priceperpack span { float: none; display: block; } } .related-products-grid .flex-control-nav { display: none; } .related-products-grid .flex-direction-nav .flex-prev, .related-products-grid .flex-direction-nav .flex-next { background: none; opacity: 1; color: transparent; } .related-products-grid .flex-direction-nav .flex-prev:before, .related-products-grid .flex-direction-nav .flex-next:before { content: ''; display: block; width: 40px; height: 40px; border-top: solid 3px #fff; border-left: solid 3px #fff; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -10px; } .related-products-grid .flex-direction-nav .flex-next:before { -webkit-transform: rotate(-225deg); -moz-transform: rotate(-225deg); -o-transform: rotate(-225deg); transform: rotate(-225deg); } #order_details_v2 .od_row:first-child .od_row_formating { width: 100%; } @media only screen and (max-width: 767px) { .related-products-grid .flex-direction-nav .flex-prev:before { margin-left: 15px; } .related-products-grid .flex-direction-nav .flex-next:before { margin-left: -30px; } .related-products-grid>.row__container { max-width: 100%; } #cartTotals table.cart-total td { font-size: 16px !important; } } .how-it-works section.general_cont .img_box.right { background-position: left; background-repeat: no-repeat; } .how-it-works section.general_cont .img_box.left { background-position: right; background-repeat: no-repeat; } /* Truspilot */ #logorow .social-icons a { margin-right: 0px; margin-left: 12px; } #logorow div.trustpilot-widget { position: absolute !important; bottom: 50px; left: 50px; width: 201px; text-align: right; height: 70px; overflow: hidden; } #logorow .social-icons { left: auto; right: 50px; text-align: right; } @media only screen and (max-width: 1500px) { #logorow div.trustpilot-widget { bottom: 30px; left: 22px; width: 185px; height: 69px; overflow: hidden; } #logorow .social-icons { right: 30px; } } @media only screen and (max-height: 958px) and (max-width: 959px) { #logorow div.trustpilot-widget { display: none; } } /*Christmas Delivery */ section.general_cont#ChristmasDelivery { position: relative; float: left; width: 100%; text-align: left; margin-top: -80px; color: #fff; background: #ce3a3a; border-top: solid 60px #000000; } .layout--columnsOneA section.general_cont#ChristmasDelivery { border-top: solid 0px #000000; margin-top: 0px; display: none; } section.general_cont#ChristmasDelivery h2:after { border-top: solid 2px #020202; left: 50%; margin-left: -38px; } section.general_cont#ChristmasDelivery .grid_4 { float: left; } section.general_cont#ChristmasDelivery .grid_8 { float: right; } section.general_cont#ChristmasDelivery p { margin-bottom: 0px; padding-bottom: 0px; } section.general_cont#ChristmasDelivery a { color: #fff; font-weight: bold; } section.general_cont#ChristmasDelivery a:hover { color: #fff; text-decoration: underline; } @media only screen and (max-width: 959px) { section.general_cont#ChristmasDelivery { padding-top: 40px; padding-bottom: 40px; } section.general_cont#ChristmasDelivery { margin-top: 0px; } section.general_cont#ChristmasDelivery { margin-top: 0px; border: none; text-align: center; } section.general_cont#ChristmasDelivery .grid_4, section.general_cont#ChristmasDelivery .grid_8 { width: 100%; margin-bottom: 20px; } section.general_cont#ChristmasDelivery .grid_8 .grid_4 { width: 33%; } } @media only screen and (max-width: 767px) { section.general_cont#ChristmasDelivery .grid_8 .grid_4 { width: 100%; } } /*Approval */ .generalPageWrapper.layout--columnsOneVTwo .page-title-cont { padding-top: 20px; padding-bottom: 20px; } .generalPageWrapper.layout--columnsOneVTwo .page-title-cont h1 {} .t-header, .t-grid-header { border-color: #b2b2b2; background: #ffffff; } .t-grid-header .t-header, .t-grid-header .t-last-header { padding: 10px; } .t-toolbar, .t-grouping-header, .t-grid-pager, .t-widget .t-status { border-color: #cdcdcd; background-color: #ffffff; } .t-grid td { border-color: #d1d1d1; } tr.t-state-hover, tr.t-state-hover:hover { border-color: #000; background-color: #fff; } #workflow--approval input[type="button"] { width: 100%; margin: 3px 0px; padding: 4px !important; height: auto !important; background: #cb571d; color: #fff; border: none; } .row2 div.left, .row2 div.right { width: 99% !important; position: relative; float: left; } .row2 { position: relative; float: left; width: 49%; box-sizing: border-box; } .row2+div.clear { display: none; } .row2 .bodyItem { width: 100% !important; box-sizing: border-box; min-height: 200px !important; } .row2:nth-child(3), .row2:nth-child(9) { width: 100%; } .row2:nth-child(9) .left { width: 100% !important; } .row2:nth-child(9) .bodyItem { width: 48.5% !important; } #workflow--approval .thumbnailImg { max-width: 100px; } #blockable .row__container { max-width: 100%; } input:invalid, textarea:invalid, input.issueFound, textarea.issueFound { background-color: #ffb0b0; border-color: red !important; } div#AfterMainContainer { position: relative; float: left; width: 100%; } /* new product - staticProduct */ .staticProduct .breadcrumb__container, .staticProduct .global_content, .staticProduct .Notebook_Cover_Colour .attribute-item label, .staticProduct .Poster_Colour .attribute-item label, .staticProduct .Mug_colour .attribute-item label, .staticProduct .T-shirt_Design_Colour .attribute-item label { display: none; } .staticProduct .DT_product-collateral-bottom { width: 50%; float: right; margin-top: 0px; overflow: inherit; } .staticProduct .DT_product-collateral .overview .add-info { left: 0px; width: 100%; background: transparent; margin-left: 0px; margin-top: 0px; padding-left: 0px; } .staticProduct .DT_product-collateral .productname { color: black; text-shadow: none; } .staticProduct .DT_product-collateral .overview .price { left: 0px; margin-left: 0px; margin-top: 96px; } .staticProduct .DT_product-collateral .overview .add-info .productvariantaddtocartbutton { left: 0px; } .staticProduct .DT_product-collateral .add-info label { color: black; border: solid 2px transparent; font-weight: bold; font-size: 20px; } .staticProduct .DT_product-collateral .overview .add-info .quantityBox { border-left: 1px solid #cccccc; } .staticProduct .overview-intro { float: right; width: 50%; } .staticProduct .DT_product-collateral .overview .price .productPrice { color: black; } .staticProduct .DT_product-essential { width: 50% !important; border-bottom: none !important; z-index: 2 !important; } .staticProduct .DT_bigpicture, .staticProduct .product-details-attribute-combination .picture .bigpicture { width: 60% !important; height: 80% !important; top: 47% !important; left: 50% !important; transform: translate(-50%, -47%); -webkit-transform: translate(-50%, -47%); -moz-transform: translate(-50%, -47%); -ms-transform: translate(-50%, -47%); -o-transform: translate(-50%, -47%); float: left; margin: 0; border: 0; position: absolute; background: transparent; } .staticProduct .product-details-attribute-combination .picture { width: 100%; float: left; margin: 0; border: 0; position: absolute; top: 0px; left: 0px; right: 0px; height: 100% !important; } .staticProduct .product-details-info .bigpicture img { max-width: 100% !important; max-height: 100% !important; } .staticProduct .product-details-attribute-combination { position: unset; float: none; width: 100%; } .staticProduct .attributeHeader { border-bottom: 0px; } .staticProduct .attribute { background: transparent; border: 0px; margin: 10px 0px; } .staticProduct .attributes { padding-bottom: 20px; } .staticProduct .fulldescription { display: block; width: 60%; } .staticProduct .attributes:after { content: ''; display: block; position: absolute; top: 0; height: 100%; width: 200%; margin-left: -100%; background-color: #efefef; left: 0px; z-index: -1; } .staticProduct .DT_product-collateral.DT_product-collateral-top:after { content: ''; display: block; position: absolute; top: 0; height: 100%; width: 300%; margin-left: -100%; background-color: #efefef; left: 0px; z-index: -1; } .staticProduct .fulldescription:after { content: ''; background-color: #efefef; width: 200%; height: 300px; display: inline-block; position: absolute; top: 0; left: 0; margin-left: -100%; z-index: -1; } .staticProduct input[type="radio"] { width: 45px; height: 45px; margin-top: 5px; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; } .staticProduct .Notebook_Cover_Colour .attribute-item input[type="radio"], .staticProduct .Poster_Colour .attribute-item input[type="radio"], .staticProduct .Mug_colour .attribute-item input[type="radio"], .staticProduct .T-shirt_Design_Colour .attribute-item input[type="radio"] { float: left; display: inline-block; margin-top: 0px; } .staticProduct select { height: 50px; background-image: url(/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/dropdown_arrow.svg); background-position: right; background-size: contain; background-repeat: no-repeat; width: 400px; border: solid 2px #CB571D; position: relative; } .staticProduct .Notebook_Cover_Colour input[type="radio"]:checked, .staticProduct .Poster_Colourinput[type="radio"]:checked, .staticProduct .Mug_colour input[type="radio"]:checked, .staticProduct .T-shirt_Design_Colour input[type="radio"]:checked { background-image: url('/0/Handler/CSSOverride/GetImage/5/check-symbol.png'); background-size: 70%; } .staticProduct input[type="radio"].Red { background-color: red; } .staticProduct input[type="radio"].Pink { background-color: pink; } .staticProduct input[type="radio"].Purple { background-color: purple; } .staticProduct input[type="radio"].Blue { background-color: blue; } .staticProduct input[type="radio"].Black { background-color: black; } .staticProduct .product-variant-list { margin-bottom: 10px; z-index: 2; } .staticProduct .DT_product-details-page-main { margin-bottom: 0px; } @media only screen and (max-width: 1080px) { .staticProduct .DT_bigpicture { width: 90% !important; } } @media only screen and (max-width: 959px) { .staticProduct .DT_product-collateral-top { margin-bottom: 0px !important; } .staticProduct .DT_bigpicture { width: 85% !important; } .staticProduct .fulldescription { width: 90%; } } @media only screen and (max-width: 768px) { .staticProduct .overview-intro { width: 100%; } .staticProduct .DT_product-essential { position: relative !important; width: 100% !important; } .staticProduct .DT_product-collateral-bottom { width: 100%; left: 40px; } .staticProduct .fulldescription { width: 86%; } .staticProduct .DT_product-collateral .overview .add-info { width: 90%; } .staticProduct .DT_product-collateral .overview .add-info .quantityBox { width: calc(100% - 100px) !important; } .staticProduct .DT_product-collateral .overview .add-info .productvariantaddtocartbutton { bottom: 0px; } .staticProduct .DT_product-collateral .overview .price { width: 82%; } .staticProduct .DT_product-collateral-top { height: 145px !important; } .staticProduct .DT_bigpicture, .staticProduct .product-details-attribute-combination .picture .bigpicture { width: 80% !important; height: 90% !important; top: 49% !important; padding: 0px; } } /* megaEdit - defaultEditor */ body.defaultEditor .customScriptUi-batchArea, body.defaultEditor .main_view_controls, body.defaultEditor .zoom_options2, body.defaultEditor .editorLeft.pane.ui-layout-west.leftPaneCtrlContainer, body.defaultEditor i.fa.fa-recycle, body.defaultEditor .freeTargetContainer .PageFormUI .ng-scope.ng-isolate-scope.meuiStackLayout.meuiStacklayoutVertical:nth-child(odd), body.defaultEditor button.nextStepButton, body.defaultEditor .memobilePageClass button.btn-me, body.defaultEditor .pageListContainer .addPageButton, body.defaultEditor .pagelist_title, body.defaultEditor i.fa.fa-arrow-circle-left { display: none; } body.defaultEditor .headerWrapper .undoRedoContainer { display: none !important; } body.defaultEditor { background-image: url(/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/MECardBACKGROUND.jpg) !important; background-size: cover !important; background-position: center !important; } body.defaultEditor .megaEditMainContainer:before { content: ''; position: fixed; top: 2%; left: 2%; width: 120px; height: 110px; background-image: url(/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/toptrumps_logomytoptrumps-dot-com-logo-White.png); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 1060; } body.defaultEditor .megaEditMainContainer { background-color: transparent; } body.defaultEditor .btn.backButton { position: fixed; bottom: 3%; left: 3%; } body.defaultEditor .viewControlButton.previewButton, body.defaultEditor .saveProjectButton { position: fixed; bottom: 3%; right: 3%; } body.defaultEditor .buttonContainer.rightSide .buttonsContainer .btn-lg, body.defaultEditor .buttonContainer.rightSide .buttonsContainer .btn { float: right; } body.defaultEditor .clearPagesButton.resetPagesbtn, body.defaultEditor .MegaEditHomeButton { position: fixed; top: 3%; left: 3%; margin-left: 300px !important; display: block !important; text-transform: none; color: #fff; } body.defaultEditor .btn.backButton, body.defaultEditor .viewControlButton.previewButton, body.defaultEditor .clearPagesButton.resetPagesbtn, body.defaultEditor .MegaEditHomeButton, body.defaultEditor .buttonContainer.rightSide .buttonsContainer .saveProjectButton, body.defaultEditor .freeTargetContainer .PageFormUI .meuiStacklayoutVertical:nth-child(odd), body.defaultEditor .pagenrbtn, body.defaultEditor .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close, body.defaultEditor .ui-dialog .ui-dialog-buttonpane button, body.defaultEditor .modal-footer button { max-width: none; background-color: transparent !important; height: 50px; line-height: 50px; border: solid 2px #fff; font-size: 20px; font-weight: 600; text-transform: uppercase; font-family: 'Kanit', sans-serif; letter-spacing: 1px; outline: none; } .add_to_basket_from_preview { position: absolute; display: block !important; } body.defaultEditor .memobilePageClass span:hover, body.defaultEditor .btn.backButton:hover, body.defaultEditor .viewControlButton.previewButton:hover, body.defaultEditor .clearPagesButton.resetPagesbtn:hover, body.defaultEditor .CategoryConfigureButton:hover, body.defaultEditor .SelectDesignButton:hover, body.defaultEditor .TutorialButton:hover, body.defaultEditor .MegaEditHomeButton:hover, body.defaultEditor .saveProjectButton:hover, body.defaultEditor .EditorLoadSaved .LoadDataButton:hover, body.defaultEditor .EditorLoadSaved .DeleteDataButton:hover, body.defaultEditor button:hover, body.defaultEditor .ui-dialog .ui-dialog-buttonpane button:hover { opacity: .7 !important; text-decoration: none !important; } body.defaultEditor .btn.backButton, body.defaultEditor .clearPagesButton.resetPagesbtn, body.defaultEditor .MegaEditHomeButton { border: none; width: auto !important; padding: 0px; } body.defaultEditor .btn.backButton { margin-bottom: 10px !important; border-bottom: solid 2px #fff !important; height: 40px !important; } body.defaultEditor .viewControlButton.previewButton, body.defaultEditor .saveProjectButton { width: 260px; font-size: 18px; } body.defaultEditor .buttonContainer.rightSide .buttonsContainer .saveProjectButton { height: 50px !important; margin-bottom: 0px !important; font-size: 18px; top: 3%; right: 3%; position: fixed; border: solid 2px white; } body.defaultEditor .confirmextratxt, body.defaultEditor .alltxt { display: inline-block !important; } body.defaultEditor .MegaEditHomeButton { margin-left: 200px !important; } body.defaultEditor .editorMain.pane.ui-layout-center { top: 50% !important; left: 35% !important; transform: translate(-50%, -50%); width: 60% !important; height: 80% !important; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } body.defaultEditor .pane.ui-layout-east.freeTargetContainer { right: 3%; width: 30vw; height: auto !important; bottom: auto; top: 12%; padding: 60px; border: solid 2px #CB571D; background: rgba(0, 0, 0, .8); zoom: 0.93; } body.defaultEditor .freeTargetContainer .PageFormUI .meuiStacklayoutVertical { width: 48%; display: block; float: left; margin: 8px 1%; } body.defaultEditor .freeTargetContainer .PageFormUI .meuiStacklayoutVertical:nth-child(2), body.defaultEditor .freeTargetContainer .PageFormUI .meuiStacklayoutVertical:nth-child(4), body.defaultEditor .freeTargetContainer .PageFormUI .meuiStacklayoutVertical:nth-child(6), body.defaultEditor .freeTargetContainer .PageFormUI .meuiStacklayoutVertical:nth-child(8) { width: 98% !important; margin-left: 0px; margin: 8px 1%; } body.defaultEditor .freeTargetContainer .PageFormUI input, body.defaultEditor .freeTargetContainer .PageFormUI select, body.defaultEditor .freeTargetContainer .PageFormUI textarea { width: 100% !important; border: 0px !important; } body.defaultEditor .freeTargetContainer .PageFormUI input { height: 35px !important; } body.defaultEditor .freeTargetContainer .PageFormUI input:hover, body.defaultEditor .freeTargetContainer .PageFormUI select:hover, body.defaultEditor .freeTargetContainer .PageFormUI textarea:hover { border: 0px !important; } body.defaultEditor .freeTargetContainer .PageFormUI .meuiStacklayoutVertical button.AddImageToField { width: 100% !important; height: 140px; border: solid 1px white !important; background-color: transparent !important; } body.defaultEditor .memobilePageClass { position: fixed; bottom: 3%; left: 50%; margin-left: -100px !important; text-transform: none; width: 200px !important; font-size: 18px; } body.defaultEditor .pagenrbtn { min-width: 100px; background: transparent; height: 50px !important; } body.defaultEditor .pagenrbtn { position: fixed; bottom: 3%; left: 50%; margin-left: -100px !important; text-transform: none; width: 200px !important; font-size: 18px; border: 0px; } body.defaultEditor .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close { width: 30px; height: 30px; background-size: contain; } body.defaultEditor .ui-dialog { height: 99vh !important; width: 99vw !important; background: transparent !important; max-width: none; max-height: none; box-shadow: none; z-index: 1070; } body.defaultEditor .ui-dialog { height: 100% !important; width: 100vw !important; } body.defaultEditor .ui-dialog .ui-dialog-titlebar { position: absolute; top: 15px; left: 20px; right: 20px; height: 50px; width: auto; overflow: hidden; background-color: transparent !important; } body.defaultEditor .ui-dialog .ui-dialog-titlebar .ui-dialog-title { font-weight: 800; font-size: 36px; font-family: 'Kanit', sans-serif; letter-spacing: 1.5px; color: #fff; text-align: center; text-transform: uppercase; line-height: 40px; width: 100%; } body.defaultEditor div#dlgHaveIssue, body.defaultEditor div#dlgHaveIssue .page-card.ng-scope { background-color: transparent !important; background: transparent !important; border: none !important; width: 50% !important; max-width: 100% !important; } body.defaultEditor .ui-dialog .ui-dialog-content { position: absolute; top: 50% !important; left: 50%; bottom: initial; max-width: calc(100% - 0px) !important; max-height: calc(100% - 240px) !important; height: auto !important; min-height: 0px !important; width: 100% !important; overflow: hidden; background: transparent; text-align: center; color: #fff; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } body.defaultEditor .ui-dialog .ui-dialog-content.pageListContainer { height: 100% !important; } body.defaultEditor .ui-dialog .pageSelectorContainerScroller { height: 94%; position: absolute; top: 3%; left: 0px; width: 100%; padding: 0px; background: transparent; border-top: solid 2px #fff; border-bottom: solid 2px #fff; } body.defaultEditor .ui-dialog .pageSelectorContainerScroller .mCustomScrollBox { overflow-y: auto; } body.defaultEditor .ui-dialog .pageSelectorContainerScroller .mCSB_inside>.mCSB_container { padding-right: 0px; } body.defaultEditor .pageSelectorItem { display: inline-block; position: relative; margin: 2%; } body.defaultEditor .pageSelectorItem .pageLabel { position: absolute; width: 100%; bottom: -20px; text-align: center; font-size: 12px; color: #fff; } body.defaultEditor .ui-dialog .pageSelectorItem img { max-width: 100%; max-height: 240px; } body.defaultEditor button, body.defaultEditor button.btn { -webkit-transition: opacity .15s linear; -moz-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; } body.defaultEditor .ui-dialog .ui-dialog-buttonpane { position: absolute; top: auto; bottom: 45px; left: 20px; right: 20px; height: 50px; width: auto; overflow: hidden; background: transparent; } body.defaultEditor .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: left; width: 100%; text-align: center; } body.defaultEditor .ui-dialog .ui-dialog-buttonpane button { min-width: 150px; margin-left: 5px; margin-right: 5px; } body.defaultEditor .ui-widget-overlay { opacity: 1 !important; } body.defaultEditor .modal.EditorIntro, body.defaultEditor .modal.EditorCategories, body.defaultEditor .modal.EditorIndividualCategories, body.defaultEditor .modal.EditorDesigns, body.defaultEditor .modal.EditorTutorial, body.defaultEditor .modal.EditorLoadSaved, body.defaultEditor .ui-widget-overlay { background-image: url(/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/MECardBACKGROUND.jpg) !important; background-size: cover !important; background-position: center !important; } body.defaultEditor .add_to_basket_from_preview { display: block !important; position: absolute; } body.defaultEditor .preview_close_button { line-height: 23px !important; } body.defaultEditor .warningIcon { top: 0px; } body.defaultEditor .modal-dialog .modal-content { max-width: 100%; padding: 30px; background: #000; border: solid 2px #232323; min-width: 350px; } body.defaultEditor .modal.EditorIntro .modal-content { background: transparent; border: none; box-shadow: none; } body.defaultEditor .modal-dialog { position: absolute !important; left: 50% !important; top: 50% !important; -webkit-transform: translate(-50%, -50%) !important; -moz-transform: translate(-50%, -50%) !important; -o-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; margin: 0px; } body.defaultEditor .modal-header { background-color: transparent; border-bottom: solid 2px #fff; margin: 0px; padding: 0px; padding-bottom: 20px; } body.defaultEditor .modal-footer { background-color: transparent; border-top: solid 2px #fff; margin: 0px; padding: 0px; padding-top: 30px; margin-top: 15px; text-align: center; } body.defaultEditor .modal-body { padding-left: 10px; padding-right: 10px; padding-top: 30px; padding-bottom: 30px; color: #fff; text-align: center; max-height: calc(100vh - 360px); overflow: hidden; /*overflow-y: auto;*/ position: relative; padding-right: 0px; } body.defaultEditor .modal-body>div { position: relative; float: left; width: 100%; margin-bottom: 10px; } body.defaultEditor .modal.EditorGallery { overflow: hidden; } body.defaultEditor .modal.EditorGallery .Gallery { min-height: 200px; } body.defaultEditor .modal.EditorGallery .Gallery:after { content: 'Loading Library. Please wait...'; font-size: 20px; font-weight: bold; margin-top: 50px; margin-bottom: 50px; display: block; animation: colorchange 1s; /* animation-name followed by duration in seconds*/ /* you could also use milliseconds (ms) or something like 2.5s */ -webkit-animation: colorchange 1s; /* Chrome and Safari */ animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; position: relative; float: left; width: 100%; padding: 10px; } @keyframes colorchange { 0% { background: linear-gradient(to right, black, orange 0%, black); } 10% { background: linear-gradient(to right, black, orange 10%, black); } 20% { background: linear-gradient(to right, black, orange 20%, black); } 30% { background: linear-gradient(to right, black, orange 30%, black); } 40% { background: linear-gradient(to right, black, orange 40%, black); } 50% { background: linear-gradient(to right, black, orange 50%, black); } 60% { background: linear-gradient(to right, black, orange 60%, black); } 70% { background: linear-gradient(to right, black, orange 70%, black); } 80% { background: linear-gradient(to right, black, orange 80%, black); } 90% { background: linear-gradient(to right, black, orange 90%, black); } 100% { background: linear-gradient(to right, black, orange 100%, black); } } body.defaultEditor .modal.EditorGallery .Gallery.AllLoaded:after { content: ''; background: none !important; padding: 0px; animation: none; -webkit-animation: none; } body.defaultEditor .modal.EditorGallery .modal-content { width: 469px; } body.defaultEditor .modal.EditorGallery .modal-content .modal-body { width: 398px; } body.defaultEditor .modal.EditorGallery .TriggerUpload, body.defaultEditor .modal.EditorGallery .ShowCliparts { width: 100%; margin-bottom: 10px !important; height: auto !important; background: transparent !important; float: left; } body.defaultEditor .modal.EditorGallery .ShowCliparts { border-left: solid 2px #fff !important; } body.defaultEditor .modal.EditorGallery .TriggerUpload span.icon, body.defaultEditor .modal.EditorGallery .ShowCliparts span.icon { display: block; width: 100%; height: 80px; margin: 0px; } body.defaultEditor .modal.EditorGallery .TriggerUpload span.icon { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/UploadTHumb.svg'); } body.defaultEditor .modal.EditorGallery .ShowCliparts span.icon { background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/ic_face_24px.svg'); } body.defaultEditor .modal.EditorGallery button span.icon { background-size: contain; background-repeat: no-repeat; background-position: center; height: 60px !important; margin-bottom: 20px !important; } body.defaultEditor .modal.EditorGallery div.Gallery { position: relative; float: left; width: 100%; margin-top: 10px; border-top: solid 2px #fff; padding-top: 10px; } body.defaultEditor .modal.EditorGallery .ImageButton { position: relative; float: left; width: 32.3%; height: 98px; margin: 0.5% !important; background: transparent !important; } body.defaultEditor .modal.EditorGallery .ImageButton span { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } body.defaultEditor .modal.EditorGallery .ImageButton:hover span { background-size: contain; } body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions { width: 300px; position: relative; display: block; margin: 0 auto; } body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .imagePositionOptions { position: relative; float: left; width: 100%; margin-bottom: 10px; } body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton { width: 69px; height: 69px; position: relative; float: left; box-sizing: border-box; background: rgba(0, 0, 0, 0) !important; margin: 2px !important; color: #fff !important; outline: none !important; touch-action: manipulation; } body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton .fa { font-size: 30px; color: #cb571d; } body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveUpButton, body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveDownButton { width: 150px; } body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveLeftButton, body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveRightButton { height: 150px; } body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.ResetButton { width: 150px; height: 150px; border: solid 1px #cb571d !important; } body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions h3 { text-align: center; color: #fff; text-transform: uppercase; letter-spacing: 1px; } body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p { color: #fff; text-align: center; font-size: 14px; letter-spacing: 1px; position: relative; float: left; width: 86%; margin-bottom: 20px; border: solid 1px #000; padding: 18px; margin-left: 7%; line-height: 24px; background: rgba(0, 0, 0, .3); } body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p .fa { color: #cb571d; font-size: 20px; } body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p .fa.fa-caret-up, body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p .fa.fa-caret-down, body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p .fa.fa-caret-left, body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p .fa.fa-caret-right, body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions p .fa.fa-picture-o { color: #fff; font-size: 24px; } body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveUpButton .fa, body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveDownButton .fa, body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveLeftButton .fa, body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.MoveRightButton .fa, body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .ImgPosOptionButton.ResetButton .fa { font-size: 60px; color: #fff; } body.defaultEditor.megaEditMobileMode .customScriptUi-freeTarget .imageOptions .BackButton { position: relative; float: left; width: 86%; height: 50px; box-sizing: border-box; background: #cb571d !important; left: 7%; } body.defaultEditor.megaEditMobileMode .AddImageToField { position: relative; } body.defaultEditor.megaEditMobileMode .AddImageToField span { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-size: cover; background-position: center; } .DTV3.staticProduct .DT_product-collateral .overview .price .priceperpack { display: none; } body.defaultEditor .modal-body .meuiLabel { color: white; } @media only screen and (max-width: 1600px) { body.defaultEditor .pane.ui-layout-east.freeTargetContainer { width: 35vw; } } @media only screen and (max-width: 1440px) { body.defaultEditor .pane.ui-layout-east.freeTargetContainer { height: 76%; overflow-Y: scroll; } body.defaultEditor .editorBottom { /* height: 0px !important; */ bottom: 34px; } } @media only screen and (max-width: 1280px) { body.defaultEditor .pane.ui-layout-east.freeTargetContainer { padding: 30px; } body.defaultEditor .memobilePageClass span, body.defaultEditor .btn.backButton, body.defaultEditor .viewControlButton.previewButton, body.defaultEditor .clearPagesButton.resetPagesbtn, body.defaultEditor .CategoryConfigureButton, body.defaultEditor .SelectDesignButton, body.defaultEditor .TutorialButton, body.defaultEditor .MegaEditHomeButton, body.defaultEditor .saveProjectButton, body.defaultEditor .EditorLoadSaved .LoadDataButton, body.defaultEditor .EditorLoadSaved .DeleteDataButton, body.defaultEditor .SaveDataButton, body.defaultEditor .ui-dialog .ui-dialog-buttonpane button { height: 40px; line-height: 36px; font-size: 14px; } } @media only screen and (max-width: 1080px) { body.defaultEditor .warningIcon { top: -60px; } } @media only screen and (max-width: 860px) { body.defaultEditor .viewControlButton.previewButton i.fa.fa-eye { display: none; } body.defaultEditor .pane.ui-layout-east.freeTargetContainer { top: 15%; } body.defaultEditor .editorMain.pane.ui-layout-center { top: 52% !important; left: 50% !important; width: 90% !important; height: 75% !important; } body.defaultEditor .viewControlButton.previewButton.btn.btn-primary.pageItemInline { width: 100px; } body.defaultEditor .viewControlButton.previewButton .extratxt { display: inline-block; text-indent: -85px; overflow: hidden; height: 25px; } body.defaultEditor .btn.backButton, body.defaultEditor .buttonContainer.rightSide .buttonsContainer .saveProjectButton, body.defaultEditor .TutorialButton, body.defaultEditor .MegaEditHomeButton, body.defaultEditor .clearPagesButton.resetPagesbtn { height: 40px; line-height: 36px; font-size: 14px; } body.defaultEditor .buttonContainer.rightSide .buttonsContainer .saveProjectButton { width: auto; border: 0px; } body.defaultEditor .clearPagesButton.resetPagesbtn, body.defaultEditor .MegaEditHomeButton { top: 4%; left: 2%; margin-left: 250px !important; } body.defaultEditor .MegaEditHomeButton { margin-left: 160px !important; } body.defaultEditor.megaEditMobileMode .freeTargetContainer { width: 94% !important; height: auto !important; right: 3% !important; left: 3% !important; top: 3% !important; bottom: 3% !important; z-index: 99999 !important; } body.defaultEditor.megaEditMobileMode .freeTargetContainer { display: none !important; } body.defaultEditor.megaEditMobileMode.ShowForm .freeTargetContainer { display: block !important; } body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer { width: 100% !important; left: 0% !important; top: auto !important; bottom: 0px !important; } body.CardProduct.megaEditMobileMode.imageTweaks .freeTargetContainer { width: 100% !important; left: 0% !important; top: auto !important; bottom: 0px !important; } body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer .imageOptions .BackButton { height: 40px; } body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer .imageOptions .ImgPosOptionButton, body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer .imageOptions .ImgPosOptionButton.ResetButton, body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer .imageOptions .ImgPosOptionButton.MoveLeftButton, body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer .imageOptions .ImgPosOptionButton.MoveRightButton { height: 50px; line-height: 60px; } body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer .imageOptions .ImgPosOptionButton.MoveUpButton .fa, body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer .imageOptions .ImgPosOptionButton.MoveDownButton .fa, body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer .imageOptions .ImgPosOptionButton.MoveLeftButton .fa, body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer .imageOptions .ImgPosOptionButton.MoveRightButton .fa, body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer .imageOptions .ImgPosOptionButton.ResetButton .fa { font-size: 30px; } body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer .imageOptions .ImgPosOptionButton .fa { font-size: 20px; } body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer .imageOptions .imagePositionOptions { margin-bottom: 10px; } body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer {} body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer .imageOptions h3, body.defaultEditor.megaEditMobileMode.ShowForm.imageTweaks .freeTargetContainer p { display: none; } .freeTargetContainer .PageFormUI .ng-scope.ng-isolate-scope.meuiStackLayout.meuiStacklayoutVertical:last-child { display: block !important; position: absolute; bottom: 0px; width: 91%; border: none; margin: 0px; } .freeTargetContainer .PageFormUI .ng-scope.ng-isolate-scope.meuiStackLayout.meuiStacklayoutVertical:last-child button.DoneEditingButton, body.defaultEditor .modal.EditorGallery .modal-footer button { height: 40px; width: 100%; background: #cb571d !important; z-index: 2; } body.defaultEditor .freeTargetContainer .PageFormUI .meuiStacklayoutVertical button.AddImageToField { height: 90px; } body.defaultEditor .modal.EditorGallery { overflow: hidden; z-index: 99999999999 !important; } } @media only screen and (max-width: 490px) { body.defaultEditor .megaEditMainContainer:before { display: none; } body.defaultEditor.MobileMenuActive .megaEditMainContainer:before { display: block; } body.defaultEditor.megaEditMobileMode .editorFieldOption { text-align: center; height: 0px; opacity: 0; } body.defaultEditor .pane.ui-layout-east.freeTargetContainer { top: 8%; } body.defaultEditor .megaEditMainContainer:before, body.defaultEditor .MegaEditHomeOverlay { width: 70px; height: 60px; } body.defaultEditor.MobileMenuActive .btn.backButton, body.defaultEditor.MobileMenuActive .buttonContainer.rightSide .buttonsContainer .saveProjectButton, body.defaultEditor.MobileMenuActive .TutorialButton, body.defaultEditor.MobileMenuActive .MegaEditHomeButton, body.defaultEditor.MobileMenuActive .clearPagesButton.resetPagesbtn { display: block !important; position: fixed !important; z-index: 999; top: 120px; left: 30px; width: 240px !important; margin: 0px !important; text-align: center; border: solid 1px #fff !important; text-transform: uppercase; } body.defaultEditor.MobileMenuActive .MegaEditHomeButton { margin-top: 0px !important; } body.defaultEditor.MobileMenuActive .btn.backButton { margin-top: 50px !important; } body.defaultEditor.MobileMenuActive .clearPagesButton.resetPagesbtn { margin-top: 100px !important; } /* body.defaultEditor.MobileMenuActive .TutorialButton { margin-top: 150px !important; } */ body.defaultEditor.MobileMenuActive .buttonContainer.rightSide .buttonsContainer .saveProjectButton { margin-top: 150px !important; } body.defaultEditor.MobileMenuActive:before, body.defaultEditor.MobileMenuActive .MegaEditHomeOverlay { display: block !important; } body.defaultEditor .mobile-menu-button { display: block !important; position: absolute; top: 0px; left: 0px; width: 50px; height: 50px; z-index: 9999; background: transparent; background-image: url(/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/mobile_menu_button.svg); background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 1 !important; } body.defaultEditor.MobileMenuActive .mobile-menu-button { left: 245px; z-index: 11; background-image: url(/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/5/mobile_menu_close.svg); } body.defaultEditor .mobile-menu-button:hover { opacity: 1 !important; } body.defaultEditor .viewControlButton.previewButton, body.defaultEditor .SelectDesignButton, body.defaultEditor .saveProjectButton { position: fixed; bottom: 10px; right: 34.3%; width: 31.3% !important; } body.defaultEditor .viewControlButton.previewButton { float: left; margin-top: 8px; } body.defaultEditor .memobilePageClass span { bottom: 70px; } body.defaultEditor.MobileMenuActive:after { content: ''; display: block; position: absolute; width: 300px; height: 100%; top: 0px; left: 0px; background: #000; z-index: 1; } body.defaultEditor.MobileMenuActive .TouchActionCanvasOverlay, body.defaultEditor.MobileMenuActive #parentContainer .editorMain, body.defaultEditorMobileMenuActive button.ProgressBar, body.defaultEditor.MobileMenuActive button.btn.ProgressBar, body.defaultEditor.MobileMenuActive .memobilePageClass, body.defaultEditor.MobileMenuActive .SelectDesignButton, body.defaultEditor.MobileMenuActive .CategoryConfigureButton, body.defaultEditor.MobileMenuActive .viewControlButton.previewButton, body.defaultEditor.MobileMenuActive .pane.ui-layout-east.freeTargetContainer { opacity: 0 !important; pointer-events: none !important; } body.defaultEditor .viewControlButton.previewButton .extratxt { width: 84px; } body.defaultEditor .editorMain.pane.ui-layout-center { top: 45% !important; } body.defaultEditor .pagenrbtn, body.defaultEditor .buttonContainer.rightSide .buttonsContainer .saveProjectButton { height: 40px !important; } body.defaultEditor .btn.backButton, body.defaultEditor .buttonContainer.rightSide .buttonsContainer .saveProjectButton, body.defaultEditor .TutorialButton, body.defaultEditor .MegaEditHomeButton, body.defaultEditor .clearPagesButton.resetPagesbtn { display: none !important; } } body.CardProduct.megaEditMobileMode .memobilePageClass span.icon { display: none; } .homeFeaturedProducts .listItem.grid_12, .allProductsCategoriesWrapper .listItem.grid_12 { width: 100% !important; height: auto !important; padding: 40px !important; margin-top: 100px; } .staticProduct .product-details-attribute-combination .picture .thumbs { display: none; } body.defaultEditor .customScriptUi-freeTarget span.add_image { position: absolute; width: 100px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } body.defaultEditor .customScriptUi-freeTarget span.add_image i { width: 100%; height: 50px; display: block; position: relative; } body.defaultEditor .customScriptUi-freeTarget span.add_image i:before { content: ''; position: absolute; width: 30px; height: 2px; top: 50%; left: 50%; margin-left: -15px; margin-top: -1px; background: #fff; } body.defaultEditor .customScriptUi-freeTarget span.add_image i:after { content: ''; position: absolute; width: 2px; height: 30px; top: 50%; left: 50%; margin-left: -1px; margin-top: -15px; background: #fff; } /* Script extention */ html.page-dynamicproduct-editor { overflow: hidden!important; } .PageHandlingUIContainer .AddNewPageButton { left: 50%; position: fixed; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 4; background: transparent!important; } .PageHandlingUIContainer .AddNewPageButton span { position: absolute; white-space: normal; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); background: #cb571d; width: 60px; padding: 10px; } .PageHandlingUIContainer .AddNewPageButton span i { display: inline-block; width: 30px; height: 30px; position: relative; } .PageHandlingUIContainer .AddNewPageButton span.add_card i:before { content: ''; position: absolute; width: 30px; height: 2px; top: 50%; left: 50%; margin-left: -15px; margin-top: -1px; background: #fff; } .PageHandlingUIContainer .AddNewPageButton span.add_card i:after { content: ''; position: absolute; width: 2px; height: 30px; top: 50%; left: 50%; margin-left: -1px; margin-top: -15px; background: #fff; } @media only screen and (min-height: 600px) and (min-width: 700px) { .PageHandlingUIContainer .AddNewPageButton { margin-left: 345px !important; width: calc(100% - 50% - 345px); } .PageHandlingUIContainer .AddNewPageButton span { background: transparent; width: 90px; padding: 17px; border: solid 2px #fff; } .PageHandlingUIContainer .AddNewPageButton span i { margin-bottom:10px; } } @media only screen and (min-height: 700px) and (min-width: 800px) { .PageHandlingUIContainer .AddNewPageButton { margin-left: 390px !important; width: calc(100% - 50% - 390px); } } @media only screen and (min-height: 800px) and (min-width: 900px) { .PageHandlingUIContainer .AddNewPageButton { margin-left: 480px !important; width: calc(100% - 50% - 480px); } .PageHandlingUIContainer .AddNewPageButton span { width: 114px; padding: 30px; } } @media only screen and (max-width: 490px) { .PageHandlingUIContainer .AddNewPageButton { left: auto; right: 10px; width: 60px; } .MeMobileRightPanel_scripting .PageHandlingUIContainer .AddNewPageButton { display:none!important; } } body.CardProduct .pageSelectorItem .deletePage { background-color: #CB571D!important; } body.CardProduct .pageSelectorItem:first-child .deletePage { display: none!important; } .page-dynamicproduct-editor button:focus, .page-dynamicproduct-editor button.btn:focus { outline: none!important; } body.CardProduct.megaEditMobileMode .pageSelectorItem .pageSelectorItem__info { border-radius: 10px; overflow: hidden; } #LoadingData { opacity:1; } #LoadingData .ME_loading_info { position: fixed; top: 65%; width: 80%; left: 10%; min-height: 50px; text-align: center; color: #fff; font-size: 20px; } /*Color select - Cards */ body.CardProduct .customScriptUi-freeTarget .ColourOption { position: relative; float: left; width: 50%; padding: 2%; color: #fff; text-align: center; } body.CardProduct .customScriptUi-freeTarget .ColourOption .colorSelector { width: 100%; height: 40px; background-repeat: no-repeat; border-radius: 5px; margin-top: 5px; } body.CardProduct .ui-dialog.ui-colorpicker { width: 455px!important; height: 60%!important; left: 50%!important; transform: translate(0,-50%); background: rgba(0,0,0,0.8)!important; min-height: 439px!important; } body.CardProduct .ui-dialog.ui-colorpicker .ui-dialog-titlebar { display: block; top: 0px; left: 0px; } body.CardProduct .ui-dialog.ui-colorpicker .ui-dialog-buttonpane { bottom: 10px; } body.CardProduct .ui-dialog.ui-colorpicker .ui-dialog-titlebar .ui-dialog-title { font-size: 24px!important; width: 100%; } body.CardProduct .ui-dialog.ui-colorpicker .ui-dialog-content { width: 367px!important; max-height: calc(100% - 120px) !important; } body.CardProduct .ui-dialog.ui-colorpicker .ui-dialog-content tr, body.CardProduct.megaEditMobileMode .ui-colorpicker .ui-button-rgb { display: none!important; } body.CardProduct .ui-dialog.ui-colorpicker .ui-dialog-content tr:first-child, body.CardProduct .ui-dialog.ui-colorpicker .ui-dialog-content tr:last-child{ display: block!important; width: 360px; } body.CardProduct.megaEditMobileMode .ui-colorpicker.ui-colorpicker-dialog label { color: #fff; font-size: 20px; margin-right: 10px; } body.CardProduct.megaEditMobileMode .ui-colorpicker.ui-colorpicker-dialog .ui-colorpicker-hex-input { width: 326px; background: #000; color: #fff; border: none; padding-left: 20px; font-size: 16px; } body.CardProduct.megaEditMobileMode .ui-dialog.ui-colorpicker-dialog .ui-dialog-buttonpane button { min-width: 0px; width: 36%; margin: 0px 7%; font-size: 16px; } body.CardProduct.megaEditMobileMode .ui-dialog.ui-colorpicker-dialog .ui-dialog-buttonpane button.ui-colorpicker-ok { background: #c7561e!important; border-color: #c7561e!important; } @media only screen and (max-width: 480px) { body.CardProduct.MeMobilePortrait .ui-dialog.ui-colorpicker { left: 0px!important; width: 100%!important; top: 50px!important; bottom: 5px!important; -webkit-transform: translate(0px,0px)!important; -moz-transform: translate(0px,0px)!important; -o-transform: translate(0px,0px)!important; transform: translate(0px,0px)!important; height: auto!important; } body.CardProduct .ui-dialog.ui-colorpicker .ui-colorpicker-preview, body.CardProduct .ui-dialog.ui-colorpicker .ui-colorpicker-swatches-container { display: none; } .viewControlButton.previewButton .fa { display: none; } body.CardProduct.megaEditMobileMode .viewControlButton.previewButton .extratxt { display: block; text-indent: 0px; overflow: hidden; width: 65px; margin: 0 auto !important; } body.CardProduct .ui-dialog.ui-colorpicker .ui-dialog-content { width: 290px!important; max-height: calc(100% - 120px) !important; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; } } .me-editor-pdf-download-button { display: none !important; }