/* HTML5 Reset :: style.css ---------------------------------------------------------- We have learned much from/been inspired by/taken code where offered from: Eric Meyer :: https://meyerweb.com HTML5 Doctor :: https://html5doctor.com and the HTML5 Boilerplate :: https://html5boilerplate.com -------------------------------------------------------------------------------*/ /* Let's default this puppy out -------------------------------------------------------------------------------*/ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent; } article, aside, figure, footer, header, nav, section, details, summary { display: block; } /* Handle box-sizing while better addressing child elements: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ html { -webkit-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } /* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */ /* Responsive images and other embedded objects */ img, object, embed { max-width: 100%; } /* Note: keeping IMG here will cause problems if you're using foreground images as sprites. In fact, it *will* cause problems with Google Maps' controls at small size. If this is the case for you, try uncommenting the following: #map img { max-width: none; } */ /* force a vertical scrollbar to prevent a jumpy page */ html { overflow-y: scroll; } /* we use a lot of ULs that aren't bulleted. don't forget to restore the bullets within content. */ ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse: collapse; border-spacing: 0; } th { font-weight: bold; vertical-align: bottom; } td { font-weight: normal; vertical-align: top; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } input[type=radio] { vertical-align: text-bottom; } input[type=checkbox] { vertical-align: bottom; } .ie7 input[type=checkbox] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } select, input, textarea { font: 99% sans-serif; } table { font-size: inherit; font: 100%; } small { font-size: 85%; } strong { font-weight: bold; } td, td img { vertical-align: top; } /* Make sure sup and sub don't mess with your line-heights https://gist.github.com/413930 */ sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* standardize any monospaced elements */ pre, code, kbd, samp { font-family: monospace, sans-serif; } /* hand cursor on clickable elements */ .clickable, label, input[type=button], input[type=submit], input[type=file], button { cursor: pointer; } /* Webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea { margin: 0; } /* make buttons play nice in IE */ button, input[type=button] { width: auto; overflow: visible; } /* scale images in IE7 more attractively */ .ie7 img { -ms-interpolation-mode: bicubic; } /* prevent BG image flicker upon hover (commented out as usage is rare, and the filter syntax messes with some pre-processors) .ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} */ /* let's clear some floats */ .clearfix:before, .clearfix:after { content: " "; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; src: local("Roboto"), local("Roboto-Regular"), url("https://wows-landings-static.gcdn.co/global_static/fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2") format("woff2"), url("https://wows-landings-static.gcdn.co/global_static/fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff") format("woff"), url("https://wows-landings-static.gcdn.co/global_static/fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-regular.ttf") format("truetype"); } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; src: local("Roboto Bold"), local("Roboto-Bold"), url("https://wows-landings-static.gcdn.co/global_static/fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2") format("woff2"), url("https://wows-landings-static.gcdn.co/global_static/fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-700.woff") format("woff"), url("https://wows-landings-static.gcdn.co/global_static/fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-700.ttf") format("truetype"); } @font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; src: local("Roboto Condensed"), local("RobotoCondensed-Regular"), url("https://wows-landings-static.gcdn.co/global_static/fonts/roboto-condensed-v18-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2") format("woff2"), url("https://wows-landings-static.gcdn.co/global_static/fonts/roboto-condensed-v18-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff") format("woff"), url("https://wows-landings-static.gcdn.co/global_static/fonts/roboto-condensed-v18-latin-ext_latin_cyrillic-ext_cyrillic-regular.ttf") format("truetype"); } @font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; src: local("Roboto Condensed Bold"), local("RobotoCondensed-Bold"), url("https://wows-landings-static.gcdn.co/global_static/fonts/roboto-condensed-v18-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2") format("woff2"), url("https://wows-landings-static.gcdn.co/global_static/fonts/roboto-condensed-v18-latin-ext_latin_cyrillic-ext_cyrillic-700.woff") format("woff"), url("https://wows-landings-static.gcdn.co/global_static/fonts/roboto-condensed-v18-latin-ext_latin_cyrillic-ext_cyrillic-700.ttf") format("truetype"); } body { position: relative; width: 100%; min-width: 320px; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Roboto Condensed", sans-serif; font-weight: 400; font-size: 16px; color: white; overflow: hidden; background-color: #080c1d; } /* arrow down */ .arrow-down { z-index: 2; width: 100px; height: 50px; margin: -2px auto 0; -webkit-box-sizing: border-box; box-sizing: border-box; background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjYiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCA2NiAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwbDMzIDEwTDY2IDB2NEwzMyAxNCAwIDRWMHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=); background-position: center; background-size: auto; background-repeat: no-repeat; opacity: 1; -webkit-animation: arrow-down 2s infinite; animation: arrow-down 2s infinite; cursor: pointer; } .arrow-down:nth-child(1) { -webkit-animation-delay: 0; animation-delay: 0; } .arrow-down:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .arrow-down:nth-child(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } @-webkit-keyframes arrow-down { 0% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 50% { -webkit-transform: translateY(5px); transform: translateY(5px); } 100% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } } @keyframes arrow-down { 0% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 50% { -webkit-transform: translateY(5px); transform: translateY(5px); } 100% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } } .loader { display: none; } body.loading.loading--fade-out .loader { -webkit-animation: loaderFadeOut 0.5s linear forwards; animation: loaderFadeOut 0.5s linear forwards; } body.loading .loader { position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 2147484644; opacity: 1; } body.loading .loader:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.4; } body.loading .loader__processing { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: block; width: 78px; height: 78px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAMAAAC5dNAvAAAC31BMVEVHcExFNDA7JBxhUEuLbkukflJCLChhVFFbRDw8JB50aGUfDAo1GhI9IBU9IBhKKBpyY115X0MlEA20h1gwGRJhQCpbSkROKx0gDQo6IBhvTTaNdlcqFBFKMCBePCtzXEyOeGaghF5SMirayKdXNSK8o4OynH1lTDiUcFJrRyytilm5j1SQZTwAAAAEBAIIBwYBBgcOCwpHPzsMDw4CDQobGBUUDw0DExEiGxc2NDIfHR0OBwQVDAgjFxE8ODUaEg8xHBQEKCFCOTM8KyEJGhQqFw8pKCcMExRcUUkJLCU5LipNRD6VjopXS0VHKRw3Jh0TEhFTUE0xKiQtJSFUMB8IOjF8dXGKhYE7IBUZIDECChBcVFFBPjpjWlQ9My8pHBQ0Ihl5Wjx0cG5TSEJFRUEUHCc0LyhCMSZNSEQlIBujnZhtZmGvragaJTmopZ8uLCsBIRtMLx83PDoEDhlUOSgWGRqBencmJCCWlJJhWk5WWVeblYwNQzq1r6tya2h5cWVeX10FMSkKEwYPIh9iUDtwY1mDYD5MS0icmpUtIRqUdU1OQDdmXlkFFSWvqaILGBu0tLGLgXMVKkMgEAm7t7NuUzhcOCONiodxSS1hQCqWi34RIjZBJBgPIi8KHSa9vLrIwbuiop9tXk4lUlCFgHwQGi5mYl5LOTRmVkouMi92a1wMHxng3do6NykgIyJLNSbDlF7JnmdjZmWEeWppbGmJaUXfqGiaelFkSDCCVjTZ19P/4ZNVRTqykmCklIP98rybbUPtxIQdMzGXhnJrPSYNMil3UjSriFvUzsj64qA4RkOhi3DKx8WBhYKtfUz50ojq5uOfdUmSaT50d3OUgGQSTkjruHQ5ZWXNlVhJVFKMj47fxIu7nGresnW8iVKqlXL99dr/76wjR0TPtIF/akvTqXKEc1+7rIymqqj//e3w4a5kkZjy8O7m1KVSfYC+pXInYFxCcXPGu6hwfX3r38NRwHseAAAA5nRSTlMAN4dj/P5mBBoeEpft0ZbuTPvI/rf0gM3TTMj+cNqOmYX8wP7z2fus0eDD59D//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////v///////////////////v25VdYAABIWSURBVFjDpZiHW5vX9cexDTZxPOOkSZrVjM7f753aW0ggCc2BkAAJCQlZIIkl9h5mbzB7mGFjps0ww2YaD2y8Zx1vx453nNn+Ab2ymzZtM9vzIJ4XnocP33PPec+99+vh8VOxdtPqXz2PVZvWevxv8dKbK19dv+61Y9PT00c1H21c/+rKN1/6L1FrVqz84+azV4sivjxx98Ts3VM7T924NXbB/Nr6lSvW/GKY99uvX56/MDV78MTOPU8+AREzWPvkyScHz82bzc3r3/b+ZUlu8Pzy8o0bdz7/6/KHl2sXFi7fOfXWW6e+WV7+5OCpG+8/GDu27uWfn7T3uw9vHDx45PKjDxfmguQjJiaTATPqFCOuxIL+2trxO3fvnhszb/yZwDWrPT//5MmTbwb7Wo61MyF3wMqkJCHqfmKaRsofPnp68MTs5gMb3/4Za/jSr996+uSTvx5xtXMZ4O+xgXSLZV/uRG5x+r591mEEEOsU/QtPH93/dH/iKz8pcPXm1vvfnD/Vwq0DsOHIfZf2WdLphmtJSdb44eL09HRrrBCCGX6y2g8HvzxUtG71jye64XePHo4fKQjygyGElmtJjxfE5wqudXfX7Jm5lPq4eHjAwKbR6DDE4BcOfj57qyzo5R9JeO2vvzz4yaOdCqAMKdbmnjyZe6Yzynq98/H5ZzWW1KZ41XJXqsVAF8QOg5xHaj8/ccvL9craH6Z9evfgpzv9GBAc37vPYL3+uOZ096XrZ4onJvapBCTVvoma8zXSrvpcOkmQBMF+O795emi+8Yd4a9y0OyNAmlKVHl/8l5rOqNPXrb25VA6JoMRiDU2P01WXZqqk9cs9JCVdgEB1IwsHAe+N78/3OU0DVo02YY0v2dP5+ExJLoGdggUYeYJhurU3xRBrFdCyukqSo05PxJLoBLCCR54euil/5ft477719OllDReCrLnx12pmukFfkCCYxHNmJ1uyk7Oztc5QPTsA4jirYnodqckqEpIEMRVHPp+/H/Tyf9JWNVy+c7mRC8Mq1UB6feel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); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 1; } body.loading .loader__processing:after { content: ""; position: absolute; display: block; width: 78px; height: 78px; background-image: url(data:image/png;base64,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); background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-animation: loaderSpinning 1.5s linear infinite; animation: loaderSpinning 1.5s linear infinite; } @-webkit-keyframes loaderSpinning { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loaderSpinning { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loaderFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes loaderFadeOut { from { opacity: 1; } to { opacity: 0; } } /* * Technical classes: .animated-screen--disabled . */ .animated-screen { display: none; } body.loading .animated-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 9999; background-color: #000000; } body.loading .animated-screen.animated-screen--disabled { display: none; } .animated-screen--fade-out .animated-screen { -webkit-animation: animatedScreenFadeOut 0.3s linear forwards; animation: animatedScreenFadeOut 0.3s linear forwards; } .animated-screen__logo { display: block; width: 40%; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .animated-screen__logo svg { display: block; width: 100%; -webkit-filter: drop-shadow(0px 8px 35px rgba(0, 0, 0, 0.55)); filter: drop-shadow(0px 8px 35px rgba(0, 0, 0, 0.55)); } .animated-screen__text { display: block; margin-top: 1em; font-family: "Roboto Condensed", sans-serif; font-weight: bold; font-size: 2.25em; color: #ffffff; text-align: center; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0; -webkit-animation: showElement 0.3s linear forwards; animation: showElement 0.3s linear forwards; } .animated-screen__spinner { margin-top: 20px; display: block; width: 20px; height: 20px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAVFBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////+UMeA9AAAAHHRSTlMABw8YHSMqLzU9RExbaHV/h5Gaoqy1wc7Z5PH6FBSzOAAAAI5JREFUGBkFwUtCwlAQALDMB7XS+x+RvSsL5XVIAqjt61YPgAb7dhMANHK/YwJAY/+dWK/zBNDcN/6PAwCtvs3xBwDaT88cAECq8XwCAKnMGwDQcrwAAG0AAEhrpgEAac00AKBksy4AUK4OcQKAMlGiZoCAYmWKTiIjBAorksyqCKDgPRGDAQQQlWGuuQY+S/4waNjZcWIAAAAASUVORK5CYII=); opacity: 0; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-animation: showElement 0.3s linear forwards, rotateElement 0.5s linear infinite; animation: showElement 0.3s linear forwards, rotateElement 0.5s linear infinite; -webkit-animation-delay: 0.5s, 0.3s; animation-delay: 0.5s, 0.3s; } @media screen and (max-width: 1280px) { .animated-screen__logo { width: 60%; } .animated-screen__text { font-size: 2em; } } @media screen and (max-width: 768px) { .animated-screen__logo { width: 100%; } .animated-screen__text { font-size: 1.625em; } } @media screen and (orientation: landscape) { .animated-screen__logo { width: 50%; } .animated-screen__text { margin-top: 0; } } @-webkit-keyframes animatedScreenFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes animatedScreenFadeOut { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes showElement { from { opacity: 0; } to { opacity: 1; } } @keyframes showElement { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes rotateElement { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotateElement { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /** * Swiper 6.4.5 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2020 Vladimir Kharlampidi * * Released under the MIT License * * Released on: December 18, 2020 */ @font-face { font-family: swiper-icons; src: url("data:application/font-woff;charset=utf-8;base64, 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") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color:#007aff; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; -o-transition-property: transform, height; transition-property: transform, height; transition-property: transform, height, -webkit-transform; } .swiper-container-3d { -webkit-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } :root { --swiper-navigation-size:44px; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(-1 * var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: "next"; } .swiper-button-next.swiper-button-white, .swiper-button-prev.swiper-button-white { --swiper-navigation-color:#ffffff; } .swiper-button-next.swiper-button-black, .swiper-button-prev.swiper-button-black { --swiper-navigation-color:#000000; } .swiper-button-lock { display: none; } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 0.3s opacity; -o-transition: 0.3s opacity; transition: 0.3s opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%; } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(0.33); -ms-transform: scale(0.33); transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(0.66); -ms-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(0.33); -ms-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(0.66); -ms-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(0.33); -ms-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: 0.2s top, 0.2s -webkit-transform; transition: 0.2s top, 0.2s -webkit-transform; -o-transition: 0.2s transform, 0.2s top; transition: 0.2s transform, 0.2s top; transition: 0.2s transform, 0.2s top, 0.2s -webkit-transform; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 0.2s left, 0.2s -webkit-transform; transition: 0.2s left, 0.2s -webkit-transform; -o-transition: 0.2s transform, 0.2s left; transition: 0.2s transform, 0.2s left; transition: 0.2s transform, 0.2s left, 0.2s -webkit-transform; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 0.2s right, 0.2s -webkit-transform; transition: 0.2s right, 0.2s -webkit-transform; -o-transition: 0.2s transform, 0.2s right; transition: 0.2s transform, 0.2s right; transition: 0.2s transform, 0.2s right, 0.2s -webkit-transform; } .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical > .swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color:#ffffff; } .swiper-pagination-black { --swiper-pagination-color:#000000; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s infinite linear; animation: swiper-preloader-spin 1s infinite linear; -webkit-box-sizing: border-box; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-lazy-preloader-white { --swiper-preloader-color:#fff; } .swiper-lazy-preloader-black { --swiper-preloader-color:#000; } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .last-screen { width: 100%; min-width: 100vw; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: calc(var(--vh) * 100); } .screen { position: relative; width: 100%; height: calc(var(--vh) * 100); min-height: 565px; overflow: hidden; } .screen__background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .screen__close { display: none; opacity: 0.7; position: absolute; top: 35px; right: 35px; width: 30px; height: 30px; z-index: 5; } .topbar { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 5px 0; background-color: #090c1d; z-index: 2; } .topbar__logo { display: block; height: 50px; margin: 10px; } .topbar__logo img { display: block; height: 100%; width: 100%; } .topbar__logo .desktop { display: block; } .topbar__logo .mobile { display: none; } .topbar__separator { display: block; width: 1px; height: 50px; margin: 0 10px; background-color: #ffffff; opacity: 0.5; } .topbar__text { display: block; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 100%; flex-basis: 100%; margin: 10px; margin-bottom: 5px; font-size: 1.5em; font-weight: 400; line-height: 1.3125; text-transform: uppercase; text-align: center; letter-spacing: 0.02em; } .topbar::after { content: ""; position: absolute; width: 100%; height: 70%; top: 99%; left: 0; background: -webkit-gradient(linear, left top, left bottom, from(#090c1d), to(rgba(9, 12, 29, 0))); background: -o-linear-gradient(top, #090c1d 0%, rgba(9, 12, 29, 0) 100%); background: linear-gradient(180deg, #090c1d 0%, rgba(9, 12, 29, 0) 100%); } .screen .section { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; height: 100%; background-position: center; background-size: cover; cursor: pointer; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .screen .section.section--left { top: 0; left: 0; width: 38.33%; background-image: url(https://wows-landings-static.gcdn.co/glows-49131/src/images/PS.jpg); -webkit-clip-path: polygon(0 0, 100% 0, 61% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 61% 100%, 0% 100%); z-index: 1; } .screen .section.section--left .section__content { padding-right: 19%; } .screen .section.section--center { top: 1px; left: 50%; width: 54%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-image: url(https://wows-landings-static.gcdn.co/glows-49131/src/images/XBOX.jpg); z-index: 0; } .screen .section.section--right { top: 0; right: 0; width: 38.33%; background-image: url(https://wows-landings-static.gcdn.co/glows-49131/src/images/PC.jpg); background-position: 40% 50%; -webkit-clip-path: polygon(39% 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(39% 0, 100% 0, 100% 100%, 0 100%); z-index: 1; } .screen .section.section--right .section__content { padding-left: 19%; } .screen .section .section__color { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; z-index: 0; } .screen .section .section__platform { display: block; width: 100%; max-width: 175px; opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .screen .section .section__platform svg { display: block; width: 100%; height: 100%; } .screen .section .mobile-section { display: none; } .screen .section .desktop-section { display: -webkit-box; display: -ms-flexbox; display: flex; } .screen .section__content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; z-index: 1; font-family: "Roboto Condensed", sans-serif; text-transform: uppercase; text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 1px 1px rgba(0, 0, 0, 0.5); color: #ffffff; } .screen .section__name { margin-top: 25vh; font-weight: 700; font-size: 48px; line-height: 56px; } .screen .section__description { font-weight: 500; font-size: 18px; line-height: 28px; } .screen .section__content .cta-button { margin-top: 30px; } .screen .screen-swiper-button-prev, .screen .screen-swiper-button-next { display: none; } .section__link { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .tabs { display: none; } .progress__wrap { display: none; } .progress { display: none; position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; z-index: 1; } .progress.active { display: block; } .progress__bar { position: absolute; left: 0; bottom: 0; width: 30%; height: 5px; -webkit-animation: progressBar 3s linear forwards; animation: progressBar 3s linear forwards; } .progress--ps { background-color: #003d91; } .progress--ps .progress__bar { background-color: #1a68d3; } .progress--xbox { background-color: #1f4309; } .progress--xbox .progress__bar { background-color: #51a81b; } .progress--pc { background-color: #025b6e; } .progress--pc .progress__bar { background-color: #13d5ff; } @-webkit-keyframes progressBar { 0% { width: 20%; } 100% { width: 100%; } } @keyframes progressBar { 0% { width: 20%; } 100% { width: 100%; } } .screen .swiper, .screen .swiper-wrapper { max-height: calc(var(--vh) * 100 - 305px); } @media screen and (min-width: 960px) { .section:hover .section__color--ps, .section:active .section__color--ps { background-color: #003d91; opacity: 0.8; } .section:hover .section__color--xbox, .section:active .section__color--xbox { background-color: #51a81b; opacity: 0.6; } .section:hover .section__color--pc, .section:active .section__color--pc { background-color: #13d5ff; opacity: 0.7; } } @media screen and (max-width: 1280px) { .topbar { width: 100%; } .topbar__logo { height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .screen .section__platform { max-width: 130px; } } @media screen and (max-width: 960px) { .topbar { padding-top: 20px; padding-bottom: 0; position: relative; } .topbar__logo { height: auto; max-width: 40%; height: 40px; margin: 5px; margin-top: 20px; } .topbar__logo .desktop { display: none; } .topbar__logo .mobile { display: block; } .topbar__separator { -webkit-transform: rotate(9deg); -ms-transform: rotate(9deg); transform: rotate(9deg); } .topbar__text { width: 100%; margin: 0; font-size: 24px; line-height: 36px; } .screen { display: block; height: calc(var(--vh) * 100); max-height: calc(var(--vh) * 100); } .screen .section { position: inherit; cursor: auto; } .screen .section.section--left, .screen .section.section--center, .screen .section.section--right { width: 100%; min-height: calc(var(--vh) * 100 - 305px); height: 100%; -webkit-clip-path: none; clip-path: none; left: 0; top: 0; -webkit-transform: none; -ms-transform: none; transform: none; width: 100%; clip-path: none; } .screen .section.section--left .section__content, .screen .section.section--center .section__content, .screen .section.section--right .section__content { height: calc(50% + 20px); margin-top: auto; padding: 0; padding-right: 120px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-transform: none; -ms-transform: none; transform: none; } .screen .section.section--left { background-image: url(https://wows-landings-static.gcdn.co/glows-49131/src/images/PS_mobile.jpg); } .screen .section.section--center { background-image: url(https://wows-landings-static.gcdn.co/glows-49131/src/images/XBOX_mobile.jpg); } .screen .section.section--right { background-image: url(https://wows-landings-static.gcdn.co/glows-49131/src/images/PC_mobile.jpg); } .screen .section .mobile-section { display: -webkit-box; display: -ms-flexbox; display: flex; } .screen .section .desktop-section { display: none; } .screen .section .section__platform { max-width: 50px; opacity: 1; } .screen .mobile-section { display: -webkit-box; display: -ms-flexbox; display: flex; } .screen .section__content { height: calc(var(--vh) * 95); opacity: 1; } .screen .section:hover { -webkit-transform: none; -ms-transform: none; transform: none; } .screen .section:hover.section--center { -webkit-transform: none; -ms-transform: none; transform: none; } .screen .section:hover .section__color { opacity: 0.3; } .screen .section:hover .section__platform { -webkit-transform: none; -ms-transform: none; transform: none; } .screen .screen .swiper, .screen .screen .swiper-wrapper { max-height: calc(var(--vh) * 100 - 305px); } .screen .screen-swiper { position: relative; } .screen .screen-swiper-button-prev, .screen .screen-swiper-button-next { display: block; position: absolute; top: 50%; width: 64px; height: 64px; background-color: transparent; background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQgNjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQ3LjIzOCA1Ljc3MmwtMi42Mi0yLjcyNEwxNi43NjEgMzJsMjcuODU1IDI4Ljk1MiAyLjYyMS0yLjcyNEwyMi4wMDUgMzIgNDcuMjM3IDUuNzcyeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==); border: none; z-index: 1; } .screen .screen-swiper-button-prev { left: 20px; } .screen .screen-swiper-button-next { right: 20px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .screen .screen-swiper-button-prev:hover, .screen .screen-swiper-button-next:hover { background-color: transparent; } .screen .screen-swiper-pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; bottom: 12vh; left: 50%; width: 100px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin: 0; z-index: 1; } .screen .swiper-pagination-bullet { width: 14px; height: 14px; background-color: #ffffff; opacity: 0.5; border: none; } .screen .swiper-pagination-bullet-active { position: relative; width: 20px; height: 20px; opacity: 1; } .tabs { position: absolute; top: 0; right: 0; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tabs__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; } .tabs__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; padding: 0 10px; } .tabs__item.active { display: none; } .tabs__item--ps { background-color: rgba(0, 61, 145, 0.8); } .tabs__item--xbox { background-color: rgba(81, 168, 27, 0.8); } .tabs__item--pc { background-color: rgba(19, 213, 255, 0.8); } .progress__wrap { display: block; } } @media screen and (max-width: 600px) { .topbar { padding: 10px; padding-top: 50px; padding-top: calc(var(--vh) * 5); } .topbar::after { height: 60%; } .topbar__logo { -ms-flex-item-align: auto; align-self: auto; } .topbar__description { font-size: 20px; line-height: 26px; } .topbar__description span { font-size: 20px; line-height: 26px; color: #ffcc66; -webkit-text-decoration: dotted; text-decoration: dotted; border-bottom: 1px dashed #ffcc66; } .topbar__bonuses { display: none; } .screen .swiper, .screen .swiper-wrapper { max-height: calc(var(--vh) * 100 - 225px); } .screen .screen-swiper-button-prev, .screen .screen-swiper-button-next { width: 32px; height: 32px; } .screen .screen-swiper-button-prev { left: 0; } .screen .screen-swiper-button-next { right: 0; } .screen .section.section--left, .screen .section.section--center, .screen .section.section--right { min-height: calc(var(--vh) * 100 - 225px); } .body--bonuses { position: fixed; } .body--bonuses .topbar__bonuses { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; width: 100vw; height: 100vh; background: rgba(40, 24, 4, 0.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); top: 0; left: 0; } .body--bonuses .topbar__bonuses li { max-width: none; text-align: center; } .body--bonuses .screen-swiper-button-prev, .body--bonuses .screen-swiper-button-next { display: none; } .body--bonuses .screen-swiper-pagination { display: none; } .body--bonuses .lang-switcher { display: none; } .body--bonuses .screen__close { display: block; } } /*\/\/\/\/\/\/\/\/\/\/\/*/ /* language switcher */ /*\/\/\/\/\/\/\/\/\/\/\/*/ .lang-switcher { position: absolute; z-index: 3; right: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 35px; margin-right: 25px; cursor: pointer; opacity: 0.7; -webkit-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .lang-switcher:hover { opacity: 1; } .lang-switcher__icon { width: 19px; height: 19px; margin-right: 10px; } .lang-switcher__icon svg { width: 19px; height: 19px; } .body--bonuses .lang-switcher { display: none; } /* modal lang */ .modal-languages { display: none; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 999; overflow: hidden; } .modal-languages--active { display: block; } /* .modal-languages--active .modal-languages__outer { animation: 0.3s ease-in-out forwards showModalLanguagesOuter; } .modal-languages--active .modal-languages__content { animation: 0.3s ease-in-out forwards showModalLanguagesContent; } */ .modal-languages--showing .modal-languages__outer { -webkit-animation: 0.3s ease-in-out forwards showModalLanguagesOuter; animation: 0.3s ease-in-out forwards showModalLanguagesOuter; } .modal-languages--showing .modal-languages__content { -webkit-animation: 0.3s ease-in-out forwards showModalLanguagesContent; animation: 0.3s ease-in-out forwards showModalLanguagesContent; } @-webkit-keyframes showModalLanguagesOuter { from { display: block; opacity: 0; } to { opacity: 1; } } @keyframes showModalLanguagesOuter { from { display: block; opacity: 0; } to { opacity: 1; } } @-webkit-keyframes showModalLanguagesContent { from { -webkit-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes showModalLanguagesContent { from { -webkit-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } .modal-languages--hiding .modal-languages__outer { animation: 0.3s ease-in-out forwards reverse showModalLanguagesOuter; } .modal-languages--hiding .modal-languages__content { animation: 0.3s ease-in-out forwards reverse showModalLanguagesContent; } .modal-languages__outer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(50, 60, 59, 0.7); -webkit-transition: background-color 0.3s ease-in; -o-transition: background-color 0.3s ease-in; transition: background-color 0.3s ease-in; } .modal-languages__content { /* display: none; */ position: absolute; top: 0; right: 0; bottom: 0; min-width: 220px; padding-top: 50px; background-color: rgb(16, 20, 24); overflow-y: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* animation: 0.3s ease-in-out forwards reverse showModalLanguagesContent; */ } .modal-languages__close { position: absolute; top: 6px; right: 6px; display: block; width: 22px; height: 22px; padding: 0; font-size: 22px; line-height: 22px; color: #ffffff; opacity: 0.65; text-align: center; text-decoration: none; background-color: transparent; outline: none; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; will-change: opacity; } .modal-languages__close:hover { opacity: 0.9; } .modal-languages__close:active { opacity: 1; } .modal-languages__realms-list { padding: 0 20px 20px; display: block; height: 100%; overflow-y: auto; } .modal-languages__realm { display: block; margin-top: 45px; padding: 0 10px; } .modal-languages__realm:first-child { margin-top: 0; } .modal-languages__realm-title { display: block; font-size: 16px; font-weight: 700; color: #ffffff; } .modal-languages__languages-list { display: block; margin-top: 20px; } .modal-languages__language-item { display: block; margin-bottom: 7px; } .modal-languages__language-item--active .modal-languages__language-link { opacity: 0.8; } .modal-languages__language-item--active .modal-languages__language-link:before { content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='10' height='20' viewBox='0 -5 10 20'%3E%3Cpath stroke='%23FFF' stroke-linejoin='round' stroke-linecap='round' fill='none' d='M1 6.1l4.05 4.05L1 14.2'/%3E%3C/svg%3E"); } .modal-languages__language-link { display: block; font-size: 14px; line-height: 22px; color: #ffffff; opacity: 0.5; will-change: opacity; -webkit-transition: opacity 0.25s linear; -o-transition: opacity 0.25s linear; transition: opacity 0.25s linear; text-decoration: none; } .modal-languages__language-link:hover { opacity: 0.9; } @media screen and (max-width: 960px) { .lang-switcher { margin-top: 15px; } } body #ot-sdk-btn.ot-sdk-show-settings { display: none; padding: 0; color: #ffffff; border: none; height: auto; white-space: normal; word-wrap: break-word; font-size: inherit; line-height: inherit; cursor: pointer; -webkit-transition: none; -o-transition: none; transition: none; } body #ot-sdk-btn.ot-sdk-show-settings:hover { background-color: transparent; border-bottom: none; } .section-content { position: relative; display: block; width: 100%; } .content__ships { position: relative; display: block; width: 100%; } .content__ships::before { content: ""; display: block; position: absolute; top: 10%; right: 0; bottom: 10%; left: 0; background: -webkit-gradient(linear, left bottom, left top, from(rgba(10, 62, 102, 0)), color-stop(30%, rgba(10, 62, 102, 0.7375994343)), color-stop(50%, rgba(10, 62, 102, 0.7936218433)), color-stop(70%, rgba(10, 62, 102, 0.6255546164)), to(rgba(10, 62, 102, 0))); background: -o-linear-gradient(bottom, rgba(10, 62, 102, 0) 0%, rgba(10, 62, 102, 0.7375994343) 30%, rgba(10, 62, 102, 0.7936218433) 50%, rgba(10, 62, 102, 0.6255546164) 70%, rgba(10, 62, 102, 0) 100%); background: linear-gradient(0deg, rgba(10, 62, 102, 0) 0%, rgba(10, 62, 102, 0.7375994343) 30%, rgba(10, 62, 102, 0.7936218433) 50%, rgba(10, 62, 102, 0.6255546164) 70%, rgba(10, 62, 102, 0) 100%); z-index: 1; opacity: 0.3; pointer-events: none; } .content__ships .swiper-container { position: relative; width: 100%; max-width: 100%; z-index: 0; } .content__ships .ships-mobile { display: none; } .content__ships .swiper2-container { width: 100%; overflow: hidden; } .content__info-container { position: absolute; top: 50%; right: 10%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 90px; width: 28%; min-width: 500px; z-index: 2; -webkit-transform: translate(0, -52%); -ms-transform: translate(0, -52%); transform: translate(0, -52%); } .content__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 80%; } .swiper2__slide-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .content__ship-type { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 75px; min-width: 75px; margin-right: 1.5625em; } .content__ship-type img { display: block; width: 100%; } .content__ship-name { display: block; font-family: "warhelios-bold", sans-serif; font-size: 3.125em; line-height: 1; text-transform: uppercase; text-shadow: 0 3px 5px black; } .content__ship-text { display: block; margin-top: 2.5em; width: 67%; font-size: 1.125em; } .content__flags { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 20%; padding-bottom: 1em; } .content__flags .swiper-slide-active { opacity: 0.3; } .content__flags .swiper-slide-active:hover { opacity: 0.7; } .content__flag-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 1.625em; opacity: 0.4; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } .content__flag-item:hover { opacity: 0.8; } .content__flag-item:active { opacity: 0.2; } .content__flag-item:first-child { margin-top: 0; } .content__flag-item.content__flag-item--active { opacity: 0.7; } .content__flag-image { display: block; width: 100px; } .content__flag-image img { display: block; width: 100%; } .content__flag-label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 0.4375em; } .content__flag-label-icon { display: block; width: 25px; min-width: 25px; margin-right: 5px; } .content__flag-label-icon img { display: block; width: 100%; } .content__flag-label-text { width: 100%; font-size: 1em; line-height: 1; overflow: visible; } .swiper-buttons__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 91%; margin-top: 1em; } .swiper-button-prev, .cards-button-prev { position: relative; top: unset; right: unset; left: unset; width: unset; height: unset; margin-top: 0; padding: 15px 19px; background-color: #284d67; border: 1px solid #ffffff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; cursor: pointer; } .swiper-button-prev:focus, .cards-button-prev:focus { outline: none; border-radius: 0; } .swiper-button-prev:hover, .cards-button-prev:hover { background-color: rgba(40, 77, 103, 0.7); } .swiper-button-prev:active, .cards-button-prev:active { border-color: rgba(255, 255, 255, 0.3); } .swiper-button-prev:active svg, .cards-button-prev:active svg { opacity: 0.5; } .swiper-button-prev::after, .cards-button-prev::after { content: unset; } .swiper-button-next, .cards-button-next { position: relative; top: unset; right: unset; left: unset; width: unset; height: unset; margin-top: 0; padding: 15px 19px; background-color: #284d67; border: 1px solid #ffffff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; cursor: pointer; } .swiper-button-next:focus, .cards-button-next:focus { outline: none; border-radius: 0; } .swiper-button-next:hover, .cards-button-next:hover { background-color: rgba(40, 77, 103, 0.7); } .swiper-button-next:active, .cards-button-next:active { border-color: rgba(255, 255, 255, 0.3); } .swiper-button-next:active svg, .cards-button-next:active svg { opacity: 0.5; } .swiper-button-next::after, .cards-button-next::after { content: unset; } .swiper-arrow-wrapper { pointer-events: none; } .swiper-arrow-wrapper svg { display: block; width: 12px; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .swiper-pagination, .cards-pagination { position: relative; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 10%; } .swiper-pagination-bullet { width: 20px; height: 20px; border: 1px solid #b7c2cd; background-color: #1f4562; opacity: 0.9; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .swiper-pagination-bullet:hover { border: 2px solid #ffffff; } .swiper-pagination-bullet:focus { outline: none; } .swiper-pagination-bullet-active { border: 3px solid #b7c2cd; opacity: 1; } .content__modes { position: relative; display: block; width: 100%; } .content__modes-background { position: absolute; top: -15%; left: 0; width: 100%; z-index: -1; } .content__modes-background::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #080c1d), to(rgba(0, 0, 0, 0))); background: -o-linear-gradient(top, #080c1d 15%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(180deg, #080c1d 15%, rgba(0, 0, 0, 0) 100%); z-index: 1; pointer-events: none; } .content__modes-background::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; background: -webkit-gradient(linear, left bottom, left top, color-stop(15%, #080c1d), to(rgba(0, 0, 0, 0))); background: -o-linear-gradient(bottom, #080c1d 15%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(0deg, #080c1d 15%, rgba(0, 0, 0, 0) 100%); z-index: 1; pointer-events: none; } .content__modes-background img { width: 100%; } .content__modes-titles { display: block; width: 70%; max-width: 1440px; margin: 0 auto; } .content__modes-title { display: block; width: 100%; margin: 0 auto; text-align: center; font-family: "Roboto Condensed", sans-serif; font-weight: 700; font-size: 2em; line-height: 1; text-transform: uppercase; text-shadow: 0 3px 5px black; } .content__modes-subtitle { display: block; width: 100%; margin-top: 0.8em; text-align: center; font-size: 1.125em; line-height: 1.33; opacity: 0.87; text-shadow: 0 3px 5px black; } .content__cards-container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 77.66%; max-width: 1600px; margin: 0 auto; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } .content__cards-container .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; height: auto; } .content__cards-container .cards-button-prev { position: absolute; top: 50%; left: 0; -webkit-transform: translate(-101%, -50%); -ms-transform: translate(-101%, -50%); transform: translate(-101%, -50%); } .content__cards-container .cards-button-prev.swiper-button-disabled { opacity: 0; } .content__cards-container .cards-button-next { position: absolute; top: 50%; right: 0; -webkit-transform: translate(101%, -50%); -ms-transform: translate(101%, -50%); transform: translate(101%, -50%); } .content__cards-container .cards-button-next.swiper-button-disabled { opacity: 0; } .content__cards-container .cards-pagination { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 1em; } .content__cards-container .cards-pagination .swiper-pagination-bullet { width: 7px; height: 7px; margin: 0 3px; border: none; } .content__cards-container .cards-pagination .swiper-pagination-bullet-active { background-color: #b7c2cd; } .content__cards-slider { display: block; width: 100%; overflow-x: hidden; } .content__card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 256px; min-width: 256px; margin: 1.5625em 1em 0; padding: 16px 25px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: rgba(17, 56, 87, 0.5); border: 1px solid rgba(255, 255, 255, 0.5); } .content__card-title { min-height: 2em; font-size: 1.0625em; font-weight: 900; text-align: center; line-height: 1; color: #ffffff; opacity: 0.87; } .content__card-icon { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 1em 0; } .content__card-icon::before { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; max-width: 180px; height: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwIiBoZWlnaHQ9IjI1MCIgdmlld0JveD0iMCAwIDI1MCAyNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0idXJsKCNwYWludDBfcmFkaWFsKSIgZD0iTTAgMGgyNTB2MjUwSDB6Ii8+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDBfcmFkaWFsIiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0icm90YXRlKDkwIDAgMTI1KSBzY2FsZSgxMjUpIj48c3RvcCBzdG9wLWNvbG9yPSIjNzBBREUwIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48L3N2Zz4=); background-size: contain; background-position: center; background-repeat: no-repeat; z-index: -1; } .content__card-icon img { display: block; width: 100%; max-width: 180px; } .decor-gradient-line { display: block; width: 100%; height: 2px; background-color: #ffffff; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.91)), color-stop(50%, rgb(255, 255, 255)), color-stop(80%, rgba(255, 255, 255, 0.91)), to(rgba(255, 255, 255, 0))); background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.91) 20%, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0.91) 80%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.91) 20%, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0.91) 80%, rgba(255, 255, 255, 0) 100%); opacity: 0.3; } .content__card-description-wrapper { display: block; width: 100%; margin-top: 1em; } .content__card-description { display: block; width: 100%; -moz-text-align-last: left; text-align-last: left; font-size: 1.125em; font-weight: 400; color: #ffffff; opacity: 0.87; } @media screen and (max-width: 1920px) { .content__info-container { right: 7%; } } @media screen and (max-width: 1600px) { .content__ships .swiper-container { position: absolute; top: 0; left: 0; width: 73%; margin-left: 0; } .content__ships .ships-desktop { display: none; } .content__ships .ships-mobile { display: block; } .content__ships .swiper2-container { width: 45%; margin-left: auto; } .content__info-container { position: relative; top: 0; right: 0; -webkit-transform: none; -ms-transform: none; transform: none; width: 100%; } .content__info { width: 82%; } .content__ship-text { width: 100%; } .swiper-buttons__wrapper { width: 40%; margin-top: 0; margin-left: auto; margin-right: 5%; } .content__flags { width: 15%; } .content__flag-item { margin-top: 1.25em; } .content__flag-image { width: 85px; } .content__flag-label { margin-top: 0.35em; } .content__flag-label-icon { width: 20px; min-width: 20px; } .content__flag-label-text { font-size: 0.9em; } .content__modes { margin-top: 5em; } .content__modes-background { top: 0; } } @media screen and (max-width: 1200px) { .section-content .swiper-button-prev, .section-content .cards-button-prev { padding: 10px 14px; } .section-content .swiper-button-next, .section-content .cards-button-next { padding: 10px 14px; } .section-content .swiper-pagination-bullet { width: 16px; height: 16px; } .section-content .swiper-container { width: 100%; opacity: 0.4; } .section-content .content__info-container { min-width: auto; padding-top: 40px; } .section-content .content__info { width: 85%; margin: 0 auto; } .section-content .swiper2-container { width: 100%; } .section-content .content__ship-text { margin-top: 1.5em; text-shadow: 0 3px 5px black; } .swiper-buttons__wrapper { width: 50%; min-width: 260px; margin: 2em auto 0 0; margin-right: auto; } .content__flags { display: none; } .content__modes { margin-top: 10em; } } @media screen and (max-width: 640px) { .section-content .content__info-container { padding-top: 29.155vw; } .content__ship-type { width: 45px; min-width: 45px; margin-right: 1em; } .content__ship-name { font-size: 2.3em; } .content__card { width: 230px; min-width: 230px; padding: 16px 15px 20px; } .content__cards-container .cards-button-prev { -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); z-index: 999; } .content__cards-container .cards-button-next { -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); z-index: 999; } } .section-gameplay { position: relative; display: block; margin-top: 4em; z-index: 1; } .section-gameplay:before { content: ""; position: absolute; top: -5%; right: 0; bottom: 1%; left: 0; background-color: #fff; background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), color-stop(5%, rgba(0, 0, 0, 0.4)), color-stop(95%, rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0))); background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 5%, rgba(0, 0, 0, 0.4) 95%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 5%, rgba(0, 0, 0, 0.4) 95%, rgba(0, 0, 0, 0) 100%); z-index: 1; pointer-events: none; } .gameplay__titles { position: relative; display: block; width: 70%; max-width: 1440px; margin: 0 auto; z-index: 2; } .gameplay__title { display: block; width: 100%; margin: 0 auto; text-align: center; font-family: "Roboto Condensed", sans-serif; font-weight: 700; font-size: 2em; line-height: 1; text-transform: uppercase; text-shadow: 0 3px 5px black; } .gameplay__slider-container { position: relative; display: block; margin-top: 2em; width: 70%; max-width: 1400px; margin: 2em auto 0; overflow-x: hidden; } .gameplay__slider-decoration-left { position: absolute; top: -5%; left: 0; height: 120%; z-index: 2; pointer-events: none; } .gameplay__slider-decoration-left img { display: block; height: 100%; } .gameplay__slider-decoration-right { position: absolute; top: -5%; right: 0; height: 105%; pointer-events: none; z-index: 2; } .gameplay__slider-decoration-right img { display: block; height: 100%; } .gameplay__decor-gradient-line { display: block; width: 100%; height: 5px; background-color: #ffffff; background: -webkit-gradient(linear, left top, right top, from(rgba(118, 182, 229, 0)), color-stop(40%, rgba(118, 182, 229, 0.91)), color-stop(50%, rgb(118, 182, 229)), color-stop(60%, rgba(118, 182, 229, 0.91)), to(rgba(118, 182, 229, 0))); background: -o-linear-gradient(left, rgba(118, 182, 229, 0) 0%, rgba(118, 182, 229, 0.91) 40%, rgb(118, 182, 229) 50%, rgba(118, 182, 229, 0.91) 60%, rgba(118, 182, 229, 0) 100%); background: linear-gradient(90deg, rgba(118, 182, 229, 0) 0%, rgba(118, 182, 229, 0.91) 40%, rgb(118, 182, 229) 50%, rgba(118, 182, 229, 0.91) 60%, rgba(118, 182, 229, 0) 100%); } .gameplay__slider { width: 100%; } .gameplay__slider .swiper-slide { position: relative; } .gameplay__slider iframe { display: block; width: 100%; height: calc(var(--vh) * 70); } .gameplay__slider video { display: block; width: 100%; } .swiper-slide .desktop { display: block; } .swiper-slide .mobile { display: none; position: relative; height: calc(var(--vh) * 80); aspect-ratio: 9/16; margin: 0 auto; } .gameplay__button-play { position: absolute; top: 0; right: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; } .gameplay__icon-play { display: block; width: 16%; -webkit-transition: opacity 0.1s linear; -o-transition: opacity 0.1s linear; transition: opacity 0.1s linear; cursor: pointer; } .gameplay__icon-play:active { opacity: 0.3; } .icon-play__triangle { -webkit-transition: fill-opacity 0.2s linear; -o-transition: fill-opacity 0.2s linear; transition: fill-opacity 0.2s linear; fill: #fff; fill-opacity: 0; } .gameplay__icon-play:hover .icon-play__triangle { fill-opacity: 1; } .gameplay__controls { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 3em; } .gameplay__control-item { display: block; width: 65px; margin: 0 15px; opacity: 0.3; -webkit-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .gameplay__control-item:hover { opacity: 0.6; } .gameplay__control-item:active { -webkit-transition: none; -o-transition: none; transition: none; opacity: 0.2; } .gameplay__control-item.gameplay__control-item--active { opacity: 0.9; } .gameplay__control-item img { display: block; width: 100%; } .video-poster { position: absolute; width: calc(100% + 2px); height: calc(100% + 2px); top: -1px; left: -1px; display: none; } .video-poster img { width: 100%; height: auto; } .video-description { position: absolute; width: 100%; height: 82%; top: 0; left: 50%; padding-top: 30%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background: -o-linear-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 100%); background-size: cover; } .video-description p { margin-top: calc(var(--vh) * 2); font-family: "Roboto Condensed", sans-serif; font-weight: 700; font-size: 3em; text-transform: uppercase; text-align: center; } #playerBB ~ .video-description.unloaded { background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/Montana_BB.jpg); background: -o-linear-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 100%), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/Montana_BB.jpg); background: linear-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 100%), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/Montana_BB.jpg); background-size: cover; } #playerCR ~ .video-description.unloaded { background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/yubari_CR.jpg); background: -o-linear-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 100%), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/yubari_CR.jpg); background: linear-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 100%), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/yubari_CR.jpg); background-size: cover; } #playerAC ~ .video-description.unloaded { background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/AC.jpg); background: -o-linear-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 100%), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/AC.jpg); background: linear-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 100%), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/AC.jpg); background-size: cover; } #playerDD ~ .video-description.unloaded { background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/jervis_DD.jpg); background: -o-linear-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 100%), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/jervis_DD.jpg); background: linear-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 100%), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/jervis_DD.jpg); background-size: cover; } #playerSB ~ .video-description.unloaded { background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/SB_u-69.jpg); background: -o-linear-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 100%), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/SB_u-69.jpg); background: linear-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 100%), url(https://wows-landings-static.gcdn.co/glows-49131/src/images/ship-types/SB_u-69.jpg); background-size: cover; } @media screen and (max-width: 1920px) { .gameplay__slider-container { width: 65%; max-width: 1200px; } .gameplay__controls { margin-top: 1em; } .gameplay__control-item { width: 55px; } } @media screen and (max-width: 1200px) { .gameplay__slider-container { margin-top: 1em; } } @media screen and (max-width: 960px) { .gameplay__slider-decoration-left, .gameplay__slider-decoration-right { display: none; } .section-gameplay { margin-top: calc(var(--vh) * 2); } .section-gameplay:before { background: none; } .gameplay__titles { width: 90%; } .gameplay__title { font-size: 1.5em; } .gameplay__slider-container { width: 98%; } .gameplay__decor-gradient-line { display: none; } .gameplay__control-item { width: 50px; } .swiper-slide .desktop { display: none; } .swiper-slide .mobile { display: block; } .gameplay__slider .swiper-slide { min-height: calc(var(--vh) * 70); } .gameplay__slider video { max-width: 100%; width: auto; height: 100%; max-height: calc(var(--vh) * 75); margin: 0 auto; } .gameplay__slider iframe { position: absolute; max-width: 100%; width: 100%; height: 100%; margin: 0 auto; } } @media screen and (max-width: 640px) { .gameplay__controls { margin-top: 0.5em; } .gameplay__control-item { width: 35px; margin: 0.5em 10px 0; } .gameplay__title { font-size: 1.2em; } } .section-join-us { position: relative; display: block; width: 100%; } .section-join-us::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 90px; background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #080c1d), to(rgba(0, 0, 0, 0))); background: -o-linear-gradient(top, #080c1d 3%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(180deg, #080c1d 3%, rgba(0, 0, 0, 0) 100%); pointer-events: none; z-index: 1; } .section-join__arrow { position: absolute; top: calc(var(--vh) * 1); left: 50%; -webkit-transform: translateX(-50%) rotate(180deg); -ms-transform: translateX(-50%) rotate(180deg); transform: translateX(-50%) rotate(180deg); z-index: 2; } .join-us__decor-planes { position: absolute; top: 0%; left: 0; width: 35%; -webkit-transform: translate(0, -35%); -ms-transform: translate(0, -35%); transform: translate(0, -35%); z-index: 1; pointer-events: none; } .join-us__decor-planes img { display: block; width: 100%; } .join-us__container { position: relative; width: 100%; background-size: cover; background-position: center; height: 100%; } .join-us__container img { display: block; width: 100%; } .join-us__content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .join-us__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; } .join-us__top img { display: block; width: 35%; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin: 0 auto; margin-top: 100px; } .join-us__middle .join-us__text { display: none; padding: 0 10px; margin: 0 auto; text-align: center; font-family: "Roboto Condensed", sans-serif; font-weight: 700; font-size: 5em; line-height: 1; text-transform: uppercase; word-break: break-word; } .join-us__bottom { width: 100%; } @media screen and (max-width: 1550px) { .join-us__bottom .buttons-container { padding-bottom: 5vh; } } @media screen and (max-width: 1024px) { .join-us__container { background-image: url(https://wows-landings-static.gcdn.co/glows-49131/src/images/join-us/join_us_mobile.jpg); } .join-us__middle .join-us__text { display: block; } } @media screen and (max-width: 1000px) { .section-join-us { margin-top: 30px; } .join-us__top img { display: none; } .join-us__bottom .buttons-container { margin-top: 0; padding-bottom: calc(var(--vh) * 10); } } @media screen and (max-width: 600px) { .join-us__middle .join-us__text { font-size: 3.5em; } } @media screen and (max-width: 375px) { .join-us__middle .join-us__text { font-size: 3em; } } .section-main { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; min-height: calc(var(--vh) * 100); background-position: top center; background-repeat: no-repeat; background-size: cover; } .section-main::before { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: -webkit-gradient(linear, left bottom, left top, color-stop(3%, #080c1d), to(rgba(0, 0, 0, 0))); background: -o-linear-gradient(bottom, #080c1d 3%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(0deg, #080c1d 3%, rgba(0, 0, 0, 0) 100%); pointer-events: none; z-index: 2; } .section-main__video-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden; } .section-main__video-bg video { position: absolute; top: 0%; left: 50%; -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); height: auto; width: auto; min-height: 100%; min-width: 100%; } .section-main__header { display: block; } .section-main__top { position: relative; z-index: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mobile-logo { display: none; } .mobile-logo img { display: block; width: 100%; } .section-main__middle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 0; } .section-main__bottom { position: absolute; z-index: 1; bottom: 1%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 1200px) { .section-main__video-bg { display: none; } .mobile-logo { display: block; width: 300px; } } @media screen and (max-width: 960px) { .section-main::before { display: none; } } @media screen and (max-width: 640px) { .section-main { min-height: auto; } .mobile-logo { width: 260px; } .section-main__middle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 0; } .section-main__middle .button-wrapper { margin-top: 1em; margin-bottom: 2em; } } /* legends label */ .legends-label { position: absolute; right: 0; bottom: 5vh; z-index: 10; } .legends-label_link { display: block; width: 100%; opacity: 0.6; -webkit-transition: opacity 0.25s ease-in; -o-transition: opacity 0.25s ease-in; transition: opacity 0.25s ease-in; } .legends-label_link:hover { opacity: 1; } .legends-label_link img { display: block; width: 250px; } @media screen and (max-width: 600px) { .legends-label_link img { width: 100px; } } @media only screen and (min-height: 380px) and (min-width: 600px) and (max-width: 80em) { .legends-label_link img { width: 170px; } } @media screen and (max-width: 48em) and (max-height: 400px) { .legends-label { bottom: 0; } .legends-label_link img { width: 100px; } } .section-usp { position: relative; overflow-x: hidden; z-index: 0; } .section-usp .buttons-container { position: absolute; bottom: 15%; left: 0; width: 100%; z-index: 1; } .usp__sliders { position: relative; width: 100%; height: 100%; max-width: unset; padding: 0; overflow: hidden; } .usp__slider { position: absolute; right: 0; top: 0%; width: 100%; height: 100%; } .usp__info-container { position: absolute; left: 10%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 90px; width: 35%; min-width: 500px; min-height: 50%; z-index: 2; top: 15%; } .usp__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 80%; } .sp__info-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .usp__info-name { display: block; font-family: "warhelios-bold", sans-serif; font-size: 3.125em; line-height: 1; text-transform: uppercase; text-shadow: 0 3px 5px black; } .usp__info-text { display: block; margin-top: 2.5em; width: 100%; font-size: 1.125em; text-shadow: 0 3px 5px black; } .usp__info-button-prev { position: relative; top: unset; right: unset; left: unset; width: unset; height: unset; margin-top: 0; padding: 15px 19px; background-color: #284d67; border: 1px solid #ffffff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; cursor: pointer; } .usp__info-button-prev:focus { outline: none; border-radius: 0; } .usp__info-button-prev:hover { background-color: rgba(40, 77, 103, 0.7); } .usp__info-button-prev:active { border-color: rgba(255, 255, 255, 0.3); } .usp__info-button-prev:active svg { opacity: 0.5; } .usp__info-button-prev::after { content: unset; } .usp__info-button-next { position: relative; top: unset; right: unset; left: unset; width: unset; height: unset; margin-top: 0; padding: 15px 19px; background-color: #284d67; border: 1px solid #ffffff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; cursor: pointer; } .usp__info-button-next:focus { outline: none; border-radius: 0; } .usp__info-button-next:hover { background-color: rgba(40, 77, 103, 0.7); } .usp__info-button-next:active { border-color: rgba(255, 255, 255, 0.3); } .usp__info-button-next:active svg { opacity: 0.5; } .usp__info-button-next::after { content: unset; } .section-usp { height: 100%; } .section-usp:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 50px; background: -webkit-gradient(linear, left bottom, left top, color-stop(3%, #080c1d), to(rgba(0, 0, 0, 0))); background: -o-linear-gradient(bottom, #080c1d 3%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(0deg, #080c1d 3%, rgba(0, 0, 0, 0) 100%); pointer-events: none; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .section-usp .swiper-buttons__wrapper { width: 80%; } .section-usp .swiper-pagination-bullet { width: 16px; height: 16px; } .usp__slider .swiper-slide { background-size: cover; background-position: center; } .usp-pagination { position: relative; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 10%; } @media screen and (max-width: 1920px) { .section-usp .buttons-container { bottom: 10%; } } @media screen and (max-width: 1600px) { .usp__info-container { top: 10vh; } .section-usp .swiper-buttons__wrapper { margin: 1em auto 0 0; } } @media screen and (max-width: 1400px) { .section-usp .buttons-container { bottom: calc(var(--vh) * 7); } } @media screen and (max-width: 1200px) { .section-usp .swiper-buttons__wrapper { width: 100%; min-width: 260px; } .section-usp .usp__info-button-prev { padding: 10px 14px; } .section-usp .usp__info-button-next { padding: 10px 14px; } .usp__slider { opacity: 0.5; } .usp__info-container { width: 85%; min-width: auto; } .usp__info { width: 100%; margin-top: calc(var(--vh) * 5); } .section-usp .buttons-container { margin-top: 5em; } } @media screen and (max-width: 960px) { .usp__slider { height: 50%; } .usp__info-container { width: 100%; left: 0; top: 19%; padding: 0 35px; } .usp__info-text { margin-top: 0.5em; } } @media screen and (max-width: 640px) { .usp__info-name { font-size: 2.3em; } } /* button */ .button-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; margin-top: 2em; } .button { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.75em 2.5em; font-family: "Roboto Condensed", sans-serif; font-size: 1.15em; line-height: 1.6; font-weight: 400; color: #fff; text-transform: uppercase; text-decoration: none; border: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .button-container { margin: 0; margin-bottom: calc(var(--vh) * 10); } .button { padding: 9px 25px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .button.button--windows { -webkit-box-shadow: 0 0 0 #00adef; box-shadow: 0 0 0 #00adef; background-color: #00adef; } .button.button--windows:hover { -webkit-box-shadow: 0 8px 30px #00adef; box-shadow: 0 8px 30px #00adef; } .button.button--windows:active, .button.button--windows:focus { background-color: #00adef; outline: transparent; } .button.button--ps { -webkit-box-shadow: 0 0 0 #003d91; box-shadow: 0 0 0 #003d91; background-color: #003d91; } .button.button--ps:hover { -webkit-box-shadow: 0 8px 30px #003d91; box-shadow: 0 8px 30px #003d91; } .button.button--ps:active, .button.button--ps:focus { background-color: #003d91; outline: transparent; } .button.button--xbox { -webkit-box-shadow: 0 0 0 #51a81b; box-shadow: 0 0 0 #51a81b; background-color: #51a81b; } .button.button--xbox:hover { -webkit-box-shadow: 0 8px 30px #51a81b; box-shadow: 0 8px 30px #51a81b; } .button.button--xbox:active, .button.button--xbox:focus { background-color: #51a81b; outline: transparent; } .button__label { display: block; } .buttons-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: calc(var(--vh) * 5); } .buttons-container .button { margin: 0 50px 1em; padding: 0.75em 2.3em; min-width: 310px; } .button.button--windows::before, .button.button--ps::before, .button.button--xbox::before, .button.button--modal::before { content: ""; display: block; width: 1.55em; height: 1.55em; margin-right: 0.6em; background-repeat: no-repeat; background-position: center; background-size: contain; } .button.button--windows { -webkit-box-shadow: 0 0 0 #00adef; box-shadow: 0 0 0 #00adef; background-color: #00adef; } .button.button--windows::before { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHZpZXdCb3g9IjAgMCAzNCAzNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC44NDYgNy42MTlsOS43NDgtMS40NjZjLjU4NS0uMDg4IDEuMTA2LjQxNyAxLjEwNiAxLjA3NHY3LjYwN2MwIC41OTgtLjQzNyAxLjA4My0uOTc1IDEuMDgzaC05Ljc1Yy0uNTM4IDAtLjk3NS0uNDg1LS45NzUtMS4wODNWOC42OTVjMC0uNTQ0LjM2MS0xLjAwMy44NDYtMS4wNzZ6TTMwIDUuMDg0djkuNzVjMCAuNTk4LS40MzcgMS4wODMtLjk3NSAxLjA4M2gtMTAuNGMtLjUzOCAwLS45NzUtLjQ4NS0uOTc1LTEuMDgzdi04LjE5YzAtLjU0Mi4zNi0xIC44NDQtMS4wNzJsMTAuNDAxLTEuNTY0Yy4yOC0uMDM2LjU1OS4wNS43NzQuMjYuMjA3LjIxLjMzMS41MDYuMzMxLjgxNnptLTI1LjAyNSAxM2g5Ljc1Yy41MzggMCAuOTc1LjQ4NS45NzUgMS4wODN2Ny42MDdjMCAuNjU2LS41MiAxLjE2MS0xLjEwNiAxLjA3M2wtOS43NDktMS40NjVDNC4zNjEgMjYuMzA5IDQgMjUuODUgNCAyNS4zMDd2LTYuMTRjMC0uNTk4LjQzNy0xLjA4My45NzUtMS4wODN6bTI0LjA1IDBjLjUzOCAwIC45NzUuNDg1Ljk3NSAxLjA4M3Y5Ljc1YzAgLjMxLS4xMjMuNjA2LS4zMzEuODE2YS45MzMuOTMzIDAgMDEtLjY0NC4yNjdjLS4wNDUgMC0uMDg0IDAtLjEzLS4wMDdsLTEwLjQtMS41NjNjLS40ODQtLjA3My0uODQ1LS41MzItLjg0NS0xLjA3NHYtOC4xODljMC0uNTk4LjQzNy0xLjA4My45NzUtMS4wODNoMTAuNHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=); } .button.button--windows:hover { -webkit-box-shadow: 0 8px 30px #00adef; box-shadow: 0 8px 30px #00adef; } .button.button--windows:active, .button.button--windows:focus { background-color: #00adef; outline: transparent; } .button.button--ps { -webkit-box-shadow: 0 0 0 #003d91; box-shadow: 0 0 0 #003d91; background-color: #003d91; } .button.button--ps::before { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHZpZXdCb3g9IjAgMCAzNCAzNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTMuMTYyIDMuMDl2MjYuMDg2bDUuMDc1IDEuNzMzVjkuMTM0YzAtLjU3Ny4wNjUtMSAuMjgtMS4yNDQuMjE0LS4zMzMuNDE0LS4zNjYuNzE5LS4yMjIuNzM0LjIzOSAxLjA3OS45NzggMS4wNzkgMi4xNzdWMTguNmMxLjY0My44NjYgMy4xMTYuOTU1IDQuMTk1LjA0NCAxLjEyNC0uODY2IDEuNzE4LTIuNDA1IDEuNzE4LTQuNzEgMC0yLjQwNS0uNDA0LTQuMjYtMS4zNTgtNS40NjYtLjg2NC0xLjI5NC0yLjM4OC0yLjMzMy00LjYzNS0zLjItMi44MDgtMS4wMS01LjE3LTEuNzMzLTcuMDczLTIuMTc3em0tMS41NTkgMTUuNzc2bC0uOTk4LjM1Nkw0LjMzIDIxLjcxbC0xLjA3OS40OUMxLjYwOSAyMi45NjUuNzMgMjMuNzg3Ljc3NSAyNC41MWMuMDg1IDEuMDU1IDEuMTY4IDEuODIyIDMuMTE2IDIuNCAyLjUyOC43NTUgNS4wOS45MjcgNy43MTMuNDg4di0yLjk3N2wtMSAuNC0xLjExOC40ODktMS43OTkuNC0xLjcxOC0uMjIyYy0uMzQ0LS4yNDUtLjQ2LS41MTctLjI0LS43NTYuMjE1LS4xNDQuNTM1LS4zNDQuODgtLjQ4OWwxLjE1OC0uNDQ0IDMuODM3LTEuNTF2LTMuNDIzem0xNC41NDYgMS4zNzhjLS40Ny0uMDIyLS45NDUuMDIyLTEuMzk5LjA0NC0xLjY3OC4wNC0zLjQwMS4zNDUtNS4xOTUuOTc4djMuNTFsMy41NTctMS4zNzcgMS44MzgtLjcxMSAxLjE5OS0uMzU1Yy43NzQtLjIyOCAxLjU5OC4wODggMS41OTguMDg4LjQ3NC4wNDUuNzE0LjI0NS44LjQ5LjA4NC4yODgtLjIzLjUxLS44OC43NTVsLTEuNTk4LjcxLTYuNTE0IDIuNTc4djMuNDIybDMuMDM3LTEuMiA3LjMxMy0yLjg4OC44NzktLjQ0NWMxLjczMy0uNzIyIDIuNTIyLTEuNDgzIDIuNDM3LTIuNDQ0LS4wNDUtLjkxNi0xLjAyOS0xLjYzOS0yLjc1Ny0yLjI2NmExNC4wNzYgMTQuMDc2IDAgMDAtNC4zMTUtLjg5eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==); } .button.button--ps:hover { -webkit-box-shadow: 0 8px 30px #003d91; box-shadow: 0 8px 30px #003d91; } .button.button--ps:active, .button.button--ps:focus { background-color: #003d91; outline: transparent; } .button.button--xbox { -webkit-box-shadow: 0 0 0 #51a81b; box-shadow: 0 0 0 #51a81b; background-color: #51a81b; } .button.button--xbox::before { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHZpZXdCb3g9IjAgMCAzNCAzNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYuOTY4IDIuMzE4Yy0yLjc0IDAtNS4zNS43NjctNy41MTYgMi4xMDctLjE0LjA0Ny0uMzgxLjIzLS42LjQyNSAxLjk0My0xLjU0NCA2LjQzOCAxLjU0OSA3Ljc1IDIuNDdhLjYzNC42MzQgMCAwMC43MzIgMGMxLjMxMy0uOTIxIDUuODA4LTQuMDE0IDcuNzUxLTIuNDctLjIyLS4xOTQtLjQ2MS0uMzc4LS42LS40MjUtMi4xNjYtMS4zNC00Ljc3OC0yLjEwNy03LjUxNy0yLjEwN3pNOC4wMyA2LjE0OGMtMS4wMiAwLTEuNzY0LjgzLTEuNzY0LjgzQzMuODQ3IDkuNTk3IDIuMzE4IDEzLjEwNyAyLjMxOCAxN2MwIDguMTA3IDYuNTYgMTQuNjgyIDE0LjY1IDE0LjY4MiA0LjI2NyAwIDguMTUzLTEuODUxIDEwLjgyOC00Ljc4OCAwIDAtLjMxOS0xLjkxNS0yLjI5My00LjcyNC0yLjIwOC0zLjMzLTYuNjgtNy41MjQtOC4xMTMtOC44MTJhLjYzLjYzIDAgMDAtLjg1MS4wMDRjLTEuMDc5Ljk4OC0zLjg2MyAzLjc1MS00LjQ3NiA0LjQ2OC0xLjQ2NSAxLjUzMi01LjU0MSA2LjM4My01Ljc5NiA5LjEyOCAwIDAtLjg5Mi0yLjE3IDEuMDgyLTcuMTUgMS4yMjktMi45OSA1LjA0NS03LjQzNyA2Ljg5Ni05LjM3N2EuNjM4LjYzOCAwIDAwLS4wMi0uOTA4Yy0uNjEzLS41NzQtMi4wNDEtMS41OC0zLjMyOS0yLjM1NC0uODkxLS41NzQtMS45MS0uOTU3LTIuODY1LTEuMDJ6bTE3LjY3NSAwYy0uNDE2IDAtMy4xMjUuODU3LTUuOTc0IDMuMzgzYS42MzMuNjMzIDAgMDAtLjAzLjkxM2MxLjAzMiAxLjA2NyAzLjg1NSAzLjggNS41NDcgNi40OTIgMi4xMDIgMy40NDcgMy4zNzUgNi4xOTIgMi42MSA5Ljk1OCAyLjM1Ny0yLjYxNyAzLjgyMy02LjA2NCAzLjgyMy05Ljg5NC0uMDY0LTMuODMtMS41My03LjM0LTMuOTUtOS45NThsLS4xOS0uMTkyYy0uNTEtLjU3NC0xLjI2My0uNzAyLTEuODM2LS43MDJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+); } .button.button--xbox:hover { -webkit-box-shadow: 0 8px 30px #51a81b; box-shadow: 0 8px 30px #51a81b; } .button.button--xbox:active, .button.button--xbox:focus { background-color: #51a81b; outline: transparent; } @media only screen and (min-width: 100em) { .buttons-container { padding: 23px 50px; } } @media screen and (max-width: 1200px) { .buttons-container .button { font-size: 1em; padding: 0.75em 1.5em; min-width: auto; } } @media screen and (max-width: 1024px) { .buttons-container { position: relative; margin-top: calc(var(--vh) * 5); } .buttons-container .button__label span { display: none; } } @media screen and (max-width: 980px) { .buttons-container .button { margin: 0 10px; opacity: 1; } .button { font-size: 0.95em; } } @media screen and (max-width: 600px) { .buttons-container .button { padding: 9px 30px; } .buttons-container .button__label { display: none; } .buttons-container .button.button--windows::before, .buttons-container .button.button--ps::before, .buttons-container .button.button--xbox::before, .buttons-container .button.button--modal::before { margin: 0; } } @media only screen and (min-width: 48em) { .flex-layout__t { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-flow: row wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .flex-layout_cell { display: inline-block; vertical-align: middle; width: 100%; } @media only screen and (min-width: 48em) { .column-70 { width: 66%; } } @media only screen and (min-width: 48em) { .column-30 { width: 33%; } } @media screen and (max-width: 600px) { .age-rating_image { width: 35px; } } @media only screen and (min-width: 80em) { .page-content { position: relative; top: auto; bottom: auto; left: auto; right: auto; } } .footer-links { margin-bottom: 15px; } .logo-footer_image { opacity: 0.4; height: 38px; } .logo-footer_image:hover { opacity: 1; } .age-rating { margin: 0 auto; } @media only screen and (min-width: 48em) { .age-rating { text-align: right; } } .age-rating_item { display: inline-block; vertical-align: top; margin: 0 auto; } @media only screen and (min-width: 48em) { .age-rating_item { margin-left: 10px; } } .age-rating_link { opacity: 0.7; } .age-rating_link:hover { opacity: 1; } .age-rating_image { max-width: 80px; } /* FOOTER AGE RATINGS START */ .age-ratings { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; text-decoration: none; } .age-ratings__items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .age-rating__item { display: block; height: 55px; margin: 0 4px; opacity: 0.9; text-decoration: none; } .age-rating__item:last-child { margin-right: 0; } .age-rating__item:first-child { margin-left: 0; } .age-rating__item img { display: block; height: 100%; } .age-ratings__description { display: block; text-align: center; margin-top: 10px; font-size: 10px; opacity: 0.7; } @media screen and (max-width: 1279px) { .age-ratings { margin-top: 1.25em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } /* FOOTER AGE RATINGS END */ .footer-nav { text-align: center; margin-left: 30px; } .footer-nav_item { text-transform: uppercase; display: inline-block; margin-right: 15px; } .footer-nav_link { color: #ffffff; opacity: 0.5; text-decoration: none; font-weight: normal; font-size: 12px !important; font-family: "robotocondensed-regular", sans-serif; } .footer-nav_link:hover { border: none !important; text-decoration: none; color: #fff; } @media only screen and (min-width: 48em) { .footer-nav { text-align: left; } } .copyright, .copyright-full { text-align: center; font: 400 9px/12px "Arial", sans-serif; color: #696969; } .copyright a, .copyright-full a { font: 400 9px/12px "Arial", sans-serif; color: #7a7a7a; text-decoration: underline; } .copyright a:hover, .copyright-full a:hover { text-decoration: none; } .copyright-full_text { margin-top: 0.5em; margin-bottom: 10px; } @media only screen and (min-width: 48em) { .copyright, .copyright-full { text-align: left; } } .page-footer { position: initial; width: 100%; background-color: black; text-align: center; padding: 10px 20px; } @media only screen and (min-width: 80em) { .page-footer { position: relative; bottom: auto; left: auto; } } .page-footer_container { max-width: 1600px; margin: 0 auto; } .page-footer_container--wide-age .age-rating_item, .page-footer_container--wide-age .age-rating_link, .page-footer_container--wide-age .age-rating_image { display: inline-block; width: 100%; } @media screen and (max-width: 1200px) { .page-footer_container--wide-age .flex-layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .page-footer_container--wide-age .flex-layout_cell { width: 100%; } .page-footer_container--wide-age .age-rating_link { display: block; max-width: 70%; margin: 0 auto; text-align: center; } } @media screen and (max-width: 640px) { .page-footer_container--wide-age .age-rating_link { max-width: 100%; } } .page-footer_container--wide-age .age-rating_image { max-width: 600px; } @media only screen and (min-width: 100em) { .page-footer_container { margin: 0 auto; } } @media only screen and (max-width: 48em) { .footer-nav { margin: 0; } .footer-nav_list { padding: 0; } .age-rating_list { padding: 0; } } /* end of footer (with wide age cell) */ .footer { display: block; padding: 1.3125em 0; width: 100%; background-color: rgba(0, 0, 0, 0.4); } .footer__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 90%; max-width: 1600px; margin: 0 auto; } .footer__row:nth-child(n+2)::before { content: ""; display: block; width: 100%; height: 1px; margin: 1.25em 0; background-color: #fff; opacity: 0.1; } .footer__wargaming-logo { display: block; margin-right: 3.5625em; } .footer__wargaming-link { display: -webkit-box; display: -ms-flexbox; display: flex; color: #ffffff; text-decoration: none; text-transform: none; } .footer__menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer__links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: 3.5625em; } .footer__link-wrapper { display: inline-block; margin-right: 2.5em; } .footer__link { display: block; font-size: 1em; font-weight: 400; color: #ffffff; opacity: 0.54; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .footer__link:hover { opacity: 1; } .footer__link:active { text-decoration: underline; } .footer__language-picker { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0.54; cursor: pointer; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .footer__language-picker:hover { opacity: 1; } .footer__language-picker:active { opacity: 0.7; } .language-picker__icon { display: block; width: 41px; margin-right: 0.25em; } .language-picker__icon img { display: block; width: 100%; } .language-picker__language { display: block; margin-right: 0.25em; font-family: "Roboto", sans-serif; font-size: 0.75em; } .language-picker__realm { display: block; margin-right: 0.25em; font-family: "Roboto", sans-serif; font-size: 0.75em; } .language-picker__arrow { display: block; width: 16px; height: 16px; } .language-picker__arrow svg { display: block; width: 100%; height: 16px; } .footer__texts { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .footer__copyright { font-family: "Roboto", sans-serif; font-size: 0.75em; line-height: 1.16; opacity: 0.54; } /* FOOTER AGE RATINGS START */ .age-ratings { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-decoration: none; } .age-ratings__items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .age-rating__link { display: block; height: 55px; margin: 0 8px; opacity: 0.9; } .age-rating__link img { display: block; height: 100%; } .age-ratings__description { display: block; text-align: center; margin-top: 10px; font-size: 10px; opacity: 0.7; } @media screen and (max-width: 1200px) { .age-ratings { margin-top: 1.25em; } } /* FOOTER AGE RATINGS END */ @media screen and (max-width: 1200px) { .footer__row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer__wargaming-logo { margin: 0; } .footer__menu { margin-top: 1.875em; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .footer__links { margin: 1.875em 0 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer__link-wrapper { margin: 0 1.25em; } .footer__texts { text-align: center; } .footer__age-ratings { margin-top: 1.25em; } } @media screen and (max-width: 640px) { .footer__links { margin-top: 1.25em; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer__link-wrapper { margin: 1.25em 0 0; } .footer__link-wrapper:first-child { margin: 0; } } .portrait { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; /* display: flex; */ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #000000; } .portrait--active { display: -webkit-box; display: -ms-flexbox; display: flex; } .phone-wrapper { position: relative; width: 232px; height: 206px; margin-bottom: 40px; } .phone { position: absolute; bottom: 0; left: 0; width: 95px; height: 206px; border-radius: 8px; } .phone--portrait { border: 4px solid #82878c; } .phone--landscape { border: 4px solid #ffffff; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); left: 40%; bottom: -27%; -webkit-animation: rotate 3s infinite; animation: rotate 3s infinite; } .phone-arrow { position: absolute; left: 55%; top: 20%; -webkit-transform: rotate(90deg) scale(-1, 1); -ms-transform: rotate(90deg) scale(-1, 1); transform: rotate(90deg) scale(-1, 1); } .portrait .title { font-family: "robotocondensed-bold", sans-serif; font-weight: 700; font-size: 22px; line-height: 34px; text-align: center; text-transform: uppercase; color: #ffffff; text-shadow: 0px 2px 7px rgba(0, 0, 0, 0.8); } .portrait .description { font-family: "robotocondensed-regular", sans-serif; font-weight: 400; font-size: 18px; line-height: 21px; text-align: center; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(90deg); transform: rotate(90deg); left: 40%; bottom: -27%; } 100% { -webkit-transform: rotate(0); transform: rotate(0); left: 0; bottom: 0; } } @keyframes rotate { 0% { -webkit-transform: rotate(90deg); transform: rotate(90deg); left: 40%; bottom: -27%; } 100% { -webkit-transform: rotate(0); transform: rotate(0); left: 0; bottom: 0; } }