/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html { line-height: 1.15; -webkit-text-size-adjust: 100% } body { margin: 0 } main { display: block } h1 { font-size: 2em; margin: .67em 0 } hr { box-sizing: content-box; height: 0; overflow: visible } pre { font-family: monospace, monospace; font-size: 1em } a { background-color: transparent } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted } b, strong { font-weight: bolder } code, kbd, samp { font-family: monospace, monospace; font-size: 1em } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -0.25em } sup { top: -0.5em } img { border-style: none; max-width: 100%; height: auto } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0 } button, input { overflow: visible } button, select { text-transform: none } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0 } button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText } fieldset { padding: .35em .75em .625em } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal } progress { vertical-align: baseline } textarea { overflow: auto } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0 } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto } [type=search] { -webkit-appearance: textfield; outline-offset: -2px } [type=search]::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } details { display: block } summary { display: list-item } template { display: none } [hidden] { display: none } @font-face { font-family: "Roboto"; src: url("./fonts/Roboto-Thin/Roboto-Thin.eot"); src: url("./fonts/Roboto-Thin/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto-Thin/Roboto-Thin.woff") format("woff2"), url("./fonts/Roboto-Thin/Roboto-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap } @font-face { font-family: "Roboto"; src: url("./fonts/Roboto-Light/Roboto-Light.eot"); src: url("./fonts/Roboto-Light/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto-Light/Roboto-Light.woff") format("woff2"), url("./fonts/Roboto-Light/Roboto-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap } @font-face { font-family: "Roboto"; src: url("./fonts/Roboto-Regular/Roboto-Regular.eot"); src: url("./fonts/Roboto-Regular/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto-Regular/Roboto-Regular.woff") format("woff2"), url("./fonts/Roboto-Regular/Roboto-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap } @font-face { font-family: "Roboto"; src: url("./fonts/Roboto-Medium/Roboto-Medium.eot"); src: url("./fonts/Roboto-Medium/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto-Medium/Roboto-Medium.woff") format("woff2"), url("./fonts/Roboto-Medium/Roboto-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap } @font-face { font-family: "Roboto"; src: url("./fonts/Roboto-Bold/Roboto-Bold.eot"); src: url("./fonts/Roboto-Bold/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto-Bold/Roboto-Bold.woff") format("woff2"), url("./fonts/Roboto-Bold/Roboto-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap } @font-face { font-family: "Roboto"; src: url("./fonts/Roboto-Black/Roboto-Black.eot"); src: url("./fonts/Roboto-Black/Roboto-Black.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto-Black/Roboto-Black.woff") format("woff2"), url("./fonts/Roboto-Black/Roboto-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; outline: none } a { text-decoration: none } ul[class] { list-style: none } body { height: 100%; background: #000179 } #layout { min-height: 100%; position: relative; z-main: 2; overflow-x: hidden; background: #000179 url("./img/bg-desk.jpg") 50% 0 no-repeat } .page { font-size: 10px; font-family: "Roboto", Arial, sans-serif } #container { padding-top: 3.4em; max-width: 77.5em; margin: 0 auto } .logo { display: block; margin: 0 auto 8em; background: url("./img/logo.png") 0 0 no-repeat; width: 31em; height: 7em; background-size: contain; position: relative; z-main: 1000; } .wheel_wrap { position: relative; width: 60em; margin: 0 auto; height: 60em } .wheel_spinner { background: url("./img/wheel-spinner-en.png") 0 0 no-repeat; background-size: contain; width: 60em; margin: 0 auto; position: relative; top: 2em; z-main: 2; height: 60em } .cur_dol .wheel_spinner { background: url("./img/wheel-spinner-en.png") 0 0 no-repeat; background-size: contain } .pt .wheel_spinner { background: url("./img/wheel-spinner-pt.png") 0 0 no-repeat; background-size: contain } .es .wheel_spinner { background: url("./img/wheel-spinner-es.png") 0 0 no-repeat; background-size: contain } .fr .wheel_spinner { background: url("./img/wheel-spinner-fr.png") 0 0 no-repeat; background-size: contain } .wheel_btn { font-size: inherit; border: none; background-color: transparent; outline: none; background-image: url("./img/wheel-btn.png"); width: 18.6em; height: 18.75em; position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%); background-repeat: no-repeat; background-size: 18.6em 37.5em; display: block; z-main: 5; z-index: 5; cursor: pointer } .wheel_btn:disabled { background-position: 0 -18.95em; cursor: default } .pl .wheel_btn .pl { font-size: 2.8em } .ru .wheel_btn .ru { font-size: 2.6em } .ro .wheel_btn .ro { font-size: 2.6em } .fr .wheel_btn .fr { font-size: 2.6em } .hu .wheel_btn .hu { font-size: 2.6em } .wheel_btn:hover { background-position: 0 -18.95em } .wheel_btn:active { background-position: 0 -18.95em } .wheel_btn span { text-transform: uppercase; font-size: 3em; color: #fff; font-family: "Roboto", Arial, sans-serif; font-weight: 900 } .fr .wheel_btn span { font-size: 2.4em; } .wheel_win_frame { position: absolute; left: 50%; transform: translateX(-50%); background: url("./img/wheel-win-frame.png") 0 0 no-repeat; width: 21em; height: 35.8em; background-size: contain; z-main: 3; top: -1em } #footer { text-align: center; color: #797582; font-family: Arial, sans-serif; position: relative; z-main: 3; padding: 10em 0 2em } #footer img { margin: 0 auto 2.5em; height: auto; width: 95% } #footer img.mob { display: none; max-width: 51.3em } #footer img.desk { display: block; max-width: 92.9em } #footer p { font-size: 1.05em; max-width: 90em; margin: 0 auto 1.5em; width: 90%; line-height: 1.5; color: rgba(255, 255, 255, .5) } .popup_overlay { position: fixed; background-color: rgba(0, 1, 120, .8); display: none; left: 0; top: 0; right: 0; bottom: 0; z-main: 100; z-index: 100; align-items: center; flex-direction: column; flex-wrap: wrap } .popup_window { margin-top: 20em; background: url("./img/popup-bg-en.png") 0 0 no-repeat; width: 67.4em; height: 70em; background-size: contain; box-sizing: border-box; text-align: center; padding-top: 16em; display: none } .fr .popup_window { background: url("./img/popup-bg-fr.png") 0 0 no-repeat; background-size: contain; } .pt .popup_window { background: url("./img/popup-bg-pt.png") 0 0 no-repeat; background-size: contain; } .es .popup_window { background: url("./img/popup-bg-es.png") 0 0 no-repeat; background-size: contain; } .popup_title { color: #ffeb64; font-size: 4.8em; font-family: "Roboto", Arial, sans-serif; font-weight: 700 } #popup_1 .popup_title { padding-bottom: .2em } #popup_2 .popup_title { padding-bottom: .1em } .popup_tnc { padding-top: 1.5em; font-size: 2em; font-family: "Roboto", Arial, sans-serif } .popup_tnc a { color: #fff; text-decoration: underline } .popup_tnc a:hover { text-decoration: none } .popup_txt { margin-top: 3em; margin-bottom: 2em; font-family: "Roboto", Arial, sans-serif; font-weight: bold } .popup_txt .txt-1 { font-size: 4.6em; color: #fff } .hu .popup_txt .txt-1 { font-size: 4em } .popup_txt .txt-2 { font-size: 6em; line-height: 1.4; color: #ffeb64 } .popup_txt .txt-2 img { width: 80%; } #popup_1 .popup_txt { padding: 0 .25em .3em } #popup_2 .popup_txt { padding: 0 .25em .3em } .popup_txt span { color: #ff7d00 } .popup_btn { cursor: pointer; margin: 0 auto; display: block; text-decoration: none; width: 45.2em; height: 11.5em; box-sizing: border-box; text-align: center; border-radius: 10px; background: url("./img/popup-btn.png") 50% 50%; background-size: 100% 100%; display: flex; justify-content: center; align-items: center; transition: all .3s ease-in-out; filter: hue-rotate(255deg); } .popup_btn:hover { filter: hue-rotate(285deg); } .popup_btn a {line-height: 11em;} .popup_btn span { text-transform: uppercase; color: #fff; font-size: 4.4em; font-weight: 700; font-family: "Roboto", Arial, sans-serif } .wheel_spinner_animated { animation: 2s spinner ease-in-out infinite } .wheel_spinner_animated_1 { animation: 4s spinToOne ease-in-out 1 } .wheel_spinner_animated_2 { animation: 4.5s spinToTwo ease-in-out 1 forwards } .wheel_win_frame_winner { animation: 1s wheel_win ease-in-out infinite } @keyframes spinner { 0% { transform: rotate(2deg) } 50% { transform: rotate(-2deg) } 100% { transform: rotate(2deg) } } @keyframes spinToOne { 0% { transform: rotate(2deg) } 70% { transform: rotate(725deg) } 80% { transform: rotate(718deg) } 100% { transform: rotate(720deg) } } @keyframes spinToTwo { 0% { transform: rotate(720deg) } 60% { transform: rotate(1490deg) } 80% { transform: rotate(1480deg) } 100% { transform: rotate(1485deg) } } @keyframes wheel_win { 0% { filter: drop-shadow(0 0 0 rgb(194, 0, 129)); } 50% { filter: drop-shadow(0 0 10px rgb(194, 0, 129)); } 100% { filter: drop-shadow(0 0 0 rgb(194, 0, 129)); } } @media (max-width: 930px) { .popup_overlay { position: absolute } } @media (max-width: 1024px)and (orientation: landscape) { .popup_window { margin-top: 4.5em } } @media (max-width: 930px)and (orientation: landscape) { .page { background-size: cover } #layout { font-size: 50%; background-size: contain } .popup_overlay { font-size: 125% } .popup_window { margin-top: 7.5em } .lang_switcher_outer { top: 1em } } @media (max-width: 812px)and (orientation: landscape) { #layout { font-size: 45% } } @media (max-width: 667px)and (orientation: landscape) { #layout { font-size: 40% } } @media (max-width: 568px)and (orientation: landscape) { #layout { font-size: 35% } } @media (max-width: 768px)and (orientation: portrait) { #container { font-size: 80% } #layout { background: #000079 url("./img/bg-desk.jpg") 50% 0 no-repeat; background-size: 194%; min-height: 100vh } #footer p { opacity: 1 } .popup_window { width: 60em; padding-top: 16em } .popup_btn { width: 75% } .hu .popup_txt .txt-1 { font-size: 3.8em } } @media (max-width: 604px)and (orientation: portrait) { #layout { background: #000079 url("./img/bg-mob.jpg") 50% 0 no-repeat; -webkit-background-size: 151% auto; background-size: 151% auto } #layout { font-size: 95% } #footer { padding: 36em 0 2em } #footer img.desk { display: none } #footer img.mob { display: block } #footer p { font-size: 1.2em } .popup_overlay { font-size: 80% } .logo { width: 26.2em; height: 6em } #footer p { opacity: 1 } .wheel_spinner, .wheel_wrap { width: 56em; height: 56em } .wheel_win_frame { width: 19em } } @media (max-width: 550px)and (orientation: portrait) { #container { font-size: 90% } #layout { background-position: 50% 40% } #footer { font-size: 95% } } @media (max-width: 500px)and (orientation: portrait) { #container { font-size: 80% } .popup_overlay { font-size: 70% } #footer { font-size: 90% } lang_switcher_outer { right: 1em; top: 3em } } @media (max-width: 450px)and (orientation: portrait) { .popup_overlay { font-size: 70% } #container { font-size: 70% } #footer { font-size: 80% } } @media (max-width: 400px)and (orientation: portrait) { #container { font-size: 60% } #footer { font-size: 70% } .popup_overlay { font-size: 60% } .popup_window { width: 62em } } @media (max-width: 360px)and (orientation: portrait) { #layout { -webkit-background-size: 156% auto; background-size: 156% auto; font-size: 90% } .popup_window { padding-top: 16em; margin-top: 18.5em } .popup_overlay { font-size: 54% } } @media (max-width: 340px)and (orientation: portrait) { #layout { -webkit-background-size: 173% auto; background-size: 173% auto } .popup_window { width: 100% } } html .default { display: block } html .en { display: none } html .pl { display: none } html .de { display: none } html .pt { display: none } html .ru { display: none } html .ro { display: none } html .hu { display: none } html .no { display: none } html .es { display: none } html .fr { display: none } html .th { display: none } html.th .th { display: block } html.th .default { display: none } html.en .en { display: block } html.en .default { display: none } html.pl .pl { display: block } html.pl .default { display: none } html.de .de { display: block } html.de .default { display: none } html.pt .pt { display: block } html.pt .default { display: none } html.ru .ru { display: block } html.ru .default { display: none } html.ro .ro { display: block } html.ro .default { display: none } html.hu .hu { display: block } html.hu .default { display: none } html.no .no { display: block } html.no .default { display: none } html.es .es { display: block } html.es .default { display: none } html.fr .fr { display: block } html.fr .default { display: none } .lang_switcher_outer { z-main: 11; cursor: pointer; position: absolute; right: 10rem; top: 2rem; color: #fff; font-weight: 400; font-family: Arial, sans-serif } .lang_switcher { user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; display: flex; cursor: pointer; position: relative; z-main: 3; background: #02035e; padding: 6px 9px; width: 90px } .lang_switcher:hover { background: #2908b4 } .lang_switcher_outer p { font-size: 11px; position: relative; color: #fff; text-transform: none; display: inline-flex; margin: 0 1em; text-align: center; min-width: 4em; align-items: center } .lang_list { position: absolute; list-style-type: none; top: 100%; display: none; left: 0; width: 90px; overflow: hidden; cursor: auto; padding: 0; margin: 0; background: #02035e } .lang_list.act { display: block } .lang_list li { background: transparent; padding: 6px 0 6px 10px; cursor: pointer; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; transition: background .3s } .lang_list li:hover { background: #2908b4 } .lang_list li.curr { pointer-events: none } .lang_list li span { font-size: 13px; display: inline-block; text-transform: uppercase } .flag-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; margin-right: 6px } .flag-icon img { display: block; max-width: 100%; width: 20px; height: 20px } .lang_switcher .curr_lang span { font-size: 13px; display: inline-block } .lang_switcher .curr_lang { position: relative; display: flex; align-items: center; text-transform: uppercase } .lang_switcher_outer i.lang_arr { width: 1em; height: 1em; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg); margin: 0 1em } .preloader { position: fixed; z-main: 999; left: 0; top: 0; width: 100%; height: 100% } .blur_wrap { filter: blur(5px) } .hide .blur_wrap { filter: blur(0px) } @media only screen and (max-width: 1024px) { .lang_switcher_outer { right: 2rem; top: 2rem; z-main: 11 } .lang_switcher_outer { background: #02035e } .lang_list { padding-bottom: 3px; background: #02035e; width: 100% } .lang_switcher { width: 84px } } @media only screen and (max-width: 576px) { .lang_switcher_outer { right: 1em; top: 2em } .lang_switcher { width: 72px } .lang_switcher .curr_lang span { font-size: 11px; display: inline-block } .lang_list li span { font-size: 11px } .lang_switcher { padding: 6px } .lang_list li { padding: 6px } } .ramka-2-wr { width: 200px; height: 200px; box-sizing: border-box; padding: 15px; position: relative; overflow: hidden; margin: 30px auto; } .ramka-2-wr .ramka-2 { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-family: 'Roboto', sans-serif; } .ramka-2-wr::before { content: ''; position: absolute; width: 150%; height: 150%; background: repeating-linear-gradient( #FFF 0%, #FFF 7.5px, #fc9eff 7.5px, #f75ffc 15px, #FFF 15px, #FFF 7.5px, #fc9eff 7.5px, #f75ffc 15px, #FFF 15px, #FFF 22.5px, #ff1cbb 22.5px, #ffbff1 30px); transform: translateX(-20%) translateY(-20%) rotate(-45deg); animation: anim-ramka-2 20s linear infinite; } .ramka-2-wr .ramka-2 { position: relative; background-color: #FFF; flex-direction: column; box-sizing: border-box; padding: 30px; text-align: center; font-family: sans-serif; z-main: 2; } .ramka-2-wr, .ramka-2-wr .ramka-2 { box-shadow: 0 0 2px #fc9eff, 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; } @keyframes anim-ramka-2 { from { background-position: 0; } to { background-position: 0 450px; } }