@keyframes altcha-spinner{to{transform:rotate(360deg)}}.altcha{background:var(--altcha-color-base, transparent);border:var(--altcha-border-width, 1px) solid var(--altcha-color-border, #a0a0a0);border-radius:var(--altcha-border-radius, 3px);color:var(--altcha-color-text, currentColor);display:flex;flex-direction:column;max-width:var(--altcha-max-width, 260px);position:relative}.altcha:focus-within{border-color:var(--altcha-color-border-focus, currentColor)}.altcha[data-floating]{background:var(--altcha-color-base, white);display:none;filter:drop-shadow(3px 3px 6px rgba(0,0,0,.2));left:-100%;position:fixed;top:-100%;width:var(--altcha-max-width, 260px);z-index:999999}.altcha[data-floating=top] .altcha-anchor-arrow{border-bottom-color:transparent;border-top-color:var(--altcha-color-border, #a0a0a0);bottom:-12px;top:auto}.altcha[data-floating=bottom]:focus-within::after{border-bottom-color:var(--altcha-color-border-focus, currentColor)}.altcha[data-floating=top]:focus-within::after{border-top-color:var(--altcha-color-border-focus, currentColor)}.altcha[data-floating]:not([data-state=unverified]){display:block}.altcha-anchor-arrow{border:6px solid transparent;border-bottom-color:var(--altcha-color-border, #a0a0a0);content:"";height:0;left:12px;position:absolute;top:-12px;width:0}.altcha-main{align-items:center;display:flex;gap:.4rem;padding:.7rem;position:relative}.altcha-code-challenge{background:var(--altcha-color-base, white);border:1px solid var(--altcha-color-border-focus, currentColor);border-radius:var(--altcha-border-radius, 3px);filter:drop-shadow(3px 3px 6px rgba(0,0,0,.2));padding:.5rem;position:absolute;top:2.5rem;z-index:9999999}.altcha-code-challenge>form{display:flex;flex-direction:column;gap:.5rem}.altcha-code-challenge-input{border:1px solid currentColor;border-radius:3px;box-sizing:border-box;outline:0;font-size:16px;padding:.35rem;width:220px}.altcha-code-challenge-input:focus{outline:2px solid color-mix(in srgb,var(--altcha-color-active, #1D1DC9) 20%,transparent)}.altcha-code-challenge-input:disabled{opacity:.7}.altcha-code-challenge-image{background-color:#fff;border:1px solid currentColor;border-radius:3px;box-sizing:border-box;object-fit:contain;height:50px;width:220px}.altcha-code-challenge-audio,.altcha-code-challenge-reload{background:color-mix(in srgb,var(--altcha-color-text, currentColor) 10%,transparent);border:0;border-radius:3px;color:var(--altcha-color-text, currentColor);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.35rem}.altcha-code-challenge-audio:disabled,.altcha-code-challenge-reload:disabled,.altcha-code-challenge-verify:disabled{opacity:.7;pointer-events:none}.altcha-code-challenge-audio>*,.altcha-code-challenge-reload>*{height:20px;width:20px}.altcha-code-challenge-buttons{display:flex;justify-content:space-between}.altcha-code-challenge-buttons-left{display:flex;gap:.25rem}.altcha-code-challenge-verify{align-items:center;background:var(--altcha-color-active, #1D1DC9);border:0;border-radius:3px;color:#fff;cursor:pointer;display:flex;gap:.5rem;font-size:100%;padding:.35rem 1rem}.altcha-code-challenge-arrow{border:6px solid transparent;border-bottom-color:var(--altcha-color-border, currentColor);content:"";height:0;left:.15rem;position:absolute;top:-12px;width:0}.altcha[data-floating=top] .altcha-code-challenge{top:-150px}.altcha[data-floating=top] .altcha-code-challenge-arrow{border-bottom-color:transparent;border-top-color:var(--altcha-color-border, currentColor);bottom:-12px;top:auto}.altcha-label{cursor:pointer;flex-grow:1}.altcha-logo{color:currentColor!important;opacity:.7}.altcha-footer:hover,.altcha-logo:hover{opacity:1}.altcha-error{color:var(--altcha-color-error-text, #f23939);display:flex;font-size:.85rem;gap:.3rem;padding:0 .7rem .7rem}.altcha-footer{align-items:center;background-color:var(--altcha-color-footer-bg, transparent);display:flex;font-size:.75rem;opacity:.7;justify-content:end;padding:.2rem .7rem}.altcha-footer a{color:currentColor}.altcha-checkbox{display:flex;align-items:center;justify-content:center;height:24px;position:relative;width:24px}.altcha-checkbox .altcha-spinner{bottom:0;left:0;position:absolute;right:0;top:0}.altcha-checkbox input{width:18px;height:18px;margin:0}.altcha-checkbox-verifying input{appearance:none;opacity:0;pointer-events:none}.altcha-spinner{animation:altcha-spinner .75s infinite linear;transform-origin:center}.has-error .altcha { border-color: #d70a2d; } :root { --cc_sp-default-bg: rgba(150, 150, 150, 0.25); --cc_sp-label-border: rgba(150, 150, 150, 0.5); } html.prefers-color-mode-dark { --cc_sp-default-bg: rgba(150, 150, 150, 0.25); --cc_sp-label-border: rgba(150, 150, 150, 0.5); } @media (prefers-color-scheme: dark) { html:not(.prefers-color-mode-light) { --cc_sp-default-bg: rgba(150, 150, 150, 0.25); --cc_sp-label-border: rgba(150, 150, 150, 0.5); } } /* cc_icon- */ [class*="cc_icon-"] {font-size: 1em; width: 1em; max-width: 1em; flex: 0 0 1em; display: block; position: relative; } [class*="cc_icon-"]::before { content: ""; display: block; padding-top: 100%; position: relative; width: 100%; z-index: 1; } [class*="cc_icon-"] svg, [class*="cc_icon-"] img { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; transition: transform 0.150s; } .cc_imgbox { position: relative; display:block; } .cc_imgbox::before { padding-top: 56.25%; width:100%; display:block; content:''; } .cc_imgbox img { display: block; width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: 1; object-fit: cover; } .cc_imgbox iframe, .cc_imgbox video { display: block; width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: 1; border-radius: 1.5rem; } .cc_bw_wrapper {display: block; padding:0; position:relative; z-index:10; word-wrap: break-word; word-break: break-word; max-width: 936px; margin-left: auto; margin-right: auto; } .cc_bw_wrapper p:empty {display: none;} .cc_bw_wrapper::before, .cc_bw_wrapper::after {display:table; content:" ";} .cc_bw_wrapper::after {clear:both;} .cc_bw_button_blue {padding: 12px 15px;display: inline-block;vertical-align: middle;background-color: #0072c3;color: #fff !important;border: 0;text-decoration: none !important;cursor: pointer;} .cc_bw { margin-bottom: 40px;position: relative; } @media ( min-width: 768px ) { .cc_bw {margin-bottom: 60px;} } @media ( min-width: 1200px ) { .cc_bw {margin-bottom: 90px;} } /* Custom form Embed */ html, body { min-width: 320px; } .cc_sp, .cc_sp *, .cc_sp ::after, .cc_sp ::before{ box-sizing: border-box;} .cc_sp-btn-wrapper{ font-size: 10px; line-height: normal;display: flex;flex-wrap: wrap; justify-content: center; align-items: center; } .cc_sp-btn { position: relative; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; line-height: 1.5; color: #fff !important; cursor: pointer; padding: 11px 15px; border: transparent solid 2px; border-radius: 100px; min-width: 10px; text-align: center; transition: all .1s ease-in-out; margin: 4px; text-transform: none; will-change: background-color, border-color, color; box-shadow: none !important; outline: 0 !important; text-decoration: none !important; } .cc_sp-btn-with-icon { padding-left: 11px; padding-right:11px; } .cc_sp-btn i { font-size: 24px; margin: 0 6px; line-height: 1; } .cc_sp-btn-text { line-height: 1.185; display: flex; align-items: center; margin: 0 6px; position: relative; } .cc_sp-btn i + .cc_sp-btn-text, .btn .cc_sp-btn-text + i { margin-inline-start: 0; } .cc_sp-btn-text { display: block; margin: 0 6px; position: relative; top: -0.1em; } .cc_sp-btn > :first-child { margin-left: 0; } .cc_sp-btn > :last-child { margin-right: 0; } .cc_sp-btn:not(.disabled):not(:disabled) { opacity: 1 !important; } .cc_sp-btn:not(:disabled)::before, .cc_sp-btn:not(.disabled)::before { outline: none; opacity: 0; border-radius: 100px; display: block; content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; will-change: box-shadow, opacity; transition: all .1s ease-in-out; } .cc_sp-btn:disabled, .cc_sp-btn.disabled { opacity: 0.5; pointer-events: none; opacity: 1; background-color: #d1d1d1; border-color: #d1d1d1; } .cc_sp-btn:hover::before, .cc_sp-btn:focus::before, .cc_sp-btn:active::before { opacity: 1; } .cc_sp-btn::before, .cc_sp-btn:hover::before, .cc_sp-btn:focus::before { box-shadow: 0 0 0 2px #0070CC; } .cc_sp-btn:active::before { box-shadow: 0 0 0 2px #0059a3; } .cc_sp-btn:disabled, .cc_sp-btn.disabled { opacity: 0.65; background-color: #0059a3; border-color: #0059a3; } .cc_sp-btn-blue { color: #ffffff;background-color: #0070CC;border-color: transparent; } .cc_sp-btn-blue:focus { opacity: 1; background-color: #0059a3; color: #ffffff; border-color: transparent; } .cc_sp-btn-blue:hover { opacity: 1; background-color: #0064b7; color: #ffffff; border-color: transparent; } .cc_sp-btn-blue:active { opacity: 1; background-color: #0059a3; color: #ffffff; border-color: transparent; } .cc_sp-btn:disabled, .cc_sp-btn.disabled { opacity: 0.5; background-color: #0070CC; border-color: #0070CC; } /* cc_sp_icon */ [class*="cc_sp_icon-"] {font-size: 1em; width: 1em; max-width: 1em; flex: 0 0 1em; display: block; position: relative; } [class*="cc_sp_icon-"]::before { content: ""; display: block; padding-top: 100%; position: relative; width: 100%; z-index: 1; } [class*="cc_sp_icon-"] svg, [class*="cc_sp_icon-"] img { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; transition: transform 0.150s; } .cc_sp { margin-bottom: 52px; position: relative; } .cc_sp .d-none { display: none !important; } .cc_sp_error_message { color: #E70000; text-align: center; } @media (min-width: 768px) { .cc_sp-btn { font-size: 18px; } .cc_sp { margin-bottom: 39px; } .cc_sp-blog-content { padding: 0; } .cc_sp-btn-wrapper { justify-content: flex-start; } .cc_sp-contest-form .cc_sp-btn-wrapper { justify-content: center; } } @media (min-width: 992px) { .cc_sp-btn { font-size: 20px; } } .cc_sp-blog-box { display: none; position: relative; z-index: 0; opacity: 0; } .cc_sp-blog-box.active { display: block; z-index: 1; opacity: 1; } .cc_sp-blog-box.d-block { display: block; z-index: 2; } /* loader */ .cc_sp-loader {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 0;background-color: rgb(26, 30, 32, 90%);min-width: 320px;visibility: hidden;opacity: 0;transition: visibility 0.25s, opacity 0.25s; } .loading .cc_sp-loader {visibility: visible;opacity: 1; z-index: 99999999; } .cc-loading-inner {width: 70%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center; } .cc-loading-inner p {font-size: 1.4rem;font-weight: 400; color: #fff; } .cc-loading-inner svg {width: 3rem;height: 3rem;display: block;margin: 0 auto 2rem auto; } .cc-loading-inner .icon-primary-color{fill: #fff; } .cc-loading-inner .icon--part-1{animation-iteration-count:infinite;animation-duration:2000ms;animation-delay:400ms;animation-name:logo-mark-1} .cc-loading-inner .icon--part-2{animation-iteration-count:infinite;animation-duration:2000ms;animation-delay:800ms;animation-name:logo-mark-2} .cc-loading-inner .icon--part-3{animation-iteration-count:infinite;animation-duration:2000ms;animation-delay:1200ms;animation-name:logo-mark-3} .cc-loading-inner .icon--part-4{animation-iteration-count:infinite;animation-duration:2000ms;animation-delay:1600ms;animation-name:logo-mark-4} @keyframes logo-mark-1{0%{fill:#fff}40%{fill:#3e3e3e}60%{fill:#3e3e3e}100%{fill:#fff}} @keyframes logo-mark-2{0%{fill:#fff}40%{fill:#3e3e3e}60%{fill:#3e3e3e}100%{fill:#fff}} @keyframes logo-mark-3{0%{fill:#fff}40%{fill:#3e3e3e}60%{fill:#3e3e3e}100%{fill:#fff}} @keyframes logo-mark-4{0%{fill:#fff}40%{fill:#3e3e3e}60%{fill:#3e3e3e}100%{fill:#fff}} .cc_sp-blog-sec { margin: 0 -20px; background: var(--cc_sp-default-bg); } .cc_sp-blog-sec-inr { display: flex; flex-wrap: wrap; flex-direction: column-reverse; } .cc_sp-blog-box-left { width: 100%; max-width: 100%; flex: 0 0 100%; } .cc_sp-left-inner { padding: 30px 20px; } @media (min-width: 768px) { .cc_sp-blog-sec { margin: 0;border-radius: 1rem; } .cc_sp-blog-sec-inr { flex-direction: row; } .cc_sp-left-inner { padding: 26px 20px; } } @media (min-width: 1200px) { .cc_sp-left-inner { padding: 30px; } } .cc_sp { margin-bottom: 52px; position: relative; min-width: 290px; } .cc_sp-tabs { position: relative; width: 100%; max-width: 100%; flex: 0 0 100%; } .cc_sp-tab { position: relative; width: 100%; display: none; z-index: 0; top: 0; left: 0; transform: translateY(0); opacity: 0; backface-visibility: hidden; transition: 190ms ease-out; flex-direction: column; padding: 0; outline: 0 !important; } .cc_sp-tab.active { z-index: 1; display: block; opacity: 1; } .cc_sp-tab.d-block { z-index: 2; display: block; } .cc_sp-blog-tab-inner { font-weight: 300; } .cc_sp-blog-tab-inner h3 { margin: 0 0 20px 0; font-weight: 300;font-size: 21px;line-height: 1.252; text-align: center; display: block; outline: 0 !important; } .cc_sp-blog-tab-inner p { margin: 0 0 16px 0; line-height: 1.688; text-align: center; } .cc_sp-form-a .cc_sp-form-label { margin-bottom: 6px; font-size: 15px;line-height: 1.5; font-style: normal; font-weight: bold; display: block; } .cc_sp-form-a .cc_sp-form-label2 { padding-bottom: 5px; border-bottom: var(--cc_sp-label-border) 1px solid; margin-bottom: 20px !important; } .cc_sp-form-a .cc_sp-form-label2.cc_sp-mt-20px { margin-top: 20px !important; } .cc_sp-form-a .cc_sp-form-label3.cc_sp-mt-20px { margin-top: 20px !important; } .cc_sp-form-a .cc_sp-form-label3 { padding-bottom: 5px; margin-bottom: 16px !important; } .cc_sp-form-a .cc_sp-form-group { padding-bottom: 4px; position: relative; } .cc_sp-form-a .cc_sp-form-control-wrapper { margin-bottom: 16px; } .cc_sp-form-a .cc_sp-form-control { padding: 12px 19px; height: 50px; font-size: 16px;line-height: 1.333; font-weight: 300; font-style: normal; color: #363636; width: 100%; background: #FFFFFF;border: 1px solid rgba(54, 54, 54, 0.5);border-radius: 3px; } .cc_sp-form-control::placeholder { color: rgba(54, 54, 54, 0.50); font-weight:400; font-style: italic; } .cc_sp-checkbox-a-wrapper { padding-top: 0; display: flex; flex-direction: column; align-items: flex-start; } .cc_sp-checkbox-a {display: flex; align-items: flex-start; justify-content: flex-start; position: relative;font-weight: 400;cursor: pointer; color: inherit; } .cc_sp-checkbox-a input {width: 1px;height: 1px;position: absolute;top: 0;left: 0;opacity: 0 !important; padding: 0; border: 0; display: block;} .cc_sp-checkbox-a-ui { background-color: #D9D9D9; width: 20px; max-width: 20px; flex: 0 0 20px; height: 20px; cursor: pointer; border: 1px solid rgba(54, 54, 54, 0.50); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: inherit; margin: 0 8px 0 0; } .cc_sp-checkbox-a-ui i { opacity: 0;} .cc_sp-checkbox-a input:checked ~ .cc_sp-checkbox-a-ui i { opacity: 1;color: #0070CC; } .cc_sp-checkbox-a:not(:hover) input:focus ~ .cc_sp-checkbox-a-ui { outline: thin dotted; outline-offset: 0px; } .cc_sp-checkbox-a-text {user-select: none; display: block; position: relative; top: 0; font-weight: 300;font-size: 13px;line-height: 1.231; color: inherit; } .cc_sp-checkbox-a-text a { color: #0070CC; text-decoration: underline;} .cc_sp-checkbox-a-text a:hover { text-decoration: none; } .cc_sp-form-a .cc_sp-form-error { display: block; width: 100%; top: 0; margin-top: -16px; left: 0; position: relative; color: #CD3D0F;font-size: 12px;font-style: normal;font-weight: 300;line-height: 16px; } .cc_sp-form-a .cc_sp-form-control:focus { outline: none; } .cc_sp-form-a .cc_sp-form-group.has-error .cc_sp-form-control { border-color: #E70000; } .cc_sp-form-group.has-error .cc_sp-checkbox-a-ui { border-color: #E70000; } .cc_sp_thankyou-social-lbl { margin: 0 0 10px 0; font-size: 16px;line-height: 1.33; font-weight: 700; color: inherit; text-align: center; display: block; } .cc_sp_thankyou-social-nav { display: none; } .cc_sp_thankyou-share { display: block; } .cc_sp_thankyou-social-nav .cc_sp-btn-wrapper { justify-content: flex-start; } .cc_sp_thankyou-share .cc_sp-btn-blue { min-width: 141px; } .cc_sp-row { margin: 0 -15px; display: flex; flex-wrap: wrap; } .cc_sp-row-cell.cf-col-4, .cc_sp-row-cell.cf-col-6, .cc_sp-row-cell.cf-col-8, .cc_sp-row-cell.cf-col-12 { padding: 0 15px; width: 100%; max-width: 100%; flex: 0 0 100%; } .cc_sp-contest-form { padding-top: 16px; } .cc_sp-contest-form .cc_sp-btn-wrapper { padding-top: 14px; } .cc_sp-checkbox-a-wrapper { padding-top: 10px; } .cc-gap-30 { margin-top: 30px; } .cc_sp-compo-gfx { border-radius: 10px; width: 100%; max-width: 400px; margin: 0 auto 30px auto; } @media (min-width: 768px) { .cc_sp { margin-bottom: 39px; } .cc_sp_thankyou-social-lbl { text-align: left; } .cc_sp-blog-tab-inner h3 { margin-bottom: 12px;font-size: 35.1562px; text-align: left; } .cc_sp-blog-tab-inner p { text-align: left; } .cc_sp-row { align-items: center; } .cc_sp-row-cell.cf-col-4 { width: 34%; max-width: 34%; flex: 0 0 34%; align-self: flex-start; } .cc_sp-row-cell.cf-col-6 { width: 50%; max-width: 50%; flex: 0 0 50%; } .cc_sp-row-cell.cf-col-8 { width: 66%; max-width: 66%; flex: 0 0 66%; } .cc_sp-form-a .cc_sp-form-label { margin-bottom: 5px; font-size: 16px; } .cc_sp-form-a .cc_sp-form-error { font-size: 11px; } .cc_sp-contest-form { padding-top: 0; } .cc_sp-checkbox-a-wrapper { padding-top: 0; } .cc_sp-contest-form .cc_sp-btn-wrapper { padding-top: 0; } .cc_sp_thankyou-social-nav { display: block; } .cc_sp_thankyou-share { display: none; } .cc_sp-contest-form .cc_sp-btn-wrapper .cc_sp-btn { min-width: 186px; } .cc_sp-form-a .cc_sp-checkbox-a-wrapper .cc_sp-form-error { padding-left: 28px; } .cc_sp-compo-gfx { margin-bottom: 0; } } @media (min-width: 1400px) { .cc_sp-form-a .cc_sp-form-error { font-size: 13px; } .cc_sp-row-cell.cf-col-4 { width: 40%; max-width: 40%; flex: 0 0 40%; } .cc_sp-row-cell.cf-col-8 { width: 60%; max-width: 60%; flex: 0 0 60%; } } /* game frame */ .cc_sp-game { position: relative; width: 100%; max-width: 400px; margin: 0 auto; } .cc_sp-game-header { display: flex; padding: 0 0 16px 0; } .cc_sp-game-timer { font-size: 16px; line-height: 1.5; font-weight: 700; color: inherit; display: flex; margin-inline-end: auto; min-width: 130px; } .cc_sp-game-timer-text { margin-inline-start: 6px; min-width: 50px; } .cc_sp-game-moves { font-size: 16px; line-height: 1.5; font-weight: 700; color: inherit; display: flex; justify-content: flex-end; margin-inline-start: auto; min-width: 80px; text-align: left; } .cc_sp-game-move-text { margin-inline-start: 6px; min-width: 26px; } .cc_sp-game-body { position: relative; overflow: hidden; padding: 0; border: #4267b2 5px solid; border-radius: 10px; background-color: #fff; } .cc_sp-game-footer { display: flex; padding: 16px 0 0 0; } .cc_sp-game-stage { position: relative; overflow: hidden; width: 100%; padding-top: 100%; background-color: #fff; } .cc_sp-game-screen { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; display: block; background-color: #fff; } .cc_sp-game-help-screen { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; display: none; background-color: #fff; } .cc_sp-game-help-screen img { display: block; width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: 1; object-fit: cover; } .cc_sp-game-winner-screen { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; overflow: hidden; display: none; background-color: rgba(0, 0, 0, 0.75); text-align: center; color: #fafafa; font-weight: 700; font-size: 3em; } .cc_sp-game-winner-screen-text { display: flex; justify-content: center; align-items: center; text-align: center; padding: 10px; width: 100%; height: 100%; } .cc_sp-game-footer .cc_sp-btn-wrapper { width: calc(100% + 12px); justify-content: space-between; margin-inline-start: -6px; } .cc_sp .altcha { margin-bottom: 16px;; } @media (min-width: 1900px) { .cc_sp-game { max-width: 500px; } /* .cc_sp-game-winner-screen-text { font-size: 24px; } */ } @media (min-width: 2560px) { .cc_sp-game { max-width: 600px; } /* .cc_sp-game-winner-screen-text { font-size: 28px; } */ } /* game */ .doPuzzle .doPuzzle-container {display:block; overflow:hidden; padding:0; margin:0; width:100%; height:100%; position:absolute; z-index:1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -o-user-select:none; user-select:none; transform: translate3d(0, 0, 0); } .doPuzzle.doPuzzle-done .doPuzzle-winner .cc_sp-game-winner-screen-text { animation: you-are-winner 3s linear infinite; } .doPuzzle .doPuzzle-container > ul {display:block; overflow:hidden; padding:0; margin:0; list-style:none; width:100%; height:100%; float:left; position:absolute; top:0; left:0; z-index:0; -webkit-margin-before:0;-webkit-margin-after:0;-webkit-padding-start:0; opacity:0; background-color: #333; transform: translate3d(0, 0, 0);} .doPuzzle.doPuzzle-loaded .doPuzzle-container > ul{opacity:1; } .doPuzzle .doPuzzle-container > ul > li {display:block; overflow:hidden; padding:0; margin:0; list-style:none; float:left; position:absolute; top:0; left:0; z-index:1; transition: top .2s ease-in-out, left .2s ease-in-out; transform: translate3d(0, 0, 0); } .doPuzzle .doPuzzle-container > ul > li > a {display:block; overflow:hidden; padding:0; margin:0; cursor:pointer; outline:none; width:100%; height:100%; position:relative; color:#fafafa; font-weight:normal; font-size:4em; font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);} .doPuzzle .doPuzzle-container > ul > li > a > img {display:block; overflow:hidden; padding:0; margin:0; height:auto; position:absolute; top:0; left:0; z-index:0; pointer-events: none;} .doPuzzle .doPuzzle-container > ul > li > a > span {display:flex; justify-content: center; align-items: center; overflow:hidden; padding:0; margin:0; width:100%; height:100%; line-height:1; position:absolute; top:0; left:0; z-index:1; text-align:center; pointer-events: none; } @media (max-width:767px){ .doPuzzle{font-size:10px;} } @keyframes you-are-winner { 0% {font-size:1em;} 25% {font-size:1.1em;} 50% {font-size:1em;} 75% {font-size:1.1em;} 100% {font-size:1em;}} /* game default 4x4 grid */ .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a > img { max-width: 400%; width:400%; } .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-1 {top:0%; left:0%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-2 {top:0%; left:25%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-3 {top:0%; left:50%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-4 {top:0%; left:75%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-5 {top:25%; left:0%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-6 {top:25%; left:25%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-7 {top:25%; left:50%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-8 {top:25%; left:75%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-9 {top:50%; left:0%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-10 {top:50%; left:25%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-11 {top:50%; left:50%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-12 {top:50%; left:75%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-13 {top:75%; left:0%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-14 {top:75%; left:25%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-15 {top:75%; left:50%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li.puzzle-slide-hold-16 {top:75%; left:75%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-1 > img{top:0%; left:0%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-2 > img{top:0%; left:-100%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-3 > img{top:0%; left:-200%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-4 > img{top:0%; left:-300%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-5 > img{top:-100%; left:0%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-6 > img{top:-100%; left:-100%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-7 > img{top:-100%; left:-200%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-8 > img{top:-100%; left:-300%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-9 > img{top:-200%; left:0%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-10 > img{top:-200%; left:-100%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-11 > img{top:-200%; left:-200%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-12 > img{top:-200%; left:-300%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-13 > img{top:-300%; left:0%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-14 > img{top:-300%; left:-100%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-15 > img{top:-300%; left:-200%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-16 > img{top:-300%; left:-300%;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li { width:25%; height:25%; } .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-16{opacity:0; visibility:hidden;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-16 span{opacity:0;} .doPuzzle.doPuzzle-done[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-16{opacity:1; visibility:visible;} .doPuzzle[data-grid=grid4x4] .doPuzzle-container > ul > li > a.puzzle-slide-16 > span{display:none;} /* game default 3x3 grid */ .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li > a > img { max-width: 300%; width:300%; } .doPuzzle[data-grid=grid3x3] { --grid-size: calc(100% / 3); } .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li.puzzle-slide-hold-1 {top:0%; left:0%;} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li.puzzle-slide-hold-2 {top:0%; left: calc(var(--grid-size));} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li.puzzle-slide-hold-3 {top:0%; left: calc(2 * var(--grid-size));} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li.puzzle-slide-hold-4 {top: calc(100% / 3); left: 0%;} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li.puzzle-slide-hold-5 {top: calc(100% / 3); left: calc(var(--grid-size));} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li.puzzle-slide-hold-6 {top: calc(100% / 3); left: calc(2 * var(--grid-size));} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li.puzzle-slide-hold-7 {top: calc(2 * var(--grid-size)); left: 0%;} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li.puzzle-slide-hold-8 {top: calc(2 * var(--grid-size)); left: calc(var(--grid-size));} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li.puzzle-slide-hold-9 {top: calc(2 * var(--grid-size)); left: calc(2 * var(--grid-size));} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li > a.puzzle-slide-1 > img{top:0%; left:0%;} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li > a.puzzle-slide-2 > img{top:0%; left:-100%;} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li > a.puzzle-slide-3 > img{top:0%; left:-200%;} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li > a.puzzle-slide-4 > img{top:-100%; left:0%;} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li > a.puzzle-slide-5 > img{top:-100%; left:-100%;} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li > a.puzzle-slide-6 > img{top:-100%; left:-200%;} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li > a.puzzle-slide-7 > img{top:-200%; left: 0%;} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li > a.puzzle-slide-8 > img{top:-200%; left:-100%;} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li > a.puzzle-slide-9 > img{top:-200%; left:-200%;} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li { width: var(--grid-size); height: var(--grid-size); } .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li > a.puzzle-slide-9{opacity:0; visibility:hidden;} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li > a.puzzle-slide-9 span{opacity:0;} .doPuzzle.doPuzzle-done[data-grid=grid3x3] .doPuzzle-container > ul > li > a.puzzle-slide-9{opacity:1; visibility:visible;} .doPuzzle[data-grid=grid3x3] .doPuzzle-container > ul > li > a.puzzle-slide-9 > span{display:none;}