html, body { height: 100%; width: 100%; } #message-back { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background: rgba(0, 0, 0, 0.5); visibility: hidden; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .loader-back.loading, .loader-back-image.loading, #message-back.loading { visibility: visible; opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .wrapper { position: fixed; background: rgba(255, 255, 255, 1); z-index: 9990; top: 0; width: 100%; height: 100%; left: 0; overflow-y: auto; padding-bottom: 70px; padding-top: 70px; /* border-radius: 10px; */ /* box-shadow: 0px 0px 20px #a2e6ff; */ /* border: 1px solid #000; */ visibility: hidden; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .image_wrapper { border: none !important; width: 100%; height: 100%; left: 0 !important; top: 0 !important; background: rgba(0, 0, 0, 0); } .image_wrapper > img { position: absolute; max-height: 100%; max-width: 100%; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); } .s_wrapper { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: rgba(255, 255, 255, 1); z-index: 9999; width: 600px; height: 400px; color: #2b2b2b; border-radius: 10px; box-shadow: 0px 0px 20px #a2e6ff; text-align: center; visibility: hidden; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .s_wrapper p { font-size: 20px; line-height: 20px; } .s_wrapper.show { top: 0; /*visibility: hidden;*/ opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #message { position: relative; top: 50%; transform: translateY(-50%); overflow-y: auto; padding: 20px; } .process_wrapper { position: fixed; width: 100vw; height: 100vh; z-index: 999999; font-size: 2.5em; line-height: 2.5em; background: rgba(0, 0, 0, 0.5); overflow: hidden; border-radius: 0; color: white; border: none !important; top: 0 !important; } #progress { display: none; } #progress.active { display: block; } .process_wrapper > div { position: relative; top: 50%; transform: translateY(-50%); } .wrapper.show { visibility: visible; opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .wrapper > .wrapper_cancel { position: absolute; right: 5px; top: 5px; font-size: 2em; border: none; background: none; color: black; z-index: 9999; } .image_wrapper > .wrapper_cancel { color: white; } .uppercase { text-transform: uppercase; } .align-left { float: left; margin: 0 25px 0 0px !important; } .align-right { float: right; margin: 0 0 0 25px !important; } .text-align-left { text-align: left; } .text-align-center { text-align: center; } .text-align-right { text-align: right; } label { display: inline-block; margin-bottom: 10px; color: #9a9a9a; font-size: 13pt; font-weight: 600; } .size_style label { color: #6a6a6a; width: 100%; text-align: left; box-sizing: border-box; padding: 0 10px; margin-bottom: 5px; font-weight: 600; } label.size_note, .sign_note { font-size: 12px; text-align: justify; font-weight: normal; line-height: 1.5; margin-bottom: 0; } .sign_note { color: #9a9a9a; display: inline-block; padding: 0; } .sign_note p { margin: 0; font-size: 12px; } .sign_note .tooltip { font-size: 14px !important; } .custom-radio label { font-size: 11pt; line-height: 1; margin-bottom: 0; } .custom-control.custom-radio { text-align: left; } .plug_style label, .board_style label { color: #6a6a6a; font-size: 13pt; margin-bottom: 0; display: block; text-align: left; padding-left: 10px; } .plug_style label { padding: 0; } .form-control { margin-bottom: 20px; } .form-group { margin: 0; display: inline-block; width: 100%; } textarea.form-control { border-radius: 2px; resize: none; height: 90px; border: 1px solid #f3f3f3; } ::-webkit-input-placeholder { /* Edge */ color: #aeaeae; } body { background-color: #fff; color: #2b2b2b; font-size: 15px; font-weight: 400; font-family: "Poppins", sans-serif; line-height: 1.5em; overflow-x: hidden; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; } html { width: 100%; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } div.design-container a { color: #000; text-decoration: none; cursor: pointer; } div.design-container .row { margin-right: 0; margin-left: 0; } div.design-container * { -webkit-box-sizing: border-box; -moz-box-sizing: border-boxf; box-sizing: border-box; outline: none; } div.design-container ol, div.design-container ul { list-style: none; } .align_wrap { padding: 0; display: flex; justify-content: space-between; width: 20%; height: 135px; flex-direction: column; margin-left: 5px; border-radius: 8px; align-items: center; } .align_icon { display: inline-block; width: 100%; height: 42px; cursor: pointer; background-position: center; border-radius: 8px; border: 1px solid #d4d4d4; background-color: #f4f4f4; } .align_icon svg { height: 100%; } .align_icon.active { background-color: #ff7ac7; color: #fff; } .align_icon.active path { stroke: #fff; } @font-face { font-family: "Alexa"; src: url("fonts/custom/Alexa.ttf") format("truetype"); } @font-face { font-family: "Amanda"; src: url("fonts/custom/Amanda.ttf") format("truetype"); } @font-face { font-family: "Amsterdam"; src: url("fonts/custom/Amsterdam.ttf") format("truetype"); } @font-face { font-family: "Austin"; src: url("fonts/custom/Austin.ttf") format("truetype"); } @font-face { font-family: "Avante"; src: url("fonts/custom/Avante.ttf") format("truetype"); } @font-face { font-family: "Barcelona"; src: url("fonts/custom/Barcelona.ttf") format("truetype"); } @font-face { font-family: "Bayview"; src: url("fonts/custom/Bayview.ttf") format("truetype"); } @font-face { font-family: "Beachfront"; src: url("fonts/custom/Beachfront.ttf") format("truetype"); } @font-face { font-family: "Bellview"; src: url("fonts/custom/Bellview.ttf") format("truetype"); } @font-face { font-family: "Buttercup"; src: url("fonts/custom/Buttercup.ttf") format("truetype"); } @font-face { font-family: "Chelsea"; src: url("fonts/custom/Chelsea.ttf") format("truetype"); } @font-face { font-family: "ClassicType"; src: url("fonts/custom/ClassicType.ttf") format("truetype"); } @font-face { font-family: "Freehand"; src: url("fonts/custom/Freehand.ttf") format("truetype"); } @font-face { font-family: "Freespirit"; src: url("fonts/custom/Freespirit.ttf") format("truetype"); } @font-face { font-family: "Greenworld"; src: url("fonts/custom/Greenworld.ttf") format("truetype"); } @font-face { font-family: "LoveNeon"; src: url("fonts/custom/LoveNeon.ttf") format("truetype"); } @font-face { font-family: "LoveNote"; src: url("fonts/custom/LoveNote.ttf") format("truetype"); } @font-face { font-family: "Marquee"; src: url("fonts/custom/Marquee.ttf") format("truetype"); } @font-face { font-family: "Mayfair"; src: url("fonts/custom/Mayfair.ttf") format("truetype"); } @font-face { font-family: "Melbourne"; src: url("fonts/custom/Melbourne.ttf") format("truetype"); } @font-face { font-family: "Monaco"; src: url("fonts/custom/Monaco.ttf") format("truetype"); } @font-face { font-family: "NeonGlow"; src: url("fonts/custom/NeonGlow.ttf") format("truetype"); } @font-face { font-family: "NeonLite"; src: url("fonts/custom/NeonLite.ttf") format("truetype"); } @font-face { font-family: "Neonscript"; src: url("fonts/custom/Neonscript.ttf") format("truetype"); } @font-face { font-family: "Neontrace"; src: url("fonts/custom/Neontrace.ttf") format("truetype"); } @font-face { font-family: "NeoTokyo"; src: url("fonts/custom/NeoTokyo.ttf") format("truetype"); } @font-face { font-family: "Nevada"; src: url("fonts/custom/Nevada.ttf") format("truetype"); } @font-face { font-family: "NewCursive"; src: url("fonts/custom/NewCursive.ttf") format("truetype"); } @font-face { font-family: "Northshore"; src: url("fonts/custom/Northshore.ttf") format("truetype"); } @font-face { font-family: "Photogenic"; src: url("fonts/custom/Photogenic.ttf") format("truetype"); } @font-face { font-family: "Rocket"; src: url("fonts/custom/Rocket.ttf") format("truetype"); } @font-face { font-family: "Royalty"; src: url("fonts/custom/Royalty.ttf") format("truetype"); } @font-face { font-family: "SciFi"; src: url("fonts/custom/SciFi.ttf") format("truetype"); } @font-face { font-family: "Signature"; src: url("fonts/custom/Signature.ttf") format("truetype"); } @font-face { font-family: "Sorrento"; src: url("fonts/custom/Sorrento.ttf") format("truetype"); } @font-face { font-family: "Typewriter"; src: url("fonts/custom/Typewriter.ttf") format("truetype"); } @font-face { font-family: "Venetian"; src: url("fonts/custom/Venetian.ttf") format("truetype"); } @font-face { font-family: "Vintage"; src: url("fonts/custom/Vintage.ttf") format("truetype"); } @font-face { font-family: "Waikiki"; src: url("fonts/custom/Waikiki.ttf") format("truetype"); } @font-face { font-family: "WildScript"; src: url("fonts/custom/WildScript.ttf") format("truetype"); } @font-face { font-family: "Florence"; src: url("fonts/custom/Florence.ttf") format("truetype"); } @font-face { font-family: "LazySunday"; src: url("fonts/custom/LazySunday.ttf?v=3") format("truetype"); } @font-face { font-family: "LosAngeles"; src: url("fonts/custom/LosAngeles.ttf?v=3") format("truetype"); } @font-face { font-family: "Manchester"; src: url("fonts/custom/Manchester.ttf") format("truetype"); } @font-face { font-family: "Majorca"; src: url("fonts/custom/Majorca.ttf") format("truetype"); } @font-face { font-family: "Manhattan"; src: url("fonts/custom/Manhattan.ttf") format("truetype"); } @font-face { font-family: "Milan"; src: url("fonts/custom/Milan.ttf") format("truetype"); } @font-face { font-family: "NottingHill"; src: url("fonts/custom/NottingHill.ttf") format("truetype"); } @font-face { font-family: "Olivia"; src: url("fonts/custom/Olivia.ttf?v=2") format("truetype"); } @font-face { font-family: "Rockstar"; src: url("fonts/custom/Rockstar.ttf") format("truetype"); } @font-face { font-family: "SanDiego"; src: url("fonts/custom/SanDiego.ttf") format("truetype"); } @font-face { font-family: "Simplicity"; src: url("fonts/custom/Simplicity.ttf?v=1") format("truetype"); } @font-face { font-family: "Submarine"; src: url("fonts/custom/Submarine.ttf") format("truetype"); } @font-face { font-family: "Vancouver"; src: url("fonts/custom/Vancouver.ttf") format("truetype"); } @font-face { font-family: "Weekender"; src: url("fonts/custom/Weekender.ttf") format("truetype"); } @font-face { font-family: "Westcoast"; src: url("fonts/custom/Westcoast.ttf") format("truetype"); } .demo_on_off { cursor: pointer; position: absolute; top: 10px; left: 10px; width: 96px; height: 50px; } .font_style li { background: transparent; color: black; height: 2rem; font-size: 1rem; line-height: 2rem; vertical-align: middle; text-align: center; cursor: pointer; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* For XXS screen .font_style li.active { text-shadow: rgb(255, 255, 255) 0px 0px 2px, rgb(255, 255, 255) 0px 0px 4px, #a2e6ff 0px 0px 8px, #a2e6ff 0px 0px 6px, #a2e6ff 0px 0px 8px, #a2e6ff 0px 0px 22px, #a2e6ff 0px 0px 30px, #a2e6ff 0px 0px 50px, #a2e6ff 0px 0px 100px; } */ .custom_tab > li.active > a { background: none; border: none; border-bottom: 2px solid #ff7ac7; } .size-box { width: calc(50% - 10px); float: left; border: 1px solid #d4d4d4; border-radius: 0; text-align: left; padding: 0; cursor: pointer; font-size: 0.75rem; line-height: 1.5rem; margin: 5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .size-box.disabled { pointer-events: none !important; } .board-sub { overflow: hidden; } .board-sub > image { width: 100%; } .size-box .s_price { text-align: left; padding: 0; } .size-box .s_price div:nth-child(2) { padding-left: 5px; background: #fff; } .size-box .s_price.noprice div:nth-child(2) { padding: 0 5px; font-size: 0.72rem; } div.board-box-container { margin: 0 -5px; } a.board-box, a.non-latin-board-box { border: 1px solid #d4d4d4; padding: 5px; border-radius: 8px; display: block; width: calc(33.3% - 8px); float: left; margin: 4px; background-color: #f4f4f4; } .board-box.active, .non-latin-board-box.active { background-color: #fff !important; border-color: #ff7ac7; } div.board-box-type { float: left; font-size: 10px; } div.board-box-price { font-size: 13px; font-weight: 600; text-align: right; } .backboard-img { width: 100%; height: auto; margin: 5px 0 0; } .demo_text { background-color: #c0b8b4; z-index: 2; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; /* border: 1px solid white; */ } .demo_text .text_show { font-size: 7rem; position: absolute; box-sizing: content-box; width: auto; line-height: 7rem; text-align: center; color: white; cursor: pointer; z-index: 2; -webkit-transition: text-shadow 0.5s ease; -moz-transition: text-shadow 0.5s ease; -ms-transition: text-shadow 0.5s ease; -o-transition: text-shadow 0.5s ease; transition: text-shadow 0.5s ease; } #text { padding: 0.5em; font-size: 3.3rem; line-height: normal; overflow: hidden; } .font_style li { background: transparent; color: black; height: 2rem; font-size: 1rem; line-height: 2rem; vertical-align: middle; text-align: center; cursor: pointer; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; padding: 0; } .font_style li.active { text-shadow: rgb(255, 255, 255) 0px 0px 2px, rgb(255, 255, 255) 0px 0px 4px, #a2e6ff 0px 0px 8px, #a2e6ff 0px 0px 6px, #a2e6ff 0px 0px 8px, #a2e6ff 0px 0px 22px, #a2e6ff 0px 0px 30px; } #color_table { margin: 5px 0 0; padding: 0; } #color_table li { height: 70px; cursor: pointer; padding: 0; } #color_table li > p { width: 35px; height: 35px; text-align: center; font-size: 2rem; line-height: 4rem; margin: 0 auto; padding: 0; border-radius: 50%; } #color_table li > .color_name { width: 100%; height: auto; text-align: center; line-height: 0.7rem !important; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; padding: 0; margin-top: 10px; color: #2f2f2f99; } .size-box { width: calc(50% - 10px); float: left; text-align: left; cursor: pointer; line-height: 1.5rem; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .size-box .s_size { padding: 0; } .size-box .s_size { padding: 0; } .size-box .s_price { text-align: right; padding: 0; } .size-box.active, .size-box:hover { box-shadow: 0px 0px 0 3px #ff7ac7; border-color: transparent; border-radius: 0; } .total_sel_price { font-size: 22pt; margin-left: 3px; } .plug_style .dropdown { display: inline-block; } .plug_style .btn-default { width: 100%; padding: 2px 2px 2px 10px; } .plug_style i { float: right; border: 1px solid #f3f3f3; padding: 0 5px; font-size: 1.2rem; } .plug_style h4 { display: inline-block; font-size: 11pt; float: left; margin: 0; } .DskOnly { display: block; } .MobOnly { display: none; } @media handheld, screen and (min-width: 300px) and (max-width: 350px) { .DskOnly { display: none; } .MobOnly { display: block; } .topim { text-align: center; } .topim img { margin: 0 auto; } .WordSection1 h2.tpH { text-align: center; font-size: 30px; } } @media handheld, screen and (min-width: 350px) and (max-width: 768px) { .DskOnly { display: none; } .MobOnly { display: block; } .topim { text-align: center; padding: 0 10px; box-sizing: border-box; } .topim img { margin: 0 auto; } .WordSection1 h2.tpH { text-align: center; font-size: 30px; } } @media all and (max-width: 30em) { button.addtocart { display: block; margin: 0.4em auto; } } .make_style_form { height: 100%; width: auto; padding: 0; } .make_style_form .bord_color .bord_img { display: inline-flex; } .make_style_form .bord_color .bord_img .board-name { display: none; color: #ff7ac7; font-weight: 600; } .make_style_form .bord_color .bord_img img { border-color: transparent; border-radius: 9px; border: 2px solid #616161; margin-left: 12px; cursor: pointer; margin-right: 12px; transition: all 0.5s ease; } .make_style_form .bord_color .bord_img img.active { border: 2px solid #ff7ac7; } .make_style_form .bord_color .bord_img img:hover { border: 2px solid #ff7ac7; } .make_style_form .bord_color .bord_txt { margin-top: 10px; text-align: left; margin-left: 10px; } .make_style_form .bord_color .bord_txt span { color: #333333; font-weight: 600; font-size: 14px; } @media only screen and (max-width: 1200px) { .make_style_form .bord_color .bord_img img { margin: 0 12px; height: 36px; } } @media only screen and (max-width: 767px) { .make_style_form .bord_color .bord_img img { margin: 0 10px; height: 36px; } } /* dd board prices 23-04-21 end*/ .size-notice label, .size-notice-lenght label, .size-notice-height label { text-align: center; margin: 8px 15px 8px 15px; color: white; font-size: 14px; font-weight: 400; } .size-notice, .size-notice-lenght, .size-notice-height { background-color: #ff7ac7; margin: 10px 0; clear: both; } .color_desc { display: inline-block; margin-top: 10px; font-size: 13px; width: 100%; } .color_desc span.cdesc { display: inline-block; width: 100%; } .color_desc span.cimg { display: inline-block; width: 100%; max-width: 335px; align: center; repeat: none; height: 150px; margin-top: 10px; } .color_desc span.cmore { display: inline-block; width: 100%; text-align: center; } .color_desc span.cmore > a { color: #337ab7; } #color_table li > .color_name { font-size: 10px !important; } #size_table .size-box .s_size, #size_table .size-box .s_size2 { padding: 0; } .s_size2, .s_size, .non_latin_s_size, .non_latin_s_size2 { color: #696969; font-size: 12px !important; width: 100%; display: inline-block; box-sizing: border-box; padding-right: 3px; font-weight: 400 !important; } .size-box .size-name, .size-box .no-price-size-name { font-weight: 600; font-size: 12px; } .s_size2 div:nth-child(2), .s_size div:nth-child(2) { background: #fff; } #quoteform { display: none; width: 70%; float: left; margin: 10px 30px; text-align: left; } #quoteform label { text-align: left; float: left; } .demo_text { display: flex; justify-content: center; align-items: center; position: relative; } #size_table { margin: 0 -5px; } /* The container */ .custom-checkbox .custom-control-label { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: left; font-weight: 400; color: #000; } /* Hide the browser's default checkbox */ .custom-checkbox .custom-control-label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .custom-control.custom-option { text-align: left; font-family: "Brandon_light", sans-serif; } .custom-control.custom-option .col-xs-6, .custom-control.custom-option .col-xs-5, .custom-control.custom-option .col-xs-7 { padding: 0; margin-top: 10px; } .custom-control.custom-option label { float: left; color: #00c4c8; font-size: 20px; } .custom-control.custom-option small { float: right; width: 52%; font-weight: bold; font-size: 14px; } .custom-control.custom-option .col-xs-7 small { width: 65%; } .custom-control.custom-option span { font-weight: bold; } .custom-control.custom-option .info-light { display: none; border-radius: 5px; background-color: #dcfcfd; color: #00c4c8; padding: 5px 15px; margin-top: 5px; } .custom-control.custom-option .info-light.active { display: block; } .custom-control.custom-radio { margin-bottom: 5px; } /* Create a custom checkbox */ .custom-checkbox .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; border-radius: 15px; background-color: #fff; border: 2px solid gray; } .custom-radio label { border: 2px solid #e9e9e9; border-radius: 15px; width: 100%; text-align: center; padding: 10px; color: #000; font-size: 16px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; cursor: pointer; height: 75px; display: flex; align-items: center; flex-direction: column; justify-content: center; font-weight: 500; } .custom-radio.selected label, .custom-radio:hover label { box-shadow: unset; border-color: transparent; border-radius: 15px; border: 1px solid #ff7ac7; background: #fff; } .custom-radio input { position: absolute; opacity: 0; } span.radio_span { display: inline-block; margin: 10px 0 0; font-size: 16px; color: #5761fe; } span.radio_span span#waterProofPrice { font-size: 16px; color: #5761fe; } /* On mouse-over, add a grey background color */ .custom-checkbox .custom-control-label:hover input ~ .checkmark { background-color: #fff; border: 2px solid gray; } /* When the checkbox is checked, add a blue background */ .custom-checkbox .custom-control-label input:checked ~ .checkmark { background-color: #ff7ac7; border-color: #ff7ac7; } .custom-checkbox .custom-control-label input[type="checkbox"]:checked + label { background-color: #ff7ac7; } /* Create the checkmark/indicator (hidden when not checked) */ .custom-checkbox .custom-control-label:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .custom-checkbox .custom-control-label input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .custom-checkbox .custom-control-label .checkmark:after { left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); content: ""; position: absolute; } .color_desc { width: 100%; color: #000; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px 0 0; } .cdesc { padding: 0px 5px 0px 5px; } .demo_on_off.offswitch { background-image: url("data:image/svg+xml; charset=utf8, %3Csvg%20width%3D%2272%22%20height%3D%2229%22%20viewBox%3D%220%200%2072%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M2%202h33v26H2z%22%2F%3E%3Cpath%20d%3D%22M13.562%2020.098a5.064%205.064%200%200%201-2.52-.644%204.823%204.823%200%200%201-1.82-1.778c-.448-.765-.672-1.629-.672-2.59%200-.952.224-1.806.672-2.562a4.793%204.793%200%200%201%201.82-1.792%205.064%205.064%200%200%201%202.52-.644c.924%200%201.764.215%202.52.644a4.691%204.691%200%200%201%201.806%201.792c.448.756.672%201.61.672%202.562%200%20.961-.224%201.825-.672%202.59a4.72%204.72%200%200%201-1.806%201.778%205.063%205.063%200%200%201-2.52.644Zm0-1.75c.588%200%201.106-.13%201.554-.392.448-.27.798-.653%201.05-1.148.252-.495.378-1.069.378-1.722s-.126-1.223-.378-1.708a2.689%202.689%200%200%200-1.05-1.134c-.448-.261-.966-.392-1.554-.392-.588%200-1.11.13-1.568.392-.448.261-.798.64-1.05%201.134-.252.485-.378%201.055-.378%201.708s.126%201.227.378%201.722c.252.495.602.877%201.05%201.148.458.261.98.392%201.568.392ZM27.97%2020h-1.96l-4.438-6.706V20h-1.96v-9.786h1.96l4.438%206.72v-6.72h1.96V20Z%22%20fill%3D%22%2376E51F%22%2F%3E%3Cpath%20fill%3D%22%2357585C%22%20d%3D%22M35%202h35v26H35z%22%2F%3E%3Cpath%20d%3D%22M45.49%2020.098a5.063%205.063%200%200%201-2.52-.644%204.823%204.823%200%200%201-1.82-1.778c-.448-.765-.672-1.629-.672-2.59%200-.952.224-1.806.672-2.562a4.792%204.792%200%200%201%201.82-1.792%205.063%205.063%200%200%201%202.52-.644c.924%200%201.764.215%202.52.644a4.693%204.693%200%200%201%201.806%201.792c.448.756.672%201.61.672%202.562%200%20.961-.224%201.825-.672%202.59a4.721%204.721%200%200%201-1.806%201.778%205.064%205.064%200%200%201-2.52.644Zm0-1.75c.588%200%201.106-.13%201.554-.392.448-.27.798-.653%201.05-1.148.252-.495.378-1.069.378-1.722s-.126-1.223-.378-1.708a2.689%202.689%200%200%200-1.05-1.134c-.448-.261-.966-.392-1.554-.392-.588%200-1.11.13-1.568.392-.448.261-.798.64-1.05%201.134-.252.485-.378%201.055-.378%201.708s.126%201.227.378%201.722c.252.495.602.877%201.05%201.148.457.261.98.392%201.568.392Zm12.082-8.12v1.582h-4.074v2.506h3.122v1.554h-3.122V20h-1.96v-9.772h6.034Zm7.016%200v1.582h-4.074v2.506h3.122v1.554h-3.122V20h-1.96v-9.772h6.034Z%22%20fill%3D%22%239E9FA1%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2270%22%20height%3D%2227%22%20rx%3D%2211%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2268%22%20height%3D%2225%22%20rx%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); height: 34px; background-size: contain; background-repeat: no-repeat; width: 74px; } .demo_on_off.onswitch { background-image: url("data:image/svg+xml; charset=utf8, %3Csvg%20width%3D%2272%22%20height%3D%2229%22%20viewBox%3D%220%200%2072%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20fill%3D%22%2357585C%22%20d%3D%22M2%202h33v26H2z%22%2F%3E%3Cpath%20d%3D%22M13.562%2020.098a5.064%205.064%200%200%201-2.52-.644%204.823%204.823%200%200%201-1.82-1.778c-.448-.765-.672-1.629-.672-2.59%200-.952.224-1.806.672-2.562a4.793%204.793%200%200%201%201.82-1.792%205.064%205.064%200%200%201%202.52-.644c.924%200%201.764.215%202.52.644a4.691%204.691%200%200%201%201.806%201.792c.448.756.672%201.61.672%202.562%200%20.961-.224%201.825-.672%202.59a4.72%204.72%200%200%201-1.806%201.778%205.063%205.063%200%200%201-2.52.644Zm0-1.75c.588%200%201.106-.13%201.554-.392.448-.27.798-.653%201.05-1.148.252-.495.378-1.069.378-1.722s-.126-1.223-.378-1.708a2.689%202.689%200%200%200-1.05-1.134c-.448-.261-.966-.392-1.554-.392-.588%200-1.11.13-1.568.392-.448.261-.798.64-1.05%201.134-.252.485-.378%201.055-.378%201.708s.126%201.227.378%201.722c.252.495.602.877%201.05%201.148.458.261.98.392%201.568.392ZM27.97%2020h-1.96l-4.438-6.706V20h-1.96v-9.786h1.96l4.438%206.72v-6.72h1.96V20Z%22%20fill%3D%22%239E9FA1%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M35%202h35v26H35z%22%2F%3E%3Cpath%20d%3D%22M45.49%2020.098a5.063%205.063%200%200%201-2.52-.644%204.823%204.823%200%200%201-1.82-1.778c-.448-.765-.672-1.629-.672-2.59%200-.952.224-1.806.672-2.562a4.792%204.792%200%200%201%201.82-1.792%205.063%205.063%200%200%201%202.52-.644c.924%200%201.764.215%202.52.644a4.693%204.693%200%200%201%201.806%201.792c.448.756.672%201.61.672%202.562%200%20.961-.224%201.825-.672%202.59a4.721%204.721%200%200%201-1.806%201.778%205.064%205.064%200%200%201-2.52.644Zm0-1.75c.588%200%201.106-.13%201.554-.392.448-.27.798-.653%201.05-1.148.252-.495.378-1.069.378-1.722s-.126-1.223-.378-1.708a2.689%202.689%200%200%200-1.05-1.134c-.448-.261-.966-.392-1.554-.392-.588%200-1.11.13-1.568.392-.448.261-.798.64-1.05%201.134-.252.485-.378%201.055-.378%201.708s.126%201.227.378%201.722c.252.495.602.877%201.05%201.148.457.261.98.392%201.568.392Zm12.082-8.12v1.582h-4.074v2.506h3.122v1.554h-3.122V20h-1.96v-9.772h6.034Zm7.016%200v1.582h-4.074v2.506h3.122v1.554h-3.122V20h-1.96v-9.772h6.034Z%22%20fill%3D%22%2376E51F%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2270%22%20height%3D%2227%22%20rx%3D%2211%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2268%22%20height%3D%2225%22%20rx%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); height: 34px; background-size: contain; background-repeat: no-repeat; width: 74px; } .demo_on_off { top: 15px; left: 15px; } div.rgb_switch_container { position: absolute; top: 15px; left: 15px; text-align: left; color: #fff; } .rgb_switch { background: url(../images/misc/RGB.png) no-repeat; height: 34px; background-size: auto 100%; width: 74px; display: inline-block; } .make_style_form div.size-box { margin: 5px; padding: 5px; background: #f5f5f5; border-radius: 15px; font-size: 1.1rem !important; } .make_style_form div.size-box strong, .make_style_form div.size-box .s_size2 div { font-size: 12px; font-weight: 600; } #input_text::-webkit-input-placeholder { text-align: center; padding-top: 1%; } textarea[data-placeholder].active { color: #8a8a8a !important; } .option-label { font-weight: 600; } .make_style_form div.size-box.active, .make_style_form div.size-box:hover { box-shadow: unset; border-color: transparent; border-radius: 15px; border: 1px solid #ff7ac7; background: #fff; } .make_style_form .size-box .s_price div:nth-child(2), .make_style_form .s_size2 div:nth-child(2), .make_style_form .s_size div:nth-child(2) { /*background: #e7e6e6;*/ background: #f5f5f5; } .make_style_form div.size-box.active .s_price div:nth-child(2), .make_style_form div.size-box.active .s_size2 div:nth-child(2), .make_style_form div.size-box.active .s_size div:nth-child(2), .make_style_form div.size-box:hover .s_price div:nth-child(2), .make_style_form div.size-box:hover .s_size2 div:nth-child(2), .make_style_form div.size-box:hover .s_size div:nth-child(2), .make_style_form div.size-box.active strong, .make_style_form div.size-box.active .s_size2 div, .make_style_form div.size-box.active .s_size div, .make_style_form div.size-box:hover strong, .make_style_form div.size-box:hover .s_size2 div, .make_style_form div.size-box:hover .s_size div { background: #fff; } .make_style_form .size-box .s_price { color: #000; font-size: 18px; padding-left: 0px; font-weight: 600; } .total-section { background: #f5f5f5; padding: 8px 10px 4px; font-size: 14px; border-radius: 8px; text-align: left; margin-bottom: 8px; } .total_sel_price { float: right; } button.addtocart, button.free-quote-button { border: none !important; font-weight: 600; display: inline-block; padding: 4px 0; text-decoration: none; font-size: 120%; color: #fff; text-align: center; transition: all 0.5s; background-color: #5761ff; width: 100%; letter-spacing: 1px; } button.addtocart, button.free-quote-button { padding: 13px 0; border-radius: 8px; } button.addtocart:hover, button.free-quote-button:hover { color: #fff; background-color: #37b778; } @media all and (max-width: 30em) { button.addtocart, button.free-quote-button { display: block; margin: 0.4em auto; } } .get-quote-btn { color: #5d5d5d !important; font-weight: bolder; text-transform: uppercase; } button.click-save-button { padding: 10px 40px; border-radius: 10px; font-size: 16px; display: inline-block; border: none; text-decoration: none; font-weight: 300; text-align: center; transition: all 0.5s; width: 100%; background: #5761ff; color: #fff; font-weight: 600; } button.click-save-button:hover { color: #fff; background-color: #ff7ac7; } .save-design { margin-right: 0; margin-top: 15px; font-size: 18px; font-weight: 600; line-height: 24px; cursor: pointer; background-color: #f4f4f4; border-radius: 15px; padding: 15px; } .save-design img { margin-right: 10px; } .save-design-wrapper { font-size: 12px; } .save-design-wrapper .dd-tooltip { position: relative; display: inline-block; } .save-design-wrapper .dd-tooltip .tooltiptext { visibility: hidden; width: 140px; background-color: #555; color: #fff; font-size: 12px; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; } .save-design-wrapper .dd-tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .save-design-wrapper .dd-tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } /* 1-10-20 */ strong, .strong { background: #f5f5f5; text-transform: capitalize; padding-left: 0px; } .plug_style label { font-size: 16px; color: #6a6a6a; font-weight: 600; } .plug_style h4 { color: #333333e8; letter-spacing: normal; } .demo_text { background-size: cover; background-position: center bottom; background-repeat: no-repeat; height: 100%; } .form-group.plug_style .btn-default { border: 0; background: #f5f5f5; } .form-group.plug_style i { border: 0; } @media screen and (max-width: 899px) { body { max-width: 100% !important; overflow-x: hidden !important; } .custom { max-width: 100% !important; overflow-x: hidden !important; } #merchantwidget-iframe-wrapper{ display:none; } } @media screen and (max-width: 767px) { body { max-width: 100% !important; overflow-x: hidden !important; } .custom { max-width: 100% !important; overflow-x: hidden !important; } .col-xs-12.top-logo { float: none; } .color_desc { background-color: #fff !important; } } @media handheld, screen and (min-width: 768px) and (max-width: 899px) { .col-xs-12.top-logo { float: none; } } @media screen and (max-width: 767px) { .page-footer-logo img { max-width: 300px; } } .two_btn .col-md-6 a, .quote_form_two_btn .col-md-6 a { color: #2b2b2b; } /*tabnewend*/ #quoteform { width: 100%; } .two_btn, .quote_form_two_btn { margin-bottom: 0; padding: 30px 16px 30px; } .two_btn .btn, .quote_form_two_btn .btn { display: inline-block; text-decoration: none; text-align: center; transition: all 0.5s; background-color: #f4f4f4; width: 100%; letter-spacing: 0; margin: 0 auto 20px; padding: 15px; border-radius: 15px; font-size: 16px; font-weight: 600; outline: none !important; text-transform: none; } #quoteform { margin: 0; padding: 10px 30px; } #quoteform .for_more { font-size: 20px; text-transform: uppercase; } #heading-section h3.rush-order { letter-spacing: 3px; } #color_table li.col-xs-2.rush-order { width: 16% !important; } a.rush-order { color: #fff; } a.standard-order { color: #fff; } div.editor-standard-price { display: flex; align-items: center; } .rush-order-info { /* changed */ color: #000; font-weight: 400; font-size: 12px; line-height: 14px; } div.editor-standard-price div.total_sel_price { font-size: 20px; line-height: 22px; width: 50%; text-align: right; font-weight: 500; } .size-notice, .size-notice-lenght, .size-notice-height { border-radius: 10px; } div.sign-containment { position: absolute; top: 0; left: 0; } div.sign-container { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } /* For dimension calculation */ div.size-indicator { position: absolute; text-align: center; display: flex; align-items: center; justify-content: center; color: rgb(191 190 190); font-size: 0.85rem; } div.right-handle { left: 0; top: 0; bottom: 0; flex-direction: column; } div.indicator-container { position: relative; height: 100%; width: 100%; } div.right-handle div.indicator-container { width: 8px; } .indicator-container span { background-color: rgb(255 255 255); position: absolute; } div.indicator-container span.first { height: 100%; top: 0; bottom: 0; left: calc(50%); /* left: calc(50% - 1px); if 2px wide */ width: 1px; } .indicator-container span.second { width: 100%; height: 1px; left: 0; right: 0; top: 0; } .indicator-container.bottom span.second { top: unset; bottom: 0; } div.bottom-handle { left: 0; right: 0; bottom: 0; } div.bottom-handle .indicator-container { height: 8px; } div.bottom-handle .indicator-container span.first { left: 0; top: 0; bottom: 0; width: 1px; } div.bottom-handle .indicator-container span.second { top: calc(50%); /* top: calc(50% - 1px); if 2px wide */ } div.indicator-container.right span.first { left: unset; right: 0; } div.calculated-width { margin: 0 4px; white-space: nowrap; color: #ffffff; text-shadow: 1px 1px 3px #343434; } div.calculated-height { text-shadow: 1px 1px 3px #343434; color: #ffffff; } div.demo_text_clone { position: relative; display: flex; justify-content: center; align-items: center; } div.demo_text_clone .text_show { position: absolute; color: white; text-align: center; } div.demo_text_clone div.text_show { text-shadow: none !important; } .message-pop { min-height: 170px; } .message-pop div { float: left; margin: 0 15px; width: 27%; } .message-pop div { font-weight: 400; font-size: 16px; } .message-pop div a { color: #5761ff; } .message-pop div strong { color: #ff7ac7; font-weight: 400; font-size: 16px; background-color: #fff; margin-bottom: 15px; display: inline-block; } .message_wrapper button { background-color: #5761ff; font-size: 16px; padding: 5px 45px; } div.small-ip67-warning { margin-top: 2px; font-size: 6px; line-height: 1.2; } a.see-photos { color: #5761fe !important; font-size: 11px; } div.color-examples { min-width: 116px; width: 33.32%; } div.color-examples a { color: #5761fe; font-size: 16px; line-height: 22px; font-weight: 600; } div.back-board-colors-container, div.non-latin-back-board-colors-container { text-align: left; } div.back-board-colors, div.non-latin-back-board-colors { margin: 0 -5px; clear: both; } div.back-board-color, div.non-latin-back-board-color { display: flex; margin: 5px; border-radius: 8px; width: calc(50% - 10px); border: 1px solid #d4d4d4; float: left; background-color: #f4f4f4; padding: 8px; cursor: pointer; justify-content: space-between; } div.back-board-color.active, div.non-latin-back-board-color.active { background-color: #fff; border-color: #ff7ac7; } div.back-board-color-img img { border-radius: 50%; min-width: 32px; width: 32px; height: 32px; border: 1px solid #979797; } div.back-board-color-text { font-size: 10px; line-height: 15px; } div.back-board-color-price { font-size: 16px; line-height: 22px; font-weight: 600; } div.back-board-text-container, div.non-latin-back-board-text-container { clear: both; } div.back-board-text-container a.see-photos, div.non-latin-back-board-text-container a.see-photos { text-transform: uppercase; color: #5761fe !important; font-size: 16px; line-height: 22px; font-weight: 600; } label.wall-mount-label { display: inline-block !important; } div.wall-mount-kit-dropdown { display: inline-block; margin-left: 2px; } div.wall-mount-kit-dropdown div.dropdown-toggle { width: 100%; background: #f5f5f5; } .wall-mount-label .see-photos { color: #ff7ac7; } #wall_mount_kit_value, #might_like_wall_mount_kit_value { display: inline-block; margin: 0; text-transform: capitalize; width: 75px; text-align: left; font-weight: 500; font-size: 12px; top: -2px; position: relative; } div.wall-mount-kit-dropdown i { font-size: 1.2rem; } #save-design-url, #save-design-url-mob { background: #f5f5f5; padding: 15px; font-size: 12px; border-radius: 15px; text-align: left; word-break: break-all; margin: 0 0 20px 0; } ul.font-image-container { padding: 0; margin: 0 -3px; } ul.font-image-container li { height: auto; padding: 3px 3px; margin: 0; overflow-x: hidden; } ul.font-image-container li span { padding: 10px 2px; border: 1px solid #e9e9e9; border-radius: 6px; display: inline-block; width: 100%; position: relative; } ul.font-image-container li span:hover { background-color: #f4f4f4; border-color: #f4f4f4; } ul.font-image-container li.active span { background-color: #5761ff; border-color: #5761ff; } ul.font-image-container li.active span img { filter: invert(1) !important; } ul.font-image-container .custom-font { width: 100%; max-width: 87px; max-height: 29px; } ul.font-image-container .custom-font-new-tag{ background-color: #5761fe; color: white; width: 24px; height: 12px; font-size: 8px; position: absolute; top: 5px; right: 5px; border-radius: 4px; line-height: normal; } .text-highlight { color: #ff82cb !important; } div.non-latin-indoor-outdoor-container .custom-control-label { line-height: 1.5; } div.non-latin-backboard-type-header { padding: 0 10px 0; } div.non-latin-text-header { font-weight: 600; font-size: 13px; color: #6a6a6a; text-align: left; } div.non-latin-text-header .see-photos { font-weight: 500; } div.non-latin-price-quote-header { font-weight: 600; font-size: 17px; padding: 10px 0 5px; color: #828282; text-align: left; } div.non-latin-price-quote-body { color: #696969; font-size: 12px; line-height: 1.5; } div.free-quote-button-container { position: sticky; bottom: 0; padding-bottom: 5px; background: #fff; border-radius: 6px; } div.non-latin-back-board-colors-container { margin-bottom: 20px; } div.non-latin-indoor-outdoor-container { margin: 10px 0 5px !important; } form.non-latin-form { margin: 15px 0; } form.non-latin-form label { font-size: 13px; text-align: left !important; padding: 0 10px; color: #696969; } form.non-latin-form .non-latin-form-text { font-size: 12px; text-align: left; padding: 0 10px; color: #696969; line-height: 1.3; } form.non-latin-form div.input-field { padding: 0 10px; } form.non-latin-form .form-control { margin-bottom: 0px; } form.non-latin-form .non-latin-range-slider { margin: 10px 0 0; } form.non-latin-form .non-latin-slider-values { /* display: flex; justify-content: space-between; */ position: relative; height: 30px; padding: 0; margin: 0 10px; width: calc(100% - 20px); } form.non-latin-form .non-latin-slider-values .non-latin-slider-value { font-size: 12px; color: #696969; margin-bottom: 10px; position: absolute; } span.step-number { background-color: #5761fe; color: #fff; border-radius: 3px; padding: 0px 10px; font-size: 16px; margin-right: 5px; position: relative; top: -1px; } div.color-step-footer { display: flex; clear: both; padding-top: 5px; } div.rgb-color-header { color: #505050; font-weight: 600; font-size: 12px; line-height: 14px; text-transform: uppercase; } div.rgb-color-icon-container { width: 16.66%; display: flex; justify-content: center; } div.rgb-color-icon { width: 35px; height: 35px; border-radius: 50%; cursor: pointer; } div.rgb-color-icon.active, #color_table p.active { border: 3px solid #fff; position: relative; } div.rgb-color-icon.active::before, #color_table p.active::before { content: " "; position: absolute; z-index: -1; width: 41px; height: 41px; top: -6px; left: -6px; right: 0; bottom: 0; border: 3px solid #5761fe; border-radius: 50%; } div.rgb-color-text { font-size: 11px; line-height: 1.5; text-align: left; cursor: pointer; width: 49.98%; } div.rgb-color-desc { font-size: 10px; line-height: 11px; color: #979797; } div.rgb-upgrade-price-container { font-size: 12px; } div.waterproof-not-available-with-rgb { font-size: 11px; color: rgb(105, 105, 105); font-weight: normal; padding-top: 5px; } div.non-latin-waterproof-not-available-with-rgb { font-size: 11px; color: rgb(105, 105, 105); font-weight: normal; line-height: 1.1; } div.rgb-waterproof-message { color: rgb(105, 105, 105); font-size: 12px; padding-top: 3px; } .no-pad { padding: 0; } .color_desc .yt-container { overflow: hidden; aspect-ratio: 16/9; } .color_desc .yt-container iframe { width: 300%; height: 100%; margin-left: -100%; } div.exact-size-range-preview-container { position: absolute; color: #fff; background-color: rgb(0 0 0 / 70%); font-size: 11px; padding: 0 10px; border-radius: 5px; min-height: 52px; } div.exact-size-range-editor-container { padding: 5px 0 10px; } div.exact-size-preview-text { /*text-align: left;*/ } div.exact-size-number-preview-container { /*text-align: right; float:right*/ display:inline-block; width: 25px; text-align: left; } div.exact-size-number-preview-container.exact-cmsize-wrap{ width: 35px; } div.exact-size-height-wrap{ display:inline; margin-left:15px } span.exact-size-unit { float: right; } div.total-next-exact-size{ float: right; } div.exact-size-number-container { text-align: right; display: inline-block; /* width: 40px;*/ margin: 0 20px 0 5px; } div.exact-size-slider-bottom{ text-align: center; } div.exact-size-slider-bottom .total_sel_price{ /*float: none;*/ display: inline; font-size: 11px; text-transform: uppercase; } div.disclaimer-text{ float: left; } div.disclaimer-text a{ color: #5761fe; } .step-title.disclaimer-text{ float: none; } div.exact-size-slider-bottom div.disclaimer-text a{ color: #878eff; } div.exact-size-slider-bottom .exact-min-width-text-container{ display: inline; margin-left: 15px; } div.exact-size-number-container.exact-size-cm-width { /*width: 50px; */ } div.exact-size-range-text { font-size: 11px; font-weight: 600; text-align: left; padding-bottom: 5px; } input.exact-width-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; background: #d3d3d3; outline: none; opacity: 0.9; margin: 8px 0; -webkit-transition: .2s; transition: opacity .2s; } div.exact-size-range-preview-container input.exact-width-slider { background: #fff; } input.exact-width-slider:hover { opacity: 1; } input.exact-width-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border: 0; background: url('/create-neon-sign/images/misc/bluesizer28.png'); cursor: pointer; border-radius: 50%; } input.exact-width-slider::-moz-range-thumb { width: 28px; height: 28px; border: 0; background: url('/create-neon-sign/images/misc/bluesizer28.png'); cursor: pointer; border-radius: 50%; } div.design-container { position: relative; } div.preview-container { width: 100%; position: relative; top: 0; } div.editor-container { width: 100%; margin: 0; border-radius: 12px; position: absolute; z-index: 2; display: block; } div.editor-right-border { width: 20px; background-color: #c0b8b4; } div.editor-top-border { height: 30px; background-color: #c0b8b4; position: sticky; margin-left: -20px; margin-right: -20px; z-index: 1000; } div.editor-curve-container { height: 30px; position: relative; } div.editor-curve-top { /*changed from 5px */ height: 10px; background-color: #fff; border-radius: 12px 12px 0 0; position: absolute; bottom: -1px; width: 100%; } div.editor-bottom-border { height: 30px; background-color: #c0b8b4; position: sticky; bottom: 0; margin-left: -20px; margin-right: -20px; } div.editor-curve-container { height: 30px; position: relative; } div.editor-curve-bottom { /*changed from 5px */ height: 10px; background-color: #fff; border-radius: 0 0 12px 12px; position: absolute; top: 0; width: 100%; } div.editor-content-container { height: 100%; overflow: auto; padding: 5px 5px 0; } div.add-to-cart-container { background-color: #fff; padding-bottom: 10px; } div.m-step { height: auto; padding-top: 10px; } div.m-step-1, div.m-step-9 { padding-top: 0; } div.step-content { padding: 0 5px; } div.step-header { text-align: center; text-transform: uppercase; font-size: 18px; font-weight: 500; margin: 30px 0 10px; } div.step-header-mobile { position: absolute; top: 0; width: 100%; z-index: 1; background: white; margin: 0; display: flex; justify-content: space-between; align-items: center; height: 58px; border-radius: 12px 12px 0 0; text-align: left; margin: 0; height: auto; background-color: transparent; position: inherit; } span.back-arrow { display: none !important; width: 65px; height: 42px; margin-left: 15px; background-color: #5761fe; color: #fff; float: left; display: flex; align-items: center; justify-content: center; border-radius: 6px; } span.forward-arrow { display: none !important; width: 65px; height: 42px; margin-right: 15px; background-color: #5761fe; color: #fff; float: right; display: flex; align-items: center; justify-content: center; border-radius: 6px; } span.step-text { padding: 7px 5px; display: inline-block; } div.step-title { color: #828282; font-size: 12px; text-align: left; margin: 0 0 10px; } div.step-1-title { color: #828282; font-size: 12px; text-align: left; margin: 0 0 10px; display: flex; } div.step-1-input-container { display: flex; flex-direction: row; } textarea#input_text { text-align: center; padding-top: 10px; background: #f5f5f5; border-radius: 12px; border: 1px solid #b9b9b9; height: 135px; width: 100%; } div.logo-quote-container { width: 40%; background-color: #5761fe; margin-left: 20px; border-radius: 12px; text-transform: uppercase; } div.logo-quote-container div.logo-text { color: #ff84c7; margin: 7px 18px; font-weight: 600; font-size: 17px; } div.logo-quote-container a.quote-text { color: #fff; border: 1px solid #ff84c7; display: inline-block; padding: 2px 10px; border-radius: 20px; } div.align-wrap-desktop { flex-direction: row; width: auto; height: 100%; border: none; } div.align-wrap-desktop .align_icon { margin: 0px 4px; height: 45px; } div.align-wrap-desktop .align_icon.active { background-color: #ff7ac7; } div.modal { z-index: 1503; } #helpModal div.modal-body { padding: 20px 40px; } #helpModal p { font-size: 14px; color: #9a9a9a; margin-bottom: 7px; } #helpModal input.form-control { margin-bottom: 7px; } #helpModal textarea.form-control { border: 1px solid #ccc; } div.help-header { text-align: center; font-size: 20px; padding: 20px 20px 0; font-weight: 500; letter-spacing: 0.5px; } label.help-label { float: left; font-size: 15px; margin-bottom: 5px; font-weight: 500; } img.help-close { float: right; cursor: pointer; } button.quote-btn { background-color: #5761ff; padding: 10px 40px; color: #fff; } button.quote-btn:hover { background-color: #ff7ac7; } span.two-btn-brk { display: block; } .two_btn .btn { font-size: 18px; } div.digital-disclaimer { padding: 0 15px; background-color: transparent; } div.price-preview-container { position: absolute; top: 15px; right: 15px; color: white; } div.total-discounted-price { font-size: 15pt; text-align: right; margin-bottom: 5px; } div.price-breakup-image { font-size: 11px; } .strikethrough-diagonal-price { position: relative; font-weight: bold; &:before { position: absolute; content: ""; left: 0; top: 45%; right: 0; border-top: 4px solid; border-color: #ff84c7; -webkit-transform: skewY(-10deg); -moz-transform: skewY(-10deg); transform: skewY(-10deg); } } div.price-breakup { text-align: right; } span.after-discount-price { color: #ff84c7; } span.discount-code { background-color: #ff84c7; color: #fff; padding: 2px 4px; margin-left: 5px; } div.editor-discounted-price span.discount-code { background-color: inherit; color: #ff84c7; padding: 2px 4px; } div.editor-discounted-price div.total-discounted-price { font-size: 24px; } div.rgb_switch_text { font-size: 11px; line-height: 11px; } div.discount-info-preview { font-size: 11px; } li.neon-color { width: 16.66666667%; float: left; } div.background-images-container { width: 100%; position: absolute; bottom: 25px; text-align: center; } div.background-images { background-color: rgba(0, 0, 0, 0.5); padding: 10px; display: inline-block; } div.background-image { width: 60px; height: 60px; display: inline-block; margin: 0 5px; cursor: pointer; } div.background-image.active { width: 70px; height: 70px; } div.background-image img { width: 100%; height: 100%; border-radius: 8px; } div.get-quote-xs { font-size: 14px; line-height: 16px; color: #828282; text-align: left; margin: 10px 0; } div.get-quote-xs a { color: #5761fe; } div.proof-sign-container { position: relative; } div.demo_text::before { content: ""; position: absolute; top: 0; left: 90%; display: block; width: 12%; height: 12%; } div.demo_text::after { content: ""; position: absolute; display: block; width: 12%; height: 12%; bottom: 0; left: 90%; } div.split-view div.demo_text.bg-1::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #c0b8b4 85% ); } div.split-view div.demo_text.bg-1::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #c0b8b4 85% ); } div.split-view div.demo_text.bg-2::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dbdada 85% ); } div.split-view div.demo_text.bg-2::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dbdada 85% ); } div.split-view div.demo_text.bg-3::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #908e89 85% ); } div.split-view div.demo_text.bg-3::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #908e89 85% ); } div.split-view div.demo_text.bg-4::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dddddd 85% ); } div.split-view div.demo_text.bg-4::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dddddd 85% ); } div.split-view div.demo_text.bg-5::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-5::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-6::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-6::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-7::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #2e2d32 85% ); } div.split-view div.demo_text.bg-7::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #2e2d32 85% ); } div.split-view div.demo_text.bg-8::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #babdc2 85% ); } div.split-view div.demo_text.bg-8::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #babdc2 85% ); } div.split-view div.demo_text.bg-9::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #291814 85% ); } div.split-view div.demo_text.bg-9::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #291814 85% ); } div.split-view div.demo_text.bg-10::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #181e1a 85% ); } div.split-view div.demo_text.bg-10::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #181e1a 85% ); } div.split-view div.demo_text.bg-11::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #717171 85% ); } div.split-view div.demo_text.bg-11::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #717171 85% ); } div.split-view div.demo_text.bg-12::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #1c1c1c 85% ); } div.split-view div.demo_text.bg-12::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #1c1c1c 85% ); } div.split-view div.demo_text.bg-13::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dbdbdb 85% ); } div.split-view div.demo_text.bg-13::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dbdbdb 85% ); } div.split-view div.demo_text.bg-14::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-14::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-15::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #979797 85% ); } div.split-view div.demo_text.bg-15::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #979797 85% ); } div.split-view div.demo_text.bg-16::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #291814 85% ); } div.split-view div.demo_text.bg-16::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #291814 85% ); } div.split-view div.demo_text.bg-17::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-17::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-18::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #bdbcb8 85% ); } div.split-view div.demo_text.bg-18::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #bdbcb8 85% ); } div.split-view div.demo_text.bg-19::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #2f2d28 85% ); } div.split-view div.demo_text.bg-19::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #2f2d28 85% ); } div.split-view div.demo_text.bg-20::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #acacac 85% ); } div.split-view div.demo_text.bg-20::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #acacac 85% ); } div.split-view div.demo_text.bg-21::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #8e6a48 85% ); } div.split-view div.demo_text.bg-21::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #8e6a48 85% ); } div.split-view div.demo_text.bg-22::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #1f2a19 85% ); } div.split-view div.demo_text.bg-22::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #1f2a19 85% ); } div.split-view div.demo_text.bg-23::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #e698aa 85% ); } div.split-view div.demo_text.bg-23::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #e698aa 85% ); } div.proof-field { display: flex; justify-content: space-between; } div.design-proof-form div.proof-field label { font-size: 14px; color: #2f2f2f; font-weight: 500; } div.design-proof-form div.proof-field div { font-size: 14px; line-height: 17px; color: #2f2f2f; font-weight: 400; } img.proof-sign { max-height: 140px; width: auto; max-width: 100%; } div.design-proof-form .calculated-width, div.design-proof-form .calculated-height { text-shadow: none; color: #d3d3d3; } div.design-proof-step-header { justify-content: space-between; align-items: start; } span.design-proof-close { cursor: pointer; padding: 10px; z-index: 5; } div.design-proof-sub-header { color: #979797; font-size: 10px; font-weight: 400; text-transform: uppercase; } div.split-view { display: flex; } div.add-to-cart-form { height: calc(100% - 55px); margin-bottom: 10px; } div.design-proof-form { height: calc(100% - 58px); line-height: 1.3em; } div.proof-backboard-color-value, div.proof-wall-mounting-value { text-transform: capitalize; } div.font-dropdown-container { text-align: left; margin-bottom: 8px; display: flex; } div.font-dropdown { display: inline-block; padding: 5px 10px; border: 1px solid #d4d4d4; border-radius: 4px; background-color: #f4f4f4; font-size: 25px; user-select: none; width: calc(30% + 30px); height: 45px; } div.font-dropdown div.selected-font { display: inline-block; width: calc(100% - 25px); height: 100%; text-align: center; } div.font-dropdown div.selected-font img { width: auto; height: 100%; max-width: 100%; max-height: 100%; } div.font-dropdown i.fa { float: right; margin-top: 2px; } div.m-step-checkout { position: sticky; bottom: 0; background-color: #fff; padding-bottom: 10px; } div.step-helper-header { display: flex; justify-content: space-between; font-size: 20px; font-weight: 600; margin: 30px 15px 10px; } div.step-helper-body { color: #828282; font-size: 12px; text-align: left; margin: 0px 20px 20px; } span.step-text-first { margin-left: 15px; } div.indoor-outdoor-container { padding-top: 5px; } div.board-box-warning-message { background-color: #ff7ac7; color: #fff; text-align: left; padding: 8px 15px; font-size: 14px; font-weight: 400; border-radius: 10px; margin-top: 3px; } div.cart-suggestion-container { margin-bottom: 5px; } div.cart-suggestion-header { text-transform: uppercase; text-align: left; margin-bottom: 5px; } div.cart-suggestion-body { display: flex; } div.cart-suggestion-description { text-align: left; margin-left: 10px; } div.cart-suggestion-img img { max-width: 60px; min-width: 40px; height: auto; } div.cart-suggestion-description label { margin-bottom: 4px; color: #2f2f2f; font-weight: 400; font-size: 14px; } div.cart-suggestion-description div.wall-mount-kit-dropdown { margin-left: 0; } div.cart-suggestion-description-text { font-size: 10px; line-height: 1.2; margin-bottom: 3px; font-weight: 500; } div.cart-suggestion-action { align-items: center; display: flex; justify-content: center; margin-left: 12px; } div.cart-suggestion-action button { background-color: #f5f5f5; padding: 10px 20px; border: none; border-radius: 6px; } div.design-proof-total { justify-content: right; } div.demo_box_side div.text_show, div.demo_text_clone div.text_show { margin: 0 0 45px 0; } /* For Medium screen */ @media (min-width: 768px) { div.small-ip67-warning { font-size: 8px; } div.wall-mount-kit-dropdown #wall_mount_kit_value { width: 75px; } div.wall-mount-kit-dropdown { margin-left: 10px; } } @media only screen and (max-width: 335px) { .total_sel_price { font-size: 8pt; font-weight: bold; } } @media screen and (min-width: 335px) and (max-width: 375px) { .total_sel_price { font-size: 13pt; font-weight: bold; } } @media screen and (min-width: 993px) and (max-width: 1110px) { .total_sel_price { font-size: 13pt; font-weight: bold; } } @media screen and (min-width: 1110px) and (max-width: 1175px) { .total_sel_price { font-size: 16pt; font-weight: bold; } } @media (min-width: 1175px) { .color_desc .yt-container { pointer-events: none; } } @media (max-width: 899px) { .container { padding: 0 !important; } .WordSection1 .col-md-6:first-child { padding-right: 0 !important; } div.exact-size-range-preview-container { width: calc(100% - 30px); left: 15px !important; top: calc(100% - 75px); } } @media (min-width: 900px) { div.exact-size-range-preview-container { width: 430px; left: calc(50% - 215px); top: calc(100% - 190px); } .make_style_form { width: calc(100% - 35px); height: calc(100% - 60px); padding: 0 20px; } div.editor-content-container { overflow: inherit; padding: 0; } div.m-step-1 { padding-top: 10px; } textarea#input_text { width: 60%; height: 100px; } li.neon-color { width: 11.11%; } div.color-step-footer { padding-top: 10px; } div.rgb-color-icon-container { width: 11.11%; } div.rgb-color-text { width: 44.44%; } div.color-examples { width: 44.44%; text-align: center; } span.step-text { padding: 10px 0 2px; } span.step-text-first { padding-top: 0; margin-left: 0; } div.m-step { height: auto; } div.step-content { padding: 0; height: auto; margin-top: 0; overflow: visible; } div.step-header-mobile { text-align: left; margin: 0; height: auto; background-color: transparent; position: inherit; } div.editor-container { max-width: 600px; padding: 0; position: static; display: flex; } span.back-arrow, span.forward-arrow { display: none; } div.upload-get-help { margin: 0 0 10px; } div.upload-get-help a { color: #5761fe; } span.two-btn-brk { display: inline-block; } .two_btn .btn { font-size: 16px; } #save-design-url { margin-right: 15px; } .save-design { margin-top: 0; margin-right: 15px; font-size: 16px; } a.board-box, a.non-latin-board-box { width: calc(33.3% - 10px); padding: 10px; margin: 5px; } div.demo_box_side div.text_show, div.demo_text_clone div.text_show { margin: 0 40px 140px 0; } span.step-option-text { margin-left: 0; } div.design-proof-form { min-height: calc(100vh - 333px); } div.add-to-cart-form { height: 100%; min-height: auto; margin-bottom: 15px; } div.add-to-cart-container { bottom: 30px; padding-bottom: 10px; } div.cart-suggestion-img img { max-width: none; min-width: 95px; } div.cart-suggestion-description-text { margin-bottom: 8px; } } @media (min-width: 767px) { div.discount-info-preview { font-size: 15px; } div.total-discounted-price { font-size: 22pt; } div.rgb_switch_text { font-size: 15px; line-height: 15px; } } @media (max-width: 767px) { #my-faq-section .faq-featured-area .faq-featured-item { width: 100%; } #my-faq-section .accordion-primary { padding-left: 0px; padding-right: 0px; } .accordion-primary .my-faq-item { width: 100%; /* changed */ margin-bottom: 25px; /* changed */ padding: 20px; /* changed */ gap: 12px; /* changed */ background-color: #fbfbfb; /* changed */ border-radius: 12px; /* changed */ border: 1px solid #eeeeee; } .size-box[data-size="xs"] .size-name { width: 74px; } } #fb-messanger-fake-button { position: fixed; bottom: 24px; left: 24px; z-index: 100; transition: opacity 0.3s; } #size_table .size-box { position: relative; min-height: 62px; } #size_table .size-box .popular::before { content: ""; display: inline-block; width: 116px; height: 124px; background-image: url(/create-neon-sign/images/mostpop.svg); background-repeat: no-repeat; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); filter: drop-shadow(0px 2px 2px #cdcdcd); } .kl-private-reset-css-Xuajs1 { display: none !important; } .proof-sign-container.landscape-view { display: none; } .proof-sign-container.not-landscape-view { display: block; } .design-proof-form-layout { display: flex; flex-direction: column; height: calc(100% - 120px); position: relative; } .design-proof-form-left { width: 100%; padding-right: 0; } .design-proof-form-right { width: 100%; padding-left: 0; height: 100%; } .design-proof-form-right .add-to-cart-container { width: 100%; } .simplebar-scrollbar:before { background-color: #d1d1d1 !important; opacity: 1 !important; } .amount-type-discount .total-discounted-price { margin-top: 7px; } @media (orientation: landscape) and (max-width: 899px) { textarea#input_text { height: 130px; } .align_icon svg { height: 37px; } .proof-sign-container.not-landscape-view { display: none; } .proof-sign-container.landscape-view { display: flex; width: 100%; margin-top: -55px; text-align: center; justify-content: center; } .design-proof-form-layout { display: flex; flex-direction: row; height: 100%; position: initial; } .design-proof-form-left { padding-right: 7px; } .design-proof-form-right { padding-left: 7px; } div.add-to-cart-form { height: calc(100% - 49px); } div.design-proof-form { height: 100%; } #merchantwidget-iframe-wrapper{ display:none; } } @media (orientation: portrait) and (max-width: 899px) { div.design-proof-form-layout .add-to-cart-container{ margin-top: 10px !important; } #merchantwidget-iframe-wrapper{ display:none; } } /* For XXS screen */ @media (max-width: 430px) { #size_table .size-box .s_size, #size_table .size-box .s_size2 { font-size: 11px !important; } .size-box { margin: 3px !important; width: calc(50% - 6px); } a.board-box, a.non-latin-board-box { padding: 2px 2px 5px; width: calc(33.3% - 6px); margin: 3px; } } @media (max-width: 379px) { div.col-xxs-12 { width: 100%; } #size_table .size-box .s_size, #size_table .size-box .s_size2 { text-align: left; } } @media (max-width: 359px) { div.board-box-type { font-size: 9px; } div.board-box-price { font-size: 10px; } } @media (orientation: landscape) and (max-width: 680px) { div.col-xxs-12 { width: 100%; } #size_table .size-box .s_size, #size_table .size-box .s_size2 { text-align: left; } } @media (min-width: 768px) and (max-width: 899px) { div.design-container .cn-hidden-sm, div.editor-form-helper .cn-hidden-sm { display: none !important; } } @media (min-width: 900px) and (max-width: 1199px) { div.design-container .cn-hidden-md { display: none !important; } a.board-box, a.non-latin-board-box { padding: 5px; } div.back-board-color, div.non-latin-back-board-color { padding: 5px; } } @media (min-width: 900px) and (max-width: 1099px) { div.design-container .cn-hidden-back-md { display: none !important; } } @media (min-width: 1100px) and (max-width: 1249px) { div.design-container .cn-hidden-back-lg { display: none !important; } } .price-preview-container .discount-text.discount-mobile{ display: block; } .price-preview-container .discount-code.discount-mobile{ float: right; } .price-preview-container .total-discounted-price.discount-mobile{ margin-top: 30px; } .price-preview-container.price-preview.discount-mobile{ top: 70px !important; } /* Zendesk Chat css*/ iframe[title="Close message"], iframe[title="Message from company"]{ display:none !important; } .wpcc-container{ font-size: 13px !important; line-height: 14px !important; } .demo_text .text_show.warmwhite-7{ color: #fefff5; text-shadow: #d9d95c 0px 0px 3px, rgba(0, 0, 0,0.1) 1px 1px 1px, #fffdde 0px 0px 6px, #fffdde 0px 0px 10px, #fffdde 0px 0px 13px, #fffdde 0px 0px 16px, #fffdde 0px 0px 20px, #fffdde 0px 0px 24px, #fffdde 0px 0px 28px, #fffdde 0px 0px 32px, #fffdde 0px 0px 40px; } .demo_text .text_show.white-7{ color: #FFFFFF; text-shadow: #a2b6e7 0px 0px 3px, rgba(0, 0, 0,0.1) 1px 1px 1px, #FFFFFF 0px 0px 6px, #FFFFFF 0px 0px 10px, #FFFFFF 0px 0px 13px, #FFFFFF 0px 0px 16px, #FFFFFF 0px 0px 20px, #FFFFFF 0px 0px 24px, #FFFFFF 0px 0px 28px, #FFFFFF 0px 0px 32px, #FFFFFF 0px 0px 40px; } .demo_text .text_show.lemonyellow-7{ color: #fffee1; text-shadow: #caca00 0px 0px 3px, rgba(0, 0, 0,0.2) 1px 1px 1px, #fffb87 0px 0px 6px, #fffb87 0px 0px 10px, #fffb87 0px 0px 13px, #fffb87 0px 0px 16px, #fffb87 0px 0px 20px, #fffb87 0px 0px 24px, #fffb87 0px 0px 28px, #fffb87 0px 0px 32px, #fffb87 0px 0px 40px; } .demo_text .text_show.goldenyellow-7{ color: #fff5d6; text-shadow: #ce9e00 0px 0px 3px, rgba(0, 0, 0,0.3) 1px 1px 1px, #ffca1c 0px 0px 6px, #ffca1c 0px 0px 10px, #ffca1c 0px 0px 13px, #ffca1c 0px 0px 16px, #ffca1c 0px 0px 20px, #ffca1c 0px 0px 24px, #ffca1c 0px 0px 28px, #ffca1c 0px 0px 32px, #ffca1c 0px 0px 40px; } .demo_text .text_show.orange-7{ color: #ffdcb2; text-shadow: #c16a01 0px 0px 3px, rgba(0, 0, 0,0.3) 1px 1px 1px, #ff981a 0px 0px 6px, #ff981a 0px 0px 10px, #ff981a 0px 0px 13px, #ff981a 0px 0px 16px, #ff981a 0px 0px 20px, #ff981a 0px 0px 24px, #ff981a 0px 0px 28px, #ff981a 0px 0px 32px, #ff981a 0px 0px 40px; } .demo_text .text_show.lightred-7{ color: #ffd1d1; text-shadow: #cf0000 0px 0px 3px, rgba(0, 0, 0,0.3) 1px 1px 1px, #ff7a7a 0px 0px 6px, #ff7a7a 0px 0px 10px, #ff7a7a 0px 0px 13px, #ff7a7a 0px 0px 16px, #ff7a7a 0px 0px 20px, #ff7a7a 0px 0px 24px, #ff7a7a 0px 0px 28px, #ff7a7a 0px 0px 32px, #ff7a7a 0px 0px 40px; } .demo_text .text_show.red-7{ color: #ffb7b7; text-shadow: #bb0000 0px 0px 3px, rgba(0, 0, 0,0.4) 1px 1px 1px, #ff2a4d 0px 0px 6px, #ff2a4d 0px 0px 10px, #ff2a4d 0px 0px 13px, #ff2a4d 0px 0px 16px, #ff2a4d 0px 0px 20px, #ff2a4d 0px 0px 24px, #ff2a4d 0px 0px 28px, #ff2a4d 0px 0px 32px, #ff2a4d 0px 0px 40px; } .demo_text .text_show.pink-7{ color: #ffe9ff; text-shadow: #da2ada 0px 0px 3px, rgba(0, 0, 0,0.3) 1px 1px 1px, #ffa0f7 0px 0px 6px, #ffa0f7 0px 0px 10px, #ffa0f7 0px 0px 13px, #ffa0f7 0px 0px 16px, #ffa0f7 0px 0px 20px, #ffa0f7 0px 0px 24px, #ffa0f7 0px 0px 28px, #ffa0f7 0px 0px 32px, #ffa0f7 0px 0px 40px; } .demo_text .text_show.cottoncandy-7{ color: #ffe0ef; text-shadow: #d93084 0px 0px 3px, rgba(0, 0, 0,0.3) 1px 1px 1px, #ff80bf 0px 0px 6px, #ff80bf 0px 0px 10px, #ff80bf 0px 0px 13px, #ff80bf 0px 0px 16px, #ff80bf 0px 0px 20px, #ff80bf 0px 0px 24px, #ff80bf 0px 0px 28px, #ff80bf 0px 0px 32px, #ff80bf 0px 0px 40px; } .demo_text .text_show.deeppink-7{ color: #ffa3f7; text-shadow: #d6009c 0px 0px 3px, rgba(0, 0, 0,0.3) 1px 1px 1px, #ff5ad2 0px 0px 6px, #ff5ad2 0px 0px 10px, #ff5ad2 0px 0px 13px, #ff5ad2 0px 0px 16px, #ff5ad2 0px 0px 20px, #ff5ad2 0px 0px 24px, #ff5ad2 0px 0px 28px, #ff5ad2 0px 0px 32px, #ff5ad2 0px 0px 40px; } .demo_text .text_show.purple-7{ color: #f0e3ff; text-shadow: #5d00cf 0px 0px 3px, rgba(0, 0, 0,0.2) 1px 1px 1px, #c392ff 0px 0px 6px, #c392ff 0px 0px 10px, #c392ff 0px 0px 13px, #c392ff 0px 0px 16px, #c392ff 0px 0px 20px, #c392ff 0px 0px 24px, #c392ff 0px 0px 28px, #c392ff 0px 0px 32px, #c392ff 0px 0px 40px; } .demo_text .text_show.deepblue-7{ color: #8aaeff; text-shadow: #0000bd 0px 0px 3px, rgba(0, 0, 0,0.4) 1px 1px 1px, #4b4bff 0px 0px 6px, #4b4bff 0px 0px 10px, #4b4bff 0px 0px 13px, #4b4bff 0px 0px 16px, #4b4bff 0px 0px 20px, #4b4bff 0px 0px 24px, #4b4bff 0px 0px 28px, #4b4bff 0px 0px 32px, #4b4bff 0px 0px 40px; } .demo_text .text_show.electricblue-7{ color: #c9eaff; text-shadow: #0064dd 0px 0px 3px, rgba(0, 0, 0,0.2) 1px 1px 1px, #54bdff 0px 0px 6px, #54bdff 0px 0px 10px, #54bdff 0px 0px 13px, #54bdff 0px 0px 16px, #54bdff 0px 0px 20px, #54bdff 0px 0px 24px, #54bdff 0px 0px 28px, #54bdff 0px 0px 32px, #54bdff 0px 0px 40px; } .demo_text .text_show.iceblue-7{ color: #e9fcff; text-shadow: #00a9d9 0px 0px 3px, rgba(0, 0, 0,0.2) 1px 1px 1px, #72e0ff 0px 0px 6px, #72e0ff 0px 0px 10px, #72e0ff 0px 0px 13px, #72e0ff 0px 0px 16px, #72e0ff 0px 0px 20px, #72e0ff 0px 0px 24px, #72e0ff 0px 0px 28px, #72e0ff 0px 0px 32px, #72e0ff 0px 0px 40px; } .demo_text .text_show.tropicalblue-7{ color: #ccfaff; text-shadow: #00a7d3 0px 0px 3px, rgba(0, 0, 0,0.2) 1px 1px 1px, #39c9ef 0px 0px 6px, #39c9ef 0px 0px 10px, #39c9ef 0px 0px 13px, #39c9ef 0px 0px 16px, #39c9ef 0px 0px 20px, #39c9ef 0px 0px 24px, #39c9ef 0px 0px 28px, #39c9ef 0px 0px 32px, #39c9ef 0px 0px 40px; } .demo_text .text_show.mint-7{ color: #edfffa; text-shadow: #40d1a1 0px 0px 3px, rgba(0, 0, 0,0.1) 1px 1px 1px, #d5fff1 0px 0px 6px, #d5fff1 0px 0px 10px, #d5fff1 0px 0px 13px, #d5fff1 0px 0px 16px, #d5fff1 0px 0px 20px, #d5fff1 0px 0px 24px, #d5fff1 0px 0px 28px, #d5fff1 0px 0px 32px, #d5fff1 0px 0px 40px; } .demo_text .text_show.green-7{ color: #ccffdb; text-shadow: #00a531 0px 0px 3px, rgba(0, 0, 0,0.2) 1px 1px 1px, #44ff7c 0px 0px 6px, #44ff7c 0px 0px 10px, #44ff7c 0px 0px 13px, #44ff7c 0px 0px 16px, #44ff7c 0px 0px 20px, #44ff7c 0px 0px 24px, #44ff7c 0px 0px 28px, #44ff7c 0px 0px 32px, #44ff7c 0px 0px 40px; } .demo_text .text_show.deepgreen-7{ color: #5ffd5f; text-shadow: #007004 0px 0px 3px, rgba(0, 0, 0,0.3) 1px 1px 1px, #3cd65b 0px 0px 6px, #3cd65b 0px 0px 10px, #3cd65b 0px 0px 13px, #3cd65b 0px 0px 16px, #3cd65b 0px 0px 20px, #3cd65b 0px 0px 24px, #3cd65b 0px 0px 28px, #3cd65b 0px 0px 32px, #3cd65b 0px 0px 40px; }html, body { height: 100%; width: 100%; } #message-back { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background: rgba(0, 0, 0, 0.5); visibility: hidden; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .loader-back.loading, .loader-back-image.loading, #message-back.loading { visibility: visible; opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .wrapper { position: fixed; background: rgba(255, 255, 255, 1); z-index: 9990; top: 0; width: 100%; height: 100%; left: 0; overflow-y: auto; padding-bottom: 70px; padding-top: 70px; /* border-radius: 10px; */ /* box-shadow: 0px 0px 20px #a2e6ff; */ /* border: 1px solid #000; */ visibility: hidden; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .image_wrapper { border: none !important; width: 100%; height: 100%; left: 0 !important; top: 0 !important; background: rgba(0, 0, 0, 0); } .image_wrapper > img { position: absolute; max-height: 100%; max-width: 100%; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); } .s_wrapper { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: rgba(255, 255, 255, 1); z-index: 9999; width: 600px; height: 400px; color: #2b2b2b; border-radius: 10px; box-shadow: 0px 0px 20px #a2e6ff; text-align: center; visibility: hidden; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .s_wrapper p { font-size: 20px; line-height: 20px; } .s_wrapper.show { top: 0; /*visibility: hidden;*/ opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #message { position: relative; top: 50%; transform: translateY(-50%); overflow-y: auto; padding: 20px; } .process_wrapper { position: fixed; width: 100vw; height: 100vh; z-index: 999999; font-size: 2.5em; line-height: 2.5em; background: rgba(0, 0, 0, 0.5); overflow: hidden; border-radius: 0; color: white; border: none !important; top: 0 !important; } #progress { display: none; } #progress.active { display: block; } .process_wrapper > div { position: relative; top: 50%; transform: translateY(-50%); } .wrapper.show { visibility: visible; opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .wrapper > .wrapper_cancel { position: absolute; right: 5px; top: 5px; font-size: 2em; border: none; background: none; color: black; z-index: 9999; } .image_wrapper > .wrapper_cancel { color: white; } .uppercase { text-transform: uppercase; } .align-left { float: left; margin: 0 25px 0 0px !important; } .align-right { float: right; margin: 0 0 0 25px !important; } .text-align-left { text-align: left; } .text-align-center { text-align: center; } .text-align-right { text-align: right; } label { display: inline-block; margin-bottom: 10px; color: #9a9a9a; font-size: 13pt; font-weight: 600; } .size_style label { color: #6a6a6a; width: 100%; text-align: left; box-sizing: border-box; padding: 0 10px; margin-bottom: 5px; font-weight: 600; } label.size_note, .sign_note { font-size: 12px; text-align: justify; font-weight: normal; line-height: 1.5; margin-bottom: 0; } .sign_note { color: #9a9a9a; display: inline-block; padding: 0; } .sign_note p { margin: 0; font-size: 12px; } .sign_note .tooltip { font-size: 14px !important; } .custom-radio label { font-size: 11pt; line-height: 1; margin-bottom: 0; } .custom-control.custom-radio { text-align: left; } .plug_style label, .board_style label { color: #6a6a6a; font-size: 13pt; margin-bottom: 0; display: block; text-align: left; padding-left: 10px; } .plug_style label { padding: 0; } .form-control { margin-bottom: 20px; } .form-group { margin: 0; display: inline-block; width: 100%; } textarea.form-control { border-radius: 2px; resize: none; height: 90px; border: 1px solid #f3f3f3; } ::-webkit-input-placeholder { /* Edge */ color: #aeaeae; } body { background-color: #fff; color: #2b2b2b; font-size: 15px; font-weight: 400; font-family: "Poppins", sans-serif; line-height: 1.5em; overflow-x: hidden; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; } html { width: 100%; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } div.design-container a { color: #000; text-decoration: none; cursor: pointer; } div.design-container .row { margin-right: 0; margin-left: 0; } div.design-container * { -webkit-box-sizing: border-box; -moz-box-sizing: border-boxf; box-sizing: border-box; outline: none; } div.design-container ol, div.design-container ul { list-style: none; } .align_wrap { padding: 0; display: flex; justify-content: space-between; width: 20%; height: 135px; flex-direction: column; margin-left: 5px; border-radius: 8px; align-items: center; } .align_icon { display: inline-block; width: 100%; height: 42px; cursor: pointer; background-position: center; border-radius: 8px; border: 1px solid #d4d4d4; background-color: #f4f4f4; } .align_icon svg { height: 100%; } .align_icon.active { background-color: #ff7ac7; color: #fff; } .align_icon.active path { stroke: #fff; } @font-face { font-family: "Alexa"; src: url("fonts/custom/Alexa.ttf") format("truetype"); } @font-face { font-family: "Amanda"; src: url("fonts/custom/Amanda.ttf") format("truetype"); } @font-face { font-family: "Amsterdam"; src: url("fonts/custom/Amsterdam.ttf") format("truetype"); } @font-face { font-family: "Austin"; src: url("fonts/custom/Austin.ttf") format("truetype"); } @font-face { font-family: "Avante"; src: url("fonts/custom/Avante.ttf") format("truetype"); } @font-face { font-family: "Barcelona"; src: url("fonts/custom/Barcelona.ttf") format("truetype"); } @font-face { font-family: "Bayview"; src: url("fonts/custom/Bayview.ttf") format("truetype"); } @font-face { font-family: "Beachfront"; src: url("fonts/custom/Beachfront.ttf") format("truetype"); } @font-face { font-family: "Bellview"; src: url("fonts/custom/Bellview.ttf") format("truetype"); } @font-face { font-family: "Buttercup"; src: url("fonts/custom/Buttercup.ttf") format("truetype"); } @font-face { font-family: "Chelsea"; src: url("fonts/custom/Chelsea.ttf") format("truetype"); } @font-face { font-family: "ClassicType"; src: url("fonts/custom/ClassicType.ttf") format("truetype"); } @font-face { font-family: "Freehand"; src: url("fonts/custom/Freehand.ttf") format("truetype"); } @font-face { font-family: "Freespirit"; src: url("fonts/custom/Freespirit.ttf") format("truetype"); } @font-face { font-family: "Greenworld"; src: url("fonts/custom/Greenworld.ttf") format("truetype"); } @font-face { font-family: "LoveNeon"; src: url("fonts/custom/LoveNeon.ttf") format("truetype"); } @font-face { font-family: "LoveNote"; src: url("fonts/custom/LoveNote.ttf") format("truetype"); } @font-face { font-family: "Marquee"; src: url("fonts/custom/Marquee.ttf") format("truetype"); } @font-face { font-family: "Mayfair"; src: url("fonts/custom/Mayfair.ttf") format("truetype"); } @font-face { font-family: "Melbourne"; src: url("fonts/custom/Melbourne.ttf") format("truetype"); } @font-face { font-family: "Monaco"; src: url("fonts/custom/Monaco.ttf") format("truetype"); } @font-face { font-family: "NeonGlow"; src: url("fonts/custom/NeonGlow.ttf") format("truetype"); } @font-face { font-family: "NeonLite"; src: url("fonts/custom/NeonLite.ttf") format("truetype"); } @font-face { font-family: "Neonscript"; src: url("fonts/custom/Neonscript.ttf") format("truetype"); } @font-face { font-family: "Neontrace"; src: url("fonts/custom/Neontrace.ttf") format("truetype"); } @font-face { font-family: "NeoTokyo"; src: url("fonts/custom/NeoTokyo.ttf") format("truetype"); } @font-face { font-family: "Nevada"; src: url("fonts/custom/Nevada.ttf") format("truetype"); } @font-face { font-family: "NewCursive"; src: url("fonts/custom/NewCursive.ttf") format("truetype"); } @font-face { font-family: "Northshore"; src: url("fonts/custom/Northshore.ttf") format("truetype"); } @font-face { font-family: "Photogenic"; src: url("fonts/custom/Photogenic.ttf") format("truetype"); } @font-face { font-family: "Rocket"; src: url("fonts/custom/Rocket.ttf") format("truetype"); } @font-face { font-family: "Royalty"; src: url("fonts/custom/Royalty.ttf") format("truetype"); } @font-face { font-family: "SciFi"; src: url("fonts/custom/SciFi.ttf") format("truetype"); } @font-face { font-family: "Signature"; src: url("fonts/custom/Signature.ttf") format("truetype"); } @font-face { font-family: "Sorrento"; src: url("fonts/custom/Sorrento.ttf") format("truetype"); } @font-face { font-family: "Typewriter"; src: url("fonts/custom/Typewriter.ttf") format("truetype"); } @font-face { font-family: "Venetian"; src: url("fonts/custom/Venetian.ttf") format("truetype"); } @font-face { font-family: "Vintage"; src: url("fonts/custom/Vintage.ttf") format("truetype"); } @font-face { font-family: "Waikiki"; src: url("fonts/custom/Waikiki.ttf") format("truetype"); } @font-face { font-family: "WildScript"; src: url("fonts/custom/WildScript.ttf") format("truetype"); } @font-face { font-family: "Florence"; src: url("fonts/custom/Florence.ttf") format("truetype"); } @font-face { font-family: "LazySunday"; src: url("fonts/custom/LazySunday.ttf?v=3") format("truetype"); } @font-face { font-family: "LosAngeles"; src: url("fonts/custom/LosAngeles.ttf?v=3") format("truetype"); } @font-face { font-family: "Manchester"; src: url("fonts/custom/Manchester.ttf") format("truetype"); } @font-face { font-family: "Majorca"; src: url("fonts/custom/Majorca.ttf") format("truetype"); } @font-face { font-family: "Manhattan"; src: url("fonts/custom/Manhattan.ttf") format("truetype"); } @font-face { font-family: "Milan"; src: url("fonts/custom/Milan.ttf") format("truetype"); } @font-face { font-family: "NottingHill"; src: url("fonts/custom/NottingHill.ttf") format("truetype"); } @font-face { font-family: "Olivia"; src: url("fonts/custom/Olivia.ttf?v=2") format("truetype"); } @font-face { font-family: "Rockstar"; src: url("fonts/custom/Rockstar.ttf") format("truetype"); } @font-face { font-family: "SanDiego"; src: url("fonts/custom/SanDiego.ttf") format("truetype"); } @font-face { font-family: "Simplicity"; src: url("fonts/custom/Simplicity.ttf?v=1") format("truetype"); } @font-face { font-family: "Submarine"; src: url("fonts/custom/Submarine.ttf") format("truetype"); } @font-face { font-family: "Vancouver"; src: url("fonts/custom/Vancouver.ttf") format("truetype"); } @font-face { font-family: "Weekender"; src: url("fonts/custom/Weekender.ttf") format("truetype"); } @font-face { font-family: "Westcoast"; src: url("fonts/custom/Westcoast.ttf") format("truetype"); } .demo_on_off { cursor: pointer; position: absolute; top: 10px; left: 10px; width: 96px; height: 50px; } .font_style li { background: transparent; color: black; height: 2rem; font-size: 1rem; line-height: 2rem; vertical-align: middle; text-align: center; cursor: pointer; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* For XXS screen .font_style li.active { text-shadow: rgb(255, 255, 255) 0px 0px 2px, rgb(255, 255, 255) 0px 0px 4px, #a2e6ff 0px 0px 8px, #a2e6ff 0px 0px 6px, #a2e6ff 0px 0px 8px, #a2e6ff 0px 0px 22px, #a2e6ff 0px 0px 30px, #a2e6ff 0px 0px 50px, #a2e6ff 0px 0px 100px; } */ .custom_tab > li.active > a { background: none; border: none; border-bottom: 2px solid #ff7ac7; } .size-box { width: calc(50% - 10px); float: left; border: 1px solid #d4d4d4; border-radius: 0; text-align: left; padding: 0; cursor: pointer; font-size: 0.75rem; line-height: 1.5rem; margin: 5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .size-box.disabled { pointer-events: none !important; } .board-sub { overflow: hidden; } .board-sub > image { width: 100%; } .size-box .s_price { text-align: left; padding: 0; } .size-box .s_price div:nth-child(2) { padding-left: 5px; background: #fff; } .size-box .s_price.noprice div:nth-child(2) { padding: 0 5px; font-size: 0.72rem; } div.board-box-container { margin: 0 -5px; } a.board-box, a.non-latin-board-box { border: 1px solid #d4d4d4; padding: 5px; border-radius: 8px; display: block; width: calc(33.3% - 8px); float: left; margin: 4px; background-color: #f4f4f4; } .board-box.active, .non-latin-board-box.active { background-color: #fff !important; border-color: #ff7ac7; } div.board-box-type { float: left; font-size: 10px; } div.board-box-price { font-size: 13px; font-weight: 600; text-align: right; } .backboard-img { width: 100%; height: auto; margin: 5px 0 0; } .demo_text { background-color: #c0b8b4; z-index: 2; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; /* border: 1px solid white; */ } .demo_text .text_show { font-size: 7rem; position: absolute; box-sizing: content-box; width: auto; line-height: 7rem; text-align: center; color: white; cursor: pointer; z-index: 2; -webkit-transition: text-shadow 0.5s ease; -moz-transition: text-shadow 0.5s ease; -ms-transition: text-shadow 0.5s ease; -o-transition: text-shadow 0.5s ease; transition: text-shadow 0.5s ease; } #text { padding: 0.5em; font-size: 3.3rem; line-height: normal; overflow: hidden; } .font_style li { background: transparent; color: black; height: 2rem; font-size: 1rem; line-height: 2rem; vertical-align: middle; text-align: center; cursor: pointer; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; padding: 0; } .font_style li.active { text-shadow: rgb(255, 255, 255) 0px 0px 2px, rgb(255, 255, 255) 0px 0px 4px, #a2e6ff 0px 0px 8px, #a2e6ff 0px 0px 6px, #a2e6ff 0px 0px 8px, #a2e6ff 0px 0px 22px, #a2e6ff 0px 0px 30px; } #color_table { margin: 5px 0 0; padding: 0; } #color_table li { height: 70px; cursor: pointer; padding: 0; } #color_table li > p { width: 35px; height: 35px; text-align: center; font-size: 2rem; line-height: 4rem; margin: 0 auto; padding: 0; border-radius: 50%; } #color_table li > .color_name { width: 100%; height: auto; text-align: center; line-height: 0.7rem !important; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; padding: 0; margin-top: 10px; color: #2f2f2f99; } .size-box { width: calc(50% - 10px); float: left; text-align: left; cursor: pointer; line-height: 1.5rem; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .size-box .s_size { padding: 0; } .size-box .s_size { padding: 0; } .size-box .s_price { text-align: right; padding: 0; } .size-box.active, .size-box:hover { box-shadow: 0px 0px 0 3px #ff7ac7; border-color: transparent; border-radius: 0; } .total_sel_price { font-size: 22pt; margin-left: 3px; } .plug_style .dropdown { display: inline-block; } .plug_style .btn-default { width: 100%; padding: 2px 2px 2px 10px; } .plug_style i { float: right; border: 1px solid #f3f3f3; padding: 0 5px; font-size: 1.2rem; } .plug_style h4 { display: inline-block; font-size: 11pt; float: left; margin: 0; } .DskOnly { display: block; } .MobOnly { display: none; } @media handheld, screen and (min-width: 300px) and (max-width: 350px) { .DskOnly { display: none; } .MobOnly { display: block; } .topim { text-align: center; } .topim img { margin: 0 auto; } .WordSection1 h2.tpH { text-align: center; font-size: 30px; } } @media handheld, screen and (min-width: 350px) and (max-width: 768px) { .DskOnly { display: none; } .MobOnly { display: block; } .topim { text-align: center; padding: 0 10px; box-sizing: border-box; } .topim img { margin: 0 auto; } .WordSection1 h2.tpH { text-align: center; font-size: 30px; } } @media all and (max-width: 30em) { button.addtocart { display: block; margin: 0.4em auto; } } .make_style_form { height: 100%; width: auto; padding: 0; } .make_style_form .bord_color .bord_img { display: inline-flex; } .make_style_form .bord_color .bord_img .board-name { display: none; color: #ff7ac7; font-weight: 600; } .make_style_form .bord_color .bord_img img { border-color: transparent; border-radius: 9px; border: 2px solid #616161; margin-left: 12px; cursor: pointer; margin-right: 12px; transition: all 0.5s ease; } .make_style_form .bord_color .bord_img img.active { border: 2px solid #ff7ac7; } .make_style_form .bord_color .bord_img img:hover { border: 2px solid #ff7ac7; } .make_style_form .bord_color .bord_txt { margin-top: 10px; text-align: left; margin-left: 10px; } .make_style_form .bord_color .bord_txt span { color: #333333; font-weight: 600; font-size: 14px; } @media only screen and (max-width: 1200px) { .make_style_form .bord_color .bord_img img { margin: 0 12px; height: 36px; } } @media only screen and (max-width: 767px) { .make_style_form .bord_color .bord_img img { margin: 0 10px; height: 36px; } } /* dd board prices 23-04-21 end*/ .size-notice label, .size-notice-lenght label, .size-notice-height label { text-align: center; margin: 8px 15px 8px 15px; color: white; font-size: 14px; font-weight: 400; } .size-notice, .size-notice-lenght, .size-notice-height { background-color: #ff7ac7; margin: 10px 0; clear: both; } .color_desc { display: inline-block; margin-top: 10px; font-size: 13px; width: 100%; } .color_desc span.cdesc { display: inline-block; width: 100%; } .color_desc span.cimg { display: inline-block; width: 100%; max-width: 335px; align: center; repeat: none; height: 150px; margin-top: 10px; } .color_desc span.cmore { display: inline-block; width: 100%; text-align: center; } .color_desc span.cmore > a { color: #337ab7; } #color_table li > .color_name { font-size: 10px !important; } #size_table .size-box .s_size, #size_table .size-box .s_size2 { padding: 0; } .s_size2, .s_size, .non_latin_s_size, .non_latin_s_size2 { color: #696969; font-size: 12px !important; width: 100%; display: inline-block; box-sizing: border-box; padding-right: 3px; font-weight: 400 !important; } .size-box .size-name, .size-box .no-price-size-name { font-weight: 600; font-size: 12px; } .s_size2 div:nth-child(2), .s_size div:nth-child(2) { background: #fff; } #quoteform { display: none; width: 70%; float: left; margin: 10px 30px; text-align: left; } #quoteform label { text-align: left; float: left; } .demo_text { display: flex; justify-content: center; align-items: center; position: relative; } #size_table { margin: 0 -5px; } /* The container */ .custom-checkbox .custom-control-label { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: left; font-weight: 400; color: #000; } /* Hide the browser's default checkbox */ .custom-checkbox .custom-control-label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .custom-control.custom-option { text-align: left; font-family: "Brandon_light", sans-serif; } .custom-control.custom-option .col-xs-6, .custom-control.custom-option .col-xs-5, .custom-control.custom-option .col-xs-7 { padding: 0; margin-top: 10px; } .custom-control.custom-option label { float: left; color: #00c4c8; font-size: 20px; } .custom-control.custom-option small { float: right; width: 52%; font-weight: bold; font-size: 14px; } .custom-control.custom-option .col-xs-7 small { width: 65%; } .custom-control.custom-option span { font-weight: bold; } .custom-control.custom-option .info-light { display: none; border-radius: 5px; background-color: #dcfcfd; color: #00c4c8; padding: 5px 15px; margin-top: 5px; } .custom-control.custom-option .info-light.active { display: block; } .custom-control.custom-radio { margin-bottom: 5px; } /* Create a custom checkbox */ .custom-checkbox .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; border-radius: 15px; background-color: #fff; border: 2px solid gray; } .custom-radio label { border: 2px solid #e9e9e9; border-radius: 15px; width: 100%; text-align: center; padding: 10px; color: #000; font-size: 16px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; cursor: pointer; height: 75px; display: flex; align-items: center; flex-direction: column; justify-content: center; font-weight: 500; } .custom-radio.selected label, .custom-radio:hover label { box-shadow: unset; border-color: transparent; border-radius: 15px; border: 1px solid #ff7ac7; background: #fff; } .custom-radio input { position: absolute; opacity: 0; } span.radio_span { display: inline-block; margin: 10px 0 0; font-size: 16px; color: #5761fe; } span.radio_span span#waterProofPrice { font-size: 16px; color: #5761fe; } /* On mouse-over, add a grey background color */ .custom-checkbox .custom-control-label:hover input ~ .checkmark { background-color: #fff; border: 2px solid gray; } /* When the checkbox is checked, add a blue background */ .custom-checkbox .custom-control-label input:checked ~ .checkmark { background-color: #ff7ac7; border-color: #ff7ac7; } .custom-checkbox .custom-control-label input[type="checkbox"]:checked + label { background-color: #ff7ac7; } /* Create the checkmark/indicator (hidden when not checked) */ .custom-checkbox .custom-control-label:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .custom-checkbox .custom-control-label input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .custom-checkbox .custom-control-label .checkmark:after { left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); content: ""; position: absolute; } .color_desc { width: 100%; color: #000; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px 0 0; } .cdesc { padding: 0px 5px 0px 5px; } .demo_on_off.offswitch { background-image: url("data:image/svg+xml; charset=utf8, %3Csvg%20width%3D%2272%22%20height%3D%2229%22%20viewBox%3D%220%200%2072%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M2%202h33v26H2z%22%2F%3E%3Cpath%20d%3D%22M13.562%2020.098a5.064%205.064%200%200%201-2.52-.644%204.823%204.823%200%200%201-1.82-1.778c-.448-.765-.672-1.629-.672-2.59%200-.952.224-1.806.672-2.562a4.793%204.793%200%200%201%201.82-1.792%205.064%205.064%200%200%201%202.52-.644c.924%200%201.764.215%202.52.644a4.691%204.691%200%200%201%201.806%201.792c.448.756.672%201.61.672%202.562%200%20.961-.224%201.825-.672%202.59a4.72%204.72%200%200%201-1.806%201.778%205.063%205.063%200%200%201-2.52.644Zm0-1.75c.588%200%201.106-.13%201.554-.392.448-.27.798-.653%201.05-1.148.252-.495.378-1.069.378-1.722s-.126-1.223-.378-1.708a2.689%202.689%200%200%200-1.05-1.134c-.448-.261-.966-.392-1.554-.392-.588%200-1.11.13-1.568.392-.448.261-.798.64-1.05%201.134-.252.485-.378%201.055-.378%201.708s.126%201.227.378%201.722c.252.495.602.877%201.05%201.148.458.261.98.392%201.568.392ZM27.97%2020h-1.96l-4.438-6.706V20h-1.96v-9.786h1.96l4.438%206.72v-6.72h1.96V20Z%22%20fill%3D%22%2376E51F%22%2F%3E%3Cpath%20fill%3D%22%2357585C%22%20d%3D%22M35%202h35v26H35z%22%2F%3E%3Cpath%20d%3D%22M45.49%2020.098a5.063%205.063%200%200%201-2.52-.644%204.823%204.823%200%200%201-1.82-1.778c-.448-.765-.672-1.629-.672-2.59%200-.952.224-1.806.672-2.562a4.792%204.792%200%200%201%201.82-1.792%205.063%205.063%200%200%201%202.52-.644c.924%200%201.764.215%202.52.644a4.693%204.693%200%200%201%201.806%201.792c.448.756.672%201.61.672%202.562%200%20.961-.224%201.825-.672%202.59a4.721%204.721%200%200%201-1.806%201.778%205.064%205.064%200%200%201-2.52.644Zm0-1.75c.588%200%201.106-.13%201.554-.392.448-.27.798-.653%201.05-1.148.252-.495.378-1.069.378-1.722s-.126-1.223-.378-1.708a2.689%202.689%200%200%200-1.05-1.134c-.448-.261-.966-.392-1.554-.392-.588%200-1.11.13-1.568.392-.448.261-.798.64-1.05%201.134-.252.485-.378%201.055-.378%201.708s.126%201.227.378%201.722c.252.495.602.877%201.05%201.148.457.261.98.392%201.568.392Zm12.082-8.12v1.582h-4.074v2.506h3.122v1.554h-3.122V20h-1.96v-9.772h6.034Zm7.016%200v1.582h-4.074v2.506h3.122v1.554h-3.122V20h-1.96v-9.772h6.034Z%22%20fill%3D%22%239E9FA1%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2270%22%20height%3D%2227%22%20rx%3D%2211%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2268%22%20height%3D%2225%22%20rx%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); height: 34px; background-size: contain; background-repeat: no-repeat; width: 74px; } .demo_on_off.onswitch { background-image: url("data:image/svg+xml; charset=utf8, %3Csvg%20width%3D%2272%22%20height%3D%2229%22%20viewBox%3D%220%200%2072%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20fill%3D%22%2357585C%22%20d%3D%22M2%202h33v26H2z%22%2F%3E%3Cpath%20d%3D%22M13.562%2020.098a5.064%205.064%200%200%201-2.52-.644%204.823%204.823%200%200%201-1.82-1.778c-.448-.765-.672-1.629-.672-2.59%200-.952.224-1.806.672-2.562a4.793%204.793%200%200%201%201.82-1.792%205.064%205.064%200%200%201%202.52-.644c.924%200%201.764.215%202.52.644a4.691%204.691%200%200%201%201.806%201.792c.448.756.672%201.61.672%202.562%200%20.961-.224%201.825-.672%202.59a4.72%204.72%200%200%201-1.806%201.778%205.063%205.063%200%200%201-2.52.644Zm0-1.75c.588%200%201.106-.13%201.554-.392.448-.27.798-.653%201.05-1.148.252-.495.378-1.069.378-1.722s-.126-1.223-.378-1.708a2.689%202.689%200%200%200-1.05-1.134c-.448-.261-.966-.392-1.554-.392-.588%200-1.11.13-1.568.392-.448.261-.798.64-1.05%201.134-.252.485-.378%201.055-.378%201.708s.126%201.227.378%201.722c.252.495.602.877%201.05%201.148.458.261.98.392%201.568.392ZM27.97%2020h-1.96l-4.438-6.706V20h-1.96v-9.786h1.96l4.438%206.72v-6.72h1.96V20Z%22%20fill%3D%22%239E9FA1%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M35%202h35v26H35z%22%2F%3E%3Cpath%20d%3D%22M45.49%2020.098a5.063%205.063%200%200%201-2.52-.644%204.823%204.823%200%200%201-1.82-1.778c-.448-.765-.672-1.629-.672-2.59%200-.952.224-1.806.672-2.562a4.792%204.792%200%200%201%201.82-1.792%205.063%205.063%200%200%201%202.52-.644c.924%200%201.764.215%202.52.644a4.693%204.693%200%200%201%201.806%201.792c.448.756.672%201.61.672%202.562%200%20.961-.224%201.825-.672%202.59a4.721%204.721%200%200%201-1.806%201.778%205.064%205.064%200%200%201-2.52.644Zm0-1.75c.588%200%201.106-.13%201.554-.392.448-.27.798-.653%201.05-1.148.252-.495.378-1.069.378-1.722s-.126-1.223-.378-1.708a2.689%202.689%200%200%200-1.05-1.134c-.448-.261-.966-.392-1.554-.392-.588%200-1.11.13-1.568.392-.448.261-.798.64-1.05%201.134-.252.485-.378%201.055-.378%201.708s.126%201.227.378%201.722c.252.495.602.877%201.05%201.148.457.261.98.392%201.568.392Zm12.082-8.12v1.582h-4.074v2.506h3.122v1.554h-3.122V20h-1.96v-9.772h6.034Zm7.016%200v1.582h-4.074v2.506h3.122v1.554h-3.122V20h-1.96v-9.772h6.034Z%22%20fill%3D%22%2376E51F%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2270%22%20height%3D%2227%22%20rx%3D%2211%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2268%22%20height%3D%2225%22%20rx%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); height: 34px; background-size: contain; background-repeat: no-repeat; width: 74px; } .demo_on_off { top: 15px; left: 15px; } div.rgb_switch_container { position: absolute; top: 15px; left: 15px; text-align: left; color: #fff; } .rgb_switch { background: url(../images/misc/RGB.png) no-repeat; height: 34px; background-size: auto 100%; width: 74px; display: inline-block; } .make_style_form div.size-box { margin: 5px; padding: 5px; background: #f5f5f5; border-radius: 15px; font-size: 1.1rem !important; } .make_style_form div.size-box strong, .make_style_form div.size-box .s_size2 div { font-size: 12px; font-weight: 600; } #input_text::-webkit-input-placeholder { text-align: center; padding-top: 1%; } textarea[data-placeholder].active { color: #8a8a8a !important; } .option-label { font-weight: 600; } .make_style_form div.size-box.active, .make_style_form div.size-box:hover { box-shadow: unset; border-color: transparent; border-radius: 15px; border: 1px solid #ff7ac7; background: #fff; } .make_style_form .size-box .s_price div:nth-child(2), .make_style_form .s_size2 div:nth-child(2), .make_style_form .s_size div:nth-child(2) { /*background: #e7e6e6;*/ background: #f5f5f5; } .make_style_form div.size-box.active .s_price div:nth-child(2), .make_style_form div.size-box.active .s_size2 div:nth-child(2), .make_style_form div.size-box.active .s_size div:nth-child(2), .make_style_form div.size-box:hover .s_price div:nth-child(2), .make_style_form div.size-box:hover .s_size2 div:nth-child(2), .make_style_form div.size-box:hover .s_size div:nth-child(2), .make_style_form div.size-box.active strong, .make_style_form div.size-box.active .s_size2 div, .make_style_form div.size-box.active .s_size div, .make_style_form div.size-box:hover strong, .make_style_form div.size-box:hover .s_size2 div, .make_style_form div.size-box:hover .s_size div { background: #fff; } .make_style_form .size-box .s_price { color: #000; font-size: 18px; padding-left: 0px; font-weight: 600; } .total-section { background: #f5f5f5; padding: 8px 10px 4px; font-size: 14px; border-radius: 8px; text-align: left; margin-bottom: 8px; } .total_sel_price { float: right; } button.addtocart, button.free-quote-button { border: none !important; font-weight: 600; display: inline-block; padding: 4px 0; text-decoration: none; font-size: 120%; color: #fff; text-align: center; transition: all 0.5s; background-color: #5761ff; width: 100%; letter-spacing: 1px; } button.addtocart, button.free-quote-button { padding: 13px 0; border-radius: 8px; } button.addtocart:hover, button.free-quote-button:hover { color: #fff; background-color: #37b778; } @media all and (max-width: 30em) { button.addtocart, button.free-quote-button { display: block; margin: 0.4em auto; } } .get-quote-btn { color: #5d5d5d !important; font-weight: bolder; text-transform: uppercase; } button.click-save-button { padding: 10px 40px; border-radius: 10px; font-size: 16px; display: inline-block; border: none; text-decoration: none; font-weight: 300; text-align: center; transition: all 0.5s; width: 100%; background: #5761ff; color: #fff; font-weight: 600; } button.click-save-button:hover { color: #fff; background-color: #ff7ac7; } .save-design { margin-right: 0; margin-top: 15px; font-size: 18px; font-weight: 600; line-height: 24px; cursor: pointer; background-color: #f4f4f4; border-radius: 15px; padding: 15px; } .save-design img { margin-right: 10px; } .save-design-wrapper { font-size: 12px; } .save-design-wrapper .dd-tooltip { position: relative; display: inline-block; } .save-design-wrapper .dd-tooltip .tooltiptext { visibility: hidden; width: 140px; background-color: #555; color: #fff; font-size: 12px; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; } .save-design-wrapper .dd-tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .save-design-wrapper .dd-tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } /* 1-10-20 */ strong, .strong { background: #f5f5f5; text-transform: capitalize; padding-left: 0px; } .plug_style label { font-size: 16px; color: #6a6a6a; font-weight: 600; } .plug_style h4 { color: #333333e8; letter-spacing: normal; } .demo_text { background-size: cover; background-position: center bottom; background-repeat: no-repeat; height: 100%; } .form-group.plug_style .btn-default { border: 0; background: #f5f5f5; } .form-group.plug_style i { border: 0; } @media screen and (max-width: 899px) { body { max-width: 100% !important; overflow-x: hidden !important; } .custom { max-width: 100% !important; overflow-x: hidden !important; } #merchantwidget-iframe-wrapper{ display:none; } } @media screen and (max-width: 767px) { body { max-width: 100% !important; overflow-x: hidden !important; } .custom { max-width: 100% !important; overflow-x: hidden !important; } .col-xs-12.top-logo { float: none; } .color_desc { background-color: #fff !important; } } @media handheld, screen and (min-width: 768px) and (max-width: 899px) { .col-xs-12.top-logo { float: none; } } @media screen and (max-width: 767px) { .page-footer-logo img { max-width: 300px; } } .two_btn .col-md-6 a, .quote_form_two_btn .col-md-6 a { color: #2b2b2b; } /*tabnewend*/ #quoteform { width: 100%; } .two_btn, .quote_form_two_btn { margin-bottom: 0; padding: 30px 16px 30px; } .two_btn .btn, .quote_form_two_btn .btn { display: inline-block; text-decoration: none; text-align: center; transition: all 0.5s; background-color: #f4f4f4; width: 100%; letter-spacing: 0; margin: 0 auto 20px; padding: 15px; border-radius: 15px; font-size: 16px; font-weight: 600; outline: none !important; text-transform: none; } #quoteform { margin: 0; padding: 10px 30px; } #quoteform .for_more { font-size: 20px; text-transform: uppercase; } #heading-section h3.rush-order { letter-spacing: 3px; } #color_table li.col-xs-2.rush-order { width: 16% !important; } a.rush-order { color: #fff; } a.standard-order { color: #fff; } div.editor-standard-price { display: flex; align-items: center; } .rush-order-info { /* changed */ color: #000; font-weight: 400; font-size: 12px; line-height: 14px; } div.editor-standard-price div.total_sel_price { font-size: 20px; line-height: 22px; width: 50%; text-align: right; font-weight: 500; } .size-notice, .size-notice-lenght, .size-notice-height { border-radius: 10px; } div.sign-containment { position: absolute; top: 0; left: 0; } div.sign-container { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } /* For dimension calculation */ div.size-indicator { position: absolute; text-align: center; display: flex; align-items: center; justify-content: center; color: rgb(191 190 190); font-size: 0.85rem; } div.right-handle { left: 0; top: 0; bottom: 0; flex-direction: column; } div.indicator-container { position: relative; height: 100%; width: 100%; } div.right-handle div.indicator-container { width: 8px; } .indicator-container span { background-color: rgb(255 255 255); position: absolute; } div.indicator-container span.first { height: 100%; top: 0; bottom: 0; left: calc(50%); /* left: calc(50% - 1px); if 2px wide */ width: 1px; } .indicator-container span.second { width: 100%; height: 1px; left: 0; right: 0; top: 0; } .indicator-container.bottom span.second { top: unset; bottom: 0; } div.bottom-handle { left: 0; right: 0; bottom: 0; } div.bottom-handle .indicator-container { height: 8px; } div.bottom-handle .indicator-container span.first { left: 0; top: 0; bottom: 0; width: 1px; } div.bottom-handle .indicator-container span.second { top: calc(50%); /* top: calc(50% - 1px); if 2px wide */ } div.indicator-container.right span.first { left: unset; right: 0; } div.calculated-width { margin: 0 4px; white-space: nowrap; color: #ffffff; text-shadow: 1px 1px 3px #343434; } div.calculated-height { text-shadow: 1px 1px 3px #343434; color: #ffffff; } div.demo_text_clone { position: relative; display: flex; justify-content: center; align-items: center; } div.demo_text_clone .text_show { position: absolute; color: white; text-align: center; } div.demo_text_clone div.text_show { text-shadow: none !important; } .message-pop { min-height: 170px; } .message-pop div { float: left; margin: 0 15px; width: 27%; } .message-pop div { font-weight: 400; font-size: 16px; } .message-pop div a { color: #5761ff; } .message-pop div strong { color: #ff7ac7; font-weight: 400; font-size: 16px; background-color: #fff; margin-bottom: 15px; display: inline-block; } .message_wrapper button { background-color: #5761ff; font-size: 16px; padding: 5px 45px; } div.small-ip67-warning { margin-top: 2px; font-size: 6px; line-height: 1.2; } a.see-photos { color: #5761fe !important; font-size: 11px; } div.color-examples { min-width: 116px; width: 33.32%; } div.color-examples a { color: #5761fe; font-size: 16px; line-height: 22px; font-weight: 600; } div.back-board-colors-container, div.non-latin-back-board-colors-container { text-align: left; } div.back-board-colors, div.non-latin-back-board-colors { margin: 0 -5px; clear: both; } div.back-board-color, div.non-latin-back-board-color { display: flex; margin: 5px; border-radius: 8px; width: calc(50% - 10px); border: 1px solid #d4d4d4; float: left; background-color: #f4f4f4; padding: 8px; cursor: pointer; justify-content: space-between; } div.back-board-color.active, div.non-latin-back-board-color.active { background-color: #fff; border-color: #ff7ac7; } div.back-board-color-img img { border-radius: 50%; min-width: 32px; width: 32px; height: 32px; border: 1px solid #979797; } div.back-board-color-text { font-size: 10px; line-height: 15px; } div.back-board-color-price { font-size: 16px; line-height: 22px; font-weight: 600; } div.back-board-text-container, div.non-latin-back-board-text-container { clear: both; } div.back-board-text-container a.see-photos, div.non-latin-back-board-text-container a.see-photos { text-transform: uppercase; color: #5761fe !important; font-size: 16px; line-height: 22px; font-weight: 600; } label.wall-mount-label { display: inline-block !important; } div.wall-mount-kit-dropdown { display: inline-block; margin-left: 2px; } div.wall-mount-kit-dropdown div.dropdown-toggle { width: 100%; background: #f5f5f5; } .wall-mount-label .see-photos { color: #ff7ac7; } #wall_mount_kit_value, #might_like_wall_mount_kit_value { display: inline-block; margin: 0; text-transform: capitalize; width: 75px; text-align: left; font-weight: 500; font-size: 12px; top: -2px; position: relative; } div.wall-mount-kit-dropdown i { font-size: 1.2rem; } #save-design-url, #save-design-url-mob { background: #f5f5f5; padding: 15px; font-size: 12px; border-radius: 15px; text-align: left; word-break: break-all; margin: 0 0 20px 0; } ul.font-image-container { padding: 0; margin: 0 -3px; } ul.font-image-container li { height: auto; padding: 3px 3px; margin: 0; overflow-x: hidden; } ul.font-image-container li span { padding: 10px 2px; border: 1px solid #e9e9e9; border-radius: 6px; display: inline-block; width: 100%; position: relative; } ul.font-image-container li span:hover { background-color: #f4f4f4; border-color: #f4f4f4; } ul.font-image-container li.active span { background-color: #5761ff; border-color: #5761ff; } ul.font-image-container li.active span img { filter: invert(1) !important; } ul.font-image-container .custom-font { width: 100%; max-width: 87px; max-height: 29px; } ul.font-image-container .custom-font-new-tag{ background-color: #5761fe; color: white; width: 24px; height: 12px; font-size: 8px; position: absolute; top: 5px; right: 5px; border-radius: 4px; line-height: normal; } .text-highlight { color: #ff82cb !important; } div.non-latin-indoor-outdoor-container .custom-control-label { line-height: 1.5; } div.non-latin-backboard-type-header { padding: 0 10px 0; } div.non-latin-text-header { font-weight: 600; font-size: 13px; color: #6a6a6a; text-align: left; } div.non-latin-text-header .see-photos { font-weight: 500; } div.non-latin-price-quote-header { font-weight: 600; font-size: 17px; padding: 10px 0 5px; color: #828282; text-align: left; } div.non-latin-price-quote-body { color: #696969; font-size: 12px; line-height: 1.5; } div.free-quote-button-container { position: sticky; bottom: 0; padding-bottom: 5px; background: #fff; border-radius: 6px; } div.non-latin-back-board-colors-container { margin-bottom: 20px; } div.non-latin-indoor-outdoor-container { margin: 10px 0 5px !important; } form.non-latin-form { margin: 15px 0; } form.non-latin-form label { font-size: 13px; text-align: left !important; padding: 0 10px; color: #696969; } form.non-latin-form .non-latin-form-text { font-size: 12px; text-align: left; padding: 0 10px; color: #696969; line-height: 1.3; } form.non-latin-form div.input-field { padding: 0 10px; } form.non-latin-form .form-control { margin-bottom: 0px; } form.non-latin-form .non-latin-range-slider { margin: 10px 0 0; } form.non-latin-form .non-latin-slider-values { /* display: flex; justify-content: space-between; */ position: relative; height: 30px; padding: 0; margin: 0 10px; width: calc(100% - 20px); } form.non-latin-form .non-latin-slider-values .non-latin-slider-value { font-size: 12px; color: #696969; margin-bottom: 10px; position: absolute; } span.step-number { background-color: #5761fe; color: #fff; border-radius: 3px; padding: 0px 10px; font-size: 16px; margin-right: 5px; position: relative; top: -1px; } div.color-step-footer { display: flex; clear: both; padding-top: 5px; } div.rgb-color-header { color: #505050; font-weight: 600; font-size: 12px; line-height: 14px; text-transform: uppercase; } div.rgb-color-icon-container { width: 16.66%; display: flex; justify-content: center; } div.rgb-color-icon { width: 35px; height: 35px; border-radius: 50%; cursor: pointer; } div.rgb-color-icon.active, #color_table p.active { border: 3px solid #fff; position: relative; } div.rgb-color-icon.active::before, #color_table p.active::before { content: " "; position: absolute; z-index: -1; width: 41px; height: 41px; top: -6px; left: -6px; right: 0; bottom: 0; border: 3px solid #5761fe; border-radius: 50%; } div.rgb-color-text { font-size: 11px; line-height: 1.5; text-align: left; cursor: pointer; width: 49.98%; } div.rgb-color-desc { font-size: 10px; line-height: 11px; color: #979797; } div.rgb-upgrade-price-container { font-size: 12px; } div.waterproof-not-available-with-rgb { font-size: 11px; color: rgb(105, 105, 105); font-weight: normal; padding-top: 5px; } div.non-latin-waterproof-not-available-with-rgb { font-size: 11px; color: rgb(105, 105, 105); font-weight: normal; line-height: 1.1; } div.rgb-waterproof-message { color: rgb(105, 105, 105); font-size: 12px; padding-top: 3px; } .no-pad { padding: 0; } .color_desc .yt-container { overflow: hidden; aspect-ratio: 16/9; } .color_desc .yt-container iframe { width: 300%; height: 100%; margin-left: -100%; } div.exact-size-range-preview-container { position: absolute; color: #fff; background-color: rgb(0 0 0 / 70%); font-size: 11px; padding: 0 10px; border-radius: 5px; min-height: 52px; } div.exact-size-range-editor-container { padding: 5px 0 10px; } div.exact-size-preview-text { /*text-align: left;*/ } div.exact-size-number-preview-container { /*text-align: right; float:right*/ display:inline-block; width: 25px; text-align: left; } div.exact-size-number-preview-container.exact-cmsize-wrap{ width: 35px; } div.exact-size-height-wrap{ display:inline; margin-left:15px } span.exact-size-unit { float: right; } div.total-next-exact-size{ float: right; } div.exact-size-number-container { text-align: right; display: inline-block; /* width: 40px;*/ margin: 0 20px 0 5px; } div.exact-size-slider-bottom{ text-align: center; } div.exact-size-slider-bottom .total_sel_price{ /*float: none;*/ display: inline; font-size: 11px; text-transform: uppercase; } div.disclaimer-text{ float: left; } div.disclaimer-text a{ color: #5761fe; } .step-title.disclaimer-text{ float: none; } div.exact-size-slider-bottom div.disclaimer-text a{ color: #878eff; } div.exact-size-slider-bottom .exact-min-width-text-container{ display: inline; margin-left: 15px; } div.exact-size-number-container.exact-size-cm-width { /*width: 50px; */ } div.exact-size-range-text { font-size: 11px; font-weight: 600; text-align: left; padding-bottom: 5px; } input.exact-width-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; background: #d3d3d3; outline: none; opacity: 0.9; margin: 8px 0; -webkit-transition: .2s; transition: opacity .2s; } div.exact-size-range-preview-container input.exact-width-slider { background: #fff; } input.exact-width-slider:hover { opacity: 1; } input.exact-width-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border: 0; background: url('/create-neon-sign/images/misc/bluesizer28.png'); cursor: pointer; border-radius: 50%; } input.exact-width-slider::-moz-range-thumb { width: 28px; height: 28px; border: 0; background: url('/create-neon-sign/images/misc/bluesizer28.png'); cursor: pointer; border-radius: 50%; } div.design-container { position: relative; } div.preview-container { width: 100%; position: relative; top: 0; } div.editor-container { width: 100%; margin: 0; border-radius: 12px; position: absolute; z-index: 2; display: block; } div.editor-right-border { width: 20px; background-color: #c0b8b4; } div.editor-top-border { height: 30px; background-color: #c0b8b4; position: sticky; margin-left: -20px; margin-right: -20px; z-index: 1000; } div.editor-curve-container { height: 30px; position: relative; } div.editor-curve-top { /*changed from 5px */ height: 10px; background-color: #fff; border-radius: 12px 12px 0 0; position: absolute; bottom: -1px; width: 100%; } div.editor-bottom-border { height: 30px; background-color: #c0b8b4; position: sticky; bottom: 0; margin-left: -20px; margin-right: -20px; } div.editor-curve-container { height: 30px; position: relative; } div.editor-curve-bottom { /*changed from 5px */ height: 10px; background-color: #fff; border-radius: 0 0 12px 12px; position: absolute; top: 0; width: 100%; } div.editor-content-container { height: 100%; overflow: auto; padding: 5px 5px 0; } div.add-to-cart-container { background-color: #fff; padding-bottom: 10px; } div.m-step { height: auto; padding-top: 10px; } div.m-step-1, div.m-step-9 { padding-top: 0; } div.step-content { padding: 0 5px; } div.step-header { text-align: center; text-transform: uppercase; font-size: 18px; font-weight: 500; margin: 30px 0 10px; } div.step-header-mobile { position: absolute; top: 0; width: 100%; z-index: 1; background: white; margin: 0; display: flex; justify-content: space-between; align-items: center; height: 58px; border-radius: 12px 12px 0 0; text-align: left; margin: 0; height: auto; background-color: transparent; position: inherit; } span.back-arrow { display: none !important; width: 65px; height: 42px; margin-left: 15px; background-color: #5761fe; color: #fff; float: left; display: flex; align-items: center; justify-content: center; border-radius: 6px; } span.forward-arrow { display: none !important; width: 65px; height: 42px; margin-right: 15px; background-color: #5761fe; color: #fff; float: right; display: flex; align-items: center; justify-content: center; border-radius: 6px; } span.step-text { padding: 7px 5px; display: inline-block; } div.step-title { color: #828282; font-size: 12px; text-align: left; margin: 0 0 10px; } div.step-1-title { color: #828282; font-size: 12px; text-align: left; margin: 0 0 10px; display: flex; } div.step-1-input-container { display: flex; flex-direction: row; } textarea#input_text { text-align: center; padding-top: 10px; background: #f5f5f5; border-radius: 12px; border: 1px solid #b9b9b9; height: 135px; width: 100%; } div.logo-quote-container { width: 40%; background-color: #5761fe; margin-left: 20px; border-radius: 12px; text-transform: uppercase; } div.logo-quote-container div.logo-text { color: #ff84c7; margin: 7px 18px; font-weight: 600; font-size: 17px; } div.logo-quote-container a.quote-text { color: #fff; border: 1px solid #ff84c7; display: inline-block; padding: 2px 10px; border-radius: 20px; } div.align-wrap-desktop { flex-direction: row; width: auto; height: 100%; border: none; } div.align-wrap-desktop .align_icon { margin: 0px 4px; height: 45px; } div.align-wrap-desktop .align_icon.active { background-color: #ff7ac7; } div.modal { z-index: 1503; } #helpModal div.modal-body { padding: 20px 40px; } #helpModal p { font-size: 14px; color: #9a9a9a; margin-bottom: 7px; } #helpModal input.form-control { margin-bottom: 7px; } #helpModal textarea.form-control { border: 1px solid #ccc; } div.help-header { text-align: center; font-size: 20px; padding: 20px 20px 0; font-weight: 500; letter-spacing: 0.5px; } label.help-label { float: left; font-size: 15px; margin-bottom: 5px; font-weight: 500; } img.help-close { float: right; cursor: pointer; } button.quote-btn { background-color: #5761ff; padding: 10px 40px; color: #fff; } button.quote-btn:hover { background-color: #ff7ac7; } span.two-btn-brk { display: block; } .two_btn .btn { font-size: 18px; } div.digital-disclaimer { padding: 0 15px; background-color: transparent; } div.price-preview-container { position: absolute; top: 15px; right: 15px; color: white; } div.total-discounted-price { font-size: 15pt; text-align: right; margin-bottom: 5px; } div.price-breakup-image { font-size: 11px; } .strikethrough-diagonal-price { position: relative; font-weight: bold; &:before { position: absolute; content: ""; left: 0; top: 45%; right: 0; border-top: 4px solid; border-color: #ff84c7; -webkit-transform: skewY(-10deg); -moz-transform: skewY(-10deg); transform: skewY(-10deg); } } div.price-breakup { text-align: right; } span.after-discount-price { color: #ff84c7; } span.discount-code { background-color: #ff84c7; color: #fff; padding: 2px 4px; margin-left: 5px; } div.editor-discounted-price span.discount-code { background-color: inherit; color: #ff84c7; padding: 2px 4px; } div.editor-discounted-price div.total-discounted-price { font-size: 24px; } div.rgb_switch_text { font-size: 11px; line-height: 11px; } div.discount-info-preview { font-size: 11px; } li.neon-color { width: 16.66666667%; float: left; } div.background-images-container { width: 100%; position: absolute; bottom: 25px; text-align: center; } div.background-images { background-color: rgba(0, 0, 0, 0.5); padding: 10px; display: inline-block; } div.background-image { width: 60px; height: 60px; display: inline-block; margin: 0 5px; cursor: pointer; } div.background-image.active { width: 70px; height: 70px; } div.background-image img { width: 100%; height: 100%; border-radius: 8px; } div.get-quote-xs { font-size: 14px; line-height: 16px; color: #828282; text-align: left; margin: 10px 0; } div.get-quote-xs a { color: #5761fe; } div.proof-sign-container { position: relative; } div.demo_text::before { content: ""; position: absolute; top: 0; left: 90%; display: block; width: 12%; height: 12%; } div.demo_text::after { content: ""; position: absolute; display: block; width: 12%; height: 12%; bottom: 0; left: 90%; } div.split-view div.demo_text.bg-1::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #c0b8b4 85% ); } div.split-view div.demo_text.bg-1::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #c0b8b4 85% ); } div.split-view div.demo_text.bg-2::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dbdada 85% ); } div.split-view div.demo_text.bg-2::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dbdada 85% ); } div.split-view div.demo_text.bg-3::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #908e89 85% ); } div.split-view div.demo_text.bg-3::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #908e89 85% ); } div.split-view div.demo_text.bg-4::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dddddd 85% ); } div.split-view div.demo_text.bg-4::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dddddd 85% ); } div.split-view div.demo_text.bg-5::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-5::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-6::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-6::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-7::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #2e2d32 85% ); } div.split-view div.demo_text.bg-7::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #2e2d32 85% ); } div.split-view div.demo_text.bg-8::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #babdc2 85% ); } div.split-view div.demo_text.bg-8::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #babdc2 85% ); } div.split-view div.demo_text.bg-9::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #291814 85% ); } div.split-view div.demo_text.bg-9::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #291814 85% ); } div.split-view div.demo_text.bg-10::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #181e1a 85% ); } div.split-view div.demo_text.bg-10::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #181e1a 85% ); } div.split-view div.demo_text.bg-11::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #717171 85% ); } div.split-view div.demo_text.bg-11::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #717171 85% ); } div.split-view div.demo_text.bg-12::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #1c1c1c 85% ); } div.split-view div.demo_text.bg-12::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #1c1c1c 85% ); } div.split-view div.demo_text.bg-13::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dbdbdb 85% ); } div.split-view div.demo_text.bg-13::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dbdbdb 85% ); } div.split-view div.demo_text.bg-14::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-14::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-15::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #979797 85% ); } div.split-view div.demo_text.bg-15::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #979797 85% ); } div.split-view div.demo_text.bg-16::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #291814 85% ); } div.split-view div.demo_text.bg-16::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #291814 85% ); } div.split-view div.demo_text.bg-17::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-17::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85% ); } div.split-view div.demo_text.bg-18::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #bdbcb8 85% ); } div.split-view div.demo_text.bg-18::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #bdbcb8 85% ); } div.split-view div.demo_text.bg-19::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #2f2d28 85% ); } div.split-view div.demo_text.bg-19::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #2f2d28 85% ); } div.split-view div.demo_text.bg-20::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #acacac 85% ); } div.split-view div.demo_text.bg-20::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #acacac 85% ); } div.split-view div.demo_text.bg-21::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #8e6a48 85% ); } div.split-view div.demo_text.bg-21::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #8e6a48 85% ); } div.split-view div.demo_text.bg-22::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #1f2a19 85% ); } div.split-view div.demo_text.bg-22::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #1f2a19 85% ); } div.split-view div.demo_text.bg-23::before { background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #e698aa 85% ); } div.split-view div.demo_text.bg-23::after { background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #e698aa 85% ); } div.proof-field { display: flex; justify-content: space-between; } div.design-proof-form div.proof-field label { font-size: 14px; color: #2f2f2f; font-weight: 500; } div.design-proof-form div.proof-field div { font-size: 14px; line-height: 17px; color: #2f2f2f; font-weight: 400; } img.proof-sign { max-height: 140px; width: auto; max-width: 100%; } div.design-proof-form .calculated-width, div.design-proof-form .calculated-height { text-shadow: none; color: #d3d3d3; } div.design-proof-step-header { justify-content: space-between; align-items: start; } span.design-proof-close { cursor: pointer; padding: 10px; z-index: 5; } div.design-proof-sub-header { color: #979797; font-size: 10px; font-weight: 400; text-transform: uppercase; } div.split-view { display: flex; } div.add-to-cart-form { height: calc(100% - 55px); margin-bottom: 10px; } div.design-proof-form { height: calc(100% - 58px); line-height: 1.3em; } div.proof-backboard-color-value, div.proof-wall-mounting-value { text-transform: capitalize; } div.font-dropdown-container { text-align: left; margin-bottom: 8px; display: flex; } div.font-dropdown { display: inline-block; padding: 5px 10px; border: 1px solid #d4d4d4; border-radius: 4px; background-color: #f4f4f4; font-size: 25px; user-select: none; width: calc(30% + 30px); height: 45px; } div.font-dropdown div.selected-font { display: inline-block; width: calc(100% - 25px); height: 100%; text-align: center; } div.font-dropdown div.selected-font img { width: auto; height: 100%; max-width: 100%; max-height: 100%; } div.font-dropdown i.fa { float: right; margin-top: 2px; } div.m-step-checkout { position: sticky; bottom: 0; background-color: #fff; padding-bottom: 10px; } div.step-helper-header { display: flex; justify-content: space-between; font-size: 20px; font-weight: 600; margin: 30px 15px 10px; } div.step-helper-body { color: #828282; font-size: 12px; text-align: left; margin: 0px 20px 20px; } span.step-text-first { margin-left: 15px; } div.indoor-outdoor-container { padding-top: 5px; } div.board-box-warning-message { background-color: #ff7ac7; color: #fff; text-align: left; padding: 8px 15px; font-size: 14px; font-weight: 400; border-radius: 10px; margin-top: 3px; } div.cart-suggestion-container { margin-bottom: 5px; } div.cart-suggestion-header { text-transform: uppercase; text-align: left; margin-bottom: 5px; } div.cart-suggestion-body { display: flex; } div.cart-suggestion-description { text-align: left; margin-left: 10px; } div.cart-suggestion-img img { max-width: 60px; min-width: 40px; height: auto; } div.cart-suggestion-description label { margin-bottom: 4px; color: #2f2f2f; font-weight: 400; font-size: 14px; } div.cart-suggestion-description div.wall-mount-kit-dropdown { margin-left: 0; } div.cart-suggestion-description-text { font-size: 10px; line-height: 1.2; margin-bottom: 3px; font-weight: 500; } div.cart-suggestion-action { align-items: center; display: flex; justify-content: center; margin-left: 12px; } div.cart-suggestion-action button { background-color: #f5f5f5; padding: 10px 20px; border: none; border-radius: 6px; } div.design-proof-total { justify-content: right; } div.demo_box_side div.text_show, div.demo_text_clone div.text_show { margin: 0 0 45px 0; } /* For Medium screen */ @media (min-width: 768px) { div.small-ip67-warning { font-size: 8px; } div.wall-mount-kit-dropdown #wall_mount_kit_value { width: 75px; } div.wall-mount-kit-dropdown { margin-left: 10px; } } @media only screen and (max-width: 335px) { .total_sel_price { font-size: 8pt; font-weight: bold; } } @media screen and (min-width: 335px) and (max-width: 375px) { .total_sel_price { font-size: 13pt; font-weight: bold; } } @media screen and (min-width: 993px) and (max-width: 1110px) { .total_sel_price { font-size: 13pt; font-weight: bold; } } @media screen and (min-width: 1110px) and (max-width: 1175px) { .total_sel_price { font-size: 16pt; font-weight: bold; } } @media (min-width: 1175px) { .color_desc .yt-container { pointer-events: none; } } @media (max-width: 899px) { .container { padding: 0 !important; } .WordSection1 .col-md-6:first-child { padding-right: 0 !important; } div.exact-size-range-preview-container { width: calc(100% - 30px); left: 15px !important; top: calc(100% - 75px); } } @media (min-width: 900px) { div.exact-size-range-preview-container { width: 430px; left: calc(50% - 215px); top: calc(100% - 190px); } .make_style_form { width: calc(100% - 35px); height: calc(100% - 60px); padding: 0 20px; } div.editor-content-container { overflow: inherit; padding: 0; } div.m-step-1 { padding-top: 10px; } textarea#input_text { width: 60%; height: 100px; } li.neon-color { width: 11.11%; } div.color-step-footer { padding-top: 10px; } div.rgb-color-icon-container { width: 11.11%; } div.rgb-color-text { width: 44.44%; } div.color-examples { width: 44.44%; text-align: center; } span.step-text { padding: 10px 0 2px; } span.step-text-first { padding-top: 0; margin-left: 0; } div.m-step { height: auto; } div.step-content { padding: 0; height: auto; margin-top: 0; overflow: visible; } div.step-header-mobile { text-align: left; margin: 0; height: auto; background-color: transparent; position: inherit; } div.editor-container { max-width: 600px; padding: 0; position: static; display: flex; } span.back-arrow, span.forward-arrow { display: none; } div.upload-get-help { margin: 0 0 10px; } div.upload-get-help a { color: #5761fe; } span.two-btn-brk { display: inline-block; } .two_btn .btn { font-size: 16px; } #save-design-url { margin-right: 15px; } .save-design { margin-top: 0; margin-right: 15px; font-size: 16px; } a.board-box, a.non-latin-board-box { width: calc(33.3% - 10px); padding: 10px; margin: 5px; } div.demo_box_side div.text_show, div.demo_text_clone div.text_show { margin: 0 40px 140px 0; } span.step-option-text { margin-left: 0; } div.design-proof-form { min-height: calc(100vh - 333px); } div.add-to-cart-form { height: 100%; min-height: auto; margin-bottom: 15px; } div.add-to-cart-container { bottom: 30px; padding-bottom: 10px; } div.cart-suggestion-img img { max-width: none; min-width: 95px; } div.cart-suggestion-description-text { margin-bottom: 8px; } } @media (min-width: 767px) { div.discount-info-preview { font-size: 15px; } div.total-discounted-price { font-size: 22pt; } div.rgb_switch_text { font-size: 15px; line-height: 15px; } } @media (max-width: 767px) { #my-faq-section .faq-featured-area .faq-featured-item { width: 100%; } #my-faq-section .accordion-primary { padding-left: 0px; padding-right: 0px; } .accordion-primary .my-faq-item { width: 100%; /* changed */ margin-bottom: 25px; /* changed */ padding: 20px; /* changed */ gap: 12px; /* changed */ background-color: #fbfbfb; /* changed */ border-radius: 12px; /* changed */ border: 1px solid #eeeeee; } .size-box[data-size="xs"] .size-name { width: 74px; } } #fb-messanger-fake-button { position: fixed; bottom: 24px; left: 24px; z-index: 100; transition: opacity 0.3s; } #size_table .size-box { position: relative; min-height: 62px; } #size_table .size-box .popular::before { content: ""; display: inline-block; width: 116px; height: 124px; background-image: url(/create-neon-sign/images/mostpop.svg); background-repeat: no-repeat; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); filter: drop-shadow(0px 2px 2px #cdcdcd); } .kl-private-reset-css-Xuajs1 { display: none !important; } .proof-sign-container.landscape-view { display: none; } .proof-sign-container.not-landscape-view { display: block; } .design-proof-form-layout { display: flex; flex-direction: column; height: calc(100% - 120px); position: relative; } .design-proof-form-left { width: 100%; padding-right: 0; } .design-proof-form-right { width: 100%; padding-left: 0; height: 100%; } .design-proof-form-right .add-to-cart-container { width: 100%; } .simplebar-scrollbar:before { background-color: #d1d1d1 !important; opacity: 1 !important; } .amount-type-discount .total-discounted-price { margin-top: 7px; } @media (orientation: landscape) and (max-width: 899px) { textarea#input_text { height: 130px; } .align_icon svg { height: 37px; } .proof-sign-container.not-landscape-view { display: none; } .proof-sign-container.landscape-view { display: flex; width: 100%; margin-top: -55px; text-align: center; justify-content: center; } .design-proof-form-layout { display: flex; flex-direction: row; height: 100%; position: initial; } .design-proof-form-left { padding-right: 7px; } .design-proof-form-right { padding-left: 7px; } div.add-to-cart-form { height: calc(100% - 49px); } div.design-proof-form { height: 100%; } #merchantwidget-iframe-wrapper{ display:none; } } @media (orientation: portrait) and (max-width: 899px) { div.design-proof-form-layout .add-to-cart-container{ margin-top: 10px !important; } #merchantwidget-iframe-wrapper{ display:none; } } /* For XXS screen */ @media (max-width: 430px) { #size_table .size-box .s_size, #size_table .size-box .s_size2 { font-size: 11px !important; } .size-box { margin: 3px !important; width: calc(50% - 6px); } a.board-box, a.non-latin-board-box { padding: 2px 2px 5px; width: calc(33.3% - 6px); margin: 3px; } } @media (max-width: 379px) { div.col-xxs-12 { width: 100%; } #size_table .size-box .s_size, #size_table .size-box .s_size2 { text-align: left; } } @media (max-width: 359px) { div.board-box-type { font-size: 9px; } div.board-box-price { font-size: 10px; } } @media (orientation: landscape) and (max-width: 680px) { div.col-xxs-12 { width: 100%; } #size_table .size-box .s_size, #size_table .size-box .s_size2 { text-align: left; } } @media (min-width: 768px) and (max-width: 899px) { div.design-container .cn-hidden-sm, div.editor-form-helper .cn-hidden-sm { display: none !important; } } @media (min-width: 900px) and (max-width: 1199px) { div.design-container .cn-hidden-md { display: none !important; } a.board-box, a.non-latin-board-box { padding: 5px; } div.back-board-color, div.non-latin-back-board-color { padding: 5px; } } @media (min-width: 900px) and (max-width: 1099px) { div.design-container .cn-hidden-back-md { display: none !important; } } @media (min-width: 1100px) and (max-width: 1249px) { div.design-container .cn-hidden-back-lg { display: none !important; } } .price-preview-container .discount-text.discount-mobile{ display: block; } .price-preview-container .discount-code.discount-mobile{ float: right; } .price-preview-container .total-discounted-price.discount-mobile{ margin-top: 30px; } .price-preview-container.price-preview.discount-mobile{ top: 70px !important; } /* Zendesk Chat css*/ iframe[title="Close message"], iframe[title="Message from company"]{ display:none !important; } .wpcc-container{ font-size: 13px !important; line-height: 14px !important; } .demo_text .text_show.warmwhite-7{ color: #fefff5; text-shadow: #d9d95c 0px 0px 3px, rgba(0, 0, 0,0.1) 1px 1px 1px, #fffdde 0px 0px 6px, #fffdde 0px 0px 10px, #fffdde 0px 0px 13px, #fffdde 0px 0px 16px, #fffdde 0px 0px 20px, #fffdde 0px 0px 24px, #fffdde 0px 0px 28px, #fffdde 0px 0px 32px, #fffdde 0px 0px 40px; } .demo_text .text_show.white-7{ color: #FFFFFF; text-shadow: #a2b6e7 0px 0px 3px, rgba(0, 0, 0,0.1) 1px 1px 1px, #FFFFFF 0px 0px 6px, #FFFFFF 0px 0px 10px, #FFFFFF 0px 0px 13px, #FFFFFF 0px 0px 16px, #FFFFFF 0px 0px 20px, #FFFFFF 0px 0px 24px, #FFFFFF 0px 0px 28px, #FFFFFF 0px 0px 32px, #FFFFFF 0px 0px 40px; } .demo_text .text_show.lemonyellow-7{ color: #fffee1; text-shadow: #caca00 0px 0px 3px, rgba(0, 0, 0,0.2) 1px 1px 1px, #fffb87 0px 0px 6px, #fffb87 0px 0px 10px, #fffb87 0px 0px 13px, #fffb87 0px 0px 16px, #fffb87 0px 0px 20px, #fffb87 0px 0px 24px, #fffb87 0px 0px 28px, #fffb87 0px 0px 32px, #fffb87 0px 0px 40px; } .demo_text .text_show.goldenyellow-7{ color: #fff5d6; text-shadow: #ce9e00 0px 0px 3px, rgba(0, 0, 0,0.3) 1px 1px 1px, #ffca1c 0px 0px 6px, #ffca1c 0px 0px 10px, #ffca1c 0px 0px 13px, #ffca1c 0px 0px 16px, #ffca1c 0px 0px 20px, #ffca1c 0px 0px 24px, #ffca1c 0px 0px 28px, #ffca1c 0px 0px 32px, #ffca1c 0px 0px 40px; } .demo_text .text_show.orange-7{ color: #ffdcb2; text-shadow: #c16a01 0px 0px 3px, rgba(0, 0, 0,0.3) 1px 1px 1px, #ff981a 0px 0px 6px, #ff981a 0px 0px 10px, #ff981a 0px 0px 13px, #ff981a 0px 0px 16px, #ff981a 0px 0px 20px, #ff981a 0px 0px 24px, #ff981a 0px 0px 28px, #ff981a 0px 0px 32px, #ff981a 0px 0px 40px; } .demo_text .text_show.lightred-7{ color: #ffd1d1; text-shadow: #cf0000 0px 0px 3px, rgba(0, 0, 0,0.3) 1px 1px 1px, #ff7a7a 0px 0px 6px, #ff7a7a 0px 0px 10px, #ff7a7a 0px 0px 13px, #ff7a7a 0px 0px 16px, #ff7a7a 0px 0px 20px, #ff7a7a 0px 0px 24px, #ff7a7a 0px 0px 28px, #ff7a7a 0px 0px 32px, #ff7a7a 0px 0px 40px; } .demo_text .text_show.red-7{ color: #ffb7b7; text-shadow: #bb0000 0px 0px 3px, rgba(0, 0, 0,0.4) 1px 1px 1px, #ff2a4d 0px 0px 6px, #ff2a4d 0px 0px 10px, #ff2a4d 0px 0px 13px, #ff2a4d 0px 0px 16px, #ff2a4d 0px 0px 20px, #ff2a4d 0px 0px 24px, #ff2a4d 0px 0px 28px, #ff2a4d 0px 0px 32px, #ff2a4d 0px 0px 40px; } .demo_text .text_show.pink-7{ color: #ffe9ff; text-shadow: #da2ada 0px 0px 3px, rgba(0, 0, 0,0.3) 1px 1px 1px, #ffa0f7 0px 0px 6px, #ffa0f7 0px 0px 10px, #ffa0f7 0px 0px 13px, #ffa0f7 0px 0px 16px, #ffa0f7 0px 0px 20px, #ffa0f7 0px 0px 24px, #ffa0f7 0px 0px 28px, #ffa0f7 0px 0px 32px, #ffa0f7 0px 0px 40px; } .demo_text .text_show.cottoncandy-7{ color: #ffe0ef; text-shadow: #d93084 0px 0px 3px, rgba(0, 0, 0,0.3) 1px 1px 1px, #ff80bf 0px 0px 6px, #ff80bf 0px 0px 10px, #ff80bf 0px 0px 13px, #ff80bf 0px 0px 16px, #ff80bf 0px 0px 20px, #ff80bf 0px 0px 24px, #ff80bf 0px 0px 28px, #ff80bf 0px 0px 32px, #ff80bf 0px 0px 40px; } .demo_text .text_show.deeppink-7{ color: #ffa3f7; text-shadow: #d6009c 0px 0px 3px, rgba(0, 0, 0,0.3) 1px 1px 1px, #ff5ad2 0px 0px 6px, #ff5ad2 0px 0px 10px, #ff5ad2 0px 0px 13px, #ff5ad2 0px 0px 16px, #ff5ad2 0px 0px 20px, #ff5ad2 0px 0px 24px, #ff5ad2 0px 0px 28px, #ff5ad2 0px 0px 32px, #ff5ad2 0px 0px 40px; } .demo_text .text_show.purple-7{ color: #f0e3ff; text-shadow: #5d00cf 0px 0px 3px, rgba(0, 0, 0,0.2) 1px 1px 1px, #c392ff 0px 0px 6px, #c392ff 0px 0px 10px, #c392ff 0px 0px 13px, #c392ff 0px 0px 16px, #c392ff 0px 0px 20px, #c392ff 0px 0px 24px, #c392ff 0px 0px 28px, #c392ff 0px 0px 32px, #c392ff 0px 0px 40px; } .demo_text .text_show.deepblue-7{ color: #8aaeff; text-shadow: #0000bd 0px 0px 3px, rgba(0, 0, 0,0.4) 1px 1px 1px, #4b4bff 0px 0px 6px, #4b4bff 0px 0px 10px, #4b4bff 0px 0px 13px, #4b4bff 0px 0px 16px, #4b4bff 0px 0px 20px, #4b4bff 0px 0px 24px, #4b4bff 0px 0px 28px, #4b4bff 0px 0px 32px, #4b4bff 0px 0px 40px; } .demo_text .text_show.electricblue-7{ color: #c9eaff; text-shadow: #0064dd 0px 0px 3px, rgba(0, 0, 0,0.2) 1px 1px 1px, #54bdff 0px 0px 6px, #54bdff 0px 0px 10px, #54bdff 0px 0px 13px, #54bdff 0px 0px 16px, #54bdff 0px 0px 20px, #54bdff 0px 0px 24px, #54bdff 0px 0px 28px, #54bdff 0px 0px 32px, #54bdff 0px 0px 40px; } .demo_text .text_show.iceblue-7{ color: #e9fcff; text-shadow: #00a9d9 0px 0px 3px, rgba(0, 0, 0,0.2) 1px 1px 1px, #72e0ff 0px 0px 6px, #72e0ff 0px 0px 10px, #72e0ff 0px 0px 13px, #72e0ff 0px 0px 16px, #72e0ff 0px 0px 20px, #72e0ff 0px 0px 24px, #72e0ff 0px 0px 28px, #72e0ff 0px 0px 32px, #72e0ff 0px 0px 40px; } .demo_text .text_show.tropicalblue-7{ color: #ccfaff; text-shadow: #00a7d3 0px 0px 3px, rgba(0, 0, 0,0.2) 1px 1px 1px, #39c9ef 0px 0px 6px, #39c9ef 0px 0px 10px, #39c9ef 0px 0px 13px, #39c9ef 0px 0px 16px, #39c9ef 0px 0px 20px, #39c9ef 0px 0px 24px, #39c9ef 0px 0px 28px, #39c9ef 0px 0px 32px, #39c9ef 0px 0px 40px; } .demo_text .text_show.mint-7{ color: #edfffa; text-shadow: #40d1a1 0px 0px 3px, rgba(0, 0, 0,0.1) 1px 1px 1px, #d5fff1 0px 0px 6px, #d5fff1 0px 0px 10px, #d5fff1 0px 0px 13px, #d5fff1 0px 0px 16px, #d5fff1 0px 0px 20px, #d5fff1 0px 0px 24px, #d5fff1 0px 0px 28px, #d5fff1 0px 0px 32px, #d5fff1 0px 0px 40px; } .demo_text .text_show.green-7{ color: #ccffdb; text-shadow: #00a531 0px 0px 3px, rgba(0, 0, 0,0.2) 1px 1px 1px, #44ff7c 0px 0px 6px, #44ff7c 0px 0px 10px, #44ff7c 0px 0px 13px, #44ff7c 0px 0px 16px, #44ff7c 0px 0px 20px, #44ff7c 0px 0px 24px, #44ff7c 0px 0px 28px, #44ff7c 0px 0px 32px, #44ff7c 0px 0px 40px; } .demo_text .text_show.deepgreen-7{ color: #5ffd5f; text-shadow: #007004 0px 0px 3px, rgba(0, 0, 0,0.3) 1px 1px 1px, #3cd65b 0px 0px 6px, #3cd65b 0px 0px 10px, #3cd65b 0px 0px 13px, #3cd65b 0px 0px 16px, #3cd65b 0px 0px 20px, #3cd65b 0px 0px 24px, #3cd65b 0px 0px 28px, #3cd65b 0px 0px 32px, #3cd65b 0px 0px 40px; }