html { --body-bg-color: #fff; --link-primary-color: #0074e6; --ol-primary-color: #4d4d4d; --li-primary-color: #4d4d4d; --table-border-primary-color: #000; --common-focus-box-shadow: 0px 0px 0px 2px rgba(131, 192, 253, 0.50); } * { margin: 0; padding: 0; font-family: "Open Sans", "Helvetica Neue", Arial, Verdana, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--link-primary-color); text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } html { position: relative; width: 100%; min-height: 100%; } body { position: relative; width: 100%; min-width: 1200px; min-height: 100vh; margin: 0; padding-bottom: 365px; font-size: 100%; background-color: var(--body-bg-color); box-sizing: border-box; } h1 { color: var(--text-primary-color); } h2 { color: #17212f; font-size: 3em; font-weight: 300; } h3 { color: #fff; font-size: 3.75em; font-weight: 300; } h4 { color: #17212f; font-size: 1.75em; font-weight: 300; } p.text { color: #17212f; font-size: 1.375em; font-weight: 300; line-height: 36px; } .learn-more { position: relative; display: inline-block; padding: 0 15px 0 0; color: #1b84ee; font-size: 1.375em; font-weight: 400; } .learn-more:after { content: ""; position: absolute; top: 13px; right: 0; width: 6px; height: 6px; border-bottom: 2px solid #1b84ee; border-right: 2px solid #1b84ee; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); z-index: 100; } a, input, select, button, label { position: relative; z-index: 1; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; outline: none; } a:focus-visible::before, input:focus-visible::before, select:focus-visible::before, button:focus-visible::before, label:focus-visible::before, textarea:focus-visible::before { content: ''; position: absolute; z-index: -1; -moz-transform: translateZ(-1px); -webkit-transform: translateZ(-1px); -o-transform: translateZ(-1px); -ms-transform: translateZ(-1px); transform: translateZ(-1px); display: block; left: -3px; top: -3px; width: calc(100% + 6px); height: calc(100% + 6px); background-color: transparent; border-radius: 6px; -moz-box-shadow: var(--common-focus-box-shadow); -webkit-box-shadow: var(--common-focus-box-shadow); -o-box-shadow: var(--common-focus-box-shadow); -ms-box-shadow: var(--common-focus-box-shadow); box-shadow: var(--common-focus-box-shadow); } #cookieScriptAditionalData { display: none; } #cookiescript_injected_fsd #cookiescript_buttons, #cookiescript_toppart { box-sizing: border-box; } .trans_overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1100; } .black_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); z-index: 1101; } .white_content { position: fixed; width: 996px; height: 560px; top: 50%; left: 50%; margin: -280px 0 0 -498px; padding: 0; background-color: #3c3c40; z-index: 1102; -moz-opacity: 1; opacity:1; filter: alpha(opacity=100); overflow: hidden; } .main { position: relative; width: 100%; height: 100%; } .content-block { position: relative; width: 100%; padding: 70px 0; overflow: hidden; } .content-block .content { position: relative; max-width: 1300px; margin: 0 auto; } .content-block .content:after { content: ""; display: block; clear: both; } .new-site-banner { position: fixed; top: 0; left: 0; width: 100%; height: 148px; background: url("/img/spark2/common/banner-bg.svg") no-repeat 0 0; background-size: cover; padding: 36px 0; box-sizing: border-box; z-index: 1000; } .new-site-banner .container { max-width: 1200px; width: 100%; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; } .new-site-banner .left-block { display: flex; } .new-site-banner .left-block img { display: flex; width: 52px; height: 52px; margin-right: 32px; } .new-site-banner .left-block p { font-weight: 800; font-size: 2em; line-height: 133%; color: #FFFFFF; margin-bottom: 4px; } .new-site-banner .left-block span { font-weight: 400; font-size: 1.25em; line-height: 150%; color: #FFFFFF; } .new-site-banner .right-block a { display: flex; align-items: center; height: 47px; font-weight: 600; font-size: 1.125em; line-height: 150%; padding: 0 24px; color: #FFFFFF; background: #205EFF; border-radius: 6px; } .years11-banner { position: fixed; top: 0; left: 0; right: 0; min-width: 1200px; height: 36px; background-color: #212947; border-bottom: 1px solid #48515f; box-sizing: border-box; z-index: 10000; } .years11-banner .text { display: inline-block; padding: 0; color: #c2d0f3; font-size: 1em; font-weight: 400; line-height: 35px; } .years11-banner .text a { color: #dae1f3; font-weight: 700; text-decoration: underline; } .years11-banner .text a:hover { text-decoration: none; } .years11-banner .button { display: inline-block; min-width: 73px; height: 23px; margin: 6px 0 0 20px; padding: 0 20px; color: #fefefe; font-size: 0.75em; font-weight: 600; line-height: 23px; text-align: center; background-color: #0085c7; border: 1px solid #2ba5fb; border-radius: 4px; box-sizing: border-box; } .top-menu { position: fixed; top: 0; left: 0; right: 0; width: 100%; min-width: 1200px; min-height: 59px; border-bottom: 1px solid transparent; background-color: transparent; z-index: 1000; -webkit-transition: background-color 120ms linear; -moz-transition: background-color 120ms linear; -o-transition: background-color 120ms linear; -ms-transition: background-color 120ms linear; transition: background-color 120ms linear; -webkit-transform: translateZ(0); } .top-menu.static, .top-menu.moved { background-color: rgba(255, 255, 255, 0.9); } .top-menu .readdle-logo { position: absolute; top: 0; right: 0; display: block; width: 94px; height: 37px; } .top-menu .spark-logo { position: absolute; display: none; top: 16px; left: 0; width: 28px; height: 28px; z-index: 2; } .top-menu.static .readdle-logo, .top-menu.moved .readdle-logo { display: none; } .top-menu.static .spark-logo, .top-menu.moved .spark-logo { display: block; } .top-menu .btn { display: none; } .top-menu.static .btn, .top-menu.moved .btn { display: inline-block; } .menu { width: 100%; } .menu .container { position: relative; width: auto; max-width: 1200px; height: 59px; margin: 0 auto; padding: 0 0 0 10px; box-sizing: border-box; } .top-menu.static .menu .container, .top-menu.moved .menu .container { background: url("/img/spark2/common/spark.svg") no-repeat 0 16px; background-size: 28px 28px; } .menu_container { text-align: left; font-weight: 600; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga", "kern"; } .menu_container ul { text-align: left; padding: 0; } .menu_container ul li { position: relative; display: inline-block; list-style-type: none; font-size: 1em; } .menu_container ul li a { transition: 0.2s; position: relative; display: block; padding: 5px 5px 7px; margin: 15px 28px 0 28px; color: #bebebf; } .menu_container ul li a:hover { color: #fff; } .menu_container ul li a.no-left-space { margin-left: 0; padding-left: 0; } .top-menu.static .menu_container ul li a, .top-menu.moved .menu_container ul li a { color: #6E6E6E; } .top-menu.static .menu_container ul li a:hover, .top-menu.moved .menu_container ul li a:hover { color: #333; } .menu_container ul li a.dropdown_link { padding-right: 20px; } .menu_container ul li a.dropdown_link:after { transition: 0.2s; content: ""; border-bottom: 2px solid #bebebf; border-right: 2px solid #bebebf; width: 6px; height: 6px; position: absolute; right: 12px; top: 7px; z-index: 100; -moz-transform: translate(10px,4px) rotate(45deg); -webkit-transform: translate(10px,4px) rotate(45deg); -o-transform: translate(10px,4px) rotate(45deg); -ms-transform: translate(10px,4px) rotate(45deg); transform: translate(10px,4px) rotate(45deg); } .menu_container ul li a.dropdown_link:hover:after { border-color: #fff; } .top-menu.static .menu_container ul li a.dropdown_link:after, .top-menu.moved .menu_container ul li a.dropdown_link:after { border-bottom: 2px solid #6E6E6E; border-right: 2px solid #6E6E6E; } .top-menu.static .menu_container ul li a.dropdown_link:hover:after, .top-menu.moved .menu_container ul li a.dropdown_link:hover:after { border-color: #333; } .de .menu_container ul li a { margin-right: 18px; } .es .menu_container ul li a { margin-right: 8px; } .fr .menu_container ul li a { margin-right: 14px; } .it .menu_container ul li a { margin-right: 16px; } .pt .menu_container ul li a { margin-right: 24px; } .dropdown_block { position: absolute; margin: 0; padding: 5px 0; min-width: 100px; left: 20px; top: 116%; text-align: left; list-style: none inside; background: #fff; -webkit-columns: auto; -moz-columns: auto; columns: auto; -webkit-border-radius: 6px; border-radius: 6px; box-shadow: 0 5px 23px 3px rgba(0, 0, 0, 0.15); opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transition: 200ms; -o-transition: 200ms; transition: 200ms; } .dropdown_block:after { content: ""; position: absolute; left: 50%; top: -5px; display: block; width: 10px; height: 10px; margin: 0 0 0 -5px; background: #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .dropdown_block.inactive { opacity: 1; -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); } .dropdown_block li { display: block !important; margin: 0; padding: 8px 20px; min-height: 29px; } .dropdown_block li.all-link { border-bottom: 1px solid #ccc; } .dropdown_block li a { margin: 0 !important; padding: 0 !important; color: #191919 !important; border: none !important; display: block; text-decoration: none; font-weight: 600; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga", "kern"; white-space: nowrap; } .dropdown_block li a .name { line-height: 1.8em; color: #8c8c8c; } .dropdown_block li a .name:hover { color: #000; } .menu_container ul li a.language-selector { display: inline-block; margin: 0 0 -4px 56px; padding: 0 20px 0 0; width: 22px; height: 22px; } .menu_container ul li a.language-selector img { display: block; width: 22px; height: 22px; background: url("/img/spark2/common/sprite_languages_menu.png") no-repeat 0 0; background-size: 22px 354px; } .menu_container ul li a.language-selector:after { right: 12px; top: 2px; } .top-menu.moved .menu_container ul li a.language-selector { display: none; } .menu_container ul li a.language-selector.language-en img { background-position: 0 0; } .menu_container ul li a.language-selector.language-de img { background-position: 0 -37px; } .menu_container ul li a.language-selector.language-fr img { background-position: 0 -74px; } .menu_container ul li a.language-selector.language-es img { background-position: 0 -111px; } .menu_container ul li a.language-selector.language-it img { background-position: 0 -148px; } .menu_container ul li a.language-selector.language-pt img { background-position: 0 -185px; } .menu_container ul li a.language-selector.language-ja img { background-position: 0 -222px; } .menu_container ul li a.language-selector.language-zh img { background-position: 0 -259px; } .menu_container ul li a.language-selector.language-ru img { background-position: 0 -296px; } .menu_container ul li a.language-selector.language-uk img { background-position: 0 -332px; } #language_dropdown { top: 160%; left: 0; padding: 12px 0 5px; } #language_dropdown:after { left: 50%; top: -5px; margin: 0 0 0 -5px; } #language_dropdown a { height: 21px; padding: 0 0 0 40px !important; } #language_dropdown a .icon { position: absolute; display: block; top: 0; left: 0; width: 22px; height: 22px; background: url("/img/spark2/common/sprite_languages_menu.png") no-repeat 0 0; background-size: 22px 354px; } #language_dropdown a span { line-height: 21px; } #language_dropdown a .icon.icon-en { background-position: 0 0; } #language_dropdown a .icon.icon-de { background-position: 0 -37px; } #language_dropdown a .icon.icon-fr { background-position: 0 -74px; } #language_dropdown a .icon.icon-es { background-position: 0 -111px; } #language_dropdown a .icon.icon-it { background-position: 0 -148px; } #language_dropdown a .icon.icon-pt { background-position: 0 -185px; } #language_dropdown a .icon.icon-ja { background-position: 0 -222px; } #language_dropdown a .icon.icon-zh { background-position: 0 -259px; } #language_dropdown a .icon.icon-ru { background-position: 0 -296px; } #language_dropdown a .icon.icon-uk { background-position: 0 -332px; } .top-menu .notification.spark_bf2018 { position: absolute; top: 70px; left: 50%; width: 880px; height: 76px; margin: 0 0 0 -440px; border-radius: 12px; background-color: #3ba6ff; -webkit-font-smoothing: antialiased; } .top-menu .notification.spark_bf2018 .container { position: relative; display: block; width: 800px; height: 76px; padding: 16px 250px 0 100px; color: #fff; font-size: 1.063em; font-weight: 400; line-height: 130%; box-sizing: border-box; background: url("/img/spark2/desktop/bf2018/gift_2x.png") no-repeat 20px 10px; background-size: 70px 55px; z-index: 5; } .top-menu .notification.spark_bf2018 .container .fake-button { position: absolute; top: 17px; right: 0; display: block; width: 180px; height: 41px; padding: 0; color: #46a5f7; font-size: 1.125em; font-weight: 400; text-align: center; line-height: 41px; background: #fff; border-radius: 6px; z-index: 1; } .top-menu .notification.spark_bf2018 .close { position: absolute; top: 0; right: 0; display: block; width: 56px; height: 76px; color: #fff; font-size: 1.5em; font-weight: 600; line-height: 76px; text-align: center; } .top-menu .notification.spark_bf2018 .close:after { content: "×"; } .top-menu .notification.spark_android_release { position: absolute; top: 80px; left: 50%; width: 900px; height: 90px; margin: 0 0 0 -450px; border-radius: 10px; background-color: #278cf3; } .top-menu .notification.spark_android_release .container { position: relative; display: block; width: 900px; height: 90px; padding: 14px 300px 0 200px; color: #fff; font-size: 1.063em; font-weight: 400; line-height: 180%; box-sizing: border-box; background-size: 70px 55px; z-index: 5; } .top-menu .notification.spark_android_release .container span { font-size: 1.188em; font-weight: 600; } .top-menu .notification.spark_android_release .decorations { position: absolute; top: -33px; left: -80px; display: block; width: 310px; height: 155px; } .top-menu .notification.spark_android_release .container .fake-button { position: absolute; top: 24px; right: 55px; display: block; width: 180px; height: 42px; color: #278cf3; font-size: 1em; font-weight: 400; text-align: center; line-height: 42px; background: #fff; border-radius: 6px; z-index: 1; } .top-menu .notification.spark_android_release .close { position: absolute; top: 0; right: 0; display: block; width: 45px; height: 45px; color: #fff; font-size: 1.5em; font-weight: 600; line-height: 45px; text-align: center; z-index: 6; } .top-menu .notification.spark_android_release .close:after { content: "×"; } .available-on-container { display: inline-block; width: 220px; text-align: center; } .available-on { position: relative; display: inline-block; padding: 15px 60px 0 0; color: rgba(255, 255, 255, 0.75); font-size: 0.938em; } .available-on .apple { position: absolute; top: 15px; right: 30px; display: block; width: 16px; height: 19px; opacity: 0.75; } .available-on .android { position: absolute; top: 15px; right: 0; display: block; width: 16px; height: 19px; opacity: 0.75; } .available-on.dark { color: rgba(0, 0, 0, 0.45); } .available-on.dark .apple { content: url("/img/spark2/common/icons/icon_apple_dark.svg"); opacity: 0.45; } .available-on.dark .android { content: url("/img/spark2/common/icons/icon_android_dark.svg"); opacity: 0.45; } .content-block.bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 0 30px; background-color: #0b1b33; } .footer { padding: 30px 0 0; } .footer .menu_container { margin: 10px 60px 0 0; padding: 0; text-align: right; display: inline-block; min-width: 100px; vertical-align: top; list-style: none inside; } .footer .menu_container li { text-align: left; margin-bottom: 0.3em; } .footer .menu_container li:last-child { margin-bottom: 0; } .footer .menu_container li span { color: #fff; font-size: 1.188em; } .footer .menu_container li a { display: block; color: #737385; font-size: 0.938em; font-weight: 600; text-transform: initial; transition: 0.15s; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga", "kern"; } .footer .menu_container li a:hover { color: #fff; } .footer .menu_container li a.current { color: #fff; } .footer .menu_container li hr { border: none; height: 1px; margin: 14px auto; color: #737385; background-color: #737385; opacity: 0.4; } .footer .rights { width: 350px; } .footer .rights .logo { display: block; width: 85px; height: auto; } .footer .rights p { color: #737385; font-size: 0.75em; font-weight: 400; line-height: 20px; text-align: justify; } .footer .social { padding: 20px 0 40px; } .footer .social a { display: inline-block; width: 26px; height: 26px; margin: 0 30px 0 0; } .footer .social a.facebook { width: 22px; } .footer .social a.twitter { width: 27px; } .footer .social a.youtube { width: 32px; } .footer .social a.vimeo { width: 26px; } .footer .social a:hover path { fill: #fff; } .btn { display: inline-block; min-width: 220px; min-height: 48px; margin: 0; padding: 0 30px; color: #8c8c8c; font-size: 1.25em; font-weight: 600; line-height: 48px; text-align: center; border: 1px solid #e1e1e1; border-radius: 6px; box-sizing: border-box; } .btn.transparent { color: #1c80e5; font-weight: 400; border-color: transparent; } .btn.transparent-blue { color: #1c80e5; font-weight: 400; border-color: #1c80e5; } .btn.gradient-blue { border: 0; color: #fff; background: #205EFF; } .top-menu .btn { position: absolute; top: 14px; right: 0; min-width: 150px; min-height: 30px; padding: 0 20px; font-size: 0.875em; line-height: 30px; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-uppercase { text-transform: uppercase; } .left { float: left; } .right { float: right; } .clear { clear: both; } .hidden { display: none !important; } .unclickable { pointer-events: none; } .no-padding { padding: 0 !important; } .no-padding-top { padding-top: 0 !important; } .no-padding-bottom { padding-bottom: 0 !important; } .no-padding-left { padding-left: 0 !important; } .no-padding-right { padding-right: 0 !important; } .no-margin { margin: 0 !important; } .no-margin-top { margin-top: 0 !important; } .no-margin-bottom { margin-bottom: 0 !important; } .no-margin-left { margin-left: 0 !important; } .no-margin-right { margin-right: 0 !important; } .no-border { border: 0 !important; } .no-border-top { border-top: 0 !important; } .no-border-bottom { border-bottom: 0 !important; } .no-border-left { margin-left: 0; } .no-border-right { margin-right: 0; } @media (max-width: 1240px) { .menu { padding: 0 20px; box-sizing: border-box; } .content-block.bottom { padding: 0 20px 30px; box-sizing: border-box; } .footer .menu_container { margin: 10px 45px 0 0; } } @media only screen and (max-width: 1440px) { h2 { font-size: 2.75em; } h4 { font-size: 1.625em; } p.text { font-size: 1.25em; line-height: 32px; } } @media (-webkit-min-device-pixel-ratio: 2) { .menu_container ul li a.language-selector img { background-image: url("/img/spark2/common/sprite_languages_menu_2x.png"); } #language_dropdown a .icon { background-image: url("/img/spark2/common/sprite_languages_menu_2x.png"); } .top-menu .notification.spark_android_release .decorations { content: url("/img/spark2/desktop/common/spark_android_banner_2x.png"); } }