@charset "UTF-8"; /** * The relative path to the image assets folder in CDN. * * @nuclide CDN-Folder * @section Config > Paths */ /** * The relative path to the image assets folder. * * @nuclide Image-Folder * @section Config > Paths */ /** * The relative path to the Mobile image assets folder. * * @nuclide Mobile-Image-Folder * @section Config > Paths */ /** * The relative path to the Leaderboards assets folder. * * @nuclide Leaderboards-Image-Folder * @section Config > Paths */ /** * The relative path to the Careers assets folder. * * @nuclide Careers-Image-Folder * @section Config > Paths */ /** * The relative path to the Careers v2 assets folder. * * @nuclide Careersv2-Image-Folder * @section Config > Paths */ /** * The relative path to the Clank assets folder. * * @nuclide Clank-Image-Folder * @section Config > Paths */ /** * The relative path to the Clank Sunken Treasures assets folder. * * @nuclide Clankst-Image-Folder * @section Config > Paths */ /** * The relative path to the Clank The Mummy's Curse assets folder. * * @nuclide Clankmc-Image-Folder * @section Config > Paths */ /** * The relative path to the Clank In Space assets folder. * * @nuclide Clankis-Image-Folder * @section Config > Paths */ /** * Default Font for DWD is Open-Sans * * @nuclide Open Sans * @section Config > Fonts */ /** * Font used in Clank! is Lora * * @nuclide Lora * @section Config > Fonts */ /** * Font used in Clank! is Alegreya * * @nuclide Alegreya * @section Config > Fonts */ /** * Font used in Clank! in! space! is Titillium Web * * @nuclide Titillium Web * @section Config > Fonts */ /** * Font used in Eternal is LinBiolinum * * @nuclide LinBiolinum * @section Config > Fonts */ /** * Font used in Eternal is Cinzel * * @nuclide Cinzel * @section Config > Fonts */ /** * Font used in Eternal is Helvetica Neue - error display and inputs * * @nuclide Helvetica Neue * @section Config > Fonts */ /** * Font used in Leaderboards is Galdeano * * @nuclide Galdeano * @section Config > Fonts */ /** * A white color variable. * * @color * @section Default Colors */ /** * A black color variable. * * @color * @section Default Colors */ /** * A grey color variable. * * @color * @section Default Colors */ /** * A black color for .pageTop * * @color * @section BODY Colors */ /** * A Blue dropdown link color variable. * * @color * @section Global Menu Colors */ /** * A link color variable. * * @color * @section Global Menu Colors */ /** * An

blue color variable. * * @color * @section Typography Colors */ /** * An

blue color for 404 page. * * @color * @section Typography Colors */ /** * A
blue color for 404 page. * * @color * @section Typography Colors */ /** * This Mixin will add delay to backgrounds in ms and ease-out in ms. * * @mixin Mixins * @section Style Mixins * @param $delay background delay amount in milliseconds * @param $easeOut background ease amount in milliseconds * * @example * @include transitionHomeBanner(600,200); * */ /** * This Mixin will add animation delay in ms. * * @mixin Mixins * @section Style Mixins * @param $delay delay amount in milliseconds * * @example * @include animationDelay(-600); * */ /** * This Mixin is used for logo animation on homepage after mouseover. * * @mixin Mixins * @section Style Mixins * @param $duration duration amount in seconds * @param $delay delay amount in milliseconds * * @example * @include logoFlyIn(0.25, 150); * */ body.articlesPage form { padding-bottom: 30px; } body.articlesPage form .form-group { background: url("../assets/dwd/login/EnterName_Password.png") no-repeat; background-size: 100% 100%; margin-top: 20px; } body.articlesPage form input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; font-size: 20px; } @media screen and (max-width: 420px) { body.articlesPage form input { padding: 0 8px; height: 40px; } } body.articlesPage form input:active, body.articlesPage form input:focus { border: none; box-shadow: none; } body.articlesPage form .btn { background: url("../assets/dwd/login/SignIn_Button.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; color: white; font-size: 22px; } body.articlesPage form .btn.initial-small-dbg { padding: 1em 4em; } @media screen and (max-width: 640px) { body.articlesPage form .btn.initial-small-dbg { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage form .btn.initial-small-dbg { padding: 0.5em 3em; } } @media screen and (max-width: 640px) { body.articlesPage form .btn { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage form .btn { padding: 0.5em 3em; } } body.articlesPage form .btn:hover { background-size: 100% 100%; color: #ffe480; } body.articlesPage #dune-signup .form-group { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_InputBar.png") no-repeat; background-size: 100% 100%; margin-top: 20px; } body.articlesPage #dune-signup input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; } @media screen and (max-width: 420px) { body.articlesPage #dune-signup input { padding: 0 8px; height: 40px; } } body.articlesPage #dune-signup input:active, body.articlesPage #dune-signup input:focus { border: none; box-shadow: none; } body.articlesPage #dune-signup .btn-dune { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_Button_Normal.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; font-size: 22px; } body.articlesPage #dune-signup .btn-dune.initial-small-dune { padding: 1em 4em; } @media screen and (max-width: 640px) { body.articlesPage #dune-signup .btn-dune.initial-small-dune { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #dune-signup .btn-dune.initial-small-dune { padding: 0.5em 3em; } } @media screen and (max-width: 640px) { body.articlesPage #dune-signup .btn-dune { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #dune-signup .btn-dune { padding: 0.5em 3em; } } body.articlesPage #dune-signup .btn-dune:hover { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_Button_Highlighted.png") no-repeat; background-size: 100% 100%; color: #fff; } body.articlesPage #wild-signup { padding-bottom: 30px; } body.articlesPage #wild-signup .form-group { background: url("../assets/wild/WTWTeaserPage_InputField.png") no-repeat; background-size: 100% 100%; margin-top: 20px; } body.articlesPage #wild-signup input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; font-size: 20px; } @media screen and (max-width: 420px) { body.articlesPage #wild-signup input { padding: 0 8px; height: 40px; } } body.articlesPage #wild-signup input:active, body.articlesPage #wild-signup input:focus { border: none; box-shadow: none; } body.articlesPage #wild-signup .btn-wild-text { font-size: 50px; margin-top: 0px; font-weight: bold; } @media screen and (max-width: 640px) { body.articlesPage #wild-signup .btn-wild-text { font-size: 22px; } } body.articlesPage #wild-signup .btn-wild { background: url("../assets/wild/WTWTeaserPage_Button_Normal.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; color: #ffe480; font-size: 22px; } body.articlesPage #wild-signup .btn-wild.initial-small-wild { padding: 1em 4em; } @media screen and (max-width: 640px) { body.articlesPage #wild-signup .btn-wild.initial-small-wild { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #wild-signup .btn-wild.initial-small-wild { padding: 0.5em 3em; } } @media screen and (max-width: 640px) { body.articlesPage #wild-signup .btn-wild { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #wild-signup .btn-wild { padding: 0.5em 3em; } } body.articlesPage #wild-signup .btn-wild:hover { background: url("../assets/wild/WTWTeaserPage_Button_Highlighted.png") no-repeat; background-size: 100% 100%; color: #ffe480; } body.articlesPage #root-signup .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/ROOT_InputBox.webp) no-repeat; background-size: 100% 100%; width: 90%; margin: 0 auto; } body.articlesPage #root-signup input { border: none; background: transparent; padding: 0 50px; font-size: 24px; height: 131px; color: #000000; width: 100%; } @media screen and (max-width: 420px) { body.articlesPage #root-signup input { padding: 0 24px; height: 65px; } } body.articlesPage #root-signup input::placeholder { color: #414141; } body.articlesPage #root-signup input:active, body.articlesPage #root-signup input:focus { border: none; box-shadow: none; outline-color: transparent; } @-webkit-keyframes autofill { 0%, 100% { color: #000; background: transparent; } } body.articlesPage #root-signup input:-webkit-autofill { -webkit-animation-delay: 1s; -webkit-animation-name: autofill; -webkit-animation-fill-mode: both; } body.articlesPage #root-signup .btn-root { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/ROOT_SignUp_Button.webp); background-size: 100% 100%; background-repeat: no-repeat; background-color: initial; cursor: pointer; margin: 0 auto; height: 64px; width: 256px; } body.articlesPage #root-signup .btn-root-text { display: none; } body.articlesPage #raiders-signup .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/raiders/Raiders_Inputfield.png) no-repeat; background-size: 100% 100%; width: 90%; margin: 0 auto; } @media screen and (max-width: 420px) { body.articlesPage #raiders-signup .form-group { width: 100%; } } body.articlesPage #raiders-signup .btn-raiders { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/raiders/Raiders_Button_SignUp.png); background-size: 100% 100%; background-repeat: no-repeat; background-color: initial; cursor: pointer; margin: 0 auto; height: 64px; width: 256px; } @media screen and (max-width: 420px) { body.articlesPage #raiders-signup .btn-raiders { height: 54px; width: inherit; } } body.articlesPage #raiders-signup .btn-raiders-text { display: none; } body.articlesPage #raiders-signup input { border: none; background: transparent; padding: 0 50px; font-size: 18px; height: 107px; color: #fff; width: 100%; } @media screen and (max-width: 420px) { body.articlesPage #raiders-signup input { padding: 0 18px; height: 55px; } } body.articlesPage #raiders-signup input::placeholder { color: #fff; } body.articlesPage #raiders-signup input:active, body.articlesPage #raiders-signup input:focus { border: none; box-shadow: none; outline-color: transparent; } body.articlesPage #sagrada-signup .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/sagrada/GLASS_InPutField.png) no-repeat; background-size: 100% 100%; width: 90%; margin: 0 auto; } body.articlesPage #sagrada-signup .btn-sagrada-text { display: none; } body.articlesPage #sagrada-signup .btn-sagrada { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sagrada/GLASS_Button_SignUp.png); background-size: 100% 100%; background-repeat: no-repeat; background-color: initial; cursor: pointer; margin: 0 auto; height: 64px; width: 256px; } body.articlesPage #sagrada-signup input { border: none; background: transparent; padding: 0 50px; font-size: 18px; height: 107px; color: #000000; width: 100%; } body.articlesPage #sagrada-signup input::placeholder { color: #414141; } body.articlesPage #sagrada-signup input:active, body.articlesPage #sagrada-signup input:focus { border: none; box-shadow: none; outline-color: transparent; } body.articlesPage #yellow-signup .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/yellow/Y&Y_TextInputField.png) no-repeat; background-size: 100% 100%; width: 90%; margin: 0 auto; } @media screen and (max-width: 420px) { body.articlesPage #yellow-signup .form-group { width: 100%; } } body.articlesPage #yellow-signup .btn-yellow-text { display: none; } body.articlesPage #yellow-signup .btn-yellow { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/yellow/Y&Y_Button_SignUp.png); background-size: 100% 100%; background-repeat: no-repeat; background-color: initial; cursor: pointer; margin: 0 auto; height: 64px; width: 256px; } @media screen and (max-width: 420px) { body.articlesPage #yellow-signup .btn-yellow { height: 51px; width: inherit; } } body.articlesPage #yellow-signup input { border: none; background: transparent; padding: 0 50px; font-size: 18px; height: 107px; color: #000000; width: 100%; } @media screen and (max-width: 420px) { body.articlesPage #yellow-signup input { padding: 0 21px; height: 60px; } } body.articlesPage #yellow-signup input::placeholder { color: #414141; } body.articlesPage #yellow-signup input:active, body.articlesPage #yellow-signup input:focus { border: none; box-shadow: none; outline-color: transparent; } body.articlesPage #grm-signup { padding-bottom: 30px; } body.articlesPage #grm-signup .form-group { background: url("../assets/dwd/login/EnterName_Password.png") no-repeat; background-size: 100% 100%; margin-top: 20px; } body.articlesPage #grm-signup input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; font-size: 20px; } @media screen and (max-width: 420px) { body.articlesPage #grm-signup input { padding: 0 8px; height: 40px; } } body.articlesPage #grm-signup input:active, body.articlesPage #grm-signup input:focus { border: none; box-shadow: none; } body.articlesPage #grm-signup .btn-grm { background: url("../assets/dwd/login/SignIn_Button.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; color: white; font-size: 22px; } body.articlesPage #grm-signup .btn-grm.initial-small-grm { padding: 1em 4em; } @media screen and (max-width: 640px) { body.articlesPage #grm-signup .btn-grm.initial-small-grm { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #grm-signup .btn-grm.initial-small-grm { padding: 0.5em 3em; } } @media screen and (max-width: 640px) { body.articlesPage #grm-signup .btn-grm { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #grm-signup .btn-grm { padding: 0.5em 3em; } } body.articlesPage #grm-signup .btn-grm:hover { background-size: 100% 100%; color: #ffe480; } body.articlesPage #tricks-signup { padding-bottom: 30px; } body.articlesPage #tricks-signup .form-group { background: url("../assets/dwd/login/EnterName_Password.png") no-repeat; background-size: 100% 100%; margin-top: 20px; } body.articlesPage #tricks-signup input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; font-size: 20px; } @media screen and (max-width: 420px) { body.articlesPage #tricks-signup input { padding: 0 8px; height: 40px; } } body.articlesPage #tricks-signup input:active, body.articlesPage #tricks-signup input:focus { border: none; box-shadow: none; } body.articlesPage #tricks-signup .btn-tricks { background: url("../assets/dwd/login/SignIn_Button.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; color: white; font-size: 22px; } body.articlesPage #tricks-signup .btn-tricks.initial-small-tricks { padding: 1em 4em; } @media screen and (max-width: 640px) { body.articlesPage #tricks-signup .btn-tricks.initial-small-tricks { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #tricks-signup .btn-tricks.initial-small-tricks { padding: 0.5em 3em; } } @media screen and (max-width: 640px) { body.articlesPage #tricks-signup .btn-tricks { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #tricks-signup .btn-tricks { padding: 0.5em 3em; } } body.articlesPage #tricks-signup .btn-tricks:hover { background-size: 100% 100%; color: #ffe480; } body.articlesPage #dwd-signup { padding-bottom: 30px; } body.articlesPage #dwd-signup .form-group { background: url("../assets/dwd/login/EnterName_Password.png") no-repeat; background-size: 100% 100%; margin-top: 20px; } body.articlesPage #dwd-signup input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; font-size: 20px; } @media screen and (max-width: 420px) { body.articlesPage #dwd-signup input { padding: 0 8px; height: 40px; } } body.articlesPage #dwd-signup input:active, body.articlesPage #dwd-signup input:focus { border: none; box-shadow: none; } body.articlesPage #dwd-signup .btn-dwd { background: url("../assets/dwd/login/SignIn_Button.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; color: white; font-size: 22px; } body.articlesPage #dwd-signup .btn-dwd.initial-small-dwd { padding: 1em 4em; } @media screen and (max-width: 640px) { body.articlesPage #dwd-signup .btn-dwd.initial-small-dwd { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #dwd-signup .btn-dwd.initial-small-dwd { padding: 0.5em 3em; } } @media screen and (max-width: 640px) { body.articlesPage #dwd-signup .btn-dwd { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #dwd-signup .btn-dwd { padding: 0.5em 3em; } } body.articlesPage #dwd-signup .btn-dwd:hover { background-size: 100% 100%; color: #ffe480; } body.articlesPage #dbg-signup, body.articlesPage #rpg-signup { padding-bottom: 30px; } body.articlesPage #dbg-signup .form-group, body.articlesPage #rpg-signup .form-group { background: url("../assets/dwd/login/EnterName_Password.png") no-repeat; background-size: 100% 100%; margin-top: 20px; } body.articlesPage #dbg-signup input, body.articlesPage #rpg-signup input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; font-size: 20px; } @media screen and (max-width: 420px) { body.articlesPage #dbg-signup input, body.articlesPage #rpg-signup input { padding: 0 8px; height: 40px; } } body.articlesPage #dbg-signup input:active, body.articlesPage #dbg-signup input:focus, body.articlesPage #rpg-signup input:active, body.articlesPage #rpg-signup input:focus { border: none; box-shadow: none; } body.articlesPage #dbg-signup .btn-dbg, body.articlesPage #dbg-signup .btn-rpg, body.articlesPage #rpg-signup .btn-dbg, body.articlesPage #rpg-signup .btn-rpg { background: url("../assets/dwd/login/SignIn_Button.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; color: white; font-size: 22px; } body.articlesPage #dbg-signup .btn-dbg.initial-small-dbg, body.articlesPage #dbg-signup .btn-rpg.initial-small-dbg, body.articlesPage #rpg-signup .btn-dbg.initial-small-dbg, body.articlesPage #rpg-signup .btn-rpg.initial-small-dbg { padding: 1em 4em; } @media screen and (max-width: 640px) { body.articlesPage #dbg-signup .btn-dbg.initial-small-dbg, body.articlesPage #dbg-signup .btn-rpg.initial-small-dbg, body.articlesPage #rpg-signup .btn-dbg.initial-small-dbg, body.articlesPage #rpg-signup .btn-rpg.initial-small-dbg { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #dbg-signup .btn-dbg.initial-small-dbg, body.articlesPage #dbg-signup .btn-rpg.initial-small-dbg, body.articlesPage #rpg-signup .btn-dbg.initial-small-dbg, body.articlesPage #rpg-signup .btn-rpg.initial-small-dbg { padding: 0.5em 3em; } } @media screen and (max-width: 640px) { body.articlesPage #dbg-signup .btn-dbg, body.articlesPage #dbg-signup .btn-rpg, body.articlesPage #rpg-signup .btn-dbg, body.articlesPage #rpg-signup .btn-rpg { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #dbg-signup .btn-dbg, body.articlesPage #dbg-signup .btn-rpg, body.articlesPage #rpg-signup .btn-dbg, body.articlesPage #rpg-signup .btn-rpg { padding: 0.5em 3em; } } body.articlesPage #dbg-signup .btn-dbg:hover, body.articlesPage #dbg-signup .btn-rpg:hover, body.articlesPage #rpg-signup .btn-dbg:hover, body.articlesPage #rpg-signup .btn-rpg:hover { background-size: 100% 100%; color: #ffe480; } body.articlesPage #boardgames-signup { padding-bottom: 30px; } body.articlesPage #boardgames-signup .form-group { background: url("../assets/dwd/login/EnterName_Password.png") no-repeat; background-size: 100% 100%; margin-top: 20px; } body.articlesPage #boardgames-signup input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; font-size: 20px; } @media screen and (max-width: 420px) { body.articlesPage #boardgames-signup input { padding: 0 8px; height: 40px; } } body.articlesPage #boardgames-signup input:active, body.articlesPage #boardgames-signup input:focus { border: none; box-shadow: none; } body.articlesPage #boardgames-signup .btn-boardgames { background: url("../assets/dwd/login/SignIn_Button.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; color: white; font-size: 22px; } body.articlesPage #boardgames-signup .btn-boardgames.initial-small-boardgames { padding: 1em 4em; } @media screen and (max-width: 640px) { body.articlesPage #boardgames-signup .btn-boardgames.initial-small-boardgames { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #boardgames-signup .btn-boardgames.initial-small-boardgames { padding: 0.5em 3em; } } @media screen and (max-width: 640px) { body.articlesPage #boardgames-signup .btn-boardgames { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #boardgames-signup .btn-boardgames { padding: 0.5em 3em; } } body.articlesPage #boardgames-signup .btn-boardgames:hover { background-size: 100% 100%; color: #ffe480; } body.articlesPage #phx-signup .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/InputBox.png) no-repeat; background-size: 100% 100%; } body.articlesPage #phx-signup input { border: none; background: transparent; padding: 0 24px; height: 65px; font-size: 20px; color: #000000; } body.articlesPage #phx-signup input::placeholder { color: #414141; } body.articlesPage #phx-signup input:active, body.articlesPage #phx-signup input:focus { border: none; box-shadow: none; } body.articlesPage #phx-signup .btn-phx { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/PreorderButton.png); background-size: 100% 100%; background-repeat: no-repeat; background-color: initial; padding: 1em 2em; font-size: 20px; cursor: pointer; text-shadow: 2px 2px rgba(0, 0, 0, 0.5); color: #fff1cf; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08); } body.articlesPage #phx-signup .btn-phx.initial-small-phx { padding: 1em 4em; } @media screen and (max-width: 640px) { body.articlesPage #phx-signup .btn-phx.initial-small-phx { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.articlesPage #phx-signup .btn-phx.initial-small-phx { padding: 0.5em 3em; } } body.articlesPage #phx-signup .btn-phx.disabled { -webkit-filter: grayscale(100%); filter: grayscale(100%); cursor: inherit; } body.articlesPage #phx-signup .btn-phx.disabled:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/PreorderButton.png); } body.articlesPage #phx-signup .btn-phx:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/PreorderButton_over.png); text-decoration: none; } @media screen and (max-width: 767px) { body.articlesPage #phx-signup .btn-phx { width: 323px; font-size: 29px; padding: 0.7em 2em; margin: 0 auto; } } body.articlesPage #chronicles-signup .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/InputBox.png) no-repeat; background-size: 100% 100%; } body.articlesPage #chronicles-signup input { border: none; background: transparent; padding: 0 24px; height: 65px; font-size: 20px; color: #000000; } body.articlesPage #chronicles-signup input::placeholder { color: #414141; } body.articlesPage #chronicles-signup input:active, body.articlesPage #chronicles-signup input:focus { border: none; box-shadow: none; } body.articlesPage #chronicles-signup .btn-chronicles { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/PreorderButton.png); background-size: 100% 100%; background-repeat: no-repeat; background-color: initial; padding: 1em 2em; font-size: 22px; cursor: pointer; text-shadow: 2px 2px rgba(0, 0, 0, 0.5); color: #fff1cf; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08); } body.articlesPage #chronicles-signup .btn-chronicles.disabled { -webkit-filter: grayscale(100%); filter: grayscale(100%); cursor: inherit; } body.articlesPage #chronicles-signup .btn-chronicles.disabled:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/PreorderButton.png); } body.articlesPage #chronicles-signup .btn-chronicles:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/PreorderButton_over.png); text-decoration: none; } @media screen and (max-width: 767px) { body.articlesPage #chronicles-signup .btn-chronicles { width: 323px; font-size: 29px; padding: 0.7em 2em; margin: 0 auto; } } body.articlesPage main { padding-bottom: 120px; } @font-face { body.articlesPage main { font-family: 'Sriracha'; src: url("/fonts/Sriracha-Regular.woff2") format("woff2"), url("/fonts/Sriracha-Regular.woff") format("woff"); font-weight: normal; font-style: normal; } } body.articlesPage main.articles { /** * @nuclide * Articles background for news * * @color #06080b * @section News Articles Colors / } body.articlesPage main.articles ul { font-size: 1em; } body.articlesPage main.articles .pageTop { background: #06080b; } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageTop .container .col-md-3.wm-legends .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -726px; width: 202px; height: 66px; position: absolute; } body.articlesPage main.articles .pageTop .container .col-md-3.wm-eternal .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -660px; width: 186px; height: 66px; position: absolute; } body.articlesPage main.articles .pageTop .container .col-md-3.wm-clank .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px 0px; width: 186px; height: 66px; position: absolute; } body.articlesPage main.articles .pageTop .container .col-md-3.wm-lanterns .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -792px; width: 201px; height: 66px; position: absolute; } body.articlesPage main.articles .pageTop .container .col-md-3.wm-hangryhords .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -924px; width: 159px; height: 90px; position: absolute; } body.articlesPage main.articles .pageTop .container .col-md-3.wm-lotus .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -858px; width: 160px; height: 66px; position: absolute; } body.articlesPage main.articles .pageTop .container .col-md-3.wm-dwd .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -528px; width: 211px; height: 66px; position: absolute; } } body.articlesPage main.articles .pageTop .typeCont.wm-legends .category { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -330px; } body.articlesPage main.articles .pageTop .typeCont.wm-eternal .category { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -132px; } body.articlesPage main.articles .pageTop .typeCont.wm-clank .category { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -66px; } body.articlesPage main.articles .pageTop .typeCont.wm-lanterns .category { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -264px; } body.articlesPage main.articles .pageTop .typeCont.wm-hangryhords .category { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -198px; } body.articlesPage main.articles .pageTop .typeCont.wm-lotus .category { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -396px; } body.articlesPage main.articles .pageTop .typeCont.wm-dwd .category { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -462px; } body.articlesPage main.articles .pageTop .category { display: inline-block; margin-top: 33px; width: 186px; height: 66px; } body.articlesPage main.articles .pageContent { padding-top: 40px; min-height: 433px; z-index: 200; position: relative; } body.articlesPage main.articles .pageContent .content { padding-bottom: 150px; / The Gallery container (div) / / Deck Blog Post / / dwd_divider_shortcode / / dwd_ComicCaptions_shortcode / / dwd_ComicQuote_shortcode / / dwd_ComicBubble_shortcode / } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content { font-size: 15px; } } body.articlesPage main.articles .pageContent .content p, body.articlesPage main.articles .pageContent .content ul li, body.articlesPage main.articles .pageContent .content ol li { font-size: 15px; line-height: 1.55em; } body.articlesPage main.articles .pageContent .content img.size-full { display: block; max-width: 100%; height: auto; border-radius: 4px; } body.articlesPage main.articles .pageContent .content img.aligncenter { margin: 20px auto; display: block; } @media screen and (max-width: 600px) { body.articlesPage main.articles .pageContent .content img.aligncenter { width: auto; } } body.articlesPage main.articles .pageContent .content .alignright { float: right; } body.articlesPage main.articles .pageContent .content .alignleft { float: left; } body.articlesPage main.articles .pageContent .content .row { margin-top: 25px; margin-bottom: 24px; } body.articlesPage main.articles .pageContent .content #gallery-1 img, body.articlesPage main.articles .pageContent .content #gallery-2 img, body.articlesPage main.articles .pageContent .content #gallery-3 img, body.articlesPage main.articles .pageContent .content #gallery-4 img, body.articlesPage main.articles .pageContent .content .gallery img { border: none !important; } body.articlesPage main.articles .pageContent .content .gallery { / A Gallery item container, for 3, 2 and 4 column galleries / } body.articlesPage main.articles .pageContent .content .deckBlogDisplay { background: rgba(0, 0, 0, 0.5); border: 1px solid #0c2635; overflow: hidden; border-radius: 5px; color: #fff; margin-bottom: 30px; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .exportMsg { display: none; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deck-hero { width: 100%; height: 150px; position: relative; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deck-hero .deck-header-image { background-color: #07202a; background-position: top center, top center; background-repeat: no-repeat; margin: 0 auto; width: 100%; height: 120px; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deck-hero .deck-factions-wrapper { z-index: 100; position: absolute; bottom: 15px; width: 100%; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions { margin: 0 auto; width: 360px; height: 30px; text-align: center; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction { width: 31px; height: 27px; display: inline-block; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/InfluencePips_30w.png); } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.fire { background-position: 0 0; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.time { background-position: 0 -30px; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.justice { background-position: 0 -61px; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.primal { background-position: 0 -93px; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.shadow { background-position: 0 -126px; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.colorless { background-position: 0 -160px; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deckHeader { padding: 4px 7px; position: relative; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deckHeader p { font-size: 2.5em; color: #d79e54; border-bottom: 1px solid #0c2635; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deckHeader .deckHeaderOptions { position: absolute; top: 13px; right: 10px; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deckHeader .deckHeaderOptions a.exportBtn { background: #0c2635; border-radius: 3px; color: #fff; padding: 4px 7px; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deckHeader .deckHeaderOptions a.exportBtn:hover { background: #33A1C9; text-decoration: none; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deckContent { padding: 4px 7px; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deckContent .sortingCont { display: block; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deckContent .smallHeader { font-size: 1.8em; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deckContent .totalCards { font-weight: bold; font-size: 1.8em; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deckContent ul.cardList { list-style-type: none; padding: 5px 0; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deckContent ul.cardList li { cursor: pointer; font-size: 1.4em; } body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deckContent .deckBlog_card_template { position: relative; width: 220px; height: 350px; border-radius: 5px; background: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 992px) { body.articlesPage main.articles .pageContent .content .deckBlogDisplay .deckContent .deckBlog_card_template { position: absolute; left: 17em; width: 185px; height: 300px; } } body.articlesPage main.articles .pageContent .content table.leaderboard { border: 1px solid #4d3d2b; font-size: 1.4em; margin-bottom: 20px; } body.articlesPage main.articles .pageContent .content table.leaderboard caption { color: #fff; font-size: 3em; text-align: left; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderboardBackgroundImage.jpg) bottom left no-repeat; font-family: 'Cinzel', serif; } body.articlesPage main.articles .pageContent .content table.leaderboard thead tr { background: #1d1e23; background: -moz-linear-gradient(top, #1d1e23 0%, #101014 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #1d1e23), color-stop(100%, #101014)); background: -webkit-linear-gradient(top, #1d1e23 0%, #101014 100%); background: -o-linear-gradient(top, #1d1e23 0%, #101014 100%); background: -ms-linear-gradient(top, #1d1e23 0%, #101014 100%); background: linear-gradient(to bottom, #1d1e23 0%, #101014 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d1e23', endColorstr='#101014', GradientType=0 ); } body.articlesPage main.articles .pageContent .content table.leaderboard thead tr th { color: #9f8c71; font-family: 'Galdeano', sans-serif; font-weight: 600; font-size: 1.3em; border-bottom: 1px solid #4d3d2b; border-left: 1px solid #4d3d2b; border-right: 1px solid #4d3d2b; } body.articlesPage main.articles .pageContent .content table.leaderboard tbody tr { background: #040306; } body.articlesPage main.articles .pageContent .content table.leaderboard tbody tr:nth-child(2n+1) { background: #110f18; } body.articlesPage main.articles .pageContent .content table.leaderboard tbody tr:nth-child(1) td { height: 54px; } body.articlesPage main.articles .pageContent .content table.leaderboard tbody tr:nth-child(1) td:first-child { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramerL_PlacementBadgeGold.jpg) top left no-repeat; } body.articlesPage main.articles .pageContent .content table.leaderboard tbody tr:nth-child(1) td:not(:first-child):not(:last-child) { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramer_Fill.jpg) top left repeat-x; } body.articlesPage main.articles .pageContent .content table.leaderboard tbody tr:nth-child(1) td:last-child { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramerR.jpg) top right no-repeat; background-size: 100% 100%; } body.articlesPage main.articles .pageContent .content table.leaderboard tbody tr:nth-child(2) td { height: 33px; } body.articlesPage main.articles .pageContent .content table.leaderboard tbody tr:nth-child(2) td:nth-child(1) { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/placementBadge_Silver.png) center center no-repeat; } body.articlesPage main.articles .pageContent .content table.leaderboard tbody tr:nth-child(3) td { height: 33px; } body.articlesPage main.articles .pageContent .content table.leaderboard tbody tr:nth-child(3) td:nth-child(1) { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/placementBadge_Bronze.png) center center no-repeat; } body.articlesPage main.articles .pageContent .content table.leaderboard tbody tr td { color: #9f8c71; font-family: 'Galdeano', sans-serif; font-size: 1.4em; } body.articlesPage main.articles .pageContent .content table.leaderboard tbody tr td:first-child { color: #fff; font-family: 'Galdeano', sans-serif; text-align: center; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/placementBadge.png) center center no-repeat; } body.articlesPage main.articles .pageContent .content table.leaderboard.twoColumnsOnly tbody tr:nth-child(1) td { height: 54px; } body.articlesPage main.articles .pageContent .content table.leaderboard.twoColumnsOnly tbody tr:nth-child(1) td:nth-child(1) { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramerL_PlacementBadgeGold.jpg) top left no-repeat; } body.articlesPage main.articles .pageContent .content table.leaderboard.twoColumnsOnly tbody tr:nth-child(1) td:nth-child(2) { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramerR.jpg); background-size: 100% 100%; background-position: right; background-repeat: no-repeat; } body.articlesPage main.articles .pageContent .content table.leaderboard.threeColumnsOnly thead tr th:nth-child(2) { border-left: 1px solid #4d3d2b; border-right: 1px solid #4d3d2b; } body.articlesPage main.articles .pageContent .content table.leaderboard.threeColumnsOnly thead tr th:nth-child(4) { border-left: 1px solid #4d3d2b; } body.articlesPage main.articles .pageContent .content table.leaderboard.threeColumnsOnly tbody tr:nth-child(1) td { height: 54px; } body.articlesPage main.articles .pageContent .content table.leaderboard.threeColumnsOnly tbody tr:nth-child(1) td:nth-child(1) { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramerL_PlacementBadgeGold.jpg) top left no-repeat; } body.articlesPage main.articles .pageContent .content table.leaderboard.threeColumnsOnly tbody tr:nth-child(1) td:nth-child(2) { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramer_Fill.jpg) top left repeat-x; } body.articlesPage main.articles .pageContent .content table.leaderboard.threeColumnsOnly tbody tr:nth-child(1) td:nth-child(3) { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramer_Fill.jpg) top left repeat-x; } body.articlesPage main.articles .pageContent .content table.leaderboard.threeColumnsOnly tbody tr:nth-child(1) td:nth-child(4) { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramerR.jpg) top right no-repeat; background-size: 100% 100%; } body.articlesPage main.articles .pageContent .content section.wall { position: relative; padding: 10px 0 70px 0; } body.articlesPage main.articles .pageContent .content section.wall .dividerContent { margin-bottom: 40px; } body.articlesPage main.articles .pageContent .content section.wall .wallrow { margin-bottom: 22px; } body.articlesPage main.articles .pageContent .content section.wall h1.fntCinzel { font-size: 4em; color: #d79e54; } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content section.wall h1.fntCinzel { text-align: center; font-size: 2em; } } body.articlesPage main.articles .pageContent .content section.wall mark { background: #232743; border-radius: 2px; color: #778899; } body.articlesPage main.articles .pageContent .content section.wall .wallt { position: relative; } body.articlesPage main.articles .pageContent .content section.wall .wallt .wallf { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/wall/wallFrame.png) 0 0 no-repeat; position: absolute; top: -4px; left: 9px; width: 83px; height: 84px; } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content section.wall .wallt .wallf { top: 0; } } body.articlesPage main.articles .pageContent .content section.wall .wallt img { width: 350px; height: 250px; } body.articlesPage main.articles .pageContent .content section.wall .wallt .wall_glass { position: absolute; top: 0; left: 0; width: 370px; height: 100%; } body.articlesPage main.articles .pageContent .content section.wall .wallt .wall_glass:hover .glass { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/wall/art_magnifyingGlass.png) center center no-repeat rgba(0, 0, 0, 0.2); width: 100%; height: 100%; } body.articlesPage main.articles .pageContent .content section.wall .wallp h2.title { font-size: 3em; margin-top: 10px; color: #d79e54; } body.articlesPage main.articles .pageContent .content section.wall .wallp p.subtext { font-size: 1.4em; } body.articlesPage main.articles .pageContent .content section.wall .wallp ul { list-style-type: none; padding-left: 0; margin-top: 22px; } body.articlesPage main.articles .pageContent .content section.wall .wallp ul li { font-size: 1.6em; padding-bottom: 10px; } body.articlesPage main.articles .pageContent .content section.wall .wallp ul li a { padding: 3px; border: 1px solid #778899; color: #778899; text-decoration: none; border-radius: 3px; margin-right: 12px; margin-bottom: 12px; display: inline-block; } body.articlesPage main.articles .pageContent .content section.wall .wallp ul li a:hover { color: #fff; background-color: #778899; text-decoration: none; } body.articlesPage main.articles .pageContent .content .dividerStyle1 { position: relative; width: 100%; height: 49px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/dividerFill.png) center center repeat-x; background-clip: content-box; padding-left: 91px; padding-right: 91px; text-align: center; z-index: 99; } body.articlesPage main.articles .pageContent .content .dividerStyle1 .capLeft { position: absolute; top: 12px; left: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.png); background-position: 0px 0px; width: 91px; height: 20px; display: inline-block; } body.articlesPage main.articles .pageContent .content .dividerStyle1 .capCenter { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.png); background-position: 0px -272px; width: 174px; height: 49px; display: block; margin: 0 auto; } body.articlesPage main.articles .pageContent .content .dividerStyle1 .capRight { position: absolute; top: 12px; right: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.png); background-position: 0px -20px; width: 91px; height: 20px; display: inline-block; } body.articlesPage main.articles .pageContent .content .dividerStyle1.dArrow { height: 57px; top: 18px; } body.articlesPage main.articles .pageContent .content .dividerStyle1.dArrow .capLeft { top: 16px; } body.articlesPage main.articles .pageContent .content .dividerStyle1.dArrow .capCenter { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/PHX_DividerButtonB_downArrow.png) center center no-repeat; width: 174px; height: 64px; display: block; margin: 0 auto; cursor: pointer; } body.articlesPage main.articles .pageContent .content .dividerStyle1.dArrow .capRight { top: 16px; } body.articlesPage main.articles .pageContent .content .dividerStyle2 { position: relative; width: 100%; height: 49px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/dividerFill.png) center center repeat-x; background-clip: content-box; padding-left: 91px; padding-right: 91px; text-align: center; z-index: 3; } body.articlesPage main.articles .pageContent .content .dividerStyle2 .capLeft { position: absolute; top: 12px; left: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.png); background-position: 0px 0px; width: 91px; height: 20px; display: inline-block; } body.articlesPage main.articles .pageContent .content .dividerStyle2 .capCenter { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.png); background-position: 0px -321px; width: 174px; height: 49px; display: block; margin: 0 auto; } body.articlesPage main.articles .pageContent .content .dividerStyle2 .capRight { position: absolute; top: 12px; right: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.png); background-position: 0px -20px; width: 91px; height: 20px; display: inline-block; } body.articlesPage main.articles .pageContent .content .ComicCaptions { position: relative; } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content .ComicCaptions.mobilewrap { float: none !important; margin-left: 0 !important; margin-right: 0 !important; } } body.articlesPage main.articles .pageContent .content .ComicCaptions.tl .ccaption { position: absolute; top: -10px; } body.articlesPage main.articles .pageContent .content .ComicCaptions.bl .ccaption { position: absolute; bottom: -10px; } body.articlesPage main.articles .pageContent .content .ComicCaptions.tr .ccaption { position: absolute; top: -10px; } body.articlesPage main.articles .pageContent .content .ComicCaptions.br .ccaption { position: absolute; bottom: -10px; } body.articlesPage main.articles .pageContent .content .ComicCaptions img.desktop { width: 100%; } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content .ComicCaptions img.desktop { display: none; } } body.articlesPage main.articles .pageContent .content .ComicCaptions img.mobile { max-width: 100%; display: none; } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content .ComicCaptions img.mobile { display: block; } } body.articlesPage main.articles .pageContent .content .ComicCaptions .ccaption { font-family: 'Sriracha', Arial, sans-serif; font-weight: normal; font-style: normal; padding: 11px 14px; background: #bbb699; background: -moz-radial-gradient(center, ellipse cover, #bbb699 42%, #a19b8d 100%); background: -webkit-radial-gradient(center, ellipse cover, #bbb699 42%, #a19b8d 100%); background: radial-gradient(ellipse at center, #bbb699 42%, #a19b8d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbb699', endColorstr='#a19b8d',GradientType=1 ); border: 1px solid #999480; -webkit-box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.75); -moz-box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.75); box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.75); color: #000; font-size: 1.2em; } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content .ComicQuote { float: none !important; margin: 0 0 20px 0 !important; /font-size: 1.0em !important;/ } } body.articlesPage main.articles .pageContent .content .ComicQuote .ccaption { font-family: 'Sriracha', Arial, sans-serif; font-weight: normal; font-style: normal; background: #bbb699; background: -moz-radial-gradient(center, ellipse cover, #bbb699 42%, #a19b8d 100%); background: -webkit-radial-gradient(center, ellipse cover, #bbb699 42%, #a19b8d 100%); background: radial-gradient(ellipse at center, #bbb699 42%, #a19b8d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbb699', endColorstr='#a19b8d',GradientType=1 ); border: 1px solid #999480; -webkit-box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.75); -moz-box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.75); box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.75); color: #000; font-size: 1.4em; / open-quote, close-quote, no-open-quote, and no-close-quote / } body.articlesPage main.articles .pageContent .content .ComicQuote .ccaption.double { quotes: "“" "”"; } body.articlesPage main.articles .pageContent .content .ComicQuote .ccaption.double:before { content: open-quote; } body.articlesPage main.articles .pageContent .content .ComicQuote .ccaption.double:after { content: close-quote; } body.articlesPage main.articles .pageContent .content .ComicQuote .ccaption.single { quotes: "‘" "’"; } body.articlesPage main.articles .pageContent .content .ComicQuote .ccaption.single:before { content: open-quote; } body.articlesPage main.articles .pageContent .content .ComicQuote .ccaption.single:after { content: close-quote; } body.articlesPage main.articles .pageContent .content .ComicBubble { position: relative; background-size: cover; } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content .ComicBubble { float: none !important; margin-left: 0 !important; margin-right: 0 !important; } } body.articlesPage main.articles .pageContent .content .ComicBubble .ccbubble { position: absolute; background: #000; border: 2px solid #000; border-radius: 5px; -webkit-box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.75); -moz-box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.75); box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.75); } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content .ComicBubble .ccbubble { top: 10% !important; left: 10% !important; } } body.articlesPage main.articles .pageContent .content .ComicBubble .ccbubblehanddle { position: absolute; width: 80px; height: 80px; background: url(https://d19y2ttatozxjp.cloudfront.net/wp-content/uploads/2018/05/15230548/SpeechBubblePointer_02.png) 0 0 no-repeat; background-size: cover; } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content .ComicBubble .ccbubblehanddle { width: 60px; height: 60px; } } body.articlesPage main.articles .pageContent .content .ComicBubble .ccaption { position: relative; font-family: 'Sriracha', Arial, sans-serif; font-weight: normal; font-style: normal; padding: 11px 14px; background: #fff; border: 2px solid #000; color: #000; font-size: 1.2em; border-radius: 5px; } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content .ComicBubble .ccaption { padding: 10px !important; font-size: 1em !important; line-height: 1.5em !important; } } body.articlesPage main.articles .pageContent .content .ComicBubble img.desktop { width: 100%; } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content .ComicBubble.tl .ccbubble { top: 50% !important; left: 10% !important; } } body.articlesPage main.articles .pageContent .content .ComicBubble.tl .ccbubble .ccaption .ccbubblehanddle { top: -66px; left: -13px; -webkit-transform: rotate(-43deg) scaleY(-1); transform: rotate(-43deg) scaleY(-1); } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content .ComicBubble.tl .ccbubble .ccaption .ccbubblehanddle { top: -46px; right: -8px; } } body.articlesPage main.articles .pageContent .content .ComicBubble.bl .ccbubble .ccaption .ccbubblehanddle { top: 58px; left: -13px; -webkit-transform: rotate(43deg); transform: rotate(43deg); } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content .ComicBubble.bl .ccbubble .ccaption .ccbubblehanddle { top: 30px; right: -8px; } } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content .ComicBubble.tr .ccbubble { top: 50% !important; left: 10% !important; } } body.articlesPage main.articles .pageContent .content .ComicBubble.tr .ccbubble .ccaption .ccbubblehanddle { top: -66px; right: -13px; -webkit-transform: rotate(-43deg) scaleY(-1); transform: rotate(-43deg) scaleY(-1); } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content .ComicBubble.tr .ccbubble .ccaption .ccbubblehanddle { top: -46px; right: -8px; } } body.articlesPage main.articles .pageContent .content .ComicBubble.br .ccbubble .ccaption .ccbubblehanddle { top: 58px; right: -13px; -webkit-transform: rotate(43deg); transform: rotate(43deg); } @media screen and (max-width: 414px) { body.articlesPage main.articles .pageContent .content .ComicBubble.br .ccbubble .ccaption .ccbubblehanddle { top: 30px; right: -8px; } } body.articlesPage main.articles .pageContent .related h2 { margin-top: 0; font-size: 2.1em; } body.articlesPage main.articles .pageContent .related ul { border-top: 1px solid #191e29; border-bottom: 1px solid #191e29; padding: 0; margin: 0; } body.articlesPage main.articles .pageContent .related ul li { list-style-type: none; position: relative; clear: both; overflow: auto; border-bottom: 1px solid #191e29; padding: 7px 0; } body.articlesPage main.articles .pageContent .related ul li:last-child { border-bottom: none; } body.articlesPage main.articles .pageContent .related ul li a { color: #fff; text-decoration: #fff; } body.articlesPage main.articles .pageContent .related ul li a:hover { color: #A3B3CC; } body.articlesPage main.articles .pageContent .related ul li .thumbs { width: 110px; float: left; padding-right: 10px; } @media screen and (max-width: 1480px) { body.articlesPage footer .left-footer-fig1 { left: -999px; transition: all .5s; } } @media screen and (max-width: 1480px) { body.articlesPage footer .right-footer-fig1 { right: -999px; transition: all .5s; } } body #see-wallpapers { margin: 2em 0 4em; font-size: 20px; background-color: #2f2c3d; border-color: #2f2c3d; } .btn-cta .playIcon, .btn-cta .storeIcon { padding: 10px; margin: 5px 5px 0 0; float: left; } @media screen and (max-width: 420px) { .btn-cta .playIcon, .btn-cta .storeIcon { background-size: contain; } } .btn-cta .playIcon { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/buttonIcon_videoPlay.png) 0 0 no-repeat; } @media screen and (max-width: 420px) { .btn-cta .playIcon { padding: 10px; } } .btn-cta .storeIcon { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/buttonIcon_storeLocator.png) 0 0 no-repeat; } @media screen and (max-width: 420px) { .btn-cta .storeIcon { padding: 12px 9px; margin: 3px 6px 0 0; } } .btn-cta.red, .btn-cta.orange, .btn-cta.blue, .btn-cta.green { z-index: 999; position: relative; font-size: 2em; font-family: 'Alegreya', serif; font-weight: 600; border-radius: 4px; border: 0; } @media screen and (max-width: 420px) { .btn-cta.red, .btn-cta.orange, .btn-cta.blue, .btn-cta.green { font-size: 2em; } } .btn-cta.red { margin-right: 10px; background: #eb2a29; } .btn-cta.red:hover { background: #f63c3c; } .btn-cta.orange { background: #ff830f; } .btn-cta.orange:hover { background: #ffa21c; } .btn-cta.blue { margin-right: 10px; background: #2e75af; } .btn-cta.blue:hover { background: #3781bd; } .btn-cta.green { background: #009933; } .btn-cta.green:hover { background: #00b33c; } main.careers { padding-bottom: 100px; } main.careers .pageTop { background: #06080b; position: relative; z-index: 2; } main.careers .pageTop h1 { margin-bottom: 20px; } main.careers .pageTop .socialList { float: right; margin-top: 30px; } main.careers .pageTop .socialList ul { margin: 0 auto; padding: 0; } main.careers .pageTop .socialList ul li { list-style-type: none; padding: 0 10px; float: left; } main.careers .pageTop .socialList ul li a { font-weight: 600; color: #fff; font-size: 1.2em; display: inline-block; } main.careers .pageTop .socialList ul li a.fb { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -48px; width: 25px; height: 25px; } main.careers .pageTop .socialList ul li a.fb:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -73px; width: 25px; height: 25px; } main.careers .pageTop .socialList ul li a.tw { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px 0px; width: 29px; height: 24px; } main.careers .pageTop .socialList ul li a.tw:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -24px; width: 29px; height: 24px; } main.careers .pageContent { padding-top: 15px; min-height: 433px; } main.careers .pageContent .careersSideL { position: absolute; z-index: 1; top: 0; left: 0; width: 50%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/careers/CareersSideArtL.jpg) top left no-repeat transparent; } @media screen and (max-width: 414px) { main.careers .pageContent .careersSideL { display: none; } } main.careers .pageContent .careersSideR { position: absolute; z-index: 1; top: 0; right: 0; width: 50%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/careers/CareersSideArtR.jpg) top right no-repeat transparent; } @media screen and (max-width: 414px) { main.careers .pageContent .careersSideR { display: none; } } main.careers .pageContent .container { z-index: 10; position: relative; background: #000; } main.careers .pageContent .content p { font-size: 1.10em; line-height: 1.55em; } main.careers .pageContent .content .row { margin-top: 25px; margin-bottom: 24px; } main.careers .pageContent .content #careerPanel { background-color: black; position: relative; z-index: 2; } main.careers .pageContent .content #careerPanel .panel { border-radius: 0; border-color: #06080b; background: #06080b; clear: both; } main.careers .pageContent .content #careerPanel .panel .panel-heading { background: #06080b; position: relative; } main.careers .pageContent .content #careerPanel .panel .panel-heading a .tri { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 0.5s ease; } main.careers .pageContent .content #careerPanel .panel .panel-heading a.collapsed .tri { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.5s ease; } main.careers .pageContent .content #careerPanel .panel .panel-heading .tri { position: absolute; right: 55px; top: 62px; width: 19px; height: 32px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_careers.png); background-position: 0px 0px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.5s ease; } main.careers .pageContent .content #careerPanel .panel .panel-heading:hover { background-color: #191f29 !important; } main.careers .pageContent .content #careerPanel .panel .panel-heading#headingC1 .headerIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_careers.png); background-position: 0px -353px; width: 128px; height: 131px; vertical-align: middle; display: inline-block; } @media screen and (max-width: 414px) { main.careers .pageContent .content #careerPanel .panel .panel-heading#headingC1 .headerIcon { display: none; } } main.careers .pageContent .content #careerPanel .panel .panel-heading#headingC2 .headerIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_careers.png); background-position: 0px -484px; width: 128px; height: 131px; vertical-align: middle; display: inline-block; } @media screen and (max-width: 414px) { main.careers .pageContent .content #careerPanel .panel .panel-heading#headingC2 .headerIcon { display: none; } } main.careers .pageContent .content #careerPanel .panel .panel-heading#headingC3 .headerIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_careers.png); background-position: 0px -222px; width: 128px; height: 131px; vertical-align: middle; display: inline-block; } @media screen and (max-width: 414px) { main.careers .pageContent .content #careerPanel .panel .panel-heading#headingC3 .headerIcon { display: none; } } main.careers .pageContent .content #careerPanel .panel .panel-heading#headingC4 .headerIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_careers.png); background-position: 0px -746px; width: 128px; height: 131px; vertical-align: middle; display: inline-block; } @media screen and (max-width: 414px) { main.careers .pageContent .content #careerPanel .panel .panel-heading#headingC4 .headerIcon { display: none; } } main.careers .pageContent .content #careerPanel .panel .panel-heading#headingC5 .headerIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_careers.png); background-position: 0px -615px; width: 128px; height: 131px; vertical-align: middle; display: inline-block; } @media screen and (max-width: 414px) { main.careers .pageContent .content #careerPanel .panel .panel-heading#headingC5 .headerIcon { display: none; } } main.careers .pageContent .content #careerPanel .panel .panel-heading#headingC6 .headerIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_careers.png); background-position: 0px -91px; width: 128px; height: 131px; vertical-align: middle; display: inline-block; } @media screen and (max-width: 414px) { main.careers .pageContent .content #careerPanel .panel .panel-heading#headingC6 .headerIcon { display: none; } } main.careers .pageContent .content #careerPanel .panel .panel-heading a { text-decoration: none; } main.careers .pageContent .content #careerPanel .panel .panel-heading a .panel-title { color: #fff; height: 100%; margin-left: 20px; vertical-align: middle; display: inline-block; } @media screen and (max-width: 414px) { main.careers .pageContent .content #careerPanel .panel .panel-heading a .panel-title { margin-left: 0; } } main.careers .pageContent .content #careerPanel .panel .panel-heading a .panel-title strong { font-weight: 600; font-size: 1.4em; } main.careers .pageContent .content #careerPanel .panel .panel-heading a .panel-title span { font-weight: 400; font-size: 0.9em; color: #9c9c9c; font-style: italic; } main.careers .pageContent .content #careerPanel .panel .panel-collapse { color: #fff; background: #06080b; } main.careers .pageContent .content #careerPanel .panel .panel-collapse .list-group { background: #000; border: none; } main.careers .pageContent .content #careerPanel .panel .panel-collapse .list-group .list-group-item { color: #fff; font-size: 1.4em; font-weight: 600; background: #06080b; border: none; margin-top: 6px; } main.careers .pageContent .content #careerPanel .panel .panel-collapse .list-group .list-group-item .careerUserIcon { margin-right: 10px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_careers.png); background-position: 0px -32px; width: 59px; height: 59px; display: inline-block; vertical-align: middle; } @media screen and (max-width: 414px) { main.careers .pageContent .content #careerPanel .panel .panel-collapse .list-group .list-group-item .careerUserIcon { display: none; } } main.careers .pageContent .content #careerPanel .panel .panel-collapse .list-group .list-group-item:hover { background-color: #191f29 !important; } @media screen and (max-width: 414px) { main.careers .pageContent .content #careerPanel .panel .panel-collapse .list-group .list-group-item { color: #727c8d; } } main.careersv2 { padding-bottom: 100px; } main.careersv2 .pageTop { background: #06080b; position: relative; z-index: 2; } main.careersv2 .pageTop h1 { margin-bottom: 20px; } @media screen and (max-width: 640px) { main.careersv2 .pageTop h1 span { display: none; } } main.careersv2 .pageTop .socialIcons { margin-top: 2.4em; float: right; } main.careersv2 .bannerDWDCareer { height: 250px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/careers/v2/CareersImageStrip.jpg) center center no-repeat transparent; background-size: cover; } main.careersv2 .bannerDWDCareer p:first-child { margin-top: 5em; } @media screen and (max-width: 420px) { main.careersv2 .bannerDWDCareer p:first-child { margin-top: 2em; } } main.careersv2 .bannerDWDCareer p { text-align: center; font-size: 1.5em; line-height: 1.5em; } main.careersv2 .iconsDWDCareer { margin: 3em 0; } main.careersv2 .iconsDWDCareer { text-align: center; } main.careersv2 .iconsDWDCareer p { font-size: 1.5em; } main.careersv2 .iconsDWDCareer img { display: block; margin: 0 auto; } @media screen and (max-width: 1200px) { main.careersv2 .iconsDWDCareer img { width: 50%; } main.careersv2 .iconsDWDCareer p { margin: 0 2.5em; } main.careersv2 .iconsDWDCareer .col-md-6:nth-child(n + 3) { margin-top: 3em; } } @media screen and (max-width: 767px) { main.careersv2 .iconsDWDCareer .col-xs-12 + .col-xs-12 { margin-top: 3em; } main.careersv2 .iconsDWDCareer h3 { margin-top: 0; } } main.careersv2 .pageMid { background: #0e1117; } main.careersv2 .pageMid h2 { margin-bottom: 20px; } @media screen and (max-width: 425px) { main.careersv2 .pageMid h2 { text-align: center; font-size: 2em; } } main.careersv2 .pageContent { padding-top: 15px; min-height: 433px; position: relative; z-index: 20; } main.careersv2 .pageContent .careersSideL, main.careersv2 .pageContent .careersSideR { position: absolute; z-index: 1; top: 0; width: 50%; height: 100%; background-position: top left; background-repeat: no-repeat; background-color: transparent; } @media screen and (max-width: 767px) { main.careersv2 .pageContent .careersSideL, main.careersv2 .pageContent .careersSideR { display: none; } } main.careersv2 .pageContent .careersSideL { left: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/careers/v2/CareersSideArtL.jpg); } main.careersv2 .pageContent .careersSideR { right: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/careers/v2/CareersSideArtR.jpg); } main.careersv2 .pageContent .container { z-index: 10; position: relative; background: #000; } main.careersv2 .pageContent .content #careerPanel { background-color: black; z-index: 2; } main.careersv2 .pageContent .content #careerPanel .panel { border-radius: 0; border-color: #06080b; background: #06080b; } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading { background: #DADADA; position: relative; padding: 0; } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading .tri { position: absolute; left: 22px; top: 53px; width: 22px; height: 32px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/careers/v2/CareerArrow.png); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 0.5s ease; } @media screen and (max-width: 640px) { main.careersv2 .pageContent .content #careerPanel .panel .panel-heading .tri { display: none; } } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading .collapsed .tri { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading .overlay { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) 0 0 repeat; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; display: none; } @media screen and (max-width: 640px) { main.careersv2 .pageContent .content #careerPanel .panel .panel-heading .overlay { display: block; } } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading .headerIcon { height: 130px; width: 100%; vertical-align: middle; background-position: top right; background-repeat: no-repeat; } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading#headingC1 .headerIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/careers/v2/CareerType_Design.jpg); } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading#headingC2 .headerIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/careers/v2/CareerType_Engineering.jpg); } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading#headingC3 .headerIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/careers/v2/CareerType_Art.jpg); } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading#headingC4 .headerIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/careers/v2/CareerType_QualityAssurance.jpg); } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading#headingC5 .headerIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/careers/v2/CareerType_ProductionMarketing.jpg); } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading#headingC6 .headerIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/careers/v2/CareerType_Analytics.jpg); } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading a { text-decoration: none; } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading a .panel-title { color: #000; height: 100%; margin-left: 71px; margin-top: 48px; vertical-align: middle; display: inline-block; } @media screen and (max-width: 640px) { main.careersv2 .pageContent .content #careerPanel .panel .panel-heading a .panel-title { text-align: center; width: 100%; margin-left: 0; height: auto; position: relative; z-index: 3; } } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading a .panel-title strong { font-weight: 600; font-size: 1.4em; } @media screen and (max-width: 640px) { main.careersv2 .pageContent .content #careerPanel .panel .panel-heading a .panel-title strong { color: #fff; } } main.careersv2 .pageContent .content #careerPanel .panel .panel-heading a .panel-title span { font-weight: 400; font-size: 0.9em; color: #000; font-style: italic; } @media screen and (max-width: 640px) { main.careersv2 .pageContent .content #careerPanel .panel .panel-heading a .panel-title span { color: #fff; } } main.careersv2 .pageContent .content #careerPanel .panel .panel-collapse { color: #fff; background: #06080b; } main.careersv2 .pageContent .content #careerPanel .panel .panel-collapse .list-group { background: #000; border: none; } main.careersv2 .pageContent .content #careerPanel .panel .panel-collapse .list-group .list-group-item { color: #000; font-size: 1.4em; font-weight: 600; background: #bfbfbf; border: none; margin-top: 6px; } main.careersv2 .pageContent .content #careerPanel .panel .panel-collapse .list-group .list-group-item:hover { background-color: #999999 !important; } main.careersv2 .pageContent .content #careerPanel .panel .panel-collapse .list-group .list-group-item .careerUserIcon { margin-right: 10px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_careers.png); background-position: 0px -32px; width: 59px; height: 59px; display: inline-block; vertical-align: middle; } @media screen and (max-width: 420px) { main.careersv2 .pageContent .content #careerPanel .panel .panel-collapse .list-group .list-group-item .careerUserIcon { display: none; } } main.company .pageTop { background: #06080b; position: relative; z-index: 2; } main.company .pageTop h1 { margin-bottom: 20px; } main.company .pageTop .socialList { float: right; margin-top: 30px; } main.company .pageTop .socialList ul { margin: 0 auto; padding: 0; } main.company .pageTop .socialList ul li { list-style-type: none; padding: 0 10px; float: left; } main.company .pageTop .socialList ul li a { font-weight: 600; color: #fff; font-size: 1.2em; text-transform: uppercase; } main.company .pageContent { padding-top: 40px; min-height: 433px; } main.company .pageContent .careersSideL { position: absolute; z-index: 1; top: 0; left: 0; width: 50%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/careers/CareersSideArtL.png) top left no-repeat transparent; } main.company .pageContent .careersSideR { position: absolute; z-index: 1; top: 0; right: 0; width: 50%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/careers/CareersSideArtR.png) top right no-repeat transparent; } main.company .pageContent .container { z-index: 10; position: relative; background: #000; } main.company .pageContent .content { padding-bottom: 150px; } main.company .pageContent .content p { font-size: 1.35em; line-height: 1.55em; } main.company .pageContent .content .row { margin-top: 25px; margin-bottom: 24px; } main.careersDetails .pageTop { background: #06080b; } main.careersDetails .pageTop h1 { margin-bottom: 20px; } main.careersDetails .pageTop .socialList { float: right; margin-top: 30px; } main.careersDetails .pageTop .socialList ul { margin: 0 auto; padding: 0; } main.careersDetails .pageTop .socialList ul li { list-style-type: none; padding: 0 10px; float: left; } main.careersDetails .pageTop .socialList ul li a { font-weight: 600; color: #fff; font-size: 1.2em; display: inline-block; } main.careersDetails .pageTop .socialList ul li a.fb { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -48px; width: 25px; height: 25px; } main.careersDetails .pageTop .socialList ul li a.fb:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -73px; width: 25px; height: 25px; } main.careersDetails .pageTop .socialList ul li a.tw { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px 0px; width: 29px; height: 24px; } main.careersDetails .pageTop .socialList ul li a.tw:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -24px; width: 29px; height: 24px; } main.careersDetails .pageContent { padding-top: 40px; min-height: 433px; } main.careersDetails .pageContent a { color: #A3B3CC; text-decoration: none; } main.careersDetails .pageContent a:hover { color: #fff; } main.careersDetails .pageContent .container { z-index: 10; position: relative; background: #000; } main.careersDetails .pageContent .content { padding-bottom: 50px; font-size: 1.3em; line-height: 1.55em; } main.careersDetails .pageContent .content h2 { font-size: 1.4em; } main.careersDetails .pageContent .footer-content { padding: 35px; border: 1px solid #3c4d72; margin-bottom: 25px; font-size: 1.6em; } main.careersDetails .pageContent .footer-content a { font-size: 1.1em; font-style: italic; } @media screen and (max-width: 1415px) { body.careersDetailsPage footer.full .footerFigsLimit .left-footer-fig1 { left: -999px; transition: all .5s; } } @media screen and (max-width: 1415px) { body.careersDetailsPage footer.full .footerFigsLimit .right-footer-fig1 { right: -999px; transition: all .5s; } } section.homeCareer { position: relative; z-index: 999; clear: both; padding: 40px 0 40px 0; height: 300px; } section.homeCareer h2 { font-size: 2.45em; font-weight: 400; } @media screen and (max-width: 768px) { section.homeCareer h2 { text-align: left; margin-top: 10px; } } section.homeCareer h2 a.sm_link { font-weight: 600; font-size: 0.5em; color: #abdeff; margin-left: 12px; text-decoration: underline; margin-bottom: 4px; } body.clai2 .banner { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clai2/TopBackground.webp"); height: 594px; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; padding-top: 30px; text-align: center; margin-bottom: -260px; position: relative; overflow: hidden; } @media screen and (min-width: 420px) { body.clai2 .banner { margin-bottom: -180px; } } @media screen and (min-width: 767px) { body.clai2 .banner { margin-bottom: -165px; } } body.clai2 .banner .logo { display: inline-block; position: relative; max-width: 100%; } body.clai2 .banner .left-chars { display: none; } @media screen and (min-width: 992px) { body.clai2 .banner .left-chars { display: inline-block; position: absolute; transform: translateX(-60%) scale(0.5); bottom: 15px; z-index: 3; } } @media screen and (min-width: 1200px) { body.clai2 .banner .left-chars { transform: translateX(-80%); bottom: -90px; } } body.clai2 .banner .left-div { display: none; } @media screen and (min-width: 767px) { body.clai2 .banner .left-div { display: inline-block; position: absolute; left: 0; bottom: 134px; z-index: 5; } } body.clai2 .banner .middle-div { display: block; position: absolute; bottom: 148px; z-index: 4; width: 100%; height: 66px; } body.clai2 .banner .right-chars { display: none; } @media screen and (min-width: 992px) { body.clai2 .banner .right-chars { display: inline-block; position: absolute; transform: translateX(-30%) scale(0.5); bottom: 15px; z-index: 3; } } @media screen and (min-width: 1200px) { body.clai2 .banner .right-chars { transform: translateX(-10%); bottom: -115px; } } body.clai2 .banner .right-div { display: none; } @media screen and (min-width: 767px) { body.clai2 .banner .right-div { display: inline-block; position: absolute; right: 0; bottom: 135px; z-index: 5; } } body.clai2 .content-area { width: 100%; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clai2/IceWall.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; margin-bottom: -200px; z-index: 5; height: 959px; text-align: center; } @media screen and (min-width: 640px) { body.clai2 .content-area { height: 1159px; } } @media screen and (min-width: 767px) { body.clai2 .content-area { height: 1759px; margin-bottom: -400px; } } body.clai2 .content-area .candy-container { position: absolute; width: 100%; height: 100%; overflow: hidden; } body.clai2 .content-area .candy-container .candy { display: none; } @media screen and (min-width: 767px) { body.clai2 .content-area .candy-container .candy { display: inline-block; position: absolute; top: -50px; } } body.clai2 .content-area .candy-container .left-candy { transform: translateX(-170%); } @media screen and (min-width: 992px) { body.clai2 .content-area .candy-container .left-candy { transform: translateX(-190%); } } @media screen and (min-width: 1200px) { body.clai2 .content-area .candy-container .left-candy { transform: translateX(-210%); } } @media screen and (min-width: 1320px) { body.clai2 .content-area .candy-container .left-candy { transform: translateX(-230%); } } @media screen and (min-width: 1620px) { body.clai2 .content-area .candy-container .left-candy { transform: translateX(-250%); } } body.clai2 .content-area .candy-container .right-candy { transform: translateX(40%); } @media screen and (min-width: 992px) { body.clai2 .content-area .candy-container .right-candy { transform: translateX(60%); } } @media screen and (min-width: 1200px) { body.clai2 .content-area .candy-container .right-candy { transform: translateX(80%); } } @media screen and (min-width: 1320px) { body.clai2 .content-area .candy-container .right-candy { transform: translateX(90%); } } @media screen and (min-width: 1620px) { body.clai2 .content-area .candy-container .right-candy { transform: translateX(110%); } } body.clai2 .content-area .content-container { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clai2/Banner.webp"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; max-width: 1349px; width: 100%; padding: 50px 45px; height: 1113px; text-align: center; position: relative; top: -80px; z-index: 5; } @media screen and (min-width: 640px) { body.clai2 .content-area .content-container { height: 1313px; padding: 60px 70px; margin: 0 auto; } } @media screen and (min-width: 767px) { body.clai2 .content-area .content-container { height: 1963px; padding: 70px 100px; width: 720px; } } @media screen and (min-width: 992px) { body.clai2 .content-area .content-container { height: 2013px; padding: 80px 140px; width: 950px; } } @media screen and (min-width: 1200px) { body.clai2 .content-area .content-container { width: 1200px; } } @media screen and (min-width: 1320px) { body.clai2 .content-area .content-container { height: 2113px; width: 1300px; } } body.clai2 .content-area .content-container h2 { font-size: 25px; margin-bottom: 20px; font-family: "Lora", serif; } @media screen and (min-width: 767px) { body.clai2 .content-area .content-container h2 { font-size: 30px; } } @media screen and (min-width: 992px) { body.clai2 .content-area .content-container h2 { font-size: 35px; } } @media screen and (min-width: 1200px) { body.clai2 .content-area .content-container h2 { font-size: 40px; } } body.clai2 .content-area .content-container button { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clai2/KickstarterButtonNormal.webp"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; max-width: 541px; width: 100%; height: 60px; background-color: #00000000; border: none; } @media screen and (min-width: 420px) { body.clai2 .content-area .content-container button { height: 80px; } } @media screen and (min-width: 540px) { body.clai2 .content-area .content-container button { height: 100px; } } @media screen and (min-width: 640px) { body.clai2 .content-area .content-container button { height: 117px; } } body.clai2 .content-area .content-container button:hover { filter: brightness(150%); } body.clai2 .content-area .content-container button:focus { filter: brightness(50%); } body.clai2 .content-area .content-container .video-panel { display: inline-block; max-width: 1092px; width: 100%; height: 200px; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clai2/VideoBackground.webp"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; vertical-align: text-bottom; z-index: 10; position: relative; } @media screen and (min-width: 540px) { body.clai2 .content-area .content-container .video-panel { padding: 1em; height: 250px; } } @media screen and (min-width: 640px) { body.clai2 .content-area .content-container .video-panel { padding: 1em; height: 300px; } } @media screen and (min-width: 992px) { body.clai2 .content-area .content-container .video-panel { padding: 2em; height: 450px; } } @media screen and (min-width: 1200px) { body.clai2 .content-area .content-container .video-panel { padding: 4em; height: 600px; } } @media screen and (min-width: 1320px) { body.clai2 .content-area .content-container .video-panel { height: 683px; } } body.clai2 .content-area .content-container .video-panel iframe { width: 100%; height: 100%; padding: 10px 15px; } @media screen and (min-width: 767px) { body.clai2 .content-area .content-container .video-panel iframe { padding: 40px 45px; } } body.clai2 .content-area .content-container .description-area { position: relative; display: inline-block; right: 10px; margin-bottom: -50px; } @media screen and (min-width: 992px) { body.clai2 .content-area .content-container .description-area { margin-bottom: -150px; } } @media screen and (min-width: 1200px) { body.clai2 .content-area .content-container .description-area { margin-bottom: 0px; } } body.clai2 .content-area .content-container .description-area .box { position: relative; display: inline-block; width: 60%; } @media screen and (min-width: 992px) { body.clai2 .content-area .content-container .description-area .box { width: 50%; bottom: 80px; left: 40px; } } @media screen and (min-width: 1200px) { body.clai2 .content-area .content-container .description-area .box { position: absolute; left: -100px; bottom: -50px; z-index: 10; width: auto; } } body.clai2 .content-area .content-container .description-area .minis { position: relative; display: inline-block; width: 30%; } @media screen and (min-width: 992px) { body.clai2 .content-area .content-container .description-area .minis { width: 25%; right: 5px; bottom: 15px; } } @media screen and (min-width: 1200px) { body.clai2 .content-area .content-container .description-area .minis { position: absolute; left: 335px; bottom: -50px; z-index: 20; width: auto; } } body.clai2 .content-area .content-container .description-area .text-area { display: inline-block; max-width: 766px; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clai2/CardPaper.webp"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; text-align: left; padding: 40px; font-family: "Lora", serif; } @media screen and (min-width: 767px) { body.clai2 .content-area .content-container .description-area .text-area { height: 366px; } } @media screen and (min-width: 1200px) { body.clai2 .content-area .content-container .description-area .text-area { position: relative; left: 125px; padding: 40px 30px 0 275px; } } body.clai2 .content-area .content-container .description-area .text-area p { color: black; margin-bottom: 20px; font-size: 14px; } @media screen and (min-width: 767px) { body.clai2 .content-area .content-container .description-area .text-area p { font-size: 19px; } } @media screen and (min-width: 1200px) { body.clai2 .content-area .content-container .description-area .text-area p { font-size: 17px; } } body.clai2 .content-area .content-container .description-area .text-area p a:link { color: #095484; } body.clai2 .content-area .content-container .description-area .text-area p a:visited { color: #450652; } body.clai2 .content-area .content-container .description-area .text-area p a:hover { color: #ddd; } body.clai2 .content-area .content-container .description-area .text-area p a:active { color: #800000; } @media screen and (min-width: 1200px) { body.clai2 .content-area .content-container .description-area .text-area p.second { margin-left: 200px; } } body.clai2 .content-area .content-container section.lnews { display: none; } @media screen and (min-width: 767px) { body.clai2 .content-area .content-container section.lnews { display: block; } } body.clai2 .content-area .content-container section.lnews h2 .sm_link { font-size: 0.4em; font-family: "Open Sans", sans-serif; } body.clai2 .content-area .content-container section.lnews h2 .sm_link:hover { color: #fff; } body.clai2 .content-area .content-container section.lnews .blog-posts { width: 32%; } body.clai2 .content-area .content-container section.lnews .blog-posts:nth-of-type(2) { margin: 0 1em; padding: 0; } @media screen and (max-width: 1199px) { body.clai2 .content-area .content-container section.lnews .blog-posts { width: 48%; } body.clai2 .content-area .content-container section.lnews .blog-posts:nth-of-type(2) { padding-right: 0; } body.clai2 .content-area .content-container section.lnews .blog-posts:nth-of-type(3) { display: none; } } @media screen and (max-width: 991px) { body.clai2 .content-area .content-container section.lnews .blog-posts { width: 388px; margin: 0 auto; float: none; } body.clai2 .content-area .content-container section.lnews .blog-posts:nth-of-type(2) { display: none; } } body.clai2 .content-area .content-container section.lnews .blog-posts:hover .bp-content h2 { color: #abdeff; } body.clai2 .content-area .content-container section.lnews .blog-posts .bpImg { background-size: cover; background-repeat: no-repeat; background-position: center; height: 220px; width: 290px; transition: all .5s; margin: 1em 2em; position: absolute; } @media screen and (max-width: 1319px) { body.clai2 .content-area .content-container section.lnews .blog-posts .bpImg { width: 260px; } } @media screen and (max-width: 1199px) { body.clai2 .content-area .content-container section.lnews .blog-posts .bpImg { width: 290px; } } @media screen and (max-width: 991px) { body.clai2 .content-area .content-container section.lnews .blog-posts .bpImg { height: 210px; width: 350px; } } @media screen and (max-width: 766px) { body.clai2 .content-area .content-container section.lnews .blog-posts .bpImg { width: 350px; } } body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/newsCard.webp) top left no-repeat; background-size: contain; height: 460px !important; background-color: transparent; position: relative; padding-top: 175px; width: 100%; } @media screen and (max-width: 1319px) { body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content { padding-top: 155px; } } @media screen and (max-width: 991px) { body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content { padding-top: 230px; } } body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content .bp-title, body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content p, body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content .bp-dates { padding-right: 2em; padding-left: 2em; } body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content .bp-title { padding-top: 2.5em; height: 70px; } @media screen and (max-width: 1199px) { body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content .bp-title { padding-top: 4em; padding-right: 5em; height: 100px; width: 350px; } } @media screen and (max-width: 991px) { body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content .bp-title { height: 50px; padding-top: 1em; padding-right: 1em; width: 350px; } } @media screen and (max-width: 766px) { body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content .bp-title { padding-top: 4.5em; width: 300px; } } body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content h2 { color: #fff; font-size: 1.8em; width: 350px; font-family: 'Alegreya', serif; font-weight: 600; margin: 0; width: 100%; } body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content p { color: #383224; font-weight: 600; text-align: center; font-family: 'Lora', serif; margin: 0; font-size: 13px; padding-top: 1em; padding-bottom: 1em; height: 100px; } @media screen and (max-width: 1200px) { body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content p { padding: 0em 3em 0em 2.5em; } } @media screen and (max-width: 992px) { body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content p { padding: 1em 2em .5em 2em; } } @media screen and (max-width: 767px) { body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content p { padding-top: 4em; height: 150px; width: 380px; } } body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content small { text-align: center; color: #383224; display: block; font-family: 'Lora', serif; width: 100%; font-size: 1em; font-style: italic; } @media screen and (max-width: 767px) { body.clai2 .content-area .content-container section.lnews .blog-posts .bp-content small { width: 380px; } } body.clai2 .bottom-banner { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clai2/BottomBackground.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; height: 712px; z-index: 1; position: relative; text-align: center; } @media screen and (min-width: 767px) { body.clai2 .bottom-banner { height: 812px; } } @media screen and (min-width: 992px) { body.clai2 .bottom-banner { height: 912px; } } body.clai2 .bottom-banner footer { display: block; position: absolute; color: #D18BFD; bottom: 30px; left: 0; right: 0; padding: 0 20px; margin: 0 auto; } body.clai2 .bottom-banner .logos img { margin: 15px 5px; } body.clai2 .bottom-banner .logos .pa-logo { vertical-align: bottom; } body.clank ::-webkit-scrollbar { width: 12px; } body.clank ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; } body.clank ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } body.clank a.btn { color: #fff !important; } body.clank .banner { height: 800px; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; -webkit-transition: background 600ms ease-out 200ms; -moz-transition: background 600ms ease-out 200ms; -o-transition: background 600ms ease-out 200ms; transition: background 600ms ease-out 200ms; } @media screen and (max-width: 992px) { body.clank .banner { height: 600px; } } body.clank .banner .expansions { font-family: "Lora", serif; position: absolute; top: 12em; left: 0; padding: 1em; background-color: rgba(0, 0, 0, 0.7); z-index: 2; } @media screen and (max-width: 767px) { body.clank .banner .expansions { display: none; } } body.clank .banner .expansions .clankSTLogo, body.clank .banner .expansions .clankMCLogo, body.clank .banner .expansions .clankISALogo { display: inline-block; position: relative; width: 100%; padding: 0 15%; } body.clank .banner .expansions .clankSTLogo .logo, body.clank .banner .expansions .clankMCLogo .logo, body.clank .banner .expansions .clankISALogo .logo { background-repeat: no-repeat; background-size: contain; } body.clank .banner .expansions .clankSTLogo .logo { margin-top: 12px; height: 72px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankNavButtons/ClankSunkenTreasures_Normal.png); } body.clank .banner .expansions .clankMCLogo .logo { margin-top: 17px; height: 72px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankNavButtons/ClankMummysCurse_Normal.png); } body.clank .banner .expansions .clankISALogo .logo { margin-top: 10px; height: 80px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankNavButtons/ClankInSpaceApocolypse_Normal.png); } body.clank .banner .expansions .clankCS11, body.clank .banner .expansions .clankAPLogo { max-height: 80px; width: auto; } body.clank .banner .expansions .clankAPLogo { margin-top: 12px; } body.clank .banner .productTab { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) top left repeat; position: static; z-index: 9998; height: 130px; width: 100%; } @media screen and (max-width: 992px) { body.clank .banner .productTab { height: 80px; } } @media screen and (max-width: 767px) { body.clank .banner .productTab { height: 75px; } } body.clank .banner .productTab .clankLogo, body.clank .banner .productTab .clankISLogo, body.clank .banner .productTab .clankAILogo, body.clank .banner .productTab .clankCataLogo { display: inline-block; position: relative; width: 20%; } @media screen and (max-width: 992px) { body.clank .banner .productTab .clankLogo, body.clank .banner .productTab .clankISLogo, body.clank .banner .productTab .clankAILogo, body.clank .banner .productTab .clankCataLogo { width: 20%; height: 60px; } } @media screen and (max-width: 767px) { body.clank .banner .productTab .clankLogo, body.clank .banner .productTab .clankISLogo, body.clank .banner .productTab .clankAILogo, body.clank .banner .productTab .clankCataLogo { margin: 0 1em; } } @media screen and (max-width: 640px) { body.clank .banner .productTab .clankLogo, body.clank .banner .productTab .clankISLogo, body.clank .banner .productTab .clankAILogo, body.clank .banner .productTab .clankCataLogo { width: 18%; margin: 0 0.5em; } } body.clank .banner .productTab .clankLogo .logo, body.clank .banner .productTab .clankISLogo .logo, body.clank .banner .productTab .clankAILogo .logo, body.clank .banner .productTab .clankCataLogo .logo { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankNavButtons/Clank_Pressed.png); background-repeat: no-repeat; background-size: contain; } @media screen and (max-width: 992px) { body.clank .banner .productTab .clankLogo .logo, body.clank .banner .productTab .clankISLogo .logo, body.clank .banner .productTab .clankAILogo .logo, body.clank .banner .productTab .clankCataLogo .logo { height: 75px; } } @media screen and (max-width: 767px) { body.clank .banner .productTab .clankLogo .logo, body.clank .banner .productTab .clankISLogo .logo, body.clank .banner .productTab .clankAILogo .logo, body.clank .banner .productTab .clankCataLogo .logo { height: 50px; } } body.clank .banner .productTab .clankLogo.on .selected, body.clank .banner .productTab .clankISLogo.on .selected, body.clank .banner .productTab .clankAILogo.on .selected, body.clank .banner .productTab .clankCataLogo.on .selected { width: 100%; margin-top: 5px; } body.clank .banner .productTab .clankLogo.on .selected .tick, body.clank .banner .productTab .clankISLogo.on .selected .tick, body.clank .banner .productTab .clankAILogo.on .selected .tick, body.clank .banner .productTab .clankCataLogo.on .selected .tick { width: 10px; height: 7px; margin: 0 auto; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/css_sprites_productTab_Clank.png) -461px -145px; } @media screen and (max-width: 992px) { body.clank .banner .productTab .clankLogo.on .selected .tick, body.clank .banner .productTab .clankISLogo.on .selected .tick, body.clank .banner .productTab .clankAILogo.on .selected .tick, body.clank .banner .productTab .clankCataLogo.on .selected .tick { display: none; } } body.clank .banner .productTab .clankLogo .logo { height: 95px; } body.clank .banner .productTab .clankLogo.on .logo, body.clank .banner .productTab .clankLogo.off .logo:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankNavButtons/Clank_Normal.png); } body.clank .banner .productTab .clankLogo.off .logo { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankNavButtons/Clank_Pressed.png); } body.clank .banner .productTab .clankISLogo .logo { height: 95px; } @media screen and (max-width: 767px) { body.clank .banner .productTab .clankISLogo .logo { height: 50px; } } body.clank .banner .productTab .clankISLogo.on .logo, body.clank .banner .productTab .clankISLogo.off .logo:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankNavButtons/ClankInSpace_Normal.png); } body.clank .banner .productTab .clankISLogo.off .logo { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankNavButtons/ClankInSpace_Pressed.png); } body.clank .banner .productTab .clankAILogo { width: 19%; } @media screen and (max-width: 767px) { body.clank .banner .productTab .clankAILogo { width: 15%; } } body.clank .banner .productTab .clankAILogo .logo { height: 100px; } body.clank .banner .productTab .clankAILogo.on .logo, body.clank .banner .productTab .clankAILogo.off .logo:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankNavButtons/ClankAI_Normal.png); } body.clank .banner .productTab .clankAILogo.off .logo { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankNavButtons/ClankAI_Pressed.png); } body.clank .banner .productTab .clankCataLogo .logo { height: 95px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Logo.webp); margin-top: -102px; } @media screen and (max-width: 992px) { body.clank .banner .productTab .clankCataLogo .logo { margin-top: 0px; } } @media screen and (max-width: 767px) { body.clank .banner .productTab .clankCataLogo .logo { height: 50px; } } body.clank .banner .productTab .clankCataLogo.on .logo, body.clank .banner .productTab .clankCataLogo.off .logo:hover { filter: brightness(100%); } body.clank .banner .productTab .clankCataLogo.off .logo { filter: brightness(50%); } body.clank .banner .productTab .productTab_divider { display: inline-block; width: 34px; height: 115px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/css_sprites_productTab_Clank.png) -461px -10px; background-repeat: no-repeat; padding: 0 2em; } @media screen and (max-width: 992px) { body.clank .banner .productTab .productTab_divider { height: 70px; } } @media screen and (max-width: 767px) { body.clank .banner .productTab .productTab_divider { width: 1px; padding: 0 1px; border-left: 1px solid #444; } } body.clank .banner .storeBox { margin-top: 2em; } body.clank .banner .storeBox img { height: auto; width: 100%; margin: 0 auto; } body.clank .banner .storeBox .lg { display: block; max-width: 1000px; } body.clank .banner .storeBox .md { display: none; } body.clank .banner .storeBox .md { width: 75%; } @media screen and (max-width: 992px) { body.clank .banner .storeBox { height: 550px; } body.clank .banner .storeBox .HeroDiv { bottom: -10px; } body.clank .banner .storeBox .lg { display: none; } body.clank .banner .storeBox .md { display: block; } } @media screen and (max-width: 640px) { body.clank .banner .storeBox { height: 150px; } body.clank .banner .storeBox .btn { display: block; margin: 3px auto; width: 175px; } } body.clank .HeroDiv { position: absolute; bottom: -20px; width: 100%; } body.clank .HeroDiv .topLayer { height: 161px; background-position: top left; background-repeat: repeat-x; } body.clank .HeroDiv .leftCorner, body.clank .HeroDiv .rightCorner { height: 161px; position: absolute; top: 0; background-position: top left; background-repeat: no-repeat; } @media screen and (max-width: 640px) { body.clank .HeroDiv .leftCorner, body.clank .HeroDiv .rightCorner { display: none; } } body.clank .HeroDiv .leftCorner { width: 261px; left: 0; } body.clank .HeroDiv .rightCorner { width: 233px; right: 0; } body.clank .footerStone { position: relative; z-index: 998; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_FooterTile.webp) bottom left repeat-x; height: 50px; } body.clank main { padding: 0 0 30px; } body.clank main .mainContentDiv { background-position: 0 0; background-repeat: repeat; } body.clank main .topBox { position: absolute; top: -91px; z-index: 1; } body.clank main .bottomBox { transform: rotate(180deg); position: absolute; bottom: 0; } body.clank main .parallaxVeryBack, body.clank main .parallaxMiddle, body.clank main .parallaxFront { background-position: center center; background-repeat: no-repeat; width: 100%; position: absolute; } @media screen and (max-width: 767px) { body.clank main .parallaxVeryBack, body.clank main .parallaxMiddle, body.clank main .parallaxFront { display: none; } } body.clank main .parallaxVeryBack { height: 850px; top: 0; } body.clank main .parallaxMiddle { height: 717px; bottom: 200px; } body.clank main .parallaxFront { height: 769px; bottom: 300px; } body.clank main .footerLeftFlame, body.clank main .footerRightFlame { bottom: 0; background-position: top left; background-repeat: no-repeat; position: absolute; } @media screen and (max-width: 767px) { body.clank main .footerLeftFlame, body.clank main .footerRightFlame { display: none; } } body.clank main .footerLeftFlame { width: 446px; height: 652px; left: 0; } body.clank main .footerRightFlame { width: 372px; height: 730px; right: 0; } body.clank main .topStones { height: 74px; background-position: top left; background-repeat: repeat-x; } body.clank main .mainContentStart { background-size: contain; background-position: top left; background-repeat: repeat-y; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_ContentFrame_Fill.png); position: relative; padding: 0; border: none; border-radius: 10px; } body.clank main .mainContentStart .sideStoneRails { position: absolute; padding-bottom: 10.5em; height: 100%; width: 32px; } @media screen and (max-width: 1200px) { body.clank main .mainContentStart .sideStoneRails { display: none; } } body.clank main .mainContentStart .sideStoneRails.left { left: -31px; } body.clank main .mainContentStart .sideStoneRails.right { right: -31px; } body.clank main .mainContentStart .centerBox { position: relative; top: -70px; z-index: 2; } body.clank main .mainContentStart .centerBox .separator { height: 4px; width: 80%; margin: 0 auto; display: block; } body.clank main .mainContentStart .centerBox section p.email-error { color: white; } body.clank main .mainContentStart .centerBox section p, body.clank main .mainContentStart .centerBox section li { color: #383224; font-family: "Lora", serif; font-size: 2em; line-height: 1.4em; font-weight: 400; } @media screen and (max-width: 767px) { body.clank main .mainContentStart .centerBox section p, body.clank main .mainContentStart .centerBox section li { font-size: 1.8em; } } body.clank main .mainContentStart .centerBox section p strong, body.clank main .mainContentStart .centerBox section li strong { font-family: "Lora", serif; font-weight: 600; } body.clank main .mainContentStart .centerBox section p { margin-top: 20px; } body.clank main .mainContentStart .centerBox section h2 { color: #383224; font-family: "Alegreya", serif; font-weight: 600; font-size: 3em; margin-bottom: 20px; margin-top: 0; } body.clank main .mainContentStart .centerBox section.appInfo, body.clank main .mainContentStart .centerBox section.boxInfo, body.clank main .mainContentStart .centerBox section.howtoplay, body.clank main .mainContentStart .centerBox section.gameContent, body.clank main .mainContentStart .centerBox section.gameToSee, body.clank main .mainContentStart .centerBox section.lnews { padding: 2em 3em; } body.clank main .mainContentStart .centerBox section.appInfo strong, body.clank main .mainContentStart .centerBox section.boxInfo strong, body.clank main .mainContentStart .centerBox section.howtoplay strong, body.clank main .mainContentStart .centerBox section.gameContent strong, body.clank main .mainContentStart .centerBox section.gameToSee strong, body.clank main .mainContentStart .centerBox section.lnews strong { font-family: "Alegreya", serif; } body.clank main .mainContentStart .centerBox section.appInfo a, body.clank main .mainContentStart .centerBox section.boxInfo a, body.clank main .mainContentStart .centerBox section.howtoplay a, body.clank main .mainContentStart .centerBox section.gameContent a, body.clank main .mainContentStart .centerBox section.gameToSee a, body.clank main .mainContentStart .centerBox section.lnews a { color: #0b6786; } body.clank main .mainContentStart .centerBox section.appInfo a:hover, body.clank main .mainContentStart .centerBox section.boxInfo a:hover, body.clank main .mainContentStart .centerBox section.howtoplay a:hover, body.clank main .mainContentStart .centerBox section.gameContent a:hover, body.clank main .mainContentStart .centerBox section.gameToSee a:hover, body.clank main .mainContentStart .centerBox section.lnews a:hover { color: #0c2635; text-decoration: none; } body.clank main .mainContentStart .centerBox section.appInfo a.btn, body.clank main .mainContentStart .centerBox section.boxInfo a.btn, body.clank main .mainContentStart .centerBox section.howtoplay a.btn, body.clank main .mainContentStart .centerBox section.gameContent a.btn, body.clank main .mainContentStart .centerBox section.gameToSee a.btn, body.clank main .mainContentStart .centerBox section.lnews a.btn { width: 10em; margin: 1em auto; display: block; } body.clank main .mainContentStart .centerBox section.appInfo .content-body, body.clank main .mainContentStart .centerBox section.boxInfo .content-body, body.clank main .mainContentStart .centerBox section.howtoplay .content-body, body.clank main .mainContentStart .centerBox section.gameContent .content-body, body.clank main .mainContentStart .centerBox section.gameToSee .content-body, body.clank main .mainContentStart .centerBox section.lnews .content-body { margin-top: 2em; margin-left: 0; } body.clank main .mainContentStart .centerBox section.appInfo .content-body .expansion, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .expansion, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .expansion, body.clank main .mainContentStart .centerBox section.gameContent .content-body .expansion, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .expansion, body.clank main .mainContentStart .centerBox section.lnews .content-body .expansion { padding: 2em; border: 2px solid #383224; border-radius: 4px; } @media screen and (max-width: 640px) { body.clank main .mainContentStart .centerBox section.appInfo .content-body .expansion, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .expansion, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .expansion, body.clank main .mainContentStart .centerBox section.gameContent .content-body .expansion, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .expansion, body.clank main .mainContentStart .centerBox section.lnews .content-body .expansion { width: 375px; } } @media screen and (max-width: 420px) { body.clank main .mainContentStart .centerBox section.appInfo .content-body .expansion, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .expansion, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .expansion, body.clank main .mainContentStart .centerBox section.gameContent .content-body .expansion, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .expansion, body.clank main .mainContentStart .centerBox section.lnews .content-body .expansion { width: 100%; padding: 1em .5em; } } body.clank main .mainContentStart .centerBox section.appInfo .content-body .expansion img, body.clank main .mainContentStart .centerBox section.appInfo .content-body .expansion p, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .expansion img, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .expansion p, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .expansion img, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .expansion p, body.clank main .mainContentStart .centerBox section.gameContent .content-body .expansion img, body.clank main .mainContentStart .centerBox section.gameContent .content-body .expansion p, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .expansion img, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .expansion p, body.clank main .mainContentStart .centerBox section.lnews .content-body .expansion img, body.clank main .mainContentStart .centerBox section.lnews .content-body .expansion p { display: inline-block; } body.clank main .mainContentStart .centerBox section.appInfo .content-body .expansion img, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .expansion img, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .expansion img, body.clank main .mainContentStart .centerBox section.gameContent .content-body .expansion img, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .expansion img, body.clank main .mainContentStart .centerBox section.lnews .content-body .expansion img { width: 20%; } @media screen and (max-width: 992px) { body.clank main .mainContentStart .centerBox section.appInfo .content-body .expansion img, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .expansion img, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .expansion img, body.clank main .mainContentStart .centerBox section.gameContent .content-body .expansion img, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .expansion img, body.clank main .mainContentStart .centerBox section.lnews .content-body .expansion img { width: 25%; } } @media screen and (max-width: 420px) { body.clank main .mainContentStart .centerBox section.appInfo .content-body .expansion img, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .expansion img, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .expansion img, body.clank main .mainContentStart .centerBox section.gameContent .content-body .expansion img, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .expansion img, body.clank main .mainContentStart .centerBox section.lnews .content-body .expansion img { margin: 0 auto; display: block; width: 80px; } } body.clank main .mainContentStart .centerBox section.appInfo .content-body .expansion p, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .expansion p, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .expansion p, body.clank main .mainContentStart .centerBox section.gameContent .content-body .expansion p, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .expansion p, body.clank main .mainContentStart .centerBox section.lnews .content-body .expansion p { margin: 0 0 0 1em; width: 70%; vertical-align: middle; } @media screen and (max-width: 992px) { body.clank main .mainContentStart .centerBox section.appInfo .content-body .expansion p, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .expansion p, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .expansion p, body.clank main .mainContentStart .centerBox section.gameContent .content-body .expansion p, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .expansion p, body.clank main .mainContentStart .centerBox section.lnews .content-body .expansion p { width: 65%; } } @media screen and (max-width: 420px) { body.clank main .mainContentStart .centerBox section.appInfo .content-body .expansion p, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .expansion p, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .expansion p, body.clank main .mainContentStart .centerBox section.gameContent .content-body .expansion p, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .expansion p, body.clank main .mainContentStart .centerBox section.lnews .content-body .expansion p { margin: 0; width: 100%; text-align: center; } } body.clank main .mainContentStart .centerBox section.appInfo .content-body .content-list, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .content-list, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .content-list, body.clank main .mainContentStart .centerBox section.gameContent .content-body .content-list, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .content-list, body.clank main .mainContentStart .centerBox section.lnews .content-body .content-list { padding: 0 4em; } @media screen and (max-width: 640px) { body.clank main .mainContentStart .centerBox section.appInfo .content-body .content-list, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .content-list, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .content-list, body.clank main .mainContentStart .centerBox section.gameContent .content-body .content-list, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .content-list, body.clank main .mainContentStart .centerBox section.lnews .content-body .content-list { margin-top: 2em; width: 100%; padding: 0; } } body.clank main .mainContentStart .centerBox section.appInfo .content-body .content-list p, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .content-list p, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .content-list p, body.clank main .mainContentStart .centerBox section.gameContent .content-body .content-list p, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .content-list p, body.clank main .mainContentStart .centerBox section.lnews .content-body .content-list p { margin: 0; font-size: 1.5em; } body.clank main .mainContentStart .centerBox section.appInfo .content-body .content-list li, body.clank main .mainContentStart .centerBox section.boxInfo .content-body .content-list li, body.clank main .mainContentStart .centerBox section.howtoplay .content-body .content-list li, body.clank main .mainContentStart .centerBox section.gameContent .content-body .content-list li, body.clank main .mainContentStart .centerBox section.gameToSee .content-body .content-list li, body.clank main .mainContentStart .centerBox section.lnews .content-body .content-list li { font-size: 1.5em; } body.clank main .mainContentStart .centerBox section.lnews h2 .sm_link { font-size: 0.4em; font-family: "Open Sans", sans-serif; } body.clank main .mainContentStart .centerBox section.lnews h2 .sm_link:hover { color: #fff; } body.clank main .mainContentStart .centerBox section.lnews .blog-posts { width: 32%; } body.clank main .mainContentStart .centerBox section.lnews .blog-posts:nth-of-type(2) { margin: 0 1em; padding: 0; } @media screen and (max-width: 1200px) { body.clank main .mainContentStart .centerBox section.lnews .blog-posts { width: 48%; } body.clank main .mainContentStart .centerBox section.lnews .blog-posts:nth-of-type(2) { padding-right: 0; } body.clank main .mainContentStart .centerBox section.lnews .blog-posts:nth-of-type(3) { display: none; } } @media screen and (max-width: 767px) { body.clank main .mainContentStart .centerBox section.lnews .blog-posts { width: 100%; margin: 0; } body.clank main .mainContentStart .centerBox section.lnews .blog-posts:nth-of-type(2) { display: none; } } body.clank main .mainContentStart .centerBox section.lnews .blog-posts:hover .bp-content h2 { color: #abdeff; } body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bpImg { background-size: cover; background-repeat: no-repeat; background-position: center; height: 220px; width: 308px; transition: all .5s; margin: 1em 2em; position: absolute; } @media screen and (max-width: 1200px) { body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bpImg { width: 340px; } } @media screen and (max-width: 992px) { body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bpImg { height: 210px; width: 300px; } } @media screen and (max-width: 767px) { body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bpImg { width: 350px; } } body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/newsCard.webp) top left no-repeat; background-size: contain; height: 460px !important; background-color: transparent; position: relative; padding-top: 195px; width: 100%; } body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content .bp-title, body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content p, body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content .bp-dates { padding-right: 3em; padding-left: 3em; } body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content .bp-title { padding-top: 2.5em; height: 70px; } @media screen and (max-width: 1200px) { body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content .bp-title { padding-top: 4em; padding-right: 5em; height: 100px; width: 400px; } } @media screen and (max-width: 992px) { body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content .bp-title { height: 50px; padding-top: 1em; width: 350px; } } @media screen and (max-width: 767px) { body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content .bp-title { padding-top: 4.5em; width: 300px; } } body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content h2 { color: #fff; font-size: 1.8em; width: 350px; font-family: 'Alegreya', serif; font-weight: 600; margin: 0; width: 100%; } body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content p { color: #383224; font-weight: 600; text-align: center; font-family: 'Lora', serif; margin: 0; font-size: 13px; padding-top: 1em; padding-bottom: 1em; height: 100px; } @media screen and (max-width: 1200px) { body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content p { padding: 1em 7em 1em 2.5em; } } @media screen and (max-width: 992px) { body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content p { padding: 1em 2em .5em 2em; } } @media screen and (max-width: 767px) { body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content p { padding-top: 4em; height: 150px; width: 380px; } } body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content small { text-align: center; color: #383224; display: block; font-family: 'Lora', serif; width: 100%; font-size: 1em; font-style: italic; } @media screen and (max-width: 767px) { body.clank main .mainContentStart .centerBox section.lnews .blog-posts .bp-content small { width: 380px; } } body.clank main .mainContentStart .centerBox section.appInfo img, body.clank main .mainContentStart .centerBox section.howtoplay img { height: auto; margin: 0 auto; width: 100%; max-width: 400px; display: block; } @media screen and (max-width: 420px) { body.clank main .mainContentStart .centerBox section.boxInfo { padding-top: 0; } } body.clank main .mainContentStart .centerBox section.boxInfo img { margin: 0 auto; } body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display.board { background-position-x: right; background-repeat: no-repeat; } @media screen and (max-width: 992px) { body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display.board { background-image: none !important; } } body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardLeft, body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardCenter, body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardRight { background-size: contain; background-position: top left; background-repeat: no-repeat; height: 272px; width: 194px; display: inline-block; } @media screen and (max-width: 767px) and (min-width: 640px) { body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardLeft, body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardCenter, body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardRight { width: 32%; } } @media screen and (max-width: 500px) { body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardLeft, body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardCenter, body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardRight { width: 49%; } } @media screen and (max-width: 420px) { body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardLeft.primary, body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardCenter.primary, body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardRight.primary { width: 100% !important; height: 300px !important; } } @media screen and (max-width: 420px) { body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardLeft.secondary, body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardCenter.secondary, body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardRight.secondary { display: none !important; } } @media screen and (max-width: 640px) { body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardLeft.tertiary, body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardCenter.tertiary, body.clank main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardRight.tertiary { display: none !important; } } body.clank main .mainContentStart .centerBox section.logoFooter { background-size: contain; width: 100%; height: 200px; } body.clank main .mainContentStart .centerBox section.logoFooter .row { margin: 0px; } body.clank main .mainContentStart .centerBox section.logoFooter .col-dwd, body.clank main .mainContentStart .centerBox section.logoFooter .col-renegade { width: 41.666666%; padding: 0px; float: left; } @media screen and (max-width: 420px) { body.clank main .mainContentStart .centerBox section.logoFooter .col-dwd, body.clank main .mainContentStart .centerBox section.logoFooter .col-renegade { width: 50%; } } body.clank main .mainContentStart .centerBox section.logoFooter .col-renegade { margin-left: 16.66666%; } @media screen and (max-width: 420px) { body.clank main .mainContentStart .centerBox section.logoFooter .col-renegade { margin-left: 0%; } } body.clank main .mainContentStart .centerBox section.logoFooter .renegade { float: left; } body.clank main .mainContentStart .centerBox section.logoFooter .dwd { float: right; } body.clank main .mainContentStart .topBox { width: 100%; height: 110px; } body.clank main .logoFooter { background-position: bottom left; background-repeat: no-repeat; } body.clank footer { padding-top: 80px; background: #000; height: 300px; margin-top: -50px; } body.clankBase #cardLeft, body.clankBase #cardCenter, body.clankBase #cardRight, body.sunkenTreasures #cardLeft, body.sunkenTreasures #cardCenter, body.sunkenTreasures #cardRight, body.mummysCurse #cardLeft, body.mummysCurse #cardCenter, body.mummysCurse #cardRight, body.clankAP #cardLeft, body.clankAP #cardCenter, body.clankAP #cardRight { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/card_BACK.webp); } body.clank.clankBase .banner { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_heroImage.png); } @media screen and (max-width: 640px) { body.clank.clankBase .banner { height: 700px; } } @media screen and (max-width: 420px) { body.clank.clankBase .banner { height: 610px; } } body.clank.clankBase .banner .storeBox .md { height: auto; max-width: 300px; } body.clank.clankBase .HeroDiv .topLayer { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDivider_FramerFill.png) top left repeat-x; } body.clank.clankBase .HeroDiv .topLayer .leftCorner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDivider_FramerL.png) top left no-repeat; } body.clank.clankBase .HeroDiv .topLayer .rightCorner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDivider_FramerR.png) top left no-repeat; } body.clank.clankBase main { top: 20px; } body.clank.clankBase main .parallaxVeryBack { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRACParallax_Back_Sparks.webp); } body.clank.clankBase main .parallaxMiddle { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRACParallax_Middle_Tokens.webp); } body.clank.clankBase main .parallaxFront { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRACParallax_Front_Meeples.webp); } body.clank.clankBase main .footerLeftFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CornerFire_L.webp); } body.clank.clankBase main .footerRightFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CornerFire_R.webp); } body.clank.clankBase main .topStones { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDividerTile.webp); } body.clank.clankBase main .mainContentDiv { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/backgroundBrickTile.webp); } body.clank.clankBase main .mainContentDiv .mainContentStart { margin-bottom: -117px; } body.clank.clankBase main .mainContentDiv .mainContentStart .centerBox section.gameContent .gameBoard_display.board { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_clank.webp); background-position: right -755px; } body.clank.clankBase main .mainContentDiv .mainContentStart .centerBox section.gameContent .gameBoard_display .TunnelGuide { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/card_TunnelGuide.png) !important; } body.clank.clankBase main .mainContentDiv .mainContentStart .centerBox section.gameContent .gameBoard_display .DragonShrine { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/card_DragonShrine.png) !important; } body.clank.clankBase main .mainContentDiv .mainContentStart .centerBox section.gameContent .gameBoard_display .Belcher { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/card_Belcher.png) !important; } body.clank.clankBase main .mainContentDiv .mainContentStart .centerBox section.logoFooter { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_ContentFrame_BottomSpaced.webp); } body.clank.sunkenTreasures .banner { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/DRAC_heroImage_Sunken.png); } body.clank.sunkenTreasures .banner .storeBox .md { max-width: 400px; } body.clank.sunkenTreasures .HeroDiv .topLayer { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/DRACsunken_HeroDivider_FramerFill.png); } body.clank.sunkenTreasures .HeroDiv .topLayer .leftCorner { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/DRACsunken_HeroDivider_FramerL.png); } body.clank.sunkenTreasures .HeroDiv .topLayer .rightCorner { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/DRACsunken_HeroDivider_FramerR.png); } body.clank.sunkenTreasures main { top: 18px; } body.clank.sunkenTreasures main .parallaxVeryBack { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/DRACParallax_Back_Bubbles.png); } body.clank.sunkenTreasures main .parallaxMiddle { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/DRACParallax_Middle_Tokens.png); } body.clank.sunkenTreasures main .parallaxFront { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/DRACParallax_Front_Meeples.png); } body.clank.sunkenTreasures main .footerLeftFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/CornerWater_L.png); } body.clank.sunkenTreasures main .footerRightFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/CornerWater_R.png); } body.clank.sunkenTreasures main .topStones { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/DRACSunken_HeroWaterDividerTile.png); } body.clank.sunkenTreasures main .mainContentDiv { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/backgroundBrickTile_Blue.jpg); } body.clank.sunkenTreasures main .mainContentDiv .mainContentStart { margin-bottom: -100px; } body.clank.sunkenTreasures main .mainContentDiv .mainContentStart .sideStoneRails { padding-bottom: 5em; } body.clank.sunkenTreasures main .mainContentDiv .mainContentStart section.gameContent .gameBoard_display.board { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/BoardAndDeck_Sunken.png); } body.clank.sunkenTreasures main .mainContentDiv .mainContentStart section.gameContent .gameBoard_display .CrystalFish { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/card_CrystalFish.png) !important; } body.clank.sunkenTreasures main .mainContentDiv .mainContentStart section.gameContent .gameBoard_display .Mermaid { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/card_Mermaid.png) !important; } body.clank.sunkenTreasures main .mainContentDiv .mainContentStart section.gameContent .gameBoard_display .PipeOrgan { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/card_PipeOrgan.png) !important; } body.clank.sunkenTreasures main .mainContentDiv .mainContentStart section.logoFooter { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clanksunkentreasures/DRACSunken_ContentBottom.jpg); } body.clank.mummysCurse .banner { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankmummyscurse/DRAC_heroImage_Mummy.jpg); } @media screen and (max-width: 640px) { body.clank.mummysCurse .banner { height: 635px; } } body.clank.mummysCurse .banner .storeBox .md { max-width: 350px; } body.clank.mummysCurse .tilesSeparator { height: 80px; position: relative; z-index: 1; width: 100%; top: -5px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankmummyscurse/DRACMummy_HeroDivider.png) center center repeat-x; } body.clank.mummysCurse main { top: -20px; } body.clank.mummysCurse main .parallaxVeryBack { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankmummyscurse/DRACParallax_Sand.png); } body.clank.mummysCurse main .parallaxMiddle { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankmummyscurse/DRACParallax_Middle_Tokens.png); } body.clank.mummysCurse main .parallaxFront { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankmummyscurse/DRACParallax_Meeples.png); } body.clank.mummysCurse main .footerLeftFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankmummyscurse/CornerMummy_L.png); } body.clank.mummysCurse main .footerRightFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankmummyscurse/CornerMummy_R.png); } body.clank.mummysCurse main .topStones { background-image: none; } body.clank.mummysCurse main .mainContentDiv { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankmummyscurse/backgroundBrickTile_Mummy2.png); } body.clank.mummysCurse main .mainContentDiv .mainContentStart { margin-bottom: -150px; } body.clank.mummysCurse main .mainContentDiv .mainContentStart .sideStoneRails { padding-bottom: 5em; } body.clank.mummysCurse main .mainContentDiv .mainContentStart section.gameContent .gameBoard_display.board { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankmummyscurse/BoardandDeck_Mummy.png); } body.clank.mummysCurse main .mainContentDiv .mainContentStart section.gameContent .gameBoard_display .Croco { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankmummyscurse/Clank_The_Mummys_Curse_Cards_croc.png) !important; } body.clank.mummysCurse main .mainContentDiv .mainContentStart section.gameContent .gameBoard_display .Camel { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankmummyscurse/Clank_The_Mummys_Curse_Cards_camel.png) !important; } body.clank.mummysCurse main .mainContentDiv .mainContentStart section.gameContent .gameBoard_display .Jars { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankmummyscurse/Clank_The_Mummys_Curse_Cards_jars.png) !important; } body.clank.mummysCurse main .mainContentDiv .mainContentStart section.logoFooter { margin: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_ContentFrame_BottomSpaced.webp); } body.clank.mummysCurse .footerStone { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankmummyscurse/DRACMummy_HeroDivider.png); height: 100px; } body.clank.clankAP .pre-order { margin: 0 auto; max-width: 400px; } body.clank.clankAP .pre-order.top { position: relative; top: -4em; margin-bottom: -7em; } @media screen and (max-width: 420px) { body.clank.clankAP .pre-order.top { top: -3em; margin-bottom: -3em; } } body.clank.clankAP .pre-order.bottom { padding: 3em 0; } @media screen and (max-width: 420px) { body.clank.clankAP .pre-order { max-width: 200px; } } body.clank.clankAP .banner { height: 600px; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clankadventuringparty/Clank!AdParty_Banner.jpg"); background-size: 100%; background-position: bottom; } @media screen and (max-width: 992px) { body.clank.clankAP .banner { height: 400px; } } @media screen and (max-width: 767px) { body.clank.clankAP .banner { height: 350px; } } @media screen and (max-width: 640px) { body.clank.clankAP .banner { height: 300px; } } @media screen and (max-width: 420px) { body.clank.clankAP .banner { height: 235px; } } body.clank.clankAP .banner .storeBox .storeBox-img { max-width: 337px; } @media screen and (max-width: 992px) { body.clank.clankAP .banner .storeBox .expansions { display: none; } } body.clank.clankAP .HeroDiv { pointer-events: none; z-index: 1; } @media screen and (max-width: 992px) { body.clank.clankAP .HeroDiv { bottom: -29px; } } body.clank.clankAP .HeroDiv .topLayer { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDivider_FramerFill.png) top left repeat-x; } body.clank.clankAP .HeroDiv .topLayer .leftCorner { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/clankadventuringparty/Clank!AdParty_HeroDivider_FramerL.png") top left no-repeat; width: 233px; height: 329px; top: -13.2em; } @media screen and (max-width: 767px) { body.clank.clankAP .HeroDiv .topLayer .leftCorner { display: none; } } body.clank.clankAP .HeroDiv .topLayer .rightCorner { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/clankadventuringparty/Clank!AdParty_HeroDivider_FramerR.png") top left no-repeat; width: 233px; height: 319px; top: -13.1em; } @media screen and (max-width: 767px) { body.clank.clankAP .HeroDiv .topLayer .rightCorner { display: none; } } body.clank.clankAP main { top: 18px; padding: 0 0 5px; } body.clank.clankAP main .parallaxVeryBack { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clankadventuringparty/Clank!AdParty_Parallax_Sparks.png"); } body.clank.clankAP main .parallaxMiddle { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clankadventuringparty/Clank!AdParty_Prallax_Middle.png"); } body.clank.clankAP main .parallaxFront { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clankadventuringparty/Clank!AdParty_Prallax_Meeples.png"); } body.clank.clankAP main .footerLeftFlame { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clankadventuringparty/Clank!AdParty_Corner_L.png"); width: 362px; height: 715px; } body.clank.clankAP main .footerRightFlame { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clankadventuringparty/Clank!AdParty_Corner_R.png"); width: 362px; height: 715px; } body.clank.clankAP main .topStones { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDividerTile.webp); } body.clank.clankAP main .mainContentDiv { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clankadventuringparty/backgroundBrickTile_AdParty.jpg"); } body.clank.clankAP main .mainContentDiv .mainContentStart { margin-bottom: -100px; } body.clank.clankAP main .mainContentDiv .mainContentStart .sideStoneRails { padding-bottom: 5em; } body.clank.clankAP main .mainContentDiv .mainContentStart section.howtoplay img { max-width: inherit; } body.clank.clankAP main .mainContentDiv .mainContentStart section.gameContent .content-body .expansion img { width: 100%; } body.clank.clankAP main .mainContentDiv .mainContentStart section.gameContent .content-body .expansion p { width: 100%; } body.clank.clankAP main .mainContentDiv .mainContentStart section.gameContent .gameBoard_display.board { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clankadventuringparty/Clank!AdParty_NEWBoard_Tokens.png"); } body.clank.clankAP main .mainContentDiv .mainContentStart section.gameContent .gameBoard_display .Succubus { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clankadventuringparty/Clank!AdParty_Card_1.png") !important; } body.clank.clankAP main .mainContentDiv .mainContentStart section.gameContent .gameBoard_display .ElvenSatchel { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clankadventuringparty/Clank!AdParty_Card_2.png") !important; } body.clank.clankAP main .mainContentDiv .mainContentStart section.gameContent .gameBoard_display .RebelHerald { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/clankadventuringparty/Clank!AdParty_Card_3.png") !important; } body.clank.clankAP main .mainContentDiv .mainContentStart section.logoFooter { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_ContentFrame_BottomSpaced.webp); } body.clank.clankCata .centered { margin: 0 auto; } body.clank.clankCata .banner { height: auto !important; } body.clank.clankCata .cata-header { text-align: center; } @media (max-width: 800px) { body.clank.clankCata .cata-header img { height: auto; width: 50%; } } body.clank.clankCata .main-short { background-size: cover !important; padding: 50px 0; } body.clank.clankCata .box-display .box-text { text-align: center; font-family: 'Alegreya', serif; font-size: 2.5em; } @media (max-width: 1200px) { body.clank.clankCata .box-display .box-text { font-size: 2em; } } @media (max-width: 992px) { body.clank.clankCata .box-display .box-text { font-size: 1.75em; } } @media (max-width: 767px) { body.clank.clankCata .box-display .box-text { font-size: 1.4em; } } body.clank.clankCata .box-display .box-text h2 { font-size: 1.5em; } body.clank.clankCata .box-display .box-text .btn-cta { font-size: 1.25em; } @media (max-width: 992px) { body.clank.clankCata .box-display .box-text .btn-cta { font-size: 1em; } } body.clank.clankCata .box-img { margin-top: 5em; } body.clank.clankCata .contents-list { text-align: left; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Content_Frame.webp) no-repeat; background-size: contain; width: 341px; height: 421px; position: relative; top: 250px; left: -50px; color: #222; padding-right: 1em; font-family: 'Alegreya', serif; } @media (max-width: 1320px) { body.clank.clankCata .contents-list { width: 300px; } } @media (max-width: 1200px) { body.clank.clankCata .contents-list { width: 280px; top: 150px; left: -85px; } } @media (max-width: 992px) { body.clank.clankCata .contents-list { width: 250px; top: 100px; } } @media (max-width: 767px) { body.clank.clankCata .contents-list { width: 400px; top: 450px; left: 150px; padding-right: 7em; } } @media (max-width: 640px) { body.clank.clankCata .contents-list { top: 300px; left: 0px; width: 350px; } } body.clank.clankCata .contents-list h3 { position: relative; text-align: center; font-size: 4em; padding-top: 0.5em; } @media (max-width: 1200px) { body.clank.clankCata .contents-list h3 { font-size: 3em; } } @media (max-width: 767px) { body.clank.clankCata .contents-list h3 { padding-top: 1.5em; } } body.clank.clankCata .contents-list ul { position: relative; font-size: 1.75em; } @media (max-width: 1320px) { body.clank.clankCata .contents-list ul { font-size: 1.5em; } } @media (max-width: 992px) { body.clank.clankCata .contents-list ul { font-size: 1.25em; } } @media (max-width: 767px) { body.clank.clankCata .contents-list ul { font-size: 1.5em; } } body.clank.clankCata .learn-more { text-align: center; padding: 1em 2em !important; } body.clank.clankCata .bottomContent { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/BG_2.png) no-repeat; background-size: contain; background-position: bottom; height: 1100px; text-align: center; } @media (max-width: 1400px) { body.clank.clankCata .bottomContent { height: 1000px; } } @media (max-width: 1320px) { body.clank.clankCata .bottomContent { height: 900px; } } @media (max-width: 1200px) { body.clank.clankCata .bottomContent { height: 800px; } } @media (max-width: 992px) { body.clank.clankCata .bottomContent { height: 650px; } } @media (max-width: 767px) { body.clank.clankCata .bottomContent { height: 1050px; } } @media (max-width: 640px) { body.clank.clankCata .bottomContent { height: 925px; } } body.clank.clankCata .bottomContent .components-img { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Components.png) no-repeat; background-size: contain; margin: -150px auto 0 auto; height: 886px; width: 1211px; position: relative; left: 70px; } @media (max-width: 1400px) { body.clank.clankCata .bottomContent .components-img { width: 1100px; } } @media (max-width: 1320px) { body.clank.clankCata .bottomContent .components-img { width: 1000px; } } @media (max-width: 1200px) { body.clank.clankCata .bottomContent .components-img { width: 825px; margin-top: -100px; } } @media (max-width: 992px) { body.clank.clankCata .bottomContent .components-img { width: 600px; margin-top: -50px; } } @media (max-width: 767px) { body.clank.clankCata .bottomContent .components-img { left: 0px; width: 500px; } } @media (max-width: 640px) { body.clank.clankCata .bottomContent .components-img { width: 350px; } } body.clank.clankCata div.newsletter-bottom { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Frame_2.webp) no-repeat; background-size: 100% 100%; margin: -14em auto 10em auto; padding: 5em 0em 0em 0em; } @media (max-width: 1400px) { body.clank.clankCata div.newsletter-bottom { margin-top: -21em; } } @media (max-width: 1320px) { body.clank.clankCata div.newsletter-bottom { margin-top: -27em; } } @media (max-width: 1200px) { body.clank.clankCata div.newsletter-bottom { margin-top: -38em; padding-top: 3em; } } @media (max-width: 992px) { body.clank.clankCata div.newsletter-bottom { margin-top: -43em; padding-top: 1.5em; } } @media (max-width: 767px) { body.clank.clankCata div.newsletter-bottom { margin-top: 1em; padding-top: 2em; } } @media (max-width: 640px) { body.clank.clankCata div.newsletter-bottom { margin-top: -15em; } } body.clank.clankCata .btn-small { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Button_Small.png) no-repeat; background-size: cover; width: 185px; height: 55px; cursor: pointer; border: none; font-size: 2em; vertical-align: top; } @media (max-width: 1200px) { body.clank.clankCata .btn-small { width: 130px; height: 40px; font-size: 1.5em; } } @media (max-width: 767px) { body.clank.clankCata .btn-small { width: 125px; height: 40px; } } body.clank.clankCata .btn-small:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Button_Small_Highlighted.png) no-repeat; background-size: cover; border: none; color: #fff; } body.clank.clankCata .btn-small:active, body.clank.clankCata .btn-small:focus { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Button_Small_Pressed.png) no-repeat; background-size: cover; border: none; outline: none; color: #ddd; } body.clank.clankCata .btn-cta { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Button_Big.png) no-repeat; background-size: cover; width: 320px; height: 92px; cursor: pointer; border: none; font-size: 3em; font-family: 'Alegreya', serif; } @media (max-width: 992px) { body.clank.clankCata .btn-cta { width: 175px; height: 50px; font-size: 1.5em; } } @media (max-width: 640px) { body.clank.clankCata .btn-cta { display: block; margin: 0 auto; margin-bottom: 0.25em; } } body.clank.clankCata .btn-cta:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Button_Big_Highlighted.png) no-repeat; background-size: cover; border: none; color: #fff; } body.clank.clankCata .btn-cta:active, body.clank.clankCata .btn-cta:focus { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Button_Big_Pressed.png) no-repeat; background-size: cover; border: none; outline: none; color: #ddd; } body.clank.clankCata .newsletter { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Brick_Backer.webp) no-repeat; background-size: 100% 100%; margin: 4em auto -8em auto; padding: 1em 0em 0em 0em; height: 250px; width: 1300px; font-family: 'Alegreya', serif; text-align: center; z-index: 1000000; position: relative; } @media (max-width: 1320px) { body.clank.clankCata .newsletter { width: 1100px; height: 230px; } } @media (max-width: 1200px) { body.clank.clankCata .newsletter { width: 970px; height: 200px; padding-top: 1em; } } @media (max-width: 992px) { body.clank.clankCata .newsletter { width: 725px; height: 150px; padding-top: 0.1em; } } @media (max-width: 767px) { body.clank.clankCata .newsletter { width: 600px; height: 125px; } } @media (max-width: 640px) { body.clank.clankCata .newsletter { width: 350px; height: 175px; padding-top: 1em; } } body.clank.clankCata .newsletter h2 { margin-top: 10px; } @media (max-width: 992px) { body.clank.clankCata .newsletter h2 { font-size: 2em; margin-bottom: 0px; } } @media (max-width: 767px) { body.clank.clankCata .newsletter h2 { font-size: 1.5em; margin: 0.5em; } } @media (max-width: 640px) { body.clank.clankCata .newsletter h2 { font-size: 1.25em; margin-top: 1.75em; } } body.clank.clankCata .newsletter input { width: 717px; height: 55px; display: inline-block; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/EnterEmail_Container.png) no-repeat; background-size: cover; border: none; border-radius: 0px; color: #ccc; font-size: 2em; margin-top: 2px; } @media (max-width: 1200px) { body.clank.clankCata .newsletter input { width: 417px; height: 40px; } } @media (max-width: 992px) { body.clank.clankCata .newsletter input { font-size: 1.5em; } } @media (max-width: 767px) { body.clank.clankCata .newsletter input { width: 300px; height: 35px; } } body.clank.clankCata .button-row .btn-medium { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Button_SignUp.png) no-repeat; background-size: cover; width: 220px; height: 72px; cursor: pointer; border: none; font-size: 3em; font-family: 'Alegreya', serif; } @media (max-width: 992px) { body.clank.clankCata .button-row .btn-medium { width: 150px; height: 45px; font-size: 1.5em; } } @media (max-width: 640px) { body.clank.clankCata .button-row .btn-medium { display: block; margin: 0 auto; margin-bottom: 0.25em; } } body.clank.clankCata .button-row .btn-medium:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Button_SignUp_Highlighted.png) no-repeat; background-size: cover; border: none; color: #fff; } body.clank.clankCata .button-row .btn-medium:active, body.clank.clankCata .button-row .btn-medium:focus { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Button_SignUp_Pressed.png) no-repeat; background-size: cover; border: none; outline: none; color: #ddd; } body.clank.clankCata .separator { display: block; height: auto; margin-left: auto; margin-right: auto; width: 50%; padding: 75px 0; } body.clank.clankCata .pb-8 { padding-bottom: 8em; } body.clank.clankCata section.lnews > h2, body.clank.clankCata h3 { padding-top: 1em; clear: both; } body.clank.clankCata .centerBoxFooter { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_ContentFrame_BottomSpaced.webp); background-size: contain; width: 100%; height: 200px; background-position: bottom left; background-repeat: no-repeat; margin: 30em 0 1.5em 0; } body.clank.clankCata img.legacyTagline { max-width: 95%; } body.clank.clankCata img.preorderButton { max-width: 500px; width: 100%; } body.clank.clankCata img.boxMinis { max-width: 115%; margin-left: -80px !important; } @media screen and (max-width: 992px) { body.clank.clankCata img.boxMinis { max-width: 100%; margin-left: 0 !important; } } body.clank.clankCata img.contentsHeadline { margin: inherit !important; } @media screen and (max-width: 992px) { body.clank.clankCata img.contentsHeadline { margin: 0 auto !important; } } body.clank.clankCata img.contentShot { max-width: 117%; margin-left: -116px !important; } @media screen and (max-width: 992px) { body.clank.clankCata img.contentShot { max-width: 100%; margin-left: 0 !important; } } body.clank.clankCata img.aiWithUMP { max-width: 118%; margin-left: -80px !important; } @media screen and (max-width: 992px) { body.clank.clankCata img.aiWithUMP { max-width: 100%; margin-left: 0 !important; } } body.clank.clankCata img.aiWithCTeam { max-width: 118%; margin-left: -21px !important; } @media screen and (max-width: 992px) { body.clank.clankCata img.aiWithCTeam { max-width: 100%; margin-left: 0 !important; } } @media screen and (max-width: 992px) { body.clank.clankCata .HeroDiv { bottom: -29px; } } body.clank.clankCata .HeroDiv .topLayer { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDivider_FramerFill.png) top left repeat-x; } body.clank.clankCata .HeroDiv .topLayer .leftCorner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDivider_FramerL.png) top left no-repeat; } body.clank.clankCata .HeroDiv .topLayer .rightCorner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDivider_FramerR.png) top left no-repeat; } body.clank.clankCata .footerStone { margin-top: -30px; } body.clank.clankCata main { top: 0px; } @media screen and (max-width: 992px) { body.clank.clankCata main { top: 0px; } } body.clank.clankCata main .footerLeftFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CornerFireGreen_L.webp); } body.clank.clankCata main .footerRightFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CornerFireGreen_R.webp); } body.clank.clankCata main .topStones { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDividerTile.webp); } body.clank.clankCata main .mainContentDiv { z-index: 100; position: relative; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/BG_1.webp); background-size: contain; background-repeat: no-repeat; } @media screen and (min-width: 2500px) { body.clank.clankCata main .mainContentDiv { background-size: cover; } } body.clank.clankCata main .mainContentDiv .mainContentStart { margin-top: 25px; padding: 20px 20px 40px 20px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank-catacombs/Frame_1.webp) no-repeat; background-size: 100% 100%; width: 1180px; min-height: 400px; } @media (max-width: 1200px) { body.clank.clankCata main .mainContentDiv .mainContentStart { padding: 0px 20px 70px 20px; width: 970px; } } @media (max-width: 992px) { body.clank.clankCata main .mainContentDiv .mainContentStart { width: 700px; padding: 0px; } } @media (max-width: 767px) { body.clank.clankCata main .mainContentDiv .mainContentStart { width: 600px; padding-bottom: 70px; } } @media (max-width: 640px) { body.clank.clankCata main .mainContentDiv .mainContentStart { width: 350px; padding-bottom: 10px; } } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox { top: 50px; } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section.lnews { padding: 2em 2em 2em 4em; } @media screen and (min-width: 1200px) { body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section.lnews .bp-content { padding-top: 185px !important; } } @media screen and (max-width: 992px) and (min-width: 767px) { body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section.lnews .bp-content { padding-top: 180px !important; } } @media screen and (max-width: 640px) { body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section.lnews .bp-content { padding-top: 170px !important; } } @media screen and (max-width: 640px) { body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section.lnews .bp-content p { padding-right: 75px !important; } } @media screen and (max-width: 992px) and (min-width: 767px) { body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section.lnews .bpImg { height: 200px !important; width: 280px !important; } } @media screen and (max-width: 640px) { body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section.lnews .bpImg { width: 300px !important; } } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section.logoFooter { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_ContentFrame_BottomSpaced.webp); } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .cards { display: flex; align-items: center; justify-content: center; transform: translate(73px, 0px); } @media screen and (max-width: 420px) { body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .cards { transform: none; margin-left: 155px; } } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .card { width: 28%; } @media screen and (max-width: 420px) { body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .card { width: 60%; } } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .card:nth-child(2) { transform: translate(-55px, 50px); } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .card:nth-child(3) { transform: translate(-90px, 0px); } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .card:nth-child(4) { transform: translate(-144px, 50px); } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .video-container { height: 580px; } @media screen and (max-width: 1200px) { body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .video-container { height: 370px; } } @media screen and (max-width: 640px) { body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .video-container { height: 170px; } } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .video-container iframe { width: 90%; height: 100%; max-width: 1500px; border: none; } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .form-group, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .form-group, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/InputBox.png) no-repeat; background-size: 100% 100%; } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup input, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup input, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup input:active, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup input:focus, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup input:active, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup input:focus, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText input:active, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText input:focus { border: none; box-shadow: none; } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup input::placeholder, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup input::placeholder, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText input::placeholder { font-family: "Alegreya", serif; font-style: italic; font-size: 18px; color: #fff; } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Normal.webp) no-repeat; background-size: 100% 100%; padding: 1em 4em 1.4em; border: none; font-family: "Alegreya", serif; color: #fff; font-size: 19px; } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Pressed.png) no-repeat; background-size: 100% 100%; color: #fff7; } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Normal_Large.webp) no-repeat center; padding: 0.3em 3.6em 0.7em; font-size: 33px; } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Pressed_Large.png) no-repeat center; } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large:active, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large:focus, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large:active, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large:focus, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large:active, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large:focus, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large:active, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large:focus, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large:active, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large:focus, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large:active, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large:focus { border: none; outline: none; } @media screen and (max-width: 640px) { body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Normal.webp) no-repeat; background-size: 100% 100%; padding: 1em 4em 1.4em; font-size: 19px; } body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large:hover, body.clank.clankCata main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Pressed.png) no-repeat; background-size: 100% 100%; } } body.clank.clankCata.faq main { top: -43px; } @media screen and (max-width: 640px) { body.clank.clankCata.faq main { top: 0px; } } body.clank.clankCata.faq .topBanner img { margin: 0 auto; } body.clank.clankCata.faq .hide { display: none; } body.clank.clankCata.faq .show { display: inherit; } body.clank.clankCata.faq .actions { padding-right: 3em; } body.clank.clankCata.faq .hideShowButton { cursor: pointer; border: 1px solid #383224; font-weight: 600; font-size: 20px; color: #383224; background: transparent; outline-color: transparent; white-space: normal; } body.clank.clankCata.faq .inner-section { padding: 3em; } body.clank.clankCata.faq .table-of-contents { padding-bottom: 3em; padding-left: 1.5em; color: #383224; font-family: "Lora", serif; font-size: 2em; line-height: 1.4em; font-weight: 400; } body.clank.clankCata.faq .table-of-contents a { color: #383224; } body.clank.clankCata.faq .click-to-view { cursor: pointer; } body.clank.clankCata.faq .click-to-view:hover { text-decoration: underline; } body.clank.clankCata.faq .section-header { color: #383224; font-family: "Alegreya", serif; font-weight: 600; margin-bottom: 20px; margin-top: 20px; } body.clank.clankCata.faq .section-header h2 { font-size: 40px; } body.clank.clankCata.faq .section-header h5 { font-size: 20px; } body.clank.clankCata.faq .section-content { color: #383224; font-family: "Lora", serif; font-size: 2em; line-height: 1.4em; font-weight: 400; } body.clank.clankCata.faq .section-content .title-text { font-weight: 600; } body.clank.clankCata.faq .section-content .mb-15 { margin-bottom: 1.5em; } body.clank.clankAI .centered { margin: 0 auto; } body.clank.clankAI .banner { height: auto !important; } body.clank.clankAI .pb-8 { padding-bottom: 8em; } body.clank.clankAI img.legacyTagline { max-width: 95%; } body.clank.clankAI img.preorderButton { max-width: 500px; width: 100%; } body.clank.clankAI img.boxMinis { max-width: 115%; margin-left: -80px !important; } @media screen and (max-width: 992px) { body.clank.clankAI img.boxMinis { max-width: 100%; margin-left: 0 !important; } } body.clank.clankAI img.contentsHeadline { margin: inherit !important; } @media screen and (max-width: 992px) { body.clank.clankAI img.contentsHeadline { margin: 0 auto !important; } } body.clank.clankAI img.contentShot { max-width: 117%; margin-left: -116px !important; } @media screen and (max-width: 992px) { body.clank.clankAI img.contentShot { max-width: 100%; margin-left: 0 !important; } } body.clank.clankAI img.aiWithUMP { max-width: 118%; margin-left: -80px !important; } @media screen and (max-width: 992px) { body.clank.clankAI img.aiWithUMP { max-width: 100%; margin-left: 0 !important; } } body.clank.clankAI img.aiWithCTeam { max-width: 118%; margin-left: -21px !important; } @media screen and (max-width: 992px) { body.clank.clankAI img.aiWithCTeam { max-width: 100%; margin-left: 0 !important; } } @media screen and (max-width: 992px) { body.clank.clankAI .HeroDiv { bottom: -29px; } } body.clank.clankAI .HeroDiv .topLayer { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDivider_FramerFill.png) top left repeat-x; } body.clank.clankAI .HeroDiv .topLayer .leftCorner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDivider_FramerL.png) top left no-repeat; } body.clank.clankAI .HeroDiv .topLayer .rightCorner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDivider_FramerR.png) top left no-repeat; } body.clank.clankAI .footerStone { margin-top: -50px; } body.clank.clankAI main { top: 0px; } @media screen and (max-width: 992px) { body.clank.clankAI main { top: 23px; } } body.clank.clankAI main .footerLeftFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CornerFireGreen_L.webp); } body.clank.clankAI main .footerRightFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CornerFireGreen_R.webp); } body.clank.clankAI main .topStones { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDividerTile.webp); } body.clank.clankAI main .mainContentDiv { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/backgroundBrickTile.webp); } body.clank.clankAI main .mainContentDiv .mainContentStart { margin-bottom: -90px; } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section.logoFooter { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_ContentFrame_BottomSpaced.webp); } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .cards { display: flex; align-items: center; justify-content: center; transform: translate(73px, 0px); } @media screen and (max-width: 420px) { body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .cards { transform: none; margin-left: 155px; } } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .card { width: 28%; } @media screen and (max-width: 420px) { body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .card { width: 60%; } } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .card:nth-child(2) { transform: translate(-55px, 50px); } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .card:nth-child(3) { transform: translate(-90px, 0px); } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .card:nth-child(4) { transform: translate(-144px, 50px); } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .video-container { height: 580px; } @media screen and (max-width: 1200px) { body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .video-container { height: 370px; } } @media screen and (max-width: 640px) { body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .video-container { height: 170px; } } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .video-container iframe { width: 90%; height: 100%; max-width: 1500px; border: none; } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .form-group, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .form-group, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/InputBox.png) no-repeat; background-size: 100% 100%; } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup input, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup input, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup input:active, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup input:focus, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup input:active, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup input:focus, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText input:active, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText input:focus { border: none; box-shadow: none; } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup input::placeholder, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup input::placeholder, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText input::placeholder { font-family: "Alegreya", serif; font-style: italic; font-size: 18px; color: #fff; } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Normal.webp) no-repeat; background-size: 100% 100%; padding: 1em 4em 1.4em; border: none; font-family: "Alegreya", serif; color: #fff; font-size: 19px; } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Pressed.png) no-repeat; background-size: 100% 100%; color: #fff7; } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Normal_Large.webp) no-repeat center; padding: 0.3em 3.6em 0.7em; font-size: 33px; } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Pressed_Large.png) no-repeat center; } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large:active, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large:focus, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large:active, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large:focus, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large:active, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large:focus, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large:active, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large:focus, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large:active, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large:focus, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large:active, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large:focus { border: none; outline: none; } @media screen and (max-width: 640px) { body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Normal.webp) no-repeat; background-size: 100% 100%; padding: 1em 4em 1.4em; font-size: 19px; } body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large:hover, body.clank.clankAI main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Pressed.png) no-repeat; background-size: 100% 100%; } } body.clank.clankAI.faq main { top: -43px; } @media screen and (max-width: 640px) { body.clank.clankAI.faq main { top: 0px; } } body.clank.clankAI.faq .topBanner img { margin: 0 auto; } body.clank.clankAI.faq .hide { display: none; } body.clank.clankAI.faq .show { display: inherit; } body.clank.clankAI.faq .actions { padding-right: 3em; } body.clank.clankAI.faq .hideShowButton { cursor: pointer; border: 1px solid #383224; font-weight: 600; font-size: 20px; color: #383224; background: transparent; outline-color: transparent; white-space: normal; } body.clank.clankAI.faq .inner-section { padding: 3em; } body.clank.clankAI.faq .table-of-contents { padding-bottom: 3em; padding-left: 1.5em; color: #383224; font-family: "Lora", serif; font-size: 2em; line-height: 1.4em; font-weight: 400; } body.clank.clankAI.faq .table-of-contents a { color: #383224; } body.clank.clankAI.faq .click-to-view { cursor: pointer; } body.clank.clankAI.faq .click-to-view:hover { text-decoration: underline; } body.clank.clankAI.faq .section-header { color: #383224; font-family: "Alegreya", serif; font-weight: 600; margin-bottom: 20px; margin-top: 20px; } body.clank.clankAI.faq .section-header h2 { font-size: 40px; } body.clank.clankAI.faq .section-header h5 { font-size: 20px; } body.clank.clankAI.faq .section-content { color: #383224; font-family: "Lora", serif; font-size: 2em; line-height: 1.4em; font-weight: 400; } body.clank.clankAI.faq .section-content .title-text { font-weight: 600; } body.clank.clankAI.faq .section-content .mb-15 { margin-bottom: 1.5em; } @media screen and (max-width: 420px) { body.clank.inSpace .banner { height: 625px; } } body.clank.inSpace .banner .storeBox .md { max-width: 500px; display: block; } @media screen and (max-width: 992px) { body.clank.inSpace .banner .storeBox .md { width: 370px; } } @media screen and (max-width: 640px) { body.clank.inSpace .banner .storeBox .md { width: 300px; } } @media screen and (max-width: 420px) { body.clank.inSpace .banner .storeBox .md { width: 75%; } } body.clank.inSpace .mainContentDiv .mainContentStart { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/spaceContentPanelFill.jpg) 0 0 repeat; } body.clank.inSpace .mainContentDiv .mainContentStart .centerBox { top: 0; } body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section p, body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section h2, body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section li { font-family: 'Titillium Web', sans-serif; } body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section p, body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section li { font-size: 2em; line-height: 1.4em; font-weight: 400; } body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section p strong, body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section li strong { font-family: 'Titillium Web', serif; } body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section .sm_link { color: #003333; } body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section.howtoplay, body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section.appInfo, body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section.gameContent, body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section.gameToSee, body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section.logoFooter { border-top: 4px solid #7C8DA9; } body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section.howtoplay, body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section.gameContent, body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section.logoFooter { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/spaceContentPanelDivider.jpg) top center no-repeat; } body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section.howtoplay h2 { font-style: italic; font-size: 3.7em; } body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section.gameToSee a { text-align: center; text-decoration: underline; color: #383224; } body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section.gameToSee a p { font-size: 2em; } body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section.gameToSee a img { margin: 0 auto; display: block; width: 100%; max-width: 350px; } body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section.logoFooter { background-image: none; } body.clank.inSpace .mainContentDiv .mainContentStart .centerBox section.logoFooter .renegade { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/logo_renegade.png) top left no-repeat; background-size: contain; margin-top: 2.3em; } body.clank.inSpace .mainContentDiv .mainContentStart section .separator { visibility: hidden; } body.clank.inSpace .mainContentDiv .mainContentStart section.lnews .bp-content { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/DRACSPACE_newsCard.png) !important; } body.clank.inSpace .mainContentDiv .mainContentStart section.gameContent #cardLeft, body.clank.inSpace .mainContentDiv .mainContentStart section.gameContent #cardCenter, body.clank.inSpace .mainContentDiv .mainContentStart section.gameContent #cardRight { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/cardBack.png); } body.clank.inSpace .mainContentDiv .footerStone { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/SpaceDivider_Large.jpg); } body.clank.inSpaceBase .banner { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/DRACSPACE_heroImage.jpg); } body.clank.inSpaceBase main .parallaxVeryBack { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/DRACParallax_Back_Sparks.png); } body.clank.inSpaceBase main .parallaxMiddle { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/DRACParallax_Middle_Tokens.png); } body.clank.inSpaceBase main .parallaxFront { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/DRACParallax_Front_Tokens.png); } body.clank.inSpaceBase main .footerLeftFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/CornerFire_l.png); } body.clank.inSpaceBase main .footerRightFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/CornerFire_R.png); } body.clank.inSpaceBase main .topStones { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/SpaceDivider_Large.jpg); } body.clank.inSpaceBase main .mainContentDiv { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/SpaceBackgroundTile.jpg); } body.clank.inSpaceBase main .mainContentDiv .mainContentStart .centerBox section.howtoplay ul { list-style-type: none; padding: 0; } body.clank.inSpaceBase main .mainContentDiv .mainContentStart .centerBox section.howtoplay ul li { font-family: 'Titillium Web', sans-serif; font-size: 2em; color: #383224; } body.clank.inSpaceBase main .mainContentDiv .mainContentStart .centerBox section.howtoplay ul li strong { font-weight: 600; } body.clank.inSpaceBase main .mainContentDiv .mainContentStart .centerBox section.gameContent .boxInfoText .gameBoard_display.board { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/Graphic_SpaceContents.png); background-position: right; } body.clank.inSpaceBase main .mainContentDiv .mainContentStart .centerBox section.gameContent .boxInfoText .gameBoard_display .DorrSentinel { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/card_DoorSentinel.png) !important; } body.clank.inSpaceBase main .mainContentDiv .mainContentStart .centerBox section.gameContent .boxInfoText .gameBoard_display .FAZR { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/card_FAZR.png) !important; } body.clank.inSpaceBase main .mainContentDiv .mainContentStart .centerBox section.gameContent .boxInfoText .gameBoard_display .lightScooter { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankinspace/card_lightScooter.png) !important; } body.clank.inSpace.apocalypse .banner { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CIS_Apoc_heroImage.jpg); height: 540px; } body.clank.inSpace.apocalypse .banner .storeBox { margin-top: 1em; } body.clank.inSpace.apocalypse .banner .storeBox .md { max-width: 370px; } body.clank.inSpace.apocalypse .banner .cta-buttons { margin-top: -4em; } @media screen and (max-width: 767px) { body.clank.inSpace.apocalypse .banner .cta-buttons { margin-top: 0em; } } body.clank.inSpace.apocalypse main .parallaxVeryBack { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CIS_ApocParallax_Sparks.png); } body.clank.inSpace.apocalypse main .parallaxMiddle { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CIS_Apoc_Parallax_Middle_Tokens.png); } body.clank.inSpace.apocalypse main .parallaxFront { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CIS_Apoc_Parallax_Front.png); } body.clank.inSpace.apocalypse main .footerLeftFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CornerCIS_Apoc_L.png); } body.clank.inSpace.apocalypse main .footerRightFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CornerCIS_Apoc_R.png); height: 700px; } body.clank.inSpace.apocalypse main .topStones { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CIS_Apoc_HeroDivider.png); } body.clank.inSpace.apocalypse main .mainContentDiv { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CIS_Apoc_backgroundTile.png); } body.clank.inSpace.apocalypse main .mainContentDiv .mainContentStart .centerBox { top: 0; } body.clank.inSpace.apocalypse main .mainContentDiv .mainContentStart .centerBox section.gameContent .gameBoard_display.board { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CIS_Apoc_Content_Boards.png); background-position: right; } body.clank.inSpace.apocalypse main .mainContentDiv .mainContentStart .centerBox section.gameContent .gameBoard_display .VigilanteTechnician { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/Clank_Apocalypse_Cards_24.png) !important; } body.clank.inSpace.apocalypse main .mainContentDiv .mainContentStart .centerBox section.gameContent .gameBoard_display .WaterBear { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/Clank_Apocalypse_Cards_26.png) !important; } body.clank.inSpace.apocalypse main .mainContentDiv .mainContentStart .centerBox section.gameContent .gameBoard_display .PsychicPool { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/Clank_Apocalypse_Cards_32.png) !important; } body.clank.inSpace.cyberStation .banner { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankcyberstation/CS11_Ban.jpg); height: 540px; } @media screen and (max-width: 767px) { body.clank.inSpace.cyberStation .banner { height: 460px; } } body.clank.inSpace.cyberStation .banner .storeBox { margin-top: 0em; } body.clank.inSpace.cyberStation .banner .storeBox .md { max-width: 337px; } @media screen and (max-width: 767px) { body.clank.inSpace.cyberStation .banner .storeBox .md { max-width: 264px; } } body.clank.inSpace.cyberStation .banner .storeBox .cta-buttons { margin-top: -1em; } body.clank.inSpace.cyberStation main img.upgrade-image { width: 130% !important; max-width: 600px !important; } @media screen and (max-width: 767px) { body.clank.inSpace.cyberStation main img.upgrade-image { width: 100% !important; } } body.clank.inSpace.cyberStation main .parallaxVeryBack { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankcyberstation/CS11_Parallax_Sparks.png); } body.clank.inSpace.cyberStation main .parallaxMiddle { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankcyberstation/CS11_Parallax_Tokens.png); } body.clank.inSpace.cyberStation main .parallaxFront { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankcyberstation/CS11_Parallax_Front.png); } body.clank.inSpace.cyberStation main .footerLeftFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankcyberstation/CS11-Corner_L.png); } body.clank.inSpace.cyberStation main .footerRightFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankcyberstation/CS11-Corner_R.png); height: 700px; } body.clank.inSpace.cyberStation main .topStones { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CIS_Apoc_HeroDivider.png); } body.clank.inSpace.cyberStation main .mainContentDiv { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CIS_Apoc_backgroundTile.png); } body.clank.inSpace.cyberStation main .mainContentDiv .mainContentStart .centerBox { top: 0; } body.clank.inSpace.cyberStation main .mainContentDiv .mainContentStart .centerBox section.gameContent .gameBoard_display.board { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankcyberstation/CS11_BoardAndCardDeck.png); background-position: right; background-size: contain; } body.clank.inSpace.cyberStation main .mainContentDiv .mainContentStart .centerBox section.gameContent .gameBoard_display .CommanderPreon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankcyberstation/CIS_Cyber_Station_11_Card_3.png) !important; } body.clank.inSpace.cyberStation main .mainContentDiv .mainContentStart .centerBox section.gameContent .gameBoard_display .ParanormalInvestigators { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankcyberstation/CIS_Cyber_Station_11_Card_16.png) !important; } body.clank.inSpace.cyberStation main .mainContentDiv .mainContentStart .centerBox section.gameContent .gameBoard_display .DataLink { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clankcyberstation/CIS_Cyber_Station_11_Card_29.png) !important; } body { font-family: "Open Sans", sans-serif; color: #ffffff; background: #000000; font-size: 1.05em; } body ul ul { font-size: 1em; } .email-error { color: #fff; text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; font-weight: bold; font-size: 20px; } #back-to-top { position: fixed; bottom: 40px; right: 40px; z-index: 999; text-align: center; line-height: 30px; color: #444444; cursor: pointer; border: 0; border-radius: 6px; text-decoration: none; transition: opacity 0.2s ease-out; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -295px; width: 50px; height: 50px; opacity: 0; } #back-to-top.show { opacity: 1; } @media screen and (max-width: 414px) { #back-to-top.show { display: none !important; } } #back-to-top:hover { box-shadow: 0 4px 26px 5px rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19); } @media screen and (max-width: 420px) { .hidden-tiny { display: none !important; } } .scrollLock { overflow: hidden !important; } .custom-file-upload { margin: 10px 0 20px 0; } main { position: relative; } main.privacyPage { margin-bottom: 120px; z-index: 99; } main.privacyPage .pageTop { background: #06080b; position: relative; z-index: 2; } main.privacyPage .pageTop h1 { margin-bottom: 20px; } main.privacyPage .pageTop .socialList { float: right; margin-top: 30px; } main.privacyPage .pageTop .socialList ul { margin: 0 auto; padding: 0; } main.privacyPage .pageTop .socialList ul li { list-style-type: none; padding: 0 10px; float: left; } main.privacyPage .pageTop .socialList ul li a { font-weight: 600; color: #fff; font-size: 1.2em; display: inline-block; } main.privacyPage .pageTop .socialList ul li a.prt { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/print.png) 0 0 no-repeat; background-size: contain; width: 25px; height: 25px; } main.privacyPage .pageTop .socialList ul li a.prt:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/print.png) 0 0 no-repeat; background-size: contain; width: 25px; height: 25px; } main.privacyPage .pageTop .socialList ul li a.fb { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -48px; width: 25px; height: 25px; } main.privacyPage .pageTop .socialList ul li a.fb:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -73px; width: 25px; height: 25px; } main.privacyPage .pageTop .socialList ul li a.tw { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px 0px; width: 29px; height: 24px; } main.privacyPage .pageTop .socialList ul li a.tw:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -24px; width: 29px; height: 24px; } main.privacyPage .pageContent .container .row .content { position: relative; clear: both; padding: 20px; } main.privacyPage .pageContent .container .row .content h2 { color: #b9d5ff; font-style: italic; } main.privacyPage .pageContent .container .row .content p { font-size: 1.4em; line-height: 1.5em; } main.privacyPage .pageContent .container .row .content ul li, main.privacyPage .pageContent .container .row .content ol li { font-size: 1.4em; line-height: 1.5em; margin-bottom: 10px; } main.gamesPage { margin-bottom: 120px; z-index: 99; } main.gamesPage .dwd-heading { display: table; width: 100%; } main.gamesPage .dwd-heading .dwd-name, main.gamesPage .dwd-heading .socialIcons { display: table-cell; } main.gamesPage .dwd-heading .dwd-name { width: 75%; } @media screen and (max-width: 767px) { main.gamesPage .dwd-heading .dwd-name { width: 100%; } } main.gamesPage .dwd-heading .dwd-name h1 { margin: 1em 0; } @media screen and (max-width: 420px) { main.gamesPage .dwd-heading .dwd-name h1 { font-size: 24px; } } main.gamesPage .dwd-heading .socialIcons { text-align: right; } @media screen and (max-width: 767px) { main.gamesPage .dwd-heading .socialIcons { display: none; } } main.gamesPage .pageTop { background: #06080b; position: relative; z-index: 2; } main.gamesPage .gameGrid { width: 25%; position: relative; padding: 0 15px; float: left; } @media screen and (max-width: 992px) { main.gamesPage .gameGrid { width: 33.3333333%; } } @media screen and (max-width: 767px) { main.gamesPage .gameGrid { width: 50%; } } @media screen and (max-width: 420px) { main.gamesPage .gameGrid { width: 100%; } } main.gamesPage .gameGrid a { text-decoration: none; color: #727C8D; } main.gamesPage .gameGrid a:hover { color: #fff; } main.gamesPage .gameGrid a img { width: 100%; } main.gamesPage .gameGrid a img:hover { opacity: .8; } main.pageNotFound { padding-bottom: 100px; } main.pageNotFound .four0fourCont { width: 100%; bottom: 0; text-align: center; } main.pageNotFound .four0fourCont h2 { color: #8fc2de; font-weight: 600; font-size: 5em; } main.pageNotFound .four0fourCont p { color: #4f6d7e; font-size: 1.7em; } main .backDfire1 { /* front / position: absolute; bottom: 0; width: 100%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/DigitalFire1.png) center bottom no-repeat transparent; } @media screen and (max-width: 414px) { main .backDfire1 { display: none !important; } } main .backDfire2 { / back / position: absolute; bottom: 0; width: 100%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/DigitalFire2.png) center bottom no-repeat transparent; } @media screen and (max-width: 414px) { main .backDfire2 { display: none !important; } } .clank header nav.navbar-dwd.wintertheme::after { top: 17em; } .clankAI header nav.navbar-dwd.wintertheme::after, .articlesPage header nav.navbar-dwd.wintertheme::after { display: none; } .snow { position: absolute; background-size: cover; pointer-events: none; z-index: 2031; } .snow.header-snow-01 { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/themes/wintertheme/Header_Snowdrift_01.png); width: 284px; height: 42px; top: 3%; } @media screen and (max-width: 1521px) { .snow.header-snow-01 { display: none; } } .snow.header-snow-02 { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/themes/wintertheme/Header_Snowdrift_03.png); width: 213px; height: 46px; top: 2.3%; right: 0em; } @media screen and (max-width: 1521px) { .snow.header-snow-02 { display: none; } } header nav.navbar-dwd { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/HeaderBar_H_60px.png) top left repeat-x; border-bottom: 3px solid #000; border-radius: 0; z-index: 2030; margin-bottom: 0; } header nav.navbar-dwd.wintertheme::after { content: ""; position: absolute; z-index: 10; top: 4.5em; width: 100%; height: 80px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/themes/wintertheme/DWD_StringLights_Static.png); background-size: contain; background-repeat: repeat no-repeat; pointer-events: none; } header nav.navbar-dwd .navbar-dwd-logo { display: block; margin-left: 1.5em; transform: translateY(50%); max-width: 12em; } header nav.navbar-dwd .navbar-toggle .icon-bar { background: #96A1A6; } header nav.navbar-dwd .navbar-collapse { margin-top: .4em; } header nav.navbar-dwd .navbar-collapse ul.nav .open a:hover, header nav.navbar-dwd .navbar-collapse ul.nav .open a:focus, header nav.navbar-dwd .navbar-collapse ul.nav .open a:active { background-color: transparent; color: #ffffff; } header nav.navbar-dwd .navbar-collapse ul.nav li.dropdown { position: inherit; } header nav.navbar-dwd .navbar-collapse ul.nav li.dropdown .caret { margin-bottom: 5px; } header nav.navbar-dwd .navbar-collapse ul.nav li a { color: #96A1A6; font-weight: 600; font-size: 1.5em; text-transform: uppercase; } header nav.navbar-dwd .navbar-collapse ul.nav li a:hover, header nav.navbar-dwd .navbar-collapse ul.nav li a:focus, header nav.navbar-dwd .navbar-collapse ul.nav li a:active { background-color: transparent; color: #ffffff; } header .dropdown-games { background-color: #000000; width: 100%; z-index: 9999; padding-bottom: .5em; } @media screen and (min-width: 767px) { header .dropdown-games { position: absolute; left: 0; } } header .dropdown-games .games-container { width: 90%; margin: 0 auto; } header .dropdown-games ul { padding: 0; overflow: auto; list-style-type: none; width: 100%; } header .dropdown-games ul li { display: inline-block; } @media screen and (max-width: 420px) { header .dropdown-games ul li:not(.moreGames) { width: 49%; } } header .dropdown-games ul li.moreGames { display: block; } @media screen and (max-width: 420px) { header .dropdown-games ul li.moreGames { width: 100%; } } header .dropdown-games ul li.moreGames a { padding: 1em 0; font-size: 1.5em; font-weight: 600; width: 100%; display: block; text-decoration: none; color: #727C8D; text-align: center; text-transform: uppercase; font-weight: 600; font-family: "Open Sans", sans-serif; } header .dropdown-games ul li.moreGames a:hover, header .dropdown-games ul li.moreGames a:active { color: #fff; } @media screen and (max-width: 992px) { header .dropdown-games ul li.extra { display: none; } } header .dropdown-games ul li a img, header .dropdown-games ul li a .gameMenuHover { height: 108px; } header .dropdown-games ul li a img { width: 100%; } header .dropdown-games ul li a .gameMenuHover { margin-top: -.4em; position: absolute; width: 170px; } header .dropdown-games ul li a .gameMenuHover:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_nav.png); background-repeat: no-repeat; background-position: 0px -286px; } @media screen and (max-width: 420px) { header .dropdown-games ul li a .gameMenuHover { display: none; } } header .dropdown-games ul li:nth-child(1) { -webkit-animation-delay: 0ms; -moz-animation-delay: 0ms; -o-animation-delay: 0ms; animation-delay: 0ms; animation-duration: 0.25s; } header .dropdown-games ul li:nth-child(2) { -webkit-animation-delay: 50ms; -moz-animation-delay: 50ms; -o-animation-delay: 50ms; animation-delay: 50ms; animation-duration: 0.25s; } header .dropdown-games ul li:nth-child(3) { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; -o-animation-delay: 100ms; animation-delay: 100ms; animation-duration: 0.25s; } header .dropdown-games ul li:nth-child(4) { -webkit-animation-delay: 150ms; -moz-animation-delay: 150ms; -o-animation-delay: 150ms; animation-delay: 150ms; animation-duration: 0.25s; } header .dropdown-games ul li:nth-child(5) { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms; animation-duration: 0.25s; } header .dropdown-games ul li:nth-child(6) { -webkit-animation-delay: 250ms; -moz-animation-delay: 250ms; -o-animation-delay: 250ms; animation-delay: 250ms; animation-duration: 0.25s; } header .dropdown-games ul li:nth-child(7) { -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; animation-duration: 0.25s; } header .dropdown-games ul li:nth-child(8) { -webkit-animation-delay: 350ms; -moz-animation-delay: 350ms; -o-animation-delay: 350ms; animation-delay: 350ms; animation-duration: 0.25s; } header .dropdown-games ul li:nth-child(9) { -webkit-animation-delay: 400ms; -moz-animation-delay: 400ms; -o-animation-delay: 400ms; animation-delay: 400ms; animation-duration: 0.25s; } header .dropdown-games ul li:nth-child(10) { -webkit-animation-delay: 450ms; -moz-animation-delay: 450ms; -o-animation-delay: 450ms; animation-delay: 450ms; animation-duration: 0.25s; } @media (max-width: 1299px) { .navbar-nav { margin: 7.5px -15px; } } @media (max-width: 1070px) { .navbar-header { float: none; } .navbar-left, .navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse { display: none !important; } .navbar-nav { float: none !important; margin-top: 7.5px; } .navbar-nav .open .dropdown-menu { float: none; width: 110%; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; right: 0; margin-right: -1px; } } @media (max-width: 1070px) and (max-width: 767px) { .navbar-nav .open .dropdown-menu { position: static; width: auto; margin-right: 0px; } } @media (max-width: 1070px) { .navbar-nav > li { float: none; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; } .collapse.in { display: block !important; } } header nav.navbar-eternal { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHX_Header.png) top center repeat; border-bottom: 3px solid #000; border-radius: 0; } header nav.navbar-eternal .container { padding: 0; } header nav.navbar-eternal .container .navbar-header { margin: 0; } header nav.navbar-eternal .navbar-toggle .icon-bar { background: #727c8d; } header nav.navbar-eternal .navbar-dwd-logo { display: block; } header nav.navbar-eternal .navbar-collapse { margin: 0; } @media screen and (max-width: 425px) { header nav.navbar-eternal .navbar-collapse { background: #1C1E2C; } } header nav.navbar-eternal .navbar-collapse ul.nav .open > a, header nav.navbar-eternal .navbar-collapse ul.nav .nav .open > a:focus, header nav.navbar-eternal .navbar-collapse ul.nav .nav .open > a:hover { background-color: transparent; } header nav.navbar-eternal .navbar-collapse ul.nav li a { font-family: 'Cinzel', serif; } header nav.navbar-eternal .navbar-collapse ul.nav li a:hover { background-color: transparent; } header nav.navbar-eternal .navbar-collapse ul.nav.navbar-right .dropdown ul.dropdown-menu { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHXwebDropdown_bottomBackground.png) bottom left no-repeat #0a0910; right: auto; } @media screen and (max-width: 1420px) { header nav.navbar-eternal .navbar-collapse ul.nav.navbar-right .dropdown ul.dropdown-menu { right: 0; } } header nav.navbar-eternal .navbar-collapse ul.nav.navbar-right .dropdown ul.dropdown-menu li { text-align: right; padding: 4px 0 5px 0; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHXwebDropdown_divider.png) bottom left repeat-x; } header nav.navbar-eternal .navbar-collapse ul.nav.navbar-right .dropdown ul.dropdown-menu li:last-child { background: none; } header nav.navbar-eternal .navbar-collapse ul.nav.navbar-right .dropdown ul.dropdown-menu li a { color: #727C8D; font-size: 1.2em; } header nav.navbar-eternal .navbar-collapse ul.nav.navbar-right .dropdown ul.dropdown-menu li a:hover { color: #fff; } header nav.navbar-eternal .navbar-collapse ul .moreGames a { text-transform: uppercase; font-weight: 600; font-family: "Open Sans", sans-serif; } .alpha-games { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) top left repeat; position: absolute; z-index: 9999; animation-duration: 0.3s; width: 100%; } .logoFooter { margin: 1.5em 0; } .logoFooter .renegade, .logoFooter .dwd, .logoFooter .foxtrot, .logoFooter .penny-arcade { width: 110px; height: 150px; } .logoFooter .dwd { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/DWD_LargerSquareLogo.png); background-size: contain; background-repeat: no-repeat; } .logoFooter .renegade { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0px -1136px; } .logoFooter .penny-arcade { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/pa_logo_white.png); background-size: contain; background-repeat: no-repeat; margin-top: 5em; } .logoFooter .foxtrot { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0px -986px; } footer { position: relative; font-family: "Open Sans", sans-serif; } @media print { footer { display: none; } } footer .inFront { z-index: 100; pointer-events: all; } footer .dwd { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/spriteFooters/DWD1_LargerFooterLogo.png); background-size: cover; background-repeat: no-repeat; } footer .links a { font-weight: 600; color: #96A1A6; font-size: 1.5em; text-transform: uppercase; padding: 0 5px; } footer .links a:hover { text-decoration: none; color: #fff; } footer .links .sep { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/footerLinkDivider.png) center center no-repeat; padding: 10px; } @media screen and (max-width: 1203px) { footer .links .sep { display: none; } } footer .copy { color: #96A1A6; padding: 10px 0; font-family: 'Arial', sans-serif; } footer.full { position: relative; z-index: 100; } footer.full .figuresCont { width: 100%; height: 675px; position: absolute; overflow: hidden; top: -185px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/Footer_CenterGlow.png) bottom center no-repeat; background-size: 100% 500px; pointer-events: none; } @media screen and (max-width: 1080px) { footer.full .figuresCont { top: 0; height: 337px; } } footer.full .figuresCont .container { position: absolute; bottom: 0; width: 100%; } footer.full .figuresCont .socialIcons { margin-top: 1.5em; } footer.full .figuresCont img { width: 135px; } @media screen and (max-width: 640px) { footer.full .figuresCont img { width: 80px; } } footer.full .figuresCont .left1, footer.full .figuresCont .left2, footer.full .figuresCont .right1, footer.full .figuresCont .right2 { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_footers.png); position: absolute; bottom: 0; } footer.full .figuresCont .left1 { background-position: 0px -1407px; width: 402px; height: 631px; left: 0; z-index: 10; } @media screen and (max-width: 1530px) { footer.full .figuresCont .left1 { left: -999px; } } footer.full .figuresCont .left1.wintertheme { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/themes/wintertheme/Footer_Yeti_05_R.png); background-size: contain; background-position: inherit; width: 400px; height: 400px; } footer.full .figuresCont .left2 { background-position: 0px -609px; width: 297px; height: 348px; left: 351px; z-index: 9; } @media screen and (max-width: 1530px) { footer.full .figuresCont .left2 { left: 0; } } @media screen and (max-width: 1080px) { footer.full .figuresCont .left2 { left: -999px; } } footer.full .figuresCont .left2.wintertheme { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/themes/wintertheme/Footer_Yeti_02_R.png); background-size: contain; background-position: inherit; width: 350px; height: 350px; } footer.full .figuresCont .right1 { background-position: 0px -957px; width: 423px; height: 450px; right: 0; z-index: 11; } @media screen and (max-width: 1080px) { footer.full .figuresCont .right1 { right: -999px; } } footer.full .figuresCont .right1.wintertheme { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/themes/wintertheme/Footer_Yeti_01.png); background-size: contain; background-position: inherit; width: 400px; height: 400px; } footer.full .figuresCont .right2 { background-position: 0px -289px; width: 431px; height: 320px; right: 220px; z-index: 10; } @media screen and (max-width: 1530px) { footer.full .figuresCont .right2 { right: -999px; } } footer.full .figuresCont .right2.wintertheme { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/themes/wintertheme/Footer_Yeti_04.png); background-size: contain; width: 431px; height: 320px; } footer.short { padding-top: 12px; } footer.short .logo { display: inline-block; } @media screen and (max-width: 992px) { footer.short .logo { width: 100%; } } @media screen and (max-width: 425px) { footer.short .logo { display: block; } } footer.short .logo img { height: auto; width: 70px; } @media screen and (max-width: 992px) { footer.short .logo img { margin: 0 auto; display: block; } } footer.short .links { padding: 0 20px; margin-top: 50px; position: absolute; height: 87px; display: inline; overflow: auto; } @media screen and (max-width: 992px) { footer.short .links { position: relative; display: block; margin: 10px auto; height: 60px; text-align: center; } } @media screen and (max-width: 420px) { footer.short .links { height: inherit; } } @media screen and (max-width: 420px) { footer.short .links .sep { display: none; } } footer.short .copyright { text-align: right; } @media screen and (max-width: 992px) and (min-width: 767px) { footer.short .copyright { position: relative; height: 120px; } footer.short .copyright .socialIcons, footer.short .copyright .copy { position: absolute; right: 0; } footer.short .copyright .copy { bottom: 0; } } @media screen and (max-width: 767px) { footer.short .copyright { text-align: center; } } body.lanternsPage .floatingMessageTopLeft { width: 350px; position: fixed; top: 70px; left: 0; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) center center repeat transparent; z-index: 999; } body.lanternsPage .floatingMessageTopLeft .expansionLantern { margin: 10px auto; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0px -1286px; width: 170px; height: 157px; } body.lanternsPage .floatingMessageTopLeft p { font-size: 1.7em; font-family: 'Sriracha', cursive; text-align: center; padding: 0 45px 10px 45px; } @media screen and (max-width: 1346px) { body.lanternsPage .floatingMessageTopLeft { display: none; } } body.lanternsPage .banner { overflow: hidden; } @media screen and (max-width: 420px) { body.lanternsPage .banner { height: 100% !important; } } body.lanternsPage .banner .video-container .poster { text-align: center; margin: 0 auto; width: 100%; height: 100%; background-position: center -53px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/ZENheroBanner.jpg); display: block; } @media screen and (max-width: 640px) { body.lanternsPage .banner .video-container .poster { height: 550px; } } body.lanternsPage .banner .title-container .contentPosition { position: relative; height: 100%; } body.lanternsPage .banner .title-container .contentPosition .logo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/spriteSrc/ZENlogo.png) center center no-repeat; height: 354px; width: 1200px; } @media screen and (max-width: 1200px) { body.lanternsPage .banner .title-container .contentPosition .logo { width: 100%; } } @media screen and (max-width: 767px) { body.lanternsPage .banner .title-container .contentPosition .logo { background-size: 120%; } } @media screen and (max-width: 420px) { body.lanternsPage .banner .title-container .contentPosition .logo { height: 140px; } } body.lanternsPage .banner .title-container .contentPosition .awards { float: right; margin-top: 4em; } @media screen and (max-width: 1200px) { body.lanternsPage .banner .title-container .contentPosition .awards { display: none; } } body.lanternsPage .banner .title-container .contentPosition .awards .awards1, body.lanternsPage .banner .title-container .contentPosition .awards .awards2 { width: 144px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position-x: 0px; } body.lanternsPage .banner .title-container .contentPosition .awards .awards1 { top: 70px; background-position-y: -593px; height: 98px; } body.lanternsPage .banner .title-container .contentPosition .awards .awards2 { top: 185px; background-position-y: -690px; height: 146px; } body.lanternsPage .banner .title-container .contentPosition .appStores { margin-top: 25em; } @media screen and (max-width: 640px) { body.lanternsPage .banner .title-container .contentPosition .appStores { display: block; } } body.lanternsPage main { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/waterSidesTileBrightTop.jpg) 0 0 repeat-x #0c2635; background-position-y: -285px; z-index: 99; } body.lanternsPage main .container { transition: all .3s; position: relative; } body.lanternsPage main .backLanterns, body.lanternsPage main .frontLanterns { position: absolute; bottom: 0; width: 100%; height: 100%; } @media screen and (max-width: 767px) { body.lanternsPage main .backLanterns, body.lanternsPage main .frontLanterns { display: none; } } body.lanternsPage main .backLanterns { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/parallax_Lanterns_Back2.png) center bottom no-repeat transparent; } body.lanternsPage main .frontLanterns { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/parallax_Lanterns_Front2.png) center bottom no-repeat transparent; } body.lanternsPage main .cornerLeftLanterns, body.lanternsPage main .cornerRightLanterns { position: absolute; bottom: 76px; z-index: 999; transition: all .5s; } body.lanternsPage main .cornerLeftLanterns { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/Lanterns_BottomLeft2.png) top left no-repeat; left: 250px; width: 424px; height: 430px; } @media screen and (max-width: 2000px) { body.lanternsPage main .cornerLeftLanterns { left: 60px; } } @media screen and (max-width: 1600px) { body.lanternsPage main .cornerLeftLanterns { left: -100px; } } @media screen and (max-width: 1200px) { body.lanternsPage main .cornerLeftLanterns { left: -500px; } } body.lanternsPage main .cornerRightLanterns { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/emperorScroll_BottomRight2.png) top left no-repeat; right: 200px; width: 488px; height: 375px; } @media screen and (max-width: 2000px) { body.lanternsPage main .cornerRightLanterns { right: 0; } } @media screen and (max-width: 1600px) { body.lanternsPage main .cornerRightLanterns { width: 320px; } } @media screen and (max-width: 1200px) { body.lanternsPage main .cornerRightLanterns { width: 0; } } body.lanternsPage main .topContainer, body.lanternsPage main .bottomContainer { position: relative; } body.lanternsPage main .topContainer .dividerContent, body.lanternsPage main .bottomContainer .dividerContent { position: relative; width: 100%; background-clip: content-box; text-align: center; } body.lanternsPage main .topContainer .dividerContent, body.lanternsPage main .topContainer .dividerContent .capLeft, body.lanternsPage main .topContainer .dividerContent .capRight, body.lanternsPage main .bottomContainer .dividerContent, body.lanternsPage main .bottomContainer .dividerContent .capLeft, body.lanternsPage main .bottomContainer .dividerContent .capRight { height: 71px; } body.lanternsPage main .topContainer .dividerContent .capLeft, body.lanternsPage main .topContainer .dividerContent .capRight, body.lanternsPage main .bottomContainer .dividerContent .capLeft, body.lanternsPage main .bottomContainer .dividerContent .capRight { position: absolute; top: 0; width: 145px; display: inline-block; } body.lanternsPage main .topContainer .dividerContent .capLeft, body.lanternsPage main .bottomContainer .dividerContent .capLeft { left: 0; } body.lanternsPage main .topContainer .dividerContent .capRight, body.lanternsPage main .bottomContainer .dividerContent .capRight { right: 0; } body.lanternsPage main .topContainer .dividerContent { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/mobile_ZENScrollTopM.png) 0 0 repeat-x; } body.lanternsPage main .topContainer .capLeft { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/mobile_ZENScrollTopL.png) 0 1px no-repeat; } body.lanternsPage main .topContainer .capRight { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/mobile_ZENScrollTopR.png) 0 0 no-repeat; } body.lanternsPage main .bottomContainer .dividerContent { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/mobile_ZENScrollBottomM.png) 0 -1px repeat-x; } body.lanternsPage main .bottomContainer .capLeft { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/mobile_ZENScrollBottomL.png) 0 -1px no-repeat; } body.lanternsPage main .bottomContainer .capRight { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/mobile_ZENScrollBottomR.png) 0 -1px no-repeat; } body.lanternsPage main .contentContainer { position: relative; background: #CCB492; margin: 0; padding: 0; } body.lanternsPage main .contentContainer .lnews h1 { color: #383224; font-weight: 600; padding-left: 20px; } body.lanternsPage main .contentContainer .lnews h1 .sm_link { color: #fff; } body.lanternsPage main .contentContainer .lnews .container { width: 100%; margin-bottom: 2em; } body.lanternsPage main .contentContainer .lnews .blog-posts .bp-content { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/ZENNewsParchment.png) bottom left no-repeat; background-size: contain; height: 330px; } body.lanternsPage main .contentContainer .lnews .blog-posts .bp-content .bpImg { height: 218px; position: relative; } body.lanternsPage main .contentContainer .lnews .blog-posts .bp-content .bpImg .bp-title { margin: 0; width: 100%; bottom: 0; position: absolute; } body.lanternsPage main .contentContainer .lnews .blog-posts .bp-content .bpImg .bp-title h2 { color: #fff; font-size: 1.6em; font-weight: 600; margin: 0; padding: 10px; vertical-align: middle; background-color: rgba(0, 0, 0, 0.7); height: 56px; width: 100%; font-family: "Open Sans", sans-serif; color: #fff; } body.lanternsPage main .contentContainer .lnews .blog-posts .bp-content .bpImg .bp-title h2:hover { text-decoration: none; } body.lanternsPage main .contentContainer .lnews .blog-posts .bp-content p { color: #383224; font-weight: 600; font-family: "Open Sans", sans-serif; font-size: 1.2em; padding: 15px 10px; } body.lanternsPage main .contentContainer .lnews .blog-posts .bp-content .bp-dates { font-style: italic; padding: 0 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; position: absolute; bottom: 10px; color: #fff; } @media screen and (max-width: 360px) { body.lanternsPage main .contentContainer .lnews .blog-posts .bp-content p, body.lanternsPage main .contentContainer .lnews .blog-posts .bp-content .bp-dates { display: none; } body.lanternsPage main .contentContainer .lnews .blog-posts .bp-content { background-image: none; height: inherit; } } body.lanternsPage main .contentContainer .lanternsLine { position: relative; height: 24px; width: 95%; margin: 0 auto; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/ScrollDivider.png) top left no-repeat; background-size: contain; } @media screen and (max-width: 425px) { body.lanternsPage main .contentContainer .lanternsLine { background-size: 200%; background-position: center; width: 100%; } } body.lanternsPage main .contentContainer .lanternVideo { position: relative; margin: 25px auto; } body.lanternsPage main .contentContainer .lanternsGameContent { position: relative; padding-top: 10px; } body.lanternsPage main .contentContainer .lanternsGameContent .lanternsBox { border: 3px dotted #000; border-radius: 5px; padding: 5em; margin-top: 5em; margin-bottom: 5em; } @media screen and (max-width: 1200px) { body.lanternsPage main .contentContainer .lanternsGameContent .lanternsBox { padding-right: 3em; } } @media screen and (max-width: 992px) { body.lanternsPage main .contentContainer .lanternsGameContent .lanternsBox { margin-bottom: 0; margin-top: 2em; } } @media screen and (max-width: 640px) { body.lanternsPage main .contentContainer .lanternsGameContent .lanternsBox { margin-top: 0; padding: 1em; } } body.lanternsPage main .contentContainer .lanternsGameContent .lanternsBox img { position: absolute; } body.lanternsPage main .contentContainer .lanternsGameContent .lanternsBox img.box { top: -60px; left: 20px; width: 250px; } @media screen and (max-width: 992px) { body.lanternsPage main .contentContainer .lanternsGameContent .lanternsBox img.box { top: -30px; width: 200px; } } @media screen and (max-width: 640px) { body.lanternsPage main .contentContainer .lanternsGameContent .lanternsBox img.box { display: none; } } body.lanternsPage main .contentContainer .lanternsGameContent .lanternsBox img.icon { top: 50px; left: 270px; } @media screen and (max-width: 1200px) { body.lanternsPage main .contentContainer .lanternsGameContent .lanternsBox img.icon { display: none; } } body.lanternsPage main .contentContainer .lanternsGameContent .lanternsBox p { font-size: 1.6em; font-family: 'Asul', sans-serif; text-align: center; position: inherit; width: 60%; margin-left: 40%; padding: .5em; color: #383224; font-family: 'Sriracha', cursive; font-size: 1.5em; } @media screen and (max-width: 640px) { body.lanternsPage main .contentContainer .lanternsGameContent .lanternsBox p { width: 100%; margin-left: 0; } } body.lanternsPage main .contentContainer .lanternsGameContent .appStores { display: inline-block; } @media screen and (max-width: 420px) { body.lanternsPage main .logoFooter .renegade, body.lanternsPage main .logoFooter .dwd, body.lanternsPage main .logoFooter .foxtrot { width: 100%; height: 79px; } } body.lanternsPage main .logoFooter .renegade { float: right; } @media screen and (max-width: 420px) { body.lanternsPage main .logoFooter .renegade { background-position: 0 -875px; background-size: 700px; } } body.lanternsPage main .logoFooter .dwd { margin: 0 auto; } @media screen and (max-width: 420px) { body.lanternsPage main .logoFooter .dwd { background-position: 11px -524px; background-size: 576px; } } body.lanternsPage main .logoFooter .foxtrot { float: left; } @media screen and (max-width: 420px) { body.lanternsPage main .logoFooter .foxtrot { background-position: 0 546px; background-size: 650px; } } body.lanternsPage.passwordRecovery .lanternsBanner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/ZENheroBanner.jpg) center center no-repeat; } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition { position: relative; height: 100%; } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .lanternsLogo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/spriteSrc/ZENlogo.png) center center no-repeat; width: 100%; background-size: 65%; } @media screen and (max-width: 767px) { body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .lanternsLogo { background-size: 100%; } } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameForms { position: relative; width: 500px; margin: 78px auto; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) center center repeat transparent; border-radius: 5px; padding: 25px; } @media screen and (max-width: 425px) { body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameForms { width: auto; } } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameForms h2 { margin-top: 0; margin-bottom: 20px; } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameForms .form-group { position: relative; } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameForms .form-group .errorRedCircle { display: none; } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameForms .form-group .form-control { height: 42px; } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameForms .form-group.has-error .errorRedCircle { display: inline-block; width: 30px; height: 30px; background: #F02425; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; font-size: 2.2em; line-height: 1.3em; text-align: center; position: absolute; right: 6px; top: 6px; } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameForms .form-group.has-error .form-control { border: 3px solid #F02425; } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameForms .be_error { margin: 20px 0; } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameForms .be_error ul { padding: 0; list-style-type: none; } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameForms .be_error ul li { font-size: 1.6em; color: #F02425; } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameForms .be_error span { color: #fff; } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameSucess { display: none; position: relative; width: 500px; margin: 178px auto 0 auto; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) center center repeat transparent; border-radius: 5px; padding: 25px; } @media screen and (max-width: 425px) { body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameSucess { width: auto; } } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameSucess h2 { margin-top: 0; margin-bottom: 20px; color: #8AD5B6; } body.lanternsPage.passwordRecovery .lanternsBanner .title-container .contentPosition .frameSucess .msg_ren { color: #fff; } body.lanternsPage.emailUnsub .lanternsBanner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/ZENheroBanner.jpg) center center no-repeat; background-size: cover; height: 861px; } @media screen and (max-width: 425px) { body.lanternsPage.emailUnsub .lanternsBanner { height: 640px; } } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition { position: relative; height: 100%; } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .lanternsLogo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/spriteSrc/ZENlogo.png) center center no-repeat; width: 100%; background-size: 65%; } @media screen and (max-width: 425px) { body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .lanternsLogo { background-size: 100%; } } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameForms { position: relative; width: 600px; margin: 280px auto; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) center center repeat transparent; border-radius: 5px; padding: 25px; } @media screen and (max-width: 425px) { body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameForms { width: auto; margin-top: 20px; } } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameForms input { text-align: center; } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameForms h2 { margin-top: 0; margin-bottom: 20px; } @media screen and (max-width: 425px) { body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameForms h2 { font-size: 2em; } } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameForms .form-group { position: relative; } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameForms .form-group .errorRedCircle { display: none; } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameForms .form-group .form-control { height: 42px; } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameForms .form-group.has-error .errorRedCircle { display: inline-block; width: 30px; height: 30px; background: #F02425; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; font-size: 2.2em; line-height: 1.3em; text-align: center; position: absolute; right: 6px; top: 6px; } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameForms .form-group.has-error .form-control { border: 3px solid #F02425; } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameForms .be_error { margin: 20px 0; } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameForms .be_error ul { list-style-type: none; } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameForms .be_error ul li { color: #F02425; } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameForms .be_error span { color: #fff; } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameSucess { display: none; position: relative; width: 500px; margin: 178px auto 0 auto; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) center center repeat transparent; border-radius: 5px; padding: 25px; } @media screen and (max-width: 425px) { body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameSucess { width: auto; } } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameSucess h2 { margin-top: 0; margin-bottom: 20px; color: #8AD5B6; } body.lanternsPage.emailUnsub .lanternsBanner .title-container .contentPosition .frameSucess .msg_ren { color: #fff; } body.lorPage .banner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/LORcompanionApp/LOR_heroBanner.jpg) center center no-repeat; background-position-y: 0; } @media screen and (max-width: 420px) { body.lorPage .banner { height: 550px !important; } } body.lorPage .banner .phoneCont { padding: 4em 0; } body.lorPage .banner .phoneCont .phone, body.lorPage .banner .phoneCont .mobile { margin: 0 auto; } body.lorPage .banner .phoneCont .phone { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/LORcompanionApp/LOR_webPhone.png) center center no-repeat; width: 649px; height: 324px; margin: 0 auto; position: relative; } @media screen and (max-width: 767px) { body.lorPage .banner .phoneCont .phone { display: none; } } body.lorPage .banner .phoneCont .phone .screenshot { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/LORcompanionApp/LOR_screenshot1_sm.jpg) center center no-repeat; background-size: contain; width: 501px; height: 282px; position: absolute; top: 21px; left: 72px; border-radius: 6px; } body.lorPage .banner .phoneCont .mobile { display: none; width: 100%; padding: 0 2em; } @media screen and (max-width: 767px) { body.lorPage .banner .phoneCont .mobile { display: block; } } body.lorPage .banner .phoneCont .description { font-size: 2em; text-align: center; margin: 1em 0; } @media screen and (max-width: 640px) { body.lorPage .banner .phoneCont .description { padding: 0 2em; } } body.lorPage .banner .phoneCont .lead { font-size: 18px; margin-bottom: 10px; } body.lorPage .lnews h1 { color: #fff; margin-left: 10px; } body.lorPage .lnews h1.alegreya { font-family: 'Alegreya', serif; font-weight: 600; font-size: 3em; } body.lorPage .lnews h1 .sm_link { font-size: 0.4em; font-family: "Open Sans", sans-serif; } body.lorPage .lnews h1 .sm_link:hover { color: #fff; } @media screen and (max-width: 1200px) { body.lorPage .lnews .blog-posts { width: 50%; } body.lorPage .lnews .blog-posts:nth-of-type(2) { padding-right: 0; } body.lorPage .lnews .blog-posts:nth-of-type(3) { display: none; } } @media screen and (max-width: 767px) { body.lorPage .lnews .blog-posts { width: 100%; } body.lorPage .lnews .blog-posts:nth-of-type(2) { display: none; } } body.lorPage .lnews .blog-posts:hover .bp-content h2 { color: #abdeff; } body.lorPage .lnews .blog-posts .bpImg { background-size: cover; background-repeat: no-repeat; height: 220px; width: 350px; transition: all .5s; margin: 1em 2em; position: absolute; } @media screen and (max-width: 992px) { body.lorPage .lnews .blog-posts .bpImg { height: 210px; width: 340px; } } body.lorPage .lnews .blog-posts .bp-content { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/newsCard.png) top left no-repeat; background-size: contain; height: 460px !important; background-color: transparent; position: relative; padding-top: 195px; width: 400px; } body.lorPage .lnews .blog-posts .bp-content .bp-title, body.lorPage .lnews .blog-posts .bp-content p, body.lorPage .lnews .blog-posts .bp-content .bp-dates { padding-right: 3em; padding-left: 3em; } body.lorPage .lnews .blog-posts .bp-content .bp-title { padding-top: 4.25em; height: 80px; } @media screen and (max-width: 992px) { body.lorPage .lnews .blog-posts .bp-content .bp-title { height: 90px; padding-right: 5em; } } body.lorPage .lnews .blog-posts .bp-content h2 { color: #fff; font-size: 1.8em; width: 350px; font-family: 'Alegreya', serif; font-weight: 600; margin: 0; width: 100%; } body.lorPage .lnews .blog-posts .bp-content p { color: #383224; font-weight: 600; text-align: center; font-family: 'Lora', serif; margin: 0; font-size: 1.4em; padding-top: 2em; padding-bottom: 1em; height: 110px; } @media screen and (max-width: 1200px) { body.lorPage .lnews .blog-posts .bp-content p { padding: 2em 3.5em 1em 2.5em; height: 125px; } } @media screen and (max-width: 992px) { body.lorPage .lnews .blog-posts .bp-content p { padding: 1em 3.5em .5em 2em; height: 100px; } } body.lorPage .lnews .blog-posts .bp-content small { text-align: center; color: #383224; display: block; font-family: 'Lora', serif; width: 100%; } body.lorPage .content { background-color: #ccebff; border-radius: 3px; } body.lorPage .content .contentLogo { padding: 2em; } body.lorPage .content .contentLogo .logo, body.lorPage .content .contentLogo .description { width: 49%; display: inline-block; margin: 0; } body.lorPage .content .contentLogo .description { vertical-align: middle; padding: 0 1em; } @media screen and (max-width: 767px) { body.lorPage .content .contentLogo .description { width: 100%; text-align: center; } } @media screen and (max-width: 767px) { body.lorPage .content .contentLogo .logo { width: 100%; } } body.lorPage .content .contentLogo .logo img { width: 100%; padding: 0 1em; max-width: 500px; } @media screen and (max-width: 767px) { body.lorPage .content .contentLogo .logo img { margin: 0 auto; display: block; } } @media screen and (min-width: 769px) { body.lorPage .content .contentLogo .logo.top { display: none; } } @media screen and (max-width: 767px) { body.lorPage .content .contentLogo .logo.bottom { display: none; } } body.lorPage .content .contentLogo .separator { height: 4px; width: 60%; margin: 2em auto; display: block; } body.lorPage .content .contentLogo p { color: black; font-size: 2em; font-family: "LinBiolinum", sans-serif; } body.lorPage .content .contentGallery .separator { height: 4px; width: 90%; margin: 2em auto; display: block; } body.lorPage .content .contentGallery .row { padding: 0 2em; } body.lorPage .content .contentGallery .screenshot { margin: 1em 0; } @media screen and (max-width: 640px) { body.lorPage .content .contentGallery .screenshot { width: 100%; } } body.lorPage .content .contentGallery .screenshot img { width: 100%; height: 100%; margin: 0 auto; } @font-face { font-display: swap; font-family: Gotham; src: url("/fonts/grm/Gotham-Book.otf") format("opentype"); } @font-face { font-display: swap; font-family: Gotham; font-weight: bold; src: url("/fonts/grm/Gotham-Medium.otf") format("opentype"); } @font-face { font-display: swap; font-family: Gotham; font-weight: 100; src: url("/fonts/grm/Gotham-Light.otf") format("opentype"); } body.grmPage { font-family: 'Gotham'; background: black center center !important; } body.grmPage .show-small { display: none; } @media screen and (max-width: 767px) { body.grmPage .show-small { display: inherit; } } body.grmPage .hide-small { display: inherit; } @media screen and (max-width: 767px) { body.grmPage .hide-small { display: none; } } body.grmPage .banner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/grm/HeaderImage_High.webp) center center no-repeat; background-size: 1920px 632px; height: 632px !important; background-position-y: 0; } @media screen and (max-width: 1200px) { body.grmPage .banner { background-position-x: -600px; } } @media screen and (max-width: 992px) { body.grmPage .banner { background-position-x: -800px; } } @media screen and (max-width: 780px) { body.grmPage .banner { background-position-x: -1000px; } } @media screen and (max-width: 500px) { body.grmPage .banner { background-position-x: -1200px; } } @media screen and (max-width: 767px) { body.grmPage .banner { height: 520px !important; } } @media screen and (max-width: 992px) { body.grmPage .banner .main-logo { height: auto; width: 700px !important; } } @media screen and (max-width: 767px) { body.grmPage .banner .main-logo { width: 500px !important; } } @media screen and (max-width: 420px) { body.grmPage .banner .main-logo { width: 300px !important; } } body.grmPage .headerimg { position: relative; } body.grmPage .headerimg::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100vw; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/grm/HeaderSection-compressed.png) center center no-repeat !important; background-color: transparent; background-size: 100% 100% !important; z-index: -1; } body.grmPage .contentApps { padding-top: 30px; } body.grmPage .contentApps .tag-title { font-size: 26px !important; line-height: 21px; } @media screen and (max-width: 640px) { body.grmPage .contentApps .tag-title { font-size: 18px !important; } } body.grmPage .content .contentLogo .align-right-img { margin-left: 60px; } @media screen and (max-width: 1200px) { body.grmPage .content .contentLogo .align-right-img { margin-left: 0; } } body.grmPage .content .contentLogo .sub-l-title { font-weight: 100; font-size: 24px; text-align: left; } @media screen and (max-width: 992px) { body.grmPage .content .contentLogo .sub-l-title { font-size: 20px; } } body.grmPage .content .contentLogo .sub-r-title { font-weight: 100; font-size: 24px; text-align: right; } @media screen and (max-width: 992px) { body.grmPage .content .contentLogo .sub-r-title { font-size: 20px; } } @media screen and (max-width: 768px) { body.grmPage .content .contentLogo .sub-r-title { text-align: left; } } body.grmPage .content .contentLogo .tag-title { font-size: 36px; text-decoration: underline; color: white; } @media screen and (max-width: 992px) { body.grmPage .content .contentLogo .tag-title { font-size: 26px; } } body.grmPage .content .contentLogo .tag-title:hover { color: #ccebff; text-decoration: none; } body.grmPage .content .contentLogo .logo-header { font-size: 45px; color: white; } body.grmPage .content .contentLogo .logo, body.grmPage .content .contentLogo .description { width: 49%; display: inline-block; margin: 0; } body.grmPage .content .contentLogo .description { vertical-align: middle; padding: 0 1em; } @media screen and (max-width: 767px) { body.grmPage .content .contentLogo .description { width: 100%; text-align: center; } } @media screen and (max-width: 767px) { body.grmPage .content .contentLogo .logo { width: 100%; } } body.grmPage .content .contentLogo .logo img { height: auto; width: 100%; padding: 0 1em; max-width: 500px; } @media screen and (max-width: 767px) { body.grmPage .content .contentLogo .logo img { margin: 0 auto; display: block; } } @media screen and (min-width: 769px) { body.grmPage .content .contentLogo .logo.top { display: none; } } @media screen and (max-width: 769px) { body.grmPage .content .contentLogo .logo.bottom { display: none; } } body.grmPage .content .contentLogo .divider { height: 310px; position: relative; margin-bottom: 10px; } @media screen and (max-width: 992px) { body.grmPage .content .contentLogo .divider { height: 240px; } } @media screen and (max-width: 767px) { body.grmPage .content .contentLogo .divider { height: unset; position: unset; margin-bottom: unset; } } body.grmPage .content .contentLogo .divider::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100vw; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/grm/GameLogoDividers-compressed.png) center center no-repeat !important; background-color: transparent; z-index: -1; } @media screen and (max-width: 767px) { body.grmPage .content .contentLogo .divider::before { display: none; content: none !important; position: unset; top: unset; left: unset; transform: unset; height: unset; width: unset; } } body.grmPage .content .contentLogo .imgpad { padding: 2.7em 0; } body.grmPage .content .logoimg { position: relative; } body.grmPage .content .logoimg::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100vw; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/grm/GameSection.png) center center no-repeat !important; background-size: 100vw 272vh !important; z-index: -1; } @media screen and (max-width: 992px) { body.grmPage .content .logoimg::before { background-size: 100% 100% !important; } } @media (orientation: landscape) { body.grmPage .content .logoimg::before { background-size: 100% 100% !important; } } body.grmPage .content .contentGallery .row { padding: 0 2em; } body.grmPage .content .contentGallery .screenshot { margin: 2em 0; } @media screen and (max-width: 640px) { body.grmPage .content .contentGallery .screenshot { width: 100%; } } @media screen and (max-width: 992px) { body.grmPage .content .contentGallery .screenshot { width: 50%; } } body.grmPage .content .contentGallery .screenshot img { width: 100%; height: 100%; margin: 0 auto; } body.grmPage .content .galleryimg { position: relative; } body.grmPage .content .galleryimg::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100vw; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/grm/GallerySection-compressed.png) center center no-repeat !important; background-size: 100vw 86vh !important; z-index: -1; } @media screen and (max-width: 992px) { body.grmPage .content .galleryimg::before { background-size: 100% 100% !important; } } @media (orientation: landscape) { body.grmPage .content .galleryimg::before { background-size: 100% 100% !important; } } body.grmPage .paddingSection { padding: 4em 0; } body.grmPage .features { padding: 2em 0; margin-top: unset; } @media screen and (max-width: 767px) { body.grmPage .features { padding: 1em 0; } } body.grmPage .features .img-size { width: 140px; height: 120px; } @media screen and (max-width: 1200px) { body.grmPage .features .img-size { width: 100px; height: 80px; } } @media screen and (max-width: 992px) { body.grmPage .features .img-size { width: 80px !important; height: 60px !important; } } body.grmPage .features .mini-title { font-weight: 100; font-size: 22px; } @media screen and (max-width: 1200px) { body.grmPage .features .mini-title { font-size: 15px; } } @media screen and (max-width: 992px) { body.grmPage .features .mini-title { font-size: 12px; } } body.grmPage .features .sub-title { font-weight: 100; font-size: 29px; } @media screen and (max-width: 992px) { body.grmPage .features .sub-title { font-size: 16px; } } body.grmPage .features .icon-title { font-size: 41px; } @media screen and (max-width: 1200px) { body.grmPage .features .icon-title { font-size: 33px; } } @media screen and (max-width: 992px) { body.grmPage .features .icon-title { font-size: 24px; } } @media screen and (max-width: 420px) { body.grmPage .features .icon-title { font-size: 22px; } } body.grmPage .features .tag-title { font-size: 45px; } @media screen and (max-width: 992px) { body.grmPage .features .tag-title { font-size: 26px; } } body.grmPage .features .center { display: block; margin-left: auto; margin-right: auto; width: 50%; } body.grmPage .featuresimg { position: relative; } body.grmPage .featuresimg::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100vw; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/grm/InfoSection-compressed.png) center center no-repeat !important; background-size: 100% 100% !important; z-index: -1; } body.grmPage .img-fluid { width: 110px; height: auto; margin-right: 22px; margin-bottom: 22px; } body.grmPage .col-centered { float: none; margin: 0 auto; } body.grmPage .center-img { display: block; margin-right: auto; margin-left: auto; width: 50%; max-width: 100%; height: auto; } body.grmPage .dune-news-border { background-size: 66%; } @media screen and (max-width: 1200px) { body.grmPage .dune-news-border { background-size: 100%; } } body.grmPage .footerimg { height: 350px; position: relative; } @media screen and (max-width: 720px) { body.grmPage .footerimg { height: 550px; } } @media screen and (max-width: 640px) { body.grmPage .footerimg { height: 600px; } } @media screen and (max-width: 420px) { body.grmPage .footerimg { height: 650px; } } body.grmPage .footerimg::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100vw; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/grm/FooterSection-compressed.png) center center no-repeat !important; background-size: 100% 100% !important; z-index: -1; } body.flgs_page { background-color: transparent; } body.flgs_page .external-form { width: 640px; height: 2070px; } @media screen and (max-width: 767px) { body.flgs_page .external-form { width: 100%; height: 400px; } } body.flgs_page div.formHeader h1 { font-size: 2.5em; color: #ddceeb; font-family: 'LinBiolinum', sans-serif; } body.flgs_page div.formContainer { margin: auto; } body.flgs_page div.formContainer .header { margin-top: 40px; font-size: 24px; font-weight: bold; color: #edf1ff; } body.flgs_page div.formContainer .subheader { font-size: 16px; color: #cedaff; } body.flgs_page div.formContainer input { text-shadow: 0 0 14px #514ba4; color: #ddceeb; text-align: center; height: 34px; margin: 25px auto; padding: 10px 5px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #0A0B1A center center no-repeat; background-size: contain; width: 50%; border: 1px solid #60B0DF; } body.flgs_page div.formContainer input::placeholder { color: #5b5064; } body.flgs_page div.formContainer .form-group.has-error input { border: 2px solid #ffd3d3; box-shadow: 0 0 14px 3.96px #b33636; text-shadow: 0 0 14px #b33636; } body.flgs_page div.formContainer p { color: #ddceeb; font-size: 1.3em; margin-top: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.flgs_page div.formContainer p a { color: #648ad9; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.flgs_page div.formContainer .be_success_recovery { color: green; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; } body.flgs_page div.formContainer .be_success_recovery ul { list-style-type: none; margin: 0; padding: 0; } body.flgs_page div.formContainer .be_success_recovery ul li { text-align: center; } body.flgs_page div.formContainer .be_error { color: red; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; } body.flgs_page div.formContainer .be_error ul { list-style-type: none; margin: 0; padding: 0; } body.flgs_page div.formContainer .be_error ul li { text-align: center; } body.flgs_page div .btn-dwd-redeem { color: #fff; background: url("../assets/dwd/redeem/Redeem_Button.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; margin-bottom: 40px; font-weight: bold; } @media screen and (max-width: 640px) { body.flgs_page div .btn-dwd-redeem { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.flgs_page div .btn-dwd-redeem { padding: 0.5em 3em; } } body.flgs_page div .btn-dwd-redeem:hover { background: url("../assets/dwd/redeem/Redeem_Button.png") no-repeat; background-size: 100% 100%; color: lawngreen; } body.flgs_page .hide-small { display: inherit; } @media screen and (max-width: 1200px) { body.flgs_page .hide-small { display: none; } } body.signup section { background: url("../assets/dwd/login/Login Backer.webp") center center no-repeat; background-size: 45% 100%; } @media screen and (max-width: 1200px) { body.signup section { background: none; } } body.signup .footer-float { position: fixed; bottom: 0; left: 0; right: 0; } @media screen and (max-width: 992px) { body.signup .footer-float { position: unset; bottom: unset; left: unset; right: unset; } } body.signup div.formHeader { z-index: 10; position: relative; } body.signup div.formHeader img { margin: auto; } body.signup div.formHeader h1 { font-size: 2.5em; color: #ddceeb; font-family: 'LinBiolinum', sans-serif; } body.signup div.formHeader h1.success { color: #8cd4aa; font-size: 4em; font-family: 'Cinzel', serif; margin-top: 0; } body.signup div.formContainer { z-index: 10; position: relative; max-width: 700px; } @media screen and (max-width: 1200px) { body.signup div.formContainer { margin: unset; margin-top: -20px; max-width: 100%; } } body.signup div.formContainer input { text-shadow: 0 0 14px #514ba4; color: #ddceeb; height: 34px; margin: 0 auto; width: 400px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #0A0B1A center center no-repeat; background-size: contain; border: 1px solid #60B0DF; } @media screen and (max-width: 420px) { body.signup div.formContainer input { width: 100%; } } body.signup div.formContainer input::placeholder { color: #5b5064; } body.signup div.formContainer .form-group.has-error input { border: 2px solid red; } body.signup div.formContainer .remembermeBox { background: url("../assets/dwd/login/Remember_Box.png") 0 0 no-repeat; background-size: contain; color: #5b5064; text-align: center; font-size: 1.3em; line-height: 2em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: 175px; height: 28px; margin: 0 auto; cursor: pointer; display: block; user-select: none; } body.signup div.formContainer .remembermeBox.checked { color: #ddceeb; background: url("../assets/dwd/login/Remember_Box_checked.png") 0 0 no-repeat; background-size: contain; } body.signup div.formContainer .remembermeBox:hover { cursor: pointer; color: #ddceeb; } body.signup div.formContainer p { color: #ddceeb; font-size: 16px; margin-top: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.signup div.formContainer p a { color: #648ad9; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.signup div.formContainer a.btn-dwd-lnk { color: #ddceeb; font-family: 'LinBiolinum', sans-serif; font-size: 1.5em; text-decoration: underline; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } body.signup div.formContainer a.btn-dwd-lnk:hover { color: #fff; } body.signup div.formContainer .be_error { color: red; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; max-width: 400px; margin: auto; } body.signup div.formContainer .be_error ul { list-style-type: none; margin: 0; padding: 0; } body.signup div.formContainer .be_error ul li { text-align: center; } body.signup div.formContainer .be_success_recovery { color: green; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; width: 60%; margin: 0 auto; } body.signup div.formContainer .be_success_recovery ul { list-style-type: none; margin: 0; padding: 0; } body.signup div.formContainer .be_success_recovery ul li { text-align: center; } body.signup div.formContainer .btn-dwd-register, body.signup div.formContainer .btn-dwd-login { color: #fff; background: url("../assets/dwd/redeem/Redeem_Button.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; font-weight: bold; } @media screen and (max-width: 640px) { body.signup div.formContainer .btn-dwd-register, body.signup div.formContainer .btn-dwd-login { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.signup div.formContainer .btn-dwd-register, body.signup div.formContainer .btn-dwd-login { padding: 0.5em 3em; } } body.signup div.formContainer .btn-dwd-register:hover, body.signup div.formContainer .btn-dwd-login:hover { background: url("../assets/dwd/redeem/Redeem_Button.png") no-repeat; background-size: 100% 100%; color: lawngreen; } @font-face { font-family: WoodBlock; src: url("https://d19y2ttatozxjp.cloudfront.net/assets/invincible/wdblck.ttf"); } .invincible { background-color: black; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/invincible/invincible_background.webp"); background-position: top center; background-repeat: no-repeat; background-size: auto; color: black; font-family: Helvetica, Arial, sans-serif; } @media screen and (min-width: 1921px) { .invincible { background-size: cover; } } .invincible .email-error { text-align: center; background-color: black; width: 100%; margin: 0px auto; } @media screen and (min-width: 992px) { .invincible .email-error { width: 50%; } } .invincible main { overflow-x: hidden; } .invincible .img-fluid { max-width: 100%; height: auto; } .invincible-container { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/invincible/invincible_backer.webp"); background-position: top center; background-repeat: no-repeat; background-size: 100% 100%; margin-left: auto; margin-right: auto; margin-top: 16px; padding: 6px 8px; position: relative; width: calc(100% - 8px); } @media screen and (min-width: 420px) { .invincible-container { width: 404px; } } @media screen and (min-width: 540px) { .invincible-container { width: 524px; } } @media screen and (min-width: 640px) { .invincible-container { width: 624px; } } @media screen and (min-width: 768px) { .invincible-container { width: 752px; } } @media screen and (min-width: 992px) { .invincible-container { background-size: 100% 100%; height: 1650px; width: 964px; } } @media screen and (min-width: 1200px) { .invincible-container { background-size: auto; height: 1833px; width: 1166px; } } @media screen and (min-width: 1320px) { .invincible-container { height: 1858px; } } @media screen and (min-width: 1920px) { .invincible-container { height: 1833px; } } .invincible-footer { align-items: center; display: flex; flex-direction: column; margin-bottom: 60px; margin-left: auto; margin-right: auto; margin-top: 26px; padding-left: 8px; padding-right: 8px; } .invincible-footer .images { align-items: center; display: flex; gap: 24px; } .invincible-footer a { display: block; } .invincible-footer p { color: white; font-size: 12px; margin: 8px 0 0 0; text-align: center; } .invincible .top-section .columns { display: flex; flex-direction: column; margin-bottom: 16px; margin-left: auto; margin-right: auto; } @media screen and (min-width: 768px) { .invincible .top-section .columns { flex-direction: row; gap: 16px; margin-bottom: 24px; margin-left: 16px; } } @media screen and (min-width: 992px) { .invincible .top-section .columns { margin-bottom: 16px; } } @media screen and (min-width: 1200px) { .invincible .top-section .columns { margin-bottom: 32px; } } @media screen and (min-width: 1320px) { .invincible .top-section .columns { margin-bottom: 8px; } } @media screen and (min-width: 1920px) { .invincible .top-section .columns { margin-bottom: 0; } } @media screen and (max-width: 767px) { .invincible .top-section div { display: flex; justify-content: center; } } .invincible .top-section .game-box { height: auto; position: relative; width: 85%; z-index: 3; } @media screen and (min-width: 420px) { .invincible .top-section .game-box { width: 310px; } } @media screen and (min-width: 540px) { .invincible .top-section .game-box { width: 348px; } } @media screen and (min-width: 768px) { .invincible .top-section .game-box { width: 225px; } } @media screen and (min-width: 992px) { .invincible .top-section .game-box { width: 280px; } } @media screen and (min-width: 1200px) { .invincible .top-section .game-box { width: auto; } } .invincible .top-section .game-contents { height: auto; width: 95%; } @media screen and (min-width: 420px) { .invincible .top-section .game-contents { width: 370px; } } @media screen and (min-width: 540px) { .invincible .top-section .game-contents { width: 480px; } } @media screen and (min-width: 640px) { .invincible .top-section .game-contents { width: 529px; } } @media screen and (min-width: 768px) { .invincible .top-section .game-contents { margin-top: 57px; width: 363px; } } @media screen and (min-width: 992px) { .invincible .top-section .game-contents { margin-top: 70px; width: 420px; } } @media screen and (min-width: 1200px) { .invincible .top-section .game-contents { width: 520px; } } @media screen and (min-width: 1320px) { .invincible .top-section .game-contents { margin-top: 42px; } } @media screen and (min-width: 1920px) { .invincible .top-section .game-contents { margin-top: 52px; width: 515px; } } .invincible .top-section .invincible-character { height: auto; position: absolute; top: 16px; right: -195px; } @media screen and (max-width: 767px) { .invincible .top-section .invincible-character { display: none; } } @media screen and (min-width: 768px) and (max-width: 991px) { .invincible .top-section .invincible-character { display: block; right: -135px; top: 32px; width: 430px; z-index: 1; } } @media screen and (min-width: 992px) { .invincible .top-section .invincible-character { right: -150px; top: 8px; width: 600px; } } @media screen and (min-width: 1200px) { .invincible .top-section .invincible-character { right: -175px; top: 30px; width: auto; } } @media screen and (min-width: 1320px) { .invincible .top-section .invincible-character { right: -175px; } } @media screen and (min-width: 1620px) { .invincible .top-section .invincible-character { right: -170px; } } @media screen and (min-width: 1920px) { .invincible .top-section .invincible-character { right: -165px; top: 20px; } } .invincible .top-section .logo { display: block; height: auto; margin-left: auto; margin-right: auto; margin-top: 16px; width: 90%; } @media screen and (min-width: 768px) { .invincible .top-section .logo { margin-bottom: 8px; margin-left: 24px; width: 425px; } } @media screen and (min-width: 768px) and (max-width: 991px) { .invincible .top-section .logo { margin-bottom: 0; position: relative; z-index: 2; } } @media screen and (min-width: 992px) { .invincible .top-section .logo { margin-bottom: 0; margin-left: 32px; margin-top: 16px; width: 450px; } } @media screen and (min-width: 1200px) { .invincible .top-section .logo { margin-left: 54px; width: auto; } } @media screen and (min-width: 1320px) { .invincible .top-section .logo { margin-left: 64px; margin-top: 36px; } } @media screen and (min-width: 1620px) { .invincible .top-section .logo { margin-bottom: 8px; } } @media screen and (min-width: 1920px) { .invincible .top-section .logo { margin-top: 20px; } } .invincible .video-section { margin-bottom: 24px; } @media screen and (min-width: 768px) { .invincible .video-section { height: 350px; margin-bottom: 0; position: relative; } } @media screen and (min-width: 992px) { .invincible .video-section { height: 370px; } } @media screen and (min-width: 1200px) { .invincible .video-section { height: 360px; } } @media screen and (min-width: 1320px) { .invincible .video-section { height: 395px; } } @media screen and (min-width: 1620px) { .invincible .video-section { height: 386px; } } @media screen and (min-width: 1920px) { .invincible .video-section { height: 380px; } } .invincible .video-section .character-image-wrapper { display: block; width: 95%; z-index: 2; } @media screen and (min-width: 420px) { .invincible .video-section .character-image-wrapper { width: 380px; } } @media screen and (min-width: 540px) { .invincible .video-section .character-image-wrapper { width: 480px; } } @media screen and (min-width: 640px) { .invincible .video-section .character-image-wrapper { width: 512px; } } @media screen and (max-width: 767px) { .invincible .video-section .character-image-wrapper { margin-bottom: 8px; margin-left: auto; margin-right: auto; } } @media screen and (min-width: 768px) { .invincible .video-section .character-image-wrapper { left: 16px; position: absolute; top: 0; width: 340px; } } @media screen and (min-width: 992px) { .invincible .video-section .character-image-wrapper { left: 20px; top: -40px; width: 460px; } } @media screen and (min-width: 1200px) { .invincible .video-section .character-image-wrapper { left: 20px; top: -90px; width: 512px; } } @media screen and (min-width: 1320px) { .invincible .video-section .character-image-wrapper { top: -60px; } } .invincible .video-section .character-image-wrapper img { height: auto; width: 100%; } .invincible .video-section .video-wrapper { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/invincible/invincible_videobacker.webp"); background-repeat: no-repeat; display: block; height: auto; padding-left: 4px; padding-right: 4px; width: 95%; z-index: 3; } @media screen and (min-width: 420px) { .invincible .video-section .video-wrapper { height: 242px; width: 370px; } } @media screen and (min-width: 540px) { .invincible .video-section .video-wrapper { height: 314px; width: 480px; } } @media screen and (max-width: 767px) { .invincible .video-section .video-wrapper { margin-bottom: 8px; margin-left: auto; margin-right: auto; } } @media screen and (min-width: 768px) { .invincible .video-section .video-wrapper { left: 36px; position: absolute; height: 196px; width: 300px; } } @media screen and (min-width: 992px) { .invincible .video-section .video-wrapper { height: 275px; width: 420px; } } @media screen and (min-width: 1200px) { .invincible .video-section .video-wrapper { height: 304px; width: 465px; } } .invincible .video-section .video-wrapper iframe { height: 100%; width: calc(100% - 4px); } @media screen and (min-width: 420px) { .invincible .video-section .video-wrapper iframe { height: 235px; width: 355px; } } @media screen and (min-width: 540px) { .invincible .video-section .video-wrapper iframe { height: 285px; width: 445px; } } @media screen and (max-width: 767px) { .invincible .video-section .video-wrapper iframe { margin-left: 4px; margin-top: 4px; } } @media screen and (min-width: 768px) and (max-width: 991px) { .invincible .video-section .video-wrapper iframe { height: 193px; width: 288px; } } @media screen and (min-width: 992px) { .invincible .video-section .video-wrapper iframe { height: 259px; width: 400px; margin-left: 8px; margin-top: 8px; } } @media screen and (min-width: 1200px) { .invincible .video-section .video-wrapper iframe { height: 283px; width: 443px; margin-bottom: 0; margin-top: 2px; } } .invincible .video-section .text-box { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/invincible/invincible_textbox_3.png"); background-repeat: no-repeat; background-size: 100% 100%; display: block; font-weight: 300; height: auto; padding-bottom: 15%; padding-left: 28px; padding-right: 30px; padding-top: 11%; width: 100%; z-index: 2; } @media screen and (min-width: 420px) { .invincible .video-section .text-box { height: 458px; margin-left: auto; margin-right: auto; padding-bottom: 47px; padding-left: 30px; padding-right: 32px; padding-top: 37px; width: 388px; } } @media screen and (min-width: 540px) { .invincible .video-section .text-box { height: 358px; padding-bottom: 43px; padding-left: 41px; padding-right: 43px; padding-top: 35px; width: 490px; } } @media screen and (min-width: 640px) { .invincible .video-section .text-box { height: 316px; width: 600px; } } @media screen and (min-width: 768px) { .invincible .video-section .text-box { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/invincible/invincible_textbox_2.webp"); height: 320px; padding-bottom: 29px; padding-left: 83px; padding-right: 23px; padding-top: 21px; position: absolute; right: 8px; top: 5px; width: 425px; } } @media screen and (min-width: 992px) { .invincible .video-section .text-box { height: 360px; padding-bottom: 31px; padding-left: 93px; padding-right: 29px; right: 16px; top: -10px; width: 490px; } } @media screen and (min-width: 1200px) { .invincible .video-section .text-box { height: 310px; padding-bottom: 34px; padding-left: 126px; padding-right: 33px; padding-top: 23px; top: -20px; width: 697px; } } @media screen and (min-width: 1320px) { .invincible .video-section .text-box { top: 15px; } } .invincible .video-section .text-box p { color: black; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 400; margin: 16px 0 0 0; } .invincible .video-section .text-box p:first-child { margin-top: 0; } @media screen and (min-width: 768px) { .invincible .video-section .text-box p { font-size: 14px; } } @media screen and (min-width: 992px) { .invincible .video-section .text-box p { font-size: 16px; } } @media screen and (min-width: 1200px) { .invincible .video-section .text-box p { font-size: 18px; } } @media screen and (min-width: 1200px) { .invincible .video-section .text-box p { font-size: 17px; } } .invincible .newsletter-section { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/invincible/invincible_signupbacker.webp"); background-repeat: no-repeat; background-size: 100% 100%; margin-bottom: 20px; margin-left: auto; margin-right: auto; padding-bottom: 16px; width: 95%; } @media screen and (min-width: 420px) { .invincible .newsletter-section { width: 370px; } } @media screen and (min-width: 540px) { .invincible .newsletter-section { height: 120px; margin-bottom: 60px; width: 390px; } } @media screen and (min-width: 640px) { .invincible .newsletter-section { height: 120px; margin-bottom: 60px; width: 460px; } } @media screen and (min-width: 768px) { .invincible .newsletter-section { height: 179px; margin-bottom: 40px; width: 550px; } } @media screen and (min-width: 992px) { .invincible .newsletter-section { margin-bottom: 32px; } } @media screen and (min-width: 1200px) { .invincible .newsletter-section { height: 212px; margin-bottom: 60px; width: 650px; } } .invincible .newsletter-section h2 { font-family: WoodBlock; font-size: 32px; margin: 0; padding-left: 8px; padding-right: 12px; padding-top: 8px; text-align: center; text-transform: uppercase; } @media screen and (min-width: 420px) { .invincible .newsletter-section h2 { font-size: 36px; } } @media screen and (min-width: 768px) { .invincible .newsletter-section h2 { font-size: 48px; padding-top: 12px; } } @media screen and (min-width: 992px) { .invincible .newsletter-section h2 { font-size: 40px; padding-top: 16px; } } @media screen and (min-width: 1200px) { .invincible .newsletter-section h2 { font-size: 54px; padding-top: 24px; } } .invincible .newsletter-section form { align-items: center; display: flex; flex-direction: column; } .invincible .newsletter-section button { background-color: transparent; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/invincible/invincible_signupbutton.webp"); background-repeat: no-repeat; background-size: 100% 100%; border: none; height: 66px; padding-left: 8px; padding-right: 12px; width: 150px; } @media screen and (min-width: 420px) { .invincible .newsletter-section button { height: 66px; width: 180px; } } @media screen and (min-width: 640px) { .invincible .newsletter-section button { height: 73px; width: 200px; } } @media screen and (min-width: 768px) and (max-width: 991px) { .invincible .newsletter-section button { height: 83px; margin-top: 8px; width: 225px; } } @media screen and (min-width: 992px) { .invincible .newsletter-section button { height: 92px; width: 250px; } } @media screen and (min-width: 1200px) { .invincible .newsletter-section button { height: 115px; width: 313px; } } .invincible .newsletter-section button:active { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/invincible/invincible_signupbutton_click.webp"); } .invincible .newsletter-section button:focus, .invincible .newsletter-section button:hover { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/invincible/invincible_signupbutton_hover.webp"); } .invincible .newsletter-section input { background-color: transparent; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/invincible/invincible_emailbar.webp"); background-repeat: no-repeat; background-size: 100% 100%; border: none; font-family: 'Poppins', sans-serif; height: 40px; padding-left: 16px; padding-right: 16px; width: 90%; } @media screen and (min-width: 420px) { .invincible .newsletter-section input { width: 350px; } } @media screen and (min-width: 540px) { .invincible .newsletter-section input { font-size: 18px; font-weight: 700; } } @media screen and (min-width: 767px) { .invincible .newsletter-section input { width: 350px; } } @media screen and (min-width: 768px) { .invincible .newsletter-section input { height: 57px; width: 500px; } } @media screen and (min-width: 1200px) { .invincible .newsletter-section input { height: 66px; width: 579px; } } .invincible .newsletter-section input::placeholder { color: black; } @media screen and (min-width: 768px) { .invincible .news-section { margin-left: 48px; } } @media screen and (max-width: 991px) { .invincible .news-section { margin-bottom: 32px; } } @media screen and (min-width: 540px) { .invincible .news-section .news-button { margin-left: 50px; } } @media screen and (min-width: 641px) { .invincible .news-section .news-button { margin-left: 0; } } @media screen and (min-width: 768px) { .invincible .news-section .news-button { margin-right: 80px; } } .invincible .news-section .inner { margin-left: auto; margin-right: auto; } @media screen and (min-width: 640px) { .invincible .news-section .inner { margin-left: 8px; margin-right: 8px; } } @media screen and (min-width: 768px) { .invincible .news-section .inner { margin-left: 32px; margin-right: 80px; } } @media screen and (max-width: 767px) { .invincible.invincible-thankyou-background { background-image: none; } } @media screen and (min-width: 768px) { .invincible.invincible-thankyou-background { background-size: 100%; } } @media screen and (min-width: 768px) { .invincible .invincible-thankyou-container { margin-top: 16px; } } .invincible .invincible-thankyou .content-col { background-color: #3e93ba; position: relative; text-align: center; } @media screen and (min-width: 768px) { .invincible .invincible-thankyou .content-col { border: 7px solid black; box-shadow: 6px 8px 0 black; text-align: left; } } .invincible .invincible-thankyou .content-section { padding-bottom: 15px; padding-top: 15px; } .invincible .invincible-thankyou .logo-row { margin-bottom: 16px; } .invincible .invincible-thankyou-text { font-size: 18px; } .invincible .invincible-thankyou-character { height: auto; position: absolute; display: none; } @media screen and (min-width: 768px) { .invincible .invincible-thankyou-character { display: block; right: -235px; top: 15px; width: 425px; } } @media screen and (min-width: 1200px) { .invincible .invincible-thankyou-character { right: -235px; top: 35px; width: 500px; } } body.lotusPage .banner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/heroImage.jpg) center center no-repeat; background-position-y: 0; } body.lotusPage .banner .video-container .title-container .logo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/logo_lotusWeb.png) center center no-repeat; background-size: contain; width: 567px; height: 246px; } @media screen and (max-width: 992px) { body.lotusPage .banner .video-container .title-container .logo { width: 100%; } } body.lotusPage .banner .video-container .title-container .appStores { margin-top: 35em; } body.lotusPage .dividerContent { position: relative; width: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/LotusHeroDividerFill.jpg) center center repeat-x; background-clip: content-box; text-align: center; } @media screen and (max-width: 425px) { body.lotusPage .dividerContent { display: none; } } body.lotusPage .dividerContent, body.lotusPage .dividerContent .capLeft, body.lotusPage .dividerContent .capRight { height: 31px; } body.lotusPage .dividerContent .capLeft, body.lotusPage .dividerContent .capRight { position: absolute; top: 0; width: 550px; display: inline-block; } body.lotusPage .dividerContent .capLeft { left: 0; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/LotusHeroDividerL.jpg) center left no-repeat; } @media screen and (max-width: 767px) { body.lotusPage .dividerContent .capLeft { display: none; } } body.lotusPage .dividerContent .capRight { right: 0; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/LotusHeroDividerR.jpg) center right no-repeat; } body.lotusPage main { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/BodyTileBG.jpg) 0 0 repeat; } @media screen and (max-width: 1200px) { body.lotusPage main { overflow: hidden; } } body.lotusPage main .backPetals, body.lotusPage main .middlePetals, body.lotusPage main .frontPetals { position: absolute; bottom: 0; width: 100%; height: 100%; background: center bottom no-repeat transparent; } @media screen and (max-width: 420px) { body.lotusPage main .backPetals, body.lotusPage main .middlePetals, body.lotusPage main .frontPetals { display: none; } } body.lotusPage main .backPetals { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/lotus_parallax_back.png); } body.lotusPage main .middlePetals { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/lotus_parallax_middle.png); } body.lotusPage main .frontPetals { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/lotus_parallax_front.png); } @media screen and (max-width: 767px) { body.lotusPage main .container { margin: 0; width: 100%; } } body.lotusPage main .container section.lnews { padding-bottom: 1.5em; } body.lotusPage main .container section.lnews h1 { color: #fff; font-weight: 600; font-family: 'Julee', sans-serif; font-size: 4em; } body.lotusPage main .container section.lnews h1 .sm_link { color: #ffddf7; font-family: "Open Sans", sans-serif; font-size: 0.3em; } body.lotusPage main .container section.lnews .container { padding: 0; position: relative; } body.lotusPage main .container section.lnews .blog-posts .bp-content { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/lotus_newsFooter.jpg) bottom center no-repeat #fff; background-size: contain; height: 380px; position: relative; } body.lotusPage main .container section.lnews .blog-posts .bp-content .bpImg { height: 218px; position: relative; } body.lotusPage main .container section.lnews .blog-posts .bp-content .bpImg .bp-title { margin: 0; width: 100%; bottom: 0; position: absolute; } body.lotusPage main .container section.lnews .blog-posts .bp-content .bpImg .bp-title h2 { color: #fff; font-size: 1.6em; font-weight: 600; margin: 0; padding: 10px; vertical-align: middle; background-color: rgba(0, 0, 0, 0.7); height: 56px; width: 100%; font-family: "Open Sans", sans-serif; color: #fff; } body.lotusPage main .container section.lnews .blog-posts .bp-content .bpImg .bp-title h2:hover { text-decoration: none; } body.lotusPage main .container section.lnews .blog-posts .bp-content p, body.lotusPage main .container section.lnews .blog-posts .bp-content .bp-dates { font-family: "Open Sans", sans-serif; } body.lotusPage main .container section.lnews .blog-posts .bp-content p { color: #383224; font-weight: 600; padding: 1.5em 1em; font-size: 1.2em; } body.lotusPage main .container section.lnews .blog-posts .bp-content .bp-dates { position: absolute; font-style: italic; bottom: 0; width: 100%; height: 51px; display: block; font-size: 1.4em; font-weight: 600; color: #fff; padding: 1em; } body.lotusPage main .container section.lotusContent { z-index: 999; position: relative; } body.lotusPage main .container section.lotusContent .container { padding: 0; } body.lotusPage main .container section.lotusContent .topFrame { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/contentFrameTop.jpg) 0 0 no-repeat; width: 100%; height: 10px; position: relative; background-size: cover; } @media screen and (max-width: 420px) { body.lotusPage main .container section.lotusContent .topFrame { display: none; } } body.lotusPage main .container section.lotusContent .centerFrame { background: #fff; color: #111; padding: 1em 1em 0 1em; } @media screen and (max-width: 420px) { body.lotusPage main .container section.lotusContent .centerFrame { padding: 1em 0 0 0; } } body.lotusPage main .container section.lotusContent .centerFrame h4 { font-family: Asul, sans-serif; text-align: center; margin-bottom: 1em; } @media screen and (max-width: 767px) { body.lotusPage main .container section.lotusContent .centerFrame h4 { width: 80%; margin: 1em auto; } } body.lotusPage main .container section.lotusContent .centerFrame .gameBox { border: black dotted 3px; border-radius: 5px; margin-top: 4em; margin-bottom: 4em; } @media screen and (max-width: 992px) { body.lotusPage main .container section.lotusContent .centerFrame .gameBox { margin-bottom: 0; } } @media screen and (max-width: 640px) { body.lotusPage main .container section.lotusContent .centerFrame .gameBox { margin-top: 1em; } } body.lotusPage main .container section.lotusContent .centerFrame .gameBox img { position: absolute; } body.lotusPage main .container section.lotusContent .centerFrame .gameBox img.box { top: -50px; } @media screen and (max-width: 992px) { body.lotusPage main .container section.lotusContent .centerFrame .gameBox img.box { top: -30px; width: 200px; } } @media screen and (max-width: 640px) { body.lotusPage main .container section.lotusContent .centerFrame .gameBox img.box { display: none; } } body.lotusPage main .container section.lotusContent .centerFrame .gameBox img.icon { top: 30px; left: 250px; } @media screen and (max-width: 1200px) { body.lotusPage main .container section.lotusContent .centerFrame .gameBox img.icon { width: 100px; top: 50px; left: 230px; } } @media screen and (max-width: 992px) { body.lotusPage main .container section.lotusContent .centerFrame .gameBox img.icon { display: none; } } body.lotusPage main .container section.lotusContent .centerFrame .gameBox p { font-size: 1.6em; font-family: 'Asul', sans-serif; text-align: center; position: inherit; width: 60%; margin-left: 40%; padding: .5em; } @media screen and (max-width: 640px) { body.lotusPage main .container section.lotusContent .centerFrame .gameBox p { width: 100%; margin-left: 0; } } body.lotusPage main .container section.lotusContent .centerFrame .galleryLotus { margin: 4em 0; } body.lotusPage main .container section.lotusContent .centerFrame .galleryLotus img { border: 3px solid pink; border-radius: 5px; } @media screen and (max-width: 992px) { body.lotusPage main .container section.lotusContent .centerFrame .galleryLotus .showcaseImg { padding: 0 15px !important; } } body.lotusPage main .container section.lotusContent .centerFrame .galleryLotus .showcaseImg:nth-child(1), body.lotusPage main .container section.lotusContent .centerFrame .galleryLotus .showcaseImg:nth-child(2) { padding-right: 5px; } body.lotusPage main .container section.lotusContent .centerFrame .galleryLotus .showcaseImg:nth-child(2), body.lotusPage main .container section.lotusContent .centerFrame .galleryLotus .showcaseImg:nth-child(3) { padding-left: 5px; } body.lotusPage.passwordRecovery .lotusBanner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/heroImage.jpg) center center no-repeat; background-size: cover; height: 861px; } body.lotusPage.passwordRecovery .lotusBanner .video-container { background: transparent; } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition { position: relative; height: 100%; } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .lotusLogo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/logo_lotusWeb.png) center center no-repeat; width: 100%; } @media screen and (max-width: 425px) { body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .lotusLogo { background-size: 100%; } } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameForms { position: relative; width: 500px; margin: 178px auto 0 auto; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) center center repeat transparent; border-radius: 5px; padding: 25px; } @media screen and (max-width: 425px) { body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameForms { width: auto; } } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameForms h2 { margin-top: 0; margin-bottom: 20px; } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameForms .form-group { position: relative; } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameForms .form-group .errorRedCircle { display: none; } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameForms .form-group .form-control { height: 42px; } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameForms .form-group.has-error .errorRedCircle { display: inline-block; width: 30px; height: 30px; background: #F02425; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; font-size: 2.2em; line-height: 1.3em; text-align: center; position: absolute; right: 6px; top: 6px; } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameForms .form-group.has-error .form-control { border: 3px solid #F02425; } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameForms .be_error { margin: 20px 0; } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameForms .be_error ul { padding: 0; list-style-type: none; } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameForms .be_error ul li { font-size: 1.6em; color: #F02425; } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameForms .be_error span { color: #fff; } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameSucess { display: none; position: relative; width: 500px; margin: 178px auto 0 auto; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) center center repeat transparent; border-radius: 5px; padding: 25px; } @media screen and (max-width: 425px) { body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameSucess { width: auto; } } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameSucess h2 { margin-top: 0; margin-bottom: 20px; color: #8AD5B6; } body.lotusPage.passwordRecovery .lotusBanner .title-container .contentPosition .frameSucess .msg_ren { color: #fff; } body.lotusPage.emailUnsub .lotusBanner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/heroImage.jpg) center center no-repeat; background-size: cover; height: 861px; } @media screen and (max-width: 425px) { body.lotusPage.emailUnsub .lotusBanner { height: 640px; } } body.lotusPage.emailUnsub .lotusBanner .video-container { background: transparent; } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition { position: relative; height: 100%; } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .lotusLogo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/logo_lotusWeb.png) center center no-repeat; width: 100%; } @media screen and (max-width: 425px) { body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .lotusLogo { background-size: 100%; } } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameForms { position: relative; width: 600px; margin: 280px auto; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) center center repeat transparent; border-radius: 5px; padding: 25px; } @media screen and (max-width: 425px) { body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameForms { width: auto; margin-top: 20px; } } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameForms input { text-align: center; } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameForms h2 { margin-top: 0; margin-bottom: 20px; } @media screen and (max-width: 425px) { body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameForms h2 { font-size: 2em; } } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameForms .form-group { position: relative; } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameForms .form-group .errorRedCircle { display: none; } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameForms .form-group .form-control { height: 42px; } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameForms .form-group.has-error .errorRedCircle { display: inline-block; width: 30px; height: 30px; background: #F02425; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; font-size: 2.2em; line-height: 1.3em; text-align: center; position: absolute; right: 6px; top: 6px; } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameForms .form-group.has-error .form-control { border: 3px solid #F02425; } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameForms .be_error { margin: 20px 0; } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameForms .be_error ul { list-style-type: none; } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameForms .be_error ul li { color: #F02425; } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameForms .be_error span { color: #fff; } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameSucess { display: none; position: relative; width: 500px; margin: 178px auto 0 auto; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) center center repeat transparent; border-radius: 5px; padding: 25px; } @media screen and (max-width: 425px) { body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameSucess { width: auto; } } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameSucess h2 { margin-top: 0; margin-bottom: 20px; color: #8AD5B6; } body.lotusPage.emailUnsub .lotusBanner .title-container .contentPosition .frameSucess .msg_ren { color: #fff; } body.lotusPage .bodyCornerLeft, body.lotusPage .bodyCornerRight { position: absolute; bottom: 0; z-index: 12; transition: all .5s; } body.lotusPage .bodyCornerLeft { left: 0; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/flowers_Left.png) 0 0 no-repeat; width: 526px; height: 602px; } @media screen and (max-width: 1450px) { body.lotusPage .bodyCornerLeft { left: -220px; } } @media screen and (max-width: 992px) { body.lotusPage .bodyCornerLeft { left: -400px; } } @media screen and (max-width: 767px) { body.lotusPage .bodyCornerLeft { left: -526px; } } body.lotusPage .bodyCornerRight { right: 0; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/lotus/flowers_Right.png) 0 0 no-repeat; width: 600px; height: 710px; } @media screen and (max-width: 1450px) { body.lotusPage .bodyCornerRight { width: 290px; } } @media screen and (max-width: 992px) { body.lotusPage .bodyCornerRight { width: 150px; } } @media screen and (max-width: 767px) { body.lotusPage .bodyCornerRight { width: 0px; } } .equal { display: flex; display: -webkit-flex; flex-wrap: wrap; } .spriteMode { display: inline-block; } .card_template { z-index: 999; width: 220px; height: 350px; text-align: center; display: none; position: absolute; top: 0; left: 260px; } .card_template .frame { width: 220px; height: 350px; position: absolute; top: 0; left: 0; } @media screen and (max-width: 414px) { .card_template { display: none; } } a.dwdOverlay { display: inline-block; } a.dwdOverlay i.icon { padding: 0 6px 0 6px; margin-right: 4px; margin-left: 3px; } a.dwdOverlay i.hourglass { background: url(https://d19y2ttatozxjp.cloudfront.net/wp-content/uploads/2018/03/01221620/Magnifying-Glass.png) 0 center no-repeat; background-size: contain; } div.pnfBanner { position: relative; width: 100%; } div.pnfBanner .bannerImg { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -495px; width: 645px; height: 369px; margin: 50px auto; } .tablepress { width: 100%; font-size: 1.3em; color: #9f8c71; border: 1px solid #4d3d2b; } .tablepress thead { font-size: 1.4em; } .tablepress th { padding: 15px; background-color: #15151A; } .tablepress td { padding: 15px; } .tablepress .even { background-color: #201C2D; } .tablepress.centered { text-align: center; } .influences .faction { width: 31px; height: 27px; zoom: 71%; display: inline-block; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/InfluencePips_30w.png); } .influences .faction.fire { background-position: 0 0; } .influences .faction.time { background-position: 0 -30px; } .influences .faction.justice { background-position: 0 -61px; } .influences .faction.primal { background-position: 0 -93px; } .influences .faction.shadow { background-position: 0 -126px; } .influences .faction.colorless { background-position: 0 -160px; } body.lanternsPage .banner, body.lotusPage .banner, body.lorPage .banner, body.grmPage .banner { height: 760px; position: relative; } body.lanternsPage .banner .video-container, body.lotusPage .banner .video-container, body.lorPage .banner .video-container, body.grmPage .banner .video-container { position: relative; bottom: 0%; left: 0%; height: 100%; width: 100%; overflow: hidden; overflow: hidden; } body.lanternsPage .banner .video-container video, body.lotusPage .banner .video-container video, body.lorPage .banner .video-container video, body.grmPage .banner .video-container video { position: absolute; top: 50%; left: 50%; z-index: 1; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); transition: all 0.3s; } @media screen and (max-width: 420px) { body.lanternsPage .banner .video-container video, body.lotusPage .banner .video-container video, body.lorPage .banner .video-container video, body.grmPage .banner .video-container video { display: none; } } body.lanternsPage .banner .video-container .filter, body.lotusPage .banner .video-container .filter, body.lorPage .banner .video-container .filter, body.grmPage .banner .video-container .filter { z-index: 100; position: absolute; background: rgba(0, 0, 0, 0.4); width: 100%; } body.lanternsPage .banner .video-container .description .inner, body.lotusPage .banner .video-container .description .inner, body.lorPage .banner .video-container .description .inner, body.grmPage .banner .video-container .description .inner { font-size: 1em; width: 45%; margin: 0 auto; } body.lanternsPage .banner .video-container .link, body.lotusPage .banner .video-container .link, body.lorPage .banner .video-container .link, body.grmPage .banner .video-container .link { position: absolute; bottom: 3em; width: 100%; text-align: center; z-index: 1001; font-size: 2em; color: #fff; } body.lanternsPage .banner .video-container .link a, body.lotusPage .banner .video-container .link a, body.lorPage .banner .video-container .link a, body.grmPage .banner .video-container .link a { color: #fff; } body.lanternsPage .banner .video-container .title-container, body.lotusPage .banner .video-container .title-container, body.lorPage .banner .video-container .title-container, body.grmPage .banner .video-container .title-container { z-index: 1000; position: absolute; top: 4px; width: 100%; height: 100%; text-align: center; color: #fff; } body.lanternsPage .banner .video-container .title-container .logo, body.lotusPage .banner .video-container .title-container .logo, body.lorPage .banner .video-container .title-container .logo, body.grmPage .banner .video-container .title-container .logo { margin: 0 auto; transition: all 0.3s; } body.lanternsPage main .container .appStores, body.lotusPage main .container .appStores, body.lorPage main .container .appStores, body.grmPage main .container .appStores { margin-top: 2em; margin-bottom: 2em; text-align: center; } body.lanternsPage .appStores, body.lotusPage .appStores, body.lorPage .appStores, body.grmPage .appStores { text-align: center; } body.lotusPage .logoFooter .dwd, body.lorPage .logoFooter .dwd, body.grmPage .logoFooter .dwd { float: right; margin-right: 8em; } @media screen and (max-width: 767px) { body.lotusPage .logoFooter .dwd, body.lorPage .logoFooter .dwd, body.grmPage .logoFooter .dwd { margin-right: 4em; } } @media screen and (max-width: 420px) { body.lotusPage .logoFooter .dwd, body.lorPage .logoFooter .dwd, body.grmPage .logoFooter .dwd { margin-right: 2em; } } body.lotusPage .logoFooter .renegade, body.lorPage .logoFooter .renegade, body.grmPage .logoFooter .renegade { float: left; margin-left: 8em; } @media screen and (max-width: 767px) { body.lotusPage .logoFooter .renegade, body.lorPage .logoFooter .renegade, body.grmPage .logoFooter .renegade { margin-left: 4em; } } @media screen and (max-width: 420px) { body.lotusPage .logoFooter .renegade, body.lorPage .logoFooter .renegade, body.grmPage .logoFooter .renegade { margin-left: 2em; } } body .comment-aside { border: 1px solid #9C8061; border-radius: 12px; background-color: #D9B286; color: #383224; padding: 2em; margin: 0.5em; } body .comment-aside.right { float: right; margin-left: 2em; } body .comment-aside.left { margin-right: 2em; } body .dark-blue { background: #2f2c3d; border: #2f2c3d; } body .dark-blue:hover, body .dark-blue:active, body .dark-blue:focus, body .dark-blue:focus-within, body .dark-blue:visited { background: #1e1c27 !important; } body .navigation.pagination { font-size: 20px; font-weight: 600; font-family: "Open Sans", sans-serif; text-align: center; width: 100%; } body .navigation.pagination .page-numbers { margin: 0 4px; } body .navigation.pagination .next, body .navigation.pagination .prev { color: #abdeff; } body .navigation.pagination .next:hover, body .navigation.pagination .prev:hover { color: #fff; } body .top_banner { margin-top: 30px; } body .store-options { display: flex; justify-content: center; flex-wrap: wrap; padding: 0; position: absolute; top: 11%; width: 25%; } @media screen and (max-width: 1200px) { body .store-options { position: inherit; width: inherit; } } body .store-options.twitchPage { position: inherit; width: 100%; } body .store-options.left { left: 0; } body .store-options.right { right: 0; } @media screen and (max-width: 1200px) { body .store-options.right { padding-bottom: 6em; } } body .store-options .store-badge { width: 100%; } body .store-options .store-link { margin: 6px; width: 250px; } @media screen and (max-width: 1200px) { body .store-options .store-link { flex-basis: 25%; } } body .store-options .overlay { position: relative; } body .store-options .overlay:after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #f3f3f3; border-radius: 10px; } body .store-options .overlay:hover:after { opacity: 0.5; } body .featured-post { max-width: 650px; padding-bottom: 5em; } body .featured-post a { color: #fff; } body .featured-post a:hover { color: #abdeff; text-decoration: none; } body .featured-post .bp-content { position: relative; } body .featured-post .bp-logo { / background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -132px; width: 186px; height: 66px; position: absolute; top: 1%; / display: none; } body .featured-post .bp-title { font-weight: 600; margin: 0; padding: 10px; background: rgba(0, 0, 0, 0.5); width: 100%; font-family: "Open Sans", sans-serif; position: absolute; bottom: 0; font-size: 28px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; text-align: center; } @media screen and (min-width: 1200px) { body .featured-post .bp-title { font-size: 36px; } } @media screen and (max-width: 500px) { body .featured-post .bp-title { font-size: 21px; } } body .featured-post .bpImg { max-height: 700px; width: 100%; margin: 0 auto; box-shadow: 0px 0px 133px #69480d; border-radius: 15px; } body section.lnews { padding: 40px 0; } body section.lnews h1, body section.lnews h2 { font-size: 2.45em; font-weight: 400; } @media screen and (max-width: 767px) { body section.lnews h1, body section.lnews h2 { text-align: left; margin-top: 10px; } } body section.lnews h1 a.sm_link, body section.lnews h2 a.sm_link { font-weight: 600; font-size: 0.5em; color: #abdeff; margin-left: 12px; text-decoration: underline; margin-bottom: 4px; } body section.lnews .blog-posts { width: 33.3333333%; float: left; } body section.lnews .blog-posts a, body section.lnews .blog-posts a:hover { text-decoration: none; color: #fff; } body section.lnews .blog-posts:hover .bpImg { transform: scale(1.05); transition: all .5s; } body section.lnews .blog-posts:nth-of-type(2) { padding: 0 1em; } @media screen and (max-width: 992px) { body section.lnews .blog-posts { width: 50%; } body section.lnews .blog-posts:nth-of-type(2) { padding-right: 0; } body section.lnews .blog-posts:nth-of-type(3) { display: none; } } @media screen and (max-width: 640px) { body section.lnews .blog-posts { width: 80%; margin-left: 10%; } body section.lnews .blog-posts:nth-of-type(2) { display: none; } } @media screen and (max-width: 420px) { body section.lnews .blog-posts { width: 100%; margin-left: 0; } } body.homePage .lnews { position: relative; z-index: 99; background-color: black; } body.homePage .lnews .container { z-index: 101; position: relative; } body.homePage .lnews .container .blog-posts .bp-content { background-color: #000; position: relative; height: 350px; } body.homePage .lnews .container .blog-posts .bp-content .bpImg { height: 218px; position: relative; } body.homePage .lnews .container .blog-posts .bp-content .bpImg .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); width: 186px; height: 66px; } body.homePage .lnews .container .blog-posts .bp-content .bpImg.wm-legends .bp-wm { background-position: 0px -330px; } body.homePage .lnews .container .blog-posts .bp-content .bpImg.wm-eternal .bp-wm { background-position: 0px -132px; } body.homePage .lnews .container .blog-posts .bp-content .bpImg.wm-clank .bp-wm { background-position: 0px -66px; } body.homePage .lnews .container .blog-posts .bp-content .bpImg.wm-lanterns .bp-wm { background-position: 0px -264px; } body.homePage .lnews .container .blog-posts .bp-content .bpImg.wm-hangryhords .bp-wm { background-position: 0px -198px; } body.homePage .lnews .container .blog-posts .bp-content .bpImg.wm-lotus .bp-wm { background-position: 0px -396px; } body.homePage .lnews .container .blog-posts .bp-content .bpImg.wm-dwd .bp-wm { background-position: 0px -462px; } body.homePage .lnews .container .blog-posts .bp-content .bpImg .bp-title { margin: 0; width: 100%; bottom: 0; position: absolute; } body.homePage .lnews .container .blog-posts .bp-content .bpImg .bp-title h2 { font-size: 1.6em; font-weight: 600; margin: 0; padding: 10px; vertical-align: middle; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) top left repeat; height: 56px; width: 100%; font-family: "Open Sans", sans-serif; color: #fff; } body.homePage .lnews .container .blog-posts .bp-content p { padding: 15px 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; } body.homePage .lnews .container .blog-posts .bp-content small { font-style: italic; padding: 0 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; position: absolute; bottom: 20px; } body.newsPage main { padding-bottom: 120px; z-index: 999; } @media screen and (max-width: 768px) { body.newsPage main section.lnews .blog-posts .bp-content .bpImg .bp-title h2 { font-size: 1.5em; } } @media screen and (max-width: 992px) { body.newsPage main section.lnews .blog-posts:nth-of-type(3) { display: inherit; } } @media screen and (max-width: 640px) { body.newsPage main section.lnews .blog-posts:nth-of-type(2) { display: inherit; } } body.newsPage main section.search { position: relative; margin: 20px auto 20px auto; } body.newsPage main section.search h1 { margin: 20px 0 30px 0; text-align: center; } body.newsPage main section.search .nothing { display: none; } body.newsPage main section.search p { font-size: 2em; color: #778899; } @media screen and (max-width: 360px) { body.newsPage main section.search p { font-size: 1.8em; } } body.newsPage main section.search input { padding: 30px; font-size: 2em; background: #000; border: 2px solid #504133; color: #778899; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.newsPage main section.search input::placeholder { color: #778899; opacity: 0.5; } body.newsPage main section.search .form-group.has-error input { border: 2px solid red; } body.newsPage main section.search ul.thumbnails.image_picker_selector { overflow: auto; list-style-image: none; list-style-position: outside; list-style-type: none; padding: 0px; margin: 0px; } body.newsPage main section.search ul.thumbnails.image_picker_selector ul { overflow: auto; list-style-image: none; list-style-position: outside; list-style-type: none; padding: 0px; margin: 0px; } body.newsPage main section.search ul.thumbnails.image_picker_selector li { float: left; } body.newsPage main section.search ul.thumbnails.image_picker_selector li.group { width: 100%; } body.newsPage main section.search ul.thumbnails.image_picker_selector li.group_title { float: none; } body.newsPage main section.search ul.thumbnails.image_picker_selector li .thumbnail { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; cursor: pointer; } body.newsPage main section.search ul.thumbnails.image_picker_selector li .thumbnail img { -webkit-user-drag: none; } body.newsPage main section.search ul.thumbnails.image_picker_selector li .thumbnail.selected { background: #191f29; } body.newsPage main section.allNews { clear: both; padding: 20px 0 40px 0; } body.newsPage main section.allNews h1 { margin-left: -15px; } body.newsPage main section.allNews .all-blog-posts { background: #06080b; margin-bottom: 7px; } body.newsPage main section.allNews .all-blog-posts:hover { background-color: #191f29 !important; } body.newsPage main section.allNews .all-blog-posts a { color: #ffffff; text-decoration: none; } body.newsPage main section.allNews .all-blog-posts a:hover { color: #ffffff; } body.newsPage main section.allNews .all-blog-posts .col-md-3:first-child { padding-left: 0 !important; } @media screen and (max-width: 414px) { body.newsPage main section.allNews .all-blog-posts .col-md-3:first-child { padding-left: 15px; } } body.newsPage main section.allNews .all-blog-posts .col-md-3:last-child { padding-right: 0 !important; } @media screen and (max-width: 768px) { body.newsPage main section.allNews .all-blog-posts .col-md-3.wm-legends .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -330px; width: 202px; height: 66px; position: absolute; } body.newsPage main section.allNews .all-blog-posts .col-md-3.wm-eternal .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -132px; width: 186px; height: 66px; position: absolute; } body.newsPage main section.allNews .all-blog-posts .col-md-3.wm-clank .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -66px; width: 186px; height: 66px; position: absolute; } body.newsPage main section.allNews .all-blog-posts .col-md-3.wm-lanterns .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -264px; width: 201px; height: 66px; position: absolute; } body.newsPage main section.allNews .all-blog-posts .col-md-3.wm-hangryhords .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -198px; width: 159px; height: 90px; position: absolute; } body.newsPage main section.allNews .all-blog-posts .col-md-3.wm-lotus .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -396px; width: 160px; height: 66px; position: absolute; } body.newsPage main section.allNews .all-blog-posts .col-md-3.wm-dwd .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -462px; width: 211px; height: 66px; position: absolute; } } body.newsPage main section.allNews .all-blog-posts h2 { font-size: 1.6em; font-weight: 600; margin: 0; padding: 30px 0 0 10px; font-family: "Open Sans", sans-serif; } body.newsPage main section.allNews .all-blog-posts p { padding: 10px 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; } body.newsPage main section.allNews .all-blog-posts small { font-style: italic; padding: 0 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; } body.newsPage main section.allNews .all-blog-posts .typeCont.wm-legends .category { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -726px; width: 202px; height: 66px; } body.newsPage main section.allNews .all-blog-posts .typeCont.wm-eternal .category { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -660px; width: 186px; height: 66px; } body.newsPage main section.allNews .all-blog-posts .typeCont.wm-clank .category { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px 0px; width: 186px; height: 66px; } body.newsPage main section.allNews .all-blog-posts .typeCont.wm-lanterns .category { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -792px; width: 201px; height: 66px; } body.newsPage main section.allNews .all-blog-posts .typeCont.wm-hangryhords .category { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -924px; width: 159px; height: 90px; } body.newsPage main section.allNews .all-blog-posts .typeCont.wm-lotus .category { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -858px; width: 160px; height: 66px; } body.newsPage main section.allNews .all-blog-posts .typeCont.wm-dwd .category { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -528px; width: 211px; height: 66px; } body.newsPage main section.allNews .all-blog-posts .category { margin-top: 40px; } body.newsPage main section.allNews .paginationBox nav { text-align: center; } body.newsPage main section.allNews .paginationBox nav ul.pagination li.active a { background: #222; } body.newsPage main section.allNews .paginationBox nav ul.pagination li a { background: #000; color: #fff; border-color: #222; } body.newsPage main section.allNews .paginationBox nav ul.pagination li a:hover { background: #222; } body.newsPage.Firefox main section.search input#search-faq { height: auto; padding: 10px; } @media screen and (max-width: 1480px) { body.newsPage footer .left-footer-fig1 { left: -999px; transition: all .5s; } } @media screen and (max-width: 1480px) { body.newsPage footer .right-footer-fig1 { right: -999px; transition: all .5s; } } body.homePage .lnews, body.lotusPage .lnews, body.lanternsPage .lnews, body.clankPage .lnews, body.clankInSpacePage .lnews, body.clankSunkenTreasuresPage .lnews { padding: 0; } @media screen and (max-width: 420px) { body.homePage .lnews .blog-posts:nth-of-type(n + 2), body.lotusPage .lnews .blog-posts:nth-of-type(n + 2), body.lanternsPage .lnews .blog-posts:nth-of-type(n + 2), body.clankPage .lnews .blog-posts:nth-of-type(n + 2), body.clankInSpacePage .lnews .blog-posts:nth-of-type(n + 2), body.clankSunkenTreasuresPage .lnews .blog-posts:nth-of-type(n + 2) { display: none; } } body.homePage { background: #06080b; border-top: 1px solid #1e2129; } body.eternalPage section.lnews, body.newsPage section.lnews { clear: both; background: #06080b; border-top: 1px solid #1e2129; padding: 40px 0 40px 0; } @media screen and (max-width: 768px) { body.eternalPage section.lnews, body.newsPage section.lnews { padding: 0 0 10px 0; } } body.eternalPage section.lnews h1, body.newsPage section.lnews h1 { font-size: 2.45em; font-weight: 400; } @media screen and (max-width: 768px) { body.eternalPage section.lnews h1, body.newsPage section.lnews h1 { text-align: left; margin-top: 10px; } } body.eternalPage section.lnews h1 a.sm_link, body.newsPage section.lnews h1 a.sm_link { font-weight: 600; font-size: 0.5em; color: #abdeff; margin-left: 12px; text-decoration: underline; margin-bottom: 4px; } body.eternalPage section.lnews h2, body.newsPage section.lnews h2 { font-size: 2.45em; font-weight: 400; } @media screen and (max-width: 768px) { body.eternalPage section.lnews h2, body.newsPage section.lnews h2 { text-align: left; margin-top: 10px; } } body.eternalPage section.lnews h2 a.sm_link, body.newsPage section.lnews h2 a.sm_link { font-weight: 600; font-size: 0.5em; color: #abdeff; margin-left: 12px; text-decoration: underline; margin-bottom: 4px; } body.eternalPage section.lnews .container, body.newsPage section.lnews .container { padding: 0 !important; z-index: 99; position: relative; } body.eternalPage section.lnews .container .blog-posts, body.newsPage section.lnews .container .blog-posts { padding: 0 3px 0 3px !important; } body.eternalPage section.lnews .container .blog-posts:first-child, body.newsPage section.lnews .container .blog-posts:first-child { padding-left: 0 !important; } body.eternalPage section.lnews .container .blog-posts:last-child, body.newsPage section.lnews .container .blog-posts:last-child { padding-right: 0 !important; } body.eternalPage section.lnews .container .blog-posts:hover .bp-content .bp-title h2, body.newsPage section.lnews .container .blog-posts:hover .bp-content .bp-title h2 { color: #abdeff; } body.eternalPage section.lnews .container .blog-posts a, body.newsPage section.lnews .container .blog-posts a { text-decoration: none; color: #fff; } body.eternalPage section.lnews .container .blog-posts a:hover, body.newsPage section.lnews .container .blog-posts a:hover { text-decoration: none; color: #fff; } body.eternalPage section.lnews .container .blog-posts .bp-content, body.newsPage section.lnews .container .blog-posts .bp-content { background-color: #000; position: relative; height: 350px; } body.eternalPage section.lnews .container .blog-posts .bp-content .bpImg, body.newsPage section.lnews .container .blog-posts .bp-content .bpImg { height: 218px; position: relative; } body.eternalPage section.lnews .container .blog-posts .bp-content .bpImg.wm-legends .bp-wm, body.newsPage section.lnews .container .blog-posts .bp-content .bpImg.wm-legends .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -330px; width: 186px; height: 66px; } body.eternalPage section.lnews .container .blog-posts .bp-content .bpImg.wm-eternal .bp-wm, body.newsPage section.lnews .container .blog-posts .bp-content .bpImg.wm-eternal .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -132px; width: 186px; height: 66px; } body.eternalPage section.lnews .container .blog-posts .bp-content .bpImg.wm-clank .bp-wm, body.newsPage section.lnews .container .blog-posts .bp-content .bpImg.wm-clank .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -66px; width: 186px; height: 66px; } body.eternalPage section.lnews .container .blog-posts .bp-content .bpImg.wm-lanterns .bp-wm, body.newsPage section.lnews .container .blog-posts .bp-content .bpImg.wm-lanterns .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -264px; width: 186px; height: 66px; } body.eternalPage section.lnews .container .blog-posts .bp-content .bpImg.wm-hangryhords .bp-wm, body.newsPage section.lnews .container .blog-posts .bp-content .bpImg.wm-hangryhords .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -198px; width: 186px; height: 66px; } body.eternalPage section.lnews .container .blog-posts .bp-content .bpImg.wm-lotus .bp-wm, body.newsPage section.lnews .container .blog-posts .bp-content .bpImg.wm-lotus .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -396px; width: 186px; height: 66px; } body.eternalPage section.lnews .container .blog-posts .bp-content .bpImg.wm-dwd .bp-wm, body.newsPage section.lnews .container .blog-posts .bp-content .bpImg.wm-dwd .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -462px; width: 186px; height: 66px; } body.eternalPage section.lnews .container .blog-posts .bp-content .bpImg .bp-title, body.newsPage section.lnews .container .blog-posts .bp-content .bpImg .bp-title { margin: 0; width: 100%; bottom: 0; position: absolute; } body.eternalPage section.lnews .container .blog-posts .bp-content .bpImg .bp-title h2, body.newsPage section.lnews .container .blog-posts .bp-content .bpImg .bp-title h2 { font-size: 1.6em; font-weight: 600; margin: 0; padding: 10px; vertical-align: middle; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) top left repeat; height: 56px; width: 100%; font-family: "Open Sans", sans-serif; } body.eternalPage section.lnews .container .blog-posts .bp-content p, body.newsPage section.lnews .container .blog-posts .bp-content p { padding: 15px 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; } body.eternalPage section.lnews .container .blog-posts .bp-content small, body.newsPage section.lnews .container .blog-posts .bp-content small { font-style: italic; padding: 0 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; position: absolute; bottom: 20px; } body.dune section.lnews, body.dune-immortality section.lnews, body.duneDigital section.lnews { clear: both; padding: 0px 0px 0px 0; } @media screen and (max-width: 768px) { body.dune section.lnews, body.dune-immortality section.lnews, body.duneDigital section.lnews { padding: 0 0 10px 0; } } body.dune section.lnews .row, body.dune-immortality section.lnews .row, body.duneDigital section.lnews .row { padding: 0 3em; } body.dune section.lnews .row.no-pad, body.dune-immortality section.lnews .row.no-pad, body.duneDigital section.lnews .row.no-pad { padding: 0 0; max-width: 100%; } body.dune section.lnews h1, body.dune-immortality section.lnews h1, body.duneDigital section.lnews h1 { font-size: 2.45em; font-weight: 400; } @media screen and (max-width: 768px) { body.dune section.lnews h1, body.dune-immortality section.lnews h1, body.duneDigital section.lnews h1 { text-align: left; margin-top: 10px; } } body.dune section.lnews h1 a.sm_link, body.dune-immortality section.lnews h1 a.sm_link, body.duneDigital section.lnews h1 a.sm_link { font-weight: 600; font-size: 0.5em; color: #abdeff; margin-left: 4em; text-decoration: underline; margin-bottom: 4px; } body.dune section.lnews h2, body.dune-immortality section.lnews h2, body.duneDigital section.lnews h2 { font-size: 2.45em; font-weight: 400; } @media screen and (max-width: 768px) { body.dune section.lnews h2, body.dune-immortality section.lnews h2, body.duneDigital section.lnews h2 { text-align: left; margin-top: 10px; } } body.dune section.lnews h2 a.sm_link, body.dune-immortality section.lnews h2 a.sm_link, body.duneDigital section.lnews h2 a.sm_link { font-weight: 600; font-size: 0.5em; color: #abdeff; margin-left: 12px; text-decoration: underline; margin-bottom: 4px; } body.dune section.lnews h3, body.dune-immortality section.lnews h3, body.duneDigital section.lnews h3 { text-align: left; } body.dune section.lnews .blog-posts, body.dune-immortality section.lnews .blog-posts, body.duneDigital section.lnews .blog-posts { padding: 0 3px 0 3px !important; } body.dune section.lnews .blog-posts:first-child, body.dune-immortality section.lnews .blog-posts:first-child, body.duneDigital section.lnews .blog-posts:first-child { padding-left: 0 !important; } body.dune section.lnews .blog-posts:last-child, body.dune-immortality section.lnews .blog-posts:last-child, body.duneDigital section.lnews .blog-posts:last-child { padding-right: 0 !important; } body.dune section.lnews .blog-posts:hover .bp-content .bp-title h2, body.dune-immortality section.lnews .blog-posts:hover .bp-content .bp-title h2, body.duneDigital section.lnews .blog-posts:hover .bp-content .bp-title h2 { color: #abdeff; } body.dune section.lnews .blog-posts a, body.dune-immortality section.lnews .blog-posts a, body.duneDigital section.lnews .blog-posts a { text-decoration: none; color: #fff; } body.dune section.lnews .blog-posts a:hover, body.dune-immortality section.lnews .blog-posts a:hover, body.duneDigital section.lnews .blog-posts a:hover { text-decoration: none; color: #fff; } body.dune section.lnews .blog-posts .bp-content, body.dune-immortality section.lnews .blog-posts .bp-content, body.duneDigital section.lnews .blog-posts .bp-content { background-color: #000; position: relative; height: 350px; } body.dune section.lnews .blog-posts .bp-content .bpImg, body.dune-immortality section.lnews .blog-posts .bp-content .bpImg, body.duneDigital section.lnews .blog-posts .bp-content .bpImg { height: 218px; position: relative; } body.dune section.lnews .blog-posts .bp-content .bpImg.wm-legends .bp-wm, body.dune-immortality section.lnews .blog-posts .bp-content .bpImg.wm-legends .bp-wm, body.duneDigital section.lnews .blog-posts .bp-content .bpImg.wm-legends .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -330px; width: 186px; height: 66px; } body.dune section.lnews .blog-posts .bp-content .bpImg.wm-eternal .bp-wm, body.dune-immortality section.lnews .blog-posts .bp-content .bpImg.wm-eternal .bp-wm, body.duneDigital section.lnews .blog-posts .bp-content .bpImg.wm-eternal .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -132px; width: 186px; height: 66px; } body.dune section.lnews .blog-posts .bp-content .bpImg.wm-clank .bp-wm, body.dune-immortality section.lnews .blog-posts .bp-content .bpImg.wm-clank .bp-wm, body.duneDigital section.lnews .blog-posts .bp-content .bpImg.wm-clank .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -66px; width: 186px; height: 66px; } body.dune section.lnews .blog-posts .bp-content .bpImg.wm-lanterns .bp-wm, body.dune-immortality section.lnews .blog-posts .bp-content .bpImg.wm-lanterns .bp-wm, body.duneDigital section.lnews .blog-posts .bp-content .bpImg.wm-lanterns .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -264px; width: 186px; height: 66px; } body.dune section.lnews .blog-posts .bp-content .bpImg.wm-hangryhords .bp-wm, body.dune-immortality section.lnews .blog-posts .bp-content .bpImg.wm-hangryhords .bp-wm, body.duneDigital section.lnews .blog-posts .bp-content .bpImg.wm-hangryhords .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -198px; width: 186px; height: 66px; } body.dune section.lnews .blog-posts .bp-content .bpImg.wm-lotus .bp-wm, body.dune-immortality section.lnews .blog-posts .bp-content .bpImg.wm-lotus .bp-wm, body.duneDigital section.lnews .blog-posts .bp-content .bpImg.wm-lotus .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -396px; width: 186px; height: 66px; } body.dune section.lnews .blog-posts .bp-content .bpImg.wm-dwd .bp-wm, body.dune-immortality section.lnews .blog-posts .bp-content .bpImg.wm-dwd .bp-wm, body.duneDigital section.lnews .blog-posts .bp-content .bpImg.wm-dwd .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -462px; width: 186px; height: 66px; } body.dune section.lnews .blog-posts .bp-content .bpImg .bp-title, body.dune-immortality section.lnews .blog-posts .bp-content .bpImg .bp-title, body.duneDigital section.lnews .blog-posts .bp-content .bpImg .bp-title { margin: 0; width: 100%; bottom: 0; position: absolute; } body.dune section.lnews .blog-posts .bp-content .bpImg .bp-title h2, body.dune-immortality section.lnews .blog-posts .bp-content .bpImg .bp-title h2, body.duneDigital section.lnews .blog-posts .bp-content .bpImg .bp-title h2 { font-size: 1.6em; font-weight: 600; margin: 0; padding: 10px; vertical-align: middle; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) top left repeat; height: 56px; width: 100%; font-family: "Open Sans", sans-serif; } body.dune section.lnews .blog-posts .bp-content p, body.dune-immortality section.lnews .blog-posts .bp-content p, body.duneDigital section.lnews .blog-posts .bp-content p { padding: 15px 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; } body.dune section.lnews .blog-posts .bp-content small, body.dune-immortality section.lnews .blog-posts .bp-content small, body.duneDigital section.lnews .blog-posts .bp-content small { font-style: italic; padding: 0 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; position: absolute; bottom: 5px; } body.grmPage div.lnews { padding: 40px 0; } body.grmPage div.lnews h1, body.grmPage div.lnews h2 { font-size: 2.45em; font-weight: 400; } @media screen and (max-width: 767px) { body.grmPage div.lnews h1, body.grmPage div.lnews h2 { text-align: left; margin-top: 10px; } } body.grmPage div.lnews h1 a.sm_link, body.grmPage div.lnews h2 a.sm_link { font-weight: 600; font-size: 0.5em; color: #abdeff; margin-left: 12px; text-decoration: underline; margin-bottom: 4px; } body.grmPage div.lnews .blog-posts { width: 33.3333333%; float: left; } body.grmPage div.lnews .blog-posts a, body.grmPage div.lnews .blog-posts a:hover { text-decoration: none; color: #fff; } body.grmPage div.lnews .blog-posts:hover .bpImg { transform: scale(1.05); transition: all .5s; } body.grmPage div.lnews .blog-posts:nth-of-type(2) { padding: 0 1em; } @media screen and (max-width: 992px) { body.grmPage div.lnews .blog-posts { width: 50%; } body.grmPage div.lnews .blog-posts:nth-of-type(2) { padding-right: 0; } body.grmPage div.lnews .blog-posts:nth-of-type(3) { display: none; } } @media screen and (max-width: 640px) { body.grmPage div.lnews .blog-posts { width: 80%; margin-left: 10%; } body.grmPage div.lnews .blog-posts:nth-of-type(2) { display: none; } } @media screen and (max-width: 420px) { body.grmPage div.lnews .blog-posts { width: 100%; margin-left: 0; } } body.grmPage div.lnews { clear: both; padding: 0px 0px 0px 0; } @media screen and (max-width: 768px) { body.grmPage div.lnews { padding: 0 0 10px 0; } } body.grmPage div.lnews .row { padding: 0 3em; } body.grmPage div.lnews .row.no-pad { padding: 0 0; } body.grmPage div.lnews h1 { font-size: 2.45em; font-weight: 400; } @media screen and (max-width: 768px) { body.grmPage div.lnews h1 { text-align: left; margin-top: 10px; } } body.grmPage div.lnews h1 a.sm_link { font-weight: 600; font-size: 0.5em; color: #abdeff; margin-left: 4em; text-decoration: underline; margin-bottom: 4px; } body.grmPage div.lnews h2 { font-size: 2.45em; font-weight: 400; } @media screen and (max-width: 768px) { body.grmPage div.lnews h2 { text-align: left; margin-top: 10px; } } body.grmPage div.lnews h2 a.sm_link { font-weight: 600; font-size: 0.5em; color: #abdeff; margin-left: 12px; text-decoration: underline; margin-bottom: 4px; } body.grmPage div.lnews .blog-posts { padding: 0 3px 0 3px !important; } body.grmPage div.lnews .blog-posts:first-child { padding-left: 0 !important; } body.grmPage div.lnews .blog-posts:last-child { padding-right: 0 !important; } body.grmPage div.lnews .blog-posts:hover .bp-content .bp-title h2 { color: #abdeff; } body.grmPage div.lnews .blog-posts a { text-decoration: none; color: #fff; } body.grmPage div.lnews .blog-posts a:hover { text-decoration: none; color: #fff; } body.grmPage div.lnews .blog-posts .bp-content { background-color: #000; position: relative; height: 350px; } body.grmPage div.lnews .blog-posts .bp-content .bpImg { height: 218px; position: relative; } body.grmPage div.lnews .blog-posts .bp-content .bpImg.wm-legends .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -330px; width: 186px; height: 66px; } body.grmPage div.lnews .blog-posts .bp-content .bpImg.wm-eternal .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -132px; width: 186px; height: 66px; } body.grmPage div.lnews .blog-posts .bp-content .bpImg.wm-clank .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -66px; width: 186px; height: 66px; } body.grmPage div.lnews .blog-posts .bp-content .bpImg.wm-lanterns .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -264px; width: 186px; height: 66px; } body.grmPage div.lnews .blog-posts .bp-content .bpImg.wm-hangryhords .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -198px; width: 186px; height: 66px; } body.grmPage div.lnews .blog-posts .bp-content .bpImg.wm-lotus .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -396px; width: 186px; height: 66px; } body.grmPage div.lnews .blog-posts .bp-content .bpImg.wm-dwd .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -462px; width: 186px; height: 66px; } body.grmPage div.lnews .blog-posts .bp-content .bpImg .bp-title { margin: 0; width: 100%; bottom: 0; position: absolute; } body.grmPage div.lnews .blog-posts .bp-content .bpImg .bp-title h2 { font-size: 1.6em; font-weight: 600; margin: 0; padding: 10px; vertical-align: middle; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) top left repeat; height: 56px; width: 100%; font-family: "Open Sans", sans-serif; } body.grmPage div.lnews .blog-posts .bp-content p { padding: 15px 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; } body.grmPage div.lnews .blog-posts .bp-content small { font-style: italic; padding: 0 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; position: absolute; bottom: 20px; } body.foxPage div.lnews { padding: 40px 0; } body.foxPage div.lnews h1, body.foxPage div.lnews h2 { font-size: 2.45em; font-weight: 400; } @media screen and (max-width: 767px) { body.foxPage div.lnews h1, body.foxPage div.lnews h2 { text-align: left; margin-top: 10px; } } body.foxPage div.lnews h1 a.sm_link, body.foxPage div.lnews h2 a.sm_link { font-weight: 600; font-size: 0.5em; color: #abdeff; margin-left: 12px; text-decoration: underline; margin-bottom: 4px; } body.foxPage div.lnews .blog-posts { width: 33.3333333%; float: left; } body.foxPage div.lnews .blog-posts a, body.foxPage div.lnews .blog-posts a:hover { text-decoration: none; color: #fff; } body.foxPage div.lnews .blog-posts:hover .bpImg { transform: scale(1.05); transition: all .5s; } body.foxPage div.lnews .blog-posts:nth-of-type(2) { padding: 0 1em; } @media screen and (max-width: 992px) { body.foxPage div.lnews .blog-posts { width: 50%; } body.foxPage div.lnews .blog-posts:nth-of-type(2) { padding-right: 0; } body.foxPage div.lnews .blog-posts:nth-of-type(3) { display: none; } } @media screen and (max-width: 640px) { body.foxPage div.lnews .blog-posts { width: 80%; margin-left: 10%; } body.foxPage div.lnews .blog-posts:nth-of-type(2) { display: none; } } @media screen and (max-width: 420px) { body.foxPage div.lnews .blog-posts { width: 100%; margin-left: 0; } } body.foxPage div.lnews { clear: both; padding: 0px 0px 0px 0; } @media screen and (max-width: 768px) { body.foxPage div.lnews { padding: 0 0 10px 0; } } body.foxPage div.lnews .row { padding: 0 3em; } body.foxPage div.lnews .row.no-pad { padding: 0 0; } body.foxPage div.lnews h1 { font-size: 2.45em; font-weight: 400; } @media screen and (max-width: 768px) { body.foxPage div.lnews h1 { text-align: left; margin-top: 10px; } } body.foxPage div.lnews h1 a.sm_link { font-weight: 600; font-size: 0.5em; color: #abdeff; margin-left: 4em; text-decoration: underline; margin-bottom: 4px; } body.foxPage div.lnews h2 { font-size: 2.45em; font-weight: 400; } @media screen and (max-width: 768px) { body.foxPage div.lnews h2 { text-align: left; margin-top: 10px; } } body.foxPage div.lnews h2 a.sm_link { font-weight: 600; font-size: 0.5em; color: #abdeff; margin-left: 12px; text-decoration: underline; margin-bottom: 4px; } body.foxPage div.lnews .blog-posts { padding: 0 3px 0 3px !important; } body.foxPage div.lnews .blog-posts:first-child { padding-left: 0 !important; } body.foxPage div.lnews .blog-posts:last-child { padding-right: 0 !important; } body.foxPage div.lnews .blog-posts:hover .bp-content .bp-title h2 { color: #abdeff; } body.foxPage div.lnews .blog-posts a { text-decoration: none; color: #fff; } body.foxPage div.lnews .blog-posts a:hover { text-decoration: none; color: #fff; } body.foxPage div.lnews .blog-posts .bp-content { background-color: #000; position: relative; height: 350px; } body.foxPage div.lnews .blog-posts .bp-content .bpImg { height: 218px; position: relative; } body.foxPage div.lnews .blog-posts .bp-content .bpImg.wm-legends .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -330px; width: 186px; height: 66px; } body.foxPage div.lnews .blog-posts .bp-content .bpImg.wm-eternal .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -132px; width: 186px; height: 66px; } body.foxPage div.lnews .blog-posts .bp-content .bpImg.wm-clank .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -66px; width: 186px; height: 66px; } body.foxPage div.lnews .blog-posts .bp-content .bpImg.wm-lanterns .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -264px; width: 186px; height: 66px; } body.foxPage div.lnews .blog-posts .bp-content .bpImg.wm-hangryhords .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -198px; width: 186px; height: 66px; } body.foxPage div.lnews .blog-posts .bp-content .bpImg.wm-lotus .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -396px; width: 186px; height: 66px; } body.foxPage div.lnews .blog-posts .bp-content .bpImg.wm-dwd .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -462px; width: 186px; height: 66px; } body.foxPage div.lnews .blog-posts .bp-content .bpImg .bp-title { margin: 0; width: 100%; bottom: 0; position: absolute; } body.foxPage div.lnews .blog-posts .bp-content .bpImg .bp-title h2 { font-size: 1.6em; font-weight: 600; margin: 0; padding: 10px; vertical-align: middle; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) top left repeat; height: 56px; width: 100%; font-family: "Open Sans", sans-serif; } body.foxPage div.lnews .blog-posts .bp-content p { padding: 15px 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; } body.foxPage div.lnews .blog-posts .bp-content small { font-style: italic; padding: 0 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; position: absolute; bottom: 20px; } body.wog section.lnews { padding: 40px 0; clear: both; padding: 0px 0px 0px 0; } body.wog section.lnews h1, body.wog section.lnews h2 { text-align: center; font-size: 52px; font-weight: 400; } @media screen and (max-width: 767px) { body.wog section.lnews h1, body.wog section.lnews h2 { margin-top: 10px; } } body.wog section.lnews h1 .header-decoration, body.wog section.lnews h2 .header-decoration { margin-top: -10px; width: 41px; height: 37px; } body.wog section.lnews h1 .left, body.wog section.lnews h2 .left { transform: scaleX(-1); } body.wog section.lnews .link-container { clear: both; font-size: 18px; padding: 20px; text-align: center; } body.wog section.lnews .link-container a.sm_link { color: white; text-decoration: underline; } body.wog section.lnews .blog-posts { width: 33.3333333%; float: left; } body.wog section.lnews .blog-posts a, body.wog section.lnews .blog-posts a:hover { text-decoration: none; color: #fff; } body.wog section.lnews .blog-posts:hover .bpImg { transform: scale(1.05); transition: all .5s; } body.wog section.lnews .blog-posts:nth-of-type(2) { padding: 0 1em; } @media screen and (max-width: 992px) { body.wog section.lnews .blog-posts { width: 50%; } body.wog section.lnews .blog-posts:nth-of-type(2) { padding-right: 0; } body.wog section.lnews .blog-posts:nth-of-type(3) { display: none; } } @media screen and (max-width: 640px) { body.wog section.lnews .blog-posts { width: 80%; margin-left: 10%; } body.wog section.lnews .blog-posts:nth-of-type(2) { display: none; } } @media screen and (max-width: 420px) { body.wog section.lnews .blog-posts { width: 100%; margin-left: 0; } } @media screen and (max-width: 768px) { body.wog section.lnews { padding: 0 0 10px 0; } } body.wog section.lnews .row { padding: 0 3em; } body.wog section.lnews .row.no-pad { padding: 0 0; } body.wog section.lnews .blog-posts { padding: 0 3px 0 3px !important; } body.wog section.lnews .blog-posts:first-child { padding-left: 0 !important; } body.wog section.lnews .blog-posts:last-child { padding-right: 0 !important; } body.wog section.lnews .blog-posts:hover .bp-content .bp-title h2 { color: #abdeff; } body.wog section.lnews .blog-posts a { text-decoration: none; color: #fff; } body.wog section.lnews .blog-posts a:hover { text-decoration: none; color: #fff; } body.wog section.lnews .blog-posts .bp-content { background-color: #000; position: relative; height: 350px; } body.wog section.lnews .blog-posts .bp-content .bpImg { height: 218px; position: relative; } body.wog section.lnews .blog-posts .bp-content .bpImg.wm-legends .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -330px; width: 186px; height: 66px; } body.wog section.lnews .blog-posts .bp-content .bpImg.wm-eternal .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -132px; width: 186px; height: 66px; } body.wog section.lnews .blog-posts .bp-content .bpImg.wm-clank .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -66px; width: 186px; height: 66px; } body.wog section.lnews .blog-posts .bp-content .bpImg.wm-lanterns .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -264px; width: 186px; height: 66px; } body.wog section.lnews .blog-posts .bp-content .bpImg.wm-hangryhords .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -198px; width: 186px; height: 66px; } body.wog section.lnews .blog-posts .bp-content .bpImg.wm-lotus .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -396px; width: 186px; height: 66px; } body.wog section.lnews .blog-posts .bp-content .bpImg.wm-dwd .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -462px; width: 186px; height: 66px; } body.wog section.lnews .blog-posts .bp-content .bpImg .bp-title { margin: 0; width: 100%; bottom: 0; position: absolute; } body.wog section.lnews .blog-posts .bp-content .bpImg .bp-title h2 { font-size: 1.6em; font-weight: 600; margin: 0; padding: 10px; vertical-align: middle; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) top left repeat; height: 56px; width: 100%; font-family: "Open Sans", sans-serif; } body.wog section.lnews .blog-posts .bp-content p { padding: 15px 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; } body.wog section.lnews .blog-posts .bp-content small { font-style: italic; padding: 0 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; position: absolute; bottom: 20px; } body.everdell section.lnews { padding: 40px 0; clear: both; padding: 0px 0px 0px 0; } body.everdell section.lnews .container { width: 100%; } body.everdell section.lnews .news-sun { float: right; height: auto; margin: 50px 25px 0 0; max-width: 25%; } @media screen and (max-width: 992px) { body.everdell section.lnews .news-sun { display: none; } } body.everdell section.lnews h1, body.everdell section.lnews h2 { text-align: center; font-size: 52px; font-weight: 400; } @media screen and (max-width: 767px) { body.everdell section.lnews h1, body.everdell section.lnews h2 { margin-top: 10px; } } body.everdell section.lnews h1 .header-decoration, body.everdell section.lnews h2 .header-decoration { margin-top: -10px; width: 41px; height: 37px; } body.everdell section.lnews h1 .left, body.everdell section.lnews h2 .left { transform: scaleX(-1); } body.everdell section.lnews .link-container { clear: left; font-size: 18px; padding: 20px; text-align: left; } body.everdell section.lnews .link-container a.sm_link { color: #DEC38A; text-decoration: underline; } body.everdell section.lnews .blog-posts { width: 24%; float: left; } body.everdell section.lnews .blog-posts a, body.everdell section.lnews .blog-posts a:hover { text-decoration: none; color: #fff; } body.everdell section.lnews .blog-posts:nth-of-type(4) { display: none; } body.everdell section.lnews .blog-posts:hover .bpImg { transform: scale(1.05); transition: all .5s; } body.everdell section.lnews .blog-posts:nth-of-type(2) { padding: 0 1em; } @media screen and (max-width: 1620px) { body.everdell section.lnews .blog-posts { width: 34%; } body.everdell section.lnews .blog-posts:nth-of-type(2) { padding-right: 0; } body.everdell section.lnews .blog-posts:nth-of-type(3) { display: none; } } @media screen and (max-width: 992px) { body.everdell section.lnews .blog-posts { width: 49%; } } @media screen and (max-width: 767px) { body.everdell section.lnews .blog-posts { width: 80%; margin-left: 10%; } body.everdell section.lnews .blog-posts:nth-of-type(2) { display: none; } } @media screen and (max-width: 420px) { body.everdell section.lnews .blog-posts { width: 100%; margin-left: 0; } } @media screen and (max-width: 768px) { body.everdell section.lnews { padding: 0 0 10px 0; } } body.everdell section.lnews .row { padding: 0 3em; } body.everdell section.lnews .row.no-pad { padding: 0 0; } body.everdell section.lnews .blog-posts { padding: 0 3px 0 3px !important; } body.everdell section.lnews .blog-posts:first-child { padding-left: 0 !important; } body.everdell section.lnews .blog-posts:last-child { padding-right: 0 !important; } body.everdell section.lnews .blog-posts:hover .bp-content .bp-title h2 { color: #abdeff; } body.everdell section.lnews .blog-posts a { text-decoration: none; color: #fff; } body.everdell section.lnews .blog-posts a:hover { text-decoration: none; color: #fff; } body.everdell section.lnews .blog-posts .bp-content { background-color: #000; position: relative; height: 350px; } body.everdell section.lnews .blog-posts .bp-content .bpImg { height: 218px; position: relative; } body.everdell section.lnews .blog-posts .bp-content .bpImg.wm-legends .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -330px; width: 186px; height: 66px; } body.everdell section.lnews .blog-posts .bp-content .bpImg.wm-eternal .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -132px; width: 186px; height: 66px; } body.everdell section.lnews .blog-posts .bp-content .bpImg.wm-clank .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -66px; width: 186px; height: 66px; } body.everdell section.lnews .blog-posts .bp-content .bpImg.wm-lanterns .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -264px; width: 186px; height: 66px; } body.everdell section.lnews .blog-posts .bp-content .bpImg.wm-hangryhords .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -198px; width: 186px; height: 66px; } body.everdell section.lnews .blog-posts .bp-content .bpImg.wm-lotus .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -396px; width: 186px; height: 66px; } body.everdell section.lnews .blog-posts .bp-content .bpImg.wm-dwd .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -462px; width: 186px; height: 66px; } body.everdell section.lnews .blog-posts .bp-content .bpImg .bp-title { margin: 0; width: 100%; bottom: 0; position: absolute; } body.everdell section.lnews .blog-posts .bp-content .bpImg .bp-title h2 { font-size: 1.6em; font-weight: 600; margin: 0; padding: 10px; vertical-align: middle; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) top left repeat; height: 56px; width: 100%; font-family: "Open Sans", sans-serif; } body.everdell section.lnews .blog-posts .bp-content p { padding: 15px 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; } body.everdell section.lnews .blog-posts .bp-content small { font-style: italic; padding: 0 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; } body.munchkin section.lnews { padding: 40px 0; clear: both; padding: 0px 0px 0px 0; } body.munchkin section.lnews .container { width: 100%; } body.munchkin section.lnews .news-content { z-index: 10; position: relative; } body.munchkin section.lnews h1, body.munchkin section.lnews h2 { text-align: center; font-size: 52px; font-weight: 400; } @media screen and (max-width: 767px) { body.munchkin section.lnews h1, body.munchkin section.lnews h2 { margin-top: 10px; } } body.munchkin section.lnews h1 .header-decoration, body.munchkin section.lnews h2 .header-decoration { margin-top: -10px; width: 41px; height: 37px; } body.munchkin section.lnews h1 .left, body.munchkin section.lnews h2 .left { transform: scaleX(-1); } body.munchkin section.lnews .link-container { clear: left; font-size: 18px; padding: 20px 130px 20px 20px; text-align: center; } body.munchkin section.lnews .link-container a.sm_link { color: #DEC38A; text-decoration: underline; } body.munchkin section.lnews .blog-posts { width: 30%; float: left; } body.munchkin section.lnews .blog-posts a, body.munchkin section.lnews .blog-posts a:hover { text-decoration: none; color: #fff; } body.munchkin section.lnews .blog-posts:nth-of-type(4) { display: none; } body.munchkin section.lnews .blog-posts:hover .bpImg { transform: scale(1.05); transition: all .5s; } body.munchkin section.lnews .blog-posts:nth-of-type(2) { padding: 0 1em; } @media screen and (max-width: 1200px) { body.munchkin section.lnews .blog-posts { width: 70%; display: block; margin-bottom: 10px; } body.munchkin section.lnews .blog-posts:nth-of-type(3) { display: none; } } @media screen and (max-width: 420px) { body.munchkin section.lnews .blog-posts { width: 100%; margin-left: 0; } } @media screen and (max-width: 768px) { body.munchkin section.lnews { padding: 0 0 10px 0; } } body.munchkin section.lnews .row { padding: 0 3em; } body.munchkin section.lnews .row.no-pad { padding: 0 0; } body.munchkin section.lnews .blog-posts { padding: 0 3px 0 3px !important; } body.munchkin section.lnews .blog-posts:first-child { padding-left: 0 !important; } body.munchkin section.lnews .blog-posts:last-child { padding-right: 0 !important; } body.munchkin section.lnews .blog-posts:hover .bp-content .bp-title h2 { color: #abdeff; } body.munchkin section.lnews .blog-posts a { text-decoration: none; color: #fff; } body.munchkin section.lnews .blog-posts a:hover { text-decoration: none; color: #fff; } body.munchkin section.lnews .blog-posts .bp-content { background-color: #000; position: relative; height: 350px; } body.munchkin section.lnews .blog-posts .bp-content .bpImg { height: 218px; position: relative; } body.munchkin section.lnews .blog-posts .bp-content .bpImg.wm-legends .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -330px; width: 186px; height: 66px; } body.munchkin section.lnews .blog-posts .bp-content .bpImg.wm-eternal .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -132px; width: 186px; height: 66px; } body.munchkin section.lnews .blog-posts .bp-content .bpImg.wm-clank .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -66px; width: 186px; height: 66px; } body.munchkin section.lnews .blog-posts .bp-content .bpImg.wm-lanterns .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -264px; width: 186px; height: 66px; } body.munchkin section.lnews .blog-posts .bp-content .bpImg.wm-hangryhords .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -198px; width: 186px; height: 66px; } body.munchkin section.lnews .blog-posts .bp-content .bpImg.wm-lotus .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -396px; width: 186px; height: 66px; } body.munchkin section.lnews .blog-posts .bp-content .bpImg.wm-dwd .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -462px; width: 186px; height: 66px; } body.munchkin section.lnews .blog-posts .bp-content .bpImg .bp-title { margin: 0; width: 100%; bottom: 0; position: absolute; } body.munchkin section.lnews .blog-posts .bp-content .bpImg .bp-title h2 { font-size: 1.6em; font-weight: 600; margin: 0; padding: 10px; vertical-align: middle; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) top left repeat; height: 56px; width: 100%; font-family: "Open Sans", sans-serif; } body.munchkin section.lnews .blog-posts .bp-content p { padding: 15px 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; } body.munchkin section.lnews .blog-posts .bp-content small { font-style: italic; padding: 0 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; } body.wild section.lnews, body.invincible section.lnews, body.dune-immortality-uprising section.lnews { padding: 40px 0; min-height: 350px; margin-top: 20px; clear: both; padding: 0px 0px 0px 0; } body.wild section.lnews h1, body.wild section.lnews h2, body.invincible section.lnews h1, body.invincible section.lnews h2, body.dune-immortality-uprising section.lnews h1, body.dune-immortality-uprising section.lnews h2 { text-align: center; font-size: 52px; font-weight: 400; } @media screen and (max-width: 767px) { body.wild section.lnews h1, body.wild section.lnews h2, body.invincible section.lnews h1, body.invincible section.lnews h2, body.dune-immortality-uprising section.lnews h1, body.dune-immortality-uprising section.lnews h2 { margin-top: 10px; } } body.wild section.lnews h1 .header-decoration, body.wild section.lnews h2 .header-decoration, body.invincible section.lnews h1 .header-decoration, body.invincible section.lnews h2 .header-decoration, body.dune-immortality-uprising section.lnews h1 .header-decoration, body.dune-immortality-uprising section.lnews h2 .header-decoration { margin-top: -10px; width: 41px; height: 37px; } body.wild section.lnews h1 .left, body.wild section.lnews h2 .left, body.invincible section.lnews h1 .left, body.invincible section.lnews h2 .left, body.dune-immortality-uprising section.lnews h1 .left, body.dune-immortality-uprising section.lnews h2 .left { transform: scaleX(-1); } body.wild section.lnews .link-container, body.invincible section.lnews .link-container, body.dune-immortality-uprising section.lnews .link-container { clear: both; font-size: 18px; padding: 20px; text-align: center; } body.wild section.lnews .link-container a.sm_link, body.invincible section.lnews .link-container a.sm_link, body.dune-immortality-uprising section.lnews .link-container a.sm_link { color: white; text-decoration: underline; } body.wild section.lnews .blog-posts, body.invincible section.lnews .blog-posts, body.dune-immortality-uprising section.lnews .blog-posts { width: 33.3333333%; float: left; } body.wild section.lnews .blog-posts a, body.wild section.lnews .blog-posts a:hover, body.invincible section.lnews .blog-posts a, body.invincible section.lnews .blog-posts a:hover, body.dune-immortality-uprising section.lnews .blog-posts a, body.dune-immortality-uprising section.lnews .blog-posts a:hover { text-decoration: none; color: #fff; } body.wild section.lnews .blog-posts:hover .bpImg, body.invincible section.lnews .blog-posts:hover .bpImg, body.dune-immortality-uprising section.lnews .blog-posts:hover .bpImg { transform: scale(1.05); transition: all .5s; } body.wild section.lnews .blog-posts:nth-of-type(2), body.invincible section.lnews .blog-posts:nth-of-type(2), body.dune-immortality-uprising section.lnews .blog-posts:nth-of-type(2) { padding: 0 1em; } @media screen and (max-width: 992px) { body.wild section.lnews .blog-posts, body.invincible section.lnews .blog-posts, body.dune-immortality-uprising section.lnews .blog-posts { width: 50%; } body.wild section.lnews .blog-posts:nth-of-type(2), body.invincible section.lnews .blog-posts:nth-of-type(2), body.dune-immortality-uprising section.lnews .blog-posts:nth-of-type(2) { padding-right: 0; } body.wild section.lnews .blog-posts:nth-of-type(3), body.invincible section.lnews .blog-posts:nth-of-type(3), body.dune-immortality-uprising section.lnews .blog-posts:nth-of-type(3) { display: none; } } @media screen and (max-width: 640px) { body.wild section.lnews .blog-posts, body.invincible section.lnews .blog-posts, body.dune-immortality-uprising section.lnews .blog-posts { width: 80%; margin-left: 10%; } body.wild section.lnews .blog-posts:nth-of-type(2), body.invincible section.lnews .blog-posts:nth-of-type(2), body.dune-immortality-uprising section.lnews .blog-posts:nth-of-type(2) { display: none; } } @media screen and (max-width: 420px) { body.wild section.lnews .blog-posts, body.invincible section.lnews .blog-posts, body.dune-immortality-uprising section.lnews .blog-posts { width: 100%; margin-left: 0; } } @media screen and (max-width: 768px) { body.wild section.lnews, body.invincible section.lnews, body.dune-immortality-uprising section.lnews { padding: 0 0 10px 0; } } body.wild section.lnews .row, body.invincible section.lnews .row, body.dune-immortality-uprising section.lnews .row { padding: 0 3em; } body.wild section.lnews .row.no-pad, body.invincible section.lnews .row.no-pad, body.dune-immortality-uprising section.lnews .row.no-pad { padding: 0 0; } body.wild section.lnews .blog-posts, body.invincible section.lnews .blog-posts, body.dune-immortality-uprising section.lnews .blog-posts { padding: 0 3px 0 3px !important; } body.wild section.lnews .blog-posts:first-child, body.invincible section.lnews .blog-posts:first-child, body.dune-immortality-uprising section.lnews .blog-posts:first-child { padding-left: 0 !important; } body.wild section.lnews .blog-posts:last-child, body.invincible section.lnews .blog-posts:last-child, body.dune-immortality-uprising section.lnews .blog-posts:last-child { padding-right: 0 !important; } body.wild section.lnews .blog-posts:hover .bp-content .bp-title h2, body.invincible section.lnews .blog-posts:hover .bp-content .bp-title h2, body.dune-immortality-uprising section.lnews .blog-posts:hover .bp-content .bp-title h2 { color: #abdeff; } body.wild section.lnews .blog-posts a, body.invincible section.lnews .blog-posts a, body.dune-immortality-uprising section.lnews .blog-posts a { text-decoration: none; color: #fff; } body.wild section.lnews .blog-posts a:hover, body.invincible section.lnews .blog-posts a:hover, body.dune-immortality-uprising section.lnews .blog-posts a:hover { text-decoration: none; color: #fff; } body.wild section.lnews .blog-posts .bp-content, body.invincible section.lnews .blog-posts .bp-content, body.dune-immortality-uprising section.lnews .blog-posts .bp-content { background-color: #000; position: relative; height: 350px; } body.wild section.lnews .blog-posts .bp-content .bpImg, body.invincible section.lnews .blog-posts .bp-content .bpImg, body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg { height: 218px; position: relative; } body.wild section.lnews .blog-posts .bp-content .bpImg.wm-legends .bp-wm, body.invincible section.lnews .blog-posts .bp-content .bpImg.wm-legends .bp-wm, body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg.wm-legends .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -330px; width: 186px; height: 66px; } body.wild section.lnews .blog-posts .bp-content .bpImg.wm-eternal .bp-wm, body.invincible section.lnews .blog-posts .bp-content .bpImg.wm-eternal .bp-wm, body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg.wm-eternal .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -132px; width: 186px; height: 66px; } body.wild section.lnews .blog-posts .bp-content .bpImg.wm-clank .bp-wm, body.invincible section.lnews .blog-posts .bp-content .bpImg.wm-clank .bp-wm, body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg.wm-clank .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -66px; width: 186px; height: 66px; } body.wild section.lnews .blog-posts .bp-content .bpImg.wm-lanterns .bp-wm, body.invincible section.lnews .blog-posts .bp-content .bpImg.wm-lanterns .bp-wm, body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg.wm-lanterns .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -264px; width: 186px; height: 66px; } body.wild section.lnews .blog-posts .bp-content .bpImg.wm-hangryhords .bp-wm, body.invincible section.lnews .blog-posts .bp-content .bpImg.wm-hangryhords .bp-wm, body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg.wm-hangryhords .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -198px; width: 186px; height: 66px; } body.wild section.lnews .blog-posts .bp-content .bpImg.wm-lotus .bp-wm, body.invincible section.lnews .blog-posts .bp-content .bpImg.wm-lotus .bp-wm, body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg.wm-lotus .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -396px; width: 186px; height: 66px; } body.wild section.lnews .blog-posts .bp-content .bpImg.wm-dwd .bp-wm, body.invincible section.lnews .blog-posts .bp-content .bpImg.wm-dwd .bp-wm, body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg.wm-dwd .bp-wm { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_watermarks.png); background-position: 0px -462px; width: 186px; height: 66px; } body.wild section.lnews .blog-posts .bp-content .bpImg .bp-title, body.invincible section.lnews .blog-posts .bp-content .bpImg .bp-title, body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg .bp-title { margin: 0; width: 100%; bottom: 0; position: absolute; } body.wild section.lnews .blog-posts .bp-content .bpImg .bp-title h2, body.invincible section.lnews .blog-posts .bp-content .bpImg .bp-title h2, body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg .bp-title h2 { font-size: 1.6em; font-weight: 600; margin: 0; padding: 10px; vertical-align: middle; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) top left repeat; height: 56px; width: 100%; font-family: "Open Sans", sans-serif; } body.wild section.lnews .blog-posts .bp-content p, body.invincible section.lnews .blog-posts .bp-content p, body.dune-immortality-uprising section.lnews .blog-posts .bp-content p { padding: 15px 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; } body.wild section.lnews .blog-posts .bp-content small, body.invincible section.lnews .blog-posts .bp-content small, body.dune-immortality-uprising section.lnews .blog-posts .bp-content small { font-style: italic; padding: 0 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; position: absolute; bottom: 20px; } body.invincible section.lnews .blog-posts .bp-content .bpImg, body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg { height: 215px; } @media screen and (min-width: 640px) { body.invincible section.lnews .blog-posts .bp-content .bpImg .bp-title h2, body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg .bp-title h2 { height: 68px; } } div.homeSlider .carousel-fade .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } div.homeSlider .carousel-fade .carousel-inner .active { opacity: 1; } div.homeSlider .carousel-fade .carousel-inner .active.left, div.homeSlider .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } div.homeSlider .carousel-fade .carousel-inner .next.left, div.homeSlider .carousel-fade .carousel-inner .prev.right { opacity: 1; } div.homeSlider .carousel-fade .carousel-control { z-index: 2; } div.homeSlider .item img { -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: bg 35s ease-in-out; animation: bg 35s ease-in-out; } @-webkit-keyframes bg { 0% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1.1); } } @keyframes bg { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } div.homeSlider .container-fluid { padding: 0; } div.homeSlider .carousel-caption div:first-child { animation-delay: 1s; } div.homeSlider .carousel-caption h3:nth-child(2) { animation-delay: 2s; } div.homeSlider .carousel-caption a { animation-delay: 3s; } div.homeSlider .carousel-caption { width: 575px; margin-bottom: 160px; } div.homeSlider .carousel-caption h3 { font-family: LinBiolinum,sans-serif; line-height: 1.2em; margin-bottom: 20px; } div.homeSlider .carousel-caption .paxeast { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/paxeast-2018.png) top center no-repeat; background-size: contain; width: 575px; height: 300px; } div.homeSlider .carousel-caption .heroLOGO_pokemon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_HomeBanner.png); background-position: 0px -2680px; width: 575px; height: 360px; } div.homeSlider .carousel-caption .heroLOGO_EternalA { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_HomeBanner.png); background-position: 0px -1480px; width: 575px; height: 400px; } div.homeSlider .carousel-caption .heroLOGO_clank { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_HomeBanner.png); background-position: 0px -1080px; width: 575px; height: 400px; } div.homeSlider .carousel-caption .heroLOGO_lanterns { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_HomeBanner.png); background-position: 0px -1880px; width: 575px; height: 400px; } div.homeSlider .carousel-caption .heroLOGO_lotus { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/spriteHomeBanner/heroLOGO_lotus.png) 0 0 no-repeat; width: 575px; height: 400px; } div.homeSlider .carousel-indicators li { width: 30px; } div.homeSlider .carousel-indicators li.active { width: 30px; animation-delay: 1s; } .oathbreaker .img-fluid { max-width: 100%; height: auto; } .oathbreaker .brand-logo { max-height: 85px; } .oathbreaker .dark-link { color: #337ab7 !important; } .oathbreaker .banner { background-color: #000000; } .oathbreaker .oathbreaker_header { width: 55%; } @media screen and (max-width: 1200px) { .oathbreaker .oathbreaker_header { width: 75%; } } @media screen and (max-width: 640px) { .oathbreaker .oathbreaker_header { width: 100%; } } .oathbreaker .divider-bar { position: relative; height: 50px; background-color: #202020; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); z-index: 2; } @media screen and (max-width: 640px) { .oathbreaker .divider-bar { height: 25px; } } .oathbreaker main { background: linear-gradient(rgba(0, 0, 0, 0), black), url("https://d19y2ttatozxjp.cloudfront.net/assets/oathbreaker/ScatterPattern_Tile.png"); color: #000; z-index: 0; } .oathbreaker main .main-content { position: relative; } .oathbreaker main .main-content::after { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/oathbreaker/CenterBacker.png"); background-size: contain; opacity: 0.3; top: 0; left: 0; bottom: 0; right: 0; } .oathbreaker main .main-content .centerBox { opacity: 1; padding: 0 4em; } @media screen and (max-width: 640px) { .oathbreaker main .main-content .centerBox { padding: 0 2em; } } .oathbreaker main .main-content section { opacity: 1; padding: 3em 2em; z-index: 2; } @media screen and (max-width: 992px) { .oathbreaker main .main-content section { padding: 3em 0em; } } @media screen and (max-width: 640px) { .oathbreaker main .main-content section { padding: 0em; } } .oathbreaker main .main-content section.section-1 { padding: 0em 2em 3em; } @media screen and (max-width: 640px) { .oathbreaker main .main-content section.section-1 { padding: 0em; } } @media screen and (max-width: 640px) { .oathbreaker main .main-content section.logoFooter { padding: 1em 0 2em; } } .oathbreaker main .main-content section.logoFooter .copy { padding-top: 3em; } .oathbreaker main .main-content section .section-text p, .oathbreaker main .main-content section .section-text li { font-size: 18px; } .oathbreaker main .main-content section .floating-text { position: absolute; } @media screen and (max-width: 992px) { .oathbreaker main .main-content section .floating-text { position: inherit; } } .oathbreaker main .main-content section li { list-style: none; } .oathbreaker main .main-content section li:before { content: ''; display: inline-block; height: 10px; width: 40px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/oathbreaker/BulletPoint.png); background-repeat: no-repeat; background-size: contain; margin-right: 0.5em; } .oathbreaker main .main-content .special-characters { padding-top: 2em; } .oathbreaker main .main-content .game-box { padding-top: 1em; } .oathbreaker main .main-content #got-emailsignup .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/oathbreaker/InputBar.png) no-repeat; background-size: 100% 100%; } .oathbreaker main .main-content #got-emailsignup input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; } .oathbreaker main .main-content #got-emailsignup input:active, .oathbreaker main .main-content #got-emailsignup input:focus { border: none; box-shadow: none; } .oathbreaker main .main-content .red-gold-border-btn { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/oathbreaker/LargeButton_Normal.png"); background-position: 100% 100%; background-size: contain; background-repeat: no-repeat; cursor: pointer; font-size: 28px; padding: 0.5em 1em; margin: 0 auto; width: 346px; position: absolute; left: 0; right: 0; color: #e9ca7a; } .oathbreaker main .main-content .red-gold-border-btn#buy-button { margin-top: 1.5em; } @media screen and (max-width: 992px) { .oathbreaker main .main-content .red-gold-border-btn#buy-button { margin-top: 1em; } } @media screen and (max-width: 640px) { .oathbreaker main .main-content .red-gold-border-btn { width: 316px; font-size: 24px; } } @media screen and (max-width: 320px) { .oathbreaker main .main-content .red-gold-border-btn { width: 275px; font-size: 21px; } } .oathbreaker main .main-content .red-gold-border-btn:hover { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/oathbreaker/LargeButton_Highlighted.png"); } .oathbreaker main .main-content .usa-warning { margin-bottom: 3em; } .oathbreaker .col-correction { margin-top: -10em; margin-bottom: 13em; } @media screen and (max-width: 992px) { .oathbreaker .col-correction-mobile { margin-top: -10em; margin-bottom: 13em; } } .oathbreaker .blog-post a:hover { text-decoration: none; } @media screen and (max-width: 992px) { .oathbreaker .blog-post:nth-child(3) { display: none; } } @media screen and (max-width: 767px) { .oathbreaker .blog-post:nth-child(2) { display: none; } } .oathbreaker .blog-post .bp-content { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/oathbreaker/NewItem_Normal.png); background-repeat: no-repeat; background-size: contain; position: relative; height: 345px; } .oathbreaker .blog-post .bp-content:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/oathbreaker/NewItem_Highlighted.png); } .oathbreaker .blog-post .bp-content .bpImg { position: absolute; background-size: cover; background-repeat: no-repeat; margin: 8px 15px; width: 292px; height: 185px; } @media screen and (max-width: 1200px) { .oathbreaker .blog-post .bp-content .bpImg { margin: 6px 12px; width: 229px; height: 146px; } } @media screen and (max-width: 992px) { .oathbreaker .blog-post .bp-content .bpImg { margin: 7px 14px; width: 277px; height: 176px; } } @media screen and (max-width: 767px) { .oathbreaker .blog-post .bp-content .bpImg { margin: 7px 15px; width: 297px; height: 189px; } } @media screen and (max-width: 640px) { .oathbreaker .blog-post .bp-content .bpImg { margin: 8px 14px; width: 298px; height: 188px; } } @media screen and (max-width: 420px) { .oathbreaker .blog-post .bp-content .bpImg { width: 298px; height: 188px; } } @media screen and (max-width: 375px) { .oathbreaker .blog-post .bp-content .bpImg { width: 277px; height: 175px; } } @media screen and (max-width: 360px) { .oathbreaker .blog-post .bp-content .bpImg { width: 262px; height: 166px; } } @media screen and (max-width: 320px) { .oathbreaker .blog-post .bp-content .bpImg { margin: 6px 12px; width: 226px; height: 144px; } } .oathbreaker .blog-post .bp-content .bp-title { padding-top: 24.5em; font-size: 7px; text-align: center; color: #e9ca7a; } @media screen and (max-width: 1200px) { .oathbreaker .blog-post .bp-content .bp-title { padding-top: 21.5em; font-size: 6px; } } @media screen and (max-width: 992px) { .oathbreaker .blog-post .bp-content .bp-title { padding-top: 26.8em; } } @media screen and (max-width: 767px) { .oathbreaker .blog-post .bp-content .bp-title { padding-top: 31em; } } @media screen and (max-width: 375px) { .oathbreaker .blog-post .bp-content .bp-title { padding-top: 29em; } } @media screen and (max-width: 360px) { .oathbreaker .blog-post .bp-content .bp-title { padding-top: 27em; } } @media screen and (max-width: 320px) { .oathbreaker .blog-post .bp-content .bp-title { padding-top: 23em; } } .oathbreaker .blog-post .bp-content .bp-title h2 { font-size: 2.3em !important; } @media screen and (max-width: 767px) { .oathbreaker .blog-post .bp-content .bp-title h2 { text-align: center !important; } } .oathbreaker .blog-post .bp-content p { position: absolute; color: #000; margin: 247px 20px 0px; width: 282px; } @media screen and (max-width: 1200px) { .oathbreaker .blog-post .bp-content p { margin: 192px 15px 0px; width: 225px; } } @media screen and (max-width: 992px) { .oathbreaker .blog-post .bp-content p { margin: 238px 20px 0px; width: 277px; } } @media screen and (max-width: 767px) { .oathbreaker .blog-post .bp-content p { margin: 252px 20px 0px; width: 286px; } } @media screen and (max-width: 640px) { .oathbreaker .blog-post .bp-content p { margin: 253px 20px 0px; } } @media screen and (max-width: 420px) { .oathbreaker .blog-post .bp-content p { margin: 252px 20px 0px; } } @media screen and (max-width: 375px) { .oathbreaker .blog-post .bp-content p { margin: 238px 20px 0px; } } @media screen and (max-width: 360px) { .oathbreaker .blog-post .bp-content p { margin: 225px 18px 0px; width: 264px; } } @media screen and (max-width: 320px) { .oathbreaker .blog-post .bp-content p { margin: 191px 14px 0px; width: 222px; } } .oathbreaker .blog-post .bp-content .bp-dates { position: absolute; color: #000; margin: 306px 20px 0px; width: 292px; } @media screen and (max-width: 1200px) { .oathbreaker .blog-post .bp-content .bp-dates { margin: 247px 156px 0px; } } @media screen and (max-width: 992px) { .oathbreaker .blog-post .bp-content .bp-dates { margin: 296px 20px 0px; } } @media screen and (max-width: 767px) { .oathbreaker .blog-post .bp-content .bp-dates { margin: 310px 20px 0px; } } @media screen and (max-width: 640px) { .oathbreaker .blog-post .bp-content .bp-dates { margin: 310px 20px 0px; } } @media screen and (max-width: 420px) { .oathbreaker .blog-post .bp-content .bp-dates { margin: 311px 20px 0px; } } @media screen and (max-width: 375px) { .oathbreaker .blog-post .bp-content .bp-dates { margin: 295px 20px 0px; } } @media screen and (max-width: 360px) { .oathbreaker .blog-post .bp-content .bp-dates { margin: 280px 18px 0px; } } @media screen and (max-width: 320px) { .oathbreaker .blog-post .bp-content .bp-dates { margin: 242px 150px 0px; } } @font-face { font-family: 'NorthSea'; src: url("/fonts/CONCURSONORTHSEA_F.woff") format("woff"), url("/fonts/CONCURSONORTHSEA_F.ttf") format("truetype"); } .raiders div.email-error { color: red; text-shadow: none; } .raiders .img-fluid { max-width: 100%; height: auto; } .raiders .flex-display { display: flex; justify-content: center; } .raiders .thank-you-title { font-family: 'NorthSea', serif; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -2px 2px 0 #000, 1px 1px 0 #000; font-size: 80px; } .raiders .thank-you { height: 500px; } .raiders .thank-you .thank-you-character { position: absolute; bottom: -17em; height: 500px; } .raiders .thank-you .thank-you-character.left { left: -20em; } @media screen and (max-width: 992px) { .raiders .thank-you .thank-you-character.left { left: -2em; } } .raiders .thank-you .thank-you-character.right { right: -20em; } @media screen and (max-width: 992px) { .raiders .thank-you .thank-you-character.right { right: -2em; } } @media screen and (max-width: 1200px) { .raiders .thank-you .thank-you-character { bottom: -18em; } } @media screen and (max-width: 992px) { .raiders .thank-you .thank-you-character { bottom: -20em; height: 315px; } } @media screen and (max-width: 767px) { .raiders .thank-you .thank-you-character { display: none; } } .raiders .plank-border { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/raiders/planks.png); background-repeat: repeat-x; background-position: center; width: 100%; height: 29px; } .raiders .banner { background-color: #55C7E5; position: relative; } .raiders .banner .badges { position: absolute; bottom: 0; right: 0; left: 0; margin-left: auto; margin-right: auto; cursor: pointer; z-index: 2; } @media screen and (max-width: 767px) { .raiders .banner .badges { position: inherit; padding-top: 2em; } } .raiders .badge-row { display: flex; flex-wrap: wrap; justify-content: center; padding: 3em 0; } .raiders .buy-badge { margin-bottom: 2em; cursor: pointer; } .raiders .overlay { position: relative; cursor: pointer; } .raiders .overlay:after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: calc(100% - 2em); opacity: 0; background-color: #f3f3f3; border-radius: 12px; } @media screen and (max-width: 1200px) { .raiders .overlay:after { border-radius: 7px; } } .raiders .overlay:hover:after { opacity: 0.5; } .raiders .boat-banner { margin-left: -18.4em; margin-top: -3em; margin-bottom: -50px; } @media screen and (max-width: 992px) { .raiders .boat-banner { margin-left: -6.4em; margin-top: 0; margin-bottom: -22px; } } .raiders .boat-banner.news { align-self: center; flex-shrink: 0; } .raiders main { background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://d19y2ttatozxjp.cloudfront.net/assets/raiders/raiders_webpage_backdrop.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; overflow: hidden; } .raiders main .main-content { background-color: #D5C6AD; } .raiders main .main-content .centerBox { padding: 4em 4em 2em; } @media screen and (max-width: 992px) { .raiders main .main-content .video-container { padding-bottom: 7em; } } @media screen and (max-width: 640px) { .raiders main .main-content .video-container { padding-bottom: 0; } } .raiders main .main-content .zerker-banner { position: absolute; max-width: 770px; top: -7em; pointer-events: none; } @media screen and (max-width: 1200px) { .raiders main .main-content .zerker-banner { max-width: 673px; } } @media screen and (max-width: 640px) { .raiders main .main-content .zerker-banner { display: none; } } .raiders main .main-content .zerker-banner-text { padding-left: 1em; padding-top: 5.5em; font-size: 16px; } @media screen and (max-width: 1200px) { .raiders main .main-content .zerker-banner-text { padding-top: 3.5em; } } @media screen and (max-width: 992px) { .raiders main .main-content .zerker-banner-text { padding-right: 16em; padding-top: 4.5em; font-size: 15px; } } @media screen and (max-width: 767px) { .raiders main .main-content .zerker-banner-text { padding-right: 14em; } } @media screen and (max-width: 667px) { .raiders main .main-content .zerker-banner-text { padding-right: 8em; } } @media screen and (max-width: 640px) { .raiders main .main-content .zerker-banner-text { padding-right: 0; padding-top: 2em; } } .raiders main .main-content section { padding: 3em 0; } .raiders main .main-content section h3 { color: #171613; font-weight: bolder; } .raiders main .main-content section p, .raiders main .main-content section li { font-size: 18px; color: #171613; } .raiders main .main-content section .game-blurb { display: flex; } .raiders main .main-content section .game-blurb .players-icon { max-height: 100px; } .raiders main .main-content section .game-blurb .game-information { align-self: center; font-family: 'NorthSea', serif; padding: 0; list-style: none; } .raiders main .main-content section .game-blurb .game-information li { font-size: 24px; } .raiders main .main-content section.section-2 { padding-bottom: 0; } .raiders main .main-content section .news-banner { display: flex; } .raiders main .main-content section .more-news-wrapper { align-self: center; padding-top: 9em; } @media screen and (max-width: 992px) { .raiders main .main-content section .more-news-wrapper { padding-top: 3em; } } .raiders main .main-content section .more-news-wrapper .more-news { font-size: 16px; } .raiders main .main-content section .news-row { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/raiders/news_backer3.png); margin: 0 -58px; background-size: 30em; background-repeat-y: no-repeat; margin-top: 45px; } @media screen and (max-width: 1200px) { .raiders main .main-content section .news-row { background-size: 24em; } } @media screen and (max-width: 992px) { .raiders main .main-content section .news-row { background-size: 32em; } } .raiders main .main-content #carousel-raiders { padding-bottom: 3em; padding-top: 2em; } .raiders main .main-content #carousel-raiders .carousel-indicators { bottom: 3em; } .raiders main .main-content #carousel-raiders .carousel-control { background-image: none; } .raiders main .main-content #carousel-raiders .carousel-control .glyphicon-chevron-left { width: 60px; height: 65px; margin-left: -2em; margin-top: -1em; } .raiders main .main-content #carousel-raiders .carousel-control .glyphicon-chevron-right { width: 60px; height: 65px; margin-right: -2em; margin-top: -1em; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .raiders main .main-content .carousel img { width: 100%; height: auto; margin: auto; } .raiders main .main-content #raiders-emailsignup .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/raiders/Raiders_Inputfield.png) no-repeat; background-size: 100% 100%; width: 90%; margin: 0 auto; } @media screen and (max-width: 420px) { .raiders main .main-content #raiders-emailsignup .form-group { width: 100%; } } .raiders main .main-content #raiders-emailsignup input { border: none; background: transparent; padding: 0 50px; font-size: 18px; height: 107px; color: #fff; width: 100%; } @media screen and (max-width: 420px) { .raiders main .main-content #raiders-emailsignup input { padding: 0 18px; height: 55px; } } .raiders main .main-content #raiders-emailsignup input::placeholder { color: #fff; } .raiders main .main-content #raiders-emailsignup input:active, .raiders main .main-content #raiders-emailsignup input:focus { border: none; box-shadow: none; outline-color: transparent; } .raiders main .main-content .sign-up-btn { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/raiders/Raiders_Button_SignUp.png); background-size: 100% 100%; background-repeat: no-repeat; background-color: initial; cursor: pointer; margin: 0 auto; height: 64px; width: 256px; } @media screen and (max-width: 420px) { .raiders main .main-content .sign-up-btn { height: 54px; width: inherit; } } .raiders main .main-content .blog-post a { color: #fff; } @media screen and (max-width: 992px) { .raiders main .main-content .blog-post:nth-child(3) { display: none; } } @media screen and (max-width: 767px) { .raiders main .main-content .blog-post:nth-child(2) { display: none; } } .raiders main .main-content .news-article { max-width: 100%; position: relative; height: 375px; margin-top: -30px; / $screen-tiny: 420px; $screen-xsmall: 640px; $screen-small: 767px; $screen-medium: 992px; $screen-large: 1200px; $screen-xlarge: 1320px; / } @media screen and (max-width: 1200px) { .raiders main .main-content .news-article { height: 310px; } } @media screen and (max-width: 992px) { .raiders main .main-content .news-article { height: 354px; } } @media screen and (max-width: 767px) { .raiders main .main-content .news-article { width: 357px; margin: 0 auto; } } @media screen and (max-width: 420px) { .raiders main .main-content .news-article { height: 380px; } } @media screen and (max-width: 414px) { .raiders main .main-content .news-article { height: 350px; } } .raiders main .main-content .news-article .article-frame, .raiders main .main-content .news-article .article-title, .raiders main .main-content .news-article .article-image, .raiders main .main-content .news-article p { position: absolute; left: 0; right: 0; } .raiders main .main-content .news-article .article-frame { z-index: 2; max-height: 100%; } .raiders main .main-content .news-article .article-title { top: 20px; font-family: 'NorthSea', serif; text-align: center; font-size: 26px; z-index: 3; margin-left: 42px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 80%; } @media screen and (max-width: 1200px) { .raiders main .main-content .news-article .article-title { font-size: 20px; top: 16px; } } @media screen and (max-width: 992px) { .raiders main .main-content .news-article .article-title { font-size: 24px; top: 18px; } } @media screen and (max-width: 767px) { .raiders main .main-content .news-article .article-title { top: 20px; } } @media screen and (max-width: 414px) { .raiders main .main-content .news-article .article-title { font-size: 23px; } } @media screen and (max-width: 320px) { .raiders main .main-content .news-article .article-title { font-size: 20px; top: 16px; } } .raiders main .main-content .news-article .article-image { object-fit: cover; object-position: center; top: 61px; width: 270px; height: 213px; margin-left: 52px; } @media screen and (max-width: 1200px) { .raiders main .main-content .news-article .article-image { top: 52px; width: 216px; height: 172px; margin-left: 45px; } } @media screen and (max-width: 992px) { .raiders main .main-content .news-article .article-image { width: 262px; height: 209px; } } @media screen and (max-width: 767px) { .raiders main .main-content .news-article .article-image { top: 58px; width: 260px; height: 211px; margin-left: 53px; } } @media screen and (max-width: 360px) { .raiders main .main-content .news-article .article-image { width: 246px; height: 193px; } } @media screen and (max-width: 320px) { .raiders main .main-content .news-article .article-image { top: 51px; width: 223px; height: 170px; margin-left: 41px; } } .raiders main .main-content .news-article p { color: #fff; text-align: left; z-index: 3; width: 83%; font-size: 14px; top: 278px; margin-left: 41px; } @media screen and (max-width: 1200px) { .raiders main .main-content .news-article p { font-size: 11px; top: 235px; margin-left: 29px; } } @media screen and (max-width: 992px) { .raiders main .main-content .news-article p { font-size: 14px; top: 267px; margin-left: 36px; } } @media screen and (max-width: 767px) { .raiders main .main-content .news-article p { margin-left: 40px; } } @media screen and (max-width: 420px) { .raiders main .main-content .news-article p { top: 275px; } } @media screen and (max-width: 414px) { .raiders main .main-content .news-article p { top: 263px; margin-left: 37px; } } @media screen and (max-width: 360px) { .raiders main .main-content .news-article p { top: 255px; } } @media screen and (max-width: 320px) { .raiders main .main-content .news-article p { font-size: 12px; top: 223px; margin-left: 32px; } } @font-face { font-family: 'Istok'; src: url("/fonts/Istok-Regular.ttf") format("truetype"); } @font-face { font-family: 'Tinos'; src: url("/fonts/Tinos-Regular.ttf") format("truetype"); } .yellow { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/yellow/Y&Y_Background.jpg); background-position: top center; background-size: contain; } .yellow .email-error { text-shadow: none; } .yellow footer { background-color: #000; padding: 3em; } .yellow footer .container { max-width: 100%; } .yellow .img-fluid { max-width: 100%; height: auto; } .yellow .pt-2 { padding-top: 15px; } .yellow .logo { max-height: 135px; width: auto; } .yellow .flex-display { display: flex; justify-content: center; } .yellow .banner { position: relative; } .yellow .banner .badges { position: absolute; bottom: -50px; right: 0; left: 0; margin-left: auto; margin-right: auto; cursor: pointer; z-index: 2; } @media screen and (max-width: 1200px) { .yellow .banner .badges { bottom: -55px; } } @media screen and (max-width: 992px) { .yellow .banner .badges { bottom: -70px; } } .yellow .thank-you-header { font-family: 'Istok', serif; color: #000; } .yellow .badge-row { display: flex; flex-wrap: wrap; justify-content: center; padding: 3em 0; } .yellow .buy-badge { margin-bottom: 2em; cursor: pointer; } @media screen and (max-width: 992px) { .yellow .buy-badge.only-one { max-height: 55px; } } .yellow .overlay { position: relative; cursor: pointer; } .yellow .overlay:after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: calc(100% - 2em); opacity: 0; background-color: #f3f3f3; border-radius: 12px; } @media screen and (max-width: 1200px) { .yellow .overlay:after { border-radius: 7px; } } .yellow .overlay:hover:after { opacity: 0.5; } .yellow main .main-content .centerBox { padding: 4em 4em 2em; } @media screen and (max-width: 992px) { .yellow main .main-content .video-container { padding-bottom: 7em; } } @media screen and (max-width: 640px) { .yellow main .main-content .video-container { padding-bottom: 0; } } .yellow main .main-content section { padding: 3em 0; } .yellow main .main-content section h1 { color: #171613; font-weight: bolder; } .yellow main .main-content section p, .yellow main .main-content section li { font-size: 18px; color: #171613; font-family: 'Istok', serif; font-weight: bold; } .yellow main .main-content section.section-4 { padding-bottom: 0; } .yellow main .main-content #carousel-yellow { padding-bottom: 3em; padding-top: 2em; } .yellow main .main-content #carousel-yellow .carousel-indicators { bottom: -4em; } .yellow main .main-content #carousel-yellow .carousel-indicators li { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/yellow/SS_carosell_hex_deselected.png); background-size: contain; background-repeat: no-repeat; background-color: transparent; border: none; height: 80px; width: 40px; opacity: 0.5; } @media screen and (max-width: 420px) { .yellow main .main-content #carousel-yellow .carousel-indicators li { width: 20%; } } .yellow main .main-content #carousel-yellow .carousel-indicators li.active { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/yellow/SS_carosell_hex_selected.png); opacity: 1; } .yellow main .main-content #carousel-yellow .carousel-control { background-image: none; } .yellow main .main-content #carousel-yellow .carousel-control .glyphicon-chevron-left { width: 60px; height: 65px; margin-left: -2em; margin-top: -1em; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .yellow main .main-content #carousel-yellow .carousel-control .glyphicon-chevron-right { width: 60px; height: 65px; margin-right: -2em; margin-top: -1em; } .yellow main .main-content .carousel img { width: 100%; height: auto; margin: auto; } .yellow main .main-content #yellow-emailsignup .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/yellow/Y&Y_TextInputField.png) no-repeat; background-size: 100% 100%; width: 90%; margin: 0 auto; } @media screen and (max-width: 420px) { .yellow main .main-content #yellow-emailsignup .form-group { width: 100%; } } .yellow main .main-content #yellow-emailsignup input { border: none; background: transparent; padding: 0 50px; font-size: 18px; height: 107px; color: #000000; width: 100%; } @media screen and (max-width: 420px) { .yellow main .main-content #yellow-emailsignup input { padding: 0 21px; height: 60px; } } .yellow main .main-content #yellow-emailsignup input::placeholder { color: #414141; } .yellow main .main-content #yellow-emailsignup input:active, .yellow main .main-content #yellow-emailsignup input:focus { border: none; box-shadow: none; outline-color: transparent; } .yellow main .main-content .sign-up-btn { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/yellow/Y&Y_Button_SignUp.png); background-size: 100% 100%; background-repeat: no-repeat; background-color: initial; cursor: pointer; margin: 0 auto; height: 64px; width: 256px; } @media screen and (max-width: 420px) { .yellow main .main-content .sign-up-btn { height: 51px; width: inherit; } } .yellow main .main-content .blog-post a { color: #fff; } @media screen and (max-width: 992px) { .yellow main .main-content .blog-post:nth-child(3) { display: none; } } @media screen and (max-width: 767px) { .yellow main .main-content .blog-post:nth-child(2) { display: none; } } .yellow main .main-content .news-row { padding-top: 4em; } .yellow main .main-content .news-header { max-width: 235px; display: block; margin: 0 auto; } @media screen and (max-width: 420px) { .yellow main .main-content .news-header { max-width: 100%; } } .yellow main .main-content .news-header-underline { max-width: 313px; display: block; margin: 0 auto; } @media screen and (max-width: 420px) { .yellow main .main-content .news-header-underline { max-width: 100%; } } .yellow main .main-content .more-news p { color: #99240D; font-weight: 600; } .yellow main .main-content .more-news a:hover { text-decoration-color: #99240D; } .yellow main .main-content .news-article { max-width: 100%; position: relative; height: 360px; margin-top: -30px; } @media screen and (max-width: 992px) { .yellow main .main-content .news-article { height: 335px; } } @media screen and (max-width: 767px) { .yellow main .main-content .news-article { height: 443px; } } @media screen and (max-width: 420px) { .yellow main .main-content .news-article { height: 367px; } } @media screen and (max-width: 375px) { .yellow main .main-content .news-article { height: 294px; } } @media screen and (max-width: 320px) { .yellow main .main-content .news-article { height: 247px; } } .yellow main .main-content .news-article .article-frame, .yellow main .main-content .news-article .article-title, .yellow main .main-content .news-article .article-image, .yellow main .main-content .news-article .article-date, .yellow main .main-content .news-article p { position: absolute; left: 0; right: 0; } .yellow main .main-content .news-article .article-frame { z-index: 2; max-height: 100%; margin: 0 auto; } @media screen and (max-width: 767px) { .yellow main .main-content .news-article .article-frame { max-width: 400px; } } @media screen and (max-width: 414px) { .yellow main .main-content .news-article .article-frame { max-width: 100%; } } .yellow main .main-content .news-article .article-title { color: #99240D; font-family: 'Tinos', serif; font-weight: bold; text-align: center; z-index: 3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 95%; margin: 0 auto; font-size: 20px; top: 24px; } @media screen and (max-width: 1200px) { .yellow main .main-content .news-article .article-title { top: 17px; } } @media screen and (max-width: 992px) { .yellow main .main-content .news-article .article-title { top: 20px; } } @media screen and (max-width: 767px) { .yellow main .main-content .news-article .article-title { width: 72%; top: 29px; font-size: 24px; } } @media screen and (max-width: 420px) { .yellow main .main-content .news-article .article-title { width: 93%; top: 22px; font-size: 20px; } } @media screen and (max-width: 375px) { .yellow main .main-content .news-article .article-title { top: 17px; font-size: 17px; } } @media screen and (max-width: 320px) { .yellow main .main-content .news-article .article-title { top: 14px; font-size: 15px; } } .yellow main .main-content .news-article .article-image { object-fit: cover; object-position: center; margin: 0 auto; top: 61px; height: 161px; width: 300px; } @media screen and (max-width: 1200px) { .yellow main .main-content .news-article .article-image { top: 47px; height: 132px; width: 227px; } } @media screen and (max-width: 992px) { .yellow main .main-content .news-article .article-image { top: 56px; height: 145px; width: 264px; } } @media screen and (max-width: 767px) { .yellow main .main-content .news-article .article-image { top: 73px; height: 195px; width: 352px; } } @media screen and (max-width: 420px) { .yellow main .main-content .news-article .article-image { top: 55px; height: 149px; width: 269px; } } @media screen and (max-width: 375px) { .yellow main .main-content .news-article .article-image { top: 46px; height: 127px; width: 232px; } } @media screen and (max-width: 360px) { .yellow main .main-content .news-article .article-image { height: 119px; width: 217px; } } @media screen and (max-width: 320px) { .yellow main .main-content .news-article .article-image { top: 39px; height: 100px; width: 182px; } } .yellow main .main-content .news-article p { font-family: 'Istok', serif; font-weight: bold; color: #171613; text-align: left; z-index: 3; margin: 0 auto; width: 76%; font-size: 14px; top: 245px; } @media screen and (max-width: 1200px) { .yellow main .main-content .news-article p { top: 194px; } } @media screen and (max-width: 992px) { .yellow main .main-content .news-article p { top: 225px; } } @media screen and (max-width: 767px) { .yellow main .main-content .news-article p { top: 295px; width: 55%; font-size: 17px; } } @media screen and (max-width: 420px) { .yellow main .main-content .news-article p { top: 228px; width: 75%; font-size: 16px; } } @media screen and (max-width: 375px) { .yellow main .main-content .news-article p { top: 193px; width: 75%; font-size: 12px; } } @media screen and (max-width: 360px) { .yellow main .main-content .news-article p { top: 186px; } } @media screen and (max-width: 320px) { .yellow main .main-content .news-article p { top: 152px; font-size: 11px; } } .yellow main .main-content .news-article .article-date { font-family: 'Istok', serif; font-weight: bold; color: #171613; text-align: center; z-index: 3; top: 333px; margin: 0 auto; } .yellow .bottom-img { position: absolute; bottom: 0; opacity: 0.7; z-index: -1; } .yellow .bottom-img.bottom-left { left: 0; } .yellow .bottom-img.bottom-right { right: 0; } @font-face { font-display: swap; font-family: 'ArchitectsDaughter'; src: url("/fonts/sagrada/ArchitectsDaughter-Regular.ttf") format("truetype"); } @font-face { font-display: swap; font-family: 'AlegreyaAllCaps'; src: url("/fonts/sagrada/AlegreyaSC-Regular.ttf") format("truetype"); } @font-face { font-display: swap; font-family: 'Alegreya'; src: url("/fonts/sagrada/Alegreya-Regular.ttf") format("truetype"); } .sagrada { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sagrada/Glass_tiled_background.png); background-position: top center; background-size: contain; } .sagrada .email-error { color: red; text-shadow: none; } .sagrada video { width: 100%; } .sagrada footer { background-color: #000; padding: 3em; } .sagrada footer .container { max-width: 100%; } .sagrada .img-fluid { max-width: 100%; height: auto; } .sagrada .aligning-logos { display: flex; align-items: center; } .sagrada .logo { max-height: 170px; width: auto; } .sagrada .flex-display { display: flex; justify-content: center; } .sagrada .divider { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sagrada/banner_footer.png); background-color: transparent; height: 61px; background-repeat: repeat-x; background-size: 100% 100%; margin-top: -9px; margin-bottom: -20px; } @media screen and (max-width: 992px) { .sagrada .divider { height: 34px; } } .sagrada .banner { position: relative; } .sagrada .banner .badges { position: absolute; bottom: -70px; right: 0; left: 0; margin-left: auto; margin-right: auto; z-index: 2; } @media screen and (max-width: 1200px) { .sagrada .banner .badges { bottom: -55px; } } @media screen and (max-width: 992px) { .sagrada .banner .badges { bottom: -70px; } } @media screen and (max-width: 640px) { .sagrada .banner .badges { bottom: -45px; } } .sagrada .badge-row { display: flex; flex-wrap: wrap; justify-content: center; padding: 2em 0; } @media screen and (max-width: 992px) { .sagrada .badge-row { display: block; text-align: center; } } .sagrada .buy-badge { margin-bottom: 2em; cursor: pointer; } @media screen and (max-width: 992px) { .sagrada .buy-badge.only-one { max-height: 55px; } } .sagrada .overlay { position: relative; cursor: pointer; margin-left: 10px; margin-right: 10px; } @media screen and (max-width: 640px) { .sagrada .overlay { margin-left: 5px; margin-right: 5px; } } .sagrada .overlay:after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: calc(100% - 2em); opacity: 0; background-color: #f3f3f3; border-radius: 12px; } @media screen and (max-width: 1200px) { .sagrada .overlay:after { border-radius: 7px; } } .sagrada .overlay:hover:after { opacity: 0.5; } @media screen and (max-width: 992px) { .sagrada .overlay:hover:after { opacity: 0; } } .sagrada .top-img { position: absolute; top: 0; z-index: -1; width: 15%; height: 100%; background-repeat-x: no-repeat; background-size: contain; } .sagrada .top-img.top-left { left: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sagrada/Sagrada_runner_L_Static.jpg); } .sagrada .top-img.top-right { right: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sagrada/Sagrada_runner_R_Static.jpg); } .sagrada main .main-content { padding: 4em; width: 70%; } @media screen and (max-width: 767px) { .sagrada main .main-content { width: 90%; } } @media screen and (max-width: 640px) { .sagrada main .main-content { width: 100%; padding: 2em; } } .sagrada main .main-content section { padding: 3em 0; color: #000; } .sagrada main .main-content section h1 { font-family: 'AlegreyaAllCaps', serif; font-size: 68px; color: #fff; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 3px 3px 0 #000; } @media screen and (max-width: 992px) { .sagrada main .main-content section h1 { font-size: 58px; } } @media screen and (max-width: 767px) { .sagrada main .main-content section h1 { font-size: 55px; } } @media screen and (max-width: 640px) { .sagrada main .main-content section h1 { font-size: 41px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 3px 0 #000; } } .sagrada main .main-content section h2 { font-family: 'AlegreyaAllCaps', serif; font-size: 36px; } @media screen and (max-width: 992px) { .sagrada main .main-content section h2 { text-align: center; } } .sagrada main .main-content section h3 { font-family: 'ArchitectsDaughter', serif; font-size: 40px; } .sagrada main .main-content section h4 { font-family: 'ArchitectsDaughter', serif; font-size: 22px; } .sagrada main .main-content section p, .sagrada main .main-content section li { font-family: 'Alegreya', serif; font-size: 22px; } .sagrada main .main-content .window-crafting { margin-top: -7px; margin-bottom: 22px; } .sagrada main .main-content .title-underline { margin-top: -15px; } .sagrada main .main-content .section-1, .sagrada main .main-content .section-3, .sagrada main .main-content .section-6, .sagrada main .main-content .section-35 { border: 40px solid transparent; border-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sagrada/PaperBacker.png) 13%/4em stretch; background-color: #e4cfac; background-clip: padding-box; } @media screen and (max-width: 767px) { .sagrada main .main-content .section-1, .sagrada main .main-content .section-3, .sagrada main .main-content .section-6, .sagrada main .main-content .section-35 { border: 18px solid transparent; border-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sagrada/PaperBacker.png) 13%/2em stretch; } } .sagrada main .main-content .section-1 { padding: 0em 4em 2em; } @media screen and (max-width: 992px) { .sagrada main .main-content .section-1 { padding: 0em 2em 2em; } } @media screen and (max-width: 420px) { .sagrada main .main-content .section-1 { padding: 0em 0em 2em; } .sagrada main .main-content .section-1 p { text-align: center; } } .sagrada main .main-content .section-3 { padding: 0em; } @media screen and (max-width: 767px) { .sagrada main .main-content .section-3 { padding: 0em 1em 1em; } } @media screen and (max-width: 1443px) { .sagrada main .main-content .section-4 { width: 125%; margin-left: -13%; } } @media screen and (max-width: 767px) { .sagrada main .main-content .section-4 { width: 100%; margin-left: 0; } } .sagrada main .main-content .section-6 { padding: 0; background-size: 100% 62%; background-position: 100% 70%; } .sagrada main .main-content .top-screenshot { width: 82%; } .sagrada main .main-content #sagrada-emailsignup .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/sagrada/GLASS_InPutField.png) no-repeat; background-size: 100% 100%; width: 90%; margin: 0 auto; } .sagrada main .main-content #sagrada-emailsignup input { border: none; background: transparent; padding: 0 50px; font-size: 18px; height: 107px; color: #000000; width: 100%; } .sagrada main .main-content #sagrada-emailsignup input::placeholder { color: #414141; } .sagrada main .main-content #sagrada-emailsignup input:active, .sagrada main .main-content #sagrada-emailsignup input:focus { border: none; box-shadow: none; outline-color: transparent; } .sagrada main .main-content .sign-up-btn { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sagrada/GLASS_Button_SignUp.png); background-size: 100% 100%; background-repeat: no-repeat; background-color: initial; cursor: pointer; margin: 0 auto; height: 64px; width: 256px; } .sagrada main .main-content #carousel-sagrada { padding-bottom: 3em; padding-top: 2em; } .sagrada main .main-content #carousel-sagrada .item { margin: 0 auto; text-align: center; } .sagrada main .main-content #carousel-sagrada .item img { height: auto; margin: auto; } .sagrada main .main-content #carousel-sagrada .carousel-inner { width: 75%; margin: 0 auto; } .sagrada main .main-content #carousel-sagrada .carousel-control { background-image: none; } .sagrada main .main-content #carousel-sagrada .carousel-control .glyphicon { margin-top: 7em; width: 55px; height: 45px; } .sagrada main .main-content #carousel-sagrada .carousel-control .glyphicon.glyphicon-chevron-left { margin-left: -0.5em; } .sagrada main .main-content #carousel-sagrada .carousel-control .glyphicon.glyphicon-chevron-right { margin-right: -0.5em; } .sagrada main .main-content .dice { position: absolute; width: 100%; max-width: 250px; z-index: 1; pointer-events: none; } .sagrada main .main-content .dice.dice-01 { left: -24em; bottom: -15em; } @media screen and (max-width: 1200px) { .sagrada main .main-content .dice.dice-01 { left: -15em; bottom: -17em; } } @media screen and (max-width: 992px) { .sagrada main .main-content .dice.dice-01 { left: inherit; right: -22em; bottom: -22em; } } @media screen and (max-width: 767px) { .sagrada main .main-content .dice.dice-01 { display: none; } } .sagrada main .main-content .dice.dice-02 { right: -8em; bottom: -13em; max-width: 320px; } @media screen and (max-width: 1320px) { .sagrada main .main-content .dice.dice-02 { right: -11em; bottom: -13em; } } @media screen and (max-width: 992px) { .sagrada main .main-content .dice.dice-02 { display: none; } } .sagrada main .main-content .dice.dice-03 { left: 21em; bottom: 7em; } @media screen and (max-width: 1470px) { .sagrada main .main-content .dice.dice-03 { left: 17em; } } @media screen and (max-width: 1320px) { .sagrada main .main-content .dice.dice-03 { left: 8em; } } @media screen and (max-width: 1200px) { .sagrada main .main-content .dice.dice-03 { display: none; } } @media screen and (max-width: 767px) { .sagrada main .main-content .blog-post { padding: 0; } } .sagrada main .main-content .blog-post a { color: #fff; } @media screen and (max-width: 992px) { .sagrada main .main-content .blog-post:nth-child(3) { display: none; } } @media screen and (max-width: 767px) { .sagrada main .main-content .blog-post:nth-child(2) { display: none; } } .sagrada main .main-content .news-row { padding-top: 4em; padding-bottom: 8em; } @media screen and (max-width: 1640px) { .sagrada main .main-content .news-row { padding-bottom: 0; } } .sagrada main .main-content .news-header { display: block; } .sagrada main .main-content .more-news { margin-top: -4em; } .sagrada main .main-content .more-news p { font-weight: 600; color: #fff; } .sagrada main .main-content .more-news a:hover { text-decoration-color: #fff; } .sagrada main .main-content .news-article { max-width: 100%; position: relative; height: 360px; margin-top: -30px; } @media screen and (max-width: 767px) { .sagrada main .main-content .news-article { max-width: 58%; margin: 0 auto; } } @media screen and (max-width: 420px) { .sagrada main .main-content .news-article { max-width: 86%; margin: 0 auto; } } .sagrada main .main-content .news-article .article-frame, .sagrada main .main-content .news-article .article-title, .sagrada main .main-content .news-article .article-image, .sagrada main .main-content .news-article .article-date, .sagrada main .main-content .news-article p { position: absolute; left: 0; right: 0; } .sagrada main .main-content .news-article .article-contents { position: relative; width: 100%; padding-bottom: 100%; } .sagrada main .main-content .news-article .article-frame { z-index: 2; width: 100%; max-height: 100%; margin: 0 auto; } .sagrada main .main-content .news-article .article-title { color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; font-family: 'AlegreyaAllCaps', serif; text-align: center; z-index: 3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 77%; margin: 0 auto; font-size: 18px; top: 7%; } .sagrada main .main-content .news-article .article-image { object-fit: cover; object-position: center; margin: 0 auto; top: 18%; height: 50%; width: 80%; } .sagrada main .main-content .news-article p { font-family: 'AlegreyaAllCaps', serif; font-weight: bold; color: #171613; text-align: left; z-index: 3; margin: 0 auto; width: 83%; font-size: 14px; top: 67%; overflow: hidden; height: 30%; } @font-face { font-family: 'Baskerville'; src: url("/fonts/root/BaskervilleTenProNumbers.ttf") format("truetype"); } @media screen and (max-width: 992px) { #main-img { content: url("../assets/root/ROOT_RoboFactions_TeamPhoto.webp") !important; } } @font-face { font-family: 'Luminari'; src: url("/fonts/root/F_hdr_Luminari.ttf") format("truetype"); } .root { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/ROOT_Background_1440.webp); background-position: center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; font-family: 'Baskerville', serif; } .root .email-error { color: red; text-shadow: none; } .root video { width: 100%; } .root .video-container { height: 300px; } @media screen and (max-width: 1200px) { .root .video-container { height: 440px; } } @media screen and (max-width: 640px) { .root .video-container { height: 223px; } } .root .video-container iframe { width: 90%; height: 100%; max-width: 1500px; border: none; } .root footer { background-color: #000; padding: 3em; } .root footer .container { max-width: 100%; } .root .clockwork-header { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/nighttime_header.webp); background-size: 100% 100%; text-align: center; height: 103px; display: table-cell; padding-left: 15px; padding-right: 15px; vertical-align: middle; } @media screen and (max-width: 1200px) { .root .clockwork-header { width: 770px; } } @media screen and (max-width: 767px) { .root .clockwork-header { font-size: 50px !important; } } @media screen and (max-width: 730px) { .root .clockwork-header { font-size: 44px !important; } } @media screen and (max-width: 650px) { .root .clockwork-header { font-size: 43px !important; } } @media screen and (max-width: 640px) { .root .clockwork-header { font-size: 46px !important; } } @media screen and (max-width: 544px) { .root .clockwork-header { font-size: 37px !important; } } @media screen and (max-width: 420px) { .root .clockwork-header { font-size: 32px !important; } } .root .img-fluid { max-width: 100%; height: auto; } .root .mb-2 { margin-bottom: 2em; } .root .aligning-logos { display: flex; align-items: center; } .root .logo { max-height: 170px; width: auto; } .root .flex-display { display: flex; justify-content: center; } .root .divider { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/S_frm_BorderBar.webp); background-color: transparent; height: 30px; background-repeat: repeat-x; margin-top: -13px; margin-bottom: -20px; } .root .banner { position: relative; } .root .banner .badges { position: absolute; bottom: -70px; right: 0; left: 0; margin-left: auto; margin-right: auto; z-index: 2; } @media screen and (max-width: 1200px) { .root .banner .badges { bottom: -55px; } } @media screen and (max-width: 992px) { .root .banner .badges { bottom: -70px; } } @media screen and (max-width: 640px) { .root .banner .badges { bottom: -79px; } } .root .banner .badges .flex-display { align-items: flex-end; } .root .badge-row { display: flex; justify-content: center; align-items: flex-end; } @media screen and (max-width: 992px) { .root .badge-row { display: block; text-align: center; flex-wrap: wrap; } } .root .buy-badge { margin-bottom: 2em; cursor: pointer; } .root .overlay { position: relative; cursor: pointer; margin-left: 10px; margin-right: 10px; } @media screen and (max-width: 640px) { .root .overlay { margin-left: 5px; margin-right: 5px; } } .root .overlay:after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: calc(100% - 2em); opacity: 0; background: white; background: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0) 100%); border-radius: 12px; } @media screen and (max-width: 1200px) { .root .overlay:after { border-radius: 7px; } } .root .overlay:hover:after { opacity: 0.5; } @media screen and (max-width: 992px) { .root .overlay:hover:after { opacity: 0; } } .root main .main-content { padding: 0em 5em; margin-top: 5em; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/ROOT_ParchmentBacker.webp); background-size: 100% 102%; } @media screen and (max-width: 767px) { .root main .main-content { width: 90%; } } @media screen and (max-width: 640px) { .root main .main-content { width: 100%; padding: 2em; } } .root main .main-content.thank-you { background-size: 100% 203%; } .root main .main-content section { padding: 2em 0; color: #000; } .root main .main-content section h1 { font-family: 'Luminari', serif; font-size: 50px; } @media screen and (max-width: 1200px) { .root main .main-content section h1 { font-size: 40px; } } .root main .main-content section h2 { font-family: 'Luminari', serif; font-size: 50px; } .root main .main-content section h3 { font-family: 'Luminari', serif; font-size: 20px; } .root main .main-content section .h3-large { font-size: 30px; } .root main .main-content section p, .root main .main-content section li { font-size: 25px; } .root main .main-content section .off-right { margin-left: 6em; } @media screen and (max-width: 992px) { .root main .main-content section .off-right { margin-left: 0; } } .root main .main-content section .show-small { display: none; } @media screen and (max-width: 992px) { .root main .main-content section .show-small { display: inherit; } } .root main .main-content section .hide-small { display: inherit; } @media screen and (max-width: 992px) { .root main .main-content section .hide-small { display: none; } } .root main .main-content section .hide-large { display: inherit; } @media screen and (max-width: 1200px) { .root main .main-content section .hide-large { display: none; } } .root main .main-content section .off-left { margin-left: -6em; } @media screen and (max-width: 992px) { .root main .main-content section .off-left { margin-left: 0; } } .root main .main-content .top-character { max-width: 162%; margin-left: -10em; margin-top: -4em; } @media screen and (max-width: 1200px) { .root main .main-content .top-character { margin-left: -7em; margin-top: 6em; } } @media screen and (max-width: 992px) { .root main .main-content .top-character { max-width: 100%; margin-left: 0; margin-top: 0; } } .root main .main-content .top-right-character { max-width: 162%; margin-left: -6em; margin-top: -4em; } @media screen and (max-width: 1200px) { .root main .main-content .top-right-character { margin-left: -7em; margin-top: 6em; } } @media screen and (max-width: 992px) { .root main .main-content .top-right-character { max-width: 100%; margin-left: 0; margin-top: 0; } } .root main .main-content .top-paper-backer { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/ROOT_Factions_CopyPage.png); background-size: 100% 100%; padding: 4em; width: 110%; } @media screen and (max-width: 992px) { .root main .main-content .top-paper-backer { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/MobileROOT_FactionCopy_VerticalBacker.webp); max-width: 100%; } } .root main .main-content .top-clockwork-paper-backer { background-image: url("../assets/root/ROOT_Factions_CopyPage_Extended.webp"); background-size: 100% 100%; padding: 4em; width: 110%; } @media screen and (max-width: 992px) { .root main .main-content .top-clockwork-paper-backer { background-image: url("../assets/root/ROOT_Factions_CopyPage_Extended.webp"); max-width: 100%; } } .root main .main-content .section-1 { padding-top: 6em; } .root main .main-content .section-2 { text-shadow: 2px 2px 4px #fff; } .root main .main-content .section-2 h1 { text-shadow: none; } .root main .main-content .section-2 li { font-size: 18px; } .root main .main-content .section-2 p { font-size: 20px; text-indent: 30px; } @media screen and (max-width: 420px) { .root main .main-content .section-2 p { text-indent: 0px; } } .root main .main-content .section-3 p { font-size: 17px; text-indent: 30px; } @media screen and (max-width: 420px) { .root main .main-content .section-3 p { text-indent: 0px; } } .root main .main-content .faction-select { display: flex; justify-content: center; margin-bottom: 2em; } @media screen and (max-width: 640px) { .root main .main-content .faction-select { flex-wrap: wrap; } } .root main .main-content .faction-select img:hover { max-width: 105%; margin-left: -7px; margin-top: -4px; } .root main .main-content .tab-pane { background-size: 100% 100%; color: #000; text-shadow: 2px 2px 4px #fff; padding: 4em; width: 114%; height: 1200px; margin-left: -82px; } .root main .main-content .tab-pane.cat { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/1-1_FactionBacker_DeCat.png); } @media screen and (max-width: 992px) { .root main .main-content .tab-pane.cat { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/factions_factionbacker_DeCat_LONG.webp); } } .root main .main-content .tab-pane.eyrie { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/1-1_FactionBacker_Eyrie.png); } @media screen and (max-width: 992px) { .root main .main-content .tab-pane.eyrie { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/factions_factionbacker_Eyrie_LONG.png); } } .root main .main-content .tab-pane.alliance { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/1-1_FactionBacker_Alliance.png); } @media screen and (max-width: 992px) { .root main .main-content .tab-pane.alliance { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/factions_factionbacker_Alliance_LONG.png); } } .root main .main-content .tab-pane.vagabond { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/1-1_FactionBacker_Vagabond.png); } @media screen and (max-width: 992px) { .root main .main-content .tab-pane.vagabond { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/factions_factionbacker_Vagabond_LONG.png); } } @media screen and (max-width: 992px) { .root main .main-content .tab-pane { padding: 2em; width: 100%; height: inherit; margin-left: 0; } } @media screen and (max-width: 320px) { .root main .main-content .tab-pane { padding: 1em; } } @media screen and (max-width: 992px) { .root main .main-content .tab-pane .container { width: inherit; } } .root main .main-content .tab-pane .off-center { margin-left: -73px; } @media screen and (max-width: 1200px) { .root main .main-content .tab-pane .off-center { margin-left: -3px; } } @media screen and (max-width: 992px) { .root main .main-content .tab-pane .off-center { margin-left: 0; } } @media screen and (max-width: 640px) { .root main .main-content .tab-pane .off-center { padding: 0; } } @media screen and (max-width: 992px) { .root main .main-content .tab-pane h2 { text-align: center; } } @media screen and (max-width: 420px) { .root main .main-content .tab-pane h2 { font-size: 42px; } } .root main .main-content .tab-pane .paper-backer { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/1-1_FactionPage_CopyBodyPage.png); background-size: 100% 100%; padding: 4em 4em 18em 3em; } @media screen and (max-width: 1200px) { .root main .main-content .tab-pane .paper-backer { padding: 4em 7em 17em 4em; } } @media screen and (max-width: 992px) { .root main .main-content .tab-pane .paper-backer { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/factions_body_paper_LONG.webp); padding: 4em; } } @media screen and (max-width: 640px) { .root main .main-content .tab-pane .paper-backer { padding: 2em; } } @media screen and (max-width: 420px) { .root main .main-content .tab-pane .paper-backer { padding: 1em; } } .root main .main-content .tab-pane .panel-group { width: 65%; } @media screen and (max-width: 992px) { .root main .main-content .tab-pane .panel-group { width: 100%; margin-bottom: 0; } } .root main .main-content .tab-pane .panel { box-shadow: none; border: none; background-color: transparent; } .root main .main-content .tab-pane .panel .panel-heading { color: inherit; background-color: transparent; border-color: transparent; } .root main .main-content .tab-pane .panel .panel-body { border-top-color: transparent; } .root main .main-content .tab-pane .panel .fighting-accordion { background-size: contain; background-repeat: no-repeat; width: 100%; height: 60px; cursor: pointer; } @media screen and (max-width: 640px) { .root main .main-content .tab-pane .panel .fighting-accordion { height: 50px; } } @media screen and (max-width: 420px) { .root main .main-content .tab-pane .panel .fighting-accordion { height: 27px; } } .root main .main-content .tab-pane .panel .fighting-accordion.cat { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/Faction_Headers_FightDeCat_Open.png); } .root main .main-content .tab-pane .panel .fighting-accordion.cat.collapsed { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/Faction_Headers_FightDeCat_Closed.png); } .root main .main-content .tab-pane .panel .fighting-accordion.cat.collapsed:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/Faction_Headers_FightDeCat_Hover.png); } .root main .main-content .tab-pane .panel .fighting-accordion.eyrie { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/Faction_Headers_FightEyrie_Open.webp); } .root main .main-content .tab-pane .panel .fighting-accordion.eyrie.collapsed { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/Faction_Headers_FightEyrie_Closed.png); } .root main .main-content .tab-pane .panel .fighting-accordion.eyrie.collapsed:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/Faction_Headers_FightEyrie_Hover.png); } .root main .main-content .tab-pane .panel .fighting-accordion.alliance { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/Faction_Headers_FightAlliance_Open.png); } .root main .main-content .tab-pane .panel .fighting-accordion.alliance.collapsed { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/Faction_Headers_FightAlliance_Closed.png); } .root main .main-content .tab-pane .panel .fighting-accordion.alliance.collapsed:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/Faction_Headers_FightAlliance_Hover.png); } .root main .main-content .tab-pane .panel .fighting-accordion.vagabond { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/Faction_Headers_FightVagabond_Open.png); } .root main .main-content .tab-pane .panel .fighting-accordion.vagabond.collapsed { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/Faction_Headers_FightVagabond_Closed.png); } .root main .main-content .tab-pane .panel .fighting-accordion.vagabond.collapsed:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/Faction_Headers_FightVagabond_Hover.png); } .root main .main-content .tab-pane .character { position: absolute; overflow-x: hidden; overflow-y: hidden; } @media screen and (max-width: 992px) { .root main .main-content .tab-pane .character { position: inherit; margin: 0 auto; margin-bottom: 7em; max-width: 100% !important; } } .root main .main-content .tab-pane .character.cat { max-width: 75%; top: 23em; right: -28em; } @media screen and (max-width: 1200px) { .root main .main-content .tab-pane .character.cat { max-width: 65%; top: 31em; right: -19em; } } .root main .main-content .tab-pane .character.eyrie { max-width: 75%; top: 12em; right: -28em; } @media screen and (max-width: 1200px) { .root main .main-content .tab-pane .character.eyrie { max-width: 68%; top: 22em; right: -19em; } } .root main .main-content .tab-pane .character.alliance { max-width: 75%; top: 20em; right: -31em; } @media screen and (max-width: 1200px) { .root main .main-content .tab-pane .character.alliance { max-width: 68%; top: 32em; right: -19em; } } .root main .main-content .tab-pane .character.vagabond { max-width: 75%; top: 20em; right: -34em; } @media screen and (max-width: 1200px) { .root main .main-content .tab-pane .character.vagabond { max-width: 71%; top: 26em; right: -21em; } } .root main .main-content .faction-bottom-icons { position: absolute; bottom: 6em; display: flex; align-items: baseline; width: 70%; } @media screen and (max-width: 992px) { .root main .main-content .faction-bottom-icons { position: inherit; display: inline-block; width: inherit; } } @media screen and (max-width: 992px) { .root main .main-content .faction-bottom-icons .img-and-tooltip { display: flex; align-items: center; margin-bottom: 1em; } } .root main .main-content .faction-bottom-icons .img-and-tooltip img { position: relative; width: 96px; } @media screen and (max-width: 992px) { .root main .main-content .faction-bottom-icons .img-and-tooltip img { width: 60px; } } .root main .main-content .faction-bottom-icons .img-and-tooltip .tooltip { position: absolute; z-index: 1; visibility: hidden; opacity: 0; transition: opacity 0.3s; font-family: 'Baskerville', serif; font-size: 17px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/TOOLTIP_HoverBubble.png); background-size: 100% 100%; text-align: center; width: 240px; padding: 1.7em; bottom: 89%; margin-left: 2.5em; } .root main .main-content .faction-bottom-icons .img-and-tooltip .tooltip.long { width: 320px; } .root main .main-content .faction-bottom-icons .img-and-tooltip .tooltip.xlong { width: 401px; } .root main .main-content .faction-bottom-icons .img-and-tooltip .tooltip.xxlong { width: 435px; } .root main .main-content .faction-bottom-icons .img-and-tooltip .tooltip.xxxlong { width: 479px; } @media screen and (max-width: 992px) { .root main .main-content .faction-bottom-icons .img-and-tooltip .tooltip { display: none; } } .root main .main-content .faction-bottom-icons .img-and-tooltip:hover .tooltip { visibility: visible; opacity: 1; } .root main .main-content .faction-bottom-icons .img-and-tooltip .tooltip-mobile { display: none; } @media screen and (max-width: 992px) { .root main .main-content .faction-bottom-icons .img-and-tooltip .tooltip-mobile { display: inline-block; padding-left: 10px; font-size: 17px; } } .root main .main-content #root-emailsignup .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/ROOT_InputBox.webp) no-repeat; background-size: 100% 100%; width: 90%; margin: 0 auto; } .root main .main-content #root-emailsignup input { border: none; background: transparent; padding: 0 50px; font-size: 24px; height: 131px; color: #000000; width: 100%; } @media screen and (max-width: 420px) { .root main .main-content #root-emailsignup input { padding: 0 24px; height: 65px; } } .root main .main-content #root-emailsignup input::placeholder { color: #414141; } .root main .main-content #root-emailsignup input:active, .root main .main-content #root-emailsignup input:focus { border: none; box-shadow: none; outline-color: transparent; } @-webkit-keyframes autofill { 0%, 100% { color: #000; background: transparent; } } .root main .main-content #root-emailsignup input:-webkit-autofill { -webkit-animation-delay: 1s; -webkit-animation-name: autofill; -webkit-animation-fill-mode: both; } .root main .main-content .sign-up-btn { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/root/ROOT_SignUp_Button.webp); background-size: 100% 100%; background-repeat: no-repeat; background-color: initial; cursor: pointer; margin: 0 auto; height: 64px; width: 256px; } .root main .main-content #carousel-root .item { margin: 0 auto; text-align: center; } .root main .main-content #carousel-root .item img { height: auto; margin: auto; } .root main .main-content #carousel-root .carousel-inner { width: 100%; margin: 0 auto; } .root main .main-content #carousel-root .carousel-control { background-image: none; top: inherit; } .root main .main-content #carousel-root .carousel-control .glyphicon { width: 55px; height: 45px; } @media screen and (max-width: 767px) { .root main .main-content #carousel-root .carousel-control .glyphicon { width: 30px; height: 26px; } } .root main .main-content #carousel-root .carousel-control .glyphicon.glyphicon-chevron-left { margin-left: -3.5em; margin-top: -10em; } @media screen and (max-width: 992px) { .root main .main-content #carousel-root .carousel-control .glyphicon.glyphicon-chevron-left { margin-left: -2.5em; margin-top: -6.5em; } } @media screen and (max-width: 640px) { .root main .main-content #carousel-root .carousel-control .glyphicon.glyphicon-chevron-left { margin-left: -2em; margin-top: -5.5em; } } .root main .main-content #carousel-root .carousel-control .glyphicon.glyphicon-chevron-right { margin-right: -3.5em; margin-top: -10em; } @media screen and (max-width: 992px) { .root main .main-content #carousel-root .carousel-control .glyphicon.glyphicon-chevron-right { margin-right: -2.5em; margin-top: -6.5em; } } @media screen and (max-width: 640px) { .root main .main-content #carousel-root .carousel-control .glyphicon.glyphicon-chevron-right { margin-right: -2em; margin-top: -5.5em; } } @media screen and (max-width: 767px) { .root main .main-content .blog-post { padding: 0; } } .root main .main-content .blog-post a { color: #fff; } @media screen and (max-width: 992px) { .root main .main-content .blog-post:nth-child(3) { display: none; } } @media screen and (max-width: 767px) { .root main .main-content .blog-post:nth-child(2) { display: none; } } .root main .main-content .news-row { padding-top: 4em; } .root main .main-content .more-news { width: 20%; margin: 0 auto; } @media screen and (max-width: 992px) { .root main .main-content .more-news { width: 33%; } } @media screen and (max-width: 767px) { .root main .main-content .more-news { width: 50%; margin-top: 1em; } } @media screen and (max-width: 420px) { .root main .main-content .more-news { width: 75%; } } .root main .main-content .news-article { max-width: 100%; position: relative; margin-top: -30px; } @media screen and (max-width: 767px) { .root main .main-content .news-article { max-width: 58%; margin: 0 auto; } } @media screen and (max-width: 420px) { .root main .main-content .news-article { max-width: 86%; margin: 0 auto; } } .root main .main-content .news-article .article-frame, .root main .main-content .news-article .article-title, .root main .main-content .news-article .article-image, .root main .main-content .news-article .article-date, .root main .main-content .news-article p { position: absolute; left: 0; right: 0; } .root main .main-content .news-article .article-contents { position: relative; width: 100%; padding-bottom: 100%; } .root main .main-content .news-article .article-frame { z-index: 2; width: 100%; max-height: 100%; margin: 0 auto; } .root main .main-content .news-article .article-title { color: #171613; font-family: 'Luminari', serif; text-align: center; z-index: 3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0 auto; font-size: 18px; width: 77%; top: 7%; margin-left: 20px; } @media screen and (max-width: 1200px) { .root main .main-content .news-article .article-title { font-size: 17px; width: 74%; top: 5%; margin-left: 33px; } } @media screen and (max-width: 992px) { .root main .main-content .news-article .article-title { top: 6%; } } .root main .main-content .news-article .article-image { object-fit: cover; object-position: center; margin: 0 auto; top: 16%; height: 47%; width: 70%; z-index: 2; margin-left: 40px; } @media screen and (max-width: 1200px) { .root main .main-content .news-article .article-image { margin-left: 33px; } } @media screen and (max-width: 992px) { .root main .main-content .news-article .article-image { width: 72%; } } .root main .main-content .news-article p { font-weight: bold; color: #171613; text-align: left; z-index: 3; margin: 0 auto; overflow: hidden; font-size: 13px; top: 67%; height: 30%; width: 71%; margin-left: 40px; } @media screen and (max-width: 1200px) { .root main .main-content .news-article p { font-size: 11px; top: 66%; margin-left: 30px; } } @media screen and (max-width: 992px) { .root main .main-content .news-article p { font-size: 12px; margin-left: 38px; } } @font-face { font-display: swap; font-family: Gotham; src: url("/fonts/dune/Gotham-Book.otf") format("opentype"); } @font-face { font-display: swap; font-family: Gotham; font-weight: bold; src: url("/fonts/dune/Gotham-Medium.otf") format("opentype"); } @font-face { font-display: swap; font-family: Gotham; font-weight: 100; src: url("/fonts/dune/Gotham-Light.otf") format("opentype"); } @font-face { font-display: swap; font-family: Trajan; src: url("/fonts/dune/trajan-pro-3.otf") format("opentype"); } body.dune-immortality { background: url("https://dwd-web.s3.us-west-2.amazonaws.com/assets/immortality/BackgroundAll.png") no-repeat bottom center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-color: black; background-size: cover; } .dune-immortality { font-family: 'Gotham'; } .dune-immortality button:hover { filter: brightness(150%); } .dune-immortality button:focus { filter: brightness(50%); } .dune-immortality .logoFooter { padding-bottom: 30px; } .dune-immortality h2 { font-size: 20px; margin: 20px 15px 10px 15px; } @media screen and (min-width: 640px) { .dune-immortality h2 { font-size: 25px; } } @media screen and (min-width: 767px) { .dune-immortality h2 { font-size: 30px; } } .dune-immortality footer { margin-top: 150px; } .dune-immortality .subscribe-block { width: 95%; display: inline-block; } @media screen and (min-width: 992px) { .dune-immortality .subscribe-block { width: 45%; } } .dune-immortality .subscribe-block input { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_InputBar.png") no-repeat; background-size: 100% 100%; border: none; color: #fff; margin: 15px auto; width: 75%; font-size: 26px; padding: 30px 12px; } @media screen and (min-width: 992px) { .dune-immortality .subscribe-block input { width: 100%; } } .dune-immortality .subscribe-block button { width: 75%; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_Button_Normal.png") no-repeat; background-size: 100% 100%; border: none; padding: 15px 0; color: white; font-weight: bold; font-size: 18px; } @media screen and (min-width: 640px) { .dune-immortality .subscribe-block button { font-size: 22px; } } @media screen and (min-width: 992px) { .dune-immortality .subscribe-block button { font-size: 28px; } } @media screen and (min-width: 992px) { .dune-immortality .subscribe-block.bottom { margin-top: -50px; } } .dune-immortality .banner { width: 100%; text-align: center; margin-bottom: 90px; background-color: black; } .dune-immortality .banner h1 { margin: -5px 0 0 0; } .dune-immortality .banner h1 img { max-width: 1348px; } .dune-immortality .banner img { width: 100%; margin-bottom: -15px; } .dune-immortality .main-content { margin: 0 auto; max-width: 960px; width: 80%; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_ContentBacker_Bottom.png"); background-repeat: repeat-y; background-size: contain; position: relative; text-align: center; } .dune-immortality .main-content .content-top { width: 100%; margin-top: -10px; } .dune-immortality .main-content .content-bottom { width: 100%; margin-bottom: -10px; -ms-transform: scaleY(-1); -moz-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); } .dune-immortality .main-content .img-bar .left-img { display: none; } @media screen and (min-width: 767px) { .dune-immortality .main-content .img-bar .left-img { display: inline-block; width: 48%; margin: -40px 0 0 -20px; position: relative; z-index: 2; } } @media screen and (min-width: 992px) { .dune-immortality .main-content .img-bar .left-img { width: 46%; margin: -40px 0 0 -20px; } } .dune-immortality .main-content .img-bar .right-img { width: 96%; display: inline-block; margin-top: -30px; } @media screen and (min-width: 420px) { .dune-immortality .main-content .img-bar .right-img { width: 97%; margin-top: -40px; } } @media screen and (min-width: 640px) { .dune-immortality .main-content .img-bar .right-img { width: 98%; margin-top: -53px; } } @media screen and (min-width: 767px) { .dune-immortality .main-content .img-bar .right-img { width: 55%; margin: -70px -10px 0 -20px; position: relative; z-index: 1; } } @media screen and (min-width: 992px) { .dune-immortality .main-content .img-bar .right-img { width: 56%; margin: -80px -10px 0 -20px; } } @media screen and (min-width: 1200px) { .dune-immortality .main-content .img-bar .right-img { margin: -104px -7px 0 -20px; } } .dune-immortality .main-content .preorder { width: 75%; max-width: 582px; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_Button_Normal.png") no-repeat; background-size: 100% 100%; border: none; padding: 20px 0; color: white; font-weight: bold; font-size: 20px; margin-top: 20px; position: relative; z-index: 2; } @media screen and (min-width: 640px) { .dune-immortality .main-content .preorder { font-size: 26px; margin-top: 10px; } } @media screen and (min-width: 992px) { .dune-immortality .main-content .preorder { width: 50%; font-size: 36px; margin-top: 0px; } } .dune-immortality .main-content .video-row { position: relative; margin-top: 20px; display: flex; flex-flow: row wrap; justify-content: space-evenly; align-items: center; } .dune-immortality .main-content .video-row iframe { width: 95%; aspect-ratio: 5/3; } @media screen and (min-width: 992px) { .dune-immortality .main-content .video-row iframe { width: 45%; } } .dune-immortality .main-content .section-divider { width: 100%; margin: 15px 0; } .dune-immortality .main-content .description-text { text-align: left; margin: 20px 20px 0 20px; font-size: 14px; } @media screen and (min-width: 992px) { .dune-immortality .main-content .description-text { margin: 20px 90px 0 70px; font-size: 16px; } } .dune-immortality .main-content .preorder-text { margin: 20px 20px 0 20px; font-size: 14px; color: #FDE1BC; } @media screen and (min-width: 992px) { .dune-immortality .main-content .preorder-text { margin: 20px 90px 0 70px; font-size: 16px; } } .dune-immortality .main-content .compontent-row { position: relative; display: flex; flex-flow: row wrap; justify-content: space-evenly; align-items: center; margin-top: -50px; } .dune-immortality .main-content .compontent-row .left-img { width: 120%; } @media screen and (min-width: 767px) { .dune-immortality .main-content .compontent-row .left-img { width: 98%; margin-left: -140px; } } @media screen and (min-width: 992px) { .dune-immortality .main-content .compontent-row .left-img { width: 80%; margin-left: -150px; } } .dune-immortality .main-content .compontent-row .right-img { width: 80%; } @media screen and (min-width: 767px) { .dune-immortality .main-content .compontent-row .right-img { width: 40%; margin: -200px -80px 0px -250px; } } @media screen and (min-width: 992px) { .dune-immortality .main-content .compontent-row .right-img { width: 48%; margin: -100px -100px 0 -150px; } } .dune { background-color: transparent; font-family: 'Gotham'; } .dune.resourcePage h4 { font-size: 25px; } @media screen and (max-width: 420px) { .dune.resourcePage h4 { font-size: 15px; } } .dune.resourcePage ul { font-size: 15px; } @media screen and (max-width: 420px) { .dune.resourcePage ul { font-size: 10px; } } .dune.resourcePage ul i { font-size: 20px; } @media screen and (max-width: 992px) { .dune .resource-title { font-size: 24px; } } .dune .img-fluid { max-width: 100%; height: auto; } .dune .dune-banner { max-height: 250px; width: auto; } .dune .brand-logo { max-height: 85px; width: auto; } .dune .brand-logo.dwd { max-height: 130px; } .dune .brand-logo.legendary { margin-top: 45px; } .dune .banner { background-color: #000; } .dune .centered { margin: 0 auto; } .dune .w-100 { width: 100%; } .dune h1 { font-weight: 100; color: #ffebc3; } @media screen and (max-width: 1200px) { .dune h1 { font-size: 32px; } } @media screen and (max-width: 767px) { .dune h1 { font-size: 22px; } } .dune h3 { font-family: 'Trajan', serif; color: #ffe0b7; font-size: 22px; } @media screen and (max-width: 1200px) { .dune h3 { font-size: 18px; } } @media screen and (max-width: 767px) { .dune h3 { font-size: 16px; } } .dune p { font-size: 15px; } @media screen and (max-width: 420px) { .dune p { font-size: 12px; } } .dune a { color: #fff; } .dune a :hover { color: #fff; } .dune main.thank-you p { font-size: 20px; } .dune main.thank-you .logoFooter { padding-bottom: 4em; } @media screen and (max-width: 1200px) { .dune main.thank-you .logoFooter { padding-bottom: 10em; } } @media screen and (max-width: 767px) { .dune main.thank-you .logoFooter { padding-bottom: 2em; } } .dune main.thank-you .brand-logo.dwd { margin-right: 0; } @media screen and (max-width: 767px) { .dune main.thank-you .brand-logo.dwd { display: none; } } .dune main .parallax { background-position: center center; background-repeat: no-repeat; position: absolute; } @media screen and (max-width: 767px) { .dune main .parallax { display: none; } } .dune main .parallax.big-moon { height: auto; top: 100em; left: 0; width: 234px; } .dune main .parallax.little-moon { height: auto; top: 30em; right: 0; width: 200px; } .dune main .parallax.arrakis { bottom: -1em; right: 0; width: 100%; } .dune main .top-dune-video-container { height: 482px; } @media screen and (max-width: 1200px) { .dune main .top-dune-video-container { height: 330px; } } @media screen and (max-width: 640px) { .dune main .top-dune-video-container { height: 170px; } } .dune main .video-container { height: 330px; } @media screen and (max-width: 1200px) { .dune main .video-container { height: 330px; } } @media screen and (max-width: 640px) { .dune main .video-container { height: 170px; } } .dune main .video-container iframe { width: 90%; height: 100%; max-width: 1500px; border: none; } .dune main .mainContentDiv { position: relative; } .dune main .mainContentStart { padding: 0 10em; } @media screen and (max-width: 767px) { .dune main .mainContentStart { padding: 15px; } } .dune main .header-block { padding: 1em 0 4em; } .dune main .top-image { max-width: 109%; margin-left: -4em; margin-top: -8.9em; } @media screen and (max-width: 1200px) { .dune main .top-image { max-width: 110%; margin-top: -8.9em; } } @media screen and (max-width: 992px) { .dune main .top-image { max-width: 112%; margin-top: -6.9em; } } @media screen and (max-width: 767px) { .dune main .top-image { max-width: 107%; margin-top: -6.6em; margin-left: -2em; } } @media screen and (max-width: 640px) { .dune main .top-image { max-width: 105%; margin-top: -4.6em; margin-left: -0.7em; } } .dune main .centerBox { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_ContentBacker_Bottom.png"); background-repeat: repeat-y; background-size: contain; position: relative; } .dune main section { padding: 1em 0; } .dune main section #dune-signup .form-group { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_InputBar.png") no-repeat; background-size: 100% 100%; margin-top: 20px; } .dune main section #dune-signup input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; } @media screen and (max-width: 420px) { .dune main section #dune-signup input { padding: 0 8px; height: 40px; } } .dune main section #dune-signup input:active, .dune main section #dune-signup input:focus { border: none; box-shadow: none; } .dune main section .corner-border { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_TitleUnderliner.png") no-repeat; background-size: contain; padding: 1em; } .dune main section .corner-border.dune-news-border { background-size: 66%; } @media screen and (max-width: 1200px) { .dune main section .corner-border.dune-news-border { background-size: 100%; } } .dune main section .dragon-awards { height: auto; width: 118px; } @media screen and (max-width: 640px) { .dune main section .dragon-awards { width: 108px; } } @media screen and (max-width: 420px) { .dune main section .dragon-awards { width: 89px; } } @media screen and (max-width: 350px) { .dune main section .dragon-awards { width: 75px; } } .dune main section .dice-tower { height: auto; width: 80px; } @media screen and (max-width: 640px) { .dune main section .dice-tower { width: 70px; } } @media screen and (max-width: 420px) { .dune main section .dice-tower { width: 58px; } } @media screen and (max-width: 350px) { .dune main section .dice-tower { width: 48px; } } .dune main section .dice-tower.tile_fit { width: 90px; } @media screen and (max-width: 640px) { .dune main section .dice-tower.tile_fit { width: 80px; } } @media screen and (max-width: 420px) { .dune main section .dice-tower.tile_fit { width: 65px; margin-left: -7px; margin-right: -1px; } } @media screen and (max-width: 350px) { .dune main section .dice-tower.tile_fit { width: 55px; } } .dune main section .dice-tower.large { height: 100px; width: 100px; padding-bottom: 12px; } @media screen and (max-width: 640px) { .dune main section .dice-tower.large { height: 90px; width: 90px; padding-bottom: 10px; } } @media screen and (max-width: 420px) { .dune main section .dice-tower.large { height: 70px; width: 70px; } } .dune main section .flex-display { display: flex; justify-content: center; } .dune main section .btn-dune-text { font-weight: bold; font-size: xx-large; } @media screen and (max-width: 640px) { .dune main section .btn-dune-text { font-size: 22px; } } .dune main section .btn-dune { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_Button_Normal.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; color: white; font-size: 22px; } .dune main section .btn-dune.initial-small-dune { padding: 1em 4em; } @media screen and (max-width: 640px) { .dune main section .btn-dune.initial-small-dune { padding: 0.5em 2em; } } @media screen and (max-width: 320px) { .dune main section .btn-dune.initial-small-dune { padding: 0.5em 0.75em; } } @media screen and (max-width: 640px) { .dune main section .btn-dune { padding: 0.5em 2em; } } @media screen and (max-width: 320px) { .dune main section .btn-dune { padding: 0.5em 0.75em; } } .dune main section .btn-dune:hover { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_Button_Highlighted.png") no-repeat; background-size: 100% 100%; color: #fff; } .dune main section .content-shot { max-width: 117%; margin-left: -7em; } @media screen and (max-width: 992px) { .dune main section .content-shot { max-width: 120%; margin-left: -8em; } } @media screen and (max-width: 767px) { .dune main section .content-shot { max-width: 100%; margin-left: 0em; } } .dune main section .content-imm-shot { max-width: 150%; margin-left: -17em; } @media screen and (max-width: 1320px) { .dune main section .content-imm-shot { max-width: 125%; margin-left: -12em; } } @media screen and (max-width: 1200px) { .dune main section .content-imm-shot { margin-left: -9em; } } @media screen and (max-width: 992px) { .dune main section .content-imm-shot { margin-left: -6em; } } @media screen and (max-width: 767px) { .dune main section .content-imm-shot { max-width: 100%; margin-left: 0em; } } .dune main section .content-deluxe { max-width: 80%; margin-left: 7em; } @media screen and (max-width: 992px) { .dune main section .content-deluxe { max-width: 100%; margin-left: 0; } } .dune main section .content-ix { max-width: 80%; margin-left: 13em; } @media screen and (max-width: 992px) { .dune main section .content-ix { max-width: 100%; margin: 0px 0px 0px 30px; } } @media screen and (max-width: 767px) { .dune main section .content-ix { margin-left: 15px; } } .dune main section.logoFooter { margin-bottom: 0px; } @media screen and (max-width: 640px) { .dune main section.logoFooter { padding: 1em 0 2em; } } .dune main section.logoFooter .copy { padding-top: 3em; } @font-face { font-display: swap; font-family: Gotham; src: url("/fonts/dune/Gotham-Book.otf") format("opentype"); } @font-face { font-display: swap; font-family: Gotham; font-weight: bold; src: url("/fonts/dune/Gotham-Medium.otf") format("opentype"); } @font-face { font-display: swap; font-family: Gotham; font-weight: 100; src: url("/fonts/dune/Gotham-Light.otf") format("opentype"); } @font-face { font-display: swap; font-family: Trajan; src: url("/fonts/dune/trajan-pro-3.otf") format("opentype"); } body.dune-immortality-uprising { background-image: url("https://dwd-web.s3.us-west-2.amazonaws.com/assets/dune/uprising_background.webp"); background-position-x: center; background-repeat: no-repeat; background-color: black; background-size: cover; } @media screen and (min-width: 992px) { body.dune-immortality-uprising { background-position-y: 250px; } } .dune-immortality-uprising { font-family: "Gotham"; } .dune-immortality-uprising button:hover { filter: brightness(150%); } .dune-immortality-uprising button:focus { filter: brightness(50%); } .dune-immortality-uprising main { overflow-x: clip; } .dune-immortality-uprising .corner-border h3 { color: #ffe0b7; font-family: "Trajan", serif; font-size: 27px; text-align: left; } .dune-immortality-uprising h2 { font-size: 20px; margin: 20px 15px 10px 15px; } @media screen and (min-width: 640px) { .dune-immortality-uprising h2 { font-size: 25px; } } @media screen and (min-width: 768px) { .dune-immortality-uprising h2 { font-size: 30px; } } .dune-immortality-uprising footer { margin-top: 50px; } .dune-immortality-uprising .subscribe-block { width: 95%; display: inline-block; } @media screen and (min-width: 992px) { .dune-immortality-uprising .subscribe-block { width: 45%; } } .dune-immortality-uprising .subscribe-block input { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_InputBar.png") no-repeat; background-size: 100% 100%; border: none; color: #fff; margin: 15px auto; width: 75%; font-size: 26px; padding: 30px 12px; } @media screen and (min-width: 992px) { .dune-immortality-uprising .subscribe-block input { width: 100%; } } .dune-immortality-uprising .subscribe-block button { width: 75%; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_Button_Normal.png") no-repeat; background-size: 100% 100%; border: none; padding: 15px 0; color: white; font-weight: bold; font-size: 18px; } @media screen and (min-width: 640px) { .dune-immortality-uprising .subscribe-block button { font-size: 22px; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .subscribe-block button { font-size: 28px; } } .dune-immortality-uprising .subscribe-block h2 { font-weight: 300; } .dune-immortality-uprising .subscribe-block.bottom { margin-bottom: 10px; margin-left: 0; margin-right: 0; } @media screen and (min-width: 992px) and (max-width: 1199px) { .dune-immortality-uprising .subscribe-block.bottom { width: 55%; } } .dune-immortality-uprising .subscribe-block.bottom h2 { margin-top: 30px; } .dune-immortality-uprising .preorder-link-top { display: inline-block; margin-left: auto; margin-right: auto; margin-top: 40px; width: 90%; } @media screen and (min-width: 540px) { .dune-immortality-uprising .preorder-link-top { width: 80%; } } @media screen and (min-width: 640px) { .dune-immortality-uprising .preorder-link-top { width: 350px; } } @media screen and (min-width: 768px) { .dune-immortality-uprising .preorder-link-top { width: 325px; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .preorder-link-top { width: 350px; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .preorder-link-top { margin-top: 70px; width: 400px; } } @media screen and (min-width: 1620px) { .dune-immortality-uprising .preorder-link-top { margin-top: 70px; } } .dune-immortality-uprising .preorder-link-top:hover .preorder-link-top-image-default { display: none; } .dune-immortality-uprising .preorder-link-top:hover .preorder-link-top-image-active { display: inline-block; } .dune-immortality-uprising .preorder-link-top img { height: auto; max-width: 100%; } .dune-immortality-uprising .preorder-link-top-image-active { display: none; } .dune-immortality-uprising .banner { width: 100%; text-align: center; margin-bottom: 40px; background-color: black; } .dune-immortality-uprising .banner h1 { margin: 0; } .dune-immortality-uprising .banner img { width: 100%; margin-bottom: -15px; } .dune-immortality-uprising .subtitle { color: #f9e1a8; font-size: 24px; letter-spacing: 1.25px; margin: 0 auto 20px auto; text-align: center; } @media screen and (min-width: 540px) { .dune-immortality-uprising .subtitle { font-size: 32px; margin: 0 auto 40px auto; } } @media screen and (min-width: 640px) { .dune-immortality-uprising .subtitle { margin: 0 auto 30px auto; } } @media screen and (min-width: 768px) { .dune-immortality-uprising .subtitle { font-size: 40px; margin: 0 auto 40px auto; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .subtitle { font-size: 48px; margin: 0 auto 70px auto; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .subtitle { font-size: 56px; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .subtitle { font-size: 64px; } } .dune-immortality-uprising .main-content { margin: 0 auto; max-width: 960px; width: 80%; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/uprising_contentbacker_bottom.webp"); background-repeat: repeat-y; background-size: contain; position: relative; text-align: center; } @media screen and (min-width: 420px) { .dune-immortality-uprising .main-content { max-width: 336px; width: 336px; } } @media screen and (min-width: 540px) { .dune-immortality-uprising .main-content { max-width: 432px; width: 432px; } } @media screen and (min-width: 640px) { .dune-immortality-uprising .main-content { max-width: 512px; width: 512px; } } @media screen and (min-width: 768px) { .dune-immortality-uprising .main-content { max-width: 614px; width: 614px; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content { max-width: 794px; width: 794px; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .main-content { max-width: 960px; width: 80%; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .main-content { max-width: 1191px; width: 1191px; } } .dune-immortality-uprising .main-content .content-top { width: 100%; margin-top: -10px; } .dune-immortality-uprising .main-content .content-bottom { width: 100%; margin-bottom: -10px; -ms-transform: scaleY(-1); -moz-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); position: relative; top: 7px; } @media screen and (min-width: 420px) { .dune-immortality-uprising .main-content .content-bottom { top: 7px; } } @media screen and (min-width: 540px) { .dune-immortality-uprising .main-content .content-bottom { top: 9px; } } @media screen and (min-width: 640px) { .dune-immortality-uprising .main-content .content-bottom { top: 11px; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content .content-bottom { margin-bottom: -11px; top: 14px; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .main-content .content-bottom { margin-bottom: -10px; top: 20px; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .main-content .content-bottom { top: 27px; } } .dune-immortality-uprising .main-content .section-divider { width: 100%; margin: 15px 0; } .dune-immortality-uprising .main-content .description-text { text-align: center; margin: 20px 12px 0 12px; font-size: 13px; } @media screen and (min-width: 420px) { .dune-immortality-uprising .main-content .description-text { font-size: 14px; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content .description-text { margin: 20px 70px 0 70px; font-size: 16px; letter-spacing: 1.2px; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .main-content .description-text { margin: 0px 60px 16px 60px; font-size: 18px; letter-spacing: 1.25px; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .main-content .description-text { letter-spacing: 1.2px; margin: 0px 100px 16px 100px; } } .dune-immortality-uprising .main-content .description-text br { display: block; } .dune-immortality-uprising .main-content .description-text p { margin: 0; } .dune-immortality-uprising .main-content .top-section { position: relative; } @media screen and (min-width: 540px) { .dune-immortality-uprising .main-content .top-section { height: 315px; } } @media screen and (min-width: 640px) { .dune-immortality-uprising .main-content .top-section { height: 340px; } } @media screen and (min-width: 768px) { .dune-immortality-uprising .main-content .top-section { height: 420px; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content .top-section { height: 500px; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .main-content .top-section { height: 580px; } } .dune-immortality-uprising .main-content .top-section .left-img { height: auto; margin-top: -20px; width: 100%; } @media screen and (min-width: 420px) { .dune-immortality-uprising .main-content .top-section .left-img { margin-top: -24px; width: 103%; } } @media screen and (min-width: 540px) { .dune-immortality-uprising .main-content .top-section .left-img { left: -35px; margin: 0; position: absolute; top: 5px; width: 175px; z-index: 3; } } @media screen and (min-width: 640px) { .dune-immortality-uprising .main-content .top-section .left-img { top: 10px; width: 200px; left: -20px; } } @media screen and (min-width: 768px) { .dune-immortality-uprising .main-content .top-section .left-img { top: 20px; width: 320px; left: -60px; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content .top-section .left-img { left: -35px; top: 20px; width: 360px; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .main-content .top-section .left-img { left: -35px; z-index: 3; top: 10px; width: 470px; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .main-content .top-section .left-img { top: 30px; width: 540px; z-index: 3; } } .dune-immortality-uprising .main-content .top-section .right-col { position: relative; z-index: 2; } @media screen and (min-width: 540px) { .dune-immortality-uprising .main-content .top-section .right-col { margin-left: 0; margin-top: -47px; height: 150px; } } @media screen and (min-width: 768px) { .dune-immortality-uprising .main-content .top-section .right-col { height: auto; margin-left: 209px; margin-top: -60px; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content .top-section .right-col { margin-left: 239px; margin-top: -77px; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .main-content .top-section .right-col { margin-left: 403px; margin-top: -82px; z-index: 2; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .main-content .top-section .right-col { margin-left: 477px; margin-top: -104px; z-index: 2; } } .dune-immortality-uprising .main-content .top-section .right-img { height: auto; margin: 0 auto; width: 90%; } @media screen and (min-width: 540px) { .dune-immortality-uprising .main-content .top-section .right-img { margin: 0; position: absolute; right: 3px; top: 14px; width: 300px; } } @media screen and (min-width: 640px) { .dune-immortality-uprising .main-content .top-section .right-img { right: 3px; width: 345px; top: 10px; } } @media screen and (min-width: 768px) { .dune-immortality-uprising .main-content .top-section .right-img { position: relative; width: 400px; top: 19px; right: 2px; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content .top-section .right-img { right: 3px; top: 26px; width: 550px; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .main-content .top-section .right-img { right: 3px; top: 26px; width: 550px; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .main-content .top-section .right-img { right: 0; top: 34px; width: 700px; } } .dune-immortality-uprising .main-content .top-section .subscribe-block { width: 95%; } @media screen and (min-width: 768px) { .dune-immortality-uprising .main-content .top-section .subscribe-block { margin-left: 30px; width: 90%; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content .top-section .subscribe-block { margin-left: 83px; width: 70%; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .main-content .top-section .subscribe-block { margin-left: 0; width: 80%; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .main-content .top-section .subscribe-block { width: 75%; } } .dune-immortality-uprising .main-content .top-section .subscribe-block.top { position: relative; z-index: 5; } @media screen and (min-width: 540px) { .dune-immortality-uprising .main-content .top-section .subscribe-block.top { margin-top: 165px; } } @media screen and (min-width: 640px) { .dune-immortality-uprising .main-content .top-section .subscribe-block.top { margin-top: 185px; } } @media screen and (min-width: 768px) { .dune-immortality-uprising .main-content .top-section .subscribe-block.top { margin-top: 19px; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content .top-section .subscribe-block.top { margin-top: 26px; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .main-content .top-section .subscribe-block.top { margin-top: 26px; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .main-content .top-section .subscribe-block.top { margin-top: 34px; } } .dune-immortality-uprising .main-content .comp-row-1 { position: relative; width: 95%; margin: 35px auto 0 auto; } @media screen and (min-width: 540px) { .dune-immortality-uprising .main-content .comp-row-1 { height: 430px; width: 95%; margin: 0 auto; } } @media screen and (min-width: 640px) { .dune-immortality-uprising .main-content .comp-row-1 { height: 535px; } } @media screen and (min-width: 768px) { .dune-immortality-uprising .main-content .comp-row-1 { margin: 0; width: 100%; height: 245px; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content .comp-row-1 { height: 280px; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .main-content .comp-row-1 { height: 430px; } } .dune-immortality-uprising .main-content .comp-row-1 .left-img { height: auto; pointer-events: none; width: 100%; } @media screen and (min-width: 540px) { .dune-immortality-uprising .main-content .comp-row-1 .left-img { width: 100%; } } @media screen and (min-width: 768px) { .dune-immortality-uprising .main-content .comp-row-1 .left-img { left: -90px; position: absolute; top: -87px; width: 430px; z-index: 3; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content .comp-row-1 .left-img { left: -90px; top: -150px; width: 520px; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .main-content .comp-row-1 .left-img { left: -140px; top: -45px; width: auto; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .main-content .comp-row-1 .left-img { position: absolute; left: -90px; top: -55px; z-index: 3; } } @media screen and (min-width: 1620px) { .dune-immortality-uprising .main-content .comp-row-1 .left-img { left: -110px; top: -55px; } } .dune-immortality-uprising .main-content .comp-row-1 .right-img { height: auto; width: 95%; margin-top: -60px; pointer-events: none; } @media screen and (min-width: 540px) { .dune-immortality-uprising .main-content .comp-row-1 .right-img { margin-top: -90px; width: 100%; } } @media screen and (min-width: 768px) { .dune-immortality-uprising .main-content .comp-row-1 .right-img { position: absolute; margin-top: 0; right: -76px; top: -50px; width: 480px; z-index: 3; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content .comp-row-1 .right-img { right: -90px; top: -65px; width: 580px; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .main-content .comp-row-1 .right-img { position: absolute; right: -120px; top: 40px; z-index: 3; width: 670px; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .main-content .comp-row-1 .right-img { position: absolute; right: -45px; top: 7px; z-index: 3; width: 720px; } } @media screen and (min-width: 1620px) { .dune-immortality-uprising .main-content .comp-row-1 .right-img { position: absolute; right: -155px; top: 0; z-index: 3; width: 860px; } } .dune-immortality-uprising .main-content .comp-row-2 { position: relative; width: 90%; margin: 10px auto 20px auto; } @media screen and (min-width: 768px) { .dune-immortality-uprising .main-content .comp-row-2 { margin: 0; width: 100%; height: 230px; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content .comp-row-2 { height: 295px; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .main-content .comp-row-2 { height: 315px; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .main-content .comp-row-2 { height: 375px; } } @media screen and (min-width: 1620px) { .dune-immortality-uprising .main-content .comp-row-2 { height: 425px; } } .dune-immortality-uprising .main-content .comp-row-2 .left-img { height: auto; width: 100%; } @media screen and (min-width: 768px) { .dune-immortality-uprising .main-content .comp-row-2 .left-img { z-index: 2; position: absolute; width: 415px; left: -70px; top: 10px; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content .comp-row-2 .left-img { width: 500px; left: -90px; top: 0; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .main-content .comp-row-2 .left-img { position: absolute; left: -105px; top: 0; z-index: 2; width: 620px; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .main-content .comp-row-2 .left-img { position: absolute; left: -50px; top: 17px; width: 700px; z-index: 2; } } @media screen and (min-width: 1620px) { .dune-immortality-uprising .main-content .comp-row-2 .left-img { left: -90px; top: 0; width: 746px; } } .dune-immortality-uprising .main-content .comp-row-2 .right-img { height: auto; right: -25px; top: 0; width: 100%; } @media screen and (min-width: 768px) { .dune-immortality-uprising .main-content .comp-row-2 .right-img { z-index: 2; position: absolute; width: 300px; right: -40px; } } @media screen and (min-width: 992px) { .dune-immortality-uprising .main-content .comp-row-2 .right-img { right: -25px; width: 400px; } } @media screen and (min-width: 1200px) { .dune-immortality-uprising .main-content .comp-row-2 .right-img { right: -30px; top: 0; z-index: 2; width: 470px; } } @media screen and (min-width: 1320px) { .dune-immortality-uprising .main-content .comp-row-2 .right-img { right: -25px; top: 0; z-index: 2; width: auto; } } .dune-immortality-uprising .main-content .corner-border { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_TitleUnderliner.png") no-repeat; background-size: contain; padding: 1em; } .dune-immortality-uprising .main-content .corner-border.dune-news-border { background-size: 66%; } @media screen and (max-width: 1200px) { .dune-immortality-uprising .main-content .corner-border.dune-news-border { background-size: 100%; } } .dune-immortality-uprising .more-news-link { font-weight: 600; font-size: 12px; color: #abdeff; text-decoration: underline; } .dune-immortality-uprising .more-news-p { margin: 1rem 0; } @media screen and (min-width: 641px) { body.dune-immortality-uprising section.lnews .blog-posts .bp-content { height: 385px; } } @media screen and (min-width: 768px) { body.dune-immortality-uprising section.lnews .blog-posts .bp-content { height: 350px; } } @media screen and (min-width: 993px) { body.dune-immortality-uprising section.lnews .blog-posts .bp-content { height: 380px; } } @media screen and (min-width: 1200px) { body.dune-immortality-uprising section.lnews .blog-posts .bp-content { height: 350px; } } body.dune-immortality-uprising section.lnews .blog-posts .bp-content small { right: 0; } @media screen and (min-width: 540px) { body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg .bp-title h2 { height: 65px; } } @media screen and (min-width: 641px) { body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg .bp-title h2 { height: 95px; } } @media screen and (min-width: 768px) { body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg .bp-title h2 { height: 75px; } } @media screen and (min-width: 993px) { body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg .bp-title h2 { height: 85px; } } @media screen and (min-width: 1200px) { body.dune-immortality-uprising section.lnews .blog-posts .bp-content .bpImg .bp-title h2 { height: 75px; } } body.dune-immortality-uprising-thank-you .thank-you { background-color: transparent; font-family: "Gotham"; margin-bottom: 40px; margin-top: 40px; } @media screen and (min-width: 992px) { body.dune-immortality-uprising-thank-you .thank-you { margin-bottom: 65px; margin-top: 65px; } } body.dune-immortality-uprising-thank-you .thank-you .content-inner { margin: 0 auto; max-width: 960px; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/uprising_contentbacker_bottom.webp"); background-repeat: repeat-y; background-size: contain; position: relative; text-align: center; } @media screen and (min-width: 420px) { body.dune-immortality-uprising-thank-you .thank-you .content-inner { width: 80%; } } body.dune-immortality-uprising-thank-you .thank-you .content-top { width: 100%; position: relative; top: -12px; } @media screen and (min-width: 420px) { body.dune-immortality-uprising-thank-you .thank-you .content-top { top: -13px; } } @media screen and (min-width: 540px) { body.dune-immortality-uprising-thank-you .thank-you .content-top { top: -14px; } } @media screen and (min-width: 640px) { body.dune-immortality-uprising-thank-you .thank-you .content-top { top: -15px; } } @media screen and (min-width: 992px) { body.dune-immortality-uprising-thank-you .thank-you .content-top { top: -19px; } } @media screen and (min-width: 1200px) { body.dune-immortality-uprising-thank-you .thank-you .content-top { top: -24px; } } body.dune-immortality-uprising-thank-you .thank-you .content-bottom { width: 100%; -ms-transform: scaleY(-1); -moz-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); position: relative; top: 11px; } @media screen and (min-width: 420px) { body.dune-immortality-uprising-thank-you .thank-you .content-bottom { top: 12px; } } @media screen and (min-width: 540px) { body.dune-immortality-uprising-thank-you .thank-you .content-bottom { top: 13px; } } @media screen and (min-width: 640px) { body.dune-immortality-uprising-thank-you .thank-you .content-bottom { top: 16px; } } @media screen and (min-width: 768px) { body.dune-immortality-uprising-thank-you .thank-you .content-bottom { top: 14px; } } @media screen and (min-width: 992px) { body.dune-immortality-uprising-thank-you .thank-you .content-bottom { top: 19px; } } @media screen and (min-width: 1200px) { body.dune-immortality-uprising-thank-you .thank-you .content-bottom { top: 24px; } } body.dune-immortality-uprising-thank-you .thank-you p { font-size: 20px; } body.dune-immortality-uprising-thank-you .thank-you .logoFooter { padding-bottom: 4em; } @media screen and (max-width: 1200px) { body.dune-immortality-uprising-thank-you .thank-you .logoFooter { padding-bottom: 5em; } } @media screen and (max-width: 768px) { body.dune-immortality-uprising-thank-you .thank-you .logoFooter { padding-bottom: 2em; } } body.dune-immortality-uprising-thank-you .thank-you .brand-logo.dwd { margin-right: 0; } @media screen and (max-width: 768px) { body.dune-immortality-uprising-thank-you .thank-you .brand-logo.dwd { display: none; } } body.dune-immortality-uprising-thank-you .thank-you .btn-dune { padding: 1em 1.5em; } @media screen and (min-width: 540px) { body.dune-immortality-uprising-thank-you .thank-you .btn-dune { padding: 1em 5em; } } @font-face { font-display: swap; font-family: Gotham; src: url("/fonts/dune/Gotham-Book.otf") format("opentype"); } @font-face { font-display: swap; font-family: Gotham; font-weight: bold; src: url("/fonts/dune/Gotham-Medium.otf") format("opentype"); } @font-face { font-display: swap; font-family: Gotham; font-weight: 100; src: url("/fonts/dune/Gotham-Light.otf") format("opentype"); } @font-face { font-display: swap; font-family: Trajan; src: url("/fonts/dune/trajan-pro-3.otf") format("opentype"); } .duneDigital { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/digital/backgroundstars.webp"); background-position: center; background-repeat: no-repeat; background-size: cover; font-family: "Gotham"; position: relative; } .duneDigital::before { content: ""; bottom: 0; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/digital/backgroundplanet.webp"); background-repeat: no-repeat; background-position: center top; background-size: 100%; height: 500px; position: absolute; width: 100%; } @media screen and (min-width: 420px) { .duneDigital::before { height: 600px; } } @media screen and (min-width: 540px) { .duneDigital::before { height: 700px; } } @media screen and (min-width: 640px) { .duneDigital::before { height: 800px; } } @media screen and (min-width: 767px) { .duneDigital::before { height: 900px; } } @media screen and (min-width: 992px) { .duneDigital::before { height: 1150px; } } @media screen and (min-width: 1200px) { .duneDigital::before { background-position: center top; height: 1210px; } } @media screen and (min-width: 1320px) { .duneDigital::before { height: 1260px; } } @media screen and (min-width: 1620px) { .duneDigital::before { height: 1280px; } } .duneDigital main a { color: white; } .duneDigital main h1 { color: #f2bb82; font-weight: 100; } @media screen and (max-width: 539px) { .duneDigital main h1 { margin-top: 15%; padding-left: 5%; padding-right: 5%; } } @media screen and (min-width: 540px) and (max-width: 767px) { .duneDigital main h1 { margin-top: 10%; } } @media screen and (max-width: 1200px) { .duneDigital main h1 { font-size: 32px; } } @media screen and (max-width: 767px) { .duneDigital main h1 { font-size: 22px; } } .duneDigital main h3 { font-family: "Trajan", serif; color: #ffeeda; font-size: 21px; } @media screen and (max-width: 1200px) { .duneDigital main h3 { font-size: 18px; } } @media screen and (max-width: 767px) { .duneDigital main h3 { font-size: 16px; } } .duneDigital main p { font-size: 15px; } @media screen and (max-width: 420px) { .duneDigital main p { font-size: 12px; } } .duneDigital main video { box-shadow: 0px 0px 20px black; } .duneDigital main .awards1 { margin-bottom: 6rem; } .duneDigital main .awards1 h2 { margin-top: 0; } .duneDigital main .awards2 { margin-bottom: 4rem; max-width: 1400px; } @media screen and (min-width: 992px) { .duneDigital main .awards2 { margin-bottom: 20rem; } } @media screen and (min-width: 1200px) { .duneDigital main .awards2 { margin-bottom: 28rem; } } @media screen and (min-width: 420px) { .duneDigital main .awards-1col { display: none; } } .duneDigital main .awards-2cols { display: none; } @media screen and (min-width: 420px) and (max-width: 767px) { .duneDigital main .awards-2cols { display: block; } } .duneDigital main .awards-4cols { display: none; } @media screen and (min-width: 768px) { .duneDigital main .awards-4cols { display: block; } } .duneDigital main .brand-logo { max-height: 85px; width: auto; } .duneDigital main .brand-logo.dwd { margin: 0px 10px 0px 0px; max-height: 130px; } .duneDigital main .brand-logo.legendary { margin-top: 45px; } .duneDigital main .btn-dune { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_Button_Normal.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; color: white; font-size: 22px; } @media screen and (max-width: 640px) { .duneDigital main .btn-dune.initial-small-dune { padding: 0.5em 2em; } } @media screen and (max-width: 320px) { .duneDigital main .btn-dune.initial-small-dune { padding: 0.5em 0.75em; } } @media screen and (max-width: 640px) { .duneDigital main .btn-dune { padding: 0.5em 2em; } } @media screen and (max-width: 320px) { .duneDigital main .btn-dune { padding: 0.5em 0.75em; } } .duneDigital main .btn-dune:focus, .duneDigital main .btn-dune:hover { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_Button_Highlighted.png") no-repeat; background-size: 100% 100%; color: #fff; } .duneDigital main .btn-dune-text { font-weight: bold; font-size: xx-large; } @media screen and (max-width: 640px) { .duneDigital main .btn-dune-text { font-size: 22px; } } .duneDigital main .copy { font-size: 16px; line-height: 1.1; } .duneDigital main .corner-border { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_TitleUnderliner.png") no-repeat; background-size: contain; padding: 1em; } .duneDigital main .corner-border.dune-news-border { background-size: 66%; } @media screen and (max-width: 1200px) { .duneDigital main .corner-border.dune-news-border { background-size: 100%; } } .duneDigital main .countdown-row { margin-bottom: 8rem; } .duneDigital main .custom-container-spacing { margin-left: auto; margin-right: auto; max-width: calc(100% - 30px); padding-left: 15px; padding-right: 15px; } @media screen and (min-width: 420px) { .duneDigital main .custom-container-spacing { max-width: 390px; } } @media screen and (min-width: 540px) { .duneDigital main .custom-container-spacing { max-width: 510px; } } @media screen and (min-width: 640px) { .duneDigital main .custom-container-spacing { max-width: 610px; } } @media screen and (min-width: 768px) { .duneDigital main .custom-container-spacing { max-width: 738px; } } @media screen and (min-width: 992px) { .duneDigital main .custom-container-spacing { max-width: 962px; } } @media screen and (min-width: 1200px) { .duneDigital main .custom-container-spacing { max-width: 1170px; } } @media screen and (min-width: 1320px) { .duneDigital main .custom-container-spacing { max-width: 1280px; } } @media screen and (min-width: 1620px) { .duneDigital main .custom-container-spacing { max-width: 1400px; } } .duneDigital main .img-fluid { max-width: 100%; height: auto; } .duneDigital main .lnews .row { padding: 0; } .duneDigital main .logoFooter { background-color: #080d1c; margin-bottom: 0px; margin-top: 4em; padding-top: 3rem; padding-bottom: 3rem; } .duneDigital main .more-news-link { font-weight: 600; color: #abdeff; text-decoration: underline; } .duneDigital main .more-news-p { margin: 1rem 0; } .duneDigital main .news-bg { background-color: rgba(8, 13, 28, 0.75); padding: 8px 16px; } .duneDigital main .section-newsletter { margin-bottom: 38px; } .duneDigital main .section-newsletter h2 { text-shadow: 1px 1px 12px #000; } .duneDigital main .section-screenshots { column-gap: 1.5rem; display: grid; grid-template-columns: 1fr; margin-bottom: 90px; position: relative; row-gap: 1.5rem; } @media screen and (min-width: 640px) { .duneDigital main .section-screenshots { grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width: 992px) { .duneDigital main .section-screenshots { grid-template-columns: repeat(3, 1fr); row-gap: 3rem; } } .duneDigital main .section-text-columns { color: #fff3df; display: grid; grid-template-columns: 1fr; justify-content: space-between; margin-bottom: 8rem; } @media screen and (max-width: 991px) { .duneDigital main .section-text-columns { gap: 1.5rem; } } @media screen and (min-width: 992px) { .duneDigital main .section-text-columns { grid-template-columns: repeat(3, 280px); } } @media screen and (min-width: 1200px) { .duneDigital main .section-text-columns { grid-template-columns: repeat(3, 352px); } } .duneDigital main .section-text-columns h3 { margin-bottom: 2rem; margin-top: 0; } .duneDigital main .section-text-columns p { letter-spacing: 1.4px; margin-bottom: 0; } .duneDigital main .section-text-columns .text-column { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/digital/textbox_01_v2.png"); background-repeat: no-repeat; background-size: 100%; padding: 24px; } .duneDigital main .section-top-content { position: relative; z-index: 4; } .duneDigital main .section-top-content br { display: none; } @media screen and (min-width: 992px) { .duneDigital main .section-top-content br { display: block; } } .duneDigital main .section-top-content p, .duneDigital main .section-top-content ul { font-size: 15px; } @media screen and (max-width: 539px) { .duneDigital main .section-top-content p, .duneDigital main .section-top-content ul { padding-left: 60px; padding-right: 60px; } } @media screen and (max-width: 991px) { .duneDigital main .section-top-content p, .duneDigital main .section-top-content ul { padding-left: 40px; padding-right: 40px; } } @media screen and (min-width: 992px) { .duneDigital main .section-top-content p, .duneDigital main .section-top-content ul { font-size: 18px; } } .duneDigital main .section-top-content p { color: #fcead6; font-weight: lighter; margin-bottom: 0; } @media screen and (max-width: 767px) { .duneDigital main .section-top-content li:not(:last-child) { margin-bottom: 0.5rem; } } .duneDigital main .section-top-content ul { color: #fcead6; font-weight: lighter; list-style: none; margin-bottom: 3rem; margin-top: 4rem; } .duneDigital main .section-top-images { position: relative; } @media screen and (max-width: 1619px) { .duneDigital main .section-top-images { overflow-x: clip; overflow-y: visible; } } .duneDigital main .section-top-images-inner { margin-left: auto; margin-right: auto; max-width: 100%; position: relative; } @media screen and (min-width: 420px) { .duneDigital main .section-top-images-inner { max-width: 420px; } } @media screen and (min-width: 540px) { .duneDigital main .section-top-images-inner { max-width: 540px; } } @media screen and (min-width: 640px) { .duneDigital main .section-top-images-inner { max-width: 640px; } } @media screen and (min-width: 768px) { .duneDigital main .section-top-images-inner { max-width: 768px; } } @media screen and (min-width: 992px) { .duneDigital main .section-top-images-inner { max-width: 992px; } } @media screen and (min-width: 1200px) { .duneDigital main .section-top-images-inner { max-width: 1200px; } } @media screen and (min-width: 1320px) { .duneDigital main .section-top-images-inner { max-width: 1320px; } } @media screen and (min-width: 1620px) { .duneDigital main .section-top-images-inner { max-width: 1620px; } } @media screen and (min-width: 1920px) { .duneDigital main .section-top-images-inner { max-width: 1920px; } } .duneDigital main .section-top-images .img-commando, .duneDigital main .section-top-images .img-mist, .duneDigital main .section-top-images .img-paul { height: auto; position: absolute; user-select: none; } .duneDigital main .section-top-images .img-commando { left: -50px; top: 30px; } @media screen and (min-width: 420px) { .duneDigital main .section-top-images .img-commando { left: -80px; top: 20px; } } @media screen and (min-width: 540px) { .duneDigital main .section-top-images .img-commando { left: -110px; top: 30px; } } @media screen and (min-width: 640px) { .duneDigital main .section-top-images .img-commando { left: -120px; top: 45px; } } @media screen and (max-width: 767px) { .duneDigital main .section-top-images .img-commando { width: 75%; } } @media screen and (min-width: 768px) { .duneDigital main .section-top-images .img-commando { left: -140px; top: 55px; } } @media screen and (min-width: 768px) and (max-width: 991px) { .duneDigital main .section-top-images .img-commando { width: 70%; } } @media screen and (min-width: 992px) { .duneDigital main .section-top-images .img-commando { left: -140px; top: 60px; } } @media screen and (min-width: 992px) and (max-width: 1199px) { .duneDigital main .section-top-images .img-commando { width: 63%; } } @media screen and (min-width: 1200px) { .duneDigital main .section-top-images .img-commando { left: -170px; top: 50px; width: 740px; } } @media screen and (min-width: 1320px) { .duneDigital main .section-top-images .img-commando { left: -210px; width: 840px; } } @media screen and (min-width: 1620px) { .duneDigital main .section-top-images .img-commando { left: -200px; top: 60px; width: 950px; } } @media screen and (min-width: 1920px) { .duneDigital main .section-top-images .img-commando { left: -164px; top: 20px; width: auto; } } .duneDigital main .section-top-images .img-mist { pointer-events: none; top: 130px; width: 100%; z-index: 3; } @media screen and (min-width: 420px) { .duneDigital main .section-top-images .img-mist { top: 170px; } } @media screen and (min-width: 540px) { .duneDigital main .section-top-images .img-mist { top: 150px; } } @media screen and (min-width: 640px) { .duneDigital main .section-top-images .img-mist { top: 250px; } } @media screen and (min-width: 768px) { .duneDigital main .section-top-images .img-mist { top: 310px; } } @media screen and (min-width: 992px) { .duneDigital main .section-top-images .img-mist { top: 320px; } } @media screen and (min-width: 1200px) { .duneDigital main .section-top-images .img-mist { top: 380px; } } @media screen and (min-width: 1320px) { .duneDigital main .section-top-images .img-mist { top: 430px; } } @media screen and (min-width: 1620px) { .duneDigital main .section-top-images .img-mist { top: 410px; } } @media screen and (min-width: 1920px) { .duneDigital main .section-top-images .img-mist { top: 430px; } } .duneDigital main .section-top-images .img-paul { right: 0; top: 30px; } @media screen and (min-width: 420px) { .duneDigital main .section-top-images .img-paul { right: 0; } } @media screen and (min-width: 540px) { .duneDigital main .section-top-images .img-paul { right: 0; } } @media screen and (min-width: 640px) { .duneDigital main .section-top-images .img-paul { right: -10px; top: 60px; } } @media screen and (min-width: 768px) { .duneDigital main .section-top-images .img-paul { right: -30px; } } @media screen and (min-width: 992px) { .duneDigital main .section-top-images .img-paul { right: 20px; } } @media screen and (max-width: 1199px) { .duneDigital main .section-top-images .img-paul { width: 50%; } } @media screen and (min-width: 1200px) { .duneDigital main .section-top-images .img-paul { right: 10px; top: 45px; width: 550px; } } @media screen and (min-width: 1320px) { .duneDigital main .section-top-images .img-paul { right: 0; top: 40px; width: 620px; } } @media screen and (min-width: 1620px) { .duneDigital main .section-top-images .img-paul { right: 40px; top: 40px; width: 680px; } } @media screen and (min-width: 1920px) { .duneDigital main .section-top-images .img-paul { right: 70px; top: 25px; width: auto; } } .duneDigital main .steam-badge { height: auto; width: 200px; } @media screen and (min-width: 540px) { .duneDigital main .steam-badge { width: 230px; } } @media screen and (min-width: 640px) { .duneDigital main .steam-badge { width: 230px; } } @media screen and (min-width: 768px) { .duneDigital main .steam-badge { width: 260px; } } @media screen and (min-width: 992px) { .duneDigital main .steam-badge { width: 260px; } } @media screen and (min-width: 1200px) { .duneDigital main .steam-badge { width: auto; } } .duneDigital main .steam-link { display: inline-block; margin-bottom: 50px; position: relative; } .duneDigital main .steam-link-col { margin-top: -80px; z-index: 3; } @media screen and (min-width: 420px) { .duneDigital main .steam-link-col { margin-top: -100px; } } @media screen and (min-width: 540px) { .duneDigital main .steam-link-col { margin-top: -145px; } } @media screen and (min-width: 640px) { .duneDigital main .steam-link-col { margin-top: -170px; } } @media screen and (min-width: 768px) { .duneDigital main .steam-link-col { margin-top: -195px; } } @media screen and (min-width: 992px) { .duneDigital main .steam-link-col { margin-top: -235px; } } @media screen and (min-width: 1200px) { .duneDigital main .steam-link-col { margin-top: -285px; } } @media screen and (min-width: 1320px) { .duneDigital main .steam-link-col { margin-top: -285px; } } @media screen and (min-width: 1620px) { .duneDigital main .steam-link-col { margin-top: -285px; } } @media screen and (min-width: 1920px) { .duneDigital main .steam-link-col { margin-top: -310px; } } .duneDigital main .text-row { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/digital/textbox_02_v2.webp"); background-repeat: no-repeat; background-size: 100% 100%; padding-bottom: 75%; padding-top: 40px; } @media screen and (min-width: 420px) { .duneDigital main .text-row { padding-bottom: 24rem; } } @media screen and (min-width: 768px) { .duneDigital main .text-row { padding-bottom: 16rem; } } .duneDigital main .top-images-logo { display: inline-block; height: auto; position: relative; top: -50px; } @media screen and (min-width: 540px) { .duneDigital main .top-images-logo { top: -80px; } } @media screen and (min-width: 992px) { .duneDigital main .top-images-logo { top: -110px; } } @media screen and (min-width: 1200px) { .duneDigital main .top-images-logo { width: 980px; } } @media screen and (min-width: 1320px) { .duneDigital main .top-images-logo { width: 1010px; } } @media screen and (min-width: 1620px) { .duneDigital main .top-images-logo { width: 1000px; } } @media screen and (min-width: 1920px) { .duneDigital main .top-images-logo { width: auto; } } .duneDigital main .zoomed-img { position: fixed; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.75); z-index: 999; opacity: 0; pointer-events: none; } .duneDigital main .zoomed-img img { margin-left: auto; margin-right: auto; max-width: 90%; max-height: 80%; position: relative; top: -100%; transition: all 1s ease; } .duneDigital main .zoomed-img:target { outline: none; top: 0; opacity: 1; pointer-events: auto; transition: all 1.2s ease; } .duneDigital main .zoomed-img:target img { top: 0; top: 50%; transform: translateY(-50%); } .duneDigital main #dune-digital-signup .form-group { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_InputBar.png"); background-repeat: no-repeat; background-size: 100% 100%; margin-top: 36px; } .duneDigital main #dune-digital-signup input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; } @media screen and (max-width: 420px) { .duneDigital main #dune-digital-signup input { padding: 0 8px; height: 40px; } } .duneDigital main #dune-digital-signup input:active, .duneDigital main #dune-digital-signup input:focus { border: none; box-shadow: none; } .duneDigitalTY::before { content: none; } .duneDigitalTY main h1 { text-shadow: 1px 1px 12px #000; } .duneDigitalTY main .section-top-content p:not(.tyP) { padding: 0; } .duneDigitalTY main .section-top-content p.tyP { margin-bottom: 1rem; text-shadow: 1px 1px 12px #000; } .duneDigitalTY main .text-row { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/digital/textbox_02_v2.webp"); background-repeat: no-repeat; background-size: 100% 100%; margin-top: -80px; padding-bottom: 75%; padding-top: 40px; } @media screen and (min-width: 420px) { .duneDigitalTY main .text-row { margin-top: -60px; padding-bottom: 24rem; } } @media screen and (min-width: 540px) { .duneDigitalTY main .text-row { margin-top: -45px; } } @media screen and (min-width: 640px) { .duneDigitalTY main .text-row { margin-top: -70px; } } @media screen and (min-width: 768px) { .duneDigitalTY main .text-row { margin-top: -75px; padding-bottom: 16rem; } } @media screen and (min-width: 992px) { .duneDigitalTY main .text-row { margin-top: -125px; } } @media screen and (min-width: 1200px) { .duneDigitalTY main .text-row { margin-top: -165px; } } @media screen and (min-width: 1320px) { .duneDigitalTY main .text-row { margin-top: -145px; } } @media screen and (min-width: 1620px) { .duneDigitalTY main .text-row { margin-top: -145px; } } @media screen and (min-width: 1920px) { .duneDigitalTY main .text-row { margin-top: -165px; } } @font-face { font-display: swap; font-family: Gotham; src: url("/fonts/dune/Gotham-Book.otf") format("opentype"); } @font-face { font-display: swap; font-family: Gotham; font-weight: bold; src: url("/fonts/dune/Gotham-Medium.otf") format("opentype"); } @font-face { font-display: swap; font-family: Gotham; font-weight: 100; src: url("/fonts/dune/Gotham-Light.otf") format("opentype"); } @font-face { font-display: swap; font-family: Trajan; src: url("/fonts/dune/trajan-pro-3.otf") format("opentype"); } .support_page { background-color: transparent; font-family: 'Gotham'; } .support_page .row { max-width: 100%; } .support_page .attachment-text { display: inline-block; font-size: 14px; font-weight: 200; padding-left: 10px; } .support_page #supportLangSelector { margin: 5px 0 15px 0; } .support_page .resourcePage h4 { font-size: 25px; } @media screen and (max-width: 420px) { .support_page .resourcePage h4 { font-size: 15px; } } .support_page .resourcePage ul { font-size: 15px; } @media screen and (max-width: 420px) { .support_page .resourcePage ul { font-size: 10px; } } .support_page .resourcePage ul i { font-size: 20px; } .support_page .img-fluid { max-width: 100%; height: auto; } .support_page .dune-banner { max-height: 250px; } .support_page .brand-logo { max-height: 85px; width: auto; } .support_page .brand-logo.dwd { max-height: 130px; margin-right: -6em; } @media screen and (max-width: 640px) { .support_page .brand-logo.dwd { margin-right: -3em; } } .support_page .brand-logo.legendary { margin-top: 45px; } .support_page .banner { background-color: #000; } .support_page .centered { margin: 0 auto; } .support_page .w-100 { width: 100%; } .support_page h1 { font-weight: 100; color: #ffebc3; } .support_page h3 { font-size: 33px; font-family: 'Trajan', serif; color: #ffe0b7; } .support_page p { font-size: 15px; } .support_page a { color: #fff; } .support_page a :hover { color: #fff; } .support_page main { color: #fff; } .support_page main .support-reason { display: none; } .support_page main.thank-you { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_SignUpConfirm_Backer.png"); background-size: contain; } .support_page main.thank-you p { font-size: 20px; } .support_page main.thank-you .logoFooter { padding-bottom: 4em; } @media screen and (max-width: 1200px) { .support_page main.thank-you .logoFooter { padding-bottom: 10em; } } @media screen and (max-width: 767px) { .support_page main.thank-you .logoFooter { padding-bottom: 2em; } } .support_page main.thank-you .brand-logo.dwd { margin-right: 0; } @media screen and (max-width: 767px) { .support_page main.thank-you .brand-logo.dwd { display: none; } } .support_page main .parallax { background-position: center center; background-repeat: no-repeat; position: absolute; } @media screen and (max-width: 767px) { .support_page main .parallax { display: none; } } .support_page main .parallax.big-moon { top: 100em; left: 0; width: 234px; } .support_page main .parallax.little-moon { top: 30em; right: 0; width: 200px; } .support_page main .parallax.arrakis { bottom: -1em; right: 0; width: 100%; } .support_page main .top-dune-video-container { height: 482px; } @media screen and (max-width: 1200px) { .support_page main .top-dune-video-container { height: 330px; } } @media screen and (max-width: 640px) { .support_page main .top-dune-video-container { height: 170px; } } .support_page main .video-container { height: 330px; } @media screen and (max-width: 1200px) { .support_page main .video-container { height: 330px; } } @media screen and (max-width: 640px) { .support_page main .video-container { height: 170px; } } .support_page main .video-container iframe { width: 90%; height: 100%; max-width: 1500px; border: none; } .support_page main .mainContentDiv { position: relative; } .support_page main .mainContentStart { padding: 0 10em; } @media screen and (max-width: 767px) { .support_page main .mainContentStart { padding: 15px; } } .support_page main .header-block { padding: 1px; } .support_page main .top-image { max-width: 109%; margin-left: -4em; margin-top: -8.9em; } @media screen and (max-width: 1200px) { .support_page main .top-image { max-width: 110%; margin-top: -8.9em; } } @media screen and (max-width: 992px) { .support_page main .top-image { max-width: 112%; margin-top: -6.9em; } } @media screen and (max-width: 767px) { .support_page main .top-image { max-width: 107%; margin-top: -6.6em; margin-left: -2em; } } @media screen and (max-width: 640px) { .support_page main .top-image { max-width: 105%; margin-top: -4.6em; margin-left: -0.7em; } } .support_page main .centerBox { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_ContentBacker_Bottom.png"); background-repeat: repeat-y; background-size: contain; position: relative; } .support_page main .headerBox { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_ContentBacker_Bottom.png"); background-repeat: repeat-y; background-size: contain; position: relative; } .support_page main section { padding: 1em 0; } .support_page main section #dune-signup .form-group { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_InputBar.png") no-repeat; background-size: 100% 100%; margin-top: 20px; } .support_page main section #dune-signup input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; } @media screen and (max-width: 420px) { .support_page main section #dune-signup input { padding: 0 8px; height: 40px; } } .support_page main section #dune-signup input:active, .support_page main section #dune-signup input:focus { border: none; box-shadow: none; } .support_page main section .corner-border { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_TitleUnderliner.png") no-repeat; background-size: contain; padding: 1em; } .support_page main section .corner-border.dune-news-border { background-size: 66%; } @media screen and (max-width: 1200px) { .support_page main section .corner-border.dune-news-border { background-size: 100%; } } .support_page main section .btn-dune-text { font-weight: bold; font-size: xx-large; } @media screen and (max-width: 640px) { .support_page main section .btn-dune-text { font-size: 22px; } } .support_page main section .btn-dune { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_Button_Normal.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; font-size: 22px; } .support_page main section .btn-dune.initial-small-dune { padding: 1em 4em; } @media screen and (max-width: 640px) { .support_page main section .btn-dune.initial-small-dune { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { .support_page main section .btn-dune.initial-small-dune { padding: 0.5em 3em; } } @media screen and (max-width: 640px) { .support_page main section .btn-dune { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { .support_page main section .btn-dune { padding: 0.5em 3em; } } .support_page main section .btn-dune:hover { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_Button_Highlighted.png") no-repeat; background-size: 100% 100%; color: #fff; } .support_page main section .content-shot { max-width: 117%; margin-left: -7em; } @media screen and (max-width: 992px) { .support_page main section .content-shot { max-width: 100%; margin-left: 0; } } .support_page main section .content-deluxe { max-width: 80%; margin-left: 7em; } @media screen and (max-width: 992px) { .support_page main section .content-deluxe { max-width: 100%; margin-left: 0; } } .support_page main section.logoFooter { margin-bottom: 0px; } @media screen and (max-width: 640px) { .support_page main section.logoFooter { padding: 1em 0 2em; } } .support_page main section.logoFooter .copy { padding-top: 3em; } body.dwdPage { background-image: url("../assets/dwd/redeem/Background.png"); background-repeat: no-repeat; background-size: 1920px 1180px; background-position: center; } body.dwdPage section { position: relative; min-height: 600px; } @media screen and (max-width: 640px) { body.dwdPage section { min-height: 400px; } } @media screen and (max-height: 640px) { body.dwdPage section { min-height: 400px; } } body.dwdPage div.formHeader h1 { font-size: 2.5em; text-align: center; display: block; margin-bottom: 0; color: #ddceeb; font-family: 'LinBiolinum', sans-serif; } body.dwdPage div.formHeader h1.success { color: #8cd4aa; font-size: 4em; font-family: 'Cinzel', serif; margin-top: 0; } body.dwdPage div.formContainer { background: url("../assets/dwd/redeem/Backer_Frame.png") center center no-repeat; background-size: contain; margin: 50px auto; } @media screen and (max-width: 1200px) { body.dwdPage div.formContainer { background: none; } } @media screen and (max-width: 1200px) { body.dwdPage div.formContainer { background-size: cover; } } body.dwdPage div.formContainer .header { margin-top: 40px; font-size: 24px; font-weight: bold; color: #edf1ff; } body.dwdPage div.formContainer .subheader { font-size: 16px; color: #cedaff; } body.dwdPage div.formContainer input { text-shadow: 0 0 14px #514ba4; color: #ddceeb; text-align: center; height: 34px; margin: 25px auto; padding: 10px 5px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #0A0B1A center center no-repeat; background-size: contain; width: 50%; border: 1px solid #60B0DF; } body.dwdPage div.formContainer input::placeholder { color: #5b5064; } body.dwdPage div.formContainer .form-group.has-error input { border: 2px solid #ffd3d3; box-shadow: 0 0 14px 3.96px #b33636; text-shadow: 0 0 14px #b33636; } body.dwdPage div.formContainer p { color: #ddceeb; font-size: 1.3em; margin-top: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.dwdPage div.formContainer p a { color: #648ad9; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.dwdPage div.formContainer .be_success_recovery { color: green; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; } body.dwdPage div.formContainer .be_success_recovery ul { list-style-type: none; margin: 0; padding: 0; } body.dwdPage div.formContainer .be_success_recovery ul li { text-align: center; } body.dwdPage div.formContainer .be_error { color: red; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; } body.dwdPage div.formContainer .be_error ul { list-style-type: none; margin: 0; padding: 0; } body.dwdPage div.formContainer .be_error ul li { text-align: center; } body.dwdPage div.codeSelectionContainer { background: url("../assets/dwd/redeem/codeBacker.png") center center no-repeat; margin: 50px auto; } @media screen and (max-width: 640px) { body.dwdPage div.codeSelectionContainer { background: none; } } body.dwdPage div.codeSelectionContainer .header { margin-top: 40px; font-size: 24px; font-weight: bold; color: #edf1ff; } body.dwdPage div.codeSelectionContainer .subheader { margin-bottom: 20px; font-size: 16px; color: #cedaff; } body.dwdPage div.codeSelectionContainer p { color: #ddceeb; font-size: 1.3em; margin-top: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.dwdPage div.codeSelectionContainer p a { color: #648ad9; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.dwdPage div.formSuccessContainer { background: url("../assets/dwd/redeem/Backer_Frame_Alternate.png") no-repeat; background-size: cover; margin: 50px auto; } @media screen and (max-width: 1200px) { body.dwdPage div.formSuccessContainer { background: none; } } body.dwdPage div.formSuccessContainer .header { margin-top: 80px; font-size: 24px; font-weight: bold; color: #edf1ff; } body.dwdPage div.formSuccessContainer .subheader { font-size: 16px; color: #cedaff; margin-bottom: 40px; margin-top: 40px; } body.dwdPage div.formSuccessContainer .img-container { display: flex; justify-content: center; align-items: center; width: 100%; height: 19vw; } body.dwdPage div.formSuccessContainer .img-container img { max-width: 100%; max-height: 100%; } body.dwdPage div .btn-dwd-redeem { color: #fff; background: url("../assets/dwd/redeem/Redeem_Button.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; margin-bottom: 40px; font-weight: bold; } @media screen and (max-width: 640px) { body.dwdPage div .btn-dwd-redeem { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.dwdPage div .btn-dwd-redeem { padding: 0.5em 3em; } } body.dwdPage div .btn-dwd-redeem:hover { background: url("../assets/dwd/redeem/Redeem_Button.png") no-repeat; background-size: 100% 100%; color: lawngreen; } body.dwdPage .hide-small { display: inherit; } @media screen and (max-width: 1200px) { body.dwdPage .hide-small { display: none; } } body.dwdLogin { background-image: url("../assets/dwd/redeem/Background.png"); background-repeat: no-repeat; background-size: 1920px 1180px; background-position: center; } body.dwdLogin section { background: url("../assets/dwd/login/Login Backer.png") center center no-repeat; background-size: 40% 100%; min-height: 800px; } @media screen and (max-width: 1200px) { body.dwdLogin section { background: none; } } @media screen and (max-width: 640px) { body.dwdLogin section { min-height: 400px; } } body.dwdLogin .footer-float { position: fixed; bottom: 0; left: 0; right: 0; } @media screen and (max-width: 992px) { body.dwdLogin .footer-float { position: unset; bottom: unset; left: unset; right: unset; } } body.dwdLogin div.formHeader { z-index: 10; position: relative; } body.dwdLogin div.formHeader img { margin: 10em auto; } @media screen and (max-width: 1200px) { body.dwdLogin div.formHeader img { margin: 3em auto; } } body.dwdLogin div.formHeader h1 { font-size: 2.5em; text-align: center; display: block; max-width: 400px; margin: -60px auto; margin-bottom: 0; color: #ddceeb; font-family: 'LinBiolinum', sans-serif; } @media screen and (max-width: 1200px) { body.dwdLogin div.formHeader h1 { margin: unset; margin-top: -20px; max-width: 100%; } } body.dwdLogin div.formHeader h1.success { color: #8cd4aa; font-size: 4em; font-family: 'Cinzel', serif; margin-top: 0; } body.dwdLogin div.formContainer { z-index: 10; position: relative; margin: 20px auto 0 auto; } body.dwdLogin div.formContainer input { text-shadow: 0 0 14px #514ba4; color: #ddceeb; height: 34px; margin: 0 auto; width: 400px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #0A0B1A center center no-repeat; background-size: contain; border: 1px solid #60B0DF; } @media screen and (max-width: 420px) { body.dwdLogin div.formContainer input { width: 100%; } } body.dwdLogin div.formContainer input::placeholder { color: #5b5064; } body.dwdLogin div.formContainer .form-group.has-error input { border: 2px solid red; } body.dwdLogin div.formContainer .remembermeBox { background: url("../assets/dwd/login/Remember_Box.png") 0 0 no-repeat; background-size: contain; color: #5b5064; text-align: center; font-size: 1.3em; line-height: 2em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: 175px; height: 28px; margin: 0 auto; cursor: pointer; display: block; user-select: none; } body.dwdLogin div.formContainer .remembermeBox.checked { color: #ddceeb; background: url("../assets/dwd/login/Remember_Box_checked.png") 0 0 no-repeat; background-size: contain; } body.dwdLogin div.formContainer .remembermeBox:hover { cursor: pointer; color: #ddceeb; } body.dwdLogin div.formContainer p { color: #ddceeb; font-size: 16px; margin-top: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.dwdLogin div.formContainer p a { color: #648ad9; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.dwdLogin div.formContainer a.btn-dwd-lnk { color: #ddceeb; font-family: 'LinBiolinum', sans-serif; font-size: 1.5em; text-decoration: underline; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } body.dwdLogin div.formContainer a.btn-dwd-lnk:hover { color: #fff; } body.dwdLogin div.formContainer .be_error { color: red; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; max-width: 400px; margin: auto; } body.dwdLogin div.formContainer .be_error ul { list-style-type: none; margin: 0; padding: 0; } body.dwdLogin div.formContainer .be_error ul li { text-align: center; } body.dwdLogin div.formContainer .be_success_recovery { color: green; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; width: 60%; margin: 0 auto; } body.dwdLogin div.formContainer .be_success_recovery ul { list-style-type: none; margin: 0; padding: 0; } body.dwdLogin div.formContainer .be_success_recovery ul li { text-align: center; } body.dwdLogin div.formContainer .btn-dwd-register, body.dwdLogin div.formContainer .btn-dwd-login { color: #fff; background: url("../assets/dwd/redeem/Redeem_Button.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; font-weight: bold; } @media screen and (max-width: 640px) { body.dwdLogin div.formContainer .btn-dwd-register, body.dwdLogin div.formContainer .btn-dwd-login { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.dwdLogin div.formContainer .btn-dwd-register, body.dwdLogin div.formContainer .btn-dwd-login { padding: 0.5em 3em; } } body.dwdLogin div.formContainer .btn-dwd-register:hover, body.dwdLogin div.formContainer .btn-dwd-login:hover { background: url("../assets/dwd/redeem/Redeem_Button.png") no-repeat; background-size: 100% 100%; color: lawngreen; } body.dwdRegister { background-image: url("../assets/dwd/redeem/Background.png"); background-repeat: no-repeat; background-size: 1920px 1180px; background-position: center; } body.dwdRegister section { background: url("../assets/dwd/login/Login Backer.png") center center no-repeat; background-size: 40% 100%; } @media screen and (max-width: 1200px) { body.dwdRegister section { background: none; } } body.dwdRegister .footer-float { position: fixed; bottom: 0; left: 0; right: 0; } @media screen and (max-width: 992px) { body.dwdRegister .footer-float { position: unset; bottom: unset; left: unset; right: unset; } } body.dwdRegister div { z-index: 10; position: relative; } body.dwdRegister div.formHeader img { margin: 0 auto; } body.dwdRegister div.formContainer { margin: 20px auto 0 auto; } body.dwdRegister div.formContainer input { text-shadow: 0 0 14px #514ba4; color: #ddceeb; height: 34px; margin: 0 auto; width: 50%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #0A0B1A center center no-repeat; background-size: contain; border: 1px solid #60B0DF; } @media screen and (max-width: 1200px) { body.dwdRegister div.formContainer input { width: 100%; } } body.dwdRegister div.formContainer input::placeholder { color: #5b5064; } body.dwdRegister div.formContainer .form-group.has-error input { border: 2px solid red; } body.dwdRegister div.formContainer h1 { max-width: 50%; margin-right: auto; margin-left: auto; font-size: 28px; } @media screen and (max-width: 1200px) { body.dwdRegister div.formContainer h1 { max-width: 100%; } } body.dwdRegister div.formContainer p { color: #ddceeb; font-size: 14px; margin-top: 10px; max-width: 50%; margin-right: auto; margin-left: auto; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } @media screen and (max-width: 1200px) { body.dwdRegister div.formContainer p { max-width: 100%; } } body.dwdRegister div.formContainer p a { color: #648ad9; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.dwdRegister div.formContainer a.btn-dwd-lnk { color: #ddceeb; font-family: 'LinBiolinum', sans-serif; font-size: 1em; text-decoration: underline; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } body.dwdRegister div.formContainer a.btn-dwd-lnk:hover { color: #fff; } body.dwdRegister div.formContainer .be_error { color: red; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; } body.dwdRegister div.formContainer .be_error ul { list-style-type: none; margin: 0; padding: 0; } body.dwdRegister div.formContainer .be_error ul li { text-align: center; } body.dwdRegister div.formContainer .btn-dwd-register, body.dwdRegister div.formContainer .btn-dwd-login { color: #fff; background: url("../assets/dwd/redeem/Redeem_Button.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; font-weight: bold; } @media screen and (max-width: 640px) { body.dwdRegister div.formContainer .btn-dwd-register, body.dwdRegister div.formContainer .btn-dwd-login { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { body.dwdRegister div.formContainer .btn-dwd-register, body.dwdRegister div.formContainer .btn-dwd-login { padding: 0.5em 3em; } } body.dwdRegister div.formContainer .btn-dwd-register:hover, body.dwdRegister div.formContainer .btn-dwd-login:hover { background: url("../assets/dwd/redeem/Redeem_Button.png") no-repeat; background-size: 100% 100%; color: lawngreen; } @font-face { font-display: swap; font-family: Schoolbook; src: url("../assets/wild/CENSCBK.TTF"); } @font-face { font-display: swap; font-family: Schoolbook; font-weight: bold; src: url("../assets/wild/SCHLBKB.TTF"); } @font-face { font-display: swap; font-family: Schoolbook; font-style: italic; src: url("../assets/wild/SCHLBKI.TTF"); } @font-face { font-display: swap; font-family: Schoolbook; font-weight: bold; font-style: italic; src: url("../assets/wild/SCHLBKBI.TTF"); } .wild { background-color: transparent; font-family: 'Schoolbook'; } .wild .img-fluid { max-width: 100%; height: auto; } .wild .wild-banner { max-height: 250px; } .wild .wild-logo { position: relative; z-index: 3; } @media screen and (min-width: 992px) { .wild .wild-logo { max-width: 330px; } } @media screen and (min-width: 1620px) { .wild .wild-logo { max-height: 175px; max-width: 100%; } } @media screen and (min-width: 1920px) { .wild .wild-logo { max-height: 192px; max-width: 100%; } } .wild .centered { margin: 0 auto; } .wild .w-100 { width: 100%; } .wild h1 { font-weight: 100; color: #ffebc3; } .wild h3 { font-size: 33px; font-family: 'Trajan', serif; color: #ffe0b7; } .wild p { font-size: 15px; } .wild a { color: #fff; } .wild a :hover { color: #fff; } .wild main { color: #fff; } .wild main .wild-container { margin: 0 auto; max-width: calc(100% - 16px); } @media screen and (min-width: 350px) { .wild main .wild-container { max-width: 318px; } } @media screen and (min-width: 420px) { .wild main .wild-container { max-width: 384px; } } @media screen and (min-width: 540px) { .wild main .wild-container { max-width: 508px; } } @media screen and (min-width: 640px) { .wild main .wild-container { max-width: 608px; } } @media screen and (min-width: 768px) { .wild main .wild-container { max-width: 735px; } } @media screen and (min-width: 992px) { .wild main .wild-container { max-width: 960px; } } @media screen and (min-width: 1200px) { .wild main .wild-container { max-width: 1168px; } } @media screen and (min-width: 1320px) { .wild main .wild-container { max-width: 1288px; } } @media screen and (min-width: 1620px) { .wild main .wild-container { max-width: 1588px; } } @media screen and (min-width: 1920px) { .wild main .wild-container { max-width: 1781px; } } .wild main .video-section { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/wild_tiled_west/BackgroundTop.webp"); background-repeat: no-repeat; } @media screen and (min-width: 1200px) { .wild main .video-section { background-size: cover; } } .wild main .video-sectioncontent-wrapper { padding-bottom: 32px; padding-top: 32px; position: relative; } @media screen and (min-width: 1620px) { .wild main .video-sectioncontent-wrapper { overflow-y: hidden; padding-bottom: 0; padding-top: 48px; } } @media screen and (min-width: 992px) { .wild main .video-sectioncontent { display: flex; margin-top: 16px; } } @media screen and (min-width: 1920px) { .wild main .video-sectioncontent { margin-top: 48px; } } .wild main .video-sectionpreorder { position: relative; z-index: 10; } .wild main .video-sectionpreorder-bg { align-items: center; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/wild_tiled_west/TextBackerNew.webp"); background-repeat: no-repeat; background-size: 100% 100%; display: flex; flex-direction: column; justify-content: center; margin: 0 auto; padding: 32px 32px 30px 32px; text-align: center; z-index: 11; } @media screen and (min-width: 540px) { .wild main .video-sectionpreorder-bg { padding: 32px; } } @media screen and (min-width: 640px) { .wild main .video-sectionpreorder-bg { background-size: 100%; padding: 32px 32px 24px 32px; } } @media screen and (min-width: 992px) { .wild main .video-sectionpreorder-bg { background-size: cover; width: 928px; } } @media screen and (min-width: 1200px) { .wild main .video-sectionpreorder-bg { padding: 36px; width: 1100px; } } @media screen and (min-width: 1320px) { .wild main .video-sectionpreorder-bg { padding: 48px 60px; width: 1139px; } } @media screen and (min-width: 1320px) { .wild main .video-sectionpreorder-bg { background-size: 100% 100%; } } @media screen and (min-width: 1920px) { .wild main .video-sectionpreorder-bg { width: 1500px; } } .wild main .video-sectionpreorder-inner { margin: 0 auto; padding-bottom: 16px; padding-top: 16px; } @media screen and (min-width: 992px) { .wild main .video-sectionpreorder-inner { padding-bottom: 32px; padding-top: 32px; } } @media screen and (max-width: 1319px) { .wild main .video-sectionpreorder-image { max-width: 200px; } } @media screen and (min-width: 1319px) { .wild main .video-sectionpreorder-image { max-width: 275px; } } .wild main .video-sectionpreorder-image:hover { filter: brightness(150%); } .wild main .video-sectionpreorder-link { display: inline-block; margin-top: 8px; } @media screen and (min-width: 1320px) { .wild main .video-sectionpreorder-link { margin-top: 8px; } } @media screen and (min-width: 1920px) { .wild main .video-sectionpreorder-link { margin-top: 16px; } } .wild main .video-sectionpreorder-description { font-size: 16px; margin-bottom: 0; padding: 0 32px; } @media screen and (min-width: 540px) { .wild main .video-sectionpreorder-description { font-size: 24px; } } @media screen and (min-width: 640px) { .wild main .video-sectionpreorder-description { font-size: 20px; } } @media screen and (min-width: 767px) { .wild main .video-sectionpreorder-description { font-size: 24px; padding: 0 32px; } } @media screen and (min-width: 992px) { .wild main .video-sectionpreorder-description { font-size: 32px; padding: 0 72px; } } @media screen and (min-width: 1200px) { .wild main .video-sectionpreorder-description { font-size: 36px; padding: 0 100px; } } @media screen and (min-width: 1920px) { .wild main .video-sectionpreorder-description { font-size: 32px; padding: 0; } } .wild main .video-sectionraccoon { display: none; position: absolute; z-index: 3; } @media screen and (min-width: 992px) { .wild main .video-sectionraccoon { display: block; left: 250px; top: 130px; } } @media screen and (min-width: 1200px) { .wild main .video-sectionraccoon { left: 390px; top: 150px; } } @media screen and (min-width: 1620px) { .wild main .video-sectionraccoon { left: 730px; top: 200px; } } @media screen and (min-width: 1920px) { .wild main .video-sectionraccoon { left: 740px; top: 250px; } } .wild main .video-sectionrooster { display: none; height: auto; position: absolute; z-index: 2; } @media screen and (min-width: 992px) { .wild main .video-sectionrooster { display: block; left: 295px; top: 50px; } } @media screen and (min-width: 1200px) { .wild main .video-sectionrooster { left: 495px; } } @media screen and (min-width: 1620px) { .wild main .video-sectionrooster { left: 900px; top: 130px; } } @media screen and (min-width: 1920px) { .wild main .video-sectionrooster { left: 932; top: 100px; } } .wild main .video-sectionvideo { margin-bottom: 48px; margin-top: 24px; z-index: 10; } @media screen and (min-width: 992px) { .wild main .video-sectionvideo { margin-left: 100px; width: 435px; } } @media screen and (min-width: 1200px) { .wild main .video-sectionvideo { margin-left: 165px; width: 500px; } } @media screen and (min-width: 1620px) { .wild main .video-sectionvideo { margin-left: 200px; width: 680px; } } .wild main .video-section__video .embed-responsive { box-shadow: 1px 1px 4px black; } .wild main .content-section { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/wild_tiled_west/MainBacker_NoCharacters.webp"); background-repeat: no-repeat; background-size: 100% 100%; color: black; margin-top: -48px; position: relative; z-index: 11; } @media screen and (min-width: 540px) { .wild main .content-section { margin-top: -50px; } } @media screen and (min-width: 640px) { .wild main .content-section { margin-top: -36px; } } @media screen and (min-width: 767px) { .wild main .content-section { margin-top: -40px; } } @media screen and (min-width: 992px) { .wild main .content-section { background-color: #ede2cd; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/wild_tiled_west/MainBacker_characters.webp"); background-size: cover; margin-top: -42px; } } @media screen and (min-width: 1200px) { .wild main .content-section { margin-top: -50px; } } @media screen and (min-width: 1320px) { .wild main .content-section { background-color: transparent; background-size: 100% 100%; margin-top: -56px; } } @media screen and (min-width: 1620px) { .wild main .content-section { margin-top: -24px; } } @media screen and (min-width: 1920px) { .wild main .content-section { background-color: transparent; background-image: none; margin-top: -30px; overflow-x: hidden; } } .wild main .content-sectiondescription { font-size: 16px; margin-left: auto; margin-right: auto; text-align: center; width: 75%; } @media screen and (min-width: 540px) { .wild main .content-sectiondescription { width: 90%; } } @media screen and (min-width: 540px) { .wild main .content-sectiondescription { font-size: 20px; width: 92%; } } @media screen and (min-width: 640px) { .wild main .content-sectiondescription { width: 85%; } } @media screen and (min-width: 767px) { .wild main .content-sectiondescription { font-size: 21px; } } @media screen and (min-width: 992px) { .wild main .content-sectiondescription { width: 76%; } } @media screen and (min-width: 1200px) { .wild main .content-sectiondescription { width: 75%; } } @media screen and (min-width: 1320px) { .wild main .content-sectiondescription { width: 82%; } } @media screen and (min-width: 1920px) { .wild main .content-sectiondescription { font-size: 24px; width: 600px; } } .wild main .content-sectiondescription-extra-mb { margin-bottom: 16px; } @media screen and (min-width: 1920px) { .wild main .content-sectiondescription-extra-mb { margin-bottom: 48px; } } .wild main .content-sectionemail-bg { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/wild_tiled_west/EmailBacker.webp"); background-repeat: no-repeat; padding-top: 2px; padding-bottom: 20px; padding-left: 16px; padding-right: 16px; background-size: 100% 100%; } @media screen and (min-width: 420px) { .wild main .content-sectionemail-bg { padding-top: 8px; } } @media screen and (min-width: 768px) { .wild main .content-sectionemail-bg { margin-bottom: 28px; } } @media screen and (min-width: 1920px) { .wild main .content-sectionemail-bg { padding-top: 80px; padding-left: 100px; padding-right: 100px; } } .wild main .content-sectionemail-button { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/wild_tiled_west/ArrowSign.webp") no-repeat; background-size: 100% 100%; border: none; height: 58px; margin-top: -5px; vertical-align: top; width: 112px; } .wild main .content-sectionemail-button:focus, .wild main .content-sectionemail-button:hover { filter: brightness(150%); } .wild main .content-sectionemail-form { display: flex; } @media screen and (max-width: 1919px) { .wild main .content-sectionemail-image { height: auto; margin-top: -70px; max-width: 100%; } } @media screen and (min-width: 420px) { .wild main .content-sectionemail-image { margin-bottom: 8px; margin-top: -80px; } } @media screen and (min-width: 1920px) { .wild main .content-sectionemail-image { margin-top: -180px; } } .wild main .content-section__email-input { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/wild_tiled_west/EmailBox.webp") no-repeat; background-size: auto; background-size: 100% 100%; border: none; color: #eedfca; height: 48px; } @media screen and (min-width: 540px) { .wild main .content-sectionemail-input { font-size: 18px; font-weight: 700; } } .wild main .content-sectionemail-input::placeholder { font-family: Schoolbook; font-weight: bold; color: #eedfca; } .wild main .content-sectionemail-wrapper { margin-top: 70px; } @media screen and (min-width: 420px) { .wild main .content-sectionemail-wrapper { margin-top: 85px; } } @media screen and (min-width: 1920px) { .wild main .content-sectionemail-wrapper { margin-top: 100px; } } @media screen and (max-width: 1919px) { .wild main .content-sectiongame-box { height: auto; max-width: 100%; padding-top: 32px; } } @media screen and (min-width: 1920px) { .wild main .content-sectiongame-box { margin-left: 240px; } } .wild main .content-sectioninner { position: relative; } @media screen and (min-width: 768px) { .wild main .content-sectioninner { display: flex; } } @media screen and (min-width: 992px) { .wild main .content-sectioninner { display: flex; } } @media screen and (min-width: 992px) and (max-width: 1199px) { .wild main .content-sectioninner { max-width: 680px; } } @media screen and (min-width: 1200px) and (max-width: 1319px) { .wild main .content-sectioninner { max-width: 780px; } } @media screen and (min-width: 1320px) and (max-width: 1919px) { .wild main .content-sectioninner { max-width: 880px; } } @media screen and (min-width: 1320px) { .wild main .content-sectioninner { padding-bottom: 380px; padding-top: 60px; } } @media screen and (min-width: 1920px) { .wild main .content-section__inner { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/wild_tiled_west/MainBacker_characters.webp"); background-repeat: no-repeat; background-size: 100% 100%; padding-bottom: 420px; padding-top: 60px; } } @media screen and (min-width: 768px) { .wild main .content-sectioninner-right { flex-shrink: 0; margin-right: 4px; margin-top: 32px; width: 350px; } } @media screen and (min-width: 767px) { .wild main .content-sectioninner-right { width: 400px; } } @media screen and (min-width: 1320px) { .wild main .content-sectioninner-right { width: 480px; } } @media screen and (min-width: 1920px) { .wild main .content-sectioninner-right { margin-left: -60px; margin-top: 48px; width: 700px; } } .wild main .content-sectionvideo { margin-bottom: 32px; margin-left: auto; margin-right: auto; width: 92%; } @media screen and (min-width: 1920px) { .wild main .content-sectionvideo { width: 600px; } } @media screen and (max-width: 1919px) { .wild main .footer-section { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/wild_tiled_west/BackgroundBottom.webp"); background-position-y: bottom; background-position-x: 70%; background-repeat: no-repeat; } } @media screen and (min-width: 1320px) { .wild main .footer-section { margin-top: -340px; padding-bottom: 0px; } } @media screen and (min-width: 1920px) { .wild main .footer-section { background-position-x: center; background-size: cover; margin-top: -400px; padding-bottom: 34px; } } .wild main .footer-sectionnews { position: relative; z-index: 11; } @media screen and (max-width: 1919px) { .wild main .footer-sectionnews { padding-top: 24px; } } .wild main .footer-sectionnews-inner { margin: 0 auto; } @media screen and (min-width: 1320px) { .wild main .footer-sectionnews-inner { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/wild_tiled_west/NewsBacker.webp"); background-repeat: no-repeat; padding: 48px 60px; width: 1139px; } } @media screen and (min-width: 1320px) { .wild main .footer-sectionnews-inner { background-size: 100% 100%; } } @media screen and (min-width: 1920px) { .wild main .footer-sectionnews-inner { padding: 48px 60px; width: 1249px; } } .wild main .footer-sectionnews-image { height: auto; max-width: 140px; } @media screen and (min-width: 1320px) { .wild main .footer-sectionnews-image { max-width: 280px; } } .wild main .footer-section .sm_link { width: 30%; } @media screen and (max-width: 1319px) { .wild main .footer-section .sm_link { text-align: center; width: 100%; } } @media screen and (min-width: 1320px) { .wild main .footer-section .sm_link { margin-top: -140px; } } .wild main .footer-section .sm_link a { display: inline-block; } .wild main .footer-section footer.short { padding-top: 75px; } @media screen and (min-width: 540px) { .wild main .footer-section footer.short { padding-top: 50px; } } @media screen and (min-width: 1920px) { .wild main .footer-section footer.short { padding-top: 300px; } } .wild main .footer-section footer.short a { color: white; } @media screen and (max-width: 768px) { .wild main .footer-section footer.short a { text-shadow: 2px 1px 1px black; } } .wild main .footer-section footer.short a:hover { color: #96A1A6; } @media screen and (max-width: 768px) { .wild main .footer-section footer.short a:hover { color: black; text-shadow: none; } } .wild main .footer-section footer.short a.fb { background-position-y: -73px; } .wild main .footer-section footer.short a.fb:hover { background-position-y: -48px; } .wild main .footer-section footer.short a.tw { background-position-y: -24px; } .wild main .footer-section footer.short a.tw:hover { background-position-y: 0; } .wild main .footer-section footer.short .copy { color: white; padding-top: 300px; } @media screen and (min-width: 420px) { .wild main .footer-section footer.short .copy { padding-top: 320px; } } @media screen and (min-width: 540px) and (max-width: 767px) { .wild main .footer-section footer.short .copy { padding-top: 340px; } } @media screen and (min-width: 768px) { .wild main .footer-section footer.short .copy { padding-top: 0; } } @media screen and (min-width: 768px) { .wild main .footer-section footer.short .copyright { margin-top: 48px; } } @media screen and (min-width: 1620px) { .wild main .footer-section footer.short .copyright { margin-top: 40px; } } @media screen and (min-width: 1920px) { .wild main .footer-section footer.short .copyright { margin-top: 0; } } @media screen and (min-width: 1920px) { .wild main .ultrawide-wrapper { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/wild_tiled_west/BackgroundBottom.webp"); background-position-y: bottom; background-position-x: 70%; background-repeat: no-repeat; background-size: cover; } } .wild main .top-wild-video-container { height: 482px; } @media screen and (max-width: 1200px) { .wild main .top-wild-video-container { height: 330px; } } @media screen and (max-width: 640px) { .wild main .top-wild-video-container { height: 170px; } } .wild main .video-container { height: 330px; } @media screen and (max-width: 1200px) { .wild main .video-container { height: 330px; } } @media screen and (max-width: 640px) { .wild main .video-container { height: 170px; } } .wild main .video-container iframe { width: 90%; height: 100%; max-width: 1500px; border: none; } .wild main.thank-you { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/dune/DuneImperium_SignUpConfirm_Backer.png"); background-size: contain; } .wild main.thank-you p { font-size: 20px; } .wild main.thank-you .logoFooter { padding-bottom: 4em; } @media screen and (max-width: 1200px) { .wild main.thank-you .logoFooter { padding-bottom: 10em; } } @media screen and (max-width: 767px) { .wild main.thank-you .logoFooter { padding-bottom: 2em; } } .wild main.thank-you .brand-logo.dwd { margin-right: 0; } @media screen and (max-width: 767px) { .wild main.thank-you .brand-logo.dwd { display: none; } } .wild main .mainContentDiv { position: relative; } .wild main .mainContentStart { padding: 0 10em; } @media screen and (max-width: 767px) { .wild main .mainContentStart { padding: 15px; } } .wild main .est-date { margin-top: -10px; font-weight: bold; font-size: 28px; } .wild main .est-date.year { font-size: 36px; } .wild main .sign-up { font-size: 50px; padding-top: 13px; font-weight: bold; } .wild main section { padding: 1em 0; } .wild main section #wild-signup { padding-bottom: 30px; } .wild main section #wild-signup .form-group { background: url("../assets/wild/WTWTeaserPage_InputField.png") no-repeat; background-size: 100% 100%; margin-top: 20px; } .wild main section #wild-signup input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; font-size: 20px; } @media screen and (max-width: 420px) { .wild main section #wild-signup input { padding: 0 8px; height: 40px; } } .wild main section #wild-signup input:active, .wild main section #wild-signup input:focus { border: none; box-shadow: none; } .wild main section .btn-wild-text { font-size: 50px; margin-top: 0px; font-weight: bold; } @media screen and (max-width: 640px) { .wild main section .btn-wild-text { font-size: 22px; } } .wild main section .btn-wild { background: url("../assets/wild/WTWTeaserPage_Button_Normal.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 6em; color: #ffe480; font-size: 22px; } .wild main section .btn-wild.initial-small-wild { padding: 1em 4em; } @media screen and (max-width: 640px) { .wild main section .btn-wild.initial-small-wild { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { .wild main section .btn-wild.initial-small-wild { padding: 0.5em 3em; } } @media screen and (max-width: 640px) { .wild main section .btn-wild { padding: 0.5em 4em; } } @media screen and (max-width: 320px) { .wild main section .btn-wild { padding: 0.5em 3em; } } .wild main section .btn-wild:hover { background: url("../assets/wild/WTWTeaserPage_Button_Highlighted.png") no-repeat; background-size: 100% 100%; color: #ffe480; } .wild main section.logoFooter { text-align: center; margin-bottom: 0px; position: relative; bottom: 0; } @media screen and (max-width: 640px) { .wild main section.logoFooter { padding: 1em 0 2em; } } .wild main section.logoFooter .copy { padding-top: 3em; } @font-face { font-family: MinionPro; src: url("/fonts/everdell/MinionPro-Regular_0.otf") format("opentype"); font-display: swap; } @font-face { font-family: MinionPro; font-weight: bold; src: url("/fonts/everdell/MinionPro-Bold_0.otf") format("opentype"); font-display: swap; } @font-face { font-family: MinionPro; font-style: italic; src: url("/fonts/everdell/MinionPro-It_0.otf") format("opentype"); font-display: swap; } .everdell { font-family: 'MinionPro'; color: #392316; } .everdell h3 { font-size: 1.25em; font-weight: bold; } .everdell .email-error { color: red; text-shadow: none; } .everdell .backer-line { height: auto; width: 100%; margin: 0 auto 8px auto; } .everdell .banner { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/BG_1.webp"); height: 1242px; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .everdell .banner div.thank-you { margin-bottom: 0px; } .everdell .banner .button-backer { background-color: black; display: inline-block; border-radius: 15px; padding: 15px; width: 300px; } .everdell .banner .header { margin-bottom: 200px; } @media screen and (max-width: 1320px) { .everdell .banner .header { margin-bottom: 60px; } } @media screen and (max-width: 767px) { .everdell .banner .header { margin-bottom: 0px; } } .everdell .banner .header a { width: 250px; height: 70px; border: 2px solid black; border-radius: 10px; display: inline-block; position: relative; overflow: hidden; } .everdell .banner .header a:hover { border: 2px solid white; } .everdell .banner .header img { display: block; margin: 0 auto; } .everdell .banner .header img.platform-btn { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .everdell .banner .header img.logo { height: auto; max-width: 100%; } @media screen and (max-width: 1320px) { .everdell .banner .header img.logo { margin-bottom: -100px; } } @media screen and (max-width: 992px) { .everdell .banner .header img.logo { margin-bottom: -50px; } } @media screen and (max-width: 767px) { .everdell .banner .header img.logo { margin-bottom: 0px; } } .everdell .banner .leftLeaf { position: absolute; left: 0; } @media screen and (max-width: 1320px) { .everdell .banner .leftLeaf { padding-top: 100px; } } @media screen and (max-width: 992px) { .everdell .banner .leftLeaf { display: none; } } .everdell .banner .rightLeaf { position: absolute; right: 0px; padding-top: 40px; } @media screen and (max-width: 1320px) { .everdell .banner .rightLeaf { padding-top: 200px; } } @media screen and (max-width: 992px) { .everdell .banner .rightLeaf { display: none; } } .everdell .banner .intro-video-ctn { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/WoodBoards1.webp"); width: 90%; margin: 0 auto; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; padding: 4em; z-index: 10; position: relative; display: flex; flex-flow: row-reverse wrap; justify-content: space-around; align-items: center; } @media screen and (max-width: 1320px) { .everdell .banner .intro-video-ctn { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/WoodBoards1_vert.webp"); } } @media screen and (max-width: 992px) { .everdell .banner .intro-video-ctn { width: 99%; } } .everdell .banner .intro-video-ctn .text-panel { display: inline-block; width: 45%; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/Backer1_NoWords.webp"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; padding: 4em; z-index: 10; position: relative; font-size: 22px; } @media screen and (max-width: 1620px) { .everdell .banner .intro-video-ctn .text-panel { font-size: 18px; } } @media screen and (max-width: 1320px) { .everdell .banner .intro-video-ctn .text-panel { display: block; width: 90%; margin: 0 auto; padding: 4em; } } @media screen and (max-width: 992px) { .everdell .banner .intro-video-ctn .text-panel { padding: 3em; width: 99%; } } @media screen and (max-width: 640px) { .everdell .banner .intro-video-ctn .text-panel { padding: 2em; font-size: 16px; } } .everdell .banner .intro-video-ctn .video-panel { display: inline-block; width: 45%; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/Backer_Video.webp"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; padding: 4em; vertical-align: text-bottom; z-index: 10; position: relative; } @media screen and (max-width: 1320px) { .everdell .banner .intro-video-ctn .video-panel { display: block; width: 90%; margin: 0 auto; padding: 6em; } } @media screen and (max-width: 992px) { .everdell .banner .intro-video-ctn .video-panel { width: 99%; } } @media screen and (max-width: 767px) { .everdell .banner .intro-video-ctn .video-panel { padding: 0em; background-image: none; } } .everdell .banner .intro-video-ctn .video-panel iframe { width: 100%; height: 330px; } @media screen and (max-width: 1320px) { .everdell .banner .intro-video-ctn .video-panel iframe { height: 450px; } } @media screen and (max-width: 1200px) { .everdell .banner .intro-video-ctn .video-panel iframe { height: 400px; } } @media screen and (max-width: 992px) { .everdell .banner .intro-video-ctn .video-panel iframe { height: 350px; } } @media screen and (max-width: 767px) { .everdell .banner .intro-video-ctn .video-panel iframe { height: 300px; } } @media screen and (max-width: 640px) { .everdell .banner .intro-video-ctn .video-panel iframe { height: 250px; } } .everdell .game-details { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/BG_2.webp"); height: 1606px; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; padding-top: 750px; } @media screen and (max-width: 1620px) { .everdell .game-details { padding-top: 650px; } } @media screen and (max-width: 992px) { .everdell .game-details { padding-top: 250px; } } @media screen and (max-width: 767px) { .everdell .game-details { height: 1400px; padding-top: 200px; } } @media screen and (max-width: 640px) { .everdell .game-details { height: 1600px; padding-top: 150px; } } .everdell .game-details .img-gallery { display: inline-block; width: 815px; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/Backer3_NoWords.webp"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; margin-right: 20%; padding: 3em 3em 2em 2em; font-size: 22px; vertical-align: top; } @media screen and (max-width: 1620px) { .everdell .game-details .img-gallery { width: 615px; margin-right: 15%; } } @media screen and (max-width: 1320px) { .everdell .game-details .img-gallery { margin-right: 1%; font-size: 18px; } } @media screen and (max-width: 1200px) { .everdell .game-details .img-gallery { width: 560px; } } @media screen and (max-width: 992px) { .everdell .game-details .img-gallery { display: block; width: 90%; margin: 30px auto; } } @media screen and (max-width: 767px) { .everdell .game-details .img-gallery { font-size: 16px; } } @media screen and (max-width: 640px) { .everdell .game-details .img-gallery { margin: 90px auto 30px auto; } } .everdell .game-details .img-gallery .img-box { width: 45%; padding: 5px; display: inline-block; } .everdell .game-details .img-gallery .img-box img { width: 100%; height: auto; } .everdell .game-details .description-ctn { display: inline-block; width: 407px; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/Backer2_NoWords.webp"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; padding: 2em 4em 4em 3em; font-size: 18px; vertical-align: top; } @media screen and (max-width: 1320px) { .everdell .game-details .description-ctn { font-size: 16px; } } @media screen and (max-width: 1200px) { .everdell .game-details .description-ctn { width: 360px; } } @media screen and (max-width: 992px) { .everdell .game-details .description-ctn { display: block; width: 90%; margin: 0 auto; padding: 2em 7em 4em 4em; } } @media screen and (max-width: 767px) { .everdell .game-details .description-ctn { font-size: 14px; } } .everdell .game-details .zoomed-img { position: fixed; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.75); z-index: 999; opacity: 0; pointer-events: none; } .everdell .game-details .zoomed-img img { max-width: 90%; max-height: 80%; position: relative; top: -100%; /* Transition / transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; } .everdell .game-details .zoomed-img:target { outline: none; top: 0; opacity: 1; pointer-events: auto; transition: all 1.2s ease; -moz-transition: all 1.2s ease; -ms-transition: all 1.2s ease; -o-transition: all 1.2s ease; -webkit-transition: all 1.2s ease; } .everdell .game-details .zoomed-img:target img { top: 0; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); } .everdell .vine-separator { width: 100%; height: 100px; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/Separator.png"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; margin-top: -50px; z-index: 50; position: relative; } @media screen and (max-width: 767px) { .everdell .vine-separator { height: 25px; margin-top: -10px; } } .everdell .newsletter-ctn { height: 1035px; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/BG_3.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; margin-top: -50px; text-align: right; padding: 200px 0 0 0; } @media screen and (max-width: 992px) { .everdell .newsletter-ctn { text-align: center; } } @media screen and (max-width: 767px) { .everdell .newsletter-ctn { margin-top: -15px; height: 700px; padding-top: 120px; } } @media screen and (max-width: 640px) { .everdell .newsletter-ctn { height: 600px; padding-top: 60px; } } .everdell .newsletter-ctn .leftLeaf { position: absolute; left: -32px; padding-top: 350px; } @media screen and (max-width: 992px) { .everdell .newsletter-ctn .leftLeaf { display: none; } } .everdell .newsletter-ctn .rightLeaf { position: absolute; right: 0px; padding-top: 500px; } @media screen and (max-width: 992px) { .everdell .newsletter-ctn .rightLeaf { display: none; } } .everdell .newsletter-ctn .newsletter-signup { display: inline-block; width: 40%; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/Backer4_NoWords.webp"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; padding: 2em 2em 3em 2em; font-size: 22px; text-align: center; margin-right: 200px; } @media screen and (max-width: 1620px) { .everdell .newsletter-ctn .newsletter-signup { font-size: 18px; } } @media screen and (max-width: 992px) { .everdell .newsletter-ctn .newsletter-signup { width: 70%; margin-right: 0px; } } @media screen and (max-width: 767px) { .everdell .newsletter-ctn .newsletter-signup { width: 90%; } } .everdell .newsletter-ctn .newsletter-signup .backer-line { height: auto; width: auto; } @media screen and (max-width: 1320px) { .everdell .newsletter-ctn .newsletter-signup .backer-line { width: 100%; } } .everdell .newsletter-ctn .newsletter-signup input { color: #DEC38A; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/NewsLetterTextBox.png") no-repeat; background-size: 100% 100%; padding: 10px 10px 25px 30px; height: 60px; display: inline-block; width: 75%; border: none; border-radius: 0px; } @media screen and (max-width: 767px) { .everdell .newsletter-ctn .newsletter-signup input { padding-left: 10px; } } .everdell .newsletter-ctn .newsletter-signup button { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/NewsLetterArrowButton.png") no-repeat; background-size: 100% 100%; width: 63px; height: 54px; border: none; vertical-align: middle; } .everdell .newsletter-ctn .newsletter-signup button:hover { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/NewsLetterArrowButton_hover.png") no-repeat; background-size: 100% 100%; } .everdell .newsletter-ctn .newsletter-signup button:active { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/NewsLetterArrowButton_active.png") no-repeat; background-size: 100% 100%; } .everdell .newsletter-ctn .news-ctn { width: 90%; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/WoodBoards2_blank.webp"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; margin: 300px auto -100px auto; height: 504px; z-index: 100; position: relative; padding: 50px; } @media screen and (max-width: 992px) { .everdell .newsletter-ctn .news-ctn { padding: 50px 25px 0 25px; } } @media screen and (max-width: 767px) { .everdell .newsletter-ctn .news-ctn { margin-top: 100px; } } @media screen and (max-width: 640px) { .everdell .newsletter-ctn .news-ctn { margin-top: 50px; } } .everdell .logo-footer { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/everdell/BG_4.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; height: 712px; text-align: center; padding-top: 350px; } .everdell .logo-footer img { margin-left: 15px; } @font-face { font-display: swap; font-family: LinBiolinum; src: url(/assets/eternal/fonts/LinBiolinum_R.otf); font-weight: 400; } button:active { outline: none; border: none; } .btn-call-to-action { margin: 20px auto; display: block; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -345px; width: 282px; height: 75px; background-color: transparent; font-size: 3em; color: #fff; line-height: 2em; } .btn-call-to-action:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -420px; width: 282px; height: 75px; color: #fff; } body.eternalPage { font-family: 'LinBiolinum', sans-serif; } body.eternalPage .be_error ul { list-style: none; } body.eternalPage #loginModal, body.eternalPage #resultModal { z-index: 100000; } body.eternalPage #loginModal .modal-content, body.eternalPage #resultModal .modal-content { background-color: #06080b; } body.eternalPage #loginModal .modal-title, body.eternalPage #resultModal .modal-title { color: #ffd1ba; } body.eternalPage #loginModal .modal-header, body.eternalPage #resultModal .modal-header { border-bottom: 1px solid #2f2c3d; } body.eternalPage #loginModal .modal-footer, body.eternalPage #resultModal .modal-footer { text-align: center; border-top: 1px solid #2f2c3d; } body.eternalPage #loginModal .pb-2, body.eternalPage #resultModal .pb-2 { padding-bottom: 2em; } body.eternalPage #loginModal .pt-1, body.eternalPage #resultModal .pt-1 { padding-top: 1em; } body.eternalPage #loginModal .be_error, body.eternalPage #resultModal .be_error { color: #a94442; font-size: 20px; text-align: center; } body.eternalPage #loginModal .has-error, body.eternalPage #resultModal .has-error { border: 2px solid #a94442; border-radius: 4px; } body.eternalPage #loginModal .claim-pack, body.eternalPage #resultModal .claim-pack { background-color: #2f2c3d; margin: 1em 0; } body.eternalPage #loginModal .claim-pack:hover, body.eternalPage #loginModal .claim-pack:active, body.eternalPage #resultModal .claim-pack:hover, body.eternalPage #resultModal .claim-pack:active { color: #fff; background-color: #22202c; } body.eternalPage #loginModal input, body.eternalPage #resultModal input { background: #000; border: 2px solid #504133; color: #ddceeb; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage .floatingMessageTopLeft { width: 344px; position: fixed; top: 70px; left: 0; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/eternalTag.png) top left no-repeat transparent; z-index: 999; } body.eternalPage .floatingMessageTopLeft .expansionHub { height: 199px; } body.eternalPage .floatingMessageTopLeft a { color: #fff; text-decoration: none; } body.eternalPage .floatingMessageTopLeft p { font-size: 1.7em; font-family: 'LinBiolinum', sans-serif; text-align: center; padding: 0 45px 10px 45px; color: #fff; text-decoration: none; } @media screen and (max-width: 1346px) { body.eternalPage .floatingMessageTopLeft { display: none; } } body.eternalPage h1.fntCinzel, body.eternalPage h2.fntCinzel, body.eternalPage h3.fntCinzel, body.eternalPage h4.fntCinzel { font-family: 'Cinzel', serif; } body.eternalPage.Android .appStores .appleCont { display: none; } body.eternalPage.iOS .appStores .androidCont { display: none; } body.eternalPage.iOS .appStores .appleCont { width: 100%; } body.eternalPage.iOS .appStores .appleCont a { margin: 0 auto; } body.eternalPage.Firefox.emailValidate .eternalRegisterBanner .footerFog { bottom: 42px; } body.eternalPage header nav.navbar-eternal { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHX_Header.webp) top center repeat; border-bottom: 3px solid #000; } body.eternalPage header nav.navbar-eternal .container { padding: 0; } body.eternalPage header nav.navbar-eternal .container .navbar-header { margin: 0; } body.eternalPage header nav.navbar-eternal .navbar-toggle .icon-bar { background: #727c8d; } body.eternalPage header nav.navbar-eternal .navbar-dwd-logo { display: block; } body.eternalPage header nav.navbar-eternal .navbar-collapse { margin: 0; } @media screen and (max-width: 425px) { body.eternalPage header nav.navbar-eternal .navbar-collapse { background: #1C1E2C; } } body.eternalPage header nav.navbar-eternal .navbar-collapse ul.nav .open > a, body.eternalPage header nav.navbar-eternal .navbar-collapse ul.nav .nav .open > a:focus, body.eternalPage header nav.navbar-eternal .navbar-collapse ul.nav .nav .open > a:hover { background-color: transparent; } body.eternalPage header nav.navbar-eternal .navbar-collapse ul.nav li a { font-family: 'Cinzel', serif; } body.eternalPage header nav.navbar-eternal .navbar-collapse ul.nav li a:hover { background-color: transparent; } body.eternalPage header nav.navbar-eternal .navbar-collapse ul.nav.navbar-right .dropdown ul.dropdown-menu { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHXwebDropdown_bottomBackground.png) bottom left no-repeat #0a0910; right: auto; } @media screen and (max-width: 1420px) { body.eternalPage header nav.navbar-eternal .navbar-collapse ul.nav.navbar-right .dropdown ul.dropdown-menu { right: 0; } } body.eternalPage header nav.navbar-eternal .navbar-collapse ul.nav.navbar-right .dropdown ul.dropdown-menu li { text-align: right; padding: 4px 0 5px 0; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHXwebDropdown_divider.png) bottom left repeat-x; } body.eternalPage header nav.navbar-eternal .navbar-collapse ul.nav.navbar-right .dropdown ul.dropdown-menu li:last-child { background: none; } body.eternalPage header nav.navbar-eternal .navbar-collapse ul.nav.navbar-right .dropdown ul.dropdown-menu li a { color: #727C8D; font-size: 1.2em; } body.eternalPage header nav.navbar-eternal .navbar-collapse ul.nav.navbar-right .dropdown ul.dropdown-menu li a:hover { color: #fff; } body.eternalPage header nav.navbar-eternal .navbar-collapse ul .moreGames a { text-transform: uppercase; font-weight: 600; font-family: "Open Sans", sans-serif; } body.eternalPage div.eternalBannerSimple { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHXfooterTile.png) 0 0 repeat; } body.eternalPage div.eternalBannerSimple .container h1 { text-align: center; margin: 50px; font-size: 5em; } body.eternalPage div.eternalBanner { border-right: none; border-left: none; position: relative; height: 780px; /&.banditQueen { background: url(/assets/eternal/PHXHero_BanditQueen.jpg) center center no-repeat; } &.azindel { background: url(/assets/eternal/PHXHero_Azindel.jpg) center center no-repeat; }/ } body.eternalPage div.eternalBanner.JeekDragon { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHXHero_JekkA.jpg) center center no-repeat; } @media screen and (max-width: 768px) { body.eternalPage div.eternalBanner.JeekDragon { background: none; } } @media screen and (max-width: 425px) { body.eternalPage div.eternalBanner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHXHero_Mobile.png) center center no-repeat !important; background-size: cover !important; height: 640px; } } @media screen and (max-width: 375px) { body.eternalPage div.eternalBanner { height: 625px; } } @media screen and (max-width: 360px) { body.eternalPage div.eternalBanner { height: 560px; } } body.eternalPage div.eternalBanner .video-container { position: relative; bottom: 0%; left: 0%; height: 100%; width: 100%; overflow: hidden; } body.eternalPage div.eternalBanner .video-container .filter { z-index: 1; position: absolute; background: none; width: 100%; height: 100%; } @media screen and (max-width: 1024px) { body.eternalPage div.eternalBanner .video-container .filter { background: rgba(0, 0, 0, 0.6); } } body.eternalPage div.eternalBanner .video-container .title-container { z-index: 1000; position: absolute; top: 4px; right: 318px; width: 640px; text-align: center; color: #fff; right: 0; width: 100%; } @media screen and (max-width: 425px) { body.eternalPage div.eternalBanner .video-container .title-container { right: 0; top: 0; width: 100%; } } body.eternalPage div.eternalBanner .video-container .description .inner { font-size: 1em; width: 45%; margin: 0 auto; } body.eternalPage div.eternalBanner .video-container .link { position: absolute; bottom: 3em; width: 100%; text-align: center; z-index: 1001; font-size: 2em; color: #fff; } body.eternalPage div.eternalBanner .video-container .link a { color: #fff; } body.eternalPage div.eternalBanner .video-container video { position: absolute; top: 50%; left: 50%; z-index: 1; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); transition: all 0.3s; } body.eternalPage div.eternalBanner .title-container .contentPosition { position: relative; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn { text-align: center; margin-top: 90px; } @media screen and (max-width: 360px) { body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn { margin-top: 50px; } } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .PHX_LogoA { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -729px; width: 590px; height: 428px; display: inline-block; } @media screen and (max-width: 425px) { body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .PHX_LogoA { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/PHX_LogoA.png) 0 0 no-repeat; background-size: contain; width: 400px; height: 290px; } } @media screen and (max-width: 375px) { body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .PHX_LogoA { width: 375px; height: 272px; } } @media screen and (max-width: 360px) { body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .PHX_LogoA { width: 360px; height: 261px; } } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .steamBtnCont { margin: -100px auto 20px auto; width: 500px; height: 120px; } @media screen and (max-width: 425px) { body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .steamBtnCont { display: none; } } @media screen and (max-width: 375px) { body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .steamBtnCont { width: 375px; } } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .steamBtnCont a { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -475px; width: 399px; height: 127px; } @media screen and (max-width: 375px) { body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .steamBtnCont a { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/PHX_steamButton.png) 0 0 no-repeat; background-size: contain; width: 375px; } } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .steamBtnCont a:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -602px; width: 399px; height: 127px; } @media screen and (max-width: 414px) { body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .steamBtnCont a:hover { background: none; } } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .appStores { margin: 0; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .appStores a { display: block; width: 215px; } @media screen and (max-width: 425px) { body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .appStores a { width: 100%; } } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .appStores a .apple { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0px 0px; width: 215px; height: 63px; } @media screen and (max-width: 425px) { body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .appStores a .apple { margin: 0 auto; } } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .appStores a .apple:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0px -189px; width: 215px; height: 63px; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .appStores a .google { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0 -63px; width: 215px; height: 63px; } @media screen and (max-width: 425px) { body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .appStores a .google { margin: 0 auto; } } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .appStores a .google:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0px -126px; width: 215px; height: 63px; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .setupBtnCont { position: relative; padding: 10px 0; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .setupBtnCont a { color: #b2c8ee; font-size: 200%; text-decoration: underline; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .setupBtnCont a:hover { color: #fff; text-decoration: underline; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .socialBtnCont { position: relative; padding: 20px 0; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .socialBtnCont a { display: inline-block; margin-right: 27px; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .socialBtnCont a:last-child { margin-right: 0; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .socialBtnCont a.fb { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -98px; width: 36px; height: 29px; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .socialBtnCont a.fb:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -69px; width: 36px; height: 29px; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .socialBtnCont a.tw { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -40px; width: 36px; height: 29px; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .socialBtnCont a.tw:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -243px; width: 36px; height: 29px; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .socialBtnCont a.rd { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -156px; width: 36px; height: 29px; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .socialBtnCont a.rd:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -127px; width: 36px; height: 29px; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .socialBtnCont a.steam { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -214px; width: 36px; height: 29px; } body.eternalPage div.eternalBanner .title-container .contentPosition .flyLogoIn .socialBtnCont a.steam:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -185px; width: 36px; height: 29px; } body.eternalPage main { top: -48px; margin-bottom: -48px; z-index: 2; } body.eternalPage main .dividerContent { position: relative; top: 17px; width: 100%; height: 49px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/dividerFill.webp) center center repeat-x; background-clip: content-box; padding-left: 91px; padding-right: 91px; text-align: center; z-index: 99; } body.eternalPage main .dividerContent .capLeft { position: absolute; top: 12px; left: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px 0px; width: 91px; height: 20px; display: inline-block; } body.eternalPage main .dividerContent .capCenter { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -272px; width: 174px; height: 49px; display: block; margin: 0 auto; } body.eternalPage main .dividerContent .capRight { position: absolute; top: 12px; right: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -20px; width: 91px; height: 20px; display: inline-block; } body.eternalPage main .dividerContent.dArrow { height: 57px; top: 18px; } body.eternalPage main .dividerContent.dArrow .capLeft { top: 16px; } body.eternalPage main .dividerContent.dArrow .capCenter { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/PHX_DividerButtonB_downArrow.png) center center no-repeat; width: 174px; height: 64px; display: block; margin: 0 auto; cursor: pointer; } body.eternalPage main .dividerContent.dArrow .capRight { top: 16px; } body.eternalPage main.nobanner { top: 0; margin: 0; } @media screen and (max-width: 425px) { body.eternalPage main section.lnews { padding-bottom: 0; } } body.eternalPage main section.lnews h1.fntCinzel { font-size: 3.3em; } @media screen and (max-width: 425px) { body.eternalPage main section.lnews h1.fntCinzel { margin-top: 20px; margin-left: 20px; } } @media screen and (max-width: 360px) { body.eternalPage main section.lnews h1.fntCinzel { margin-left: 20px; } } body.eternalPage main section.lnews h1.fntCinzel a.sm_link { font-size: 0.4em; font-family: "Open Sans", sans-serif; } body.eternalPage main section.lnews h1.fntCinzel a.sm_link:hover { color: #fff; } body.eternalPage main section.eternalGameContent { position: relative; background-color: #000; padding: 0 0 60px 0; } body.eternalPage main section.eternalGameContent .purpleSideL { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHX_purpleSideL.png) top left repeat-y transparent; pointer-events: none; } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .purpleSideL { display: none; } } body.eternalPage main section.eternalGameContent .purpleSideR { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHX_purpleSideR.png) top right repeat-y transparent; pointer-events: none; } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .purpleSideR { display: none; } } body.eternalPage main section.eternalGameContent .verybackshiftstones { position: absolute; bottom: 250px; width: 100%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/shiftStonesBack.png) center bottom no-repeat transparent; pointer-events: none; } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .verybackshiftstones { display: none; } } body.eternalPage main section.eternalGameContent .backshiftstones { position: absolute; bottom: 0; width: 100%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/shiftStonesMiddle.png) center bottom no-repeat transparent; pointer-events: none; } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .backshiftstones { display: none; } } body.eternalPage main section.eternalGameContent .frontshiftstones { position: absolute; bottom: 0; width: 100%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/shiftStonesFront.png) center bottom no-repeat transparent; pointer-events: none; } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .frontshiftstones { display: none; } } body.eternalPage main section.eternalGameContent h2 { font-size: 4em; color: #d79e54; } body.eternalPage main section.eternalGameContent p { font-size: 2em; } body.eternalPage main section.eternalGameContent .eternalLinks { text-align: center; margin-top: 40px; } body.eternalPage main section.eternalGameContent .eternalLinks img { margin: 0 auto; padding-bottom: 10px; } body.eternalPage main section.eternalGameContent .communityLink { text-align: center; margin-top: 33px; padding: 0 30px; } body.eternalPage main section.eternalGameContent .communityLink .col-md-12 { padding: 0 10px 16px 10px; } body.eternalPage main section.eternalGameContent .communityLink .col-md-12 img { margin: 0 auto; } body.eternalPage main section.eternalGameContent .communityLink .col-md-12 img.right { padding-left: 23px; } @media screen and (max-width: 1200px) { body.eternalPage main section.eternalGameContent .communityLink .col-md-12 img.right { padding-left: 0px; } } body.eternalPage main section.eternalGameContent .communityLink .col-md-12 img.left { padding-right: 23px; } @media screen and (max-width: 1200px) { body.eternalPage main section.eternalGameContent .communityLink .col-md-12 img.left { padding-right: 0px; } } body.eternalPage main section.eternalGameContent .earnyourcards.Caiphus { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/wideContentART_Caiphus.webp) no-repeat; } body.eternalPage main section.eternalGameContent .earnyourcards.offsetRight40 { background-position: 115% 100%; } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .earnyourcards.offsetRight40 { background-position: 66% 100%; } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .earnyourcards.offsetRight40 { padding-bottom: 220px; background-position: 100% 100%; background-size: 150%; } } body.eternalPage main section.eternalGameContent .earnyourcards .earnyourcardsText { padding: 140px 0 140px 10px; } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .earnyourcards .earnyourcardsText { padding: 0 0 145px 10px; } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .earnyourcards .earnyourcardsText { padding: 0 0 0 0; } } body.eternalPage main section.eternalGameContent .earnyourcards .earnyourcardsText .contentText { width: 40%; } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .earnyourcards .earnyourcardsText .contentText { width: auto; } } body.eternalPage main section.eternalGameContent .forgeyourway { position: relative; margin-bottom: 40px; } body.eternalPage main section.eternalGameContent .forgeyourway.Azindel { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/contentART_Azindel.png) 0 0 no-repeat; } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .forgeyourway.Azindel { padding-bottom: 220px; background-position: 0% 100%; background-size: 150%; } } body.eternalPage main section.eternalGameContent .forgeyourway.BanditQ { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/wideContentART_BanditQ2.webp) 0 0 no-repeat; } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .forgeyourway.BanditQ { background-position: 38% 100%; } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .forgeyourway.BanditQ { padding-bottom: 220px; background-position: 0% 100%; background-size: 150%; } } body.eternalPage main section.eternalGameContent .forgeyourway .forgeyourwayText { padding: 140px 0 140px 10px; } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .forgeyourway .forgeyourwayText { padding: 0 0 145px 10px; } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .forgeyourway .forgeyourwayText { padding: 0 0 0 0; } } body.eternalPage main section.eternalGameContent .forgeyourway .forgeyourwayText .contentText { width: 40%; margin-left: 60%; } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .forgeyourway .forgeyourwayText .contentText { width: auto; margin-left: 0; } } body.eternalPage main section.eternalGameContent .rewards { position: relative; margin-bottom: 40px; height: 405px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/wideContentART_openChest.png) 0 0 no-repeat; } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .rewards { background-position: 38% 100%; } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .rewards { padding-bottom: 220px; background-position: 0% 100%; background-size: 150%; } } body.eternalPage main section.eternalGameContent .rewards .rewardsText { padding: 140px 0 140px 10px; } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .rewards .rewardsText { padding: 0 0 145px 10px; } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .rewards .rewardsText { padding: 0 0 0 0; } } body.eternalPage main section.eternalGameContent .rewards .rewardsText .contentText { width: 40%; margin-left: 60%; } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .rewards .rewardsText .contentText { width: auto; margin-left: 0; } } body.eternalPage main section.eternalGameContent .sigilsCont .sigils { position: relative; bottom: 50px; width: 100%; height: 350px; text-align: center; } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils { bottom: 0; height: 675px; } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils { bottom: 0; height: 780px; } } body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim { transition: all 0.3s ease-in-out 0s; } body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img { position: absolute; width: auto; } body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-left-edge { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(176px) translateY(64px) rotate(-17deg); -moz-transform: translateX(176px) translateY(64px) rotate(-17deg); -ms-transform: translateX(176px) translateY(64px) rotate(-17deg); transform: translateX(176px) translateY(64px) rotate(-17deg); } @media screen and (max-width: 1200px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-left-edge { -webkit-transform: translateX(56px) translateY(64px) rotate(-17deg); -moz-transform: translateX(56px) translateY(64px) rotate(-17deg); -ms-transform: translateX(56px) translateY(64px) rotate(-17deg); transform: translateX(56px) translateY(64px) rotate(-17deg); } } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-left-edge { -webkit-transform: translateX(10px) translateY(0px) rotate(0deg); -moz-transform: translateX(10px) translateY(0px) rotate(0deg); -ms-transform: translateX(10px) translateY(0px) rotate(0deg); transform: translateX(10px) translateY(0px) rotate(0deg); } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-left-edge { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); height: 260px !important; } } @media screen and (max-width: 360px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-left-edge { -webkit-transform: translateX(5px); -moz-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); height: 260px !important; } } body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-left { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(335px) translateY(15px) rotate(-9deg); -moz-transform: translateX(335px) translateY(15px) rotate(-9deg); -ms-transform: translateX(335px) translateY(15px) rotate(-9deg); transform: translateX(335px) translateY(15px) rotate(-9deg); } @media screen and (max-width: 1200px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-left { -webkit-transform: translateX(217px) translateY(15px) rotate(-9deg); -moz-transform: translateX(217px) translateY(15px) rotate(-9deg); -ms-transform: translateX(217px) translateY(15px) rotate(-9deg); transform: translateX(217px) translateY(15px) rotate(-9deg); } } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-left { -webkit-transform: translateX(272px) translateY(0px) rotate(0deg); -moz-transform: translateX(272px) translateY(0px) rotate(0deg); -ms-transform: translateX(272px) translateY(0px) rotate(0deg); transform: translateX(272px) translateY(0px) rotate(0deg); } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-left { -webkit-transform: translateX(216px); -moz-transform: translateX(216px); -ms-transform: translateX(216px); transform: translateX(216px); height: 260px !important; } } @media screen and (max-width: 375px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-left { -webkit-transform: translateX(188px); -moz-transform: translateX(188px); -ms-transform: translateX(188px); transform: translateX(188px); height: 260px !important; } } @media screen and (max-width: 360px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-left { -webkit-transform: translateX(174px); -moz-transform: translateX(174px); -ms-transform: translateX(174px); transform: translateX(174px); height: 260px !important; } } body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-center { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(500px) translateY(-14px); -moz-transform: translateX(500px) translateY(-14px); -ms-transform: translateX(500px) translateY(-14px); transform: translateX(500px) translateY(-14px); } @media screen and (max-width: 1200px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-center { -webkit-transform: translateX(380px) translateY(-14px); -moz-transform: translateX(380px) translateY(-14px); -ms-transform: translateX(380px) translateY(-14px); transform: translateX(380px) translateY(-14px); } } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-center { -webkit-transform: translateX(518px) translateY(0px) rotate(0deg); -moz-transform: translateX(518px) translateY(0px) rotate(0deg); -ms-transform: translateX(518px) translateY(0px) rotate(0deg); transform: translateX(518px) translateY(0px) rotate(0deg); } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-center { -webkit-transform: translateX(10px) translateY(257px); -moz-transform: translateX(10px) translateY(257px); -ms-transform: translateX(10px) translateY(257px); transform: translateX(10px) translateY(257px); height: 260px !important; } } @media screen and (max-width: 360px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-center { -webkit-transform: translateX(5px) translateY(257px); -moz-transform: translateX(5px) translateY(257px); -ms-transform: translateX(5px) translateY(257px); transform: translateX(5px) translateY(257px); height: 260px !important; } } body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-right { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(668px) translateY(19px) rotate(11deg); -moz-transform: translateX(668px) translateY(19px) rotate(11deg); -ms-transform: translateX(668px) translateY(19px) rotate(11deg); transform: translateX(668px) translateY(19px) rotate(11deg); } @media screen and (max-width: 1200px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-right { -webkit-transform: translateX(559px) translateY(19px) rotate(11deg); -moz-transform: translateX(559px) translateY(19px) rotate(11deg); -ms-transform: translateX(559px) translateY(19px) rotate(11deg); transform: translateX(559px) translateY(19px) rotate(11deg); } } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-right { -webkit-transform: translateX(145px) translateY(350px) rotate(0deg); -moz-transform: translateX(145px) translateY(350px) rotate(0deg); -ms-transform: translateX(145px) translateY(350px) rotate(0deg); transform: translateX(145px) translateY(350px) rotate(0deg); } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-right { -webkit-transform: translateX(216px) translateY(264px); -moz-transform: translateX(216px) translateY(264px); -ms-transform: translateX(216px) translateY(264px); transform: translateX(216px) translateY(264px); height: 260px !important; } } @media screen and (max-width: 375px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-right { -webkit-transform: translateX(188px) translateY(264px); -moz-transform: translateX(188px) translateY(264px); -ms-transform: translateX(188px) translateY(264px); transform: translateX(188px) translateY(264px); height: 260px !important; } } @media screen and (max-width: 360px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-right { -webkit-transform: translateX(174px) translateY(264px); -moz-transform: translateX(174px) translateY(264px); -ms-transform: translateX(174px) translateY(264px); transform: translateX(174px) translateY(264px); height: 260px !important; } } body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-right-edge { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(828px) translateY(72px) rotate(19deg); -moz-transform: translateX(828px) translateY(72px) rotate(19deg); -ms-transform: translateX(828px) translateY(72px) rotate(19deg); transform: translateX(828px) translateY(72px) rotate(19deg); } @media screen and (max-width: 1200px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-right-edge { -webkit-transform: translateX(721px) translateY(72px) rotate(19deg); -moz-transform: translateX(721px) translateY(72px) rotate(19deg); -ms-transform: translateX(721px) translateY(72px) rotate(19deg); transform: translateX(721px) translateY(72px) rotate(19deg); } } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-right-edge { -webkit-transform: translateX(400px) translateY(350px) rotate(0deg); -moz-transform: translateX(400px) translateY(350px) rotate(0deg); -ms-transform: translateX(400px) translateY(350px) rotate(0deg); transform: translateX(400px) translateY(350px) rotate(0deg); } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-right-edge { -webkit-transform: translateX(10px) translateY(522px); -moz-transform: translateX(10px) translateY(522px); -ms-transform: translateX(10px) translateY(522px); transform: translateX(10px) translateY(522px); height: 260px !important; } } @media screen and (max-width: 360px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim img.cards-right-edge { -webkit-transform: translateX(5px) translateY(522px); -moz-transform: translateX(5px) translateY(522px); -ms-transform: translateX(5px) translateY(522px); transform: translateX(5px) translateY(522px); height: 260px !important; } } body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim.hover { transition: all 0.3s ease-in-out 0s; } body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim.hover img { position: absolute; } body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim.hover img.cards-left-edge { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(100px) translateY(0px) rotate(0deg); -moz-transform: translateX(100px) translateY(0px) rotate(0deg); -ms-transform: translateX(100px) translateY(0px) rotate(0deg); transform: translateX(100px) translateY(0px) rotate(0deg); } body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim.hover img.cards-left { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(300px) translateY(0px) rotate(0deg); -moz-transform: translateX(300px) translateY(0px) rotate(0deg); -ms-transform: translateX(300px) translateY(0px) rotate(0deg); transform: translateX(300px) translateY(0px) rotate(0deg); } body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim.hover img.cards-center { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(500px) translateY(-14px); -moz-transform: translateX(500px) translateY(-14px); -ms-transform: translateX(500px) translateY(-14px); transform: translateX(500px) translateY(-14px); } body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim.hover img.cards-right { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(700px) translateY(0px) rotate(0deg); -moz-transform: translateX(700px) translateY(0px) rotate(0deg); -ms-transform: translateX(700px) translateY(0px) rotate(0deg); transform: translateX(700px) translateY(0px) rotate(0deg); } body.eternalPage main section.eternalGameContent .sigilsCont .sigils.anim.hover img.cards-right-edge { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(900px) translateY(0px) rotate(0deg); -moz-transform: translateX(900px) translateY(0px) rotate(0deg); -ms-transform: translateX(900px) translateY(0px) rotate(0deg); transform: translateX(900px) translateY(0px) rotate(0deg); } body.eternalPage main section.eternalGameContent .sigilsCont .sigils img { position: absolute; } body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-left-edge { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(500px); -moz-transform: translateX(500px); -ms-transform: translateX(500px); transform: translateX(500px); } @media screen and (max-width: 1024px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-left-edge { -webkit-transform: translateX(380px); -moz-transform: translateX(380px); -ms-transform: translateX(380px); transform: translateX(380px); } } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-left-edge { -webkit-transform: translateX(250px); -moz-transform: translateX(250px); -ms-transform: translateX(250px); transform: translateX(250px); } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-left-edge { -webkit-transform: translateX(73px) translateY(120px) rotate(0deg); -moz-transform: translateX(73px) translateY(120px) rotate(0deg); -ms-transform: translateX(73px) translateY(120px) rotate(0deg); transform: translateX(73px) translateY(120px) rotate(0deg); } } body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-left { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(500px); -moz-transform: translateX(500px); -ms-transform: translateX(500px); transform: translateX(500px); } @media screen and (max-width: 1024px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-left { -webkit-transform: translateX(380px); -moz-transform: translateX(380px); -ms-transform: translateX(380px); transform: translateX(380px); } } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-left { -webkit-transform: translateX(250px); -moz-transform: translateX(250px); -ms-transform: translateX(250px); transform: translateX(250px); } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-left { -webkit-transform: translateX(73px) translateY(120px) rotate(0deg); -moz-transform: translateX(73px) translateY(120px) rotate(0deg); -ms-transform: translateX(73px) translateY(120px) rotate(0deg); transform: translateX(73px) translateY(120px) rotate(0deg); } } body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-center { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(500px); -moz-transform: translateX(500px); -ms-transform: translateX(500px); transform: translateX(500px); } @media screen and (max-width: 1024px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-center { -webkit-transform: translateX(380px); -moz-transform: translateX(380px); -ms-transform: translateX(380px); transform: translateX(380px); } } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-center { -webkit-transform: translateX(250px); -moz-transform: translateX(250px); -ms-transform: translateX(250px); transform: translateX(250px); } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-center { -webkit-transform: translateX(73px) translateY(120px) rotate(0deg); -moz-transform: translateX(73px) translateY(120px) rotate(0deg); -ms-transform: translateX(73px) translateY(120px) rotate(0deg); transform: translateX(73px) translateY(120px) rotate(0deg); } } body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-right { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(500px); -moz-transform: translateX(500px); -ms-transform: translateX(500px); transform: translateX(500px); } @media screen and (max-width: 1024px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-right { -webkit-transform: translateX(380px); -moz-transform: translateX(380px); -ms-transform: translateX(380px); transform: translateX(380px); } } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-right { -webkit-transform: translateX(250px); -moz-transform: translateX(250px); -ms-transform: translateX(250px); transform: translateX(250px); } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-right { -webkit-transform: translateX(73px) translateY(120px) rotate(0deg); -moz-transform: translateX(73px) translateY(120px) rotate(0deg); -ms-transform: translateX(73px) translateY(120px) rotate(0deg); transform: translateX(73px) translateY(120px) rotate(0deg); } } body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-right-edge { transition: all 0.3s ease-in-out 0s; -webkit-transform: translateX(500px); -moz-transform: translateX(500px); -ms-transform: translateX(500px); transform: translateX(500px); } @media screen and (max-width: 1024px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-right-edge { -webkit-transform: translateX(380px); -moz-transform: translateX(380px); -ms-transform: translateX(380px); transform: translateX(380px); } } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-right-edge { -webkit-transform: translateX(250px); -moz-transform: translateX(250px); -ms-transform: translateX(250px); transform: translateX(250px); } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .sigilsCont .sigils img.cards-right-edge { -webkit-transform: translateX(73px) translateY(120px) rotate(0deg); -moz-transform: translateX(73px) translateY(120px) rotate(0deg); -ms-transform: translateX(73px) translateY(120px) rotate(0deg); transform: translateX(73px) translateY(120px) rotate(0deg); } } body.eternalPage main section.eternalGameContent .collectandcompete { overflow: auto; clear: both; } body.eternalPage main section.eternalGameContent .collectandcompete .cards { width: 190px; height: 300px; float: left; } body.eternalPage main section.eternalGameContent .collectandcompete .cards.Icaria { background: url(https://d19y2ttatozxjp.cloudfront.net/website/cards/Misc/Icaria.gif) bottom center no-repeat transparent; background-size: contain; margin-right: 20px; } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .collectandcompete .cards.Icaria { margin-right: 0; } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .collectandcompete .cards.Icaria { margin: 20px auto; width: 100%; } } body.eternalPage main section.eternalGameContent .collectandcompete .cards.Cirso { background: url(https://d19y2ttatozxjp.cloudfront.net/website/cards/Misc/Cirso.gif) bottom center no-repeat transparent; background-size: contain; } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .collectandcompete .cards.Cirso { margin-right: 75px; margin-left: 75px; } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .collectandcompete .cards.Cirso { margin: 20px auto; width: 100%; } } body.eternalPage main section.eternalGameContent .collectandcompete .cards.SpellSwipe { background: url(https://d19y2ttatozxjp.cloudfront.net/website/cards/Misc/SpellSwipe.gif) bottom center no-repeat transparent; background-size: auto 286px; } @media screen and (max-width: 768px) { body.eternalPage main section.eternalGameContent .collectandcompete .cards.SpellSwipe { margin-right: 0; } } @media screen and (max-width: 425px) { body.eternalPage main section.eternalGameContent .collectandcompete .cards.SpellSwipe { margin: 20px auto; width: 100%; } } body.eternalPage main section.forums { margin-bottom: 175px; margin-top: 50px; } body.eternalPage main section.forums p { font-size: 1.5em; } body.eternalPage main section.forums .socialList { margin-top: 30px; } body.eternalPage main section.forums .socialList p.copy { color: #fff6e3; line-height: 1.5em; } body.eternalPage main section.forums .socialList p.socialIcons a { margin-right: 10px; display: inline-block; } body.eternalPage main section.forums .socialList p.socialIcons a.fb { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -69px; width: 36px; height: 29px; } body.eternalPage main section.forums .socialList p.socialIcons a.fb:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -98px; width: 36px; height: 29px; } body.eternalPage main section.forums .socialList p.socialIcons a.tw { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -243px; width: 36px; height: 29px; } body.eternalPage main section.forums .socialList p.socialIcons a.tw:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -40px; width: 36px; height: 29px; } body.eternalPage main section.forums .socialList p.socialIcons a.rd { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -127px; width: 36px; height: 29px; } body.eternalPage main section.forums .socialList p.socialIcons a.rd:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -156px; width: 36px; height: 29px; } body.eternalPage main section.forums .socialList p.socialIcons a.steam { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -185px; width: 36px; height: 29px; } body.eternalPage main section.forums .socialList p.socialIcons a.steam:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -214px; width: 36px; height: 29px; } body.eternalPage.passwordRecovery .eternalBanner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHXHero_JekkA.jpg) center center no-repeat; } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition { position: relative; height: 100%; width: 500px; } @media screen and (max-width: 500px) { body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition { width: 100%; } } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .eternalLogo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/PHX_LogoA.png) center center no-repeat; background-size: contain; height: 293px; padding: 25px; } @media screen and (max-width: 425px) { body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .eternalLogo { background-size: 100%; } } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameForms { position: relative; margin: 0 auto; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) center center repeat transparent; border-radius: 5px; } @media screen and (max-width: 425px) { body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameForms { width: auto; } } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameForms h2 { margin-top: 0; margin-bottom: 20px; } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameForms .form-group { position: relative; } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameForms .form-group .errorRedCircle { display: none; } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameForms .form-group .form-control { height: 42px; } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameForms .form-group.has-error .errorRedCircle { display: inline-block; width: 30px; height: 30px; background: #F02425; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; font-size: 2.2em; line-height: 1.3em; text-align: center; position: absolute; right: 6px; top: 6px; } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameForms .form-group.has-error .form-control { border: 3px solid #F02425; } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameForms .be_error { margin: 0 0; } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameForms .be_error ul { padding: 0; list-style-type: none; } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameForms .be_error ul li { font-size: 1.6em; color: #F02425; } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameForms .be_error span { color: #fff; } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameSucess { display: none; position: relative; width: 500px; margin: 178px auto 0 auto; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) center center repeat transparent; border-radius: 5px; padding: 25px; } @media screen and (max-width: 425px) { body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameSucess { width: auto; } } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameSucess h2 { margin-top: 0; margin-bottom: 20px; color: #8AD5B6; } body.eternalPage.passwordRecovery .eternalBanner .title-container .contentPosition .frameSucess .msg_ren { color: #fff; } body.eternalPage.emailValidate { background: #030303; } body.eternalPage.emailValidate .eternalRegisterBanner { position: relative; min-height: 780px; } body.eternalPage.emailValidate .eternalRegisterBanner .sideL { position: absolute; top: 0; left: 0; width: 735px; height: 780px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/BlueHero_BanditQueen.jpg) top left no-repeat transparent; background-size: contain; } @media screen and (max-width: 1300px) { body.eternalPage.emailValidate .eternalRegisterBanner .sideL { display: none; } } body.eternalPage.emailValidate .eternalRegisterBanner .sideR { position: absolute; top: 0; right: 0; width: 735px; height: 780px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/BlueHero_Jekk.jpg) top right no-repeat transparent; background-size: contain; } @media screen and (max-width: 800px) { body.eternalPage.emailValidate .eternalRegisterBanner .sideR { display: none; } } body.eternalPage.emailValidate .eternalRegisterBanner .footerFog { height: 153px; width: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/PHX_footerFog.gif) 0 0 repeat-x; position: absolute; bottom: 40px; z-index: 1; } body.eternalPage.emailValidate section { z-index: 10; position: relative; } body.eternalPage.emailValidate section.formHeader h1 { font-size: 2.5em; text-align: center; display: block; margin-top: -60px; margin-bottom: 0; color: #ddceeb; font-family: 'LinBiolinum', sans-serif; } body.eternalPage.emailValidate section.formHeader h1.success { color: #8cd4aa; font-size: 4em; font-family: 'Cinzel', serif; margin-top: 0; } body.eternalPage.emailValidate section.formHeader .eternalLogo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/PHX_LogoA.png) 0 0 no-repeat; background-size: contain; width: 400px; height: 290px; display: block; margin: 0 auto; } @media screen and (max-width: 500px) { body.eternalPage.emailValidate section.formHeader .eternalLogo { width: 325px; height: 236px; } } body.eternalPage.emailValidate section.formSuccessContainer, body.eternalPage.emailValidate section.formError { margin: 40px auto 70px auto; max-width: 500px; } body.eternalPage.emailValidate section.formSuccessContainer p, body.eternalPage.emailValidate section.formError p { color: #ddceeb; font-size: 2em; margin-top: 30px; text-align: center; } body.eternalPage.emailValidate section.formSuccessContainer p a, body.eternalPage.emailValidate section.formError p a { color: #648ad9; } body.eternalPage.emailValidate section.formSuccessContainer .appStores, body.eternalPage.emailValidate section.formError .appStores { margin: 0; } body.eternalPage.emailValidate section.formSuccessContainer .appStores a, body.eternalPage.emailValidate section.formError .appStores a { display: block; margin: 0 auto 10px auto; width: 215px; } @media screen and (max-width: 425px) { body.eternalPage.emailValidate section.formSuccessContainer .appStores a, body.eternalPage.emailValidate section.formError .appStores a { width: 100%; } } body.eternalPage.emailValidate section.formSuccessContainer .appStores a .steam, body.eternalPage.emailValidate section.formError .appStores a .steam { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/badge_steam_large.png) 0 0 no-repeat; width: 215px; height: 64px; margin: 0 auto; display: block; } @media screen and (max-width: 425px) { body.eternalPage.emailValidate section.formSuccessContainer .appStores a .steam, body.eternalPage.emailValidate section.formError .appStores a .steam { margin: 0 auto; } } body.eternalPage.emailValidate section.formSuccessContainer .appStores a .steam:hover, body.eternalPage.emailValidate section.formError .appStores a .steam:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/badge_steam_largeHOVER.png) 0 0 no-repeat; width: 215px; height: 64px; } body.eternalPage.emailValidate section.formSuccessContainer .appStores a .apple, body.eternalPage.emailValidate section.formError .appStores a .apple { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0px 0px; width: 215px; height: 63px; margin: 0 auto; display: block; } @media screen and (max-width: 425px) { body.eternalPage.emailValidate section.formSuccessContainer .appStores a .apple, body.eternalPage.emailValidate section.formError .appStores a .apple { margin: 0 auto; } } body.eternalPage.emailValidate section.formSuccessContainer .appStores a .apple:hover, body.eternalPage.emailValidate section.formError .appStores a .apple:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0px -189px; width: 215px; height: 63px; } body.eternalPage.emailValidate section.formSuccessContainer .appStores a .google, body.eternalPage.emailValidate section.formError .appStores a .google { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0px -63px; width: 215px; height: 63px; } @media screen and (max-width: 425px) { body.eternalPage.emailValidate section.formSuccessContainer .appStores a .google, body.eternalPage.emailValidate section.formError .appStores a .google { margin: 0 auto; } } body.eternalPage.emailValidate section.formSuccessContainer .appStores a .google:hover, body.eternalPage.emailValidate section.formError .appStores a .google:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0px -126px; width: 215px; height: 63px; } body.eternalPage.emailValidate section.formSuccessContainer .be_error, body.eternalPage.emailValidate section.formError .be_error { color: red; text-align: center; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.login { background: #030303; } body.eternalPage.login .eternalLoginBanner { position: relative; min-height: 880px; } body.eternalPage.login .eternalLoginBanner .sideL { position: absolute; top: 0; left: 0; width: 735px; height: 780px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/BlueHero_BanditQueen.jpg) top left no-repeat transparent; background-size: contain; } @media screen and (max-width: 425px) { body.eternalPage.login .eternalLoginBanner .sideL { display: none; } } body.eternalPage.login .eternalLoginBanner .sideR { position: absolute; top: 0; right: 0; width: 735px; height: 780px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/BlueHero_Jekk.jpg) top right no-repeat transparent; background-size: contain; } @media screen and (max-width: 425px) { body.eternalPage.login .eternalLoginBanner .sideR { display: none; } } body.eternalPage.login .eternalLoginBanner .footerFog { height: 153px; width: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/PHX_footerFog.gif) 0 0 repeat-x; position: absolute; bottom: 46px; z-index: 1; } body.eternalPage.login section { z-index: 10; position: relative; } body.eternalPage.login section.formHeader h1 { font-size: 2.5em; text-align: center; display: block; margin-top: -60px; margin-bottom: 0; color: #ddceeb; font-family: 'LinBiolinum', sans-serif; } body.eternalPage.login section.formHeader h1.success { color: #8cd4aa; font-size: 4em; font-family: 'Cinzel', serif; margin-top: 0; } body.eternalPage.login section.formHeader .eternalLogo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/PHX_LogoA.png) 0 0 no-repeat; background-size: contain; width: 400px; height: 290px; display: block; margin: 0 auto; } @media screen and (max-width: 375px) { body.eternalPage.login section.formHeader .eternalLogo { width: 375px; height: 272px; } } @media screen and (max-width: 360px) { body.eternalPage.login section.formHeader .eternalLogo { width: 360px; height: 261px; } } body.eternalPage.login section.formContainer { margin: 20px auto 0 auto; } body.eternalPage.login section.formContainer input { background: #000; border: 2px solid #504133; color: #ddceeb; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.login section.formContainer input::placeholder { color: #5b5064; } body.eternalPage.login section.formContainer .form-group.has-error input { border: 2px solid red; } body.eternalPage.login section.formContainer .remembermeBox { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/login/webCheckOFF.png) 0 0 no-repeat; color: #5b5064; text-align: center; font-size: 1.3em; line-height: 2em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: 175px; height: 28px; margin: 0 auto; cursor: pointer; display: block; user-select: none; } body.eternalPage.login section.formContainer .remembermeBox.checked { color: #ddceeb; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/login/webcheckON.png) 0 0 no-repeat; } body.eternalPage.login section.formContainer .remembermeBox:hover { cursor: pointer; color: #ddceeb; } body.eternalPage.login section.formContainer p { color: #ddceeb; font-size: 1.3em; margin-top: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.login section.formContainer p a { color: #648ad9; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.login section.formContainer a.btn-eternal-lnk { color: #ddceeb; font-family: 'LinBiolinum', sans-serif; font-size: 1.5em; text-decoration: underline; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } body.eternalPage.login section.formContainer a.btn-eternal-lnk:hover { color: #fff; } body.eternalPage.login section.formContainer .be_error { color: red; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; } body.eternalPage.login section.formContainer .be_error ul { list-style-type: none; margin: 0; padding: 0; } body.eternalPage.login section.formContainer .be_error ul li { text-align: center; } body.eternalPage.login section.formContainer .btn-eternal-register, body.eternalPage.login section.formContainer .btn-eternal-login { margin: 20px auto; display: block; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -345px; width: 282px; height: 75px; background-color: transparent; font-size: 3em; color: #fff; line-height: 2em; } body.eternalPage.login section.formContainer .btn-eternal-register:hover, body.eternalPage.login section.formContainer .btn-eternal-login:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -420px; width: 282px; height: 75px; color: #fff; } body.eternalPage.changePassword { background: #030303; } body.eternalPage.changePassword .eternalchangePasswordBanner { position: relative; min-height: 880px; } body.eternalPage.changePassword .eternalchangePasswordBanner .sideL { position: absolute; top: 0; left: 0; width: 735px; height: 780px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/BlueHero_BanditQueen.jpg) top left no-repeat transparent; background-size: contain; } @media screen and (max-width: 425px) { body.eternalPage.changePassword .eternalchangePasswordBanner .sideL { display: none; } } body.eternalPage.changePassword .eternalchangePasswordBanner .sideR { position: absolute; top: 0; right: 0; width: 735px; height: 780px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/BlueHero_Jekk.jpg) top right no-repeat transparent; background-size: contain; } @media screen and (max-width: 425px) { body.eternalPage.changePassword .eternalchangePasswordBanner .sideR { display: none; } } body.eternalPage.changePassword .eternalchangePasswordBanner .footerFog { height: 153px; width: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/PHX_footerFog.gif) 0 0 repeat-x; position: absolute; bottom: 46px; z-index: 1; } body.eternalPage.changePassword section { z-index: 10; position: relative; } body.eternalPage.changePassword section.formHeader h1 { font-size: 2.5em; text-align: center; display: block; margin-top: -60px; margin-bottom: 0; color: #ddceeb; font-family: 'LinBiolinum', sans-serif; } body.eternalPage.changePassword section.formHeader h1.success { color: #8cd4aa; font-size: 4em; font-family: 'Cinzel', serif; margin-top: 0; } body.eternalPage.changePassword section.formHeader .eternalLogo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/PHX_LogoA.png) 0 0 no-repeat; background-size: contain; width: 400px; height: 290px; display: block; margin: 0 auto; } @media screen and (max-width: 375px) { body.eternalPage.changePassword section.formHeader .eternalLogo { width: 375px; height: 272px; } } @media screen and (max-width: 360px) { body.eternalPage.changePassword section.formHeader .eternalLogo { width: 360px; height: 261px; } } body.eternalPage.changePassword section.formContainer { margin: 20px auto 0 auto; } body.eternalPage.changePassword section.formContainer input { background: #000; border: 2px solid #504133; color: #ddceeb; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.changePassword section.formContainer input::placeholder { color: #5b5064; } body.eternalPage.changePassword section.formContainer .form-group.has-error input { border: 2px solid red; } body.eternalPage.changePassword section.formContainer p { color: #ddceeb; font-size: 1.3em; margin-top: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.changePassword section.formContainer p a { color: #648ad9; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.changePassword section.formContainer .be_error { color: red; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; } body.eternalPage.changePassword section.formContainer .be_error ul { list-style-type: none; margin: 0; padding: 0; } body.eternalPage.changePassword section.formContainer .be_error ul li { text-align: center; } body.eternalPage.changePassword section.formContainer.changePasswordBoxFrameSuccess { display: none; margin: 40px auto 70px auto; width: 500px; } body.eternalPage.changePassword section.formContainer.changePasswordBoxFrameSuccess p, body.eternalPage.changePassword section.formContainer.changePasswordBoxFrameSuccess span { color: #ddceeb; font-size: 2em; margin-top: 30px; text-align: center; } body.eternalPage.changePassword section.formContainer.changePasswordBoxFrameSuccess a { color: #648ad9; } body.eternalPage.changePassword section.formContainer .btn-eternal-login { margin: 20px auto; display: block; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -345px; width: 282px; height: 75px; background-color: transparent; font-size: 3em; color: #fff; line-height: 2em; } body.eternalPage.changePassword section.formContainer .btn-eternal-login:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -420px; width: 282px; height: 75px; color: #fff; } body.eternalPage.redeem { background: #030303; } body.eternalPage.redeem .eternalRedeemBanner { position: relative; min-height: 880px; } body.eternalPage.redeem .eternalRedeemBanner .sideL { position: absolute; top: 0; left: 0; width: 735px; height: 780px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/BlueHero_BanditQueen.jpg) top left no-repeat transparent; background-size: contain; } @media screen and (max-width: 425px) { body.eternalPage.redeem .eternalRedeemBanner .sideL { display: none; } } body.eternalPage.redeem .eternalRedeemBanner .sideR { position: absolute; top: 0; right: 0; width: 735px; height: 780px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/BlueHero_Jekk.jpg) top right no-repeat transparent; background-size: contain; } @media screen and (max-width: 425px) { body.eternalPage.redeem .eternalRedeemBanner .sideR { display: none; } } body.eternalPage.redeem .eternalRedeemBanner .footerFog { height: 153px; width: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/PHX_footerFog.gif) 0 0 repeat-x; position: absolute; bottom: 46px; z-index: 1; } body.eternalPage.redeem section { z-index: 10; position: relative; } body.eternalPage.redeem section.formHeader h1 { font-size: 2.5em; text-align: center; display: block; margin-top: -60px; margin-bottom: 0; color: #ddceeb; font-family: 'LinBiolinum', sans-serif; } body.eternalPage.redeem section.formHeader h1.success { color: #8cd4aa; font-size: 4em; font-family: 'Cinzel', serif; margin-top: 0; } body.eternalPage.redeem section.formHeader .eternalLogo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/PHX_LogoA.png) 0 0 no-repeat; background-size: contain; width: 400px; height: 290px; display: block; margin: 0 auto; } @media screen and (max-width: 375px) { body.eternalPage.redeem section.formHeader .eternalLogo { width: 375px; height: 272px; } } @media screen and (max-width: 360px) { body.eternalPage.redeem section.formHeader .eternalLogo { width: 360px; height: 261px; } } body.eternalPage.redeem section.formContainer { margin: 20px auto 0 auto; } @media screen and (max-width: 425px) { body.eternalPage.redeem section.formContainer { width: auto; } } body.eternalPage.redeem section.formContainer input { background: #000; box-shadow: 0 0 14px 3.96px #514ba4; text-shadow: 0 0 14px #514ba4; border: 1px solid #ddceeb; color: #ddceeb; text-align: center; font-size: 2em; width: 300px; height: 45px; margin: 50px auto; padding: 10px 5px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.redeem section.formContainer input::placeholder { color: #5b5064; } body.eternalPage.redeem section.formContainer .form-group.has-error input { border: 2px solid #ffd3d3; box-shadow: 0 0 14px 3.96px #b33636; text-shadow: 0 0 14px #b33636; } body.eternalPage.redeem section.formContainer p { color: #ddceeb; font-size: 1.3em; margin-top: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.redeem section.formContainer p a { color: #648ad9; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.redeem section.formContainer .be_error { color: red; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; } body.eternalPage.redeem section.formContainer .be_error ul { list-style-type: none; margin: 0; padding: 0; } body.eternalPage.redeem section.formContainer .be_error ul li { text-align: center; } body.eternalPage.redeem section.formContainer .btn-eternal-redeem { margin: 20px auto; display: block; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -345px; width: 282px; height: 75px; background-color: transparent; font-size: 3em; color: #fff; line-height: 2em; } body.eternalPage.redeem section.formContainer .btn-eternal-redeem:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -420px; width: 282px; height: 75px; color: #fff; } body.eternalPage.redeem section.formSuccessContainer p, body.eternalPage.redeem section.formSuccessContainer span { color: #ddceeb; font-size: 2em; margin-top: 30px; text-align: center; } body.eternalPage.redeem section.formSuccessContainer img { margin: 20px auto; display: block; } body.eternalPage.twitch-link { background: #030303; } body.eternalPage.twitch-link .eternalTwitchBanner { position: relative; min-height: 880px; } body.eternalPage.twitch-link .eternalTwitchBanner .sideL { position: absolute; top: 0; left: 0; width: 735px; height: 780px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/BlueHero_BanditQueen.jpg) top left no-repeat transparent; background-size: contain; } @media screen and (max-width: 425px) { body.eternalPage.twitch-link .eternalTwitchBanner .sideL { display: none; } } body.eternalPage.twitch-link .eternalTwitchBanner .sideR { position: absolute; top: 0; right: 0; width: 735px; height: 780px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/BlueHero_Jekk.jpg) top right no-repeat transparent; background-size: contain; } @media screen and (max-width: 425px) { body.eternalPage.twitch-link .eternalTwitchBanner .sideR { display: none; } } body.eternalPage.twitch-link .eternalTwitchBanner .footerFog { height: 153px; width: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/PHX_footerFog.gif) 0 0 repeat-x; position: absolute; bottom: 46px; z-index: 1; } body.eternalPage.twitch-link section { z-index: 10; position: relative; } body.eternalPage.twitch-link section.twitchLinkBox .explainme { margin-top: 90px; } body.eternalPage.twitch-link section.formHeader h1 { font-size: 2.5em; text-align: center; display: block; margin-top: -60px; margin-bottom: 0; color: #ddceeb; font-family: 'LinBiolinum', sans-serif; } body.eternalPage.twitch-link section.formHeader h1.success { color: #8cd4aa; font-size: 4em; font-family: 'Cinzel', serif; margin-top: 0; } body.eternalPage.twitch-link section.formHeader .eternalLogo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/PHX_LogoA.png) 0 0 no-repeat; background-size: contain; width: 400px; height: 290px; display: block; margin: 0 auto; } @media screen and (max-width: 375px) { body.eternalPage.twitch-link section.formHeader .eternalLogo { width: 375px; height: 272px; } } @media screen and (max-width: 360px) { body.eternalPage.twitch-link section.formHeader .eternalLogo { width: 360px; height: 261px; } } body.eternalPage.twitch-link section.formContainer { margin: 20px auto 0 auto; } @media screen and (max-width: 425px) { body.eternalPage.twitch-link section.formContainer { width: auto; } } body.eternalPage.twitch-link section.formContainer input { background: #000; box-shadow: 0 0 14px 3.96px #514ba4; text-shadow: 0 0 14px #514ba4; border: 1px solid #ddceeb; color: #ddceeb; text-align: center; font-size: 2em; width: 300px; height: 45px; margin: 50px auto 100px auto; padding: 10px 5px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.twitch-link section.formContainer input::placeholder { color: #5b5064; } body.eternalPage.twitch-link section.formContainer .form-group.has-error input { border: 2px solid #ffd3d3; box-shadow: 0 0 14px 3.96px #b33636; text-shadow: 0 0 14px #b33636; } body.eternalPage.twitch-link section.formContainer p { color: #ddceeb; font-size: 1.3em; margin-top: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.twitch-link section.formContainer p a { color: #648ad9; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.twitch-link section.formContainer .be_error { color: red; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; } body.eternalPage.twitch-link section.formContainer .be_error ul { list-style-type: none; margin: 0; padding: 0; } body.eternalPage.twitch-link section.formContainer .be_error ul li { text-align: center; } body.eternalPage.twitch-link section.formContainer .btn-twitch-link, body.eternalPage.twitch-link section.formContainer .btn-twitch-unlink { margin: 20px auto; display: block; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -345px; width: 282px; height: 75px; background-color: transparent; font-size: 3em; color: #fff; line-height: 2em; } body.eternalPage.twitch-link section.formContainer .btn-twitch-link:hover, body.eternalPage.twitch-link section.formContainer .btn-twitch-unlink:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -420px; width: 282px; height: 75px; color: #fff; } body.eternalPage.twitch-link section.formSuccessContainer p, body.eternalPage.twitch-link section.formSuccessContainer span { color: #ddceeb; font-size: 2em; margin-top: 30px; text-align: center; } body.eternalPage.twitch-link section.formSuccessContainer img { margin: 20px auto; display: block; } body.eternalPage.lcq-qualifier { background: #030303; } body.eternalPage.lcq-qualifier .eternalLCQBanner { position: relative; min-height: 880px; } body.eternalPage.lcq-qualifier .eternalLCQBanner .sideL { position: absolute; top: 0; left: 0; width: 735px; height: 780px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/BlueHero_BanditQueen.jpg) top left no-repeat transparent; background-size: contain; } @media screen and (max-width: 425px) { body.eternalPage.lcq-qualifier .eternalLCQBanner .sideL { display: none; } } body.eternalPage.lcq-qualifier .eternalLCQBanner .sideR { position: absolute; top: 0; right: 0; width: 735px; height: 780px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/BlueHero_Jekk.jpg) top right no-repeat transparent; background-size: contain; } @media screen and (max-width: 425px) { body.eternalPage.lcq-qualifier .eternalLCQBanner .sideR { display: none; } } body.eternalPage.lcq-qualifier .eternalLCQBanner .footerFog { height: 153px; width: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/PHX_footerFog.gif) 0 0 repeat-x; position: absolute; bottom: 46px; z-index: 1; } body.eternalPage.lcq-qualifier section { z-index: 10; position: relative; } body.eternalPage.lcq-qualifier section.twitchLinkBox .explainme { margin-top: 90px; } body.eternalPage.lcq-qualifier section.formHeader h1 { font-size: 2.5em; text-align: center; display: block; margin-top: -60px; margin-bottom: 0; color: #ddceeb; font-family: 'LinBiolinum', sans-serif; } body.eternalPage.lcq-qualifier section.formHeader h1.success { color: #8cd4aa; font-size: 4em; font-family: 'Cinzel', serif; margin-top: 0; } body.eternalPage.lcq-qualifier section.formHeader .eternalLogo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_videoheader.gif) 0 0 no-repeat; background-size: contain; width: 400px; height: 290px; display: block; margin: 0 auto; } @media screen and (max-width: 375px) { body.eternalPage.lcq-qualifier section.formHeader .eternalLogo { width: 375px; height: 272px; } } @media screen and (max-width: 360px) { body.eternalPage.lcq-qualifier section.formHeader .eternalLogo { width: 360px; height: 261px; } } body.eternalPage.lcq-qualifier section.formContainer { margin: 20px auto 0 auto; } @media screen and (max-width: 425px) { body.eternalPage.lcq-qualifier section.formContainer { width: auto; } } body.eternalPage.lcq-qualifier section.formContainer input { background: #000; box-shadow: 0 0 14px 3.96px #514ba4; text-shadow: 0 0 14px #514ba4; border: 1px solid #ddceeb; color: #ddceeb; text-align: center; font-size: 2em; width: 300px; height: 45px; margin: 50px auto 100px auto; padding: 10px 5px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.lcq-qualifier section.formContainer input::placeholder { color: #5b5064; } body.eternalPage.lcq-qualifier section.formContainer .form-group.has-error input { border: 2px solid #ffd3d3; box-shadow: 0 0 14px 3.96px #b33636; text-shadow: 0 0 14px #b33636; } body.eternalPage.lcq-qualifier section.formContainer p { color: #ddceeb; font-size: 1.3em; margin-top: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.lcq-qualifier section.formContainer p a { color: #648ad9; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.lcq-qualifier section.formContainer .be_error { color: red; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; } body.eternalPage.lcq-qualifier section.formContainer .be_error ul { list-style-type: none; margin: 0; padding: 0; } body.eternalPage.lcq-qualifier section.formContainer .be_error ul li { text-align: center; } body.eternalPage.lcq-qualifier section.formContainer .btn-twitch-link, body.eternalPage.lcq-qualifier section.formContainer .btn-twitch-unlink { margin: 20px auto; display: block; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -345px; width: 282px; height: 75px; background-color: transparent; font-size: 3em; color: #fff; line-height: 2em; } body.eternalPage.lcq-qualifier section.formContainer .btn-twitch-link:hover, body.eternalPage.lcq-qualifier section.formContainer .btn-twitch-unlink:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -420px; width: 282px; height: 75px; color: #fff; } body.eternalPage.lcq-qualifier section.formSuccessContainer p, body.eternalPage.lcq-qualifier section.formSuccessContainer span { color: #ddceeb; font-size: 2em; margin-top: 30px; text-align: center; } body.eternalPage.lcq-qualifier section.formSuccessContainer img { margin: 20px auto; display: block; } body.eternalPage.emailUnsub .eternalBanner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHXHero_JekkA.jpg) center center no-repeat; background-size: cover; min-height: 850px; } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition { position: relative; height: 100%; width: 500px; margin-top: 100px; } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .eternalLogo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/PHX_LogoA.png) center center no-repeat; width: 500px; background-size: contain; height: 293px; padding: 25px; } @media screen and (max-width: 425px) { body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .eternalLogo { background-size: 100%; } } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameForms { position: relative; width: 500px; margin: 0 auto; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) center center repeat transparent; border-radius: 5px; padding: 25px; } @media screen and (max-width: 425px) { body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameForms { width: auto; margin-top: 20px; } } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameForms input { text-align: center; } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameForms h2 { margin-top: 0; margin-bottom: 20px; } @media screen and (max-width: 425px) { body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameForms h2 { font-size: 2em; } } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameForms .form-group { position: relative; } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameForms .form-group .errorRedCircle { display: none; } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameForms .form-group .form-control { height: 42px; } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameForms .form-group.has-error .errorRedCircle { display: inline-block; width: 30px; height: 30px; background: #F02425; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; font-size: 2.2em; line-height: 1.3em; text-align: center; position: absolute; right: 6px; top: 6px; } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameForms .form-group.has-error .form-control { border: 3px solid #F02425; } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameForms .be_error { margin: 20px 0; } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameForms .be_error ul { list-style-type: none; } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameForms .be_error ul li { color: #F02425; } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameForms .be_error span { color: #fff; } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameSucess { display: none; position: relative; width: 500px; margin: 178px auto 0 auto; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) center center repeat transparent; border-radius: 5px; padding: 25px; } @media screen and (max-width: 425px) { body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameSucess { width: auto; } } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameSucess h2 { margin-top: 0; margin-bottom: 20px; color: #8AD5B6; } body.eternalPage.emailUnsub .eternalBanner .title-container .contentPosition .frameSucess .msg_ren { color: #fff; } body.eternalPage.register { background: #030303; } body.eternalPage.register .eternalRegisterBanner { position: relative; min-height: 780px; } body.eternalPage.register .eternalRegisterBanner .sideL { position: absolute; top: 0; left: 0; width: 735px; height: 780px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/BlueHero_BanditQueen.jpg) top left no-repeat transparent; background-size: contain; } @media screen and (max-width: 425px) { body.eternalPage.register .eternalRegisterBanner .sideL { display: none; } } body.eternalPage.register .eternalRegisterBanner .sideR { position: absolute; top: 0; right: 0; width: 735px; height: 780px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/BlueHero_Jekk.jpg) top right no-repeat transparent; background-size: contain; } @media screen and (max-width: 425px) { body.eternalPage.register .eternalRegisterBanner .sideR { display: none; } } body.eternalPage.register .eternalRegisterBanner .inviteReward { height: 258px; width: 100%; margin: 0 auto; display: block; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/InviteBonusStuff.png) center 0 no-repeat; position: absolute; bottom: 27px; z-index: 10; } body.eternalPage.register .eternalRegisterBanner .inviteReward p { text-align: center; font-size: 2em; line-height: 1.2em; width: 500px; margin: 200px auto 0 auto; position: relative; color: #ddceeb; } body.eternalPage.register .eternalRegisterBanner .footerFog { height: 153px; width: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/PHX_footerFog.gif) 0 0 repeat-x; position: relative; bottom: 0; z-index: 1; } body.eternalPage.register section { z-index: 10; position: relative; } body.eternalPage.register section.formHeader h1 { font-size: 2.5em; text-align: center; display: block; margin-top: -60px; width: 50%; margin: 0 auto; margin-bottom: 0; color: #ddceeb; font-family: 'LinBiolinum', sans-serif; } body.eternalPage.register section.formHeader h1.success { color: #8cd4aa; font-size: 4em; font-family: 'Cinzel', serif; margin-top: 0; } body.eternalPage.register section.formHeader h3 { padding: 0 12em; text-align: center; font-size: 18px; } @media screen and (max-width: 800px) { body.eternalPage.register section.formHeader h3 { padding: 0px; } } body.eternalPage.register section.formHeader .eternalLogo { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/PHX_LogoA.png) 0 0 no-repeat; background-size: contain; width: 400px; height: 290px; display: block; margin: 0 auto; } @media screen and (max-width: 375px) { body.eternalPage.register section.formHeader .eternalLogo { width: 375px; height: 272px; } } @media screen and (max-width: 360px) { body.eternalPage.register section.formHeader .eternalLogo { width: 360px; height: 261px; } } body.eternalPage.register section.formSuccessContainer { margin: 10px auto 70px auto; width: 500px; } body.eternalPage.register section.formSuccessContainer p { color: #ddceeb; font-size: 2em; margin-top: 30px; text-align: center; } body.eternalPage.register section.formSuccessContainer p a { color: #648ad9; } body.eternalPage.register section.formSuccessContainer .steamBtnCont { position: relative; margin: 20px auto 20px auto; } @media screen and (max-width: 425px) { body.eternalPage.register section.formSuccessContainer .steamBtnCont { display: none; } } @media screen and (max-width: 375px) { body.eternalPage.register section.formSuccessContainer .steamBtnCont { width: 375px; } } body.eternalPage.register section.formSuccessContainer .steamBtnCont a { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -475px; width: 399px; height: 127px; margin: 0 auto; display: block; } @media screen and (max-width: 375px) { body.eternalPage.register section.formSuccessContainer .steamBtnCont a { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/mobile/PHX_steamButton.png) 0 0 no-repeat; background-size: contain; width: 375px; } } body.eternalPage.register section.formSuccessContainer .steamBtnCont a:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -602px; width: 399px; height: 127px; } @media screen and (max-width: 414px) { body.eternalPage.register section.formSuccessContainer .steamBtnCont a:hover { background: none; } } body.eternalPage.register section.formSuccessContainer .appStores { margin: 0; } body.eternalPage.register section.formSuccessContainer .appStores a { display: block; margin: 0 auto 10px auto; width: 215px; } @media screen and (max-width: 425px) { body.eternalPage.register section.formSuccessContainer .appStores a { width: 100%; } } body.eternalPage.register section.formSuccessContainer .appStores a .apple { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0px 0px; width: 215px; height: 63px; margin: 0 auto; display: block; } @media screen and (max-width: 425px) { body.eternalPage.register section.formSuccessContainer .appStores a .apple { margin: 0 auto; } } body.eternalPage.register section.formSuccessContainer .appStores a .apple:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0px -189px; width: 215px; height: 63px; } body.eternalPage.register section.formSuccessContainer .appStores a .google { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0px -63px; width: 215px; height: 63px; } @media screen and (max-width: 425px) { body.eternalPage.register section.formSuccessContainer .appStores a .google { margin: 0 auto; } } body.eternalPage.register section.formSuccessContainer .appStores a .google:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position: 0px -126px; width: 215px; height: 63px; } body.eternalPage.register section.formContainer { margin: 20px auto 120px auto; } body.eternalPage.register section.formContainer input { background: #000; border: 2px solid #504133; color: #ddceeb; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.register section.formContainer input::placeholder { color: #5b5064; } body.eternalPage.register section.formContainer .form-group.has-error input { border: 2px solid red; } body.eternalPage.register section.formContainer a.btn-eternal-lnk { color: #ddceeb; font-family: 'LinBiolinum', sans-serif; font-size: 1.5em; text-decoration: underline; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } body.eternalPage.register section.formContainer a.btn-eternal-lnk:hover { color: #fff; } body.eternalPage.register section.formContainer p { color: #ddceeb; font-size: 1.3em; margin-top: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.register section.formContainer p a { color: #648ad9; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.register section.formContainer .be_error { color: red; font-size: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.eternalPage.register section.formContainer .be_error ul { list-style-type: none; margin: 0; padding: 0; } body.eternalPage.register section.formContainer .be_error ul li { text-align: center; } body.eternalPage.register section.formContainer .btn-eternal-register, body.eternalPage.register section.formContainer .btn-eternal-login { margin: 20px auto; display: block; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -345px; width: 282px; height: 75px; background-color: transparent; font-size: 3em; color: #fff; line-height: 2em; } body.eternalPage.register section.formContainer .btn-eternal-register:hover, body.eternalPage.register section.formContainer .btn-eternal-login:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -420px; width: 282px; height: 75px; color: #fff; } body.eternalPage.hub .eternalHubBanner { position: relative; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/PHXhubHeaderTile.png) 0 0 repeat-x; } body.eternalPage.hub .eternalHubBanner .hubHeader .socialHubIcons { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/SocialIconHeaderFramer.jpg) 0 0 no-repeat; height: 52px; width: 138px; position: absolute; right: 0; margin-right: -227px; top: 40px; } body.eternalPage.hub .eternalHubBanner .hubHeader .socialHubIcons .socialIcons { position: relative; margin: 0; height: 52px; } body.eternalPage.hub .eternalHubBanner .hubHeader .socialHubIcons .socialIcons .fb { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_SocialIcon_Facebook.png) 0 0 no-repeat; position: absolute; width: 29px; height: 27px; top: 13px; left: 13px; } body.eternalPage.hub .eternalHubBanner .hubHeader .socialHubIcons .socialIcons .fb:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_SocialIcon_Facebook_HOVER.png) 0 0 no-repeat; } body.eternalPage.hub .eternalHubBanner .hubHeader .socialHubIcons .socialIcons .tw { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_SocialIcon_Twitter.png) 0 0 no-repeat; position: absolute; width: 34px; height: 26px; top: 13px; left: 50px; } body.eternalPage.hub .eternalHubBanner .hubHeader .socialHubIcons .socialIcons .tw:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_SocialIcon_Twitter_HOVER.png) 0 0 no-repeat; } body.eternalPage.hub .eternalHubBanner .hubHeader .videoHub { min-height: 200px; width: 644px; margin: 0 auto; position: relative; } body.eternalPage.hub .eternalHubBanner .hubHeader h1 { font-size: 4em; color: #d79e54; margin-top: 0; text-align: center; } body.eternalPage.hub main { position: relative; top: 0; margin-bottom: 0; } body.eternalPage.hub main.modules .col-sm-9, body.eternalPage.hub main.modules .col-sm-8, body.eternalPage.hub main.modules .col-sm-4, body.eternalPage.hub main.modules .col-sm-3, body.eternalPage.hub main.modules .col-sm-6 { padding: 0 3px; } body.eternalPage.hub main.modules .container { z-index: 2; position: relative; } body.eternalPage.hub main.modules .bannerProduct { position: relative; overflow: hidden; height: 183px; padding: 0; margin-right: 3px; } body.eternalPage.hub main.modules .bannerProduct .bottomOverlay { overflow: auto; width: 100%; position: absolute; bottom: 0; padding: 0 3px 0 10px; } body.eternalPage.hub main.modules .bannerProduct .bottomOverlay h2 { float: left; margin-top: 10px; font-size: 2.05em; position: relative; width: 40%; } body.eternalPage.hub main.modules .bannerProduct .bottomOverlay h2 span { font-size: 0.6em; position: absolute; right: 12px; top: 17px; } body.eternalPage.hub main.modules .bannerProduct .bottomOverlay .btn-hub-release { float: right; background: #fff; border-radius: 6px; font-size: 1.5em; color: #2c1b0d; margin-top: 4px; border: 1px solid #e3a360; background: #d59857; background: -moz-linear-gradient(top, #d59857 0%, #af6027 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #d59857), color-stop(100%, #af6027)); background: -webkit-linear-gradient(top, #d59857 0%, #af6027 100%); background: -o-linear-gradient(top, #d59857 0%, #af6027 100%); background: -ms-linear-gradient(top, #d59857 0%, #af6027 100%); background: linear-gradient(to bottom, #d59857 0%, #af6027 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d59857', endColorstr='#af6027', GradientType=0 ); } body.eternalPage.hub main.modules .bannerProduct .bottomOverlay .btn-hub-release i.ic_deck { width: 24px; height: 19px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/themeDeckButtonIcon.png) 0 4px no-repeat; padding: 5px 14px 5px 10px; margin-left: 8px; } body.eternalPage.hub main.modules .bannerProduct .bottomOverlay .btn-hub-release:hover { color: #000; } body.eternalPage.hub main.modules .bannerProduct .overlay { z-index: 2; position: absolute; bottom: 0; width: 100%; } body.eternalPage.hub main.modules .bannerProduct .overlay h2 { margin: 0; height: 43px; padding-top: 12px; padding-left: 7px; width: 100%; } body.eternalPage.hub main.modules .bannerProduct a { color: #fff; text-decoration: none; } body.eternalPage.hub main.modules .bannerProduct a .topFeature { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 1s cubic-bezier(0, 0.5, 0.5, 1); -moz-transition: all 1s cubic-bezier(0, 0.5, 0.5, 1); -ms-transition: all 1s cubic-bezier(0, 0.5, 0.5, 1); -webkit-transition: all 1s cubic-bezier(0, 0.5, 0.5, 1); -o-transition: all 1s cubic-bezier(0, 0.5, 0.5, 1); } body.eternalPage.hub main.modules .bannerProduct a .topFeature:hover { transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); / IE 9 / -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.05, M12=0, M21=0, M22=1.05, SizingMethod='auto expand')"; / IE8 / filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.05, M12=0, M21=0, M22=1.05, SizingMethod='auto expand'); / IE6 and 7 / } body.eternalPage.hub main.modules .overlay { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) 0 0 repeat; } body.eternalPage.hub main.modules .topFeature { clear: both; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/newsBannerImage_10042017.png) 0 0 no-repeat; background-size: cover; height: 183px; position: relative; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.45); } body.eternalPage.hub main.modules .eventTimersTicker { position: relative; overflow: hidden; height: 183px; padding: 0; width: 289px; } body.eternalPage.hub main.modules .eventTimers { height: 183px; } body.eternalPage.hub main.modules .eventTimers .eventTimersImg { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/seasonTimerBackground_textured.png) 0 0 no-repeat; background-size: cover; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.45); height: 183px; transition: all 1s ease; -moz-transition: all 1s cubic-bezier(0, 0.5, 0.5, 1); -ms-transition: all 1s cubic-bezier(0, 0.5, 0.5, 1); -webkit-transition: all 1s cubic-bezier(0, 0.5, 0.5, 1); -o-transition: all 1s cubic-bezier(0, 0.5, 0.5, 1); } body.eternalPage.hub main.modules .eventTimers .eventTimersCont { position: absolute; bottom: 0; width: 100%; z-index: 10; } body.eternalPage.hub main.modules .eventTimers .eventTimersCont .nextEvent { position: relative; clear: both; overflow: auto; padding: 6px 5px 7px 5px; margin-bottom: 2px; } body.eternalPage.hub main.modules .eventTimers .eventTimersCont .nextEvent:last-child { margin-bottom: 0; } body.eternalPage.hub main.modules .eventTimers .eventTimersCont .nextEvent span.title { float: left; font-size: 1.35em; line-height: 2em; font-weight: 600; padding-left: 10px; padding-top: 2px; } body.eternalPage.hub main.modules .eventTimers .eventTimersCont .nextEvent span.counter { float: right; font-size: 1.7em; font-weight: 100; padding-right: 10px; line-height: 1.7em; } body.eternalPage.hub main.modules .panelSocial { border: 3px solid #413D54; margin-top: 6px; } body.eternalPage.hub main.modules .panelSocial .pheader h3 { margin-top: 0; } body.eternalPage.hub main.modules .panelSocial.reddit .pheader { height: 86px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_redditBanner.jpg) top left no-repeat; background-size: cover; } body.eternalPage.hub main.modules .panelSocial.reddit .pheader a { color: #fff; text-decoration: none; } body.eternalPage.hub main.modules .panelSocial.reddit .pheader h3 { padding: 31px 0 31px 149px; } body.eternalPage.hub main.modules .panelSocial.reddit .panelSocialBody { padding: 10px 0 10px 0; min-height: 418px; } body.eternalPage.hub main.modules .panelSocial.reddit .rembeddit { color: #fff; } body.eternalPage.hub main.modules .panelSocial.reddit .rembeddit a { color: #fff; text-decoration: none; } body.eternalPage.hub main.modules .panelSocial.reddit .rembeddit li { padding: 5px 10px; list-style-type: none; clear: both; overflow: auto; } body.eternalPage.hub main.modules .panelSocial.reddit .rembeddit li:hover { background: #1C1E2C; } body.eternalPage.hub main.modules .panelSocial.reddit .rembeddit li img { width: 131px; height: 75px; -webkit-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.75); } body.eternalPage.hub main.modules .panelSocial.reddit .rembeddit li h3 { font-size: 1.5em; font-weight: 200; font-style: normal; font-family: "Open Sans", sans-serif; margin: 10px 0 0 150px; } body.eternalPage.hub main.modules .panelSocial.reddit .rembeddit li h3:hover { color: #31708f; } body.eternalPage.hub main.modules .panelSocial.reddit .rembeddit li p { margin: 10px 0 0 150px; } body.eternalPage.hub main.modules .panelSocial.reddit .rembeddit li p small { color: #31708f; padding-top: 5px; font-size: 1.5em; } body.eternalPage.hub main.modules .panelSocial.twitch .pheader { height: 86px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_twitchBanner.jpg) top left no-repeat; background-size: cover; } body.eternalPage.hub main.modules .panelSocial.twitch .pheader a { color: #fff; text-decoration: none; } body.eternalPage.hub main.modules .panelSocial.twitch .pheader h3 { padding: 31px 0 31px 149px; } body.eternalPage.hub main.modules .panelSocial.twitch .panelSocialBody { padding: 0; } body.eternalPage.hub main.modules .panelSocial.youtube .pheader { height: 86px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_youtubeBanner.jpg) top left no-repeat; background-size: cover; } body.eternalPage.hub main.modules .panelSocial.youtube .pheader a { color: #fff; text-decoration: none; } body.eternalPage.hub main.modules .panelSocial.youtube .pheader h3 { padding: 31px 0 31px 149px; } body.eternalPage.hub main.modules .panelSocial.youtube .panelSocialBody { padding: 0; } body.eternalPage.hub main.modules .panelSocial.dwdnews .pheader { height: 86px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_recentNews.jpg) top left no-repeat; background-size: cover; } body.eternalPage.hub main.modules .panelSocial.dwdnews .pheader a { color: #fff; text-decoration: none; } body.eternalPage.hub main.modules .panelSocial.dwdnews .pheader h3 { padding: 31px 0 31px 149px; } body.eternalPage.hub main.modules .panelSocial.dwdnews .panelSocialBody { padding: 10px 0 10px 0; min-height: 390px; } body.eternalPage.hub main.modules .panelSocial.dwdnews .panelSocialBody ul { list-style-type: none; padding-left: 0; margin-bottom: 0; color: #fff; } body.eternalPage.hub main.modules .panelSocial.dwdnews .panelSocialBody ul li { padding: 5px 10px; list-style-type: none; clear: both; overflow: auto; } body.eternalPage.hub main.modules .panelSocial.dwdnews .panelSocialBody ul li:hover { background: #1C1E2C; } body.eternalPage.hub main.modules .panelSocial.dwdnews .panelSocialBody ul li a { color: #fff; text-decoration: none; } body.eternalPage.hub main.modules .panelSocial.dwdnews .panelSocialBody ul li img { width: 131px; height: 75px; -webkit-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.75); } body.eternalPage.hub main.modules .panelSocial.dwdnews .panelSocialBody ul li h3 { font-size: 1.5em; font-weight: 200; font-style: normal; font-family: "Open Sans", sans-serif; margin: 10px 0 0 150px; } body.eternalPage.hub main.modules .panelSocial.dwdnews .panelSocialBody ul li h3:hover { color: #31708f; } body.eternalPage.hub main.modules .panelSocial.dwdnews .panelSocialBody ul li p { margin: 10px 0 0 150px; } body.eternalPage.hub main.modules .panelSocial.dwdnews .panelSocialBody ul li p small { color: #31708f; padding-top: 5px; font-size: 1.5em; } body.eternalPage.hub main.modules .lineDivider { margin: 50px 0 25px 0; height: 5px; width: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/goldenPinlineDivider.png) center 0 no-repeat; } body.eternalPage.hub main.modules .topPlayersTable { margin-bottom: 55px; } body.eternalPage.hub main.modules .topPlayersTable h3 { color: #d79e54; text-align: left; } body.eternalPage.hub main.modules .topPlayersTable h3.fntCinzel { font-size: 4em; text-align: center; } body.eternalPage.hub main.modules .topPlayersTable table.leaderboard { border: 1px solid #4d3d2b; font-size: 1.4em; margin-bottom: 20px; width: 100%; } body.eternalPage.hub main.modules .topPlayersTable table.leaderboard tbody tr { background: #040306; } body.eternalPage.hub main.modules .topPlayersTable table.leaderboard tbody tr:nth-child(2n+1) { background: #110f18; } body.eternalPage.hub main.modules .topPlayersTable table.leaderboard tbody tr:nth-child(1) { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramer_Fill.jpg) top left repeat-x; } body.eternalPage.hub main.modules .topPlayersTable table.leaderboard tbody tr:nth-child(1) td { height: 54px; } body.eternalPage.hub main.modules .topPlayersTable table.leaderboard tbody tr:nth-child(1) td:nth-child(1) { width: 86px; font-size: 2em; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramerL.jpg) top left no-repeat; } body.eternalPage.hub main.modules .topPlayersTable table.leaderboard tbody tr:nth-child(1) td:nth-child(2) { text-align: left; font-size: 1.5em; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramerR.jpg) top right no-repeat; } body.eternalPage.hub main.modules .topPlayersTable table.leaderboard tbody tr:nth-child(1) td:nth-child(2) em { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/MasterBadge_Small.png) center center no-repeat; background-size: 100%; width: 69px; height: 32px; vertical-align: bottom; margin-left: 0; margin-right: 9px; } body.eternalPage.hub main.modules .topPlayersTable table.leaderboard tbody tr td { color: #9f8c71; font-family: 'Galdeano', sans-serif; font-size: 1.25em; text-align: center; padding: 4px 31px; } body.eternalPage.hub main.modules .topPlayersTable table.leaderboard tbody tr td:nth-child(2) { color: #fff; font-family: 'Galdeano', sans-serif; text-align: left; padding: 0; } body.eternalPage.hub main.modules .topPlayersTable table.leaderboard tbody tr td:nth-child(2) em { width: 59px; height: 28px; display: inline-block; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/MasterBadge_Small.png) top left no-repeat; vertical-align: bottom; margin-right: 17px; margin-left: 7px; } body.eternalPage.hub main .footerFog { height: 153px; width: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/PHX_footerFog.gif) 0 0 repeat-x; position: absolute; bottom: 0; z-index: 1; } body.eternalPage.adminhub .eternalHubBanner { position: relative; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/PHXhubHeaderTile.png) 0 0 repeat-x; } body.eternalPage.adminhub .eternalHubBanner .hubHeader .videoHub { min-height: 200px; width: 644px; margin: 0 auto; } body.eternalPage.adminhub .eternalHubBanner .hubHeader h1 { font-size: 4em; color: #d79e54; margin-top: 0; text-align: center; } body.eternalPage.adminhub main { position: relative; top: 0; margin-bottom: 0; } body.eternalPage.adminhub main.modules .col-sm-9, body.eternalPage.adminhub main.modules .col-sm-8, body.eternalPage.adminhub main.modules .col-sm-4, body.eternalPage.adminhub main.modules .col-sm-3, body.eternalPage.adminhub main.modules .col-sm-6 { padding: 0 3px; } body.eternalPage.adminhub main.modules .container { z-index: 2; position: relative; } body.eternalPage.adminhub main.modules .overlay { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/black_66Alpha.png) 0 0 repeat; } body.eternalPage.adminhub main.modules .topFeature { clear: both; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/newsBannerImage.png) 0 0 no-repeat; background-size: cover; height: 183px; position: relative; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.45); } body.eternalPage.adminhub main.modules .topFeature .bottomOverlay { overflow: auto; width: 100%; position: absolute; bottom: 0; padding: 0 3px 0 10px; } body.eternalPage.adminhub main.modules .topFeature .bottomOverlay h2 { float: left; margin-top: 10px; font-size: 2.05em; position: relative; width: 40%; } body.eternalPage.adminhub main.modules .topFeature .bottomOverlay h2 span { font-size: 0.6em; position: absolute; right: 0; top: 4px; } body.eternalPage.adminhub main.modules .topFeature .bottomOverlay .btn-hub-release { float: right; background: #fff; border-radius: 6px; font-size: 1.5em; color: #2c1b0d; margin-top: 4px; border: 1px solid #e3a360; background: #d59857; background: -moz-linear-gradient(top, #d59857 0%, #af6027 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #d59857), color-stop(100%, #af6027)); background: -webkit-linear-gradient(top, #d59857 0%, #af6027 100%); background: -o-linear-gradient(top, #d59857 0%, #af6027 100%); background: -ms-linear-gradient(top, #d59857 0%, #af6027 100%); background: linear-gradient(to bottom, #d59857 0%, #af6027 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d59857', endColorstr='#af6027', GradientType=0 ); } body.eternalPage.adminhub main.modules .topFeature .bottomOverlay .btn-hub-release i.ic_deck { width: 24px; height: 19px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/themeDeckButtonIcon.png) 0 4px no-repeat; padding: 5px 14px 5px 10px; margin-left: 8px; } body.eternalPage.adminhub main.modules .topFeature .bottomOverlay .btn-hub-release:hover { color: #000; } body.eternalPage.adminhub main.modules .eventTimers { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/seasonTimerBackground.png) 0 0 no-repeat; background-size: cover; height: 183px; padding-top: 0px; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.45); } body.eternalPage.adminhub main.modules .eventTimers .nextEvent { position: relative; clear: both; overflow: auto; padding: 6px 5px 7px 5px; margin-bottom: 2px; } body.eternalPage.adminhub main.modules .eventTimers .nextEvent span.title { float: left; font-size: 1.35em; line-height: 2em; font-weight: 600; } body.eternalPage.adminhub main.modules .eventTimers .nextEvent span.counter { float: right; font-size: 2em; font-weight: 100; } body.eternalPage.adminhub main.modules .panelSocial { border: 3px solid #413D54; margin-top: 6px; } body.eternalPage.adminhub main.modules .panelSocial .pheader h3 { margin-top: 0; } body.eternalPage.adminhub main.modules .panelSocial.reddit .pheader { height: 86px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_redditBanner.jpg) top left no-repeat; background-size: cover; } body.eternalPage.adminhub main.modules .panelSocial.reddit .pheader h3 { padding: 31px 0 0 149px; } body.eternalPage.adminhub main.modules .panelSocial.reddit .panelSocialBody { padding: 5px; } body.eternalPage.adminhub main.modules .panelSocial.reddit .rembeddit { color: #fff; } body.eternalPage.adminhub main.modules .panelSocial.reddit .rembeddit a { color: #fff; text-decoration: none; } body.eternalPage.adminhub main.modules .panelSocial.reddit .rembeddit li { padding: 10px 5px; } body.eternalPage.adminhub main.modules .panelSocial.reddit .rembeddit li:hover { background: #1C1E2C; } body.eternalPage.adminhub main.modules .panelSocial.reddit .rembeddit li h3 { font-size: 1.5em; font-weight: 200; font-style: normal; font-family: "Open Sans", sans-serif; } body.eternalPage.adminhub main.modules .panelSocial.reddit .rembeddit li h3:hover { color: #31708f; } body.eternalPage.adminhub main.modules .panelSocial.reddit .rembeddit li small { color: #31708f; padding-top: 5px; font-size: 1.5em; } body.eternalPage.adminhub main.modules .panelSocial.twitch .pheader { height: 86px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_twitchBanner.jpg) top left no-repeat; background-size: cover; } body.eternalPage.adminhub main.modules .panelSocial.twitch .pheader h3 { padding: 31px 0 0 149px; } body.eternalPage.adminhub main.modules .panelSocial.twitch .panelSocialBody { padding: 5px; } body.eternalPage.adminhub main.modules .panelSocial.youtube .pheader { height: 86px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_youtubeBanner.jpg) top left no-repeat; background-size: cover; } body.eternalPage.adminhub main.modules .panelSocial.youtube .pheader h3 { padding: 31px 0 0 149px; } body.eternalPage.adminhub main.modules .panelSocial.youtube .panelSocialBody { padding: 5px; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .pheader { height: 46px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_newsBanner.jpg) top left no-repeat; background-size: cover; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .pheader h3 { padding: 11px 0 0 10px; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody { padding: 0; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul { list-style-type: none; padding-left: 0; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li { border-bottom: 1px solid slategray; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li:hover .bp-content { color: #abdeff; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li a { text-decoration: none; color: #fff; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li a:hover { text-decoration: none; color: #fff; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li .bp-content { background-color: #000; position: relative; height: 150px; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li .bp-content .bpImg { height: 150px; position: relative; background-position: top left !important; background-size: contain !important; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li .bp-content .bpImg.wm-legends .bp-wm { display: none; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li .bp-content .bpImg.wm-eternal .bp-wm { display: none; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li .bp-content .bpImg.wm-clank .bp-wm { display: none; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li .bp-content .bpImg.wm-lanterns .bp-wm { display: none; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li .bp-content .bpImg.wm-hangryhords .bp-wm { display: none; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li .bp-content .bpImg.wm-lotus .bp-wm { display: none; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li .bp-content .bpImg.wm-dwd .bp-wm { display: none; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li .bp-content .bpImg .bp-title { margin: 0; width: 311px; top: 0; position: absolute; right: 0; text-align: center; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li .bp-content .bpImg .bp-title h2 { font-size: 1.6em; font-weight: 600; margin: 0; padding: 10px; vertical-align: middle; height: auto; width: 100%; font-family: "Open Sans", sans-serif; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li .bp-content p { padding: 15px 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; position: absolute; top: 41px; width: 311px; right: 0; text-align: center; } body.eternalPage.adminhub main.modules .panelSocial.dwdnews .panelSocialBody ul li .bp-content small { font-style: italic; padding: 0 10px; font-size: 1.2em; font-family: "Open Sans", sans-serif; position: absolute; bottom: 13px; right: 0; width: 311px; text-align: center; } body.eternalPage.adminhub main.modules .lineDivider { margin: 50px 0 25px 0; height: 5px; width: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/goldenPinlineDivider.png) center 0 no-repeat; } body.eternalPage.adminhub main.modules .topPlayersTable { margin-bottom: 55px; } body.eternalPage.adminhub main.modules .topPlayersTable h3 { color: #d79e54; text-align: left; } body.eternalPage.adminhub main.modules .topPlayersTable h3.fntCinzel { font-size: 4em; text-align: center; } body.eternalPage.adminhub main.modules .topPlayersTable table.leaderboard { border: 1px solid #4d3d2b; font-size: 1.4em; margin-bottom: 20px; width: 100%; } body.eternalPage.adminhub main.modules .topPlayersTable table.leaderboard tbody tr { background: #040306; } body.eternalPage.adminhub main.modules .topPlayersTable table.leaderboard tbody tr:nth-child(2n+1) { background: #110f18; } body.eternalPage.adminhub main.modules .topPlayersTable table.leaderboard tbody tr:nth-child(1) { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramer_Fill.jpg) top left repeat-x; } body.eternalPage.adminhub main.modules .topPlayersTable table.leaderboard tbody tr:nth-child(1) td { height: 54px; } body.eternalPage.adminhub main.modules .topPlayersTable table.leaderboard tbody tr:nth-child(1) td:nth-child(1) { width: 86px; font-size: 2em; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramerL.jpg) top left no-repeat; } body.eternalPage.adminhub main.modules .topPlayersTable table.leaderboard tbody tr:nth-child(1) td:nth-child(2) { text-align: left; font-size: 1.5em; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/LeaderFramerR.jpg) top right no-repeat; } body.eternalPage.adminhub main.modules .topPlayersTable table.leaderboard tbody tr:nth-child(1) td:nth-child(2) em { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/MasterBadge_Small.png) center center no-repeat; background-size: 100%; width: 69px; height: 32px; vertical-align: bottom; margin-left: 0; margin-right: 9px; } body.eternalPage.adminhub main.modules .topPlayersTable table.leaderboard tbody tr td { color: #9f8c71; font-family: 'Galdeano', sans-serif; font-size: 1.25em; text-align: center; padding: 4px 31px; } body.eternalPage.adminhub main.modules .topPlayersTable table.leaderboard tbody tr td:nth-child(2) { color: #fff; font-family: 'Galdeano', sans-serif; text-align: left; padding: 0; } body.eternalPage.adminhub main.modules .topPlayersTable table.leaderboard tbody tr td:nth-child(2) em { width: 59px; height: 28px; display: inline-block; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/leaderboards/MasterBadge_Small.png) top left no-repeat; vertical-align: bottom; margin-right: 17px; margin-left: 7px; } body.eternalPage.adminhub main .footerFog { height: 153px; width: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/register/PHX_footerFog.gif) 0 0 repeat-x; position: absolute; bottom: 0; z-index: 1; } body.eternalPage.unlock main { min-height: 600px; } body.eternalPage.unlock main section { margin-top: 50px; } body.eternalPage.unlock main section p { font-size: 2em; } body.eula main section.eula { padding: 50px 0; } body.eula main section.eula h2.fntCinzel { font-size: 42px; color: #d79e54; } body.eula main section.eula p { font-size: 20px; } body.eula main section.eula li { font-size: 20px; } body.faq div.eternalHubBanner, body.wallpaper div.eternalHubBanner, body.deckBlog div.eternalHubBanner { position: relative; height: 200px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/PHXhubHeaderTile.png) 0 0 repeat-x; } @media screen and (max-width: 414px) { body.faq div.eternalHubBanner, body.wallpaper div.eternalHubBanner, body.deckBlog div.eternalHubBanner { background: none; height: 100px; } } body.faq div.eternalHubBanner .hubHeader, body.wallpaper div.eternalHubBanner .hubHeader, body.deckBlog div.eternalHubBanner .hubHeader { position: relative; height: 200px; padding: 0; } body.faq div.eternalHubBanner .hubHeader .socialHubIcons, body.wallpaper div.eternalHubBanner .hubHeader .socialHubIcons, body.deckBlog div.eternalHubBanner .hubHeader .socialHubIcons { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/SocialIconHeaderFramer.jpg) 0 0 no-repeat; height: 52px; width: 138px; position: absolute; right: 0; margin-right: -227px; top: 40px; } @media screen and (max-width: 1024px) { body.faq div.eternalHubBanner .hubHeader .socialHubIcons, body.wallpaper div.eternalHubBanner .hubHeader .socialHubIcons, body.deckBlog div.eternalHubBanner .hubHeader .socialHubIcons { margin-right: -153px; } } @media screen and (max-width: 768px) { body.faq div.eternalHubBanner .hubHeader .socialHubIcons, body.wallpaper div.eternalHubBanner .hubHeader .socialHubIcons, body.deckBlog div.eternalHubBanner .hubHeader .socialHubIcons { margin-right: -58px; } } @media screen and (max-width: 736px) { body.faq div.eternalHubBanner .hubHeader .socialHubIcons, body.wallpaper div.eternalHubBanner .hubHeader .socialHubIcons, body.deckBlog div.eternalHubBanner .hubHeader .socialHubIcons { display: none; } } body.faq div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons, body.wallpaper div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons, body.deckBlog div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons { position: relative; margin: 0; height: 52px; } body.faq div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons .fb, body.wallpaper div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons .fb, body.deckBlog div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons .fb { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_SocialIcon_Facebook.png) 0 0 no-repeat; position: absolute; width: 29px; height: 27px; top: 13px; left: 13px; } body.faq div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons .fb:hover, body.wallpaper div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons .fb:hover, body.deckBlog div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons .fb:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_SocialIcon_Facebook_HOVER.png) 0 0 no-repeat; } body.faq div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons .tw, body.wallpaper div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons .tw, body.deckBlog div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons .tw { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_SocialIcon_Twitter.png) 0 0 no-repeat; position: absolute; width: 34px; height: 26px; top: 13px; left: 50px; } body.faq div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons .tw:hover, body.wallpaper div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons .tw:hover, body.deckBlog div.eternalHubBanner .hubHeader .socialHubIcons .socialIcons .tw:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/hub/CH_SocialIcon_Twitter_HOVER.png) 0 0 no-repeat; } body.faq div.eternalHubBanner .hubHeader .videoHub, body.wallpaper div.eternalHubBanner .hubHeader .videoHub, body.deckBlog div.eternalHubBanner .hubHeader .videoHub { height: 200px; width: 644px; margin: 0 auto; position: relative; } @media screen and (max-width: 414px) { body.faq div.eternalHubBanner .hubHeader .videoHub, body.wallpaper div.eternalHubBanner .hubHeader .videoHub, body.deckBlog div.eternalHubBanner .hubHeader .videoHub { width: auto; height: auto; } } @media screen and (max-width: 414px) { body.faq div.eternalHubBanner .hubHeader .videoHub img, body.wallpaper div.eternalHubBanner .hubHeader .videoHub img, body.deckBlog div.eternalHubBanner .hubHeader .videoHub img { width: 100%; } } body.faq div.eternalBannerSimple, body.wallpaper div.eternalBannerSimple, body.deckBlog div.eternalBannerSimple { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/Scene_background.png) bottom center repeat; background-size: cover; } body.faq div.eternalBannerSimple img, body.wallpaper div.eternalBannerSimple img, body.deckBlog div.eternalBannerSimple img { margin: 20px auto; display: block; } body.faq div.eternalBannerSimple h1.fntCinzel, body.wallpaper div.eternalBannerSimple h1.fntCinzel, body.deckBlog div.eternalBannerSimple h1.fntCinzel { margin-top: 10px !important; } @media screen and (max-width: 360px) { body.faq div.eternalBannerSimple h1.fntCinzel, body.wallpaper div.eternalBannerSimple h1.fntCinzel, body.deckBlog div.eternalBannerSimple h1.fntCinzel { margin: 10px 10px 50px 10px; font-size: 4em; } } body.faq main, body.wallpaper main, body.deckBlog main { top: 0; margin-bottom: 0; } body.faq main section.search, body.wallpaper main section.search, body.deckBlog main section.search { position: relative; margin: 20px auto 20px auto; } body.faq main section.search h1, body.wallpaper main section.search h1, body.deckBlog main section.search h1 { margin: 20px 0 30px 0; text-align: center; } @media screen and (max-width: 414px) { body.faq main section.search h1, body.wallpaper main section.search h1, body.deckBlog main section.search h1 { font-size: 2em; } } body.faq main section.search .nothing, body.wallpaper main section.search .nothing, body.deckBlog main section.search .nothing { display: none; } body.faq main section.search p, body.wallpaper main section.search p, body.deckBlog main section.search p { font-size: 2em; color: #778899; } @media screen and (max-width: 360px) { body.faq main section.search p, body.wallpaper main section.search p, body.deckBlog main section.search p { font-size: 1.8em; } } body.faq main section.search input, body.wallpaper main section.search input, body.deckBlog main section.search input { padding: 30px; font-size: 2em; background: #000; border: 2px solid #504133; color: #778899; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.faq main section.search input::placeholder, body.wallpaper main section.search input::placeholder, body.deckBlog main section.search input::placeholder { color: #778899; opacity: 0.5; } body.faq main section.search .form-group.has-error input, body.wallpaper main section.search .form-group.has-error input, body.deckBlog main section.search .form-group.has-error input { border: 2px solid red; } body.faq main section.faq, body.wallpaper main section.faq, body.deckBlog main section.faq { position: relative; padding: 10px 0 70px 0; } body.faq main section.faq h1.fntCinzel, body.wallpaper main section.faq h1.fntCinzel, body.deckBlog main section.faq h1.fntCinzel { font-size: 4em; color: #d79e54; } @media screen and (max-width: 414px) { body.faq main section.faq h1.fntCinzel, body.wallpaper main section.faq h1.fntCinzel, body.deckBlog main section.faq h1.fntCinzel { text-align: center; font-size: 2em; } } body.faq main section.faq mark, body.wallpaper main section.faq mark, body.deckBlog main section.faq mark { background: #232743; border-radius: 2px; color: #778899; } body.faq main section.faq .gameplayRules h2, body.wallpaper main section.faq .gameplayRules h2, body.deckBlog main section.faq .gameplayRules h2 { margin-top: 0; color: #d79e54; } @media screen and (max-width: 414px) { body.faq main section.faq .gameplayRules h2, body.wallpaper main section.faq .gameplayRules h2, body.deckBlog main section.faq .gameplayRules h2 { font-size: 2.5em; text-align: center; } } body.faq main section.faq .gameplayModes h2, body.wallpaper main section.faq .gameplayModes h2, body.deckBlog main section.faq .gameplayModes h2 { color: #d79e54; } @media screen and (max-width: 414px) { body.faq main section.faq .gameplayModes h2, body.wallpaper main section.faq .gameplayModes h2, body.deckBlog main section.faq .gameplayModes h2 { margin-top: 50px; font-size: 2.5em; text-align: center; } } body.faq main section.faq .collections h2, body.wallpaper main section.faq .collections h2, body.deckBlog main section.faq .collections h2 { color: #d79e54; } @media screen and (max-width: 414px) { body.faq main section.faq .collections h2, body.wallpaper main section.faq .collections h2, body.deckBlog main section.faq .collections h2 { margin-top: 50px; font-size: 2.5em; text-align: center; } } body.faq main section.faq .technicalConcerns h2, body.wallpaper main section.faq .technicalConcerns h2, body.deckBlog main section.faq .technicalConcerns h2 { color: #d79e54; } @media screen and (max-width: 414px) { body.faq main section.faq .technicalConcerns h2, body.wallpaper main section.faq .technicalConcerns h2, body.deckBlog main section.faq .technicalConcerns h2 { margin-top: 50px; font-size: 2.5em; text-align: center; } } body.faq main section.faq .twitchExtension h2, body.wallpaper main section.faq .twitchExtension h2, body.deckBlog main section.faq .twitchExtension h2 { color: #d79e54; } @media screen and (max-width: 414px) { body.faq main section.faq .twitchExtension h2, body.wallpaper main section.faq .twitchExtension h2, body.deckBlog main section.faq .twitchExtension h2 { margin-top: 50px; font-size: 2.5em; text-align: center; } } body.faq main section.faq .questions, body.wallpaper main section.faq .questions, body.deckBlog main section.faq .questions { padding: 0; } body.faq main section.faq .questions > p, body.faq main section.faq .questions > ul, body.faq main section.faq .questions > ol, body.faq main section.faq .questions > blockquote, body.wallpaper main section.faq .questions > p, body.wallpaper main section.faq .questions > ul, body.wallpaper main section.faq .questions > ol, body.wallpaper main section.faq .questions > blockquote, body.deckBlog main section.faq .questions > p, body.deckBlog main section.faq .questions > ul, body.deckBlog main section.faq .questions > ol, body.deckBlog main section.faq .questions > blockquote { display: none; } body.faq main section.faq .questions h3, body.wallpaper main section.faq .questions h3, body.deckBlog main section.faq .questions h3 { font-size: 2.5em; cursor: pointer; user-select: none; } @media screen and (max-width: 414px) { body.faq main section.faq .questions h3, body.wallpaper main section.faq .questions h3, body.deckBlog main section.faq .questions h3 { font-size: 2em; } } body.faq main section.faq .questions h3 i, body.wallpaper main section.faq .questions h3 i, body.deckBlog main section.faq .questions h3 i { margin-left: 7px; } body.faq main section.faq .questions h3 i img.in, body.wallpaper main section.faq .questions h3 i img.in, body.deckBlog main section.faq .questions h3 i img.in { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); transition-duration: 0.5s; } body.faq main section.faq .questions h3 i img.out, body.wallpaper main section.faq .questions h3 i img.out, body.deckBlog main section.faq .questions h3 i img.out { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); transition-duration: 0.5s; } body.faq main section.faq .questions p, body.wallpaper main section.faq .questions p, body.deckBlog main section.faq .questions p { font-size: 2em; color: #778899; } @media screen and (max-width: 414px) { body.faq main section.faq .questions p, body.wallpaper main section.faq .questions p, body.deckBlog main section.faq .questions p { font-size: 1.5em; } } body.faq main section.faq .questions a, body.wallpaper main section.faq .questions a, body.deckBlog main section.faq .questions a { color: #4682B4; word-break: break-all; } @media screen and (max-width: 414px) { body.faq main section.faq .questions a, body.wallpaper main section.faq .questions a, body.deckBlog main section.faq .questions a { font-size: 1.5em; } } body.faq main section.faq .questions blockquote, body.wallpaper main section.faq .questions blockquote, body.deckBlog main section.faq .questions blockquote { color: #778899; } @media screen and (max-width: 414px) { body.faq main section.faq .questions blockquote, body.wallpaper main section.faq .questions blockquote, body.deckBlog main section.faq .questions blockquote { font-size: 1.8em; } } body.faq main section.faq .questions ul li, body.wallpaper main section.faq .questions ul li, body.deckBlog main section.faq .questions ul li { font-size: 2em; color: #778899; } @media screen and (max-width: 414px) { body.faq main section.faq .questions ul li, body.wallpaper main section.faq .questions ul li, body.deckBlog main section.faq .questions ul li { font-size: 1.5em; } } body.faq main section.faq .questions ol li, body.wallpaper main section.faq .questions ol li, body.deckBlog main section.faq .questions ol li { font-size: 2em; color: #778899; } @media screen and (max-width: 414px) { body.faq main section.faq .questions ol li, body.wallpaper main section.faq .questions ol li, body.deckBlog main section.faq .questions ol li { font-size: 1.5em; } } body.faq main section.wall, body.wallpaper main section.wall, body.deckBlog main section.wall { position: relative; padding: 10px 0 70px 0; } body.faq main section.wall .dividerContent, body.wallpaper main section.wall .dividerContent, body.deckBlog main section.wall .dividerContent { margin-bottom: 40px; } body.faq main section.wall .wallrow, body.wallpaper main section.wall .wallrow, body.deckBlog main section.wall .wallrow { margin-bottom: 22px; } body.faq main section.wall h1.fntCinzel, body.wallpaper main section.wall h1.fntCinzel, body.deckBlog main section.wall h1.fntCinzel { font-size: 4em; color: #d79e54; } @media screen and (max-width: 414px) { body.faq main section.wall h1.fntCinzel, body.wallpaper main section.wall h1.fntCinzel, body.deckBlog main section.wall h1.fntCinzel { text-align: center; font-size: 2em; } } body.faq main section.wall mark, body.wallpaper main section.wall mark, body.deckBlog main section.wall mark { background: #232743; border-radius: 2px; color: #778899; } body.faq main section.wall .wallt, body.wallpaper main section.wall .wallt, body.deckBlog main section.wall .wallt { position: relative; } body.faq main section.wall .wallt .wallf, body.wallpaper main section.wall .wallt .wallf, body.deckBlog main section.wall .wallt .wallf { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/wall/wallFrame.png) 0 0 no-repeat; position: absolute; top: 6px; left: 9px; width: 83px; height: 84px; } @media screen and (max-width: 414px) { body.faq main section.wall .wallt .wallf, body.wallpaper main section.wall .wallt .wallf, body.deckBlog main section.wall .wallt .wallf { top: 0; } } body.faq main section.wall .wallt img, body.wallpaper main section.wall .wallt img, body.deckBlog main section.wall .wallt img { width: 350px; height: 250px; } body.faq main section.wall .wallt .wall_glass, body.wallpaper main section.wall .wallt .wall_glass, body.deckBlog main section.wall .wallt .wall_glass { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } body.faq main section.wall .wallt .wall_glass:hover .glass, body.wallpaper main section.wall .wallt .wall_glass:hover .glass, body.deckBlog main section.wall .wallt .wall_glass:hover .glass { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/wall/art_magnifyingGlass.png) center center no-repeat rgba(0, 0, 0, 0.2); width: 100%; height: 100%; } body.faq main section.wall .wallp h2.title, body.wallpaper main section.wall .wallp h2.title, body.deckBlog main section.wall .wallp h2.title { font-size: 3em; margin-top: 10px; color: #d79e54; } body.faq main section.wall .wallp p.subtext, body.wallpaper main section.wall .wallp p.subtext, body.deckBlog main section.wall .wallp p.subtext { font-size: 1.4em; } body.faq main section.wall .wallp ul, body.wallpaper main section.wall .wallp ul, body.deckBlog main section.wall .wallp ul { list-style-type: none; padding-left: 0; margin-top: 22px; } body.faq main section.wall .wallp ul li, body.wallpaper main section.wall .wallp ul li, body.deckBlog main section.wall .wallp ul li { font-size: 1.6em; padding-bottom: 10px; } body.faq main section.wall .wallp ul li a, body.wallpaper main section.wall .wallp ul li a, body.deckBlog main section.wall .wallp ul li a { padding: 3px; border: 1px solid #778899; color: #778899; text-decoration: none; border-radius: 3px; margin-right: 12px; margin-bottom: 12px; display: inline-block; } body.faq main section.wall .wallp ul li a:hover, body.wallpaper main section.wall .wallp ul li a:hover, body.deckBlog main section.wall .wallp ul li a:hover { color: #fff; background-color: #778899; text-decoration: none; } body.faq main .exportMsg, body.wallpaper main .exportMsg, body.deckBlog main .exportMsg { display: none; } body.faq main .deckBlogDisplay, body.wallpaper main .deckBlogDisplay, body.deckBlog main .deckBlogDisplay { background: rgba(0, 0, 0, 0.5); border: 1px solid #0c2635; overflow: hidden; border-radius: 5px; color: #fff; margin-bottom: 30px; } body.faq main .deckBlogDisplay .deck-hero, body.wallpaper main .deckBlogDisplay .deck-hero, body.deckBlog main .deckBlogDisplay .deck-hero { width: 100%; height: 150px; position: relative; } body.faq main .deckBlogDisplay .deck-hero .deck-header-image, body.wallpaper main .deckBlogDisplay .deck-hero .deck-header-image, body.deckBlog main .deckBlogDisplay .deck-hero .deck-header-image { background-color: #07202a; background-position: top center, top center; background-repeat: no-repeat; margin: 0 auto; width: 100%; height: 120px; } body.faq main .deckBlogDisplay .deck-hero .deck-factions-wrapper, body.wallpaper main .deckBlogDisplay .deck-hero .deck-factions-wrapper, body.deckBlog main .deckBlogDisplay .deck-hero .deck-factions-wrapper { z-index: 100; position: absolute; bottom: 15px; width: 100%; } body.faq main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions, body.wallpaper main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions, body.deckBlog main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions { margin: 0 auto; width: 360px; height: 30px; text-align: center; } body.faq main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction, body.wallpaper main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction, body.deckBlog main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction { width: 31px; height: 27px; display: inline-block; } body.faq main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.fire, body.wallpaper main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.fire, body.deckBlog main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.fire { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/InfluencePips_30w.png) 0 0; } body.faq main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.time, body.wallpaper main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.time, body.deckBlog main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.time { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/InfluencePips_30w.png) 0 -30px; } body.faq main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.justice, body.wallpaper main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.justice, body.deckBlog main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.justice { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/InfluencePips_30w.png) 0 -61px; } body.faq main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.primal, body.wallpaper main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.primal, body.deckBlog main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.primal { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/InfluencePips_30w.png) 0 -93px; } body.faq main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.shadow, body.wallpaper main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.shadow, body.deckBlog main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.shadow { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/InfluencePips_30w.png) 0 -126px; } body.faq main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.colorless, body.wallpaper main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.colorless, body.deckBlog main .deckBlogDisplay .deck-hero .deck-factions-wrapper .deck-factions .faction.colorless { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/InfluencePips_30w.png) 0 -160px; } body.faq main .deckBlogDisplay .deckHeader, body.wallpaper main .deckBlogDisplay .deckHeader, body.deckBlog main .deckBlogDisplay .deckHeader { padding: 4px 7px; position: relative; } body.faq main .deckBlogDisplay .deckHeader p, body.wallpaper main .deckBlogDisplay .deckHeader p, body.deckBlog main .deckBlogDisplay .deckHeader p { font-size: 2.5em; color: #d79e54; border-bottom: 1px solid #0c2635; } body.faq main .deckBlogDisplay .deckHeader .deckHeaderOptions, body.wallpaper main .deckBlogDisplay .deckHeader .deckHeaderOptions, body.deckBlog main .deckBlogDisplay .deckHeader .deckHeaderOptions { position: absolute; top: 13px; right: 10px; } body.faq main .deckBlogDisplay .deckHeader .deckHeaderOptions a.exportBtn, body.wallpaper main .deckBlogDisplay .deckHeader .deckHeaderOptions a.exportBtn, body.deckBlog main .deckBlogDisplay .deckHeader .deckHeaderOptions a.exportBtn { background: #0c2635; border-radius: 3px; color: #fff; padding: 4px 7px; } body.faq main .deckBlogDisplay .deckHeader .deckHeaderOptions a.exportBtn:hover, body.wallpaper main .deckBlogDisplay .deckHeader .deckHeaderOptions a.exportBtn:hover, body.deckBlog main .deckBlogDisplay .deckHeader .deckHeaderOptions a.exportBtn:hover { background: #33A1C9; text-decoration: none; } body.faq main .deckBlogDisplay .deckContent, body.wallpaper main .deckBlogDisplay .deckContent, body.deckBlog main .deckBlogDisplay .deckContent { padding: 4px 7px; } body.faq main .deckBlogDisplay .deckContent .sortingCont, body.wallpaper main .deckBlogDisplay .deckContent .sortingCont, body.deckBlog main .deckBlogDisplay .deckContent .sortingCont { display: block; } body.faq main .deckBlogDisplay .deckContent .smallHeader, body.wallpaper main .deckBlogDisplay .deckContent .smallHeader, body.deckBlog main .deckBlogDisplay .deckContent .smallHeader { font-size: 1.8em; } body.faq main .deckBlogDisplay .deckContent .totalCards, body.wallpaper main .deckBlogDisplay .deckContent .totalCards, body.deckBlog main .deckBlogDisplay .deckContent .totalCards { font-weight: bold; font-size: 1.8em; } body.faq main .deckBlogDisplay .deckContent ul.cardList, body.wallpaper main .deckBlogDisplay .deckContent ul.cardList, body.deckBlog main .deckBlogDisplay .deckContent ul.cardList { list-style-type: none; padding: 5px 0; } body.faq main .deckBlogDisplay .deckContent ul.cardList li, body.wallpaper main .deckBlogDisplay .deckContent ul.cardList li, body.deckBlog main .deckBlogDisplay .deckContent ul.cardList li { cursor: pointer; font-size: 1.4em; } body.faq main .deckBlogDisplay .deckContent .deckBlog_card_template, body.wallpaper main .deckBlogDisplay .deckContent .deckBlog_card_template, body.deckBlog main .deckBlogDisplay .deckContent .deckBlog_card_template { position: relative; width: 220px; height: 350px; border-radius: 5px; background: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 992px) { body.faq main .deckBlogDisplay .deckContent .deckBlog_card_template, body.wallpaper main .deckBlogDisplay .deckContent .deckBlog_card_template, body.deckBlog main .deckBlogDisplay .deckContent .deckBlog_card_template { position: absolute; left: 17em; width: 185px; height: 300px; } } body.faq.Firefox main section.search input#search-faq, body.wallpaper.Firefox main section.search input#search-faq, body.deckBlog.Firefox main section.search input#search-faq { height: auto; padding: 10px; } body.faq.Firefox main section.search input#search-wall, body.wallpaper.Firefox main section.search input#search-wall, body.deckBlog.Firefox main section.search input#search-wall { height: auto; padding: 10px; } body footer.short.eternal { padding-top: 10px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHX_Footer.webp) 0 0 repeat; } body footer.short.eternal .dividerFooterBar { position: relative; top: -34px; width: 100%; height: 49px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/dividerFill.webp) center center repeat-x; background-clip: content-box; padding-left: 91px; padding-right: 91px; text-align: center; z-index: 3; } body footer.short.eternal .dividerFooterBar .capLeft { position: absolute; top: 12px; left: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px 0px; width: 91px; height: 20px; display: inline-block; } body footer.short.eternal .dividerFooterBar .capCenter { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -321px; width: 174px; height: 49px; display: block; margin: 0 auto; } body footer.short.eternal .dividerFooterBar .capRight { position: absolute; top: 12px; right: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -20px; width: 91px; height: 20px; display: inline-block; } body footer.short.eternal .container { top: -28px; position: relative; } body footer.short.eternal .container .logo { width: auto !important; } @media screen and (max-width: 425px) { body footer.short.eternal .container .logo { display: block; text-align: center; } } body footer.short.eternal .container .logo .DWD_PHXlogo { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -370px; width: 71px; height: 105px; display: inline-block; } body footer.short.eternal .container .bottomMenu { margin-top: 50px; padding: 0 20px; position: absolute; height: 87px; display: inline; overflow: auto; } @media screen and (max-width: 425px) { body footer.short.eternal .container .bottomMenu { display: block; padding: 0; text-align: center; position: relative; margin: 10px auto; height: 55px; line-height: 2.5em; } } body footer.short.eternal .container .bottomMenu a { color: #fff6e3; font-weight: 600; font-size: 1.5em; text-transform: uppercase; padding: 0 5px; } body footer.short.eternal .container .bottomMenu .sep { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/footerLinkDivider.png) center center no-repeat; padding: 10px; } @media screen and (max-width: 1203px) { body footer.short.eternal .container .bottomMenu .sep { display: none; } } body footer.short.eternal .container .socialList { margin-top: 10px; } @media screen and (max-width: 768px) { body footer.short.eternal .container .socialList { padding-bottom: 80px; } } @media screen and (max-width: 425px) { body footer.short.eternal .container .socialList p { text-align: center; } } body footer.short.eternal .container .socialList p.copy { color: #fff6e3; line-height: 1.5em; font-size: 13px; } body footer.short.eternal .container .socialList p.socialIcons a { padding-left: 10px; display: inline-block; } body footer.short.eternal .container .socialList p.socialIcons a.fb { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -69px; width: 36px; height: 29px; } body footer.short.eternal .container .socialList p.socialIcons a.fb:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -98px; width: 36px; height: 29px; } body footer.short.eternal .container .socialList p.socialIcons a.tw { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -243px; width: 36px; height: 29px; } body footer.short.eternal .container .socialList p.socialIcons a.tw:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -40px; width: 36px; height: 29px; } body footer.short.eternal .container .socialList p.socialIcons a.rd { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -127px; width: 36px; height: 29px; } body footer.short.eternal .container .socialList p.socialIcons a.rd:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -156px; width: 36px; height: 29px; } body footer.short.eternal .container .socialList p.socialIcons a.steam { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -185px; width: 36px; height: 29px; } body footer.short.eternal .container .socialList p.socialIcons a.steam:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.webp); background-position: 0px -214px; width: 36px; height: 29px; } body.eternalChronicles { font-family: "LinBiolinum", sans-serif; color: #ffefe0; } body.eternalChronicles section.lnews { border-top: none; } body.eternalChronicles .centered { margin: 0 auto; } body.eternalChronicles .to-right { float: right; } body.eternalChronicles a:hover { text-decoration: none; } body.eternalChronicles .chronicles_header { width: 71%; } @media screen and (max-width: 1200px) { body.eternalChronicles .chronicles_header { width: 100%; } } @media screen and (max-width: 1200px) { body.eternalChronicles main { top: -18px; } } body.eternalChronicles main .main-content { width: 100%; position: relative; padding: 0; } body.eternalChronicles main .main-content::after { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/ContentBacker_Top.png), url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/ContentBacker_Tile.png); background-repeat: no-repeat, repeat-y; background-position: top, top; top: 0; left: 0; bottom: 0; right: 0; } body.eternalChronicles main .main-content .lnews, body.eternalChronicles main .main-content .eternalGameContent { background: inherit; } body.eternalChronicles main section.eternalGameContent .topbackshiftstones { position: absolute; bottom: 140em; width: 100%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/Paralax_Layer1.png) center bottom no-repeat transparent; pointer-events: none; } @media screen and (max-width: 425px) { body.eternalChronicles main section.eternalGameContent .topbackshiftstones { display: none; } } body.eternalChronicles main section.eternalGameContent .topfrontshiftstones { position: absolute; bottom: 85em; width: 100%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/Paralax_Layer2.png) center bottom no-repeat transparent; pointer-events: none; } @media screen and (max-width: 425px) { body.eternalChronicles main section.eternalGameContent .topfrontshiftstones { display: none; } } body.eternalChronicles main section.eternalGameContent .backshiftstones { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/Paralax_Layer1.png) center bottom no-repeat transparent; } body.eternalChronicles main section.eternalGameContent .frontshiftstones { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/Paralax_Layer2.png) center bottom no-repeat transparent; } body.eternalChronicles main .dividerContent { position: relative; top: 7px; width: 100%; text-align: center; z-index: 99; background: inherit; background-clip: inherit; padding-left: 0; padding-right: 0; height: inherit; } body.eternalChronicles main .more-spacing { padding-top: 3em; } @media screen and (max-width: 1200px) { body.eternalChronicles main .more-spacing { padding-top: 5em; } } body.eternalChronicles main .preorder-text { float: left; position: absolute; padding-left: 3em; margin-top: -3em; } body.eternalChronicles main .preorder-text p { font-size: 24px !important; } @media screen and (max-width: 992px) { body.eternalChronicles main .preorder-text p { font-size: 2em !important; } } @media screen and (max-width: 1200px) { body.eternalChronicles main .preorder-text { margin-top: -6em; } } @media screen and (max-width: 992px) { body.eternalChronicles main .preorder-text { float: none; position: inherit; padding-left: 0; padding-top: 0; } } body.eternalChronicles main #ecott-emailsignup .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/InputBox.png) no-repeat; background-size: 100% 100%; } body.eternalChronicles main #ecott-emailsignup input { border: none; background: transparent; padding: 0 50px; font-size: 24px; height: 131px; color: #000000; } body.eternalChronicles main #ecott-emailsignup input::placeholder { color: #414141; } body.eternalChronicles main #ecott-emailsignup input:active, body.eternalChronicles main #ecott-emailsignup input:focus { border: none; box-shadow: none; } body.eternalChronicles main .btn-container .golden-btn { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/PreorderButton.png); background-size: 100% 100%; background-repeat: no-repeat; background-color: initial; padding: 1em 2em; font-size: 36px; cursor: pointer; text-shadow: 2px 2px rgba(0, 0, 0, 0.5); color: #fff1cf; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08); } body.eternalChronicles main .btn-container .golden-btn.disabled { -webkit-filter: grayscale(100%); filter: grayscale(100%); cursor: inherit; } body.eternalChronicles main .btn-container .golden-btn.disabled:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/PreorderButton.png); } body.eternalChronicles main .btn-container .golden-btn:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/PreorderButton_over.png); text-decoration: none; } @media screen and (max-width: 767px) { body.eternalChronicles main .btn-container .golden-btn { width: 323px; font-size: 29px; padding: 0.7em 2em; margin: 0 auto; } } body.eternalChronicles main .btn-container #ecott-signup { width: 50%; padding: 10px; margin: 0 auto; } body.eternalChronicles main .footerLeftFlame, body.eternalChronicles main .footerRightFlame { bottom: 0; background-position: top left; background-repeat: no-repeat; position: absolute; z-index: -1; } @media screen and (max-width: 767px) { body.eternalChronicles main .footerLeftFlame, body.eternalChronicles main .footerRightFlame { display: none; } } body.eternalChronicles main .footerLeftFlame { width: 761px; height: 1747px; left: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/BackgroundFooter_Left.png); } body.eternalChronicles main .footerRightFlame { width: 749px; height: 1464px; right: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternalChronicles/BackgroundFooter_Right.png); } body.eternalChronicles main .product-shot { width: 80%; } body.eternalChronicles main .game-details { color: #fcfbfb; font-size: 30px !important; } body.eternalChronicles main .bullet { color: #d58a48; } body.eternalChronicles main .cream-text { color: #ffefe0; } body.eternalChronicles main .includes-list { font-size: 2em; } body.eternalChronicles main .eternal-chronicles-footer { padding-bottom: 4em; } body.eternalChronicles main .eternal-chronicles-footer .logo { max-height: 100px; } body.eternalChronicles main .eternal-chronicles-footer .legalize { margin-top: 4em; } body.omensDecks .omensDecksBannerSimple { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHXfooterTile.png) 0 0 repeat; z-index: 1; position: relative; } body.omensDecks .omensDecksBannerSimple .container { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/omens/OmensMiddleGraphic.jpg) center center no-repeat; } body.omensDecks .omensDecksBannerSimple .container h1 { text-align: center; margin: 5px 50px 0 50px; font-size: 5em; color: #ffd885; } @media screen and (max-width: 425px) { body.omensDecks .omensDecksBannerSimple .container h1 { margin: 10px 10px 0 10px; font-size: 2.8em; } } body.omensDecks .omensDecksBannerSimple .container h2 { text-align: center; margin: 0 0 37px 0; color: #9a8772; font-size: 2em; } @media screen and (max-width: 425px) { body.omensDecks .omensDecksBannerSimple .container h2 { font-size: 1.5em; } } body.omensDecks .cardTooltips { position: relative; } body.omensDecks .cardTooltipsInDeck { position: relative; } body.omensDecks .tooltip_cards_hover { position: absolute; top: -9999px; left: -9999px; width: 480px; height: 720px; overflow: hidden; z-index: 9999; } @media screen and (max-width: 425px) { body.omensDecks .tooltip_cards_hover { display: none; } } body.omensDecks .tooltip_cards_hover img { width: 100%; } body.omensDecks main { z-index: 3; margin-bottom: 0; } body.omensDecks main .dividerContent { z-index: 999; } body.omensDecks main .purpleSideL { position: absolute; top: 49px; left: 0; width: 50%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHX_purpleSideL.png) top left repeat-y transparent; } @media screen and (max-width: 425px) { body.omensDecks main .purpleSideL { display: none; } } body.omensDecks main .purpleSideR { position: absolute; top: 49px; right: 0; width: 50%; height: 100%; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/PHX_purpleSideR.png) top right repeat-y transparent; } @media screen and (max-width: 425px) { body.omensDecks main .purpleSideR { display: none; } } @media screen and (max-width: 375px) { body.omensDecks main .container { padding: 0; } } @media screen and (max-width: 375px) { body.omensDecks main .container section .row { margin: 0; } } body.omensDecks main .container section.pricing { margin-top: 25px; } body.omensDecks main .container section.pricing .row .pricingCont .gold { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px -55px; width: 170px; height: 55px; } body.omensDecks main .container section.pricing .row .pricingCont .gold p { font-size: 2.5em; line-height: 55px; } body.omensDecks main .container section.pricing .row .pricingCont .gems { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px 0px; width: 158px; height: 55px; } body.omensDecks main .container section.pricing .row .pricingCont .gems p { font-size: 2.5em; line-height: 55px; } body.omensDecks main .container section.decks { font-size: 1.4em; margin: 30px 0; } body.omensDecks main .container section.decks .row .deckBucket { padding: 0; min-height: 785px; } @media screen and (max-width: 375px) { body.omensDecks main .container section.decks .row .deckBucket { width: 375px; } } body.omensDecks main .container section.decks .row .deckBucket textarea.copyfrom { position: absolute; top: -9999px; left: -9999px; } body.omensDecks main .container section.decks .row .deckBucket.Praxis_Impulse .headers { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px -1786px; width: 387px; height: 405px; } @media screen and (max-width: 425px) { body.omensDecks main .container section.decks .row .deckBucket.Praxis_Impulse .headers { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/omens/spriteSrc/ThemeDeckHero_PraxisImpulse.png) center center no-repeat; background-size: contain; margin-left: 17px; } } @media screen and (max-width: 375px) { body.omensDecks main .container section.decks .row .deckBucket.Praxis_Impulse .headers { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/omens/spriteSrc/ThemeDeckHero_PraxisImpulse.png) center center no-repeat; background-size: contain; width: 375px; height: 395px; } } @media screen and (max-width: 375px) { body.omensDecks main .container section.decks .row .deckBucket.Praxis_Impulse .deckBody { width: 375px; } } body.omensDecks main .container section.decks .row .deckBucket.Praxis_Impulse .deckBody .post-footer .deckIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px -555px; width: 161px; height: 156px; } body.omensDecks main .container section.decks .row .deckBucket.Skycrag_Fury .headers { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px -2191px; width: 387px; height: 405px; } @media screen and (max-width: 425px) { body.omensDecks main .container section.decks .row .deckBucket.Skycrag_Fury .headers { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/omens/spriteSrc/ThemeDeckHero_SkycragFury.png) center center no-repeat; background-size: contain; margin-left: 17px; } } @media screen and (max-width: 375px) { body.omensDecks main .container section.decks .row .deckBucket.Skycrag_Fury .headers { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/omens/spriteSrc/ThemeDeckHero_SkycragFury.png) center center no-repeat; background-size: contain; width: 375px; height: 395px; } } @media screen and (max-width: 375px) { body.omensDecks main .container section.decks .row .deckBucket.Skycrag_Fury .deckBody { width: 375px; } } body.omensDecks main .container section.decks .row .deckBucket.Skycrag_Fury .deckBody .post-footer .deckIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px -867px; width: 161px; height: 156px; } body.omensDecks main .container section.decks .row .deckBucket.Argenport_Vengeance .headers { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px -3001px; width: 387px; height: 405px; } @media screen and (max-width: 425px) { body.omensDecks main .container section.decks .row .deckBucket.Argenport_Vengeance .headers { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/omens/spriteSrc/ThemeDeckHero_ArgenportVengeance.png) center center no-repeat; background-size: contain; margin-left: 17px; } } @media screen and (max-width: 375px) { body.omensDecks main .container section.decks .row .deckBucket.Argenport_Vengeance .headers { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/omens/spriteSrc/ThemeDeckHero_ArgenportVengeance.png) center center no-repeat; background-size: contain; width: 375px; height: 395px; } } @media screen and (max-width: 375px) { body.omensDecks main .container section.decks .row .deckBucket.Argenport_Vengeance .deckBody { width: 375px; } } body.omensDecks main .container section.decks .row .deckBucket.Argenport_Vengeance .deckBody .post-footer .deckIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px -400px; width: 160px; height: 155px; } body.omensDecks main .container section.decks .row .deckBucket.Hooru_Order .headers { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px -1381px; width: 387px; height: 405px; } @media screen and (max-width: 425px) { body.omensDecks main .container section.decks .row .deckBucket.Hooru_Order .headers { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/omens/spriteSrc/ThemeDeckHero_HooruOrder.png) center center no-repeat; background-size: contain; margin-left: 17px; } } @media screen and (max-width: 375px) { body.omensDecks main .container section.decks .row .deckBucket.Hooru_Order .headers { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/omens/spriteSrc/ThemeDeckHero_HooruOrder.png) center center no-repeat; background-size: contain; width: 375px; height: 395px; } } @media screen and (max-width: 375px) { body.omensDecks main .container section.decks .row .deckBucket.Hooru_Order .deckBody { width: 375px; } } body.omensDecks main .container section.decks .row .deckBucket.Hooru_Order .deckBody .post-footer .deckIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px -246px; width: 160px; height: 154px; } body.omensDecks main .container section.decks .row .deckBucket.Xenan_Mystery .headers { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px -2596px; width: 387px; height: 405px; } @media screen and (max-width: 425px) { body.omensDecks main .container section.decks .row .deckBucket.Xenan_Mystery .headers { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/omens/spriteSrc/ThemeDeckHero_XenanMystery.png) center center no-repeat; background-size: contain; margin-left: 17px; } } @media screen and (max-width: 375px) { body.omensDecks main .container section.decks .row .deckBucket.Xenan_Mystery .headers { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/omens/spriteSrc/ThemeDeckHero_XenanMystery.png) center center no-repeat; background-size: contain; width: 375px; height: 395px; } } @media screen and (max-width: 375px) { body.omensDecks main .container section.decks .row .deckBucket.Xenan_Mystery .deckBody { width: 375px; } } body.omensDecks main .container section.decks .row .deckBucket.Xenan_Mystery .deckBody .post-footer .deckIcon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px -711px; width: 161px; height: 156px; } body.omensDecks main .container section.decks .row .deckBucket .headers { position: relative; height: 405px; } body.omensDecks main .container section.decks .row .deckBucket .headers .header_cards { width: 100%; height: 147px; position: absolute; top: 0; } body.omensDecks main .container section.decks .row .deckBucket .headers .header_cards .c1_hotbox { position: absolute; left: 0; width: 120px; height: 147px; } body.omensDecks main .container section.decks .row .deckBucket .headers .header_cards .c2_hotbox { position: absolute; left: 120px; width: 138px; height: 147px; } body.omensDecks main .container section.decks .row .deckBucket .headers .header_cards .c3_hotbox { position: absolute; right: 0; width: 132px; height: 147px; } body.omensDecks main .container section.decks .row .deckBucket .headers .header_trigger { position: absolute; bottom: 0; width: 100%; height: 220px; } body.omensDecks main .container section.decks .row .deckBucket .headers .header_trigger:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px -1023px; width: 387px; height: 358px; } @media screen and (max-width: 375px) { body.omensDecks main .container section.decks .row .deckBucket .headers .header_trigger:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/omens/spriteSrc/themeDeckHover.png) bottom center no-repeat; background-size: contain; width: 375px; height: 395px; } } body.omensDecks main .container section.decks .row .deckBucket .headers .header_trigger h2 { position: absolute; bottom: 5px; left: 0; padding-left: 20px; color: #ffd885; } body.omensDecks main .container section.decks .row .deckBucket .deckBody { margin-bottom: 55px; } @media screen and (max-width: 1024px) { body.omensDecks main .container section.decks .row .deckBucket .deckBody { width: 387px; } } @media screen and (max-width: 425px) { body.omensDecks main .container section.decks .row .deckBucket .deckBody { margin-left: 17px; } } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider { display: none; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul { list-style-type: none; padding: 0; overflow: hidden; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li { position: relative; height: 55px; display: block; font-size: 1.4em; line-height: 1.3em; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li a { color: #fff; font-size: 1.4em; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li .leftCap { font-size: 1.1em; line-height: 1.65em; position: absolute; top: 0; left: 0; padding-left: 16px; z-index: 1; height: 55px; width: 57px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscp.png); } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li .textCap { position: absolute; top: 0; left: 0; padding-top: 15px; padding-left: 64px; font-size: 0.8em; width: 100%; height: 55px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscp.png); } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li .rightCap { text-align: center; font-size: 1.3em; line-height: 1.3em; position: absolute; top: 0; right: 0; padding-left: 15px; padding-top: 3px; display: inline-block; height: 55px; width: 70px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscp.png); } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.neutralColor .leftCap { background-position: 0px -715px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.neutralColor .textCap { background-position: 0px -660px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.neutralColor .rightCap { background-position: 0px -825px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.multiColor .leftCap { background-position: 0px -495px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.multiColor .textCap { background-position: 0px -440px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.multiColor .rightCap { background-position: 0px -605px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.timeColor .leftCap { background-position: 0px -1375px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.timeColor .textCap { background-position: 0px -1320px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.timeColor .rightCap { background-position: 0px -1485px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.fireColor .leftCap { background-position: 0px -770px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.fireColor .textCap { background-position: 0px -55px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.fireColor .rightCap { background-position: 0px -165px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.primalColor .leftCap { background-position: 0px -935px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.primalColor .textCap { background-position: 0px -880px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.primalColor .rightCap { background-position: 0px -1045px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.justiceColor .leftCap { background-position: 0px -275px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.justiceColor .textCap { background-position: 0px -220px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.justiceColor .rightCap { background-position: 0px -385px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.shadowColor .leftCap { background-position: 0px -1155px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.shadowColor .textCap { background-position: 0px -1100px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.shadowColor .rightCap { background-position: 0px -1265px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.fireSigil .leftCap { background-position: 0px -110px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.fireSigil .textCap { background-position: 0px -55px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.fireSigil .rightCap { background-position: 0px -165px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.timeSigil .leftCap { background-position: 0px -1430px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.timeSigil .textCap { background-position: 0px -1320px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.timeSigil .rightCap { background-position: 0px -1485px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.primalSigil .leftCap { background-position: 0px -990px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.primalSigil .textCap { background-position: 0px -880px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.primalSigil .rightCap { background-position: 0px -1045px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.justiceSigil .leftCap { background-position: 0px -330px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.justiceSigil .textCap { background-position: 0px -220px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.justiceSigil .rightCap { background-position: 0px -385px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.shadowSigil .leftCap { background-position: 0px -1210px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.shadowSigil .textCap { background-position: 0px -1100px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.shadowSigil .rightCap { background-position: 0px -1265px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.multiSigil .leftCap { background-position: 0px -550px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.multiSigil .textCap { background-position: 0px -440px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider ul li.multiSigil .rightCap { background-position: 0px -605px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider .footer { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/omens/simpleDivider.png) top center no-repeat; text-align: center; padding: 20px 0; margin-top: 20px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider .footer .btn-export-cont button { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px -178px; width: 252px; height: 68px; font-size: 2em; padding-left: 50px; color: #fff; background-color: transparent; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .deckSlider .footer .btn-export-cont button:hover { color: #fff; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_omenscore.png); background-position: 0px -110px; width: 252px; height: 68px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .post-footer p { font-size: 1.4em; padding: 10px 10px; color: #dbcce9; line-height: 1.3; height: 159px; } body.omensDecks main .container section.decks .row .deckBucket .deckBody .post-footer .deckIcon { margin: 0 auto; } html[lang=de_DE] body.omensDecks button.btn-export { font-size: 1.4em !important; } html[lang=el_GR] body.omensDecks button.btn-export { font-size: 1.2em !important; } html[lang=es_ES] body.omensDecks button.btn-export { font-size: 1.4em !important; } html[lang=fr_FR] body.omensDecks button.btn-export { font-size: 1.4em !important; } html[lang=it_IT] body.omensDecks button.btn-export { font-size: 1.4em !important; } html[lang=pt_BR] body.omensDecks button.btn-export { font-size: 1.2em !important; } html[lang=tr_TR] body.omensDecks button.btn-export { font-size: 1.2em !important; } html[lang=ru_RU] body.omensDecks button.btn-export { font-size: 1.2em !important; } .twitch-link .image-container { width: 33.3%; display: inline-block; padding-top: 3em; vertical-align: bottom; } @media screen and (max-width: 768px) { .twitch-link .image-container { padding-top: 24px; vertical-align: middle; } } .twitch-link .eternal-logo { width: 37%; } .twitch-link .twitch-logo { width: 36%; max-width: 274px; } .twitch-link .twitch-logo.prime { width: 28%; } .twitch-link .vertical-divider { padding: 0 22px; height: 108px; } @media screen and (max-width: 768px) { .twitch-link .vertical-divider { padding: 0 10px; } } .twitch-link .call-to-action-box { margin: 60px auto 20px; } .twitch-link .call-to-action-box.smaller { width: 55%; } @media screen and (max-width: 768px) { .twitch-link .call-to-action-box, .twitch-link .call-to-action-box.smaller { width: 100%; margin: 0; } } .twitch-link .call-to-action-btn { font-size: 25px; } .twitch-link .call-to-action-btn.larger-font { font-size: 29px; } .twitch-link .lead { font-size: 23px; } .twitch-link .loot-footer { font-size: 19px; padding: 3px; margin-top: -37px; } .twitch-link .wide { padding-left: 16px; } @media screen and (max-width: 768px) { .twitch-link .wide { padding-left: 0px; } } .twitch-link .wide-loot-image { margin-left: -15px; } @media screen and (max-width: 768px) { .twitch-link .wide-loot-image { margin-left: 0px; } } .twitch-link .rapscallion-bg { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/twitch/prime-exclusive/DashingRapscallion_Header_BKG.png); background-repeat: no-repeat; height: 800px; } .twitch-link .rapscallion-bg.tall { height: 832px; } @media screen and (max-width: 1210px) { .twitch-link .rapscallion-bg.tall { height: 700px; } } @media screen and (max-width: 768px) { .twitch-link .rapscallion-bg.tall { height: 750px; } } @media screen and (max-width: 420px) { .twitch-link .rapscallion-bg.tall { height: 640px; } } @media screen and (max-width: 1210px) { .twitch-link .rapscallion-bg { background-image: inherit; } } @media screen and (max-width: 768px) { .twitch-link .rapscallion-bg { height: inherit; } } .twitch-link .loot-header { color: #fff1e3; } .twitch-link h3, .twitch-link p { color: #ffe4ca; } .twitch-link a, .twitch-link a:hover { color: #abdeff; } .twitch-link .dividerContent { position: relative; top: -26px; width: 100%; height: 49px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/dividerFill.png) center center repeat-x; background-clip: content-box; padding-left: 91px; padding-right: 91px; text-align: center; z-index: 99; } @media screen and (max-width: 991px) { .twitch-link .dividerContent { display: none; } } .twitch-link .capLeft { position: absolute; top: 12px; left: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.png); background-position: 0px 0px; width: 91px; height: 20px; display: inline-block; } .twitch-link .capCenter { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.png); background-position: 0px -272px; width: 174px; height: 49px; display: block; margin: 0 auto; } .twitch-link .capRight { position: absolute; top: 12px; right: 0; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_eternal.png); background-position: 0px -20px; width: 91px; height: 20px; display: inline-block; } .twitch-link .faq-section { padding-bottom: 15em; } .twitch-link .faq-list { font-size: 22px; color: #ffe4ca; list-style: none; line-height: 9.6; } @media screen and (max-width: 1210px) { .twitch-link .faq-list { font-size: 19px; } } @media screen and (max-width: 768px) { .twitch-link .faq-list { padding-left: 0; line-height: 1.6; } } .twitch-link .faq-list li { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/twitch/prime-exclusive/GoldTrimBacker.png); background-repeat: no-repeat; background-position: 117px center; } @media screen and (max-width: 768px) { .twitch-link .faq-list li { background-image: inherit; text-align: center; } } .twitch-link .faq-list li span { padding-left: 15px; } .twitch-link .faq-list li span.small-font { font-size: 19px; } @media screen and (max-width: 1210px) { .twitch-link .faq-list li span.small-font { font-size: 15px; } } @media screen and (max-width: 768px) { .twitch-link .faq-list li span { padding-left: 0px; display: block; } } .twitch-link .faq-img { max-height: 200px; } .twitch-link.de_DE .call-to-action-btn { line-height: 1.2; font-size: 22px; margin-top: 5px; } .twitch-link.de_DE .faq-list li span.small-font { font-size: 17px; } .twitch-link.es_ES .call-to-action-btn, .twitch-link.fr_FR .call-to-action-btn, .twitch-link.ja_JP .call-to-action-btn { font-size: 18px; } .twitch-link.es_MX .call-to-action-btn, .twitch-link.it_IT .call-to-action-btn { font-size: 21px; } .twitch-link.ja_JP .loot-footer.wide { padding-left: 0px; position: relative; left: 14px; } @media screen and (max-width: 1210px) { .twitch-link.ja_JP .loot-footer.wide { left: 24px; } } @media screen and (max-width: 768px) { .twitch-link.ja_JP .loot-footer.wide { left: 10px; } } .twitch-link.it_IT .loot-footer.premium-cardback { font-size: 18px; padding-left: 11px; } .twitch-link .language-select { float: right; top: 20px; right: 20px; z-index: 100; } @media screen and (max-width: 768px) { .twitch-link .language-select { top: 9px; right: 9px; } } .twitch-link .language-dropdown { min-width: 0px; background-color: #000; border: 1px solid #4d4532; padding: 0; } .twitch-link .language-dropdown li { margin: 5px; } .twitch-link .language-buttons { padding: 1px; border-radius: 0; border: 1px solid #4d4532; background-color: #000; } .twitch-link .btn-group > .btn + .dropdown-toggle { padding-right: 0; padding-left: 0; } .twitch-link .dropdown-menu > li > a { padding: 0; } body.foxPage { overflow-x: hidden; font-family: 'Cormorant Infant', serif; background: black center center !important; } body.foxPage .font-title { font-family: 'Cormorant Unicase', serif; font-size: 36px !important; } body.foxPage .font-title.large { font-size: 44px; } body.foxPage .video-container { height: 330px; box-shadow: 0 -2px 30px 11px #d9aa41; } @media screen and (max-width: 1200px) { body.foxPage .video-container { height: 330px; } } @media screen and (max-width: 640px) { body.foxPage .video-container { height: 170px; } } body.foxPage .video-container iframe { width: 100%; height: 100%; max-width: 1500px; border: none; } body.foxPage .flex-display { display: flex; justify-content: center; } body.foxPage .banner { position: relative; } body.foxPage .banner .badges { position: absolute; bottom: 15%; right: 0; left: 21%; margin-left: auto; margin-right: auto; z-index: 2; } @media screen and (max-width: 1200px) { body.foxPage .banner .badges { bottom: 8%; } } @media screen and (max-width: 992px) { body.foxPage .banner .badges { bottom: 5%; } } body.foxPage .banner .badges .flex-display { align-items: flex-end; } body.foxPage .banner .badges .img-responsive { max-width: 100%; height: auto; } body.foxPage .badge-row { display: flex; justify-content: center; align-items: flex-end; } @media screen and (max-width: 992px) { body.foxPage .badge-row { display: block; text-align: center; flex-wrap: wrap; } } body.foxPage .buy-badge { margin-bottom: 2em; cursor: pointer; } body.foxPage .overlay { position: relative; cursor: pointer; margin-left: 10px; margin-right: 10px; } @media screen and (max-width: 640px) { body.foxPage .overlay { margin-left: 5px; margin-right: 5px; } } body.foxPage .overlay:after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: calc(100%); opacity: 0; background: white; background: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0) 100%); border-radius: 12px; } @media screen and (max-width: 1200px) { body.foxPage .overlay:after { border-radius: 7px; } } body.foxPage .overlay:hover:after { opacity: 0.5; } @media screen and (max-width: 992px) { body.foxPage .overlay:hover:after { opacity: 0; } } body.foxPage .show-small { display: none; } @media screen and (max-width: 1200px) { body.foxPage .show-small { display: inherit; } } body.foxPage .hide-xsmall { display: inherit; } @media screen and (max-width: 640px) { body.foxPage .hide-xsmall { display: none !important; } } body.foxPage .hide-small { display: inherit; } @media screen and (max-width: 1200px) { body.foxPage .hide-small { display: none !important; } } body.foxPage .header-video { position: relative; width: 100%; margin: 0 auto; } body.foxPage .header-video video { width: 100%; display: block; } body.foxPage .header-video:before { content: ''; position: absolute; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/1.png") no-repeat; background-size: contain; border-radius: 5px; top: -10%; right: 10%; bottom: -1%; left: -2%; } body.foxPage .header-video:after { content: ''; position: absolute; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/2.png") no-repeat center; background-size: contain; border-radius: 5px; top: -10%; right: 10%; bottom: -1%; left: 31%; } body.foxPage .contentApps { padding-top: 30px; } body.foxPage .contentApps .tag-title { font-size: 26px !important; line-height: 21px; } @media screen and (max-width: 640px) { body.foxPage .contentApps .tag-title { font-size: 18px !important; } } body.foxPage .content .contentLogo .align-right-img { margin-left: 60px; } @media screen and (max-width: 1200px) { body.foxPage .content .contentLogo .align-right-img { margin-left: 0; } } body.foxPage .content .contentLogo .sub-l-title { font-weight: 100; font-size: 24px; text-align: left; } @media screen and (max-width: 992px) { body.foxPage .content .contentLogo .sub-l-title { font-size: 20px; } } body.foxPage .content .contentLogo .sub-r-title { font-weight: 100; font-size: 24px; text-align: right; } @media screen and (max-width: 992px) { body.foxPage .content .contentLogo .sub-r-title { font-size: 20px; } } @media screen and (max-width: 768px) { body.foxPage .content .contentLogo .sub-r-title { text-align: left; } } body.foxPage .content .contentLogo .tag-title { font-size: 36px; text-decoration: underline; color: white; } @media screen and (max-width: 992px) { body.foxPage .content .contentLogo .tag-title { font-size: 26px; } } body.foxPage .content .contentLogo .tag-title:hover { color: #ccebff; text-decoration: none; } body.foxPage .content .contentLogo .logo-header { font-size: 45px; color: white; } body.foxPage .content .contentLogo .logo, body.foxPage .content .contentLogo .description { width: 49%; display: inline-block; margin: 0; } body.foxPage .content .contentLogo .description { vertical-align: middle; padding: 0 1em; } @media screen and (max-width: 767px) { body.foxPage .content .contentLogo .description { width: 100%; text-align: center; } } @media screen and (max-width: 767px) { body.foxPage .content .contentLogo .logo { width: 100%; } } body.foxPage .content .contentLogo .logo img { width: 100%; padding: 0 1em; max-width: 500px; } @media screen and (max-width: 767px) { body.foxPage .content .contentLogo .logo img { margin: 0 auto; display: block; } } @media screen and (min-width: 769px) { body.foxPage .content .contentLogo .logo.top { display: none; } } @media screen and (max-width: 769px) { body.foxPage .content .contentLogo .logo.bottom { display: none; } } body.foxPage .content .contentLogo .divider { height: 310px; position: relative; margin-bottom: 10px; } @media screen and (max-width: 992px) { body.foxPage .content .contentLogo .divider { height: 240px; } } @media screen and (max-width: 767px) { body.foxPage .content .contentLogo .divider { height: unset; position: unset; margin-bottom: unset; } } body.foxPage .content .contentLogo .divider::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100vw; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/grm/GameLogoDividers.png) center center no-repeat !important; background-color: transparent; z-index: -1; } @media screen and (max-width: 767px) { body.foxPage .content .contentLogo .divider::before { display: none; content: none !important; position: unset; top: unset; left: unset; transform: unset; height: unset; width: unset; } } body.foxPage .content .contentLogo .imgpad { padding: 2.7em 0; } body.foxPage .content .logoimg { position: relative; } body.foxPage .content .logoimg::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100vw; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/grm/GameSection.png) center center no-repeat !important; background-size: 100vw 272vh !important; z-index: -1; } @media screen and (max-width: 992px) { body.foxPage .content .logoimg::before { background-size: 100% 100% !important; } } @media (orientation: landscape) { body.foxPage .content .logoimg::before { background-size: 100% 100% !important; } } body.foxPage .content .contentGallery .screenshot { margin: 2em 0; } @media screen and (max-width: 640px) { body.foxPage .content .contentGallery .screenshot { width: 100%; } } @media screen and (max-width: 992px) { body.foxPage .content .contentGallery .screenshot { width: 50%; } } body.foxPage .content .contentGallery .screenshot img { width: 100%; height: 100%; margin: 0 auto; } body.foxPage .content .galleryimg { position: relative; } body.foxPage .content .galleryimg::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100vw; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/10.png") center center no-repeat !important; background-size: 100vw 86vh !important; z-index: -1; } @media screen and (max-width: 992px) { body.foxPage .content .galleryimg::before { background-size: 100% 100% !important; } } @media (orientation: landscape) { body.foxPage .content .galleryimg::before { background-size: 100% 100% !important; } } @media screen and (max-width: 992px) { body.foxPage .details { text-align: center; } } body.foxPage .details .details-bg::before { content: ''; position: absolute; top: 0; left: 26%; transform: translateX(-50%); height: 100%; width: 51%; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/14.png") left center no-repeat content-box !important; z-index: -1; background-size: contain !important; } @media screen and (max-width: 992px) { body.foxPage .details .details-bg::before { top: 156px; height: 100%; width: 100%; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/14.png") left center no-repeat content-box !important; background-size: auto; z-index: -1; background-size: 97% 56% !important; left: 9px; transform: unset; } } @media screen and (max-width: 550px) { body.foxPage .details .details-bg::before { top: 139px; } } @media screen and (max-width: 450px) { body.foxPage .details .details-bg::before { top: 89px; background-size: 95% 56% !important; } } @media screen and (max-width: 350px) { body.foxPage .details .details-bg::before { top: 78px; background-size: 93% 56% !important; } } body.foxPage .details .details-bg-right::before { content: ''; position: absolute; top: 0; left: 68%; transform: translateX(-50%); height: 100%; width: 51%; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/14.png") left center no-repeat content-box !important; z-index: -1; background-size: contain !important; } @media screen and (max-width: 1200px) { body.foxPage .details .details-bg-right::before { left: 70%; } } @media screen and (max-width: 992px) { body.foxPage .details .details-bg-right::before { top: 156px; height: 100%; width: 100%; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/14.png") left center no-repeat content-box !important; background-size: auto; z-index: -1; background-size: 97% 56% !important; left: 9px; transform: unset; } } @media screen and (max-width: 550px) { body.foxPage .details .details-bg-right::before { top: 105px; } } @media screen and (max-width: 450px) { body.foxPage .details .details-bg-right::before { top: 83px; background-size: 95% 70% !important; } } @media screen and (max-width: 350px) { body.foxPage .details .details-bg-right::before { top: 65px; background-size: 95% 76% !important; } } body.foxPage .details .img-size { width: 35%; } body.foxPage .details .img-size.full { margin-right: 108px; } @media screen and (max-width: 992px) { body.foxPage .details .img-size.full { margin-right: 0px; } } @media screen and (max-width: 992px) { body.foxPage .details .img-size { width: 51%; } } body.foxPage .details .align-right-img { margin-left: 60px; margin-bottom: 50px; } body.foxPage .details .sub-l-title { font-weight: 100; font-size: 24px; text-align: left; } @media screen and (max-width: 992px) { body.foxPage .details .sub-l-title { font-size: 20px !important; } } @media screen and (max-width: 1200px) { body.foxPage .details .sub-l-title { font-size: 22px !important; } } body.foxPage .details .sub-r-title { font-weight: 100; font-size: 24px; text-align: right; } @media screen and (max-width: 992px) { body.foxPage .details .sub-r-title { font-size: 20px; } } @media screen and (max-width: 768px) { body.foxPage .details .sub-r-title { text-align: left; } } body.foxPage .details .tag-title { font-size: 36px; color: white; } @media screen and (max-width: 1200px) { body.foxPage .details .tag-title { font-size: 30px !important; } } @media screen and (max-width: 992px) { body.foxPage .details .tag-title { font-size: 26px !important; } } body.foxPage .details .tag-title.l { text-align: left; } @media screen and (max-width: 992px) { body.foxPage .details .tag-title.l { text-align: center; } } body.foxPage .details .tag-title.r { text-align: right; } @media screen and (max-width: 992px) { body.foxPage .details .tag-title.r { text-align: center; } } body.foxPage .details .logo-header { font-size: 45px; color: white; } body.foxPage .details .logo { width: 49%; display: inline-block; margin: 0; } body.foxPage .details .description { width: 49%; display: inline-block; margin: 0; } body.foxPage .details .description { vertical-align: middle; padding: 0 1em; } @media screen and (max-width: 767px) { body.foxPage .details .description { width: 100%; text-align: center; } } @media screen and (max-width: 992px) { body.foxPage .details .logo { width: 51%; } } body.foxPage .details .logo img { width: 100%; padding: 0 1em; max-width: 500px; } @media screen and (max-width: 767px) { body.foxPage .details .logo img { margin: 0 auto; display: block; } } @media screen and (min-width: 993px) { body.foxPage .details .logo.top { display: none; } } @media screen and (max-width: 992px) { body.foxPage .details .logo.bottom { display: none; } } body.foxPage .details .divider { height: 310px; position: relative; margin-bottom: 10px; } @media screen and (max-width: 992px) { body.foxPage .details .divider { height: 240px; } } @media screen and (max-width: 767px) { body.foxPage .details .divider { height: unset; position: unset; margin-bottom: unset; } } body.foxPage .details .imgpad { padding: 2.7em 0; } body.foxPage .detailsimg { position: relative; padding-bottom: 30px; } body.foxPage .detailsimg::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) scaleY(1.1); height: 100%; width: 100vw; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/11.png") center center no-repeat !important; z-index: -3; background-size: cover !important; } body.foxPage .paddingSection { padding: 4em 0; } body.foxPage .features { margin-top: unset; } body.foxPage .features .flex-container { height: 100%; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; } body.foxPage .features .flex-row { width: auto; } body.foxPage .features .flex-item { margin: 50px; } body.foxPage .features .features-bg::before { content: ''; position: absolute; top: 0; left: 53%; transform: translateX(-52%) scaleY(1.2) scaleX(1.05); height: 100%; width: 100%; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/7.png") left center no-repeat content-box !important; z-index: -1; background-size: contain !important; } @media screen and (max-width: 1200px) { body.foxPage .features .features-bg::before { left: 50%; transform: translateX(-50%) scaleY(1.1) scaleX(1.1); height: 100%; width: 100%; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/7.png") left center content-box no-repeat !important; background-size: auto; z-index: -1; background-size: 100% 100% !important; } } @media screen and (max-width: 992px) { body.foxPage .features .features-bg::before { width: 86%; } } body.foxPage .features .img-size { width: 35%; } body.foxPage .features .align-right-img { margin-left: 60px; margin-bottom: 50px; } @media screen and (max-width: 1200px) { body.foxPage .features .align-right-img { margin-left: 0; } } body.foxPage .features .sub-l-title { font-weight: 100; font-size: 24px; text-align: left; } @media screen and (max-width: 992px) { body.foxPage .features .sub-l-title { font-size: 20px !important; } } @media screen and (max-width: 1200px) { body.foxPage .features .sub-l-title { font-size: 22px !important; } } body.foxPage .features .sub-c-title { font-weight: 100; font-size: 24px; text-align: center; } @media screen and (max-width: 992px) { body.foxPage .features .sub-c-title { font-size: 20px; } } @media screen and (max-width: 768px) { body.foxPage .features .sub-c-title { text-align: left; } } body.foxPage .features .sub-r-title { font-weight: 100; font-size: 24px; text-align: right; } @media screen and (max-width: 992px) { body.foxPage .features .sub-r-title { font-size: 20px; } } @media screen and (max-width: 768px) { body.foxPage .features .sub-r-title { text-align: left; } } body.foxPage .features .tag-title { font-size: 36px; color: white; } @media screen and (max-width: 992px) { body.foxPage .features .tag-title { font-size: 26px !important; } } body.foxPage .features .tag-title.c { text-align: center; } body.foxPage .features .tag-title.l { text-align: left; } body.foxPage .features .tag-title.r { text-align: right; } body.foxPage .features .logo-header { font-size: 45px; color: white; } body.foxPage .features .logo, body.foxPage .features .description { width: 49%; display: inline-block; margin: 0; } body.foxPage .features .description { vertical-align: middle; padding: 0 1em; } @media screen and (max-width: 767px) { body.foxPage .features .description { width: 100%; text-align: center; } } @media screen and (max-width: 767px) { body.foxPage .features .logo { width: 100%; } } body.foxPage .features .logo img { width: 100%; padding: 0 1em; max-width: 500px; } @media screen and (max-width: 767px) { body.foxPage .features .logo img { margin: 0 auto; display: block; } } @media screen and (min-width: 769px) { body.foxPage .features .logo.top { display: none; } } @media screen and (max-width: 769px) { body.foxPage .features .logo.bottom { display: none; } } body.foxPage .features .divider { height: 310px; position: relative; margin-bottom: 10px; } @media screen and (max-width: 992px) { body.foxPage .features .divider { height: 240px; } } @media screen and (max-width: 767px) { body.foxPage .features .divider { height: unset; position: unset; margin-bottom: unset; } } body.foxPage .features .imgpad { padding: 2.7em 0; } body.foxPage .featuresimg { position: relative; height: 550px; } @media screen and (max-width: 1200px) { body.foxPage .featuresimg { height: 650px; } } @media screen and (max-width: 350px) { body.foxPage .featuresimg { height: 750px; } } body.foxPage .featuresimg::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100vw; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/6.png") center center no-repeat !important; z-index: -3; } body.foxPage .newsimg { position: relative; } body.foxPage .newsimg::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100vw; min-height: 500px; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/9.png") center center no-repeat !important; background-size: 100% 100% !important; z-index: -1; } body.foxPage .img-fluid { width: 110px; height: auto; margin-right: 22px; margin-bottom: 22px; } @media screen and (max-width: 420px) { body.foxPage .img-fluid { width: 80px; } } @media screen and (max-width: 320px) { body.foxPage .img-fluid { width: 50px; } } body.foxPage .col-centered { float: none; margin: 0 auto; } body.foxPage .center-img { display: block; margin-right: auto; margin-left: auto; width: 50%; max-width: 100%; height: auto; } body.foxPage .center-img.full { width: 100%; } body.foxPage .center-img.withPadTop { padding-top: 30px; } @media screen and (max-width: 640px) { body.foxPage .center-img.withPadTop { padding-top: 0; } } body.foxPage .center-img.withPadBottom { padding-bottom: 30px; } @media screen and (max-width: 640px) { body.foxPage .center-img.withPadBottom { padding-bottom: 0; } } body.foxPage .dune-news-border { background-size: 66%; } @media screen and (max-width: 1200px) { body.foxPage .dune-news-border { background-size: 100%; } } body.foxPage .bar8 { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/8.png") center center no-repeat !important; background-size: 100vw 86vh !important; } body.foxPage .signup { margin-top: -35px; } body.foxPage .signup .text-holder { width: 60%; margin: 0 auto; padding-top: 75px; } @media screen and (max-width: 992px) { body.foxPage .signup .text-holder { width: 100%; } } @media screen and (max-width: 350px) { body.foxPage .signup .text-holder { padding-top: 10px; } } body.foxPage .signup .signupimg { position: relative; height: 350px; } body.foxPage .signup .signupimg::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100vw; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/12.png") center center no-repeat !important; background-size: 100vw 86vh !important; z-index: -1; } @media screen and (max-width: 992px) { body.foxPage .signup .signupimg::before { background-size: 100% 100% !important; } } @media (orientation: landscape) { body.foxPage .signup .signupimg::before { background-size: 100% 100% !important; } } body.foxPage .signup .flex-container { height: 100%; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; } body.foxPage .signup .flex-row { width: auto; display: flex; } body.foxPage .signup #tricks-signup { margin-top: 30px; padding-bottom: 30px; } body.foxPage .signup #tricks-signup .form-group { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/18.png") no-repeat; background-size: 100% 100%; margin-bottom: 0; } body.foxPage .signup #tricks-signup input { border: none; background: transparent; padding: 0 24px; height: 47px; color: #fff; font-size: 20px; } body.foxPage .signup #tricks-signup input:active, body.foxPage .signup #tricks-signup input:focus { border: none; box-shadow: none; } body.foxPage .signup #tricks-signup .btn-tricks { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/19.png") no-repeat; background-size: 100% 100%; border: none; padding: 1em 1em; color: white; font-size: 22px; } body.foxPage .signup #tricks-signup .btn-tricks:hover { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/20.png") no-repeat; background-size: 100% 100% !important; } body.foxPage .footer .flex-container { height: 100%; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; } body.foxPage .footer .flex-row { width: auto; } body.foxPage .footer .flex-item { margin: 50px; } @media screen and (max-width: 700px) { body.foxPage .footer .flex-item { margin: 25px; } } @media screen and (max-width: 540px) { body.foxPage .footer .flex-item { margin: 5px; } } body.foxPage .footer .footer-bg::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100%; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/21.png") center center no-repeat !important; z-index: -1; } body.foxPage .footer .footerimg { height: 350px; position: relative; } body.foxPage .footer .footerimg::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100vw; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/foxintheforest/13.png") center center no-repeat !important; background-size: 100% 100% !important; z-index: -1; } body.wog ::-webkit-scrollbar { width: 12px; } body.wog ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; } body.wog ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } @font-face { body.wog { font-family: 'BigShouldersDisplay'; src: url("/fonts/wog/BigShouldersDisplay-Bold.woff2") format("woff2"), url("/fonts/wog/BigShouldersDisplay-Bold.woff") format("woff"), url("/fonts/wog/BigShouldersDisplay-Bold.ttf") format("truetype"); } } @font-face { body.wog { font-family: 'MyriadProCondensed'; src: url("/fonts/wog/Myriad Pro Condensed.ttf") format("truetype"); } } body.wog h1, body.wog h2, body.wog h3, body.wog h4, body.wog h5 { font-family: 'BigShouldersDisplay'; } body.wog a.btn { color: #fff !important; } body.wog .img-responsive { width: 100%; } body.wog .content-box { width: 1200px; margin: 0 auto; } @media screen and (max-width: 1575px) { body.wog .content-box { width: 1000px; } } @media screen and (max-width: 1200px) { body.wog .content-box { width: 850px; } } @media screen and (max-width: 992px) { body.wog .content-box { width: 600px; } } @media screen and (max-width: 767px) { body.wog .content-box { width: 500px; } } @media screen and (max-width: 640px) { body.wog .content-box { width: 350px; } } body.wog .wide-content-box { width: 1400px; margin: 0 auto; } @media screen and (max-width: 1575px) { body.wog .wide-content-box { width: 100%; } } body.wog .video-container { background: #202020; padding: 75px 0; } body.wog h2.emphasis { font-size: 45px; display: inline-block; padding: 0 20px; border-bottom: 3px solid white; } @media screen and (max-width: 1320px) { body.wog h2.emphasis { font-size: 40px; padding: 0 15px; } } @media screen and (max-width: 1200px) { body.wog h2.emphasis { font-size: 35px; padding: 0 15px; } } @media screen and (max-width: 992px) { body.wog h2.emphasis { font-size: 30px; padding: 0 10px; } } @media screen and (max-width: 767px) { body.wog h2.emphasis { font-size: 30px; padding: 0; } } @media screen and (max-width: 640px) { body.wog h2.emphasis { border-bottom: 0px solid white; } } body.wog .body-text { padding: 0 20px; font-size: 25px; font-family: 'MyriadProCondensed'; } @media screen and (max-width: 1320px) { body.wog .body-text { font-size: 22px; } } @media screen and (max-width: 1200px) { body.wog .body-text { font-size: 20px; } } @media screen and (max-width: 992px) { body.wog .body-text { font-size: 18px; } } body.wog .title-container { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/WoG/BG_3.png"); height: 720px; background-repeat: no-repeat; background-position: center; background-size: cover; } body.wog .title-container h2 { margin-left: -4px; } body.wog .title-container .content-background { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/WoG/BG_3_Banner.png"); height: 619px; background-position: center; background-repeat: no-repeat; } body.wog .title-container .title { padding: 50px 0 20px 0px; } body.wog .title-container .title .header-decoration { display: inline-block; margin: -20px 0 0 5px; height: 37px; width: 108px; } @media screen and (max-width: 1200px) { body.wog .title-container .title .header-decoration { margin: -15px 0 0 5px; height: 35px; width: 100px; } } @media screen and (max-width: 992px) { body.wog .title-container .title .header-decoration { margin: -12px 0 0 5px; height: 30px; width: 80px; } } @media screen and (max-width: 767px) { body.wog .title-container .title .header-decoration { display: none; } } body.wog .title-container .right-hanger { float: right; margin: -80px -170px 0 0; } @media screen and (max-width: 1575px) { body.wog .title-container .right-hanger { margin: -30px -90px 0 0; width: 400px; } } @media screen and (max-width: 1200px) { body.wog .title-container .right-hanger { margin: -30px -60px 0 0; width: 350px; } } @media screen and (max-width: 992px) { body.wog .title-container .right-hanger { margin: -30px -50px 0 0; width: 250px; } } @media screen and (max-width: 767px) { body.wog .title-container .right-hanger { display: none; } } body.wog .photo-container { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/WoG/BG_5.png"); height: 706px; background-repeat: no-repeat; background-position: center; background-size: cover; padding: 110px 0; } @media screen and (max-width: 1575px) { body.wog .photo-container { height: 606px; padding: 100px 0; } } @media screen and (max-width: 1200px) { body.wog .photo-container { height: 506px; padding: 85px 0; } } @media screen and (max-width: 992px) { body.wog .photo-container { height: 705px; padding: 70px 0; } } @media screen and (max-width: 767px) { body.wog .photo-container { height: 605px; } } @media screen and (max-width: 640px) { body.wog .photo-container { height: 505px; padding: 60px 0; } } body.wog .photo-container .img-box { width: 33%; padding: 5px; display: inline-block; } body.wog .photo-container .img-box img { width: 100%; } @media screen and (max-width: 992px) { body.wog .photo-container .img-box { width: 49%; } } body.wog .zoomed-img { position: fixed; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.75); z-index: 999; opacity: 0; pointer-events: none; } body.wog .zoomed-img img { max-width: 90%; max-height: 80%; position: relative; top: -100%; / Transition / transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; } body.wog .zoomed-img:target { outline: none; top: 0; opacity: 1; pointer-events: auto; transition: all 1.2s ease; -moz-transition: all 1.2s ease; -ms-transition: all 1.2s ease; -o-transition: all 1.2s ease; -webkit-transition: all 1.2s ease; } body.wog .zoomed-img:target img { top: 0; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); } body.wog .description-separator div.section-separator { height: 10px; margin-top: -13px; } body.wog .description-separator .description-container { background: #201F21; padding: 40px; } body.wog .description-separator .description-container .wide-content-box { border-radius: 5px; border-left: 6px solid #141415; border-right: 6px solid #141415; } @media screen and (max-width: 767px) { body.wog .description-separator .description-container { padding: 15px; } } body.wog .description-separator .description-container .feature-row { display: flex; } @media screen and (max-width: 992px) { body.wog .description-separator .description-container .header-container { text-align: center; } } body.wog .description-separator .description-container .header-decoration { width: 100px; margin-bottom: 20px; height: 37px; width: 108px; } @media screen and (max-width: 1200px) { body.wog .description-separator .description-container .header-decoration { margin-bottom: 15px; } } @media screen and (max-width: 640px) { body.wog .description-separator .description-container .header-decoration { display: none; } } body.wog .description-separator .description-container .feature { width: 60%; display: inline-block; } @media screen and (max-width: 992px) { body.wog .description-separator .description-container .feature { width: 100%; } } body.wog .description-separator .description-container .splash-img { width: 39%; display: inline-block; vertical-align: top; } @media screen and (max-width: 992px) { body.wog .description-separator .description-container .splash-img { width: 100%; } } body.wog .description-separator .description-container .right-feature { flex-flow: row wrap; } body.wog .description-separator .description-container .left-feature { flex-flow: row-reverse wrap; text-align: right; } @media screen and (max-width: 992px) { body.wog .description-separator .description-container .left-feature { text-align: left; } } body.wog .description-separator .description-container .small-only { display: none; } @media screen and (max-width: 992px) { body.wog .description-separator .description-container .small-only { display: inline-block; } } @media screen and (max-width: 640px) { body.wog .description-separator .description-container .small-only { display: none; } } body.wog .section-separator { height: 0px; margin-top: -9px; } body.wog .section-separator .left-part, body.wog .section-separator .right-part { width: 35%; border-bottom: 2px solid white; display: inline-block; } body.wog .section-separator .center-part { width: 30%; display: inline-block; } body.wog .banner { height: 800px; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; -webkit-transition: background 600ms ease-out 200ms; -moz-transition: background 600ms ease-out 200ms; -o-transition: background 600ms ease-out 200ms; transition: background 600ms ease-out 200ms; } @media screen and (max-width: 992px) { body.wog .banner { height: 600px; } } body.wog .banner .banner-text { position: absolute; z-index: 999; top: 50%; left: 11.1%; width: 20%; } body.wog .banner .banner-text .brands { width: 100%; padding-bottom: 25px; } @media screen and (max-width: 992px) { body.wog .banner .banner-text .brands { padding-bottom: 15px; } } body.wog .banner .banner-text .brands .logo { padding: 0 20px; } @media screen and (max-width: 1320px) { body.wog .banner .banner-text .brands .logo { padding: 0 18px; } } @media screen and (max-width: 1200px) { body.wog .banner .banner-text .brands .logo { padding: 0 15px; } } @media screen and (max-width: 992px) { body.wog .banner .banner-text .brands .logo { padding: 0 10px; } } @media screen and (max-width: 767px) { body.wog .banner .banner-text .brands .logo { padding: 0 5px; } } @media screen and (max-width: 640px) { body.wog .banner .banner-text .brands .logo { padding: 0 3px; } } body.wog .banner .banner-text .brands .dwd-logo { width: 55%; border-right: solid 3px white; } @media screen and (max-width: 1200px) { body.wog .banner .banner-text .brands .dwd-logo { border-right: solid 2px white; } } @media screen and (max-width: 767px) { body.wog .banner .banner-text .brands .dwd-logo { border-right: solid 2px white; } } body.wog .banner .banner-text .brands .ares-logo { width: 41%; } body.wog .banner .banner-text .overlay { max-width: 200px; width: 60%; margin: 0 auto; padding-bottom: 10px; } @media screen and (max-width: 767px) { body.wog .banner .banner-text .overlay { padding-bottom: 5px; } } body.wog .newsletter-prompt { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/WoG/BG_7.png"); height: 450px; background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; } body.wog .newsletter-prompt .content-box { padding-bottom: 100px; } body.wog .newsletter-prompt .header { padding: 50px; } body.wog .newsletter-prompt .header h2 { font-size: 52px; font-weight: 400; } @media screen and (max-width: 992px) { body.wog .newsletter-prompt .header h2 { font-size: 36px; } } @media screen and (max-width: 767px) { body.wog .newsletter-prompt .header h2 { font-size: 32px; } } body.wog .newsletter-prompt .header .header-decoration { margin-top: -10px; width: 41px; height: 37px; } @media screen and (max-width: 767px) { body.wog .newsletter-prompt .header .header-decoration { display: none; } } body.wog .newsletter-prompt .form-control { color: #EEE; background-color: #292929; width: 50%; max-width: 400px; display: inline-block; border: 0px solid #ccc; border-radius: 0px; vertical-align: text-top; } body.wog .newsletter-prompt .form-sumbit { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/WoG/BG_7_EmailButton.png") no-repeat; background-size: 100% 100%; border: none; width: 36px; height: 34px; margin-left: 4px; vertical-align: text-top; } body.wog .newsletter-prompt .form-sumbit:hover { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/WoG/BG_7_EmailButton_Hover.png") no-repeat; background-size: 100% 100%; } body.wog .brand-footer { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/WoG/BG_7_Overlay.png"); height: 125px; background-repeat: no-repeat; background-position: center; background-size: cover; } body.wog .bottom-brands { margin: 0 auto; display: block; padding: 20px; max-width: 400px; } body.wog .bottom-brands .logo { padding: 0 20px; } @media screen and (max-width: 1320px) { body.wog .bottom-brands .logo { padding: 0 18px; } } @media screen and (max-width: 1200px) { body.wog .bottom-brands .logo { padding: 0 15px; } } @media screen and (max-width: 992px) { body.wog .bottom-brands .logo { padding: 0 10px; } } @media screen and (max-width: 767px) { body.wog .bottom-brands .logo { padding: 0 5px; } } @media screen and (max-width: 640px) { body.wog .bottom-brands .logo { padding: 0 3px; } } body.wog .bottom-brands .dwd-logo { width: 55%; border-right: solid 3px white; } @media screen and (max-width: 1200px) { body.wog .bottom-brands .dwd-logo { border-right: solid 2px white; } } @media screen and (max-width: 767px) { body.wog .bottom-brands .dwd-logo { border-right: solid 2px white; } } body.wog .bottom-brands .ares-logo { width: 41%; } body.wog .HeroDiv { position: absolute; bottom: -20px; width: 100%; } body.wog .HeroDiv .topLayer { height: 161px; background-position: top left; background-repeat: repeat-x; } body.wog .HeroDiv .leftCorner, body.wog .HeroDiv .rightCorner { height: 161px; position: absolute; top: 0; background-position: top left; background-repeat: no-repeat; } @media screen and (max-width: 640px) { body.wog .HeroDiv .leftCorner, body.wog .HeroDiv .rightCorner { display: none; } } body.wog .HeroDiv .leftCorner { width: 261px; left: 0; } body.wog .HeroDiv .rightCorner { width: 233px; right: 0; } body.wog .footerStone { position: relative; z-index: 998; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_FooterTile.png) bottom left repeat-x; height: 50px; } body.wog main { padding: 0 0 30px; } body.wog main .mainContentDiv { background-position: 0 0; background-repeat: repeat; } body.wog main .topBox { position: absolute; top: -91px; z-index: 1; } body.wog main .bottomBox { transform: rotate(180deg); position: absolute; bottom: 0; } body.wog main .parallaxVeryBack, body.wog main .parallaxMiddle, body.wog main .parallaxFront { background-position: center center; background-repeat: no-repeat; width: 100%; position: absolute; } @media screen and (max-width: 767px) { body.wog main .parallaxVeryBack, body.wog main .parallaxMiddle, body.wog main .parallaxFront { display: none; } } body.wog main .parallaxVeryBack { height: 850px; top: 0; } body.wog main .parallaxMiddle { height: 717px; bottom: 200px; } body.wog main .parallaxFront { height: 769px; bottom: 300px; } body.wog main .footerLeftFlame, body.wog main .footerRightFlame { bottom: 0; background-position: top left; background-repeat: no-repeat; position: absolute; } @media screen and (max-width: 767px) { body.wog main .footerLeftFlame, body.wog main .footerRightFlame { display: none; } } body.wog main .footerLeftFlame { width: 446px; height: 652px; left: 0; } body.wog main .footerRightFlame { width: 372px; height: 730px; right: 0; } body.wog main .topStones { height: 74px; background-position: top left; background-repeat: repeat-x; } body.wog main .mainContentStart { background-size: contain; background-position: top left; background-repeat: repeat-y; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_ContentFrame_Fill.png); position: relative; padding: 0; border: none; border-radius: 10px; } body.wog main .mainContentStart .sideStoneRails { position: absolute; padding-bottom: 10.5em; height: 100%; width: 32px; } @media screen and (max-width: 1200px) { body.wog main .mainContentStart .sideStoneRails { display: none; } } body.wog main .mainContentStart .sideStoneRails.left { left: -31px; } body.wog main .mainContentStart .sideStoneRails.right { right: -31px; } body.wog main .mainContentStart .centerBox { position: relative; top: -70px; z-index: 2; } body.wog main .mainContentStart .centerBox .separator { height: 4px; width: 80%; margin: 0 auto; display: block; } body.wog main .mainContentStart .centerBox section p, body.wog main .mainContentStart .centerBox section li { color: #383224; font-family: "Lora", serif; font-size: 2em; line-height: 1.4em; font-weight: 400; } @media screen and (max-width: 767px) { body.wog main .mainContentStart .centerBox section p, body.wog main .mainContentStart .centerBox section li { font-size: 1.8em; } } body.wog main .mainContentStart .centerBox section p strong, body.wog main .mainContentStart .centerBox section li strong { font-family: "Lora", serif; font-weight: 600; } body.wog main .mainContentStart .centerBox section p { margin-top: 20px; } body.wog main .mainContentStart .centerBox section h2 { color: #383224; font-family: "Alegreya", serif; font-weight: 600; font-size: 3em; margin-bottom: 20px; margin-top: 0; } body.wog main .mainContentStart .centerBox section.appInfo, body.wog main .mainContentStart .centerBox section.boxInfo, body.wog main .mainContentStart .centerBox section.howtoplay, body.wog main .mainContentStart .centerBox section.gameContent, body.wog main .mainContentStart .centerBox section.gameToSee, body.wog main .mainContentStart .centerBox section.lnews { padding: 2em 3em; } body.wog main .mainContentStart .centerBox section.appInfo strong, body.wog main .mainContentStart .centerBox section.boxInfo strong, body.wog main .mainContentStart .centerBox section.howtoplay strong, body.wog main .mainContentStart .centerBox section.gameContent strong, body.wog main .mainContentStart .centerBox section.gameToSee strong, body.wog main .mainContentStart .centerBox section.lnews strong { font-family: "Alegreya", serif; } body.wog main .mainContentStart .centerBox section.appInfo a, body.wog main .mainContentStart .centerBox section.boxInfo a, body.wog main .mainContentStart .centerBox section.howtoplay a, body.wog main .mainContentStart .centerBox section.gameContent a, body.wog main .mainContentStart .centerBox section.gameToSee a, body.wog main .mainContentStart .centerBox section.lnews a { color: #0b6786; } body.wog main .mainContentStart .centerBox section.appInfo a:hover, body.wog main .mainContentStart .centerBox section.boxInfo a:hover, body.wog main .mainContentStart .centerBox section.howtoplay a:hover, body.wog main .mainContentStart .centerBox section.gameContent a:hover, body.wog main .mainContentStart .centerBox section.gameToSee a:hover, body.wog main .mainContentStart .centerBox section.lnews a:hover { color: #0c2635; text-decoration: none; } body.wog main .mainContentStart .centerBox section.appInfo a.btn, body.wog main .mainContentStart .centerBox section.boxInfo a.btn, body.wog main .mainContentStart .centerBox section.howtoplay a.btn, body.wog main .mainContentStart .centerBox section.gameContent a.btn, body.wog main .mainContentStart .centerBox section.gameToSee a.btn, body.wog main .mainContentStart .centerBox section.lnews a.btn { width: 10em; margin: 1em auto; display: block; } body.wog main .mainContentStart .centerBox section.appInfo .content-body, body.wog main .mainContentStart .centerBox section.boxInfo .content-body, body.wog main .mainContentStart .centerBox section.howtoplay .content-body, body.wog main .mainContentStart .centerBox section.gameContent .content-body, body.wog main .mainContentStart .centerBox section.gameToSee .content-body, body.wog main .mainContentStart .centerBox section.lnews .content-body { margin-top: 2em; margin-left: 0; } body.wog main .mainContentStart .centerBox section.appInfo .content-body .expansion, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .expansion, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .expansion, body.wog main .mainContentStart .centerBox section.gameContent .content-body .expansion, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .expansion, body.wog main .mainContentStart .centerBox section.lnews .content-body .expansion { padding: 2em; border: 2px solid #383224; border-radius: 4px; } @media screen and (max-width: 640px) { body.wog main .mainContentStart .centerBox section.appInfo .content-body .expansion, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .expansion, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .expansion, body.wog main .mainContentStart .centerBox section.gameContent .content-body .expansion, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .expansion, body.wog main .mainContentStart .centerBox section.lnews .content-body .expansion { width: 375px; } } @media screen and (max-width: 420px) { body.wog main .mainContentStart .centerBox section.appInfo .content-body .expansion, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .expansion, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .expansion, body.wog main .mainContentStart .centerBox section.gameContent .content-body .expansion, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .expansion, body.wog main .mainContentStart .centerBox section.lnews .content-body .expansion { width: 100%; padding: 1em .5em; } } body.wog main .mainContentStart .centerBox section.appInfo .content-body .expansion img, body.wog main .mainContentStart .centerBox section.appInfo .content-body .expansion p, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .expansion img, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .expansion p, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .expansion img, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .expansion p, body.wog main .mainContentStart .centerBox section.gameContent .content-body .expansion img, body.wog main .mainContentStart .centerBox section.gameContent .content-body .expansion p, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .expansion img, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .expansion p, body.wog main .mainContentStart .centerBox section.lnews .content-body .expansion img, body.wog main .mainContentStart .centerBox section.lnews .content-body .expansion p { display: inline-block; } body.wog main .mainContentStart .centerBox section.appInfo .content-body .expansion img, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .expansion img, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .expansion img, body.wog main .mainContentStart .centerBox section.gameContent .content-body .expansion img, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .expansion img, body.wog main .mainContentStart .centerBox section.lnews .content-body .expansion img { width: 20%; } @media screen and (max-width: 992px) { body.wog main .mainContentStart .centerBox section.appInfo .content-body .expansion img, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .expansion img, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .expansion img, body.wog main .mainContentStart .centerBox section.gameContent .content-body .expansion img, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .expansion img, body.wog main .mainContentStart .centerBox section.lnews .content-body .expansion img { width: 25%; } } @media screen and (max-width: 420px) { body.wog main .mainContentStart .centerBox section.appInfo .content-body .expansion img, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .expansion img, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .expansion img, body.wog main .mainContentStart .centerBox section.gameContent .content-body .expansion img, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .expansion img, body.wog main .mainContentStart .centerBox section.lnews .content-body .expansion img { margin: 0 auto; display: block; width: 80px; } } body.wog main .mainContentStart .centerBox section.appInfo .content-body .expansion p, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .expansion p, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .expansion p, body.wog main .mainContentStart .centerBox section.gameContent .content-body .expansion p, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .expansion p, body.wog main .mainContentStart .centerBox section.lnews .content-body .expansion p { margin: 0 0 0 1em; width: 70%; vertical-align: middle; } @media screen and (max-width: 992px) { body.wog main .mainContentStart .centerBox section.appInfo .content-body .expansion p, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .expansion p, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .expansion p, body.wog main .mainContentStart .centerBox section.gameContent .content-body .expansion p, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .expansion p, body.wog main .mainContentStart .centerBox section.lnews .content-body .expansion p { width: 65%; } } @media screen and (max-width: 420px) { body.wog main .mainContentStart .centerBox section.appInfo .content-body .expansion p, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .expansion p, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .expansion p, body.wog main .mainContentStart .centerBox section.gameContent .content-body .expansion p, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .expansion p, body.wog main .mainContentStart .centerBox section.lnews .content-body .expansion p { margin: 0; width: 100%; text-align: center; } } body.wog main .mainContentStart .centerBox section.appInfo .content-body .content-list, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .content-list, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .content-list, body.wog main .mainContentStart .centerBox section.gameContent .content-body .content-list, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .content-list, body.wog main .mainContentStart .centerBox section.lnews .content-body .content-list { padding: 0 4em; } @media screen and (max-width: 640px) { body.wog main .mainContentStart .centerBox section.appInfo .content-body .content-list, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .content-list, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .content-list, body.wog main .mainContentStart .centerBox section.gameContent .content-body .content-list, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .content-list, body.wog main .mainContentStart .centerBox section.lnews .content-body .content-list { margin-top: 2em; width: 100%; padding: 0; } } body.wog main .mainContentStart .centerBox section.appInfo .content-body .content-list p, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .content-list p, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .content-list p, body.wog main .mainContentStart .centerBox section.gameContent .content-body .content-list p, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .content-list p, body.wog main .mainContentStart .centerBox section.lnews .content-body .content-list p { margin: 0; font-size: 1.5em; } body.wog main .mainContentStart .centerBox section.appInfo .content-body .content-list li, body.wog main .mainContentStart .centerBox section.boxInfo .content-body .content-list li, body.wog main .mainContentStart .centerBox section.howtoplay .content-body .content-list li, body.wog main .mainContentStart .centerBox section.gameContent .content-body .content-list li, body.wog main .mainContentStart .centerBox section.gameToSee .content-body .content-list li, body.wog main .mainContentStart .centerBox section.lnews .content-body .content-list li { font-size: 1.5em; } body.wog main .mainContentStart .centerBox section.appInfo img, body.wog main .mainContentStart .centerBox section.howtoplay img { height: auto; margin: 0 auto; width: 100%; max-width: 400px; display: block; } @media screen and (max-width: 420px) { body.wog main .mainContentStart .centerBox section.boxInfo { padding-top: 0; } } body.wog main .mainContentStart .centerBox section.boxInfo img { margin: 0 auto; } body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display.board { background-position-x: right; background-repeat: no-repeat; } @media screen and (max-width: 992px) { body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display.board { background-image: none !important; } } body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardLeft, body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardCenter, body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardRight { background-size: contain; background-position: top left; background-repeat: no-repeat; height: 272px; width: 194px; display: inline-block; } @media screen and (max-width: 767px) and (min-width: 640px) { body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardLeft, body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardCenter, body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardRight { width: 32%; } } @media screen and (max-width: 500px) { body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardLeft, body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardCenter, body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardRight { width: 49%; } } @media screen and (max-width: 420px) { body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardLeft.primary, body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardCenter.primary, body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardRight.primary { width: 100% !important; height: 300px !important; } } @media screen and (max-width: 420px) { body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardLeft.secondary, body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardCenter.secondary, body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardRight.secondary { display: none !important; } } @media screen and (max-width: 640px) { body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardLeft.tertiary, body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardCenter.tertiary, body.wog main .mainContentStart .centerBox section.gameContent .gameBoard_display #cardRight.tertiary { display: none !important; } } body.wog main .mainContentStart .centerBox section.logoFooter { background-size: contain; width: 100%; height: 200px; } body.wog main .mainContentStart .centerBox section.logoFooter .row { margin: 0px; } body.wog main .mainContentStart .centerBox section.logoFooter .col-dwd, body.wog main .mainContentStart .centerBox section.logoFooter .col-renegade { width: 41.666666%; padding: 0px; float: left; } @media screen and (max-width: 420px) { body.wog main .mainContentStart .centerBox section.logoFooter .col-dwd, body.wog main .mainContentStart .centerBox section.logoFooter .col-renegade { width: 50%; } } body.wog main .mainContentStart .centerBox section.logoFooter .col-renegade { margin-left: 16.66666%; } @media screen and (max-width: 420px) { body.wog main .mainContentStart .centerBox section.logoFooter .col-renegade { margin-left: 0%; } } body.wog main .mainContentStart .centerBox section.logoFooter .renegade { float: left; } body.wog main .mainContentStart .centerBox section.logoFooter .dwd { float: right; } body.wog main .mainContentStart .topBox { width: 100%; height: 110px; } body.wog main .logoFooter { background-position: bottom left; background-repeat: no-repeat; } body.wog footer { padding-top: 80px; background: #000; height: 300px; margin-top: -50px; } @media screen and (max-width: 640px) { body.wog footer { margin-top: 0px; } } body.wog .centered { margin: 0 auto; } body.wog .banner { height: auto !important; } body.wog .pb-8 { padding-bottom: 8em; } @media screen and (max-width: 992px) { body.wog .HeroDiv { bottom: -29px; } } body.wog .HeroDiv .topLayer { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDivider_FramerFill.png) top left repeat-x; } body.wog .HeroDiv .topLayer .leftCorner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDivider_FramerL.png) top left no-repeat; } body.wog .HeroDiv .topLayer .rightCorner { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDivider_FramerR.png) top left no-repeat; } body.wog main { top: 0px; } body.wog main .footerLeftFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CornerFireGreen_L.png); } body.wog main .footerRightFlame { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/CornerFireGreen_R.png); } body.wog main .topStones { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_HeroDividerTile.png); } body.wog main .mainContentDiv { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/backgroundBrickTile.png); } body.wog main .mainContentDiv .mainContentStart { margin-bottom: -90px; } body.wog main .mainContentDiv .mainContentStart .centerBox section.logoFooter { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/DRAC_ContentFrame_BottomSpaced.png); } body.wog main .mainContentDiv .mainContentStart .centerBox section .cards { display: flex; align-items: center; justify-content: center; transform: translate(73px, 0px); } @media screen and (max-width: 420px) { body.wog main .mainContentDiv .mainContentStart .centerBox section .cards { transform: none; margin-left: 155px; } } body.wog main .mainContentDiv .mainContentStart .centerBox section .card { width: 28%; } @media screen and (max-width: 420px) { body.wog main .mainContentDiv .mainContentStart .centerBox section .card { width: 60%; } } body.wog main .mainContentDiv .mainContentStart .centerBox section .card:nth-child(2) { transform: translate(-55px, 50px); } body.wog main .mainContentDiv .mainContentStart .centerBox section .card:nth-child(3) { transform: translate(-90px, 0px); } body.wog main .mainContentDiv .mainContentStart .centerBox section .card:nth-child(4) { transform: translate(-144px, 50px); } body.wog main .mainContentDiv .mainContentStart .centerBox section .video-container { height: 580px; } @media screen and (max-width: 1200px) { body.wog main .mainContentDiv .mainContentStart .centerBox section .video-container { height: 370px; } } @media screen and (max-width: 640px) { body.wog main .mainContentDiv .mainContentStart .centerBox section .video-container { height: 170px; } } body.wog main .mainContentDiv .mainContentStart .centerBox section .video-container iframe { width: 90%; height: 100%; max-width: 1500px; border: none; } body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .form-group, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .form-group, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .form-group { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/InputBox.png) no-repeat; background-size: 100% 100%; } body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup input, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup input, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText input { border: none; background: transparent; padding: 0 24px; height: 65px; color: #fff; } body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup input:active, body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup input:focus, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup input:active, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup input:focus, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText input:active, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText input:focus { border: none; box-shadow: none; } body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup input::placeholder, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup input::placeholder, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText input::placeholder { font-family: "Alegreya", serif; font-style: italic; font-size: 18px; color: #fff; } body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button, body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Normal.png) no-repeat; background-size: 100% 100%; padding: 1em 4em 1.4em; border: none; font-family: "Alegreya", serif; color: #fff; font-size: 19px; } body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Pressed.png) no-repeat; background-size: 100% 100%; color: #fff7; } body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large, body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Normal_Large.png) no-repeat center; padding: 0.3em 3.6em 0.7em; font-size: 33px; } body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Pressed_Large.png) no-repeat center; } body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large:active, body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large:focus, body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large:active, body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large:focus, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large:active, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large:focus, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large:active, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large:focus, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large:active, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large:focus, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large:active, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large:focus { border: none; outline: none; } @media screen and (max-width: 640px) { body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large, body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Normal.png) no-repeat; background-size: 100% 100%; padding: 1em 4em 1.4em; font-size: 19px; } body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup button.large:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section #clankai-emailsignup .button.large:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup button.large:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section #dwd-emailsignup .button.large:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText button.large:hover, body.wog main .mainContentDiv .mainContentStart .centerBox section .boxInfoText .button.large:hover { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/ClankButton_Pressed.png) no-repeat; background-size: 100% 100%; } } @font-face { font-family: Handwriting; src: url("/fonts/munchkin/Handwriting.ttf"); } .munchkin { font-family: Handwriting; color: #111; } .munchkin h1 { margin: 0px; } .munchkin .email-error { color: red; } .munchkin .banner { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_TopBackground.png"); height: 700px; width: 100%; background-repeat: no-repeat; background-position: 20% 0%; background-size: cover; } @media screen and (min-width: 1200px) { .munchkin .banner { height: 987px; } } .munchkin .banner .logo { max-width: 70%; margin-top: 20px; } @media screen and (min-width: 767px) { .munchkin .banner .logo { margin-top: 40px; } } @media screen and (min-width: 1200px) { .munchkin .banner .logo { margin-top: 100px; } } .munchkin .banner .video-panel { margin-top: 20px; } .munchkin .banner .video-panel iframe { z-index: 1000; position: relative; } @media screen and (min-width: 640px) { .munchkin .banner .video-panel iframe { width: 400px; height: 225px; } } @media screen and (min-width: 767px) { .munchkin .banner .video-panel iframe { width: 500px; height: 280px; } } @media screen and (min-width: 992px) { .munchkin .banner .video-panel iframe { width: 615px; height: 345px; } } @media screen and (min-width: 1200px) { .munchkin .banner .video-panel iframe { width: 900px; height: 504px; } } .munchkin .banner .button-row { margin: 0px auto; max-width: 800px; display: flex; flex-flow: row wrap; justify-content: space-around; } .munchkin .banner .button-row a { width: 206px; margin-top: 15px; z-index: 1000; position: relative; } .munchkin .banner .button-row a img { width: 100%; } .munchkin div.thank-you-page { margin: 100px auto; } .munchkin .description-box { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_KillTheMonstersPage.png"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; position: relative; width: 100%; padding: 40px 40px 40px 30px; margin: 0 auto; line-height: 100%; text-align: left; font-size: 18px; font-weight: bold; } @media screen and (min-width: 992px) { .munchkin .description-box { font-size: 20px; } } @media screen and (min-width: 640px) { .munchkin .description-box { width: 540px; } } @media screen and (min-width: 992px) { .munchkin .description-box { padding: 20px 60px 40px 40px; } } @media screen and (min-width: 1620px) { .munchkin .description-box { width: 703px; margin: -70px 0 0 -40px; padding-left: 60px; font-size: 24px; } } .munchkin .description-box h2 { font-weight: bold; text-align: center; text-decoration: underline; } @media screen and (min-width: 1620px) { .munchkin .description-box h2 { padding: 0 50px; } } .munchkin .main-content { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_MiddleBackground.png"); margin-top: -300px; padding-top: 200px; width: 100%; background-repeat: no-repeat; background-position: top center; background-size: cover; position: relative; } @media screen and (min-width: 767px) { .munchkin .main-content { margin-top: -250px; padding-top: 275px; } } @media screen and (min-width: 992px) { .munchkin .main-content { margin-top: -250px; } } @media screen and (min-width: 1200px) { .munchkin .main-content { margin-top: -240px; } } .munchkin .main-content .content-ctr { width: 100%; margin: 0 auto; position: relative; } @media screen and (min-width: 1620px) { .munchkin .main-content .content-ctr { width: 1600px; } } .munchkin .main-content .wanted-poster { display: none; } @media screen and (min-width: 1620px) { .munchkin .main-content .wanted-poster { display: inline-block; position: absolute; left: 28%; top: 6%; } } .munchkin .main-content .flex-container { margin: 0 auto; } @media screen and (min-width: 1620px) { .munchkin .main-content .flex-container { width: 1450px; display: flex; flex-flow: row wrap; align-items: flex-start; } .munchkin .main-content .flex-container div { display: inline-block; } } .munchkin .main-content div.bottom-row { max-width: 1400px; flex-direction: row-reverse; } .munchkin .main-content .img-gallery { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_ScreenshotPage.png"); padding: 20px 10px 40px 10px; margin: 0 auto; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; position: relative; width: 350px; z-index: 10; } @media screen and (min-width: 420px) { .munchkin .main-content .img-gallery { width: 400px; } } @media screen and (min-width: 540px) { .munchkin .main-content .img-gallery { width: 500px; } } @media screen and (min-width: 640px) { .munchkin .main-content .img-gallery { width: 620px; padding: 20px 10px 0px 50px; } } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery { width: 700px; } } @media screen and (min-width: 992px) { .munchkin .main-content .img-gallery { width: 753px; } } @media screen and (min-width: 1620px) { .munchkin .main-content .img-gallery { margin: 0; } } .munchkin .main-content .img-gallery .img-box { width: 190px; padding: 0 5px; display: inline-block; margin-top: -10px; } @media screen and (min-width: 640px) { .munchkin .main-content .img-gallery .img-box { width: 250px; } } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery .img-box { width: 300px; } } .munchkin .main-content .img-gallery .img-box .screencap { width: 95%; z-index: -10; position: relative; margin-top: -120px; } @media screen and (min-width: 640px) { .munchkin .main-content .img-gallery .img-box .screencap { margin-top: -157px; } } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery .img-box .screencap { margin-top: -190px; } } .munchkin .main-content .img-gallery .img-box .frame { width: 100%; } .munchkin .main-content .img-gallery .screencap1 a { display: inline-block; position: relative; } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery .screencap1 a { bottom: 15px; right: 75px; } } .munchkin .main-content .img-gallery .screencap2 a { display: inline-block; position: relative; } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery .screencap2 a { top: 35px; } } .munchkin .main-content .img-gallery .screencap3 a { display: inline-block; position: relative; } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery .screencap3 a { bottom: 40px; right: 25px; } } .munchkin .main-content .img-gallery .screencap3 .screencap { width: 90%; } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery .screencap3 .screencap { margin-top: -180px; } } .munchkin .main-content .img-gallery .screencap4 a { display: inline-block; position: relative; } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery .screencap4 a { left: 50px; top: 60px; } } .munchkin .main-content .img-gallery .screencap4 .screencap { width: 90%; margin: -140px 0 0 -5px; } @media screen and (min-width: 640px) { .munchkin .main-content .img-gallery .screencap4 .screencap { margin: -184px 0 0 -5px; } } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery .screencap4 .screencap { margin: -220px 0 0 -5px; } } .munchkin .main-content .img-gallery .screencap5 a { display: inline-block; position: relative; } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery .screencap5 a { bottom: 40px; } } .munchkin .main-content .img-gallery .screencap5 .screencap { width: 92%; } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery .screencap5 .screencap { margin: -185px 0 0 -15px; } } .munchkin .main-content .img-gallery .screencap6 a { display: inline-block; position: relative; } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery .screencap6 a { top: 40px; } } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery .screencap6 .screencap { margin: -180px 0 0 -5px; } } .munchkin .main-content .img-gallery h2 { font-family: "Open Sans", sans-serif; font-size: 30px; font-weight: bold; margin: 10px 40px 50px 40px; } @media screen and (min-width: 640px) { .munchkin .main-content .img-gallery h2 { margin-bottom: 60px; font-size: 37px; } } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery h2 { margin-bottom: 80px; font-size: 45px; } } @media screen and (min-width: 992px) { .munchkin .main-content .img-gallery h2 { margin: 20px 120px 20px 120px; } } .munchkin .main-content .img-gallery .strike { position: relative; } .munchkin .main-content .img-gallery .strike::after { content: ''; border-bottom: 4px solid black; position: absolute; left: 0; top: 50%; width: 100%; } .munchkin .main-content .img-gallery .correction { font-size: 40px; font-weight: bold; transform: rotate(-10deg); margin-top: 0px; width: 25%; position: absolute; top: 90px; left: 200px; } @media screen and (min-width: 540px) { .munchkin .main-content .img-gallery .correction { left: 250px; } } @media screen and (min-width: 640px) { .munchkin .main-content .img-gallery .correction { top: 100px; left: 350px; } } @media screen and (min-width: 767px) { .munchkin .main-content .img-gallery .correction { top: 100px; left: 400px; font-size: 70px; } } @media screen and (min-width: 992px) { .munchkin .main-content .img-gallery .correction { top: 110px; left: 450px; } } .munchkin .main-content .img-gallery .zoomed-img { position: fixed; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.75); z-index: 999; opacity: 0; pointer-events: none; } .munchkin .main-content .img-gallery .zoomed-img img { max-width: 90%; max-height: 80%; position: relative; top: -100%; / Transition */ transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; } .munchkin .main-content .img-gallery .zoomed-img:target { outline: none; top: 0; opacity: 1; pointer-events: auto; transition: all 1.2s ease; -moz-transition: all 1.2s ease; -ms-transition: all 1.2s ease; -o-transition: all 1.2s ease; -webkit-transition: all 1.2s ease; } .munchkin .main-content .img-gallery .zoomed-img:target img { top: 0; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); } .munchkin .main-content .gameplay-box { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_ShuffleAdventurePage_Tape.png"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; position: relative; width: 100%; padding: 40px 40px 40px 30px; margin: 0 auto; text-align: left; font-size: 18px; font-weight: bold; line-height: 100%; z-index: 2; } @media screen and (min-width: 992px) { .munchkin .main-content .gameplay-box { font-size: 20px; } } @media screen and (min-width: 640px) { .munchkin .main-content .gameplay-box { width: 466px; } } @media screen and (min-width: 1620px) { .munchkin .main-content .gameplay-box { margin: -260px 100px 0 0; padding-bottom: 60px; font-size: 24px; } } .munchkin .main-content .gameplay-box ul { list-style-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_Bulletpoint.png"); } .munchkin .main-content .gameplay-box h2 { font-weight: bold; text-align: center; text-decoration: underline; } @media screen and (min-width: 767px) { .munchkin .main-content .gameplay-box .squeezed { margin-right: 120px; } } @media screen and (min-width: 1620px) { .munchkin .main-content .gameplay-box .squeezed { margin-right: 0; } } .munchkin .main-content .sticky-note { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_StickyNote.png"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; position: relative; width: 279px; margin: 0 auto; font-size: 22px; font-weight: bold; padding: 40px 30px 20px 70px; line-height: 100%; } @media screen and (min-width: 767px) { .munchkin .main-content .sticky-note { margin: -150px 0 0 53%; z-index: 3; } } @media screen and (min-width: 1620px) { .munchkin .main-content .sticky-note { margin: 170px -55px 0 -50px; } } .munchkin .main-content .sticky-note p { transform: rotate(5deg); } .munchkin .main-content .newsletter-signup { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_NewsletterPage_Tape.png"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; position: relative; width: 100%; height: 375px; margin: 0 auto; padding: 40px; z-index: 2; } @media screen and (min-width: 540px) { .munchkin .main-content .newsletter-signup { width: 507px; height: 510px; } } @media screen and (min-width: 1620px) { .munchkin .main-content .newsletter-signup { margin: -20px 0 0 0; } } .munchkin .main-content .newsletter-signup h2 { font-size: 32px; font-weight: bold; margin: 60px 10px 30px 10px; } @media screen and (min-width: 540px) { .munchkin .main-content .newsletter-signup h2 { font-size: 42px; margin: 100px 10px 20px 10px; } } .munchkin .main-content .newsletter-signup input { color: #AB9B7D; background: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_NewsletterTextBox.png") no-repeat; background-size: 100% 100%; padding: 10px 10px 0px 10px; height: 40px; display: inline-block; width: 75%; border: none; border-radius: 0px; font-size: 26px; font-weight: bold; } .munchkin .main-content .newsletter-signup button { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_NewsletterSendButton1.png") no-repeat; background-size: 100% 100%; width: 42px; height: 41px; border: none; vertical-align: top; margin: -3px 0 0 -10px; } .munchkin .main-content .newsletter-signup button:hover { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_NewsletterSendButton2.png") no-repeat; background-size: 100% 100%; } .munchkin .main-content .newsletter-signup button:active { background: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_NewsletterSendButton3.png") no-repeat; background-size: 100% 100%; } .munchkin .main-content .news-ctn { display: none; } @media screen and (min-width: 540px) { .munchkin .main-content .news-ctn { display: inline-block; background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_NewsPage_Mobile_Tape.png"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; position: relative; width: 542px; height: 1052px; margin: -200px auto 0 auto; padding: 250px 0 0 160px; } } @media screen and (min-width: 1200px) { .munchkin .main-content .news-ctn { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_NewsPage_Tape.png"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; position: relative; max-width: 1352px; width: 80%; height: 585px; margin: -100px auto 0px auto; padding: 100px 0px 0px 100px; } } .munchkin .bottom-shelf { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_Ledge_cropped.png"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; position: relative; width: 100%; height: 200px; margin: 0 auto; } .munchkin .bottom-shelf .bracket { max-width: 1600px; margin: 0 auto; } .munchkin .bottom-shelf .skull { width: 150px; position: relative; bottom: 50px; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); } @media screen and (min-width: 767px) { .munchkin .bottom-shelf .skull { float: right; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } @media screen and (min-width: 1200px) { .munchkin .bottom-shelf .skull { width: 300px; bottom: 150px; } } .munchkin .bottom-shelf .wizard { display: none; } @media screen and (min-width: 767px) { .munchkin .bottom-shelf .wizard { display: inline-block; width: 300px; position: relative; bottom: 190px; } } @media screen and (min-width: 1200px) { .munchkin .bottom-shelf .wizard { bottom: 470px; right: 240px; width: 650px; } } .munchkin .footer { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/munchkin/KIN_BottomBackground.png"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; position: relative; width: 100%; height: 300px; margin: 0 auto; overflow: hidden; } @media screen and (min-width: 767px) { .munchkin .footer { height: 524px; } } .munchkin .footer .left-stack { position: absolute; bottom: 0; left: -500px; z-index: 10; } @media screen and (min-width: 767px) { .munchkin .footer .left-stack { left: -400px; } } @media screen and (min-width: 992px) { .munchkin .footer .left-stack { left: -350px; } } @media screen and (min-width: 1200px) { .munchkin .footer .left-stack { left: -200px; } } @media screen and (min-width: 1320px) { .munchkin .footer .left-stack { left: 0px; } } .munchkin .footer .right-stack { position: absolute; bottom: 0; right: -350px; z-index: 10; } @media screen and (min-width: 992px) { .munchkin .footer .right-stack { right: -300px; } } @media screen and (min-width: 1200px) { .munchkin .footer .right-stack { right: -200px; } } @media screen and (min-width: 1320px) { .munchkin .footer .right-stack { right: 0px; } } .munchkin .footer .back-stack { position: absolute; bottom: 0; left: -400px; z-index: 5; } @media screen and (min-width: 1620px) { .munchkin .footer .back-stack { left: 0px; } } .munchkin .footer .chicken-head { display: none; } @media screen and (min-width: 767px) { .munchkin .footer .chicken-head { display: inline-block; position: absolute; bottom: -50px; right: 0px; z-index: 8; } } @media screen and (min-width: 992px) { .munchkin .footer .chicken-head { right: 40px; } } @media screen and (min-width: 1200px) { .munchkin .footer .chicken-head { right: 100px; bottom: 0px; } } @media screen and (min-width: 1320px) { .munchkin .footer .chicken-head { right: 200px; } } @media screen and (min-width: 1620px) { .munchkin .footer .chicken-head { right: 20%; } } .munchkin .footer .logo-container { margin: 0px auto; max-width: 400px; display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: flex-end; padding-top: 25px; position: relative; z-index: 100; } @media screen and (min-width: 767px) { .munchkin .footer .logo-container { padding-top: 150px; } } .munchkin .footer .logo-container a { display: inline-block; width: 40%; } .munchkin .footer .logo-container .logo { width: 100%; } .munchkin footer { z-index: 100; } .Android .appStores .appleCont, .iOS .appStores .androidCont { display: none !important; } body.Mobile.Safari .androidCont { display: none; } .appStores { width: 100%; margin: 0 auto; } .appStores .androidCont, .appStores .appleCont { display: inline-block; } .appStores .androidCont .storeIcon, .appStores .appleCont .storeIcon { width: 287px; height: 85px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/lanterns/sprite_lanterns.png); background-position-x: 0px; } .appStores .androidCont .storeIcon.small-app, .appStores .appleCont .storeIcon.small-app { width: 212px; height: 61px; } .appStores .androidCont .storeIcon { background-position-y: -422px; } .appStores .androidCont .storeIcon.small-app { background-position: 0 -65px; } .appStores .androidCont .storeIcon.small-app:hover { background-position-y: -128px; } .appStores .androidCont .storeIcon:hover { background-position-y: -252px; } .appStores .appleCont .storeIcon { background-position-y: -337px; } .appStores .appleCont .storeIcon.small-app { background-position: 0 -2px; } .appStores .appleCont .storeIcon.small-app:hover { background-position-y: -191px; } .appStores .appleCont .storeIcon:hover { background-position-y: -507px; } .socialIcons a { margin: 0 1em; display: inline-block; } .socialIcons a.fb { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px -48px; width: 25px; height: 25px; } .socialIcons a.fb:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position-y: -73px; } .socialIcons a.tw { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position: 0px 0px; width: 29px; height: 24px; } .socialIcons a.tw:hover { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/sprite_global.png); background-position-y: -24px; } .Firefox header nav.navbar-eternal .navbar-collapse ul.nav li a { -webkit-text-stroke: 0.9px; } .IE header nav.navbar-eternal .navbar-collapse ul.nav li a { font-weight: 500; } .general_nav_link { color: #abdeff !important; } .deal-banner { position: absolute; right: 0; z-index: 1000; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/themes/valentinestheme/VDay2020_DealsBanner_Backer.png); background-size: contain; background-repeat: no-repeat; background-position: center; height: 210px; width: 900px; } .deal-banner.doorbot { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/themes/valentinestheme/VDay2020_DoorBotFlashSaleBanner_Backer.png); } @media screen and (max-width: 1360px) { .deal-banner { position: inherit; margin: 0 auto; width: 100%; } } @media screen and (max-width: 640px) { .deal-banner { height: 116px; } } .vote .heading { padding-top: 5em; } .vote .heading h1 { font-size: 40px; } .vote .heading p { font-size: 18px; } .vote .voting-box { padding: 5em 5em 25em; } @media screen and (max-width: 767px) { .vote .voting-box { padding: 2em 1em 5em; } } .vote .voting-box .frame { border: 30px solid transparent; border-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/vote/FrameForWeb.png) 30 stretch; } .vote .voting-box .character { position: absolute; max-width: 300px; pointer-events: none; z-index: 1000; } @media screen and (max-width: 767px) { .vote .voting-box .character { display: none; } } .vote .voting-box .character.doorbot { bottom: 81em; left: -7em; } .vote .voting-box .character.drone { bottom: 12em; right: -7em; } div.homeBanner { position: relative; z-index: 99; } div.homeBanner .lnews { position: relative; top: 60px; } div.homeBanner .container, div.homeBanner .container-fluid { width: 80%; } div.homeBanner .container .logoPosition, div.homeBanner .container-fluid .logoPosition { position: relative; z-index: 99; } div.homeBanner .container .logoPosition .flyLogoIn, div.homeBanner .container-fluid .logoPosition .flyLogoIn { margin-top: 20px; width: 575px; height: 400px; -webkit-animation-delay: -600ms; -moz-animation-delay: -600ms; -o-animation-delay: -600ms; animation-delay: -600ms; } div.homeBanner .container .logoPosition .flyLogoIn.offscreen, div.homeBanner .container-fluid .logoPosition .flyLogoIn.offscreen { display: none; } div.homeBanner .container .logoPosition .flyLogoIn a, div.homeBanner .container-fluid .logoPosition .flyLogoIn a { display: block; color: #fff; text-decoration: none; } div.homeBanner .container .logoPosition .flyLogoIn a:hover, div.homeBanner .container-fluid .logoPosition .flyLogoIn a:hover { color: #fff; } div.homeBanner .container .logoPosition .flyLogoIn a div, div.homeBanner .container-fluid .logoPosition .flyLogoIn a div { width: 575px; height: 400px; } div.homeBanner .container .logoPosition .flyLogoIn a .dwd, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .dwd { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/DWD_Horizontal.png); background-repeat: no-repeat; background-size: contain; } div.homeBanner .container .logoPosition .flyLogoIn a .dwd.wintertheme, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .dwd.wintertheme { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/themes/wintertheme/DWD_horizontal_transparent_3200px.png); } div.homeBanner .container .logoPosition .flyLogoIn a .Pokemon, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .Pokemon { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_PTCGO.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .Eternal, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .Eternal { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_Eternal.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .Clank, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .Clank { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_Clank.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .ClankInSpace, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .ClankInSpace { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_ClankInSpace.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .ClankAI, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .ClankAI { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_ClankLegacy.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .ClankAI2, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .ClankAI2 { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_CLAI2.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .EternalChronicles, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .EternalChronicles { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_CoTT.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .Sagrada, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .Sagrada { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_Sagrada.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .Root, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .Root { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_Root.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .GRM, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .GRM { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_DireWolfGameRoom.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .Dune, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .Dune { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_Dune.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .DuneImmortality, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .DuneImmortality { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/ImmortalityLogo.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .DuneUprising, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .DuneUprising { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_DuneUprising_2.webp); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .TalesOfXadia, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .TalesOfXadia { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_TalesOfXadia.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .TFITF, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .TFITF { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_FoxInTheForest.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .GoTBG, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .GoTBG { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_GoTTBG.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .ClankCatacombs, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .ClankCatacombs { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_ClankCatacombs.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .WoG, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .WoG { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_WingsOfGlory.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .Everdell, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .Everdell { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_Everdell.png); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .WildTiledWest, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .WildTiledWest { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_WTW.webp); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .Invincible, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .Invincible { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/invincible/invincible_gamelogo.webp"); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn a .DuneImperiumDigital, div.homeBanner .container-fluid .logoPosition .flyLogoIn a .DuneImperiumDigital { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/logos/Logo_DuneImperiumDigital_v2.webp"); background-size: contain; background-repeat: no-repeat; background-position: center; } div.homeBanner .container .logoPosition .flyLogoIn .logoText, div.homeBanner .container-fluid .logoPosition .flyLogoIn .logoText { font-size: 18px; text-align: center; margin: -4em 2em 0 2em; text-shadow: 1px 1px 4px #000; -webkit-animation-duration: 0.25s; -moz-animation-duration: 0.25s; -o-animation-duration: 0.25s; animation-duration: 0.25s; -webkit-animation-delay: 150ms; -moz-animation-delay: 150ms; -o-animation-delay: 150ms; animation-delay: 150ms; } @media screen and (max-width: 1200px) { div.homeBanner .container .logoPosition .flyLogoIn, div.homeBanner .container-fluid .logoPosition .flyLogoIn { display: none; } } div.homeBanner .container .drawer, div.homeBanner .container-fluid .drawer { margin: 1em 0 0 0; width: 1440px; } @media screen and (max-width: 1700px) { div.homeBanner .container .drawer, div.homeBanner .container-fluid .drawer { margin: 0; width: 1200px; } } @media screen and (max-width: 1400px) { div.homeBanner .container .drawer, div.homeBanner .container-fluid .drawer { margin: 0; width: 1000px; } } @media screen and (max-width: 1200px) { div.homeBanner .container .drawer, div.homeBanner .container-fluid .drawer { margin: 0; width: 800px; } } @media screen and (max-width: 900px) { div.homeBanner .container .drawer, div.homeBanner .container-fluid .drawer { margin: 0; width: 500px; } } @media screen and (max-width: 640px) { div.homeBanner .container .drawer, div.homeBanner .container-fluid .drawer { width: 100%; } } div.homeBanner .container .drawer .games, div.homeBanner .container-fluid .drawer .games { display: inline-block; width: 240px; } @media screen and (max-width: 640px) { div.homeBanner .container .drawer .games, div.homeBanner .container-fluid .drawer .games { width: 49%; } } div.homeBanner .container .drawer .linkUp, div.homeBanner .container-fluid .drawer .linkUp { position: relative; transition: top ease 0.5s; top: 0; color: #fff; } div.homeBanner .container .drawer .linkUp:hover, div.homeBanner .container .drawer .linkUp.hover, div.homeBanner .container-fluid .drawer .linkUp:hover, div.homeBanner .container-fluid .drawer .linkUp.hover { top: -10px; } div.homeBanner .container .drawer .gameImg, div.homeBanner .container-fluid .drawer .gameImg { overflow: hidden; } div.homeBanner .container .drawer .gameImg p, div.homeBanner .container-fluid .drawer .gameImg p { margin-top: -34px; font-size: 1.1em; color: #ffffff; } @media screen and (max-width: 640px) { div.homeBanner .container .drawer .gameImg p, div.homeBanner .container-fluid .drawer .gameImg p { display: none; } div.homeBanner .container .drawer .gameImg p span, div.homeBanner .container-fluid .drawer .gameImg p span { display: none; } } div.homeBanner .container .drawer .gameImg img, div.homeBanner .container-fluid .drawer .gameImg img { width: 100%; max-width: 234px; } @media screen and (max-width: 640px) { div.homeBanner .container .drawer .gameImg img, div.homeBanner .container-fluid .drawer .gameImg img { margin: 0 0 -15% 0; } div.homeBanner .container .drawer .gameImg img.lg, div.homeBanner .container-fluid .drawer .gameImg img.lg { display: none; } } div.homeBanner .container .drawer .gameImg img.sm, div.homeBanner .container-fluid .drawer .gameImg img.sm { display: none; } @media screen and (max-width: 640px) { div.homeBanner .container .drawer .gameImg img.sm, div.homeBanner .container-fluid .drawer .gameImg img.sm { display: block; margin: 0 !important; } } div.homeBanner .container .moreGamesDrawer, div.homeBanner .container-fluid .moreGamesDrawer { margin: 0; width: 480px; } @media screen and (max-width: 640px) { div.homeBanner .container .moreGamesDrawer, div.homeBanner .container-fluid .moreGamesDrawer { width: 100%; } } div.homeBanner .container .moreGamesDrawer .moreGames:hover, div.homeBanner .container-fluid .moreGamesDrawer .moreGames:hover { color: #fff; } div.homeBanner .container .moreGamesDrawer .moreGames h3, div.homeBanner .container-fluid .moreGamesDrawer .moreGames h3 { text-align: center; border: 1px solid #96A1A6; color: #fff; margin: 1em 0 1em 10.1em; width: 100%; padding: 1em 0; background: rgba(0, 0, 0, 0.7); } div.homeBanner .container .moreGamesDrawer .moreGames h3:hover, div.homeBanner .container-fluid .moreGamesDrawer .moreGames h3:hover { background: rgba(0, 0, 0, 0.45); } @media screen and (max-width: 1200px) { div.homeBanner .container .moreGamesDrawer .moreGames h3, div.homeBanner .container-fluid .moreGamesDrawer .moreGames h3 { margin-left: 0; margin-right: 0; } } @media screen and (max-width: 640px) { div.homeBanner .container .moreGamesDrawer .moreGames h3, div.homeBanner .container-fluid .moreGamesDrawer .moreGames h3 { width: calc(100% - 6px); } } @media screen and (max-width: 420px) { div.homeBanner .container .moreGamesDrawer .moreGames h3, div.homeBanner .container-fluid .moreGamesDrawer .moreGames h3 { padding: 2em 0; margin: 1em auto; font-size: 1em; } } div.homeBanner::before { content: ''; position: fixed; display: block; top: 0px; left: 0px; bottom: 0px; right: 0px; background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/HeroBanner_DireWolf.jpg); background-size: cover; background-repeat: no-repeat; background-position: center top; z-index: -99; -webkit-transition: background 300ms ease-out 200ms; -moz-transition: background 300ms ease-out 200ms; -o-transition: background 300ms ease-out 200ms; transition: background 300ms ease-out 200ms; } div.homeBanner.Pokemon::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_Pokemon.jpg); } div.homeBanner.Eternal::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_Eternal2.jpg); } div.homeBanner.Clank::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_Clank2.jpg); } div.homeBanner.dwd::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_DireWolf.jpg); } div.homeBanner.ClankAI::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_ClankLegacy.png); } div.homeBanner.ClankInSpace::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_ClankInSpace.jpg); } div.homeBanner.ClankCatacombs::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_Catacombs.png); } div.homeBanner.EternalChronicles::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_ECoTT.png); } div.homeBanner.ClankAI2::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_CLAI2.png); } div.homeBanner.Sagrada::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_Glass.jpg); } div.homeBanner.Root::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_ROOT.jpg); } div.homeBanner.GRM::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_GRM.jpg); } div.homeBanner.WoG::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_WOG.png); } div.homeBanner.Dune::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_DuneImperium.png); } div.homeBanner.TalesOfXadia::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_TalesOfXadia.png); } div.homeBanner.Everdell::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_Everdell.png); } div.homeBanner.Munchkin::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_Munchkin.png); } div.homeBanner.GoTBG::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_AGOTTBGDE.jpg); } div.homeBanner.TFITF::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_TheFoxInTheForest.png); } div.homeBanner.DuneImmortality::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/Immortality_HeroImage.png); } div.homeBanner.DuneUprising::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_DuneUprising.webp); } div.homeBanner.WildTiledWest::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_WTW.webp); } div.homeBanner.Invincible::before { background-image: url("https://d19y2ttatozxjp.cloudfront.net/assets/invincible/HeroBanner_invincible_2.webp"); } div.homeBanner.DuneImperiumDigital::before { background-image: url(https://d19y2ttatozxjp.cloudfront.net/assets/frontPage/heroImages/HeroBanner_DuneImperiumDigital_ArtOnly.webp); } div.shortBanner { position: relative; height: 4px; background: url(https://d19y2ttatozxjp.cloudfront.net/assets/TexturedDividerLine.png) top center repeat; } div.gameDrawer { position: relative; margin: 40px auto; z-index: 99; overflow: hidden; height: 350px; } div.gameDrawer h2 a.sm_link { font-weight: 600; font-size: 0.5em; color: #abdeff; margin-left: 12px; text-decoration: underline; margin-bottom: 4px; } div.gameDrawer.row { margin: 0; } div.gameDrawer .all-games { position: absolute; top: 66px; left: 13px; width: 2000px; height: 204px; } div.gameDrawer .arrowR { position: absolute; top: 128px; right: 0; text-align: center; padding-top: 22px; width: 20px; height: 60px; background: #0c2635; color: #fff; border: 1px solid #0a8cce; cursor: pointer; user-select: none; } div.gameDrawer .arrowR:hover { background: #0a8cce; } div.gameDrawer .arrowL { position: absolute; top: 128px; left: 10px; text-align: center; padding-top: 22px; width: 20px; height: 60px; background: #0c2635; color: #fff; border: 1px solid #0a8cce; cursor: pointer; user-select: none; } div.gameDrawer .arrowL:hover { background: #0a8cce; } div.gameDrawer .games { display: inline-block; margin: 0 5px; } div.gameDrawer .linkUp { position: relative; transition: top ease 0.5s; top: 0; } div.gameDrawer .gameHover { position: absolute; width: 180px; height: 200px; top: 0; } div.gameDrawer .gameHover:hover, div.gameDrawer .gameHover.hover { border: 1px solid #0a8cce; } @media screen and (max-width: 414px) { div.gameDrawer .gameHover { display: none; } } div.gameDrawer .gameImg { width: 180px; height: 200px; position: relative; border: 1px solid #0a0910; } div.gameDrawer .gameImg p { position: absolute; bottom: 0; width: 180px; margin: 11px 0; font-size: 1.3em; color: #ffffff; } @media screen and (max-width: 414px) { div.gameDrawer .gameImg p { width: 100%; } div.gameDrawer .gameImg p span { display: none; } } div.gameDrawer .gameImg.gpokemon { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/spriteHomeBanner/heroLOGO_pokemon.png) center center no-repeat #111; background-size: contain; } div.gameDrawer .gameImg.geternal { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/eternal/spriteSrc/PHX_LogoA.png) center center no-repeat #111; background-size: contain; } div.gameDrawer .gameImg.gclank { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/spriteHomeBanner/heroLOGO_clank.png) center center no-repeat #111; background-size: contain; } div.gameDrawer .gameImg.gclankst { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/clank/callout_expansionLogo.png) center center no-repeat #111; background-size: contain; } div.gameDrawer .gameImg.gclankis { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/productTabButton_SpaceClank.png) center center no-repeat #111; background-size: contain; } div.gameDrawer .gameImg.glanterns { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/spriteHomeBanner/heroLOGO_lanterns.png) center center no-repeat #111; background-size: contain; } div.gameDrawer .gameImg.glotus { background: url(https://d19y2ttatozxjp.cloudfront.net/assets/spriteHomeBanner/heroLOGO_lotus.png) center center no-repeat #111; background-size: contain; }